/* ═══════════════════════════════════════════════════════════
   MommyBaby — shared foundation
   Design tokens plus the two components both pages render:
   the brand header and the social links.

   Loaded first on every page; page CSS (regions.css, app.css)
   comes after and may override.
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper:    #FBF7F2;
  --surface:  #FFFFFF;
  --ink:      #241E1A;
  --muted:    #7A6E64;
  --faint:    #A99C90;
  --line:     #EBE2D7;
  --line-2:   #DCD0C2;

  --clay:     #E4674B;
  --clay-dark:#C4502F;
  --clay-tint:#FDEEE9;

  --moss:     #2F5D50;
  --moss-tint:#E4EEE9;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(36,30,26,.05), 0 2px 6px rgba(36,30,26,.04);
  --shadow-md: 0 2px 6px rgba(36,30,26,.06), 0 10px 26px rgba(36,30,26,.08);
  --shadow-lg: 0 8px 20px rgba(36,30,26,.10), 0 24px 60px rgba(36,30,26,.14);

  --panel-w: 400px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Layout tokens for the shared site header in /assets/header.css.
     Only the geometry lives here — the header's crimson is declared on
     .hdr itself, so it cannot reach this file's terracotta (--clay).
     --header-h is needed outside the header too: map.html is a fixed
     100dvh app and has to subtract the bar from its own height. */
  --header-h: 56px;
  --gut:  20px;
  --wrap: 1180px;
  --r-pill: 999px;

  /* Faint paper grain, so flat cream never looks like dead CSS. Used by the
     map's sidebar and by the picker's page background. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* Same breakpoint as the landing, so the shared header changes height
   at the same width on both sites. */
@media (min-width: 720px) { :root { --header-h: 72px; --gut: 32px; } }

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: "Onest", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── brand ──────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
}

/* The logo doubles as the way home. On mobile the header is also the sheet's
   drag surface, but app.js ignores gestures that start inside an <a>, so the
   logo reads as a link and the rest of the header still drags. */
.brand__home {
  flex: none;
  display: block;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.brand__home:hover { transform: translateY(-1px); }
.brand__home:active { transform: translateY(0) scale(.97); }
.brand__home:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

/* The supplied logo is cream artwork on its own crimson field, so it needs no
   backdrop of ours — just a matching corner radius. */
.brand__mark {
  flex: none;
  display: block;      /* no inline baseline gap inside .brand__home */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(218,8,64,.28);
}

.brand__text { min-width: 0; }

.brand__name {
  margin: 0;
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
}

.brand__tag {
  margin: 1px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ── social links ───────────────────────────────────────── */

.social {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: none;
}

.social__link {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 0;
  border-radius: 10px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s;
}
.social__link svg { width: 18px; height: 18px; }

.social__link:hover { transform: translateY(-1px); filter: saturate(1.12); }
.social__link:active { transform: translateY(0) scale(.96); }

.social__link--ig {
  background: linear-gradient(135deg, #FEDA75, #FA7E1E 25%, #D62976 55%, #962FBF 80%, #4F5BD5);
  box-shadow: 0 2px 8px rgba(214,41,118,.30);
}
.social__link--ig:hover { box-shadow: 0 4px 14px rgba(214,41,118,.40); }

.social__link--wa {
  background: #25D366;
  box-shadow: 0 2px 8px rgba(37,211,102,.32);
}
.social__link--wa:hover { box-shadow: 0 4px 14px rgba(37,211,102,.42); }

.social__link:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}