/* ===========================================================================
 * SGSC 1.0.0
 *
 * The school's own theme, drawn from its crest. Deep institutional green
 * carries the structure, gold marks and never fills, white holds every
 * reading surface, and red is left for genuine alerts.
 *
 * Colour weighting is deliberate and roughly 60/25/10/5 — white, green, gold,
 * everything else. Gold is the easiest of these to overdo: it is used for
 * icons, rules, date chips and active indicators, and never as a background
 * behind body text, where its contrast against white fails.
 *
 * Every rule is scoped to [data-site-theme="sgsc"], so deactivating the theme
 * removes all of it. No JavaScript — the package format forbids executable
 * code, and everything below is CSS.
 *
 * Contents
 *   1.  Palette extensions
 *   2.  Typography, English and Bangla
 *   3.  Framed cards
 *   4.  Notice board
 *   5.  Message cards
 *   6.  Statistics
 *   7.  Navigation and header
 *   8.  Hero
 *   9.  Buttons
 *   10. Footer
 *   11. Dark mode
 *   12. Motion and accessibility
 *   13. Responsive
 * ======================================================================== */

/* --- 1. Palette extensions ---------------------------------------------- */

[data-site-theme="sgsc"] {
  /* Sampled from the crest rather than chosen: the average of every gold
     pixel in the ring, and of every green pixel in the field. */
  --sg-green: var(--th-primary);
  --sg-green-deep: var(--th-secondary);
  --sg-gold: var(--th-accent);
  --sg-gold-soft: color-mix(in oklab, var(--th-accent) 14%, transparent);
  --sg-gold-line: color-mix(in oklab, var(--th-accent) 55%, transparent);

  /* Reserved for alerts and nothing else. Present as a token so a component
     that genuinely needs it does not invent its own red. */
  --sg-alert: #dd2a29;

  --sg-rule: color-mix(in oklab, var(--th-primary) 12%, transparent);

  /* The page ground. Cards stay white (--th-bg) and sit on this, which is what
     gives the homepage its layered look; making the page itself white would
     flatten every card into the background. */
  --sg-page: #f3f6f4;

  background-color: var(--sg-page);
}

/* The main column carries the tint; the header and footer paint their own
   green, so they are left alone. */
[data-site-theme="sgsc"] main {
  background-color: var(--sg-page);
}

/* --- 2. Typography, English and Bangla ----------------------------------- */

/* Bangla needs its own face — the Latin heading font has no Bengali glyphs, and
   without this the script falls back to whatever the OS substitutes, which
   clips ascenders and breaks conjuncts. The application already loads Hind
   Siliguri; naming it first for Bengali text keeps that face in charge
   wherever Bangla appears, including inside a heading. */
[data-site-theme="sgsc"] :lang(bn),
[data-site-theme="sgsc"] [lang="bn"] {
  font-family: var(--font-bengali), "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  /* Bengali sits taller than Latin at the same size; a touch more leading
     stops matra strokes colliding between lines. */
  line-height: 1.85;
}

[data-site-theme="sgsc"] h1,
[data-site-theme="sgsc"] h2,
[data-site-theme="sgsc"] h3 {
  letter-spacing: -0.015em;
}

/* Body copy is capped at a comfortable measure; full-width paragraphs on a
   wide monitor are the commonest readability failure on school sites. */
[data-site-theme="sgsc"] .th-framed-body p {
  max-width: 74ch;
}

/* --- 3. Framed cards ----------------------------------------------------- */

[data-site-theme="sgsc"] .th-framed {
  border-color: var(--sg-rule);
}

[data-site-theme="sgsc"] .th-framed-header {
  /* A slightly deeper gradient than the base, so the masthead reads as solid
     institutional green rather than a tint. */
  background: linear-gradient(100deg, var(--sg-green) 0%, var(--sg-green-deep) 100%);
}

/* The hairline under a section heading, in gold. Short and heavy: it marks the
   heading without dividing the page. */
[data-site-theme="sgsc"] .th-divider {
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--sg-gold);
}

/* --- 4. Notice board ----------------------------------------------------- */

/* The date block: green day over a gold month, the shape a parent scans down
   a notice list looking for. */
[data-site-theme="sgsc"] [data-section="notices"] .th-card {
  background: var(--th-bg);
  border-color: var(--sg-rule);
}

@media (hover: hover) and (pointer: fine) {
  [data-site-theme="sgsc"] [data-section="notices"] .th-card:hover {
    border-color: var(--sg-gold-line);
  }
}

/* --- 5. Message cards ---------------------------------------------------- */

/* Chairman and Principal portraits carry a gold edge — the one place a photo
   is framed, which is what makes these two panels read as formal. */
[data-site-theme="sgsc"] [data-section="message"] img {
  border: 3px solid var(--sg-gold);
  border-radius: calc(var(--th-radius) * 0.6);
}

