/**
 * College Pro — template stylesheet.
 *
 * Loaded after the shared front-end foundation (resources/css/site.css) and
 * before the site's compiled design tokens, so this can restyle anything the
 * foundation provides while the site owner's own colour and font choices
 * still win over both.
 *
 * Same rule School Modern follows: **never hardcode a colour, radius, or
 * spacing value.** Everything reads a custom property, which is the only
 * reason the Live Design Panel can recolour an entire college website
 * instantly. The visual register is deliberately squarer and quieter than
 * School Modern's — a college prospectus reads as capable rather than
 * playful, per this template's own manifest description — so corners default
 * tighter (see manifest.json's --site-radius) and decoration is a straight
 * rule rather than a pill.
 */

/* ------------------------------------------------------------------ */
/* Section rhythm                                                     */
/* ------------------------------------------------------------------ */

[data-section-id]:nth-of-type(even) > div:not([class*="bg-"]) {
  background-color: var(--ui-surface-muted);
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.site-header-accent {
  background: linear-gradient(
    100deg,
    var(--ui-brand-800) 0%,
    var(--ui-brand-600) 55%,
    var(--ui-brand-500) 100%
  );
}

header[data-scrolled="true"] {
  box-shadow: var(--ui-shadow-md);
}

/* ------------------------------------------------------------------ */
/* Headings                                                           */
/* ------------------------------------------------------------------ */

/* A straight two-colour rule rather than School Modern's pill — the more
   formal register this template's manifest describes. */
.site-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 0.875rem;
  background: linear-gradient(90deg, var(--ui-brand-600) 0 60%, var(--ui-accent-500) 60% 100%);
}

.text-center .site-heading::after {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */

[data-section-type="hero_banner"] > div:not(:has(img)) {
  background:
    radial-gradient(50rem 34rem at 8% -15%, color-mix(in oklch, var(--ui-brand-600) 14%, transparent), transparent 62%),
    radial-gradient(34rem 26rem at 104% 120%, color-mix(in oklch, var(--ui-accent-500) 12%, transparent), transparent 55%),
    var(--ui-surface);
}

[data-section-type="hero_banner"] .site-section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* ------------------------------------------------------------------ */
/* Cards (courses, facilities, testimonials, FAQ, and any generic     */
/* schema-driven section that falls back to the shared card layout)   */
/* ------------------------------------------------------------------ */

.site-card {
  position: relative;
}

.site-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ui-brand-600), var(--ui-accent-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms ease;
}

.site-card:hover::before,
.site-card:focus-within::before {
  transform: scaleX(1);
}

/* ------------------------------------------------------------------ */
/* Notice board, examination results, governance documents            */
/* ------------------------------------------------------------------ */

/* All three list types share this left-border scan affordance — a college
   site has three separate "official list" sections, and giving them one
   consistent interaction makes the pattern recognisable rather than three
   slightly different ideas of a list row. */
[data-section-type="notice_board"] li a,
[data-section-type="results_list"] li a,
[data-section-type="governance_list"] li a {
  transition: color 160ms ease;
}

/* ------------------------------------------------------------------ */
/* Departments                                                        */
/* ------------------------------------------------------------------ */

[data-section-type="departments"] .site-card:hover {
  border-color: var(--ui-brand-300);
}

/* ------------------------------------------------------------------ */
/* Teachers / faculty directory                                       */
/* ------------------------------------------------------------------ */

/* A squared frame rather than the rounded one the shared component uses
   elsewhere — a faculty photograph reads more like a staff-directory entry
   this way, closer to how a college prospectus lays out its department
   heads. */
[data-section-type="teachers"] img,
[data-section-type="teachers"] [aria-hidden="true"] {
  border-radius: 0;
  border: 1px solid var(--ui-line);
}

/* ------------------------------------------------------------------ */
/* Gallery                                                            */
/* ------------------------------------------------------------------ */

