/* American College of Advanced Studies™ — site stylesheet.
   1. Fonts  2. Modernist design system  3. ACAS theme  4. Site additions  5. Hover states */

/* ══ 1. Fonts ══════════════════════════════════════════════════════════ */

/* Archivo (SIL Open Font License), self-hosted as a variable font covering weights 400–800. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ══ 2. Modernist design system ═══════════════════════════════════════ */

/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══ 3. ACAS theme ════════════════════════════════════════════════════ */

/* ACAS token retune of Modernist: the accent role shifts from red to the
   institutional navy of the ACAS seal, with the seal's gold as the secondary
   role. Ramps generated on the same perceptual lightness scale as the system's.
   Everything else — flat surfaces, 0px radius, 2px rules, Archivo — is untouched. */
:root {
  --color-bg: #f4f3f2;
  --color-surface: #e9e8e6;
  --color-text: #1a1c22;
  --color-accent: #12305c;
  --color-accent-2: #a07f22;
  --color-divider: color-mix(in srgb, #12305c 38%, transparent);

  --color-accent-100: #eef2f9;
  --color-accent-200: #d7e0ef;
  --color-accent-300: #b2c2dd;
  --color-accent-400: #7a92be;
  --color-accent-500: #3d5c95;
  --color-accent-600: #1d3f74;
  --color-accent-700: #12305c;
  --color-accent-800: #0c2244;
  --color-accent-900: #08172e;

  --color-accent-2-100: #fbf6e6;
  --color-accent-2-200: #f4e9c6;
  --color-accent-2-300: #e9d594;
  --color-accent-2-400: #d9b957;
  --color-accent-2-500: #c19a2e;
  --color-accent-2-600: #a07f22;
  --color-accent-2-700: #7d6318;
  --color-accent-2-800: #5b4711;
  --color-accent-2-900: #3a2d0b;

  --acas-navy: #12305c;
  --acas-navy-deep: #08172e;
  --acas-gold: #c19a2e;
}

/* Pressed/hover for the primary go one step darker, not lighter, on this ground. */
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-900); }
.btn { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 18px; }
.card-kicker { color: var(--color-accent-700); }

