/**
 * College Aurum - 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 every template in this set follows: **never hardcode a colour,
 * radius, or spacing value.** Everything reads a custom property. Aurum is
 * an original design, not modelled on any one reference site, built around
 * a single idea: an "expensive" website is one that says less, not one that
 * says more. Every other template in this category spends its accent
 * colour generously - a gradient, a pill, a coloured band. Aurum spends it
 * on at most one hairline per element, never a fill, and leans on
 * whitespace and light-weight, wide-tracked type to do the work colour and
 * motion do elsewhere. Nothing here animates on load or pulses on hover;
 * restraint is the whole point.
 */

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

/* No alternating tint band - a banded page reads as a brochure template,
   and this design would rather every section look like a considered,
   individually placed page than a repeating pattern. Separation comes from
   the unusually large --site-section-y instead. */
[data-section-id]:nth-of-type(even) > div:not([class*="bg-"]) {
  background-color: transparent;
}

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

.site-header-accent {
  background: var(--ui-brand-900);
}

header[data-scrolled="true"] {
  box-shadow: 0 1px 0 var(--ui-line);
}

/* Wide letter-spacing on the wordmark and the primary nav - the one
   typographic signature this design repeats everywhere text is meant to
   feel considered rather than merely legible. */
header .site-container > a:first-child {
  letter-spacing: 0.02em;
}

header nav[aria-label="Main"] ul li a {
  letter-spacing: 0.04em;
  font-size: 0.86rem;
  text-transform: uppercase;
}

/* A hairline underline, not a filled state - the same restraint the
   heading ornament and the card border follow. */
header nav[aria-label="Main"] > ul > li > a {
  position: relative;
}

header nav[aria-label="Main"] > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.1rem;
  height: 1px;
  background: var(--ui-accent-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms ease;
}

header nav[aria-label="Main"] > ul > li > a:hover::after,
header nav[aria-label="Main"] > ul > li:hover > a::after {
  transform: scaleX(1);
}

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

.site-heading {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* A small centred ornament rather than a bar, pill, or gradient rule -
   the one recurring mark, borrowed from letterpress stationery rather than
   from web convention. */
.site-heading::after {
  content: "\25C6";
  display: block;
  margin-top: 1.1rem;
  font-size: 0.7rem;
  color: var(--ui-accent-600);
}

.text-center .site-heading::after {
  text-align: center;
}

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

[data-section-type="hero_banner"] > div:not(:has(img)) {
  background: var(--ui-brand-50);
}

[data-section-type="hero_banner"] .site-section {
  padding-block: clamp(5.5rem, 11vw, 9.5rem);
}

/* The scrim over a hero photograph is barely there - a hint, not a filter,
   because this design would rather the photograph itself carry the hero
   than dim it into a backdrop for type. Targets the scrim div this
   template's own hero_banner.php renders (see that file) rather than
   College Pro's markup, which this template does not reuse for its hero. */
[data-section-type="hero_banner"] .aurum-scrim {
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.1) 45%, transparent 70%);
}

[data-section-type="hero_banner"] .site-eyebrow {
  color: var(--ui-accent-600);
  letter-spacing: 0.16em;
  font-weight: 600;
}

[data-section-type="hero_banner"] .site-heading {
  font-weight: 300;
}

/* Both hero buttons stay outline-weight - no filled, loud primary here.
   A single quiet "Enquire" is worth more attention than a bright one. */
[data-section-type="hero_banner"] .site-btn-primary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

[data-section-type="hero_banner"] .site-btn-primary:hover {
  background: rgb(255 255 255 / 0.1);
}

[data-section-type="hero_banner"] .site-btn:hover {
  transform: none;
  box-shadow: none;
}

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

/* No sweep, no colour block on hover - just the border quietly changing
   from a hairline to the accent, and the whole card lifting a single
   pixel. That is the entire interaction. */
.site-card {
  border-color: var(--ui-line);
  transition: border-color 320ms ease;
}

.site-card:hover,
.site-card:focus-within {
  border-color: var(--ui-accent-500);
}

.site-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgb(0 0 0 / 0.25);
}

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

[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-accent-500);
}

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

[data-section-type="teachers"] img,
[data-section-type="teachers"] [aria-hidden="true"] {
  border-radius: 0;
  border: 1px solid var(--ui-line);
  filter: grayscale(0.25);
}

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

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

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

[data-counter] {
  font-variant-numeric: tabular-nums;
  font-family: var(--site-font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

/* A near-black panel with a single hairline rule along the top - no
 * gradient, no second colour, both light and dark mode. See College Pro's
 * stylesheet for why the brand ramp needs paired light/dark rules at all:
 * it inverts between themes, so "dark enough to carry light text" is a
 * different token depending on which theme is active. */
.site-college-stats {
  background: var(--ui-brand-900);
  border-top: 1px solid var(--ui-accent-600);
}

.dark .site-college-stats {
  background: var(--ui-brand-50);
  border-top-color: var(--ui-accent-500);
}

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

.site-college-cta {
  background: var(--ui-brand-900);
}

.dark .site-college-cta {
  background: var(--ui-brand-50);
}

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

.site-sidebar-layout main .site-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.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;
}

.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;
  font-weight: 300;
  font-style: italic;
}

[data-section-type="principal_message"] blockquote::before,
[data-section-type="director_message"] blockquote::before {
  content: none;
}

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

[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: 1px solid var(--ui-accent-600);
  outline-offset: 1px;
  border-color: transparent;
}

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

@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;
  }
}