[data-section-type="gallery"] a {
  border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Counters                                                           */
/* ------------------------------------------------------------------ */

[data-counter] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* The inverted statistics band on the home page.
 *
 * The brand ramp *inverts* between themes — in light mode brand-900 is the
 * darkest step, in dark mode it is the lightest — so a band written once
 * against brand-800/900 would be a dark panel with white text in light mode
 * and a near-white panel with white text in dark mode. Hence two rules
 * naming different ends of the same ramp: the requirement is "dark enough to
 * carry white text", and which token satisfies that is theme-dependent. */
.site-college-stats {
  background: linear-gradient(
    115deg,
    var(--ui-brand-900) 0%,
    var(--ui-brand-800) 55%,
    var(--ui-brand-700) 100%
  );
}

.dark .site-college-stats {
  background: linear-gradient(
    115deg,
    var(--ui-brand-50) 0%,
    var(--ui-brand-100) 55%,
    var(--ui-brand-200) 100%
  );
}

/* ------------------------------------------------------------------ */
/* Call to action                                                     */
/* ------------------------------------------------------------------ */

/* Same inversion problem, same treatment. A touch lighter than the stats
   band so a page carrying both does not read as two identical slabs. */
.site-college-cta {
  background: linear-gradient(
    115deg,
    var(--ui-brand-700) 0%,
    var(--ui-brand-600) 60%,
    var(--ui-brand-500) 100%
  );
}

.dark .site-college-cta {
  background: linear-gradient(
    115deg,
    var(--ui-brand-100) 0%,
    var(--ui-brand-200) 60%,
    var(--ui-brand-300) 100%
  );
}

/* ------------------------------------------------------------------ */
/* Sidebar layout                                                     */
/* ------------------------------------------------------------------ */

/* Sections bring their own .site-container, which centres them at the full
   page width. Inside the sidebar layout's narrower column that container is
   already inside a container, so its gutter padding doubles up and its
   max-width fights the grid. Neutralised for the main column only — the
   sidebar beside it is the layout's own markup and wants none of this. */
.site-sidebar-layout main .site-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* The layout supplies its own vertical rhythm around the grid, so the first
   and last sections inside it should not add a second helping. */
.site-sidebar-layout main > [data-section-id]:first-child .site-section {
  padding-block-start: 0;
}

.site-sidebar-layout main > [data-section-id]:last-child .site-section {
  padding-block-end: 0;
}

/* The alternating tint reads as banding across the full page width; inside a
   column it just looks like one section is broken. */
.site-sidebar-layout [data-section-id]:nth-of-type(even) > div:not([class*="bg-"]) {
  background-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Principal's / director's message                                   */
/* ------------------------------------------------------------------ */

[data-section-type="principal_message"] blockquote,
[data-section-type="director_message"] blockquote {
  position: relative;
}

[data-section-type="principal_message"] blockquote::before,
[data-section-type="director_message"] blockquote::before {
  content: "\201C";
  position: absolute;
  top: -2.25rem;
  left: -0.5rem;
  font-family: var(--site-font-heading);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--ui-brand-500);
  opacity: 0.16;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Admission / contact forms                                          */
/* ------------------------------------------------------------------ */

/* Squared inputs, matching the template's overall corner treatment — the
   shared partial reads --site-radius-sm for its inputs already, so this
   only needs to exist if a design wants to diverge further, which College
   Pro does not; kept here as a single override point rather than none. */
[data-section-type="admission_form"] input:focus,
[data-section-type="admission_form"] select:focus,
[data-section-type="admission_form"] textarea:focus,
[data-section-type="contact_form"] input:focus,
[data-section-type="contact_form"] select:focus,
[data-section-type="contact_form"] textarea:focus {
  outline: 2px solid var(--ui-brand-500);
  outline-offset: 1px;
  border-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Print                                                              */
/* ------------------------------------------------------------------ */

/* Fee structures, admission forms, and examination datesheets are printed
   far more than most pages on this kind of site. */
@media print {
  header,
  footer,
  .site-btn,
  [data-nav-toggle] {
    display: none !important;
  }

  .site-section {
    padding-block: 1rem;
  }

  .site-prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}