/* ,,,,, The Black Girl Advocate, design tokens + base ,,,,, */
:root {
  /* Brand palette, creamy beige, rich chocolate, lavender, bronze gold */
  --beige: #F5F0E6;        /* primary background */
  --beige-deep: #ECE3D2;   /* alt surface */
  --beige-warm: #E4D8C2;   /* card / divider */
  --chocolate: #3D2C29;    /* primary text & strong surface */
  --chocolate-2: #2A1D1B;  /* deepest surface */
  --taupe: #5D5349;        /* secondary detail / borders */
  --lavender: #9C8AA5;     /* flower accent */
  --lavender-soft: #C7BBCD;
  --bronze: #AD8A56;       /* highlight / gold */
  --bronze-soft: #C8A874;
  --black: #000000;
  --ink: var(--chocolate);

  --line: rgba(245, 240, 230, 0.16);
  --line-dark: rgba(61, 44, 41, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans', system-ui, sans-serif;
  background: var(--beige);
  color: var(--chocolate);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Typography */
.display, .serif { font-family: 'Noto Serif', Georgia, serif; }
.sans { font-family: 'Noto Sans', system-ui, sans-serif; }

.eyebrow {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Layout helpers */
.container, .container-wide {
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.container { max-width: 1280px; }
.container-wide { max-width: 1440px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--bronze); color: var(--beige); }
.btn-primary:hover { background: var(--bronze-soft); color: var(--chocolate); box-shadow: 0 8px 24px -8px rgba(173, 138, 86, 0.55); }
.btn-dark { background: var(--chocolate); color: var(--beige); }
.btn-dark:hover { background: var(--chocolate-2); }
.btn-outline-light {
  background: transparent;
  color: var(--beige);
  border: 1.5px solid rgba(245, 240, 230, 0.42);
}
.btn-outline-light:hover { background: rgba(245, 240, 230, 0.08); border-color: var(--beige); }
.btn-outline-dark {
  background: transparent;
  color: var(--chocolate);
  border: 1.5px solid var(--chocolate);
}
.btn-outline-dark:hover { background: var(--chocolate); color: var(--beige); }
.btn-ghost { background: transparent; color: var(--chocolate); padding: 10px 14px; }
.btn-ghost:hover { background: rgba(61, 44, 41, 0.06); }

/* Nav */
.nav-root {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(245, 240, 230, 0.85);
  border-bottom: 1px solid var(--line-dark);
}
.nav-root.nav-dark {
  background: rgba(42, 29, 27, 0.78);
  border-bottom: 1px solid var(--line);
  color: var(--beige);
}
.nav-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Noto Serif', serif;
  font-weight: 500;
  cursor: pointer;
}
.nav-logo-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--chocolate);
  color: var(--bronze-soft);
  display: grid; place-items: center;
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 18px;
  border: 1.5px solid var(--bronze);
}
.nav-dark .nav-logo-mark { background: var(--bronze); color: var(--chocolate); border-color: var(--bronze-soft); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  opacity: 0.78;
  transition: opacity 0.15s, background 0.15s;
}
.nav-link:hover { opacity: 1; }
.nav-link.active {
  opacity: 1;
  background: rgba(61, 44, 41, 0.08);
  font-weight: 600;
}
.nav-dark .nav-link.active { background: rgba(245, 240, 230, 0.12); }
.nav-cta { margin-left: 12px; }

/* Footer */
footer {
  background: #5D4A3F;
  color: var(--beige);
  padding: 96px 0 36px;
}
footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
}
footer h4 {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-soft);
  margin: 0 0 20px;
  font-weight: 600;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 12px; opacity: 0.72; font-size: 14.5px; cursor: pointer; transition: opacity 0.15s; }
