/* styles.v2.css — unified layout, gutters, footer wrap, emergency callout */

:root{
  --bg:#ffffff; --text:#111827; --muted:#4b5563;
  --accent:#2563eb; --surface:#f3f4f6; --border:#4b5563;
}

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

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;color:var(--text);background:var(--bg);
}

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

/* Skip link only visible when focused */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;margin:1rem;padding:.5rem;background:var(--surface);border:2px solid var(--accent);z-index:1000}

/* Layout */
.container{max-width:1000px;margin-inline:auto;padding-inline:clamp(32px,6.5vw,80px)}
.section{padding:60px 0}
.section h2{margin-top:0}

/* Header / Nav */
.site-header{border-bottom:2px solid var(--border);background:#fff}
.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-block:12px}
.brand{font-weight:700;font-size:1.2rem}
.nav-toggle{display:none}
.nav-menu{list-style:none;margin:0;padding:0;display:flex;gap:20px}
.nav-menu li a{padding:.25rem .5rem}
.nav-menu li a.active{font-weight:700;border-bottom:2px solid var(--accent)}
@media (max-width: 700px) {
  .nav-toggle {
    display: inline-block;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
  }

  .nav-toggle:hover,
  .nav-toggle:focus {
    background: var(--accent);
    color: var(--bg);
  }

  .nav-toggle:focus {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  .nav-menu[hidden] { display: none; }
  .nav-menu { flex-direction: column; width: 100%; margin-top: 1rem; }
}@media(max-width:700px){
  .nav-toggle{display:inline-block;border:1px solid var(--border);background:#fff;padding:6px 10px;border-radius:10px}
  .nav-menu[hidden]{display:none}
  .nav-menu{flex-direction:column;width:100%;margin-top:1rem}
}

/* Hero */
.hero{padding:60px 0;text-align:center;background:var(--surface)}
.hero h1{font-size:2rem;margin:0 0 1rem}
.hero p{font-size:1.1rem;color:var(--muted);margin:0 0 1.5rem}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{background:var(--accent);color:#fff;padding:.6rem 1.2rem;border-radius:6px;text-decoration:none}
.btn-secondary{background:#6b7280}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}}
.placeholder-img{background:#d1d5db;width:100%;min-height:200px}

/* Emergency callout (Contact) */
.alert-emergency{
  background:#fee2e2;
  border:1px solid #ef4444;
  border-left:4px solid #ef4444;
  color:#991b1b;
  padding:12px 16px;
  border-radius:12px;
  margin:8px 0 16px;
}

/* Footer */
.site-footer{border-top:2px solid var(--border);padding:16px 0;background:#fff}
.footer-row{
  display:flex;
  justify-content:flex-start;   /* was space-between; now sentences sit together */
  align-items:center;
  flex-wrap:wrap;               /* wrap naturally on narrow screens */
  gap:8px;                      /* tight spacing between sentences */
  font-size:14px;color:var(--muted)
}
.footer-row p{margin:0}
@media(min-width:820px){.footer-row{gap:12px}}

/* Typography */
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}

/* === Dark theme support ================================================ */
/* Base: use variables so colors flip without changing markup */
:root {
  color-scheme: light;
}

/* Respect system preference by default (before user toggle runs) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0f14;
    --text: #e6e9ee;
    --muted: #a8b0bd;
    --accent: #8ab4ff;
    --surface: #121821;
    --border: #3a475a;
    color-scheme: dark;
  }
}

/* User-selected theme via html[data-theme="dark"] overrides everything */
html[data-theme="dark"] {
  --bg: #0b0f14;
  --text: #e6e9ee;
  --muted: #a8b0bd;
  --accent: #8ab4ff;
  --surface: #121821;
  --border: #3a475a;
  color-scheme: dark;
}

/* Optional: ensure elements that used fixed light backgrounds adapt */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer {
  background: var(--bg);
  border-color: var(--border);
}

html[data-theme="dark"] .hero {
  background: var(--surface);
}

html[data-theme="dark"] .btn { color: #0b0f14; } /* keep text readable if you later invert buttons */

/* Emergency alert: keep strong contrast in dark mode */
html[data-theme="dark"] .alert-emergency{
  background:#2a0e11;
  border-color:#ff6b6b;
  border-left-color:#ff6b6b;
  color:#ffd6d6;
}

/* === Contact page dark-mode refinements ================================ */
/* Use variables for card surfaces and borders so they adapt */
:root {
  --card-surface: #ffffff;
  --card-border: #e5e7eb;     /* light slate */
  --feature-surface: #f7f9ff; /* pale indigo */
  --feature-border: #b9c6ff;  /* indigo outline */
}

/* Tie existing elements to the variables (light defaults already match) */
.feature { background: var(--feature-surface); border-color: var(--feature-border); }
.contact-block { background: var(--card-surface); border-color: var(--card-border); }

/* Dark theme overrides */
html[data-theme="dark"] {
  --card-surface: #121821;     /* same as --surface for cohesion */
  --card-border: #3a475a;
  --feature-surface: #18202b;  /* slightly lighter than card for contrast */
  --feature-border: #475872;
  --accent: #9ec0ff;           /* small boost for links/buttons in dark */
}

/* Ensure headings and body text remain readable inside cards/features */
html[data-theme="dark"] .feature h3,
html[data-theme="dark"] .contact-block h3 { color: var(--text); }
html[data-theme="dark"] .feature p,
html[data-theme="dark"] .contact-block p { color: var(--muted); }

/* Buttons remain high-contrast in dark mode */
html[data-theme="dark"] .btn { background: var(--accent); color: #0b0f14; }
html[data-theme="dark"] .btn-secondary { background: #2a3342; color: var(--text); }

/* Optional: lighten the nav underline and footer border in dark */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer { border-color: var(--border); }

/* === Contact page dark-mode: stronger readability and consistent tones === */
/* 1) Make feature tiles and contact cards use consistent dark surfaces */
html[data-theme="dark"] {
  --feature-surface: #141a23;  /* darker than before for consistency */
  --feature-border:  #3e4c61;  /* soft slate-blue border */
  --card-surface:    #0f141b;  /* slightly darker than feature tiles */
  --card-border:     #334155;  /* slate border */
  --muted:           #c7d0dc;  /* raise muted text brightness for readability */
}

/* 2) Apply surfaces, borders, and text colors explicitly */
html[data-theme="dark"] .feature {
  background: var(--feature-surface);
  border: 1.5px solid var(--feature-border);
}
html[data-theme="dark"] .contact-block {
  background: var(--card-surface);
  border: 1.5px solid var(--card-border);
}

/* 3) Ensure headings and body text are readable inside tiles/cards */
html[data-theme="dark"] .feature h3,
html[data-theme="dark"] .contact-block h3 {
  color: var(--text);
}
html[data-theme="dark"] .feature p,
html[data-theme="dark"] .contact-block p,
html[data-theme="dark"] .contact-block a {
  color: var(--muted);
}

/* 4) Buttons: strong contrast on dark surfaces */
html[data-theme="dark"] .btn {
  background: var(--accent);
  color: #0b0f14;           /* dark text on bright accent for clarity */
  border: 2px solid var(--accent);
}
html[data-theme="dark"] .btn-secondary {
  background: #263041;      /* muted slate button */
  color: var(--text);
  border: 2px solid #3a475a;
}

/* 5) Optional: soften the outer glow by removing any white backgrounds that may linger */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer {
  background: var(--bg);
  border-color: var(--border);
}

/* === Mobile refinements (global) ======================================= */
/* Container/gutters: keep comfortable padding on small screens */
@media (max-width: 420px) {
  .container { padding-inline: 20px; }
}

/* Nav: allow wrapping without crowding; tighter gaps on small screens */
@media (max-width: 640px) {
  .nav { gap: 10px; }
  .nav-menu { gap: 10px; }
  .nav-menu li a { padding: 8px 10px; }
}

/* Hero: reduce top/bottom padding, keep readable headings */
@media (max-width: 640px) {
  .hero { padding: 40px 0; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 1rem; }
  .cta-row { gap: 10px; }
}

/* Sections: slightly tighter vertical rhythm on phones */
@media (max-width: 640px) {
  .section { padding: 36px 0; }
}

/* Grid utilities: single column and tighter gaps on mobile */
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; gap: 14px; }
}

/* Contact page tiles/cards: compact yet readable on phones */
@media (max-width: 640px) {
  .feature { padding: 0.6rem 0.8rem; }
  .feature h3 { font-size: 1rem; }
  .contact-block { padding: 0.8rem; }
}

/* Buttons: ensure comfortable tap targets and wrapping */
@media (max-width: 420px) {
  .btn, .btn-secondary { width: 100%; text-align: center; }
}

/* Theme toggle: compact on small screens */
@media (max-width: 640px) {
  .theme-toggle { padding: .3rem .5rem; }
  .theme-toggle .label { display: none; } /* icon-only on mobile */
}

/* === Neutral slate button (matches Neuvoa style) ======================= */
.btn-slate {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: 6px;
  border: 2px solid #3a475a;
  background: #2a3342;
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
}
.btn-slate:hover,
.btn-slate:focus {
  filter: brightness(1.08);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Dark mode keeps same slate look; no change needed, but ensure borders adapt */
html[data-theme="dark"] .btn-slate {
  border-color: #3a475a;
  background: #2a3342;
  color: #ffffff;
}