/* ==========================================================================
   Motherhood — Brand foundation
   Colours from Brand Guide tab (06 Visual Identity). Do not hardcode hex —
   use these tokens everywhere. Page-specific styles live further below and
   in per-page partials appended by the page-building agents.
   ========================================================================== */

:root {
  /* Primary */
  --deep-plum:  #5C3D4E;  /* headlines, brand name */
  --dusty-rose: #C97D8A;  /* accents, CTAs, dividers */
  --blush:      #F9F1F3;  /* backgrounds, cards */

  /* Secondary */
  --deep-rose:  #B06070;  /* hover, emphasis */
  --warm-cream: #FDF8F5;  /* page background */
  --charcoal:   #2C2C2C;  /* body text */
  --mid-grey:   #666666;  /* subtext, captions */

  /* Roles */
  --bg:          var(--warm-cream);
  --card-bg:     var(--blush);
  --heading:     var(--deep-plum);
  --body:        var(--charcoal);
  --muted:       var(--mid-grey);
  --accent:      var(--dusty-rose);
  --accent-hover:var(--deep-rose);

  /* Typography — reference (framer ClearPath) uses elegant "Large Type" serif
     display headings + a clean sans for UI/body. */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; /* hero h1, section h2 */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;    /* nav, buttons, small titles */
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(92, 61, 78, 0.08);
  --shadow-lg: 0 20px 50px rgba(92, 61, 78, 0.12);
  --transition: 0.25s ease;
  --header-h: 76px;
}

/* Reset / base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
/* Large display headings use the elegant serif (matches ClearPath "Large Type"). */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
/* Any author rule that sets `display` (e.g. .btn { display: inline-flex }) beats
   the UA's `[hidden] { display: none }`, which silently breaks every element we
   hide via the attribute. Keep the attribute authoritative. */
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; font-weight: 600; color: var(--accent);
  margin-bottom: 12px;
}
.text-center { text-align: center; }

/* Buttons (see Button <guide> tab) --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  padding: 14px 30px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: all var(--transition); text-align: center;
}
.btn-primary { background: var(--dusty-rose); color: #fff; }
.btn-primary:hover { background: var(--deep-rose); color: #fff; transform: translateY(-2px); }
.btn-secondary { background: transparent; color: var(--deep-plum); border-color: var(--dusty-rose); }
.btn-secondary:hover { background: var(--dusty-rose); color: #fff; }

/* ==========================================================================
   Header / Footer (reusable across all pages — includes/header.php, footer.php)
   ========================================================================== */

/* Header — floating pill nav (drdoctor.co.uk reference) ------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  padding: 14px 0;
  transition: padding var(--transition);
}
.site-header.scrolled { padding: 8px 0; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.brand {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
  color: var(--deep-plum); flex-shrink: 0;
}
.brand span { color: var(--dusty-rose); }
.brand-logo { height: 72px; width: auto; display: block; transition: height var(--transition); }
.site-header.scrolled .brand-logo { height: 58px; }

/* The pill: white rounded capsule holding nav + CTA */
.nav-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(92, 61, 78, 0.08);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  box-shadow: 0 6px 24px rgba(92, 61, 78, 0.08);
  transition: box-shadow var(--transition);
}

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0 14px; }
.nav-links a {
  font-family: var(--font-heading); font-weight: 500; color: var(--charcoal);
  font-size: .95rem; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--dusty-rose); transition: width var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--deep-plum); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { padding: 11px 22px; font-size: .95rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--deep-plum); margin: 5px 0; transition: var(--transition); }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--deep-plum); color: #f4e9ee; padding: 72px 0 32px; }
.site-footer a { color: #f4e9ee; }
.site-footer a:hover { color: var(--dusty-rose); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 88px; width: auto; display: block; }
/* Tagline: smaller type, kept on a single line (wraps only on narrow screens) */
.footer-tagline { margin-top: 16px; font-size: .72rem; line-height: 1.5; white-space: nowrap; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }

/* Contact: standalone icon buttons (WhatsApp, Instagram, Email) */
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover {
  background: var(--dusty-rose); color: #fff; border-color: var(--dusty-rose);
  transform: translateY(-2px);
}
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .88rem; color: #d9c4ce;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: block; }
  /* On mobile the pill collapses to just the CTA; nav opens as an overlay */
  .nav-pill { padding: 6px 6px 6px 6px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed; top: 84px; right: 16px; height: auto; max-height: calc(100vh - 100px);
    width: min(80vw, 320px); flex-direction: column; align-items: flex-start;
    background: rgba(255,255,255,0.98); padding: 28px; gap: 22px; border-radius: 24px;
    transform: translateX(120%); transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { transform: translateX(0); }
}
@media (max-width: 560px) {
  .section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Let the tagline wrap rather than overflow on very narrow phones */
  .footer-tagline { white-space: normal; }
}

/* Screen-reader-only utility -----------------------------------------------
   Previously declared only in home.css, so it worked on the front page but not
   elsewhere. It lives here now because the theme's skip link uses it on every
   page. (home.css still declares it identically — harmless.)
   The skip link reveals itself on keyboard focus. */
.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;
}
a.sr-only:focus {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  width: auto; height: auto; margin: 0; padding: 10px 18px;
  clip: auto; white-space: normal;
  background: var(--accent); color: var(--warm-cream);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  font-family: var(--font-heading); text-decoration: none;
}