@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus&display=swap');

/* ===============================
   Brand Colours and Typography
   =============================== */
:root {
  --brand-background: #05304C;
  --brand-gold: #FFD966;
  --brand-gold-deep: #E6A816;
}

/* ===============================
   Base Page Styling
   =============================== */
body {
  font-family: 'Gentium Plus', serif;
  background: var(--brand-background);
  color: var(--brand-gold);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

a {
  color: var(--brand-gold);
  text-decoration: underline;
}

a:hover, a:focus {
  text-decoration: none;
}

h1, h2, h3 {
  font-weight: normal;
  margin: 0 0 0.75rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 2rem; }
h3 { font-size: 1.25rem; margin-top: 1.25rem; }

p { margin: 0 0 1rem; }

/* ===============================
   Layout Containers
   =============================== */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ===============================
   Header / Branding
   =============================== */
.site-header {
  text-align: center;
  padding: 2rem 1.5rem 1rem;
}

.site-title {
  font-size: 2.25rem;
  margin: 0.25rem 0 0.5rem;
}

.site-subtitle {
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
}

/* ===============================
   Footer
   =============================== */
.site-footer {
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--brand-gold-deep);
  margin-top: 3rem;
  font-size: 0.95rem;
}

/* ===============================
   Blocks & Utilities
   =============================== */
.section {
  margin: 2rem 0;
}

.muted {
  opacity: 0.9;
}

hr {
  border: none;
  border-top: 1px solid var(--brand-gold-deep);
  margin: 2rem 0;
}

/* ===============================
   Cards
   =============================== */
.card {
  border: 1px solid var(--brand-gold-deep);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  background: rgba(0,0,0,0.08);
}

/* ===============================
   Lists
   =============================== */
ul {
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.5rem;
}

/* ===============================
   Subnavigation (page-level)
   =============================== */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  border-bottom: 1px solid var(--brand-gold-deep);
  padding-bottom: 0.5rem;
}

.subnav a {
  font-weight: normal;
  color: var(--brand-gold);
  text-decoration: none;
}

.subnav a:hover,
.subnav a:focus {
  text-decoration: underline;
}

/* ===============================
   Main Navigation (site-wide)
   =============================== */

#mainnav {
  margin: 1rem 0 0;
}

/* Visually hidden (for a11y helpers) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Optional fallback in case .sr-only appears */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Hamburger button (visible on ALL viewports) */
.hamburger {
  display: inline-flex; /* drawer everywhere */
  align-items: center;
  justify-content: center;
  width: 46px; height: 40px;
  background: transparent;
  border: 1px solid var(--brand-gold-deep);
  border-radius: 4px;
  color: var(--brand-gold);
  cursor: pointer;
  gap: 0.25rem;
  padding: 0;

  /* pinned top-right */
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 1100; /* above backdrop (1000) */
  backdrop-filter: saturate(120%) blur(2px); /* subtle legibility on images */
}

/* Enlarge click target slightly */
.hamburger::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.hamburger:hover,
.hamburger:focus {
  background: rgba(0,0,0,0.1);
}

/* Visually hide the text label but keep for screen readers */
.hamburger-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Hamburger icon lines */
.hamburger span {
  position: relative; display: block; width: 20px; height: 2px; background: var(--brand-gold);
}
.hamburger span::before,
.hamburger span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--brand-gold);
}
.hamburger span::before { top: -7px; }
.hamburger span::after  { top: 7px; }

/* Inline desktop navigation list — always hidden */
.mainnav-inline {
  list-style: none;
  padding: 0; margin: 0;
  gap: 0; justify-content: center; flex-wrap: wrap;
  display: none !important;
}
.mainnav-inline li { display: none !important; }
.mainnav-inline a { display: none !important; }

/* ===============================
   Drawer Navigation
   =============================== */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: none !important; /* don’t dim panel */
  opacity: 1 !important;
  filter: none !important;

  /* interactions: only backdrop/panel capture clicks */
  pointer-events: none;
}
.nav-drawer__backdrop,
.nav-drawer__panel {
  pointer-events: auto;
}

/* Backdrop dims only the page */
.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 0;
}

/* Drawer panel sits above backdrop (left side by default) */
.nav-drawer__panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 520px); /* slightly wider on desktop */
  background: var(--brand-background);
  border-right: 1px solid var(--brand-gold-deep);
  box-shadow: 0 0 30px rgba(0,0,0,.5);
  padding: 1rem 1rem 2rem;
  overflow-y: auto;
  z-index: 1;
}

/* Drawer close button (on top of panel content) */
.drawer-close {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.25rem 0 1rem;
  background: transparent;
  border: 1px solid var(--brand-gold-deep);
  border-radius: 4px;
  color: var(--brand-gold);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  position: relative;
  z-index: 2;
}

.drawer-close:hover,
.drawer-close:focus {
  background: rgba(0,0,0,0.1);
}

/* Drawer nav list */
.nav-drawer__list {
  display: grid;
  gap: 0.75rem;
  margin: 0; padding: 0;
  list-style: none;
}

.nav-drawer__list a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.nav-drawer__list a:hover,
.nav-drawer__list a:focus {
  text-decoration: underline;
}

/* Subsections inside drawer */
.drawer-section {
  margin-top: 1.25rem;
}
.drawer-section h3, .drawer-section summary {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}
.drawer-section ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .35rem;
}

/* Hide attribute (for JS toggling) */
[hidden] { display: none !important; }

