/* Alpha School — global layer styles (assets/global.css)
   Loaded on every page. Adds: skip link, utility bar, mobile nav, dark mode,
   data-saver, offline banner, footer, RTL helpers and shared components. */

:root { --g-focus: #1d4ed8; --g-warn-bg: #fff7e0; --g-warn-bd: #f0d78c; --g-ok: #15803d; }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--g-focus); outline-offset: 2px; border-radius: 4px; }

/* Skip link */
.alpha-skip { position: absolute; left: .75rem; top: -4rem; z-index: 10000; background: #211d19; color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none; transition: top .15s; }
.alpha-skip:focus { top: 0; color: #fff; text-decoration: none; }
#main-content:focus { outline: none; }

/* Utility bar */
#alpha-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; justify-content: flex-end;
  padding: .4rem 1rem; background: #211d19; color: #f4f1ea; font-size: .8rem; line-height: 1.2; }
#alpha-bar .alpha-bar-brand { margin-inline-end: auto; font-weight: 700; letter-spacing: .04em; opacity: .9; }
#alpha-bar button, #alpha-bar select { font: inherit; color: #f4f1ea; background: #35302a; border: 1px solid #5a5249;
  border-radius: 7px; padding: .38rem .65rem; min-height: 34px; cursor: pointer; }
#alpha-bar select { max-width: 11.5rem; }
#alpha-bar select option { color: #211d19; background: #fff; }
#alpha-bar button:hover, #alpha-bar select:hover { background: #4a443c; }
#alpha-bar button[aria-pressed="true"] { background: #3d5a45; border-color: #7fae8c; color: #fff; }
#alpha-bar [hidden] { display: none !important; }
#alpha-bar a:focus-visible, #alpha-bar button:focus-visible, #alpha-bar select:focus-visible { outline-color: #9ec5ff; }

/* Translate panel */
#alpha-gt-panel { display: none; background: #fffdf8; color: #211d19; border-bottom: 1px solid #e9e2d5;
  padding: .8rem 1.25rem; font-size: .9rem; }
#alpha-gt-panel.open { display: block; }
#alpha-gt-panel p { margin: 0 0 .5rem; color: #6b6259; }

/* Offline banner */
#alpha-offline { display: none; position: sticky; top: 0; z-index: 9000; text-align: center; padding: .55rem 1rem;
  background: var(--g-warn-bg); border-bottom: 1px solid var(--g-warn-bd); color: #5c4a00; font-size: .9rem; font-weight: 600; }
#alpha-offline.show { display: block; }

/* Mobile navigation (works with the nav rendered by AlphaApp.renderNav) */
.nav-toggle { display: none; margin-inline-start: auto; background: transparent; border: 1px solid var(--border, #e9e2d5);
  color: var(--text, #211d19); border-radius: 8px; padding: .45rem .8rem; font: inherit; font-weight: 700; cursor: pointer; min-height: 40px; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; }
  #alpha-nav .nav-links { display: none; width: 100%; flex-direction: column; gap: .15rem; margin: 0; }
  #alpha-nav .nav-links.open { display: flex; }
  #alpha-nav .nav-links a { padding: .7rem .9rem; font-size: 1rem; }
  #alpha-bar { justify-content: flex-start; }
  #alpha-bar .alpha-bar-brand { display: none; }
}

/* Footer */
#alpha-global-footer { margin-top: 3rem; background: #211d19; color: #d9d2c4; padding: 2.25rem 1.25rem 2rem; font-size: .92rem; }
#alpha-global-footer .gf-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: 1.4fr 2fr; }
#alpha-global-footer .gf-brand { font-family: var(--serif, Georgia, serif); font-size: 1.35rem; color: #fff; margin: 0 0 .35rem; font-weight: 700; }
#alpha-global-footer p { margin: 0 0 .5rem; color: #b8afa0; }
#alpha-global-footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem 1rem; }
#alpha-global-footer a { color: #e9e2d5; text-decoration: none; }
#alpha-global-footer a:hover { color: #fff; text-decoration: underline; }
#alpha-global-footer .gf-note { grid-column: 1 / -1; border-top: 1px solid #3a342d; padding-top: 1rem; margin: 0; font-size: .82rem; color: #9a9184; }
@media (max-width: 700px) { #alpha-global-footer .gf-inner { grid-template-columns: 1fr; } }

/* Data saver */
html.alpha-ds img { content-visibility: auto; }
html.alpha-ds .alpha-hide-ds { display: none !important; }
.alpha-ds-note { display: none; }
html.alpha-ds .alpha-ds-note { display: inline; }

/* Dark mode: a whole-page inversion keeps every page (including ones with
   hard-coded colours) readable; media is inverted back so it looks natural. */
html[data-theme="dark"] { background: #111; filter: invert(.92) hue-rotate(180deg); color-scheme: dark; }
html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] canvas,
html[data-theme="dark"] iframe, html[data-theme="dark"] picture, html[data-theme="dark"] .leaflet-container,
html[data-theme="dark"] .yt-embed, html[data-theme="dark"] #alpha-bar, html[data-theme="dark"] .no-invert,
html[data-theme="dark"] #alpha-global-footer { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] #alpha-bar, html[data-theme="dark"] #alpha-global-footer { filter: none; }
html[data-theme="dark"] #alpha-bar, html[data-theme="dark"] #alpha-global-footer { background: #e8e2d6; color: #211d19; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Print */
@media print { #alpha-bar, #alpha-gt-panel, #alpha-global-footer, #alpha-offline, .alpha-skip, .nav-toggle { display: none !important; } }

/* ===== Shared components for the new pages ===== */
.g-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.g-wrap.narrow { max-width: 820px; }
.g-hero { background: linear-gradient(180deg, var(--surface, #fffdf8) 0%, var(--surface2, #f4f1ea) 100%);
  border: 1px solid var(--border, #e9e2d5); border-radius: 18px; padding: 3rem 1.75rem; text-align: center; margin: 1rem 0 2rem; }
.g-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin-bottom: .6rem; }
.g-hero .g-lede { font-size: 1.12rem; color: var(--muted, #6b6259); max-width: 680px; margin: 0 auto 1.5rem; }
.g-badge { display: inline-block; background: var(--accent, #3d5a45); color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: .4rem 1.05rem; border-radius: 999px; margin-bottom: 1rem; }
.g-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--accent, #3d5a45); color: #fff;
  border: 1px solid var(--accent, #3d5a45); padding: .8rem 1.4rem; border-radius: 10px; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; min-height: 44px; }
.g-btn:hover { background: var(--accent-d, #2d4433); color: #fff; text-decoration: none; }
.g-btn.alt { background: transparent; color: var(--accent, #3d5a45); }
.g-btn.alt:hover { background: var(--surface2, #f4f1ea); color: var(--accent-d, #2d4433); }
.g-btn.sm { padding: .5rem .9rem; min-height: 38px; font-size: .9rem; }
.g-btn[disabled] { opacity: .55; cursor: not-allowed; }
.g-h2 { font-size: 1.55rem; margin: 2.2rem 0 1rem; }
.g-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-card { background: var(--surface, #fffdf8); border: 1px solid var(--border, #e9e2d5); border-radius: 14px; padding: 1.3rem 1.35rem;
  box-shadow: 0 1px 3px rgba(33,29,25,.04); }
.g-card h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.g-card p { margin: 0 0 .6rem; color: var(--muted, #6b6259); font-size: .95rem; }
.g-card .g-meta { font-size: .82rem; color: var(--muted, #6b6259); }
.g-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.5rem 0; }
.g-stat { text-align: center; background: var(--surface, #fffdf8); border: 1px solid var(--border, #e9e2d5); border-radius: 14px; padding: 1.1rem .8rem; }
.g-stat b { display: block; font-family: var(--serif, Georgia, serif); font-size: 2rem; color: var(--accent, #3d5a45); line-height: 1.1; }
.g-stat span { font-size: .85rem; color: var(--muted, #6b6259); }
.g-chip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 999px; background: #e9e2d5; color: #5b5349; margin: 0 .3rem .3rem 0; }
.g-chip.green { background: #dcefe0; color: #1f5a2e; } .g-chip.blue { background: #dbeafe; color: #1e40af; }
.g-chip.amber { background: #fef3c7; color: #92400e; } .g-chip.violet { background: #ede9fe; color: #5b21b6; }
.g-prog { height: 8px; background: var(--surface2, #f4f1ea); border-radius: 999px; overflow: hidden; border: 1px solid var(--border, #e9e2d5); }
.g-prog > i { display: block; height: 100%; background: var(--accent, #3d5a45); width: 0; }
.g-field { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--muted, #6b6259); }
.g-field select, .g-field input[type="search"], .g-field input[type="text"] { font: inherit; font-weight: 400; color: var(--text, #211d19);
  background: var(--surface, #fffdf8); border: 1px solid var(--border, #e9e2d5); border-radius: 9px; padding: .6rem .8rem; min-height: 44px; }
.g-filters { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 1.25rem; }
.g-notice { background: var(--g-warn-bg); border: 1px solid var(--g-warn-bd); border-radius: 12px; padding: .9rem 1.1rem; font-size: .92rem; color: #5c4a00; margin: 1rem 0; }
.g-info { background: #eef3ee; border: 1px solid #cfdccf; border-radius: 12px; padding: .9rem 1.1rem; font-size: .92rem; color: #1f3d28; margin: 1rem 0; }
.g-steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: .9rem; }
.g-steps > li { counter-increment: s; position: relative; padding: .2rem 0 .2rem 3rem; }
.g-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent, #3d5a45); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.g-stage { border-inline-start: 4px solid var(--accent, #3d5a45); padding-inline-start: 1.1rem; margin: 1.6rem 0; }
.g-stage h3 { margin-bottom: .2rem; }
.g-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--border, #e9e2d5); }
.g-row:first-child { border-top: 0; }
.g-row .g-grow { flex: 1; min-width: 0; }
.g-trophy { text-align: center; padding: 1rem .6rem; border: 1px dashed var(--border, #e9e2d5); border-radius: 14px; background: var(--surface, #fffdf8); }
.g-trophy .em { font-size: 2rem; filter: grayscale(1); opacity: .45; }
.g-trophy.on { border-style: solid; border-color: #cfdccf; background: #f3f8f3; }
.g-trophy.on .em { filter: none; opacity: 1; }
.g-trophy b { display: block; font-size: .92rem; } .g-trophy span { font-size: .78rem; color: var(--muted, #6b6259); }
details.g-faq { background: var(--surface, #fffdf8); border: 1px solid var(--border, #e9e2d5); border-radius: 12px; padding: .2rem 1.1rem; margin-bottom: .7rem; }
details.g-faq summary { cursor: pointer; font-weight: 700; padding: .8rem 0; }
details.g-faq[open] summary { border-bottom: 1px solid var(--border, #e9e2d5); margin-bottom: .6rem; }
.g-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.g-table th, .g-table td { text-align: start; padding: .6rem .7rem; border-bottom: 1px solid var(--border, #e9e2d5); vertical-align: top; }
.g-table th { background: var(--surface2, #f4f1ea); }
.g-scroll { overflow-x: auto; }
.g-save { margin: 1rem 0; padding: 1rem 1.2rem; background: #f3f8f3; border: 1px solid #cfdccf; border-radius: 12px; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.g-save .g-grow { flex: 1; min-width: 200px; font-size: .92rem; }

/* RTL helpers for chrome and fully translated pages */
[dir="rtl"] .g-steps > li { padding: .2rem 3rem .2rem 0; } [dir="rtl"] .g-steps > li::before { left: auto; right: 0; }

/* University and Beyond banner */
.g-unb { display: flex; align-items: center; gap: .85rem; justify-content: center; text-decoration: none; color: #fff; background: linear-gradient(90deg,#2d4433,#3d5a45);
  border-radius: 12px; padding: .8rem 1.2rem; margin: .5rem 0 0; }
.g-unb:hover { background: linear-gradient(90deg,#243829,#335040); color: #fff; text-decoration: none; }
.g-unb-mark { font-size: 1.6rem; } .g-unb-txt { display: flex; flex-direction: column; text-align: start; line-height: 1.25; }
.g-unb-txt strong { font-size: 1rem; } .g-unb-txt small { opacity: .85; font-size: .82rem; }