/* What the live site adds to the designs' stylesheet (design/home.css):
   the page itself, the nav's two menus, the phone menu, the announcement
   bar and the form's sending and error states. Colours and type are the
   design's own; nothing here restyles a design. */

* { box-sizing: border-box; }
html, body { margin: 0; background: #1A1A15; }
html { scroll-padding-top: 24px; }
body { min-height: 100svh; }
img, svg { max-width: 100%; }

/* ---- the nav's menus: Platform and Resources, on hover or focus ---- */
.nav-links .has-drop { position: relative; }
.nav-drop {
  position: absolute; z-index: 4; top: 100%; left: -16px;
  padding-top: 18px; /* the gap the pointer crosses */
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s;
}
.has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 0.15s, transform 0.15s;
}
.nav-drop ul { list-style: none; margin: 0; padding: 6px; min-width: 320px; background: #1A1A15; }
.nav-links .nav-drop a, .hero.light .nav-links .nav-drop a {
  display: grid; gap: 6px; padding: 14px 14px 15px;
  color: #E2E0D7; opacity: 1; text-transform: none; letter-spacing: 0;
  transition: background 0.15s;
}
.nav-links .nav-drop a:hover, .nav-links .nav-drop a:focus-visible, .nav-links .nav-drop a[aria-current] { background: rgba(226, 224, 215, 0.07); }
.nav-drop-label { font: 400 12px/1.2 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.nav-drop-note { font: 400 14px/1.3 "APK Galeria", "Geist", system-ui, sans-serif; color: rgba(226, 224, 215, 0.62); }
.nav-links > li > a[aria-current] { opacity: 1; }

/* ---- the phone's menu: the whole list, full screen, in ink ---- */
.nav-panel {
  position: fixed; z-index: 100; inset: 0;
  display: flex; flex-direction: column; gap: 40px;
  padding: 0 16px 32px; overflow-y: auto; overscroll-behavior: contain;
  background: #1A1A15; color: #E2E0D7;
  font-family: "APK Galeria", "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.nav-panel[hidden] { display: none; }
.nav-panel-bar { display: flex; align-items: center; justify-content: space-between; height: 60px; flex: none; }
.nav-panel .nav-logo img { display: block; height: 19px; width: auto; }
.nav-close { height: 30px; padding: 0; background: none; border: 0; color: #E2E0D7; cursor: pointer; font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.nav-panel nav { display: grid; gap: 28px; }
.nav-panel-group p { margin: 0 0 10px; color: rgba(226, 224, 215, 0.5); }
.nav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nav-panel ul a { color: #E2E0D7; text-decoration: none; font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; }
.nav-panel .btn { align-self: stretch; margin-top: auto; height: 52px; background: #9F816B; color: #1A1A15; }
.nav-panel .mono { font: 400 11px/1.4 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
html.menu-open { overflow: hidden; }

/* ---- the announcement bar (Site settings), above the page ---- */
.announce {
  display: block; position: relative; z-index: 5; padding: 11px 16px;
  background: #957760; color: #1A1A15; text-align: center; text-decoration: none;
  font: 400 12px/1.3 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
}
a.announce:hover { background: #A38671; }

/* ---- forms: sending, and a failure the visitor can act on ---- */
form.sending [type=submit] { pointer-events: none; opacity: 0.7; }
.form-error { margin: 0; padding: 14px 30px 16px var(--card-in, 24px); border-top: 1px solid var(--card-line); color: var(--card-ink); font-size: 15px; line-height: 1.4; }
.form-error[hidden] { display: none; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-drop { transition: none; }
}
.announce { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.announce .arrow { width: 16px; height: 16px; }
a.announce:hover .arrow { transform: translateX(3px); }

/* a keyboard's first stop: straight to the page */
.skip { position: absolute; z-index: 200; left: 16px; top: -60px; padding: 10px 14px; background: #1A1A15; color: #E2E0D7; font: 400 12px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 16px; }
.announce[hidden] { display: none; }