/* ════════════════════════════════════════════════════════════════════
 * FG-CMS — starter stylesheet
 * ════════════════════════════════════════════════════════════════════
 *
 * A new site starts here. Three parts, in order:
 *
 *   1. Editor chrome     do not touch — the editor needs it
 *   2. Brand             CHANGE THIS. Colours and fonts, nothing else.
 *   3. Vocabulary        the shared class names, expressed in terms of
 *                        part 2, so they follow the brand automatically
 *
 * Setting part 2 correctly is most of the work of a new site. Every
 * block in the library reads these tokens, so a block installed from
 * another project arrives in this brand's colours and typefaces
 * without being edited.
 * ════════════════════════════════════════════════════════════════════ */


/* ── 1. Editor chrome ────────────────────────────────────────────────
 * Controls the editor injects into the page — add/remove buttons, block
 * tools, the colour chip. Hidden on the public site, shown when
 * body.cms-edit is set (only ever on edit.php). Leave this alone. */
.cms-list-item-add, .cms-list-item-remove, .cms-list-item-move,
.cms-block-tools, .cms-block-info, .cms-block-name, .cms-block-bg-btn,
.cms-href-btn, .cms-link-tools, .cms-link-warn, .cms-add-link,
.cms-field-color-chip, .chips-source { display: none !important; }

body.cms-edit .cms-list-item-add    { display: block        !important; }
body.cms-edit .cms-list-item-remove,
body.cms-edit .cms-list-item-move,
body.cms-edit .cms-block-tools,
body.cms-edit .cms-block-info,
body.cms-edit .cms-block-name,
body.cms-edit .cms-block-bg-btn     { display: flex         !important; }
body.cms-edit .cms-href-btn         { display: inline-block !important; }
body.cms-edit .cms-link-tools       { display: inline-flex  !important; }
body.cms-edit .cms-add-link         { display: inline-flex  !important; }
body.cms-edit .cms-link-warn        { display: inline-block !important; }
body.cms-edit .cms-field-color-chip { display: inline-flex  !important; }

/* Every editor-wrapped block must be a positioned ancestor so that
   the absolute-positioned .cms-block-tools (top-right ↑↓✕) and
   .cms-block-info (bottom-left name pill + colour chip) anchor to the
   block. Without this the pill falls back to the viewport, which
   authors see as "block name doesn't appear until refresh". */
body.cms-edit .cms-block-host { position: relative; }


/* ── 2. Brand — CHANGE THIS ──────────────────────────────────────────
 * The whole palette and type system for the site. Everything below
 * derives from these, so this is the only block that needs editing to
 * rebrand.
 *
 * The neutral values here are a working placeholder, not a design. */
:root {
  /* A//A — from AA/References/aa_awards_website.html (2026-09-30).
     A dark site: the page itself is the near-black ground. */

  /* Grounds */
  --color-bg:           #05070b;   /* the page */
  --color-surface:      #080c13;   /* panels, cards, callouts */
  --color-surface-2:    #0b1420;   /* card hover */
  --color-dark-bg:      #05070b;   /* dark section ground (same as page) */
  --color-on-dark:      #f4f7fb;   /* text on that ground */

  /* Ink */
  --color-fg:           #f4f7fb;   /* headings */
  --color-fg-muted:     #a7b0bd;   /* body text, intros */
  --color-muted:        #8d9aaa;   /* card copy, captions */
  --color-dim:          #647487;   /* indices, footer meta */

  /* Accent — electric blue. Eyebrows, numerals, glyphs, hover. */
  --color-accent:       #55c8ff;
  --color-accent-soft:  #bfeaff;   /* hover on the light primary button */
  --color-accent-glow:  rgba(85, 200, 255, .55);
  --color-accent-deep:  #0b3d6b;   /* deep blue band — white text on it */

  /* Hairlines */
  --color-border:       rgba(204, 220, 242, .16);
  --color-border-soft:  rgba(220, 235, 255, .07);

  /* Type. Helvetica Neue — the face the approved mockup rendered in
     (its CSS named Inter first, but never loaded it). A system font:
     Apple devices have it, everything else falls back to Arial.
     Nothing is downloaded. */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-eyebrow: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, Menlo, Consolas, monospace;

  /* Measure and rhythm */
  --maxw:            1240px;
  --space-section-y: 105px;
  --space-section-x: 36px;
}


/* ── 3. Vocabulary — shared names, this brand's values ───────────────
 * Every FG-CMS site defines these same names. A block from any project
 * uses them and lands correctly here. See BLOCK-PRIMITIVES.md.
 *
 * Change the VALUES freely to suit the brand. Do not rename them, and
 * do not delete one because nothing uses it yet — the next block
 * installed from the library may. */

/* Short aliases. Blocks written for the ADS/EADA/TIFA line ask for
   these names; blocks from the other line ask for --color-*. Both work
   because they point at the same colours. */
:root {
  --ink:    var(--color-fg);
  --paper:  var(--color-on-dark);
  --bg:     var(--color-bg);
  --accent: var(--color-accent);
  --line:   var(--color-border);
  --muted:  var(--color-muted);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Section shell */
section { padding: var(--space-section-y) var(--space-section-x); }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.section--dark    { background: var(--color-dark-bg); color: var(--color-on-dark); }
.section--dark .section-title { color: var(--color-on-dark); }
.section--dark .section-label { color: rgba(255,255,255,.6); }
.section--surface { background: var(--color-surface); }

/* Typography */
.section-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 400; letter-spacing: 2.3px;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 54px); font-weight: 350;
  line-height: 1.05; letter-spacing: -.045em;
  color: var(--color-fg); max-width: 700px; text-wrap: balance;
}
.section-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 400;
  color: var(--color-accent);
}
.copy {
  font-size: 14px; line-height: 1.8;
  color: var(--color-fg-muted); max-width: 500px;
}
.copy p + p { margin-top: 1em; }
.copy a { color: var(--color-accent); text-decoration: none; }
.copy a:hover { text-decoration: underline; }

