/*
Theme Name: GAEWCT
Theme URI: https://gcharity.in
Author: Search N Grow
Author URI: https://searchngrow.com/
Description: The Global Advance Educational Welfare and Charitable Trust theme — the trust's own design (Apple-like, warm, fast) as a block theme the office can edit page by page.
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.2
License: Proprietary — built for GAEWCT by Search N Grow
Text Domain: gaewct
*/

/* ==========================================================================
   Design tokens — the same palette the trust's app uses. Light and dark.
   Each colour reads WordPress's palette preset first, so the office can
   re-colour the whole site from Site Editor → Styles → Colors (and the
   theme's style variations switch every gx- section in one click); the
   hex after the comma is only the fallback for a page without the preset.
   ========================================================================== */
:root {
   --gx-ink: var(--wp--preset--color--ink, #1d1d1f);
   --gx-ink2: var(--wp--preset--color--ink-2, #4b4b50);
   --gx-ink3: var(--wp--preset--color--ink-3, #86868b);
   --gx-bg: var(--wp--preset--color--bg, #ffffff);
   --gx-bg2: var(--wp--preset--color--bg-2, #f5f5f7);
   --gx-surface: var(--wp--preset--color--bg, #ffffff);
   --gx-line: rgba(0, 0, 0, .10);
   --gx-line-soft: rgba(0, 0, 0, .06);
   --gx-brand: var(--wp--preset--color--brand, #0f6d97);
   --gx-brand-deep: var(--wp--preset--color--brand-deep, #0a4f6f);
   --gx-brand-soft: var(--wp--preset--color--brand-soft, #eaf4f9);
   --gx-on-brand: var(--wp--preset--color--on-brand, #ffffff);
   --gx-brand-tint: var(--wp--preset--color--brand-tint, #8fd3ee);
   --gx-aurora-1: var(--wp--preset--color--aurora-1, #5cb8e0);
   --gx-aurora-2: var(--wp--preset--color--aurora-2, #34c7a4);
   --gx-aurora-3: var(--wp--preset--color--aurora-3, #8b7bff);
   --gx-aurora-4: var(--wp--preset--color--aurora-4, #f2c14e);
   --gx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .05);
   --gx-shadow-md: 0 2px 6px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .09);
   --gx-r-md: var(--wp--custom--gx--radius-md, 16px);
   --gx-r-lg: var(--wp--custom--gx--radius-lg, 24px);
   --gx-ease: cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-color-scheme: dark) {
   :root {
      --gx-ink: #f5f5f7;
      --gx-ink2: #c3c3c7;
      --gx-ink3: #909095;
      --gx-bg: #000000;
      --gx-bg2: #131316;
      --gx-surface: #1c1c1f;
      --gx-line: rgba(255, 255, 255, .14);
      --gx-line-soft: rgba(255, 255, 255, .08);
      --gx-brand: #5cb8e0;
      --gx-brand-deep: #8ad0ef;
      --gx-brand-soft: rgba(92, 184, 224, .13);
      --gx-on-brand: #04222f;
      --gx-shadow-sm: none;
      --gx-shadow-md: none;
   }
}

body {
   background: var(--gx-bg);
   color: var(--gx-ink);
   -webkit-font-smoothing: antialiased;
}
a { color: var(--gx-brand); }

/* ==========================================================================
   The type scale — the same numbers as the React site's globals.css.
   ========================================================================== */
h1, h2, h3, h4 {
   font-weight: 700;
   letter-spacing: -.028em;
   line-height: 1.07;
   text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.75rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + .75vw, 1.65rem); letter-spacing: -.02em; }
h4, .h4 { font-size: 1.0625rem; letter-spacing: -.012em; }
.gx-display { font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.25rem); }
p { text-wrap: pretty; }

/* Buttons: the site's own pill, weight and shadow. */
.wp-block-button__link {
   padding: 13px 26px;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -.01em;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .14),
               0 4px 14px color-mix(in srgb, var(--gx-brand) 32%, transparent);
}
.wp-block-button.is-style-outline .wp-block-button__link { padding: 11.5px 24.5px; }

/* ==========================================================================
   The background sky: drifting doodles, and the aurora washes.
   ========================================================================== */
.gx-doodles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.gx-doodle {
   position: absolute;
   opacity: .5;
   transform: rotate(var(--gx-spin, 0deg));
   animation: gx-drift ease-in-out infinite alternate;
}
@keyframes gx-drift {
   from { transform: rotate(var(--gx-spin, 0deg)) translateY(0); }
   to { transform: rotate(var(--gx-spin, 0deg)) translateY(-14px); }
}
@media (prefers-color-scheme: dark) { .gx-doodle { opacity: .34; } }
/* A phone has no margin for them to drift in: they sat under the text. */
@media (max-width: 700px) { .gx-doodles { display: none; } }
@media (prefers-reduced-motion: reduce) { .gx-doodle { animation: none; } }

/* A soft wash of the four aurora colours behind a section. */
.gx-aurora { position: relative; z-index: 0; overflow: hidden; }
.gx-aurora::before,
.gx-aurora::after {
   content: "";
   position: absolute;
   z-index: -1;
   width: min(56vw, 560px);
   height: min(56vw, 560px);
   border-radius: 50%;
   filter: blur(64px);
   opacity: .38;
   pointer-events: none;
}
.gx-aurora::before {
   left: -12%; top: -18%;
   background:
      radial-gradient(circle at 30% 30%, var(--gx-aurora-1), transparent 62%),
      radial-gradient(circle at 75% 60%, var(--gx-aurora-4), transparent 55%);
}
.gx-aurora::after {
   right: -14%; bottom: -22%;
   background:
      radial-gradient(circle at 70% 70%, var(--gx-aurora-2), transparent 62%),
      radial-gradient(circle at 30% 35%, var(--gx-aurora-3), transparent 55%);
}
@media (prefers-color-scheme: dark) { .gx-aurora::before, .gx-aurora::after { opacity: .22; } }

/* ==========================================================================
   The menu bar — sticky, frosted, a hairline underneath.
   ========================================================================== */
/* The template-part wrapper is what sticks: the nav group inside it is
   the wrapper's only child, so sticking the group itself had no room to
   travel and the bar scrolled away. */
.wp-site-blocks > header {
   position: sticky;
   top: 0;
   z-index: 100;
}
/* Bar, page and footer touch. WordPress's 24px block gap between them
   showed as a white stripe under the bar (above the hero photograph) and
   another between the closing photo band and the footer. */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
/* The page template keeps 48px above and 72px below the content. A page
   that opens or closes on a full-width band (every page the trust has)
   showed that as more white above its coloured head and below its photo
   band; such a page drops it. A plain page the office writes keeps it. */
.wp-site-blocks > main:has(> .entry-content > .alignfull:first-child) { padding-top: 0 !important; }
.wp-site-blocks > main:has(> .entry-content > .alignfull:last-child) { padding-bottom: 0 !important; }
.gx-nav {
   position: relative;
   border-bottom: 1px solid var(--gx-line-soft);
}
/* The frosted glass lives on a layer of its own. A backdrop-filter on the
   bar itself makes the bar the containing block of the phone menu (a
   position: fixed overlay), so the open menu was squeezed into the bar's
   56px — one link showed, the rest and the close button were cut off. */
.gx-nav::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: color-mix(in srgb, var(--gx-bg) 72%, transparent);
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.gx-nav .wp-block-site-title a { color: var(--gx-ink); text-decoration: none; font-size: .9375rem; }
.gx-nav .gx-donate .wp-block-button__link { padding: 8px 18px; font-size: .875rem; font-weight: 600; }
.gx-nav .gx-brand-name { margin: 0; line-height: 1.1; }
.gx-nav .gx-brand-name a { color: var(--gx-ink); font-weight: 600; font-size: .9375rem; letter-spacing: -.02em; text-decoration: none; }
.gx-nav .gx-tagline { font-size: .625rem; color: var(--gx-ink3); letter-spacing: .055em; text-transform: uppercase; margin: 0; line-height: 1.1; }
.gx-nav .wp-block-navigation a { font-size: .875rem; font-weight: 500; color: var(--gx-ink2); padding: 7px 11px; border-radius: 980px; white-space: nowrap; }
.gx-nav .wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; gap: 2px; }
.gx-nav > .wp-block-group { column-gap: 12px; }
.gx-nav .wp-block-navigation a:hover { color: var(--gx-ink); background: color-mix(in srgb, var(--gx-ink) 7%, transparent); text-decoration: none; }
.gx-nav .wp-block-navigation .current-menu-item > a { color: var(--gx-brand); font-weight: 600; background: var(--gx-brand-soft); }
.gx-academy-badge img { width: 36px; height: 36px; object-fit: contain; }

/* The way into the student portal: a quiet pill beside Donate. */
.gx-navlogin {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   height: 36px;
   padding: 0 15px 0 12px;
   border-radius: 980px;
   border: 1.5px solid color-mix(in srgb, var(--gx-brand) 38%, transparent);
   background: var(--gx-brand-soft);
   color: var(--gx-brand);
   font-size: .875rem;
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
}
.gx-navlogin svg { width: 18px; height: 18px; flex: none; }
.gx-navlogin:hover { background: var(--gx-brand); color: var(--gx-on-brand); }
@media (max-width: 1080px) {
   .gx-navlogin { width: 38px; height: 38px; padding: 0; }
   .gx-navlogin__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ==========================================================================
   Type helpers the patterns use.
   ========================================================================== */
.gx-eyebrow {
   font-size: .8125rem;
   font-weight: 600;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--gx-brand);
}
.gx-display { letter-spacing: -.038em; line-height: .98; font-weight: 700; }
.gx-muted { color: var(--gx-ink2); }
.gx-faint { color: var(--gx-ink3); }

/* Sections: a calm rhythm, with an alternating soft band. The heading
   group (eyebrow, title, lede) keeps the React site's measure and gaps.
   Bands touch each other: WordPress's 24px block gap between them, on
   top of both paddings, left whole screens of nothing. */
.gx-section { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(40px, 4.5vw, 64px); }
.entry-content > .alignfull, .entry-content > .gx-cta { margin-block-start: 0 !important; margin-block-end: 0 !important; }
/* A band right after loose content (Admission's "Questions? Call…" line,
   Contact's cards) sat on its last line; it gets the same air the loose
   content has above it. */
.entry-content > :not(.alignfull) + .alignfull { margin-block-start: clamp(24px, 3vw, 40px) !important; }
.entry-content > .gx-strip { margin-top: -54px !important; }
.gx-alt { background: var(--gx-bg2); }
.gx-section > .gx-eyebrow, .gx-center > .gx-eyebrow { margin-bottom: 0; }
.gx-center > * { margin-block-start: 0 !important; }
.gx-center > h2 { margin-top: 10px !important; }
.gx-center > .gx-muted { margin-top: 12px !important; max-width: 62ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.gx-section > h2 { margin-top: 10px; max-width: 720px; }
.gx-section > h2 + .gx-muted { margin-top: 12px; max-width: 62ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.gx-section > .gx-display { margin-top: 10px; }
.gx-section > .gx-display + .gx-muted {
   margin-top: 14px;
   max-width: 62ch;
   font-size: clamp(1.0625rem, .98rem + .5vw, 1.375rem);
   line-height: 1.45;
   letter-spacing: -.016em;
}

/* ==========================================================================
   Hero — the photograph carries it; the words sit low and large. The same
   double gradient, heights and shadows as the React site.
   ========================================================================== */
.gx-hero { min-height: min(88svh, 760px) !important; display: flex; align-items: flex-end; background: #0d1418; }
.gx-hero img.wp-block-cover__image-background { object-position: center 42%; }
.gx-hero .wp-block-cover__background {
   opacity: 1 !important;
   background:
      linear-gradient(to top, rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .74) 22%, rgba(0, 0, 0, .40) 48%, rgba(0, 0, 0, .14) 70%, rgba(0, 0, 0, .34) 100%),
      linear-gradient(to right, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .10) 58%, transparent 100%) !important;
}
.gx-hero .wp-block-cover__inner-container {
   width: 100%;
   max-width: 1200px;
   margin-inline: auto;
   padding: clamp(48px, 8vw, 96px) clamp(16px, 3vw, 40px);
}
.gx-hero .gx-eyebrow { color: #fff; opacity: .82; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); margin-bottom: 10px; }
.gx-hero h1 { font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.25rem); max-width: 15ch; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
.gx-hero p:not(.gx-eyebrow) {
   max-width: 46ch;
   margin-top: 22px;
   font-size: clamp(1.0625rem, .98rem + .5vw, 1.375rem);
   line-height: 1.45;
   letter-spacing: -.016em;
   color: rgba(255, 255, 255, .92);
   text-shadow: 0 1px 20px rgba(0, 0, 0, .35);
}
.gx-hero .wp-block-buttons { margin-top: 28px; }
.gx-hero .is-style-outline .wp-block-button__link {
   color: #fff;
   border-color: rgba(255, 255, 255, .65);
   background: rgba(255, 255, 255, .14);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

/* The credentials strip under the hero — the dark reassurance band. */
.gx-strip { background: var(--gx-ink); color: var(--gx-bg); padding: 16px clamp(16px, 3vw, 40px); }
.gx-strip__inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 8px clamp(18px, 4vw, 44px);
   font-size: .875rem;
   letter-spacing: -.005em;
}
.gx-strip__item { display: inline-flex; align-items: center; gap: 8px; opacity: .88; }
.gx-strip__item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .8; }

/* ==========================================================================
   Stat tiles, cards, people.
   ========================================================================== */
.gx-stat {
   background: var(--gx-surface);
   border: 1px solid var(--gx-line-soft);
   border-radius: var(--gx-r-lg);
   box-shadow: var(--gx-shadow-sm);
   padding: 22px 18px !important;
   text-align: center;
}
.gx-stat .gx-value { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--gx-brand); line-height: 1.05; margin: 0; }
.gx-stat .gx-label { font-size: .8125rem; color: var(--gx-ink3); margin: 6px 0 0; }

.gx-card {
   background: var(--gx-surface);
   border: 1px solid var(--gx-line-soft);
   border-radius: var(--gx-r-lg);
   box-shadow: var(--gx-shadow-sm);
   padding: 26px 24px !important;
   transition: transform .25s var(--gx-ease), box-shadow .25s var(--gx-ease);
}
.gx-card:hover { transform: translateY(-3px); box-shadow: var(--gx-shadow-md); }
.gx-card h3 { margin-top: 0; font-size: 1.2rem; letter-spacing: -.02em; }
.gx-card p { color: var(--gx-ink2); font-size: .9375rem; }

/* The people grid packs to however many there are — no empty sixth
   track at the end (WordPress builds its grids with auto-fill). */
.gx-people { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)) !important; }

.gx-trustee img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: min(100%, 190px); }
.gx-trustee .wp-block-image { display: flex; justify-content: center; }
.gx-trustee { text-align: center; }
.gx-trustee h3 { margin: 12px 0 2px; font-size: 1.05rem; }
.gx-trustee p { margin: 0; color: var(--gx-ink3); font-size: .875rem; }

/* The little icon badge at the top of a card. */
.gx-icon {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   border-radius: 13px;
   background: var(--gx-brand-soft);
   color: var(--gx-brand);
   margin-bottom: 14px;
}
.gx-icon svg { width: 22px; height: 22px; }
/* WordPress's constrained layout centres fixed-width children; the badge
   belongs at the left edge of its card, like everything else in it. */
.gx-card .gx-icon, .gx-feature .gx-icon { margin-left: 0 !important; margin-right: auto !important; }

/* A card that opens with a photograph. */
.gx-card--media { padding: 0 !important; }
.gx-card--media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 0; display: block; }
.gx-card--media .gx-card-body { padding: 18px 20px 22px; }
.gx-card--media h3 { margin: 0 0 6px; }

/* A quiet "see more →" link. */
.gx-link-arrow { font-weight: 600; font-size: .9375rem; text-decoration: none; }
.gx-link-arrow::after { content: "\00a0→"; transition: transform .2s var(--gx-ease); display: inline-block; }
.gx-link-arrow:hover::after { transform: translateX(3px); }

/* Gallery filter chips: anchors down to each part of the page. */
.gx-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-filters a {
   padding: 8px 16px;
   border-radius: 980px;
   border: 1px solid var(--gx-line);
   background: var(--gx-surface);
   color: var(--gx-ink2);
   font-size: .875rem;
   font-weight: 500;
   text-decoration: none;
}
.gx-filters a:hover { border-color: var(--gx-brand); color: var(--gx-brand); }

/* Gappu's card, and his blink. */
.gx-mascot-card { display: flex !important; flex-wrap: wrap; align-items: center; gap: 26px !important; }
.gx-mascot-card svg.gx-mascot { flex: none; }
.gx-mascot-card > div { flex: 1; min-width: 260px; }
.gx-lids { opacity: 0; animation: gx-blink 5.2s infinite; transform-origin: center; }
@keyframes gx-blink { 0%, 94%, 100% { opacity: 0; } 95.5%, 97.5% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gx-lids { animation: none; } }

/* Photographs sit in soft-cornered frames. */
.gx-round img { border-radius: var(--gx-r-lg); }
.wp-block-media-text__media img { border-radius: var(--gx-r-lg); }

/* ==========================================================================
   The ribbon of short facts, and the founding promise.
   ========================================================================== */
.gx-ribbon {
   background: linear-gradient(90deg, var(--gx-brand-deep), var(--gx-brand) 38%, color-mix(in srgb, var(--gx-brand) 42%, var(--gx-aurora-2)) 72%, var(--gx-brand-deep));
   color: #fff;
   padding: clamp(11px, 1.3vw, 15px) 0;
   overflow: hidden;
   box-shadow: 0 10px 24px color-mix(in srgb, var(--gx-brand-deep) 16%, transparent);
}
.gx-ribbon .gx-ribbon__track {
   display: flex;
   width: max-content;
   animation: gx-marquee 36s linear infinite;
}
.gx-ribbon p { margin: 0; white-space: nowrap; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 650; letter-spacing: -.01em; }
.gx-ribbon span { color: var(--gx-aurora-4); font-size: .8em; padding: 0 clamp(16px, 2vw, 26px); opacity: 1; }
@keyframes gx-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
   .gx-ribbon .gx-ribbon__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
   .gx-ribbon p { white-space: normal; text-align: center; }
   .gx-ribbon p[aria-hidden] { display: none; }
}

.gx-quote { text-align: center; }
.gx-quote h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); letter-spacing: -.025em; line-height: 1.2; max-width: 30ch; margin-inline: auto; }

/* The academy's badge inside a feature block stays a badge, not a poster. */
.gx-feature .wp-block-image img[src*="academy"] { width: 56px; height: 56px; }

/* ==========================================================================
   Timeline (About) and document cards.
   ========================================================================== */
.gx-timeline { border-left: 2px solid var(--gx-line); padding-left: 22px; list-style: none; margin-left: 4px; }
.gx-timeline li { margin-bottom: 22px; position: relative; }
.gx-timeline li::before { content: ""; position: absolute; left: -28px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--gx-brand); }
.gx-timeline strong { display: block; color: var(--gx-brand); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.gx-timeline b { font-size: 1.05rem; letter-spacing: -.015em; }
.gx-timeline p { margin: 4px 0 0; color: var(--gx-ink2); font-size: .9375rem; }

.gx-doc {
   display: flex; align-items: center; gap: 14px;
   background: var(--gx-surface);
   border: 1px solid var(--gx-line);
   border-radius: var(--gx-r-md);
   padding: 18px 20px !important;
}
.gx-doc p { margin: 0; }
.gx-doc .gx-doc-name { font-weight: 500; font-size: .9375rem; }
.gx-doc .gx-doc-meta { font-size: .8125rem; color: var(--gx-ink3); }

/* --- The document viewer: certificate pages over the whole screen --------- */
.gx-docview {
   position: fixed;
   inset: 0;
   z-index: 300;
   overflow-y: auto;
   background: rgba(9, 14, 18, .82);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
}
.gx-docview__bar {
   position: sticky;
   top: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px clamp(16px, 3vw, 40px);
   background: rgba(9, 14, 18, .88);
   color: #f2f6f8;
}
.gx-docview__title { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.gx-docview__note {
   margin-right: auto;
   padding: 3px 10px;
   border-radius: 980px;
   border: 1px solid rgba(255, 255, 255, .28);
   font-size: .6875rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #cfe0e8;
   white-space: nowrap;
}
.gx-docview__close {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   color: #fff;
   cursor: pointer;
}
.gx-docview__close:hover { background: rgba(255, 255, 255, .24); }
.gx-docview__close svg { width: 18px; height: 18px; }
.gx-docview__pages {
   display: grid;
   gap: 14px;
   max-width: 820px;
   margin: 0 auto;
   padding: 16px clamp(16px, 3vw, 40px) 48px;
}
.gx-docview__pages img {
   width: 100%;
   height: auto;
   border-radius: 10px;
   background: #fff;
   box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
   user-select: none;
   -webkit-user-select: none;
   -webkit-user-drag: none;
}
/* A view-only card is a button: keep the card look. */
button.gx-doc { width: 100%; cursor: pointer; font: inherit; text-align: left; color: var(--gx-ink); }

/* The privacy notice's little furniture. */
.gx-prose-card { font-style: normal; }
.gx-prose-card span, .gx-prose-card strong { display: block; }
.gx-prose-card strong { margin-bottom: 6px; }
.gx-shortlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gx-shortlist li { display: flex; gap: 10px; align-items: flex-start; }
.gx-shortlist svg { flex: none; margin-top: 4px; color: var(--gx-brand); }

/* ==========================================================================
   The closing band, and the footer's aurora line.
   ========================================================================== */
.gx-cta {
   background: var(--gx-brand-deep);
   color: #fff;
   overflow: hidden;
   padding: clamp(52px, 6vw, 88px) clamp(20px, 4vw, 48px) !important;
   text-align: center;
}
.gx-cta h2 { letter-spacing: -.03em; color: #fff; max-width: 24ch; margin-inline: auto; }
.gx-cta p { color: #d9e8f0; max-width: 56ch; margin-inline: auto; }
.gx-cta .wp-block-buttons { justify-content: center; }
.gx-cta .wp-block-button__link { background: #fff; color: var(--gx-brand-deep); }
.gx-cta .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }

.gx-footer { position: relative; }
.gx-footer::before {
   content: "";
   position: absolute; top: 0; left: 0; right: 0; height: 2px;
   background: linear-gradient(90deg, var(--gx-aurora-1) 0 25%, var(--gx-aurora-2) 0 50%, var(--gx-aurora-3) 0 75%, var(--gx-aurora-4) 0);
}
.gx-footer a { color: #bfcad0; }
.gx-footer a:hover { color: #fff; }
.gx-foot-brand { display: flex; align-items: center; gap: 12px; font-size: 1rem; line-height: 1.35; }
.gx-foot-logo {
   flex: none;
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid rgba(255, 255, 255, .12);
}
.gx-foot-logo img { width: 32px; height: 32px; object-fit: contain; }
.gx-foot-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .875rem; color: #bfcad0; }
.gx-foot-contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.gx-foot-contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--gx-brand-tint); }
.gx-foot-contact address { font-style: normal; }
.gx-socials { margin-top: 16px; }
.gx-socials a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 34px;
   padding: 0 14px 0 11px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .18);
   background: rgba(255, 255, 255, .06);
   color: #f2f6f8;
   font-size: .875rem;
   text-decoration: none;
}
.gx-socials svg { width: 16px; height: 16px; }
.gx-socials a:hover { background: #25d366; border-color: #25d366; color: #06301a; }
/* The footer's last row: the copyright on the left, the credit on the right. */
.gx-foot-bottom {
   margin-top: clamp(28px, 3.5vw, 40px);
   padding-top: 18px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   flex-wrap: wrap;
   gap: 6px 24px;
   justify-content: space-between;
   align-items: center;
   color: #9aa8af;
   font-size: .8125rem;
}
.gx-foot-bottom a { color: var(--gx-brand-tint); text-decoration: none; }
.gx-foot-bottom a:hover { text-decoration: underline; }
.gx-foot-bottom strong { color: #cfe0e8; }

/* Back to the top: the round button that appears once you have scrolled. */
.gx-totop {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 150;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 1px solid var(--gx-line);
   background: var(--gx-surface);
   color: var(--gx-ink);
   box-shadow: var(--gx-shadow-md, 0 6px 20px rgba(0, 0, 0, .18));
   display: grid;
   place-items: center;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: opacity .25s var(--gx-ease), transform .25s var(--gx-ease), visibility .25s;
}
.gx-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.gx-totop svg { width: 18px; height: 18px; }

.gx-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: .875rem; }
.gx-foot-links--one { grid-template-columns: 1fr; margin-top: 4px; }
.gx-foot-links a { text-decoration: none; }
.gx-foot-links a:hover { text-decoration: underline; }
.gx-foot-primary { color: var(--gx-brand-tint) !important; font-weight: 600; }

/* Buttons: the quiet secondary style. */
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid color-mix(in srgb, var(--gx-brand) 38%, transparent); color: var(--gx-brand); background: var(--gx-brand-soft); }

/* ==========================================================================
   The last mile to the live site's look (side-by-side pass, 26 Sep).
   ========================================================================== */
/* The reading-progress line along the very top, in the aurora's colours. */
.gx-progress {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: 3px;
   z-index: 200;
   pointer-events: none;
   transform-origin: left;
   transform: scaleX(0);
   background: linear-gradient(90deg, var(--gx-aurora-1), var(--gx-aurora-2), var(--gx-aurora-3));
}
@media (prefers-reduced-motion: reduce) { .gx-progress { display: none; } }

/* The bar shows where you are. */
.gx-nav .wp-block-navigation a[aria-current="page"],
.gx-nav .wp-block-navigation .current-menu-item > a { color: var(--gx-brand); font-weight: 600; background: var(--gx-brand-soft); }

/* The credentials strip becomes glass and sits on the hero's bottom edge. */
.gx-strip {
   position: relative;
   z-index: 2;
   margin-top: -54px;
   background: rgba(8, 20, 28, .32);
   -webkit-backdrop-filter: blur(16px) saturate(160%);
   backdrop-filter: blur(16px) saturate(160%);
   border-top: 1px solid rgba(255, 255, 255, .18);
   color: #fff;
}

/* On the dark hero and the closing band, the main button is white. */
.gx-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.gx-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
   background: #fff;
   color: #0d1418;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 18px rgba(0, 0, 0, .25);
}

/* Stat tiles: the thin aurora line, the big tabular numbers. */
.gx-stat { position: relative; overflow: hidden; }
.gx-stat::before {
   content: "";
   position: absolute;
   left: 20%; right: 20%; top: 0; height: 3px;
   border-radius: 0 0 3px 3px;
   background: linear-gradient(90deg, var(--gx-aurora-1), var(--gx-aurora-2), var(--gx-aurora-3));
}
.gx-stat .gx-value { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A wordy value (Nursery–IV, CBSE) sits smaller, on the numbers' line box. */
.gx-stat .gx-value--text { font-size: clamp(1.5rem, 1.1rem + 1.45vw, 2.25rem); letter-spacing: -.03em; line-height: 1.45; }
.gx-section--tight { padding-top: clamp(32px, 3.5vw, 52px); padding-bottom: clamp(32px, 3.5vw, 52px); }
/* Two tiles a row on a phone, four across on a desktop. */
@media (max-width: 660px) {
   .gx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
   .gx-stat .gx-value { font-size: 1.75rem; }
   .gx-stat .gx-value--text { font-size: 1.25rem; }
}

/* Centred section heads, as the live site centres them. */
.gx-center { text-align: center; }
.gx-center > h2 { margin-inline: auto; }
.gx-center > .gx-muted { margin-inline: auto; }

/* "Read our story", "See more": the pill with the circled arrow. */
.gx-link-arrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 7px 7px 7px 16px;
   border: 1.5px solid color-mix(in srgb, var(--gx-brand) 28%, transparent);
   border-radius: 980px;
   background: var(--gx-brand-soft);
   color: var(--gx-brand);
   font-weight: 600;
   font-size: .9rem;
   text-decoration: none;
}
.gx-link-arrow::after {
   content: "\2192";
   display: grid;
   place-items: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--gx-brand);
   color: var(--gx-on-brand);
   font-size: .9rem;
   line-height: 1;
   transform: none;
   transition: transform .25s var(--gx-ease);
}
.gx-link-arrow:hover::after { transform: translateX(3px); }

/* The closing band carries the whole-school photograph under its colour.
   Full-bleed, as on the live site. */
.gx-cta { position: relative; isolation: isolate; background: var(--gx-brand-deep); border-radius: 0; }
.gx-cta .gx-cta__media {
   position: absolute;
   inset: 0;
   z-index: -2;
   /* The constrained layout would squeeze this absolute box to the text
      column; the photograph must cover the whole band. */
   max-width: none !important;
   margin: 0 !important;
}
.gx-cta .gx-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.gx-cta::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
   background:
      radial-gradient(ellipse 55% 75% at 50% 50%, rgba(6, 30, 42, .62) 0%, rgba(6, 30, 42, .4) 55%, rgba(6, 30, 42, .1) 100%),
      linear-gradient(180deg, rgba(10, 46, 63, .12), rgba(6, 30, 42, .22));
}
.gx-cta h2 { max-width: 18ch; text-shadow: 0 2px 28px rgba(0, 0, 0, .45); }
.gx-cta p { text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.gx-cta .is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .6); backdrop-filter: blur(8px); }