body { font-size: 16px; line-height: 1.6; }
h1 { font-size: clamp(38px, 5.2vw, 66px); letter-spacing: -0.025em; }
h2 { font-size: clamp(27px, 3vw, 38px); }
h3 { font-size: 24px; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

/* On the navy poster fields, invert the rules and links. */
.on-navy { color: #f4f3f2; }
.on-navy a { color: var(--color-accent-2-300); }
.on-navy a:hover { color: #fff; }
.on-navy .btn-secondary { border-color: color-mix(in srgb, #fff 45%, transparent); color: #fff; }
.on-navy .btn-secondary:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.on-navy .table th { color: color-mix(in srgb, #fff 65%, transparent); border-bottom-color: color-mix(in srgb, #fff 45%, transparent); }
.on-navy .table td { border-bottom-color: color-mix(in srgb, #fff 25%, transparent); }
.on-navy .table tbody tr:hover { background: color-mix(in srgb, #fff 6%, transparent); }
.on-navy :focus-visible { outline-color: var(--color-accent-2-400); }


/* Tables: one strong ink rule under the header, faint rules between rows,
   a strong rule closing the block. Cells are flush left with no leading pad. */
.table { font-size: 14.5px; line-height: 1.45; }
.table th {
  font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700;
  color: var(--color-accent-700); padding: 12px 24px 12px 0;
  border-bottom: 2px solid var(--color-text);
}
.table td {
  padding: 15px 24px 15px 0; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody tr:last-child td { border-bottom: 2px solid var(--color-divider); }
.table tbody tr:hover { background: transparent; }
.table td:first-child { font-family: var(--font-heading); font-weight: 600; }
.table td strong { font-family: var(--font-heading); font-weight: 700; }
.table tr.total td {
  border-top: 2px solid var(--color-text); border-bottom: 0;
  font-family: var(--font-heading); font-weight: 700; padding-top: 18px;
}
.table tbody tr.total:last-child td { border-bottom: 0; }
/* Key–value tables: small caps label column, plain value column. */
.table-kv td { font-size: 15px; }
.table-kv td:first-child {
  width: 40%; font-family: var(--font-body); font-weight: 400;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-700); padding-top: 18px;
}
/* Numeric tables: every column after the first is right-aligned. */
.table-num th:not(:first-child), .table-num td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.on-navy .table th { color: var(--color-accent-2-300); border-bottom-color: color-mix(in srgb, #fff 70%, transparent); }
.on-navy .table td { border-bottom-color: color-mix(in srgb, #fff 18%, transparent); }
.on-navy .table-kv td:first-child { color: color-mix(in srgb, #fff 65%, transparent); }

/* Color pass: photographs print in full color with a gold base rule;
   rules across the site take a navy cast; headings sit in navy. */
.grayscale { filter: none; border-bottom: 4px solid var(--acas-gold); }
h1, h2 { color: var(--acas-navy); }
.on-navy h1, .on-navy h2 { color: inherit; }
.hr { background: var(--acas-navy); }
.btn-secondary { border-color: var(--acas-navy); color: var(--acas-navy); }
.btn-secondary:hover { background: var(--color-accent-100); }
.btn-secondary:active { background: var(--color-accent-200); }
.table th { color: var(--acas-navy); border-bottom-color: var(--acas-navy); }
.table tr.total td { border-top-color: var(--acas-navy); color: var(--acas-navy); }
.table-kv td:first-child { color: var(--color-accent-600); }
::selection { background: var(--color-accent-2-200); }

/* ══ 4. Site additions ════════════════════════════════════════════════ */

/* Additions the static site needs beyond the design: photographs in their
   frames, the responsive navigation, form helpers, accessibility. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[hidden] { display: none !important; }

/* Skip link for keyboard users — visible only while focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acas-navy); color: #fff; padding: 10px 16px;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; outline-color: var(--acas-gold); }
.visually-hidden { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Photographs fill their positioned frame (the .grayscale wrapper), with the
   Unsplash credit at the bottom-left corner. */
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.slot-credit {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgba(8, 23, 46, 0.55); padding: 4px 8px; text-decoration: none;
}
.slot-credit:hover, .slot-credit:focus-visible { color: #fff; background: rgba(8, 23, 46, 0.85); }

/* Navigation: below 1000px the link row gives way to a menu button that opens
   the navy panel (#nav-menu). */
.nav-toggle { display: none !important; }
@media (max-width: 999.98px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: grid !important; }
}
.nav-links a[aria-current="page"] { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; }
.nav-menu a[aria-current="page"] { color: var(--color-accent-2-300) !important; }

/* Enquiry form: error notice shown when contact.php redirects with ?error=1. */
.form-error {
  margin: 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.55;
  border-top: 2px solid var(--color-accent-2-600); background: var(--color-accent-2-100);
}
#enquiry-sent:focus { outline: none; }

@media print {
  header { position: static !important; }
  .slot-credit, .skip-link, .nav-toggle { display: none !important; }
}

/* ══ 5. Hover states ══════════════════════════════════════════════════ */

/* ── Hover states from the design (style-hover attributes). !important lets them win over the inline styles. ── */
.topbar-link:hover { opacity:1 !important; color:#fff !important; }
.topbar-catalog:hover { color:#fff !important; }
.nav-link:hover { color:var(--color-accent) !important; border-bottom-color:var(--color-accent) !important; }
.hover-tint:hover { background:var(--color-accent-100) !important; }
.footer-link:hover { color:var(--color-accent-2-300) !important; }
.index-link:hover { border-bottom-color:var(--acas-navy) !important; color:var(--acas-navy-deep) !important; }