/* Controls — light outline by default, solid white for the primary. */
.btn, .btn-primary, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 43px; padding: 0 22px;
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  border: 1px solid rgba(230, 240, 255, .48); border-radius: 4px;
  background: transparent; color: var(--color-fg);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover, .btn-outline:hover {
  border-color: var(--color-accent);
  background: rgba(65, 177, 255, .08);
  transform: translateY(-1px);
}
.btn-primary { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); font-weight: 600; }
.btn-primary:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); transform: translateY(-1px); }
/* Blocks from the ADS line use .btn.solid for the filled variant. */
.btn.solid { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.btn.solid:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); }

/* Decoration */
.rule { width: 48px; height: 1px; background: var(--color-border); border: 0; margin-bottom: 32px; }
.card { background: var(--color-bg); border: 1px solid var(--color-border); padding: 28px; }
.chip {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-muted);
  border: 1px solid var(--color-border); padding: 8px 14px;
}

/* Motion. shared/site.js adds .visible on scroll. Both escape hatches
   matter: without them a block carrying .reveal is invisible wherever
   the script cannot run. */
@media (hover: hover) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: .1s; }
  .reveal-delay-2 { transition-delay: .2s; }
  .reveal-delay-3 { transition-delay: .3s; }
  .reveal-delay-4 { transition-delay: .4s; }
}
@media (hover: none) { .reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* State */
.active   { }            /* nav/tab current item — style to suit */
.is-empty { opacity: .45; }

/* Editor-only: colour tokens the picker offers, and the ink/paper pair
   it uses to keep text legible on a chosen background. Add or remove
   entries to change what the colour picker shows. */
:root {
  --cms-palette: var(--color-bg), var(--color-surface), var(--color-muted),
                 var(--color-accent), var(--color-fg), var(--color-dark-bg);
  --cms-ink:     var(--color-fg);
  --cms-paper:   var(--color-on-dark);
}


/* ── 4. Site shell — the nav (shared/nav.php) ────────────────────────
 * Fixed to the top. Transparent over the first block, as in the mockup;
 * once the page scrolls (site.js adds .scrolled) it gets a dark, blurred
 * ground so it reads over content. The first block (aa_hero on home,
 * aa_page_header elsewhere) carries enough top padding to clear it.
 * In the editor it stays absolute — the editor's own bar owns the top. */
:root { --aa-nav-h: 88px; }
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .3s, border-color .3s;
  height: var(--aa-nav-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 max(var(--space-section-x), calc((100vw - var(--maxw)) / 2));
  border-bottom: 1px solid var(--color-border-soft);
}
nav.site-nav.scrolled, nav.site-nav.is-open {
  background-color: rgba(5, 7, 11, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}
body.cms-edit nav.site-nav { position: absolute; }
.nav-logo { flex-shrink: 0; }
.nav-logo a.nav-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 40px; width: auto; display: block; }
.nav-logo-empty { font-size: 12px; color: var(--color-muted); }
.nav-links {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 42px);
  list-style: none; margin-left: auto;
}
.nav-links a { font-size: 12px; color: #d5dbe5; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--color-accent); }
/* The nav CTA is solid accent blue, with the page's near-black ink. */
nav.site-nav .nav-cta {
  background: var(--color-accent); color: var(--color-bg);
  border-color: var(--color-accent); font-weight: 600;
}
nav.site-nav .nav-cta::after { content: "\2197"; }
nav.site-nav .nav-cta:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-option { font-size: 11px; color: var(--color-muted); text-decoration: none; margin-left: 8px; }
.lang-option.active { color: var(--color-accent); }
.nav-hamburger {
  display: none; position: relative; width: 40px; height: 36px;
  background: transparent; border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer;
}
.nav-hamburger span {
  position: absolute; left: 11px; width: 16px; height: 1px;
  background: var(--color-fg); transition: transform .2s, opacity .2s, top .2s;
}
.nav-hamburger span:nth-child(1) { top: 12px; }
.nav-hamburger span:nth-child(2) { top: 17px; }
.nav-hamburger span:nth-child(3) { top: 22px; }
nav.site-nav.is-open .nav-hamburger span:nth-child(1) { top: 17px; transform: rotate(45deg); }
nav.site-nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.site-nav.is-open .nav-hamburger span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  :root { --aa-nav-h: 74px; --space-section-y: 75px; --space-section-x: 18px; }
  nav.site-nav { gap: 16px; }
  .nav-hamburger { display: inline-block; }
  .nav-right { margin-left: auto; }
  nav.site-nav .nav-cta { display: none; }
  .nav-links {
    display: none; position: absolute; top: var(--aa-nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px 18px 18px; background: rgba(5, 7, 11, .97);
    border-bottom: 1px solid var(--color-border);
  }
  nav.site-nav.is-open .nav-links { display: flex; }
  .nav-links a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
}

/* Scroll fade-ins are for visitors. In the editor every block is shown
   as-is: a re-rendered block is new DOM the observer never saw, and it
   would otherwise stay invisible. */
body.cms-edit .reveal { opacity: 1 !important; transform: none !important; }