footer li:hover { opacity: 1; }
footer .footer-lede {
  font-family: 'Noto Serif', serif;
  font-size: 26px;
  line-height: 1.3;
  max-width: 380px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
footer .footer-bottom {
  padding-top: 28px;
  display: block;
  font-size: 13px;
  opacity: 0.85;
}

/* Section spacing */
.section { padding: 120px 0; }
.section-sm { padding: 80px 0; }

/* Display sizes, Noto Serif works best a touch smaller than display fonts */
.d-xxl { font-size: clamp(64px, 9.5vw, 168px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; }
.d-xl  { font-size: clamp(44px, 6.5vw, 108px); line-height: 1.0; letter-spacing: -0.02em; font-weight: 400; }
.d-lg  { font-size: clamp(38px, 5vw, 80px); line-height: 1.06; letter-spacing: -0.02em; font-weight: 400; }
.d-md  { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 500; }
.d-sm  { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }

/* Outlined display text used in hero */
.outlined {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--beige);
  text-stroke: 1.5px var(--beige);
}
.outlined-dark {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--chocolate);
}

/* Image placeholder */
.img-ph {
  position: relative;
  overflow: hidden;
  background: var(--chocolate);
  color: var(--beige);
  display: grid;
  place-items: center;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.95;
}
.img-ph::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(173, 138, 86, 0.28), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(156, 138, 165, 0.32), transparent 60%),
    linear-gradient(145deg, var(--chocolate), var(--chocolate-2));
}
.img-ph > * { position: relative; z-index: 1; }

/* Gradient "portraits" */
.ph-portrait-1::before {
  background:
    radial-gradient(ellipse 40% 55% at 50% 38%, rgba(200, 168, 116, 0.45), transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 95%, rgba(42, 29, 27, 0.85), transparent 70%),
    linear-gradient(160deg, #5D5349, #2A1D1B 70%);
}
.ph-portrait-2::before {
  background:
    radial-gradient(ellipse 45% 60% at 55% 40%, rgba(173, 138, 86, 0.45), transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(61, 44, 41, 0.95), transparent 70%),
    linear-gradient(180deg, #5D5349, #3D2C29);
}
.ph-portrait-3::before {
  background:
    radial-gradient(ellipse 50% 60% at 50% 45%, rgba(156, 138, 165, 0.45), transparent 62%),
    linear-gradient(160deg, #3D2C29, #2A1D1B 75%);
}
.ph-portrait-4::before {
  background:
    radial-gradient(ellipse 45% 55% at 45% 40%, rgba(199, 187, 205, 0.4), transparent 60%),
    radial-gradient(ellipse 60% 50% at 60% 100%, rgba(93, 83, 73, 0.85), transparent 70%),
    linear-gradient(170deg, #3D2C29, #2A1D1B);
}
.ph-scene-1::before {
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(245, 240, 230, 0.6), transparent 70%),
    linear-gradient(140deg, #ECE3D2, #E4D8C2 60%, #C8A874);
}
.ph-scene-2::before {
  background:
    radial-gradient(ellipse 60% 60% at 70% 30%, rgba(173, 138, 86, 0.55), transparent 70%),
    linear-gradient(140deg, #3D2C29, #9C8AA5);
}

/* Utility */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
hr.rule { border: none; border-top: 1px solid var(--line-dark); margin: 0; }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-bronze { background: rgba(173, 138, 86, 0.18); color: var(--bronze); }
.chip-chocolate { background: rgba(61, 44, 41, 0.1); color: var(--chocolate); }
.chip-lavender { background: rgba(156, 138, 165, 0.22); color: #6F5E7A; }
.chip-on-dark { background: rgba(245, 240, 230, 0.1); color: var(--beige); }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }

/* Mobile nav */
.nav-burger { display: none; }
.nav-mobile { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  footer .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-left: auto;
    background: none; border: none; cursor: pointer;
  }
  .nav-burger span {
    display: block; height: 2.5px; width: 100%; border-radius: 2px;
    background: var(--chocolate); transition: background 0.2s;
  }
  .nav-dark .nav-burger span { background: var(--beige); }

  .nav-mobile {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: var(--beige); color: var(--chocolate);
    transform: translateX(100%); transition: transform 0.28s ease;
    overflow-y: auto;
  }
  .nav-mobile.open { transform: translateX(0); }
  .nav-mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; padding-bottom: 18px;
  }
  .nav-close {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: none; cursor: pointer; color: var(--chocolate);
  }
  .nav-mobile-links {
    display: flex; flex-direction: column; gap: 2px;
    padding: 24px 24px 60px;
  }
  .nav-mobile-link {
    padding: 16px 8px; font-size: 22px; font-weight: 500;
    border-bottom: 1px solid var(--line); cursor: pointer;
  }
  .nav-mobile-link.active { color: var(--bronze); }

  /* Grouped dropdown folders in the mobile menu */
  .nav-mobile-group { border-bottom: 1px solid var(--line); }
  .nav-mobile-grouptoggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 8px; font-size: 22px; font-weight: 500; font-family: inherit;
    background: none; border: none; color: inherit; cursor: pointer; text-align: left;
  }
  .nav-mobile-chev { opacity: 0.55; transition: transform 0.22s ease; flex-shrink: 0; }
  .nav-mobile-grouptoggle.open .nav-mobile-chev { transform: rotate(180deg); }
  .nav-mobile-sub {
    display: flex; flex-direction: column; gap: 2px;
    padding: 2px 8px 14px 4px;
  }
  .nav-mobile-sublink {
    padding: 12px 0 12px 16px; font-size: 17px; font-weight: 500;
    opacity: 0.82; cursor: pointer;
    border-left: 2px solid var(--line);
  }
  .nav-mobile-sublink.active { color: var(--bronze); opacity: 1; border-left-color: var(--bronze); }
}

/* ============================================================
   MOBILE RESPONSIVE LAYER
   Pages use many inline-styled fixed grids; these overrides
   collapse them to a single stack and tame spacing on phones
   and small tablets. Stylesheet !important beats plain inline.
   ============================================================ */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; }

/* Donorbox donation widget: keep it fully responsive on every screen */
#donate-widget, #donate-widget iframe, #donate-widget dbox-widget {
  width: 100% !important; max-width: 100% !important;
}

