/* ==========================================================================
   PUENTE — minimal CSS framework
   Scope: sitewide base (§0–§3) + two components, nav and footer (§4–§5).
   Handoff: paste §0–§3 and §6 into Squarespace → Design → Custom CSS.
   §4–§5 style hand-authored markup (Code Block / prototype); §6 maps the
   same treatment onto Squarespace's own native header + footer markup.
   Nothing here uses guessed class names except where §6 says so explicitly.
   ========================================================================== */

/* ---------- §0. Official Puente brand variables (sitewide) ---------- */
:root {
  --puente-317: #B1E4E3;
  --puente-353: #80E0A7;
  --puente-808: #00B088;
  --puente-805: #FF7276;
  --puente-804: #FFAA4D;
  --puente-810: #FFC808;
  --puente-814: #8A69D4;
  --puente-0631: #BF9BDE;
  --puente-801: #00B0D8;
  --puente-black: #0A0A0A;
  --puente-white: #FFFFFF;

  /* Derived UI values — not official brand colors */
  --puente-orange: var(--puente-804);
  --puente-orange-hover: #E08A2E;
  --puente-orange-press: #C77620;
  --puente-orange-tint: #FFF6EC;
  --puente-teal-dark: #00805F;
  --puente-ink: #111111;
  --puente-ink-2: #333333;
  --puente-ink-3: #555555;
  --puente-ink-4: #8A8A8A;
  --puente-rule: #E6E6E6;
  --puente-rule-2: #D4D4D4;
  --puente-surface-2: #F5F5F5;
  --puente-surface-3: #EDEDED;

  --puente-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --puente-eyebrow-size: 11px;
  --puente-eyebrow-track: 0.08em;
  --puente-pad-x: clamp(20px, 4cqi, 40px);
  --puente-dur: 180ms;
}

/* ---------- §1. Helvetica font stack (sitewide) ----------
   Squarespace's font picker has no Helvetica Neue, so the stack is forced here.
   Targets plain tags only — safe across template updates. */
body,
h1, h2, h3, h4, h5, h6,
p, a, button, input, textarea {
  font-family: var(--puente-font) !important;
}

/* ---------- §2. Visible focus states (sitewide, accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--puente-804);
  outline-offset: 3px;
}

/* ---------- §3. Reduced motion (sitewide, accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- §4. Nav component ----------
   .pk-nav                 header bar
   .pk-nav--overlay        transparent over the hero (white type + white logo)
   .pk-nav--solid          white bar, ink type (scrolled / inner pages)
   .pk-nav__link           ALL-CAPS 11px bold link
   .pk-nav__link--cta      bordered Donate link
   Breakpoint is a container query, so the same CSS drives the 1440 and 390
   prototype frames and the live site. */
.pk-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--puente-pad-x);
  transition: background var(--puente-dur) ease;
}
.pk-nav--overlay { background: transparent; }
.pk-nav--solid { background: var(--puente-white); }

.pk-nav__logo {
  height: 128px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.pk-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3cqi, 32px);
}

.pk-nav__link {
  font-size: var(--puente-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--puente-eyebrow-track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--puente-ink);
  transition: color var(--puente-dur) ease;
}
.pk-nav--overlay .pk-nav__link { color: var(--puente-white); }
.pk-nav__link:hover { color: var(--puente-orange); text-decoration: none; }

.pk-nav__link--cta {
  color: var(--puente-orange);
  border: 1.5px solid var(--puente-orange);
  padding: 9px 18px;
}
.pk-nav--overlay .pk-nav__link--cta { color: var(--puente-orange); }
.pk-nav__link--cta:hover {
  background: var(--puente-orange);
  color: var(--puente-white);
}

/* Dropdown groups — mirrors the puentela.org main menu */
.pk-nav__group { position: relative; display: flex; align-items: center; }
.pk-nav__group > .pk-nav__link { display: inline-flex; align-items: center; gap: 6px; }
.pk-nav__caret { font-size: 8px; line-height: 1; opacity: 0.7; }
.pk-nav__menu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 232px;
  background: var(--puente-white);
  border: 1px solid var(--puente-rule);
  border-top: 2px solid var(--puente-orange);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--puente-dur) ease, transform var(--puente-dur) ease, visibility var(--puente-dur);
  z-index: 60;
}
.pk-nav__group:hover .pk-nav__menu,
.pk-nav__group:focus-within .pk-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pk-nav__menu a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--puente-ink);
  padding: 11px 20px;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background var(--puente-dur) ease, color var(--puente-dur) ease;
}
.pk-nav__menu a:hover { background: var(--puente-surface-2); color: var(--puente-orange); text-decoration: none; }

