/* =========================================================
   Safe-Roads London — Minimal Monochrome UI
   Palette: white / gray / black only
   ========================================================= */

/* ---- Root scale & tokens ---- */
:root{
  /* Grayscale ramp */
  --mono-0:#ffffff;
  --mono-25:#f7f7f8;
  --mono-100:#eceef1;
  --mono-200:#e6e8ec;  /* lines */
  --mono-600:#424854;  /* muted text */
  --mono-700:#2a2f36;  /* body link */
  --mono-900:#111111;  /* primary ink */

  /* Semantic tokens */
  --bg: var(--mono-0);
  --text: var(--mono-900);
  --muted: var(--mono-600);
  --line: var(--mono-200);
  --ink: var(--mono-900);
  --ink-2: var(--mono-700);
  --ink-3: var(--mono-600);

  --shadow: 0 6px 24px rgba(0,0,0,.06);

  /* Background image fade (0=no fade, 1=white) */
  --bg-image-fade: .75;

  /* Anchor scroll offset (sticky header) */
  --anchor-offset: 84px;
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: transparent; /* allow the bg layer to show */
  overflow-x: hidden;
}

/* Strong, accessible focus without color */
:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
  border-radius:6px;
}

/* Add top margin for anchored sections to clear sticky header */
#map, #highlights, #contact { scroll-margin-top: var(--anchor-offset); }

/* ---- Background layer: skyline image ON TOP, white plate BEHIND ---- */
.bg-london{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;

  /* Layer order: 1) fade, 2) image; color is behind both */
  background-image:
    linear-gradient(rgb(255 255 255 / var(--bg-image-fade)), rgb(255 255 255 / var(--bg-image-fade))),
    url('../img/london-bg.svg');
  background-position:
    center 110%,
    center 110%;
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    cover,
    clamp(1400px, 120vw, 2400px) auto;

  /* white plate fills any gaps */
  background-color: var(--bg);

  /* make imagery monochrome */
  filter: grayscale(100%) contrast(1.05);
}

/* Bring content above background */
.site-header, .container, .site-footer { position: relative; z-index: 1; }

/* ---- Header ---- */
.site-header{
  position: sticky; top:0; z-index: 2;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.05) blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; }
.brand__logo{ width:24px; height:24px; filter: grayscale(100%); opacity:.95; }
.brand__name{ font-weight:700; letter-spacing:.2px; }
.site-nav a{ color:var(--ink-3); text-decoration:none; margin-left:1rem; }
.site-nav a:hover{ color:var(--ink); text-decoration:underline; }

/* ---- Titles ---- */
.page-title{
  margin: 18px 0 0;
  font-size: 20px;
  text-align: center;
  color: var(--ink);
}
.section-title{
  margin: 8px 0 12px;
  font-size: 18px;
  text-align: center;
  color: var(--ink);
}

/* ---- Layout ---- */
.container{ max-width:1100px; margin:0 auto; padding:24px 16px 48px; }

