/**
 * School Zenith — template stylesheet.
 *
 * Loaded after the shared front-end foundation and before the site's
 * compiled design tokens, so this file can restyle anything the foundation
 * provides while the site owner's colour and font choices still win over
 * both. Every colour, radius and spacing value below reads a custom
 * property — never a literal — so a school's own customisation always wins.
 *
 * This is the fourth design in the school category and the first built
 * around a corporate-affiliated day school rather than a boutique one:
 * angled banner edges instead of curves, a cut top-right corner as the one
 * recurring shape mark (the principal's portrait plate, the notice board's
 * date chip, every facility tile), and a dark navy footer rather than a
 * light one. Where Bloom pops and tilts on hover and Atrium's arches always
 * travel upward, this template's motion is a straight, confident lift —
 * nothing rotates, nothing bounces.
 */

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

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

/* ------------------------------------------------------------------ */
/* Shared shape marks                                                 */
/* ------------------------------------------------------------------ */

/* The one recurring silhouette in this template: a flat diagonal notch out
   of the top-right corner. Used on the principal's portrait plate, the
   notice board's date chip, and (mirrored) the facility tiles' corner
   badge — one idea instead of a different decorative treatment per section. */
.site-cut-corner {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.site-cut-corner-badge {
  width: 2.75rem;
  height: 2.75rem;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

.site-btn {
  letter-spacing: 0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.site-btn:hover {
  transform: translateY(-2px);
}

.site-btn:active {
  transform: translateY(0);
}

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

/* A short, angled gold rule rather than a straight one — a single skewed
   block, echoing the cut-corner mark used everywhere else in the template. */
.site-heading {
  position: relative;
  padding-bottom: 0.85rem;
}

.site-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 5px;
  background: var(--ui-accent-500);
  transform: skewX(-20deg);
}

.text-center .site-heading::after {
  left: 50%;
  transform: translateX(-50%) skewX(-20deg);
}

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

.site-hero-slider [data-slider-slide] {
  background-color: var(--ui-brand-900);
}

/* ------------------------------------------------------------------ */
/* "Why families choose us" highlight strip (achievements override)   */
/* ------------------------------------------------------------------ */

.site-highlight {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.site-highlight::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--ui-accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}

.site-highlight:hover,
.site-highlight:focus-within {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--ui-shadow-lg);
}

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

/* A delay read from a custom property the section view sets inline per item
   (--i: 0, --i: 1, ...) so a grid settles in one after another on scroll
   rather than all at once. A section that never sets --i simply gets delay
   0 — additive, not a requirement every section view must adopt. */
[data-reveal] {
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ------------------------------------------------------------------ */
/* Facility tiles                                                     */
/* ------------------------------------------------------------------ */

.site-facility-tile {
  box-shadow: var(--site-shadow-card);
}

/* ------------------------------------------------------------------ */
/* Notice board                                                       */
/* ------------------------------------------------------------------ */

[data-section-type="notice_board"] li a {
  transition: background-color 180ms ease;
}

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

[data-section-type="counter"] > div {
  border-top: 3px solid var(--ui-accent-500);
  padding-top: 1.25rem;
}

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

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

[data-section-type="cta_banner"] .site-container > div {
  position: relative;
  border-top: 4px solid var(--ui-accent-500);
}

/* ------------------------------------------------------------------ */
/* About / welcome image                                              */
/* ------------------------------------------------------------------ */

[data-section-type="about"] img {
  box-shadow: var(--site-shadow-card);
}

/* ------------------------------------------------------------------ */
/* 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;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-btn,
  .site-highlight,
  .site-facility-tile img {
    transition: none !important;
  }
}