/* =========================================================
   Ochils Mountain Rescue — Design tokens
   Change these variables to re-skin the whole site.
   ========================================================= */
:root {
  --color-ink: #252524;          /* charcoal — header/nav/stats-band/buttons */
  --color-accent: #ac2424;       /* rescue red — emergency / donate */
  --color-accent-dark: #8a1c1c;
  --color-footer-blue: #0f5e97;  /* footer band */
  --color-grey-light: #e7e7e7;   /* feature-card & "stay updated" backgrounds */
  --color-grey-medium: #989898;  /* stat labels, donate-embed border */
  --color-blush: #f6e7e7;        /* donate section background */
  --color-light: #f7f6f1;        /* warm off-white background (sponsors fallback) */
  --color-white: #ffffff;
  --color-text: #000000;
  --color-text-muted: #5a5a58;
  --color-border: #e3e1d8;

  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(16, 36, 28, 0.12);
  --container: 1180px;
}

/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The real site's root font-size is fluid (not a fixed 16px), so every
     rem-based measurement here — like the hero's height below — scales the
     same way theirs does across viewport sizes, rather than needing a
     hand-tuned vw-based formula per element. */
  font-size: clamp(1rem, 1dvmin + 0.5rem, 1.125rem);
}
html, body {
  /* Guards against a fixed-width embed (e.g. the donate widget iframe)
     forcing horizontal scroll/zoom on narrow mobile Safari viewports.
     overflow-x:clip (not hidden) is deliberate: unlike hidden, clip does
     not force the other axis (overflow-y) to compute to auto, so html/body
     never become a scroll container — which is what was breaking the
     sticky header's position:sticky further down this file. */
  max-width: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
/* Matches the real site's global heading treatment (verified via its
   computed styles): every heading level is bold, uppercase and
   letter-spaced, not just a plain bumped-up font-weight. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.3;
  margin: 0 0 0.5em;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3, h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 0;
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--color-accent); color: var(--color-white); }
.btn-accent:hover { background: var(--color-accent-dark); box-shadow: 0 8px 20px rgba(172,36,36,0.35); }
.btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: var(--color-white); color: var(--color-ink); }
.btn-primary { background: var(--color-ink); color: var(--color-white); }
.btn-primary:hover { background: #3a3a38; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  display: block;
  margin-bottom: 10px;
}
.section { padding: 90px 0; }
.section--tight { padding: 60px 0; }
.section-head { max-width: 680px; margin: 0 auto 50px; text-align: center; }
/* Real site's section headings ("Stay Updated", "Proudly sponsored by") are
   a plain 1.5rem (the base h2 size) — no oversized clamp(). */
.section-head p { color: var(--color-text-muted); font-size: 1.05rem; }

/* =========================================================
   Skip link / accessibility
   ========================================================= */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--color-ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================
   Header — black bar, split nav, centred circular logo badge
   ========================================================= */
:root {
  --color-header-bg: var(--color-ink);
}
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--color-header-bg);
  border-bottom: none;
}
.header-inner {
  display: grid;
  /* Fixed middle track reserves space for the logo badge even though it's
     positioned absolutely (so it can overflow down into the hero photo) —
     otherwise the middle column collapses to 0 and the left/right nav
     groups collide in the centre. */
  grid-template-columns: 1fr 148px 1fr;
  align-items: center;
  position: relative;
  padding: 0 28px;
  max-width: var(--container);
  margin: 0 auto;
  height: 88px;
}

/* Explicit grid columns: since .site-branding is position:absolute (out of
   flow, so it can overflow the header downward), it doesn't consume an
   auto-placement slot — without these, the browser slides the right nav
   into the middle track and the menu button into the right track. */
.primary-nav--left { grid-column: 1; }
.primary-nav--right { grid-column: 3; }
.menu-toggle { grid-column: 3; }

/* Both groups hug their OUTER edge (true left / true right of the header),
   leaving a natural, roughly symmetric gap in toward the centred logo —
   rather than one group hugging the logo and the other hugging the edge. */
