/* ===================================================================
   GradeKar.com — Student-Friendly Calculator Toolkit
   Colorful, mobile-first, fun design for 18-24 age group
   =================================================================== */

/* --- Self-hosted fonts (replaces Google Fonts CDN) ---
   Inter is a variable font — a single WOFF2 covers weights 400-800,
   so one @font-face with a weight range is enough. Latin subset only
   (Indian English + romanised Hindi). Characters outside the subset
   (arrows, dingbats) fall back to system fonts; intentional. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-mono-700-latin.woff2') format('woff2');
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand colors */
    --purple:       #7C3AED;
    --purple-dark:  #5B21B6;
    --purple-light: #EDE9FE;
    --purple-50:    #F5F3FF;
    --blue:         #3B82F6;
    --blue-light:   #DBEAFE;
    --yellow:       #FBBF24;
    --yellow-light: #FEF3C7;
    --green:        #10B981;
    --green-light:  #D1FAE5;
    --red:          #EF4444;
    --red-light:    #FEE2E2;

    /* Neutrals */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #6B7280;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Typography */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:  'Space Mono', monospace;

    /* Spacing */
    --container-max: 1120px;
    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--gray-800);
    background: var(--purple-50);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.main { flex: 1; }

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    background: var(--purple);
    color: #fff;
    padding: 10px 18px;
    z-index: 1000;
    font-weight: 600;
    border-radius: 0 0 6px 6px;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
    text-decoration: none;
}

/* --- Header --- */
.header {
    background: #fff;
    border-bottom: 2px solid var(--purple-light);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--gray-900);
    font-size: 1.25rem;
}
.logo:hover { text-decoration: none; }
.logo-mark { display: block; flex-shrink: 0; }
.logo-text strong { color: var(--purple); }

.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.header-nav a, .nav-dropdown-btn {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
.header-nav a:hover, .nav-dropdown-btn:hover {
    background: var(--purple-light);
    color: var(--purple);
    text-decoration: none;
}
.header-nav a.active {
    background: var(--purple);
    color: #fff;
    text-decoration: none;
}

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { display: flex; align-items: center; gap: 4px; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    min-width: 200px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 8px;
    z-index: 200;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    font-size: 0.875rem;
}
.nav-dropdown-menu a:hover { background: var(--purple-light); color: var(--purple); text-decoration: none; }
.nav-dropdown-menu .see-all {
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
    padding-top: 8px;
    color: var(--purple);
    font-weight: 600;
}
/* Non-mega dropdown (Calculators): keep each item on one line so the box
   widens to fit the full label instead of wrapping near the viewport edge. */
.nav-dropdown:not(.mega) .nav-dropdown-menu { white-space: nowrap; }

/* Mega-menu (Universities dropdown) — alphabetical, searchable, 2-column.
   Keeps the parent's single scrollbar; search box is pinned with
   position: sticky so it stays visible while the list scrolls past it. */
.nav-dropdown.mega .nav-dropdown-menu {
    min-width: 520px;
    max-width: 90vw;
    padding: 12px;
}
.mega-menu-search {
    position: sticky;
    top: -12px;
    margin: -12px -12px 8px;
    padding: 12px 16px 8px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    z-index: 1;
}
.mega-menu-filter {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: #F9FAFB;
    color: var(--gray-900);
    font-family: var(--font-sans);
}
.mega-menu-filter:focus { outline: 2px solid var(--purple); outline-offset: 1px; border-color: var(--purple); }
.mega-menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
}
.mega-menu-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
}
.mega-menu-list a .uni-short { font-weight: 600; font-size: 0.875rem; color: var(--gray-900); }
.mega-menu-list a .uni-state { font-size: 0.75rem; color: var(--gray-500); }
.mega-menu-list a:hover .uni-short,
.mega-menu-list a:hover .uni-state { color: var(--purple); }
.mega-menu-list a[hidden] { display: none; }
.mega-menu-empty { padding: 12px 4px; font-size: 0.8125rem; color: var(--gray-500); margin: 0; }

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
    color: var(--gray-700);
}

