/* ============================================================
   GPA design tokens — GLOBAL
   Loads on every page of the site.
   ------------------------------------------------------------
   2026-09-03: the calculator design system — ~34 KB of rules all scoped to
   .page-template-template-calculator — was moved out of this file into
   calculator-page.css, which only loads on calculator pages. Those rules
   could never match anywhere else, so this file had been shipping 34 KB of
   inert CSS to roughly 2,000 pages.
   Keep this file for what is genuinely global: custom properties,
   @font-face, resets and site-wide typography.
   ============================================================ */

/* ============================================
   GPA Calculator - Global Design Tokens
   Source of truth: gpa-homepage.css
   ============================================
   All 5 templates inherit typography, color, and
   spacing from these variables. Change a value here
   and it propagates site-wide.
   ============================================ */

/* Lexend is loaded as a <link> in <head> via gpa_fonts() in functions.php
   (NOT @import here — @import is discovered late and widens the font-swap
   window, causing CLS on the hero text). See T6.4. */

/* ---- Font-swap CLS fallback (T6.4) ----
   A metric-matched fallback face: while Lexend is downloading, the browser
   renders Arial re-scaled to occupy the SAME box Lexend will, so the swap
   from fallback → Lexend produces ~zero layout shift.
   Overrides computed from Lexend vs Arial metrics, normalised on x-height
   (size-adjust = Lexend xHeight-ratio / Arial xHeight-ratio). Regenerate with
   fontaine / @capsizecss/metrics if the brand font ever changes. */
@font-face {
    font-family: "Lexend Fallback";
    src: local("Arial");
    size-adjust: 103.2%;
    ascent-override: 96.9%;
    descent-override: 24.2%;
    line-gap-override: 0%;
}

:root {
    /* ---- Font ---- */
    /* "Lexend Fallback" sits between Lexend and the system stack so the
       metric-matched face is used during font load (see @font-face above). */
    --gpa-font: "Lexend", "Lexend Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --gpa-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ---- Type scale (desktop) ---- */
    --gpa-h1-size: 48px;
    --gpa-h1-weight: 700;
    --gpa-h1-line: 1.2;
    --gpa-h2-size: 28px;
    --gpa-h2-weight: 700;
    --gpa-h2-line: 1.3;
    --gpa-h3-size: 20px;
    --gpa-h3-weight: 600;
    --gpa-h3-line: 1.4;
    --gpa-h4-size: 17px;
    --gpa-h4-weight: 700;
    --gpa-h4-line: 1.4;

    /* ---- Type scale (mobile ≤768px) ---- */
    --gpa-h1-size-m: 36px;
    --gpa-h2-size-m: 24px;
    --gpa-h3-size-m: 18px;

    /* ---- Body text ---- */
    --gpa-body-size: 16px;
    --gpa-body-lg-size: 18px;
    --gpa-small-size: 14px;
    --gpa-body-weight: 400;
    --gpa-body-line: 1.7;

    /* ---- Colors: brand ---- */
    --gpa-primary: #2563EB;
    --gpa-primary-dark: #1D4ED8;
    --gpa-primary-light: #3B82F6;
    --gpa-success: #16A34A;
    --gpa-success-dark: #15803D;
    --gpa-warning: #D97706;
    --gpa-warning-dark: #B45309;
    --gpa-danger: #DC2626;
    --gpa-purple: #9333EA;

    /* ---- Colors: text ---- */
    --gpa-text-heading: #111827;
    --gpa-text-body: #374151;
    --gpa-text-muted: #6B7280;
    --gpa-text-light: #9CA3AF;

    /* ---- Colors: surface ---- */
    --gpa-bg-white: #FFFFFF;
    --gpa-bg-gray-50: #F9FAFB;
    --gpa-bg-gray-100: #F3F4F6;
    --gpa-bg-dark: #111827;

    /* ---- Borders ---- */
    --gpa-border: #E5E7EB;
    --gpa-border-dark: #D1D5DB;
    --gpa-border-focus: #2563EB;

    /* ---- Spacing ---- */
    --gpa-section-py: 80px;
    --gpa-section-py-m: 50px;
    --gpa-section-px: 16px;
    --gpa-gap-sm: 12px;
    --gpa-gap-md: 16px;
    --gpa-gap-lg: 24px;
    --gpa-gap-xl: 32px;

    /* ---- Layout ---- */
    --gpa-container-max: 1140px;     /* content area (all templates) */
    --gpa-container-wide: 1280px;    /* header / footer (full bleed band) */
    --gpa-content-max: 900px;        /* article body (content pages) */

    /* ---- Radii ---- */
    --gpa-radius-sm: 8px;
    --gpa-radius-md: 12px;
    --gpa-radius-lg: 16px;
    --gpa-radius-pill: 9999px;

    /* ---- Shadows ---- */
    --gpa-shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
    --gpa-shadow-md: 0 10px 25px rgba(0,0,0,0.05);
    --gpa-shadow-lg: 0 10px 25px rgba(0,0,0,0.08);

    /* ---- Inputs / buttons ---- */
    --gpa-input-radius: 8px;
    --gpa-input-border: 1px solid var(--gpa-border);
    --gpa-input-padding: 12px 16px;
    --gpa-input-font-size: 16px;
    --gpa-btn-radius: 8px;
    --gpa-btn-padding: 12px 24px;
    --gpa-btn-font-size: 16px;
    --gpa-btn-font-weight: 600;
}