.primary-nav--left ul { justify-content: flex-start; }
.primary-nav--right ul { justify-content: flex-end; }
.primary-nav ul { display: flex; align-items: center; gap: 34px; }
.primary-nav a {
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; padding: 6px 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.primary-nav a:hover { color: #ffd166; }
.primary-nav--right ul li:last-child a {
  border: 1.5px solid #fff; padding: 10px 22px; border-radius: 3px;
  transition: background 0.15s ease, color 0.15s ease;
}
.primary-nav--right ul li:last-child a:hover {
  background: #fff; color: var(--color-header-bg);
}

.site-branding {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, -62%);
  z-index: 20;
}
.site-logo-badge { display: block; }
.site-branding img,
.site-branding .custom-logo {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.menu-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 6px;
  justify-self: end;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px;
}

.primary-nav-mobile { display: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  /* Matches the real site's own rule exactly (min-height: 28rem) — since
     the root font-size above is fluid, this scales the same way theirs
     does, rather than being pegged to viewport width on its own. */
  min-height: 28rem;
  /* The real site shows this photo at 50% opacity over a dark backdrop
     (rather than at full strength) — a translucent dark layer stacked as
     a second background achieves the same toned-down look, and lets the
     contour lines (painted after, in a later element) read more clearly
     against it. */
  background: linear-gradient(rgba(37, 37, 36, 0.5), rgba(37, 37, 36, 0.5)), var(--hero-image, linear-gradient(135deg, #3a3a38, var(--color-ink)));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-contours {
  /* Sits in the top-left corner (matching the original site) rather than
     stretched to fill the hero. The real site relies on the dimmed photo
     behind it (see .hero's background above) to make the lines read
     clearly, rather than heavily filtering the lines themselves — a light
     boost here on top of that dimmed backdrop, not a substitute for it. */
  position: absolute;
  top: 10px;
  left: 10px;
  width: 560px;
  height: auto;
  max-width: none;
  opacity: 1;
  filter: brightness(1.15) contrast(1.1);
  pointer-events: none;
}
.hero-wordmark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(72%, 720px); height: auto; pointer-events: none;
}

/* ---- Emergency callout + weather, sits below the hero photo ---- */
.hero-callout { background: var(--color-white); padding: 56px 0; }
.hero-callout-grid {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 36px;
}
.hero-callout-left { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 640px; }
.callout-box {
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  padding: 14px 26px;
  border-radius: 0;
}
.btn-outline-dark {
  background: transparent; border: 1.5px solid var(--color-text); color: var(--color-text);
  margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem;
}
.btn-outline-dark:hover { background: var(--color-text); color: #fff; }

/* Sized to match the real site's own weather widget, which runs
   noticeably bigger than a plain 92px icon + 3.4rem number. */
.weather-widget { display: flex; align-items: center; gap: 24px; }
.weather-icon { width: 196px; height: 120px; flex-shrink: 0; color: #cfd8dc; }
.weather-icon svg { width: 100%; height: 100%; }
.weather-readout { display: flex; flex-direction: column; line-height: 1.1; }
.weather-temp { font-family: var(--font-heading); font-weight: 900; font-size: 2.5rem; color: #43c2e3; }
.weather-temp .unit { font-size: 1.3rem; vertical-align: top; }
.weather-wind { font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; color: #43c2e3; }
.weather-wind .unit { font-weight: 600; font-size: 0.9rem; }

@media (max-width: 640px) {
  .hero-wordmark { width: 90%; }
  .hero-callout-grid { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Feature cards ("Our Team" / "What we do" / "Community")
   ========================================================= */
#about {
  background: var(--color-grey-light);
  /* Overrides the generic .section padding — vertical spacing lives on
     .about-wrapper instead (see below), so its background-image lines up
     flush with this section's true edge. */
  padding: 0;
}
.about-wrapper {
  max-width: 1400px;
  /* Padding lives on the wrapper (not the section) so that the
     background image — anchored to "bottom" of this box — lines up
     flush with the section's actual bottom edge, meeting the stats
     band's image (also anchored to its wrapper, "top") with zero gap
     to form one continuous vehicle line-drawing across the seam. */
  padding: 56px 0;
  position: relative;
  background-image: var(--car-dark-image, none);
  background-repeat: no-repeat;
  background-position: 33px bottom;
}
.cards-grid {
  display: flex;
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  background: transparent;
  padding: 0;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.card-text { margin-bottom: 3rem; color: var(--color-text); }
/* Card titles use the base h3 size (1.2rem) — matches the real site's
   shared heading treatment, so no override needed here any more. */
.card p { color: var(--color-text); }
.btn-card {
  display: block;
  width: fit-content;
  margin: 0 auto;
  min-width: 14rem;
  padding: 1.1rem 2rem;
  border: 2px solid var(--color-ink);
  border-radius: 15px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-card:hover { background: #fff; color: var(--color-ink); }
@media (max-width: 960px) {
  .about-wrapper { background-position: -200px bottom; }
}
@media (max-width: 640px) {
  .about-wrapper { background-position: -300px bottom; }
  .cards-grid { flex-direction: column; gap: 3.5rem; }
}

/* =========================================================
   Stats band
   ========================================================= */
.stats-band {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.stats-wrapper {
  max-width: 1400px;
  padding: 80px 0;
  background-image: var(--car-light-image, none);
  background-repeat: no-repeat;
  background-position: 20px top;
}
.stats-band h2 { color: #fff; margin-bottom: 4.5rem; }
.stats-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 33.33%;
  padding: 0 2rem;
}
.stat-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.3rem;
}
.stat-label { font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; color: var(--color-grey-medium); margin-top: 1.5rem; }
@media (max-width: 960px) {
  .stats-wrapper { background-position: -213px top; }
}
@media (max-width: 640px) {
  .stats-wrapper { background-position: -313px top; }
  .stat { min-width: 100%; }
}

/* =========================================================
   Donate + Contact — one section, two columns side by side,
   with a divider between them (matches the original layout).
   ========================================================= */
.donate-contact-section {
  position: relative;
  background: var(--color-blush);
  padding: 80px 0;
}
.dc-wrapper {
  max-width: 1400px;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.dc-col {
  flex: 1 1 0;
  /* Without an explicit width/min-width, a wide embed (like the donate
     iframe) can stretch this column — and, on mobile where the columns
     stack in a column flex container, the whole page — wider than the
     viewport instead of scrolling inside .donate-embed as intended. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--color-text);
}
.dc-col h2 { text-align: left; }
.dc-col p { color: var(--color-text); }
.text-accent { color: var(--color-accent); }

/* Vertical divider line between the two columns (desktop only) */
.donate-contact-section::before {
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  top: 2.5rem;
  bottom: 2.5rem;
  width: 4px;
  background: var(--color-white);
}

.donate-embed {
  margin-top: 1.5rem;
  /* The CAF widget can render wider than its container on iOS Safari;
     scope any overflow to this box (with momentum scrolling) instead of
     letting it push the whole page's viewport wider than the screen.
     Normally invisible — it only ever engages if the iframe is forced
     wider than its column, so it doesn't add a visible scrollbar of its
     own on top of the one the CAF widget itself may show. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.donate-embed iframe {
  display: block;
  width: 100%;
  min-width: 280px;
  /* Fixed height (matching the real site) rather than a shorter
     min-height — tall enough that the CAF widget's own content fits
     without needing its own internal scrollbar. */
  height: 605px;
  border: 2px solid var(--color-grey-medium);
}

.contact-form-wrap { margin-top: 1.5rem; }
.contact-form-wrap .form-row {
  display: flex;
  gap: 0.8rem;
}
.contact-form-wrap input,
.contact-form-wrap textarea,
.contact-form-wrap select {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: 0;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
}
.contact-form-wrap textarea { min-height: 5rem; }
/* If your form plugin's template prints a field name as its own label
   line above the box (rather than as the field's placeholder), this
   hides that line visually while keeping it for screen readers — so the
   field name reads inside the white box instead, matching the design.
   Skip this by giving your form's labels a different class than "label"
   if you'd rather they stay visible. */
.contact-form-wrap label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.contact-form-wrap .wpcf7-submit,
.contact-form-wrap button[type="submit"] {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  min-width: 14rem;
  padding: 1.1rem 2rem;
  border: 2px solid var(--color-ink);
  border-radius: 15px;
  background: var(--color-ink);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.contact-form-wrap .wpcf7-submit:hover,
.contact-form-wrap button[type="submit"]:hover {
  background: #fff;
  color: var(--color-ink);
}

@media (max-width: 960px) {
  .dc-wrapper { flex-direction: column; gap: 4rem; }
  .donate-contact-section::before { display: none; }
  .dc-donate {
    position: relative;
    padding-bottom: 4.4rem;
  }
  .dc-donate::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--color-white);
  }
}

/* =========================================================
   Newsletter / stay updated (Facebook feed)
   ========================================================= */
.newsletter-section { background: var(--color-grey-light); text-align: center; }
.facebook-feed-wrap { display: flex; justify-content: center; }
.newsletter-form {
  display: flex; gap: 12px; justify-content: center; max-width: 460px; margin: 0 auto; flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
  flex: 1; min-width: 220px; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--color-border);
}

/* =========================================================
   Sponsors strip
   ========================================================= */
.sponsors-section { padding: 60px 0; background: var(--color-white); }
.sponsors-section .section-head { margin-bottom: 34px; }
/* Real site colours this heading its footer blue, not a muted grey. */
.sponsors-section .section-head h2 { color: var(--color-footer-blue); }
.sponsors-grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 50px;
}
.sponsors-grid img { max-height: 56px; width: auto; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--color-footer-blue);
  color: rgba(255,255,255,0.85);
  padding: 50px 0 24px;
}
.footer-inner {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 30px; padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-address { font-size: 0.95rem; }
.footer-address strong { color: #fff; display: block; margin-bottom: 6px; font-family: var(--font-heading); }
.footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centred on the footer as a whole (matching the original site), rather
     than just placed next to the address text. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.footer-badges img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 640px) {
  /* Not enough room to overlay a centred badge without colliding with the
     address text, so it drops back into the normal flow, centred by
     margin instead. */
  .footer-inner { display: block; }
  .footer-badges { position: static; transform: none; margin: 24px auto 0; }
}
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px;
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: rgba(255,255,255,0.75); }
.footer-bottom a:hover { color: #fff; }

/* =========================================================
   Generic inner-page content (About/History/Links pages)
   ========================================================= */
/* Real site has no dark banner behind the inner-page title — just the
   heading sitting directly on the page's plain white background, left-
   aligned in the same measure as the body copy below it. */
.page-hero {
  background: var(--color-white);
  padding: 60px 0 10px;
  text-align: left;
}
.page-hero .container { max-width: 820px; }
.page-hero h1 { margin: 0; }
.page-content { padding: 20px 0 70px; }
.page-content .container { max-width: 820px; }
.page-content h2 { margin-top: 1.6em; }
.page-content img { border-radius: var(--radius); margin: 1.5em 0; }
/* Links typed into page content (e.g. the Useful Links page) — matches the
   real site's own link colour and underline exactly. */
.page-content a {
  color: var(--color-footer-blue);
  text-decoration: underline;
  font-weight: 400;
}
.page-content a:hover { color: var(--color-accent); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .cards-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 40px; }
  .donate-panel { grid-template-columns: 1fr; padding: 34px 26px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .header-inner { grid-template-columns: auto 1fr auto; height: 72px; padding: 0 16px; }
  .primary-nav--left, .primary-nav--right { display: none; }
  .site-branding { position: static; transform: none; grid-column: 2; justify-self: center; }
  .site-branding img, .site-branding .custom-logo { width: 56px; height: 56px; }
  .menu-toggle { display: block; }

  .primary-nav-mobile {
    display: none;
    background: var(--color-header-bg);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 10px 20px 20px;
  }
  .site-header.nav-open .primary-nav-mobile { display: block; }
  .primary-nav-mobile ul { display: flex; flex-direction: column; gap: 4px; }
  .primary-nav-mobile a {
    display: block; padding: 12px 0; width: 100%;
    font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  }
  .primary-nav-mobile ul li:last-child a {
    border: 1.5px solid #fff; border-radius: 3px; padding: 10px 18px; display: inline-block; margin-top: 6px;
  }
}