/* NESARAQ / AODM -- styling matched to the existing Inspiro-themed site:
   Montserrat, #0bb4aa teal accent, #444 body text, full-bleed hero. */

:root {
  --accent: #0bb4aa;
  --accent-dark: #089a91;
  --text: #444;
  --heading: #111;
  --muted: #6d6d6d;
  --line: #e6e6e6;
  --bg-alt: #f7f8f8;
  --dark: #1a1d1e;
  --wrap: 1140px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: inherit;
  color: var(--heading);
  line-height: 1.25;
  margin: 0 0 .6em;
}
h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.875rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

p { margin: 0 0 1.15rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.solid,
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 1px 12px rgba(0,0,0,.09);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }

.brand {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; text-decoration: none;
}
.site-header.solid .brand,
.site-header.scrolled .brand { color: var(--heading); }
.brand:hover { text-decoration: none; }

.site-nav { display: flex; gap: 1.75rem; align-items: center; }
.site-nav a {
  color: rgba(255,255,255,.92);
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent;
}
.site-header.solid .site-nav a,
.site-header.scrolled .site-nav a { color: #555; }
.site-nav a:hover,
.site-nav a.current { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 26px; padding: 0;
}
.nav-toggle span {
  display: block; height: 2px; margin: 6px 0; background: #fff; transition: background .25s;
}
.site-header.solid .nav-toggle span,
.site-header.scrolled .nav-toggle span { background: #333; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  /* Drop your hero photo at assets/img/hero.jpg. The gradient below shows
     through if the image is missing, so the page never looks broken. */
  background: linear-gradient(160deg, #123b45 0%, #0d5a63 55%, #0bb4aa 140%) center/cover no-repeat;
}
/*
  The image URL is supplied inline by layout.php as --hero-image, carrying a
  cache-busting stamp from the file's modification time. A hardcoded url()
  here could not be versioned, so browsers kept showing the previous photo
  for the full cache lifetime after a swap. The fallback keeps the hero
  working if the property is ever missing.
*/
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-image, url("../img/hero.jpg")) center/cover no-repeat;
}
/*
  Two-layer scrim. The flat base protects the headline; the top gradient
  darkens the strip under the transparent header so the white wordmark and
  nav stay legible. Measured against the hero photo, this keeps every zone
  (logo, nav, headline) above the 4.5:1 WCAG AA body-text ratio while using
  a *lighter* base than a single flat overlay would need — so more of the
  photograph survives. Re-check these numbers if you change the image.
*/
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%),
    rgba(0,0,0,.34);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; max-width: 900px; }
.hero-title {
  color: #fff; font-size: clamp(2.4rem, 6vw, 3.9rem); font-weight: 400;
  letter-spacing: .05em; margin-bottom: .35em;
}
.hero-sub {
  /* Full white, not 94% -- and weight 400 rather than 300. Hairline type
     reads as lower contrast than its measured ratio suggests, which was
     part of why the old hero felt hard to read. */
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 400; line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hero-scroll {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); z-index: 2;
  animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll:hover { color: #fff; }
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
  html { scroll-behavior: auto; }
}
/* On short viewports (landscape phones, small windows) the 100vh hero has
   no room for both the copy and the chevron, and they overlap. Drop the
   chevron rather than let it sit on top of the subheading. */
@media (max-height: 560px) {
  .hero-scroll { display: none; }
  .hero { min-height: 420px; }
}

/* ---------- Interior page head ---------- */

.page-head {
  padding: calc(var(--header-h) + 64px) 0 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.page-head h1 {
  font-size: 1.6rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  margin: 0;
}
.page-head-sub { margin: .8rem 0 0; color: var(--muted); max-width: 760px; }

/* ---------- Sections ---------- */

section.band { padding: 76px 0; }
section.band.alt { background: var(--bg-alt); }
section.band.tight { padding: 52px 0; }

.lead { font-size: 1.15rem; line-height: 1.8; color: #3b3b3b; }

.section-title { margin-bottom: 1.6rem; }
.section-title.center { text-align: center; }

/* ---------- Cards ---------- */

.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 28px 26px;
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700;
  margin-bottom: .9rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; padding: 13px 30px; border-radius: 3px;
  background: var(--accent); color: #fff !important;
  font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; border: 2px solid var(--accent); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent) !important; }
.btn.ghost:hover { background: var(--accent); color: #fff !important; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }

/* ---------- Code ---------- */

pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
code { font-size: .9em; background: #f2f4f4; padding: .15em .4em; border-radius: 3px; color: #0d6a64; }
pre {
  background: #1e2426; color: #e6edef; padding: 20px 22px; border-radius: 5px;
  overflow-x: auto; font-size: .855rem; line-height: 1.65; margin: 0 0 1.3rem;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin-bottom: 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--heading); background: var(--bg-alt); white-space: nowrap; }

/* ---------- Lists ---------- */

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 1rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

/* ---------- Callout ---------- */

.callout {
  border-left: 4px solid var(--accent);
  background: var(--bg-alt);
  padding: 20px 24px; border-radius: 0 5px 5px 0; margin: 0 0 1.5rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Validator ---------- */

.val-grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .val-grid { grid-template-columns: 1fr; } }

#aodmInput {
  width: 100%; min-height: 430px; padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.6;
  border: 1px solid #cfd4d4; border-radius: 5px; resize: vertical;
  background: #fdfdfd; color: #24292e;
}
#aodmInput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,180,170,.16); }

.result-panel {
  border: 1px solid var(--line); border-radius: 5px; padding: 22px 24px;
  min-height: 430px; background: #fff;
}
.verdict { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; }
.verdict .badge {
  display: inline-block; padding: 5px 13px; border-radius: 3px;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff;
}
.badge.ok    { background: #1f9d55; }
.badge.err   { background: #cf3838; }
.badge.warn  { background: #d18b1e; }
.badge.idle  { background: #9aa2a2; }

.issue { border-left: 3px solid var(--line); padding: 10px 0 10px 14px; margin-bottom: 12px; }
.issue.error   { border-left-color: #cf3838; }
.issue.warning { border-left-color: #d18b1e; }
.issue-rule {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  background: #eef1f1; color: #55605f; padding: 2px 7px; border-radius: 3px; margin-right: 8px;
}
.issue-msg { font-size: .92rem; color: #3a3a3a; }
.issue-where { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.hint { color: var(--muted); font-size: .88rem; }

.example-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.example-tabs button {
  font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .05em;
  padding: 7px 13px; border: 1px solid #cfd4d4; background: #fff; color: #555;
  border-radius: 3px; cursor: pointer;
}
.example-tabs button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer { background: var(--dark); color: #b9c0c0; padding: 60px 0 26px; margin-top: 0; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 2fr 1fr 1fr; }
.footer-brand { font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; color: #fff; margin-bottom: .7rem; }
.footer-tag { font-size: .9rem; line-height: 1.7; margin: 0; color: #98a1a1; }
.site-footer h4 { color: #fff; margin-bottom: .8rem; font-size: .78rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: #b9c0c0; font-size: .9rem; }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.footer-base {
  border-top: 1px solid rgba(255,255,255,.11); margin-top: 42px; padding-top: 22px;
  font-size: .82rem; color: #7d8686;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0; box-shadow: 0 10px 22px rgba(0,0,0,.12);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    color: #444 !important; padding: 13px 24px; border-bottom: 1px solid var(--line);
  }
  .site-nav a.current { border-bottom-color: var(--accent); }
  .footer-grid { grid-template-columns: 1fr; }
  section.band { padding: 56px 0; }
}