.gx-card p { font-size: 1rem; }
.gx-quote h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }

/* --- The campus explorer ---------------------------------------------------- */
.gx-explorer { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: clamp(18px, 3vw, 34px); align-items: start; }
.gx-explorer__list {
   display: grid;
   gap: 4px;
   background: var(--gx-surface);
   border: 1px solid var(--gx-line-soft);
   border-radius: var(--gx-r-lg);
   padding: 8px;
}
.gx-explorer__list button {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border: 0;
   border-radius: 14px;
   background: none;
   color: var(--gx-ink2);
   font: inherit;
   font-size: .9375rem;
   font-weight: 500;
   text-align: left;
   cursor: pointer;
}
.gx-explorer__list button svg { width: 18px; height: 18px; flex: none; }
.gx-explorer__list button:hover { background: var(--gx-bg2); color: var(--gx-ink); }
.gx-explorer__list button.is-active { background: var(--gx-brand); color: var(--gx-on-brand); font-weight: 600; }
.gx-explorer__panel img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; border-radius: var(--gx-r-lg); }
.gx-explorer__panel h3 { margin: 14px 0 6px; }
.gx-explorer__panel p { color: var(--gx-ink2); margin: 0; max-width: 60ch; }
.gx-explorer__panel .gx-icon { margin-top: 16px; margin-bottom: 0; }
@media (max-width: 860px) {
   .gx-explorer { grid-template-columns: 1fr; }
   .gx-explorer__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
}