/* ===============================
   Forms
   =============================== */
form {
  margin: 1rem 0 2rem;
}

label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  background: rgba(0,0,0,0.08);
  border: 1px solid var(--brand-gold-deep);
  border-radius: 4px;
  color: var(--brand-gold);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 1rem;
}

button,
input[type="submit"] {
  background: transparent;
  color: var(--brand-gold);
  border: 1px solid var(--brand-gold-deep);
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

button:hover, button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: rgba(0,0,0,0.08);
}

.small-note {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ===============================
   Banners / Images
   =============================== */
.banner {
  margin: 1rem auto 2rem;
  max-width: 980px;
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--brand-gold-deep);
  border-radius: 6px;
}

/* ===============================
   Code / Pre
   =============================== */
pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
}

pre {
  background: rgba(0,0,0,0.08);
  border: 1px solid var(--brand-gold-deep);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
}

/* ===============================
   Tables
   =============================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--brand-gold-deep);
}

th {
  font-weight: normal;
}

/* ===============================
   Page-specific tweaks
   =============================== */
.hero {
  text-align: center;
  margin: 1rem 0 2rem;
}

.hero p {
  font-size: 1.1rem;
  margin: 0.75rem auto 0;
  max-width: 72ch;
}

/* ===============================
   Misc
   =============================== */
blockquote {
  margin: 0 0 1rem;
  padding: 0 1rem;
  border-left: 3px solid var(--brand-gold-deep);
}

kbd {
  border: 1px solid var(--brand-gold-deep);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
}

/* Skip-link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--brand-gold-deep);
  border-radius: 4px;
  padding: .5rem .75rem;
}

/* Prevent background scroll when drawer is open */
.body-lock { overflow: hidden; }

/* Optional: active state inside drawer if JS adds .active */
.nav-drawer a.active { font-weight: bold; }

/* ===============================
   Embedded mode (in-app)
   =============================== */
:root.embedded-mode #mainnav,
:root.embedded-mode .mainnav-inline,
:root.embedded-mode .hamburger,
:root.embedded-mode .nav-drawer {
  display: none !important;
}

/* ===============================
   Responsive
   =============================== */
/* No responsive switch needed; drawer is universal */

/* ===== Drawer slides IN from the RIGHT + fades backdrop ===== */

/* Panel starts off-canvas to the right */
.nav-drawer__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
  transition: transform .28s ease-out;
  will-change: transform;
}

/* When visible, slide into place */
.nav-drawer[aria-hidden="false"] .nav-drawer__panel {
  transform: translateX(0);
}

/* Backdrop fades instead of popping */
.nav-drawer__backdrop {
  background: #000;   /* solid ensures predictable fade */
  opacity: 0;
  transition: opacity .28s ease-out;
  will-change: opacity;
}
.nav-drawer[aria-hidden="false"] .nav-drawer__backdrop {
  opacity: .45;
}


/* =========================================================
   Drawer & Hamburger Support (non-theming, safe-by-default)
   Preserves existing fonts and brand palette variables.
   ========================================================= */
:root{
  /* do not set brand tokens here; rely on existing definitions */
}

/* Ensure body background uses brand variable if already defined */
body{
  background: var(--brand-background, inherit);
}

/* Hamburger button (kept minimal; uses existing colours) */
.hamburger{
  position: fixed;
  top: 0.6rem;
  right: 0.8rem;
  z-index: 1102;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--brand-gold-deep, currentColor);
  background: transparent;
  color: var(--brand-gold, inherit);
  border-radius: 6px;
}
.hamburger:focus{ outline: 2px solid currentColor; outline-offset: 2px; }

/* Optional inner bars if the button uses <span> bars */
.hamburger span{ display:block; width:22px; height:2px; margin:2px 0; background: currentColor; }

/* Drawer container (closed by default) */
.nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}
.nav-drawer[hidden]{ display: none; }

/* Backdrop (dims only the page behind) */
.nav-drawer__backdrop{
  position: fixed; inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1000;
}

/* Drawer panel (slides from right; remains fully opaque) */
.nav-drawer__panel{
  position: fixed; top: 0; right: 0;
  height: 100%; width: min(92vw, 420px);
  background: var(--brand-background, #001925);
  overflow: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1001;
  will-change: transform;
  box-shadow: -12px 0 32px rgba(0,0,0,.35);
}

/* Open state */
.nav-drawer[aria-hidden="false"]{
  pointer-events: auto;
  visibility: visible;
}
.nav-drawer[aria-hidden="false"] .nav-drawer__backdrop{
  opacity: .5;
  pointer-events: auto;
}
.nav-drawer[aria-hidden="false"] .nav-drawer__panel{
  transform: translateX(0);
}

/* Prevent background scroll when drawer open */
.body-lock{ overflow: hidden; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-drawer__backdrop, .nav-drawer__panel{ transition: none; }
}

/* Ensure content has breathing room on all devices */
.main-content, 
.page-content {
  padding-left: 1rem;   /* ~16px, safe on mobile */
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 75ch;      /* keeps readable line length */
}

/* Add top margin so text doesn't overlap hamburger */
.main-content h1:first-of-type,
.page-content h1:first-of-type {
  margin-top: 4rem;  /* adjust if your hamburger is taller */
}

/* For larger screens, add a bit more horizontal padding */
@media (min-width: 768px) {
  .main-content, 
  .page-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}