.pk-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.pk-nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--puente-ink);
}
.pk-nav--overlay .pk-nav__burger span { background: var(--puente-white); }

/* Mobile menu panel */
.pk-nav-panel {
  position: sticky;
  top: 168px;
  z-index: 99;
  background: var(--puente-white);
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--puente-rule);
}
.pk-nav-panel a {
  font-size: 20px;
  font-weight: 700;
  color: var(--puente-ink);
  text-decoration: none;
  padding: 10px 0;
  min-height: 44px;
}
.pk-nav-panel a:hover { color: var(--puente-orange); text-decoration: none; }
.pk-nav-panel__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--puente-orange);
  padding-top: 10px;
}
.pk-nav-panel a.pk-nav-panel__sub { font-size: 15px; padding-left: 16px; color: var(--puente-ink-2); }
.pk-nav-panel a.pk-nav__link--cta {
  color: var(--puente-orange);
  border: none;
  padding: 10px 0;
}

@container (max-width: 700px) {
  .pk-nav__logo { height: 88px; }
  .pk-nav__links { display: none; }
  .pk-nav__burger { display: flex; }
  .pk-nav-panel { top: 128px; }
}

/* ---------- §5. Footer component ---------- */
.pk-footer {
  background: var(--puente-black);
  color: var(--puente-white);
  padding: clamp(48px, 7cqi, 80px) var(--puente-pad-x) 32px;
}
.pk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(28px, 5cqi, 48px);
  margin-bottom: clamp(40px, 6cqi, 64px);
}
.pk-footer__logo {
  height: 136px;
  width: auto;
  object-fit: contain;
  margin-bottom: 16px;
}
.pk-footer__address {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.pk-footer__label {
  font-size: var(--puente-eyebrow-size);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.pk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pk-footer__links a {
  font-size: 14px;
  font-weight: 700;
  color: var(--puente-white);
  text-decoration: none;
}
.pk-footer__links a:hover { color: var(--puente-orange); text-decoration: none; }

.pk-footer__note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
}
.pk-footer__signup {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1.5px solid var(--puente-white);
  padding-bottom: 10px;
}
.pk-footer__signup input {
  background: transparent;
  border: none;
  color: var(--puente-white);
  font-size: 14px;
  flex: 1;
  min-width: 0;
  outline: none;
}
.pk-footer__signup input::placeholder { color: rgba(255, 255, 255, 0.45); }
.pk-footer__signup button {
  background: none;
  border: none;
  color: var(--puente-orange);
  font-size: var(--puente-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--puente-eyebrow-track);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}
.pk-footer__social {
  margin-top: 24px;
  font-size: var(--puente-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--puente-eyebrow-track);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pk-footer__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 40px;
}
.pk-footer__meta-links { display: flex; gap: 20px; }
.pk-footer__meta a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  text-decoration: none;
}
.pk-footer__meta a:hover { color: var(--puente-white); text-decoration: none; }

.pk-footer__tagline {
  font-size: clamp(1.6rem, 5cqw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--puente-white);
}

@container (max-width: 700px) {
  .pk-footer__grid { grid-template-columns: 1fr; }
  .pk-footer__logo { height: 104px; }
}

/* ---------- §6. Squarespace mapping for nav + footer ----------
   The classes above don't exist in Squarespace's own header/footer markup, so
   these rules apply the same treatment to the platform's documented selectors.
   .header-nav-item / .header-title-logo / .header-actions and #footer-sections
   are Squarespace 7.1 markup — stable in practice, but re-check after a major
   platform update. Set the header background with Design → Header → Background
   Style: Adaptive first; only these type rules need CSS. */
.header-nav-item a,
.header-actions a {
  font-size: var(--puente-eyebrow-size) !important;
  font-weight: 700 !important;
  letter-spacing: var(--puente-eyebrow-track) !important;
  text-transform: uppercase !important;
}
.header-actions .btn,
.header-actions a.sqs-button-element--primary {
  background: transparent !important;
  color: var(--puente-orange) !important;
  border: 1.5px solid var(--puente-orange) !important;
  border-radius: 0 !important;
}
.header-actions .btn:hover {
  background: var(--puente-orange) !important;
  color: var(--puente-white) !important;
}
#footer-sections a { text-decoration: none; }
#footer-sections a:hover { color: var(--puente-orange); }