/* --- Hero / Homepage --- */
.hero {
    text-align: center;
    padding: 60px 20px 40px;
}
.hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
    margin-bottom: 16px;
}
.hero h1 .highlight {
    background: linear-gradient(135deg, var(--purple), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero p {
    font-size: 1.125rem;
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--purple), var(--blue));
    color: #fff;
    border-radius: var(--radius);
    font-size: 1.0625rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.42);
    text-decoration: none;
    color: #fff;
}
.hero-cta:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 3px;
}

/* --- Tool Cards Grid --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 0 20px 60px;
    max-width: var(--container-max);
    margin: 0 auto;
}
.tool-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 2px solid var(--gray-100);
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.tool-card:hover {
    border-color: var(--purple);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
}
.tool-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.tool-card-icon.purple { background: var(--purple-light); }
.tool-card-icon.blue   { background: var(--blue-light); }
.tool-card-icon.yellow { background: var(--yellow-light); }
.tool-card-icon.green  { background: var(--green-light); }
.tool-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}
.tool-card p {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 16px;
}
.tool-card .cta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple);
}

/* --- University List --- */
.uni-section {
    padding: 40px 20px 60px;
    max-width: var(--container-max);
    margin: 0 auto;
}
.uni-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}
.uni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.uni-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.15s;
}
.uni-chip:hover {
    border-color: var(--purple);
    background: var(--purple-light);
    color: var(--purple);
    text-decoration: none;
}
.uni-chip .state { color: var(--gray-400); font-size: 0.75rem; font-weight: 400; margin-left: auto; }

/* --- Calculator Page Layout --- */
.calc-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 32px 20px 60px;
}
.calc-page .breadcrumbs {
    font-size: 0.8125rem;
    color: var(--gray-400);
    margin-bottom: 20px;
}
.calc-page .breadcrumbs a { color: var(--gray-500); }
.calc-page .breadcrumbs a:hover { color: var(--purple); }

.calc-page h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 8px;
}
.calc-page .subtitle {
    color: #4B5563;
    margin-bottom: 32px;
    font-size: 1rem;
}

/* Calculator + Sidebar layout */
.calc-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}
/* Let grid children shrink so wide tables scroll internally
   instead of stretching the page (fixes mobile horizontal overflow) */
.calc-layout > * { min-width: 0; }

/* --- Calculator Card --- */
.calc-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 2px solid var(--gray-100);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.calc-card label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}
.calc-card select,
.calc-card input[type="number"],
.calc-card input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--gray-800);
    background: #fff;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.calc-card input::-webkit-outer-spin-button,
.calc-card input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-card select:focus,
.calc-card input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.calc-card .field-group { margin-bottom: 20px; }
.calc-card .field-hint {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 4px;
}