@media (max-width: 900px) {
  /* Tighter page gutters */
  .container, .container-wide { padding-left: 20px !important; padding-right: 20px !important; }

  /* Calmer vertical rhythm for class-based sections */
  .section { padding-top: 60px !important; padding-bottom: 60px !important; }
  .section-sm { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Reduce the common large inline vertical paddings used across pages */
  [style*="padding: 120px 0"], [style*="padding:120px 0"],
  [style*="padding: 100px 0"], [style*="padding:100px 0"] {
    padding-top: 60px !important; padding-bottom: 60px !important;
  }

  /* Collapse every multi-column grid to a single stack */
  [style*="grid-template-columns"], [style*="grid-template:"] {
    grid-template-columns: 1fr !important;
  }

  /* Phase 2: larger reading + bigger tap targets for multigenerational users */
  body { font-size: 17px; }
  p[style*="font-size: 13"], p[style*="font-size: 14"], p[style*="font-size: 15"],
  li[style*="font-size: 13"], li[style*="font-size: 14"], li[style*="font-size: 15"] {
    font-size: 16.5px !important; line-height: 1.6 !important;
  }
  .btn {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 15px 24px !important;
  }
  .btn-primary, .btn-dark, .btn-outline-dark, .btn-outline-light {
    width: 100%; justify-content: center;
  }

  /* Phase 3: interior-page polish on phones */
  /* Calmer page-top heroes (PageHero uses 96px/120px) */
  [style*="96px 0 120px"] { padding-top: 52px !important; padding-bottom: 60px !important; }
  /* Trim heavy inner card padding so content isn't cramped */
  [style*="48px 56px"], [style*="48px 48px"] { padding: 28px 22px !important; }
  [style*="padding: 40px"], [style*="padding:40px"] { padding: 26px 22px !important; }
  /* Decorative oversized background letters shouldn't crowd small screens */
  [style*="30vw"], [style*="32vw"] { font-size: 44vw !important; opacity: 0.05 !important; }

  /* I Got Next self-defense flyer: drop the floating coach badge into normal
     flow on phones so it no longer overlaps the big headline */
  .ign-coach-badge {
    position: static !important; top: auto !important; right: auto !important;
    margin-bottom: 22px; justify-content: flex-start;
  }

  /* Footer stacks fully */
  footer { padding-top: 64px !important; padding-bottom: 28px !important; }
  footer .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}