[data-site-theme="sgsc"] [data-section="message"] blockquote,
[data-site-theme="sgsc"] [data-section="message"] .th-message-body {
  border-inline-start: 3px solid var(--sg-gold-line);
  padding-inline-start: 1rem;
  font-style: italic;
}

/* --- 6. Statistics ------------------------------------------------------- */

/* Figures in gold on the green band: the one place gold is allowed to be the
   loudest thing on screen, because the numbers are the message. */
[data-site-theme="sgsc"] [data-section="statistics"] [data-count-up],
[data-site-theme="sgsc"] [data-section="statistics"] .th-stat-value {
  color: var(--sg-gold);
  font-family: var(--th-font-heading);
  letter-spacing: -0.02em;
}

/* --- 7. Navigation and header -------------------------------------------- */

[data-site-theme="sgsc"] header {
  border-bottom: 3px solid var(--sg-gold);
}

/* A gold underline that grows from the centre. Animated with transform on a
   pseudo-element, so it never triggers layout. */
[data-site-theme="sgsc"][data-nav="underline"] header nav > ul > li > a::after,
[data-site-theme="sgsc"][data-nav="underline"] header nav > ul > li > button::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--sg-gold);
  transform: scaleX(0);
  transition: transform var(--th-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  [data-site-theme="sgsc"][data-nav="underline"] header nav > ul > li > a:hover::after,
  [data-site-theme="sgsc"][data-nav="underline"] header nav > ul > li > button:hover::after {
    transform: scaleX(1);
  }
}

[data-site-theme="sgsc"] header [role="menu"] {
  border-top: 2px solid var(--sg-gold);
}

/* --- 8. Hero -------------------------------------------------------------- */

/* Heavier scrim at the foot, where the headline and buttons sit. Strength
   comes from --th-hero-overlay, which the customizer clamps so the white
   headline can never be driven into an unreadable wash. */
[data-site-theme="sgsc"] [data-section="hero_slider"] {
  border-bottom: 3px solid var(--sg-gold);
}

/* --- 9. Buttons ---------------------------------------------------------- */

[data-site-theme="sgsc"] .th-btn {
  border-radius: calc(var(--th-radius) * 0.55);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  [data-site-theme="sgsc"] .th-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--th-shadow-lg);
  }

  [data-site-theme="sgsc"] .th-btn-outline:hover {
    border-color: var(--sg-gold-line);
    background-color: var(--sg-gold-soft);
  }
}

/* --- 10. Footer ----------------------------------------------------------- */

[data-site-theme="sgsc"] footer {
  border-top: 3px solid var(--sg-gold);
}

[data-site-theme="sgsc"] footer h3,
[data-site-theme="sgsc"] footer h4 {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sg-gold);
}

/* --- 11. Dark mode -------------------------------------------------------- */

/* The paper tint is dropped and gold lifted: the light-mode gold goes muddy
   against dark ink, and a warm cast over near-black reads as a colour fault. */
.dark [data-site-theme="sgsc"],
[data-site-theme="sgsc"].dark {
  --sg-page: var(--th-bg);
  --sg-gold: color-mix(in oklab, var(--th-accent) 70%, #f6dfa6);
  --sg-rule: color-mix(in oklab, #ffffff 12%, transparent);
}

/* --- 12. Motion and accessibility ----------------------------------------- */

/* Repeated at theme level so the theme's own transitions are covered, rather
   than relying on the application to zero every duration it does not own. */
@media (prefers-reduced-motion: reduce) {
  [data-site-theme="sgsc"] *,
  [data-site-theme="sgsc"] *::before,
  [data-site-theme="sgsc"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Gold is too light to serve as a focus ring on white, so the ring stays on
   the green and only the on-green surfaces switch to gold. */
[data-site-theme="sgsc"] :focus-visible {
  outline: 2px solid var(--sg-green);
  outline-offset: 2px;
}

[data-site-theme="sgsc"] .th-framed-header :focus-visible,
[data-site-theme="sgsc"] header :focus-visible,
[data-site-theme="sgsc"] footer :focus-visible {
  outline-color: var(--sg-gold);
}

/* --- 13. Responsive ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Tighter rhythm on a phone. Set on .th-section rather than by redefining
     --th-section-y, which is referenced inside its own calc() elsewhere and
     would invalidate at every width. */
  [data-site-theme="sgsc"] .th-section {
    padding-block: calc(var(--th-section-y) * 0.7);
  }

  [data-site-theme="sgsc"] .th-framed-header {
    padding-block: 0.75rem;
  }

  /* Hover lift is meaningless on touch and leaves cards stuck raised. */
  [data-site-theme="sgsc"] .th-framed:hover,
  [data-site-theme="sgsc"] .th-card-hover:hover {
    transform: none;
    box-shadow: var(--th-shadow-sm);
  }
}