/* Result display */
.result-box {
    background: linear-gradient(135deg, var(--purple-light), var(--blue-light));
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    margin-top: 24px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.result-box.empty {
    background: var(--gray-50);
    border: 2px dashed var(--gray-200);
    position: relative;
}
/* N8 — soft calculator illustration in the empty state.
   Inline SVG via data URI keeps the asset count down (no extra HTTP request)
   and lets the same line live next to the rule that uses it. Sits as a
   centred background; the result-label/value above stays readable on top. */
.result-box.empty::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2056%2056%27%20fill%3D%27none%27%20stroke%3D%27%237C3AED%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%2710%27%20y%3D%276%27%20width%3D%2736%27%20height%3D%2744%27%20rx%3D%276%27%2F%3E%3Crect%20x%3D%2715%27%20y%3D%2711%27%20width%3D%2726%27%20height%3D%279%27%20rx%3D%272%27%20fill%3D%27%23EDE9FE%27%20stroke%3D%27%237C3AED%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2728%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2728%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%2728%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2738%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2738%27%20r%3D%272%27%2F%3E%3Crect%20x%3D%2734%27%20y%3D%2734%27%20width%3D%278%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%237C3AED%27%20stroke%3D%27%237C3AED%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.result-box .result-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.result-box .result-value {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 700;
    color: var(--purple-dark);
    line-height: 1.1;
}
.result-box .result-formula {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-top: 8px;
}
.result-box .result-grade {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 8px;
}
.result-grade.distinction { background: var(--green-light); color: #065F46; }
.result-grade.first-class { background: var(--blue-light); color: #1E40AF; }
.result-grade.second-class { background: var(--yellow-light); color: #92400E; }
.result-grade.pass { background: var(--gray-100); color: var(--gray-600); }
.result-grade.fail { background: var(--red-light); color: #991B1B; }
.result-box .result-grade-caveat {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 6px;
    max-width: 320px;
    line-height: 1.4;
}

/* Share action buttons row.
   All 4 share variants share the same shape, padding, font, focus ring;
   only background + text colour vary by variant. Wrap on narrow widths. */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.share-btn,
.copy-btn,
.telegram-btn,
.more-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: var(--font-sans);
    appearance: none;
    -webkit-appearance: none;
}
.share-btn:focus-visible,
.copy-btn:focus-visible,
.telegram-btn:focus-visible,
.more-share-btn:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}
.share-btn      { background: #25D366; color: #fff; }
.share-btn:hover { background: #20BD5A; }
.telegram-btn   { background: #0088CC; color: #fff; }
.telegram-btn:hover { background: #0077B5; }
.copy-btn       { background: var(--purple-light, #EDE9FE); color: var(--purple-dark, #5B21B6); }
.copy-btn:hover { background: #DDD6FE; }
.copy-btn.copied { background: var(--purple, #7C3AED); color: #fff; }
.more-share-btn { background: var(--gray-100, #F3F4F6); color: var(--gray-700, #374151); border-color: var(--gray-200, #E5E7EB); }
.more-share-btn:hover { background: var(--gray-200, #E5E7EB); }

/* --- Filter Tags --- */
.filter-tag {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--gray-200);
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}
.filter-tag:hover { border-color: var(--purple); color: var(--purple); }
.filter-tag.active { background: var(--purple); color: #fff; border-color: var(--purple); }

/* --- Sidebar --- */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--gray-200);
}
.sidebar-card h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--gray-900);
}
.sidebar-card a {
    display: block;
    padding: 6px 0;
    font-size: 0.8125rem;
    color: var(--gray-600);
}
.sidebar-card a:hover { color: var(--purple); }

/* Ad zone placeholder */
.ad-zone {
    min-height: 250px;
    background: var(--gray-50);
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gray-300);
}

/* --- Verified badge (per-uni source citation) --- */
.verified-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--green-light);
    color: #065F46;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.6875rem;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* --- Opener-anecdote disclosure (composite blog posts) --- */
.opener-disclosure {
    margin-top: 32px;
    padding: 14px 18px;
    border-left: 3px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.6;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Grade Table --- */
.grade-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.875rem;
}
.grade-table th {
    background: var(--purple-light);
    color: var(--purple-dark);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
}
.grade-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
}
.grade-table tr:hover td { background: var(--gray-50); }

/* --- Content Sections (below calculator) --- */
.content-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}
.content-section h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
}
.content-section p {
    color: var(--gray-600);
    margin-bottom: 16px;
    line-height: 1.7;
}

/* --- FAQ --- */
.faq-section { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.faq-section h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: 20px; }
.faq-item {
    border-bottom: 1px solid var(--gray-200);
    padding: 16px 0;
}
.faq-item summary {
    font-weight: 600;
    color: var(--gray-800);
    cursor: pointer;
    font-size: 0.9375rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; color: var(--purple); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
    margin-top: 12px;
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* --- Footer --- */
.footer {
    background: var(--gray-900);
    color: var(--gray-300);
    padding: 48px 0 24px;
    margin-top: 60px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-brand .logo-text { color: #fff; font-size: 1.125rem; }
.footer-brand .logo-text strong { color: var(--purple-light); }
.footer-tagline { font-size: 0.875rem; color: var(--gray-400); flex-basis: 100%; margin-top: 4px; }
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.footer-col h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.footer-col a {
    display: block;
    padding: 4px 0;
    font-size: 0.8125rem;
    color: var(--gray-400);
}
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
    border-top: 1px solid var(--gray-700);
    padding-top: 20px;
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: center;
}

/* --- Blog Cards --- */
.blog-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    margin-bottom: 16px;
}
.blog-card:hover {
    border-color: var(--purple);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
}
.blog-card-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.blog-card-thumb.purple { background: var(--purple-light); }
.blog-card-thumb.blue { background: var(--blue-light); }
.blog-card-thumb.yellow { background: var(--yellow-light); }
.blog-card-thumb.green { background: var(--green-light); }
.blog-card-content { flex: 1; }
.blog-card-content h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
    line-height: 1.4;
}
.blog-card-content p {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 8px;
    line-height: 1.5;
}
.blog-card-meta {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Blog featured image — inline SVG card (M6).
   Single rule replaces the old gradient-with-text div. Aspect ratio matches
   the SVG viewBox so it never stretches; border-radius clips the gradient
   corners cleanly. */
.blog-featured-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
    aspect-ratio: 1200/525;
}

@media (max-width: 768px) {
    .blog-card { flex-direction: column; gap: 12px; }
    .blog-card-thumb { width: 100%; height: 60px; font-size: 1.5rem; }
}

/* --- Error Page --- */
.error-page {
    text-align: center;
    padding: 80px 20px;
}
.error-page .error-code {
    font-family: var(--font-mono);
    font-size: 5rem;
    font-weight: 700;
    color: var(--purple-light);
}
.error-page h1 { font-size: 1.5rem; margin: 16px 0 8px; }
.error-page p { color: var(--gray-500); }
.error-page a { display: inline-block; margin-top: 20px; padding: 10px 24px; background: var(--purple); color: #fff; border-radius: var(--radius-sm); font-weight: 600; }
.error-page a:hover { background: var(--purple-dark); text-decoration: none; }

/* ===================================================================
   Responsive — Mobile First
   =================================================================== */

@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .header-nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 2px solid var(--purple-light);
        padding: 12px 20px;
        flex-direction: column;
        gap: 4px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    .header-nav.nav-open { display: flex; }
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 16px;
        max-height: none;
        overflow-y: visible;
    }
    .nav-dropdown.mega .nav-dropdown-menu { min-width: 0; max-width: none; padding: 8px 16px; }
    .mega-menu-list { grid-template-columns: 1fr; }

    .hero { padding: 40px 20px 24px; }
    .hero h1 { font-size: 1.75rem; }
    .hero p { font-size: 1rem; }

    .tools-grid { grid-template-columns: 1fr; padding: 0 16px 40px; }

    .calc-layout { grid-template-columns: 1fr; }
    .sidebar { order: 2; }

    .calc-card { padding: 20px; }
    .result-box .result-value { font-size: 2.25rem; }

    .footer-links { grid-template-columns: 1fr; gap: 20px; }
    .uni-grid { grid-template-columns: 1fr 1fr; }

    /* Let cells wrap so 3-column tables fit the screen; overflow-x is a
       fallback for genuinely wide tables. Tighter padding buys width. */
    .grade-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .grade-table th,
    .grade-table td { padding: 8px 10px; }
}

@media (max-width: 400px) {
    .hero h1 { font-size: 1.5rem; }
    .uni-grid { grid-template-columns: 1fr; }
    .result-box .result-value { font-size: 2rem; }
}

/* --- Dark mode (N4).
   Activated by data-theme="dark" on <html> (set by an inline early-paint
   script in base.html). Auto-applies when the user's OS prefers dark
   AND they haven't explicitly overridden via the header toggle.

   Strategy: invert the gray scale + recolour purple-light / blue-light to
   deep accent backgrounds. Most of the codebase reads gray-50 as page
   background and gray-900 as primary text, so inverting the scale flips
   most of the site automatically. The handful of hardcoded `#fff` /
   `linear-gradient` rules below catch what the var-flip misses. */
html[data-theme="dark"] {
    --gray-50:  #1F2937;
    --gray-100: #374151;
    --gray-200: #4B5563;
    --gray-300: #6B7280;
    --gray-400: #C5C9D2;
    --gray-500: #D1D5DB;
    --gray-600: #E5E7EB;
    --gray-700: #F3F4F6;
    --gray-800: #F9FAFB;
    --gray-900: #FFFFFF;
    --purple-light: #2D1B69;
    --blue-light:   #1E3A5F;
}
html[data-theme="dark"] body { background: #0F172A; color: #F1F5F9; }
html[data-theme="dark"] .header { background: #111827; border-bottom-color: #2D1B69; }
html[data-theme="dark"] .header-nav a,
html[data-theme="dark"] .nav-dropdown-btn { color: #F1F5F9; }
html[data-theme="dark"] .header-nav a:hover { color: var(--purple); }
html[data-theme="dark"] .header-nav a.active { color: var(--purple); background: rgba(124, 58, 237, 0.18); }
html[data-theme="dark"] .nav-dropdown-menu { background: #111827; border-color: #374151; box-shadow: 0 10px 40px rgba(0,0,0,0.45); }
html[data-theme="dark"] .nav-dropdown-menu a { color: #E5E7EB; }
html[data-theme="dark"] .nav-dropdown-menu a:hover { background: #1F2937; }
html[data-theme="dark"] .mega-menu-search { background: #111827; border-bottom-color: #374151; }
html[data-theme="dark"] .mega-menu-filter { background: #1F2937; border-color: #374151; color: #F1F5F9; }
html[data-theme="dark"] .mega-menu-list a .uni-short { color: #F1F5F9; }
html[data-theme="dark"] .mega-menu-list a .uni-state { color: #9CA3AF; }
html[data-theme="dark"] .mega-menu-empty { color: #9CA3AF; }
html[data-theme="dark"] .calc-card,
html[data-theme="dark"] .sidebar-card,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .uni-chip { background: #111827; border-color: #1F2937; color: #E5E7EB; }
html[data-theme="dark"] .result-box { background: linear-gradient(135deg, #2D1B69, #1E3A5F); color: #F1F5F9; }
html[data-theme="dark"] .result-box.empty { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .result-box .result-label { color: #C5C9D2; }
html[data-theme="dark"] .result-box .result-value { color: #FFFFFF; }
html[data-theme="dark"] .result-box .result-formula { color: #D1D5DB; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: #1F2937; color: #F1F5F9; border-color: #4B5563; }
html[data-theme="dark"] input::placeholder { color: #6B7280; }
html[data-theme="dark"] .footer { background: #0F172A; border-top-color: #1F2937; }
html[data-theme="dark"] .footer a { color: #C5C9D2; }
html[data-theme="dark"] .footer a:hover { color: var(--purple); }
html[data-theme="dark"] .footer h4 { color: #F1F5F9; }
html[data-theme="dark"] .grade-table { background: #111827; }
html[data-theme="dark"] .grade-table th { background: #1F2937; color: #F1F5F9; }
html[data-theme="dark"] .grade-table td { border-color: #374151; color: #E5E7EB; }
html[data-theme="dark"] .grade-table tr:hover td { background: #1F2937; }
html[data-theme="dark"] details summary { color: #F1F5F9; }
html[data-theme="dark"] .breadcrumbs { color: #C5C9D2; }
html[data-theme="dark"] .skip-link { background: var(--purple); }
html[data-theme="dark"] .theme-toggle { color: #F1F5F9; }
html[data-theme="dark"] .copy-btn { background: #2D1B69; color: #E9D5FF; }
html[data-theme="dark"] .more-share-btn { background: #1F2937; color: #E5E7EB; }
html[data-theme="dark"] .more-share-btn:hover { background: #374151; }
html[data-theme="dark"] .ad-zone { background: #1F2937; border-color: #374151; color: #C5C9D2; }
html[data-theme="dark"] .verified-badge { background: #064E3B; color: #A7F3D0; border-color: #065F46; }

@media (prefers-color-scheme: dark) {
    /* Only apply auto-dark when the user hasn't explicitly chosen light */
    html:not([data-theme="light"]):not([data-theme="dark"]) {
        --gray-50:  #1F2937;
        --gray-100: #374151;
        --gray-200: #4B5563;
        --gray-300: #6B7280;
        --gray-400: #C5C9D2;
        --gray-500: #D1D5DB;
        --gray-600: #E5E7EB;
        --gray-700: #F3F4F6;
        --gray-800: #F9FAFB;
        --gray-900: #FFFFFF;
        --purple-light: #2D1B69;
        --blue-light:   #1E3A5F;
    }
    html:not([data-theme="light"]):not([data-theme="dark"]) body { background: #0F172A; color: #F1F5F9; }
}

/* Header theme-toggle button */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-left: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--gray-50); border-color: var(--gray-300); }
.theme-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* --- Document generator (acknowledgement etc.). A fill-in form whose live
   preview reads as a printable A4 sheet. Print CSS below isolates .doc-preview
   so "Save as PDF" yields just the document. */
.doc-style-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-style-opt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius);
    font-size: 0.9375rem; cursor: pointer; background: var(--card-bg, #fff);
    transition: border-color 0.15s, background 0.15s;
}
.doc-style-opt:hover { border-color: var(--purple); }
.doc-style-opt input { accent-color: var(--purple); margin: 0; }

.doc-preview-wrap { margin-top: 20px; }
.doc-preview-label {
    display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px;
}
.doc-preview {
    --doc-accent: #1a1a1a;
    background: #fff; color: #1a1a1a;
    border: 1px solid var(--gray-300); border-radius: var(--radius);
    padding: 40px 44px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-family: Georgia, "Times New Roman", serif;
}
.doc-preview-heading {
    text-align: center; font-size: 1.0625rem; letter-spacing: 0.18em;
    margin: 0 0 24px; color: var(--doc-accent); font-weight: 700;
}

/* Colour-style picker (swatch radios) for the document generators. */
.doc-color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-swatch {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid var(--gray-300); border-radius: 8px; padding: 6px 12px 6px 8px;
    font-size: 0.9rem; transition: border-color .15s;
}
.doc-swatch:hover { border-color: var(--purple); }
.doc-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.doc-swatch span.sw {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15); display: inline-block;
}
.doc-swatch:has(input:checked) { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.doc-preview-body p {
    text-align: justify; line-height: 1.85; margin: 0 0 16px; color: #1a1a1a;
    font-size: 1.0625rem;
}
.doc-preview-body .doc-signoff {
    text-align: right; font-weight: 600; margin-top: 28px;
}
.doc-preview-body .doc-empty {
    text-align: center; color: var(--gray-400); font-style: italic;
    font-family: var(--font-sans, system-ui, sans-serif);
}
.doc-pdf-hint { font-size: 0.8125rem; color: var(--gray-500); margin: 10px 0 0; }

/* Title-page layout (project front page): centred A4 sheet, no body heading.
   Shares the .doc-preview chrome + print isolation; only alignment differs. */
.doc-preview.title-page { text-align: center; min-height: 380px; padding: 48px 44px; }
.doc-preview.title-page .doc-preview-body { display: flex; flex-direction: column; align-items: center; }
.doc-preview.title-page .doc-empty { margin: auto; }
.title-page .tp-title {
    font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em;
    line-height: 1.35; color: var(--doc-accent);
}
.title-page .tp-strong { font-weight: 700; line-height: 1.5; color: var(--doc-accent); }
.title-page .tp-line { line-height: 1.5; color: #1a1a1a; }
.title-page .tp-sub { font-style: italic; color: #333; line-height: 1.5; }
.title-page .tp-logo {
    font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--gray-400);
    font-family: var(--font-sans, system-ui, sans-serif);
    border: 1px dashed var(--gray-300); border-radius: 6px;
    padding: 10px 18px; margin: 4px 0;
}
.title-page .tp-gap { height: 18px; }

/* Declaration footer: place/date left, signatory names right. */
.doc-decl-footer {
    display: flex; justify-content: space-between; gap: 24px;
    margin-top: 36px; font-size: 1.0625rem; color: #1a1a1a;
}
.doc-decl-footer .doc-decl-meta div { margin-bottom: 4px; }
.doc-decl-footer .doc-decl-sign { text-align: right; font-weight: 600; }
.doc-decl-footer .doc-decl-sign div { margin-bottom: 4px; }

.doc-sample {
    border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 20px 24px; margin: 16px 0; background: var(--gray-50);
}
.doc-sample-body p { line-height: 1.7; margin: 0 0 12px; }
.doc-sample-body p:last-child { margin-bottom: 0; }
.doc-sample-copy { margin-top: 14px; }

/* --- Print stylesheet (N5).
   Strip chrome (nav, footer, sidebar, ads, action buttons) so a student
   printing or "Save as PDF" gets a clean result page. Result-box becomes
   the hero of the printed page. Links print without underline noise but
   keep the URL visible after the link text where useful. */
@media print {
    body { background: #fff; color: #000; font-size: 11pt; }
    .header,
    .footer,
    .nav-toggle,
    .header-nav,
    .nav-dropdown,
    .sidebar,
    .ad-zone,
    .action-row,
    .share-btn,
    .copy-btn,
    .hero-cta,
    .skip-link,
    .filter-tag,
    .nav-dropdown-menu { display: none !important; }
    .calc-layout { grid-template-columns: 1fr !important; }
    .calc-card,
    .result-box {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        background: #fff !important;
        page-break-inside: avoid;
    }
    .result-box .result-value {
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
        font-size: 2.25rem;
    }
    .result-grade { border: 1px solid #999 !important; color: #000 !important; }
    h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
    a { color: #000 !important; text-decoration: none; }
    .breadcrumbs { font-size: 9pt; color: #555; }
    .faq-section,
    .blog-featured-svg,
    .content-section .grade-table { page-break-inside: avoid; }

    /* Document generator: print ONLY the .doc-preview sheet at A4, nothing
       else (form, samples, FAQ, sidebar, headings). Classic isolate-one-node
       trick — hide everything, re-show the preview subtree, float it to the
       page origin. Scoped to body.doc-page so other pages are untouched. */
    @page { size: A4; margin: 18mm; }
    body.doc-page * { visibility: hidden; }
    body.doc-page .doc-preview,
    body.doc-page .doc-preview * { visibility: visible; }
    body.doc-page .doc-preview {
        position: absolute; left: 0; top: 0; width: 100%;
        border: none !important; box-shadow: none !important;
        padding: 0 !important; background: #fff !important;
    }
    /* Heading + title keep the chosen accent colour in the PDF; body text
       stays black for legibility. --doc-accent is set inline on .doc-preview. */
    body.doc-page .doc-preview-heading { color: var(--doc-accent) !important; }
    body.doc-page .doc-preview-body p { color: #000 !important; }
    body.doc-page .doc-preview-body .doc-signoff { color: #000 !important; }
    /* The logo placeholder is an on-screen editing aid; drop it from the PDF. */
    body.doc-page .title-page .tp-logo { display: none !important; }
    body.doc-page .title-page .tp-title,
    body.doc-page .title-page .tp-strong { color: var(--doc-accent) !important; }
    body.doc-page .title-page .tp-line,
    body.doc-page .title-page .tp-sub { color: #000 !important; }
    body.doc-page .doc-decl-footer,
    body.doc-page .doc-decl-footer * { color: #000 !important; }
}