/* --- A day at the academy ---------------------------------------------------- */
.gx-day__rail { position: relative; display: flex; justify-content: space-between; gap: 6px; padding-top: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; }
.gx-day__rail::-webkit-scrollbar { display: none; }
.gx-day__rail::before { content: ""; position: absolute; left: 26px; right: 26px; top: 28px; height: 2px; background: var(--gx-line); }
.gx-day__step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; border: 0; background: none; font: inherit; cursor: pointer; color: var(--gx-ink3); padding: 0 6px; }
.gx-day__step span.gx-dot {
   display: grid;
   place-items: center;
   width: 46px; height: 46px;
   border-radius: 50%;
   background: var(--gx-surface);
   border: 1.5px solid var(--gx-line);
   color: var(--gx-ink2);
}
.gx-day__step svg { width: 20px; height: 20px; }
.gx-day__step small { font-size: .8125rem; font-weight: 500; }
.gx-day__step.is-active { color: var(--gx-ink); }
.gx-day__step.is-active span.gx-dot { background: var(--gx-brand); border-color: var(--gx-brand); color: var(--gx-on-brand); }
.gx-day__panel { display: flex; gap: clamp(16px, 3vw, 30px); align-items: center; flex-wrap: wrap; background: var(--gx-surface); border: 1px solid var(--gx-line-soft); border-radius: var(--gx-r-lg); box-shadow: var(--gx-shadow-sm); padding: clamp(16px, 2.5vw, 26px); }
.gx-day__panel[hidden] { display: none; }
.gx-day__panel img { flex: 1 1 320px; min-width: 260px; max-width: 460px; border-radius: var(--gx-r-md); aspect-ratio: 16/10; object-fit: cover; }
.gx-day__panel > div { flex: 1 1 280px; }
.gx-day__panel h3 { margin: 6px 0 8px; }
.gx-day__panel p { color: var(--gx-ink2); margin: 0; }
.gx-day__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.gx-day__nav button {
   padding: 9px 22px;
   border-radius: 980px;
   border: 1.5px solid color-mix(in srgb, var(--gx-brand) 38%, transparent);
   background: var(--gx-brand-soft);
   color: var(--gx-brand);
   font: inherit;
   font-weight: 600;
   font-size: .875rem;
   cursor: pointer;
}
.gx-day__nav button:hover { background: var(--gx-brand); color: var(--gx-on-brand); }
.gx-day__nav [data-gx-count] { font-size: .875rem; color: var(--gx-ink3); }