/* ---- Map wrapper ---- */
.map-wrap{
  display:grid; place-items:center;
  height: min(80vh, 800px);
  margin: 16px 0 70px;
  background:var(--mono-0);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.map-frame{ width:100%; height:100%; border:0; background:#fafafa; }
/* .map-frame{ filter: grayscale(100%) contrast(1.05); } */

/* ---- Highlights (center-aligned) ---- */
.highlights { text-align:center; }
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  justify-items: center;
}
.card{
  background:var(--mono-0); padding:14px; border-radius:12px;
  border:1px solid var(--line); box-shadow: var(--shadow);
  width:100%; max-width:360px;
  text-align:left;
}
.card h3{ margin:.2rem 0 .3rem; font-size:16px; color:var(--ink);}
.card p{ margin:0; color:var(--muted); }
.inline-link{ color:var(--ink-2); text-decoration:underline; }
.inline-link:hover{ color:var(--ink); }

/* ---- SR-only ---- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---- Footer (extended) ---- */
.site-footer{
  padding:60px 20px;
  background:rgba(226, 226, 226, 0.9);
  backdrop-filter:saturate(1.05) blur(6px);
  border-top:1px solid var(--line);
}
.footer-title{ margin:0.2rem 0 1.8rem; font-weight:600; color:var(--ink); text-align:center; }
.footer-links{
  list-style:none; padding:0; margin:0 0 10px;
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
}
.site-footer a{ color:var(--ink-2); text-decoration:none; }
.site-footer a:hover{ color:var(--ink); text-decoration:underline; }
.footer-nav{
  display:flex; gap:1rem; justify-content:center; margin:.2rem 0 .6rem;
}
.footer-nav a{ color:var(--ink-3); text-decoration:none; }
.footer-nav a:hover{ color:var(--ink); text-decoration:underline; }
.footer-copy{ margin:.6rem 0 0; color:var(--muted); text-align:center; }

/* ---- Responsive fine-tuning for skyline position/size ---- */
@media (max-width: 640px){
  .bg-london{
    background-position:
      center 80%,
      center 80%;
    background-size:
      cover,
      clamp(1000px, 150vw, 1800px) auto;
    --bg-image-fade: .85;
  }
}

@media (min-width: 1600px){
  .bg-london{
    background-position:
      center 20%,
      center 22%;
    background-size:
      cover,
      2000px auto;
    --bg-image-fade: .85;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  /* No sidebar transitions remain */
}

/* ===========================
   Mobile header / hamburger
   =========================== */

/* Base button (hidden on desktop) */
.nav-toggle{
  display:none;
  position: relative;
  z-index: 1004;
  width: 42px;
  height: 38px;
  margin-left: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.nav-open .nav-toggle{ color: #111; }

.nav-toggle span{
  position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
  display: block;
}
.nav-toggle span:nth-child(1){ top: 11px; }
.nav-toggle span:nth-child(2){ top: 18px; }
.nav-toggle span:nth-child(3){ bottom: 11px; }

/* When menu is open, morph into 'X' */
body.nav-open .nav-toggle span:nth-child(1){ top: 18px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3){ bottom: auto; top: 18px; transform: rotate(-45deg); }

/* Mobile-only layout */
@media (max-width: 720px){
  /* Show hamburger on phones; keep header compact */
  .nav-toggle{ display:inline-block; }

  /* Stack brand + toggle on the left; hide desktop nav initially */
  .site-header{
    justify-content: space-between;
  }

  .site-nav{
    position: fixed;
    top: calc(56px);            /* below sticky header (12px padding + ~32px content) */
    right: 12px;
    left: 12px;
    z-index: 10;
    display: grid;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* Links in mobile menu: bigger tap targets, still minimalist */
  .site-nav a{
    margin: 0;                  /* override desktop left margin */
    padding: 10px 10px;
    border-radius: 8px;
    color: var(--ink-3);
    text-decoration: none;
    border: 1px solid transparent;
  }
  .site-nav a:hover{ color: var(--ink); border-color: var(--line); }

  /* Open state */
  body.nav-open .site-nav{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Subtle page scrim when menu open (keeps it minimalist) */
  body.nav-open::before{
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.06);
    z-index: 9;
  }
}

/* Desktop keeps your existing layout */
@media (min-width: 721px){
  .site-nav a{ margin-left: 1rem; }
}

/* Centered footer heading */
.footer-kicker{
  margin: 0 0 6px;
  text-align: center;
  font-size: 0.95rem;   /* adjust if you prefer smaller/larger */
  font-weight: 600;
}

@media (max-width: 720px){
  /* keep header tappable when menu is open */
  body.nav-open .site-header{
    z-index: 1002;
    position: sticky; top: 0; /* preserve your sticky header */
  }

  /* menu sits above scrim */
  .site-nav{ z-index: 1003; }

  /* scrim stays below header/menu so it won't block clicks */
  body.nav-open::before{ z-index: 1000; }

  /* ensure hamburger lines are visible and above */
  .nav-toggle{ z-index: 1004; color:#111; }
  .nav-toggle span{ background: currentColor; display:block; height:2px; }
}