/* ============================================================
   Carol S. Grant — site layer
   Replaces the Claude Design runtime. Component values are copied
   from the design system source (_ds_bundle.js); tokens are untouched
   in /assets/css/tokens.
   ============================================================ */

/* Injected by the design runtime as page-level CSS */
html, body { height: 100%; margin: 0; }

/* ---------- Button (design system: Button, variant primary) ---------- */
.ds-btn {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hot-pink);
  /* Deep plum rather than the design's white: white on hot pink is 3.56:1,
     below WCAG AA. Plum Deep on hot pink is 5.2:1. */
  color: var(--plum-deep);
  box-shadow: var(--shadow-accent);
}
.ds-btn-sm { padding: 8px 16px; font-size: 14px; }
.ds-btn-md { padding: 12px 24px; font-size: 15px; }
.ds-btn-lg { padding: 16px 34px; font-size: 17px; }
.ds-btn:hover { background: var(--soft-pink); }
/* Buttons that are links keep their text colour over the page-level a:hover pink */
a.ds-btn, a.ds-btn:hover { color: var(--plum-deep); }
.ds-btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--hot-pink); }

/* ---------- Card (design system: Card, CardTitle) ---------- */
.ds-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  font-family: var(--font-body);
  color: var(--text-ink);
}
.ds-card-accent { border-top: 2px solid var(--hot-pink); }
.ds-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-ink);
  margin: 0 0 var(--space-3);
}

/* ---------- Women Leaders community cards (design tool hover states) ---------- */
.community-card:hover,
.community-card:focus-visible { background: #FBF7F4 !important; color: #1E1B17 !important; }
.community-card:hover .community-accent,
.community-card:focus-visible .community-accent { color: #3A352F !important; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--hot-pink); outline-offset: 3px; }
input:focus-visible,
textarea:focus-visible { outline: 2px solid var(--hot-pink); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Spam honeypot: off-screen, out of the tab order and the accessibility tree */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact form states ---------- */
.contact-status { margin: 0; font-size: 15px; line-height: 1.5; color: #1E1B17; }
.contact-confirm { margin: 0; font-size: 17px; line-height: 1.6; color: #1E1B17; }
.contact-confirm:focus { outline: none; }

/* ---------- Small screens ---------- */
/* Card grid: let the 320px minimum shrink to the viewport so 375px has no sideways scroll */
[data-grid="320"] { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; }

/* Nav: the pill cannot hold the links below ~820px. Collapse them behind a
   menu button; the bar stays one row and the links open inside the pill. */
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #FBF7F4;
    cursor: pointer;
  }
  .nav-toggle:hover { background: rgba(251, 247, 244, 0.08); }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  .site-nav-links { display: none !important; }

  .site-nav.is-open {
    height: auto !important;
    flex-wrap: wrap;
    border-radius: 24px !important;
    padding: 10px 10px 16px 24px !important;
    row-gap: 6px !important;
  }
  .site-nav.is-open .site-nav-links {
    display: flex !important;
    width: 100%;
    margin-left: 0 !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .site-nav.is-open .site-nav-links > a:not(.ds-btn) { padding: 10px 0; font-size: 15px !important; }
  .site-nav.is-open .site-nav-links > a.ds-btn { margin-top: 10px; }
}