/* ============================================
   BASE: apply tokens to the whole site
   Uses !important to override GeneratePress's
   inline CSS (font-weight:300; font-size:17px),
   which injects AFTER external stylesheets.
   ============================================ */
/* GPA_CALC_ISOLATION: #root is the React calculator — let it keep its own
   font sizing/weight; only the brand font family is inherited. */
body,
button:not(#root *),
input:not(#root *),
select:not(#root *),
textarea:not(#root *) {
    font-family: var(--gpa-font) !important;
    font-weight: var(--gpa-body-weight) !important;
    font-size: var(--gpa-body-size) !important;
    -webkit-font-smoothing: antialiased !important;
}
body {
    line-height: var(--gpa-body-line) !important;
    color: var(--gpa-text-body) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gpa-font) !important;
    color: var(--gpa-text-heading);
}

/* ============================================
   Content container width: 1140px for ALL templates
   (calculator, content, database, archive, default)
   Header and footer remain at full width (1280).
   ============================================ */
body .site-content {
    max-width: var(--gpa-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
h1 {
    font-size: var(--gpa-h1-size);
    font-weight: var(--gpa-h1-weight);
    line-height: var(--gpa-h1-line);
}
h2 {
    font-size: var(--gpa-h2-size);
    font-weight: var(--gpa-h2-weight);
    line-height: var(--gpa-h2-line);
}
h3 {
    font-size: var(--gpa-h3-size);
    font-weight: var(--gpa-h3-weight);
    line-height: var(--gpa-h3-line);
}
h4 {
    font-size: var(--gpa-h4-size);
    font-weight: var(--gpa-h4-weight);
    line-height: var(--gpa-h4-line);
}
@media (max-width: 768px) {
    h1 { font-size: var(--gpa-h1-size-m); }
    h2 { font-size: var(--gpa-h2-size-m); }
    h3 { font-size: var(--gpa-h3-size-m); }
}

/* ============================================
   Standard form controls (inputs, selects, buttons)
   Used for calculator input consistency across all
   templates. Can be overridden per page.
   ============================================ */
.gpa-input,
.entry-content input[type="number"],
.entry-content input[type="text"],
.entry-content select {
    font-family: var(--gpa-font);
    font-size: var(--gpa-input-font-size);
    padding: var(--gpa-input-padding);
    border: var(--gpa-input-border);
    border-radius: var(--gpa-input-radius);
    background: var(--gpa-bg-white);
    color: var(--gpa-text-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gpa-input:focus,
.entry-content input[type="number"]:focus,
.entry-content input[type="text"]:focus,
.entry-content select:focus {
    outline: none;
    border-color: var(--gpa-border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.gpa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gpa-font);
    font-size: var(--gpa-btn-font-size);
    font-weight: var(--gpa-btn-font-weight);
    padding: var(--gpa-btn-padding);
    border-radius: var(--gpa-btn-radius);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.gpa-btn-primary {
    background: var(--gpa-primary);
    color: #fff;
}
.gpa-btn-primary:hover { background: var(--gpa-primary-dark); }
.gpa-btn-primary:active { transform: translateY(1px); }

/* ============================================
   Ad-slot space reservation (T6.4)
   Freestar ads (T10.1) load asynchronously and would shift the page
   when they pop in. Wrap every ad container in .gpa-ad-slot + a size
   modifier so the space is reserved up-front → no CLS once ads go live.
   min-height matches the standard Freestar/IAB unit for that slot.
   Markup example:  <div class="gpa-ad-slot gpa-ad-slot--rectangle">…</div>
   ============================================ */
.gpa-ad-slot {
    display: block;
    margin: var(--gpa-gap-lg) auto;
    text-align: center;
    overflow: hidden;
}
.gpa-ad-slot--leaderboard   { min-height: 90px; }   /* 728x90  desktop leaderboard */
.gpa-ad-slot--rectangle     { min-height: 250px; }  /* 300x250 medium rectangle    */
.gpa-ad-slot--mobile-banner { min-height: 50px; }   /* 320x50  mobile banner       */
@media (max-width: 768px) {
    /* Mobile leaderboards collapse to a 320x100 large mobile banner */
    .gpa-ad-slot--leaderboard { min-height: 100px; }
} 
#root:empty {
    display: grid;
    place-items: center;
    background: var(--gpa-bg-gray-50);
    border-radius: var(--gpa-radius-lg);
}
#root:empty::after {
    content: "";
    width: 44px;
    height: 44px;
    border: 4px solid var(--gpa-border);
    border-top-color: var(--gpa-primary);
    border-radius: 50%;
    animation: gpa-root-spin 0.8s linear infinite;
}
@keyframes gpa-root-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #root:empty::after { animation: none; }
}
/* --- text colour ---------------------------------------------------------- */
:where(#root) button:not([class*="hover:text-"]):hover,
:where(#root) button:not([class*="hover:text-"]):focus { color: inherit; }
 
:where(#root) button.text-white:not([class*="hover:text-"]):hover,
:where(#root) button.text-white:not([class*="hover:text-"]):focus { color: #ffffff; }
 
:where(#root) button.text-gray-500:not([class*="hover:text-"]):hover,
:where(#root) button.text-gray-500:not([class*="hover:text-"]):focus { color: #6b7280; }
 
:where(#root) button.text-gray-600:not([class*="hover:text-"]):hover,
:where(#root) button.text-gray-600:not([class*="hover:text-"]):focus { color: #4b5563; }
 
:where(#root) button.text-gray-700:not([class*="hover:text-"]):hover,
:where(#root) button.text-gray-700:not([class*="hover:text-"]):focus { color: #374151; }
 
:where(#root) button.text-gray-900:not([class*="hover:text-"]):hover,
:where(#root) button.text-gray-900:not([class*="hover:text-"]):focus { color: #111827; }
 
:where(#root) button.text-blue-600:not([class*="hover:text-"]):hover,
:where(#root) button.text-blue-600:not([class*="hover:text-"]):focus { color: #2563eb; }
 
:where(#root) button.text-red-500:not([class*="hover:text-"]):hover,
:where(#root) button.text-red-500:not([class*="hover:text-"]):focus { color: #ef4444; }
 
:where(#root) button.text-red-600:not([class*="hover:text-"]):hover,
:where(#root) button.text-red-600:not([class*="hover:text-"]):focus { color: #dc2626; }
 
/* --- background colour ---------------------------------------------------- */
:where(#root) button:not([class*="hover:bg-"]):hover,
:where(#root) button:not([class*="hover:bg-"]):focus { background-color: transparent; }
 
:where(#root) button.bg-white:not([class*="hover:bg-"]):hover,
:where(#root) button.bg-white:not([class*="hover:bg-"]):focus { background-color: #ffffff; }
 
:where(#root) button.bg-gray-100:not([class*="hover:bg-"]):hover,
:where(#root) button.bg-gray-100:not([class*="hover:bg-"]):focus { background-color: #f3f4f6; }
 
:where(#root) button.bg-gray-200:not([class*="hover:bg-"]):hover,
:where(#root) button.bg-gray-200:not([class*="hover:bg-"]):focus { background-color: #e5e7eb; }
 
:where(#root) button.bg-blue-600:not([class*="hover:bg-"]):hover,
:where(#root) button.bg-blue-600:not([class*="hover:bg-"]):focus { background-color: #2563eb; }
 
:where(#root) button.bg-red-500:not([class*="hover:bg-"]):hover,
:where(#root) button.bg-red-500:not([class*="hover:bg-"]):focus { background-color: #ef4444; }
/* COLLEGE GPA CALCULATOR STYLE END */

/* ============================================================
   Visible breadcrumb — calculator pages (2026-08-30)
   Counterpart of the BreadcrumbList JSON-LD, which was being emitted while
   nothing was drawn on screen. These rules previously lived only in
   database-page.css, which calculator pages never load. Duplicated here rather
   than moved, so the college/database templates keep working untouched.
   ============================================================ */
.gpa-breadcrumb {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--gpa-gap-md, 16px) var(--gpa-gap-md, 16px) 0;
    font-size: 0.875rem;
    line-height: 1.4;
}
.gpa-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.gpa-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    color: var(--gpa-text-muted, #6b7280);
    min-width: 0;
}
.gpa-breadcrumb__item + .gpa-breadcrumb__item::before {
    content: "/";
    margin: 0 0.5em;
    color: var(--gpa-text-light, #9ca3af);
    flex: none;
}
.gpa-breadcrumb__link {
    color: var(--gpa-text-muted, #6b7280);
    text-decoration: none;
    transition: color 0.15s ease;
}
.gpa-breadcrumb__link:hover,
.gpa-breadcrumb__link:focus {
    color: var(--gpa-primary, #2563eb);
    text-decoration: underline;
}
.gpa-breadcrumb__current {
    color: var(--gpa-text-body, #374151);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}
/* Rank Math Table of Contents block (all templates): center the title */
.wp-block-rank-math-toc-block > h2 { text-align: center !important; }