/* --- Activities as posts: the archive grid and the post's own page --------- */
.gx-actcard { overflow: hidden; }
.gx-actcard h3 { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -.02em; }
.gx-actcard h3 a { text-decoration: none; color: inherit; }
.gx-actcard .wp-block-post-featured-image { margin: 0; }
.gx-actcard .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.gx-actcard .wp-block-post-excerpt p { margin: 0; color: var(--gx-ink2); font-size: .9375rem; }
.wp-block-query-pagination { margin-top: 28px; font-weight: 600; }
.wp-block-query-pagination a { text-decoration: none; }
.single-post .wp-block-post-title { max-width: 20ch; }
.single-post .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.single-post .entry-content p { max-width: 68ch; }

/* Phones: the bar's tagline goes; gaps tighten. */
@media (max-width: 600px) {
   .gx-nav .gx-tagline { display: none; }
   .gx-section { padding-top: 40px; padding-bottom: 40px; }
   /* Trustees two to a row, smaller — five full-width portraits were
      four screens of scrolling. An odd last one sits centred. */
   .gx-people { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
   .gx-people > :last-child:nth-child(odd) { grid-column: 1 / -1; }
   .gx-trustee img { width: min(100%, 128px); }
}

/* Below about 720px the six links do not fit beside the name and the
   buttons (they need ~700px), so the menu folds into the ☰ — WordPress
   folds it only below 600px — and the ☰ goes to the far right instead of
   mid-bar. An iPad held upright (768px+) keeps the full row. */
@media (max-width: 720px) {
   .gx-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
   .gx-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
   .gx-nav .wp-block-navigation { order: 3; }
   .gx-nav > .wp-block-group > .wp-block-group:last-child { margin-left: auto; }
}

/* The open phone menu: the site's own colours, and links big enough to
   hit with a thumb. */
.gx-nav .wp-block-navigation__responsive-container.is-menu-open {
   background: var(--gx-bg);
   color: var(--gx-ink);
   padding: 18px 20px;
}
.gx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.gx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation a { font-size: 1.25rem; padding: 12px 16px; }