/*
 Theme Name:   Unidos In Power
 Theme URI:    https://unidosinpower.org
 Description:  Child theme of Infinite (GoodLayers) for Unidos In Power.
 Author:       Psycobrand
 Author URI:   https://psycobrand.com
 Template:     infinite
 Version:      2.41.43
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  infinite-unidos

 START YOUR CHILD THEME CSS HERE
*/

/* ============================================================
   Unidos In Power — Color Tokens
   Vibrant, community-centered palette built around the coalition's
   indigo + coral mark, with a bold multicolor accent set.
   ============================================================ */

:root {
  /* ---- Brand core ------------------------------------------------ */
  --uip-indigo:        #282A71;  /* primary brand indigo (wordmark, surfaces) */
  --uip-indigo-600:    #353892;
  --uip-indigo-400:    #5a5ea8;
  --uip-coral:         #E84938;  /* the mark's coral-red — energy, people */
  --uip-coral-600:     #cf3a2a;
  --uip-coral-300:     #f3897d;
  --uip-green:         #89C340;  /* action / highlight / civic optimism */
  --uip-green-600:     #6fa62d;
  --uip-green-300:     #b3da7e;

  /* ---- Extended brand accents (deck theme) ----------------------- */
  --uip-teal:          #009398;
  --uip-blue:          #009EFF;
  --uip-yellow:        #FDDA24;

  /* ---- Deep navy field (event flyers, dark sections) ------------- */
  --uip-navy-deep:     #0a0d1a;  /* near-black navy base */
  --uip-navy-900:      #0f1220;
  --uip-navy-800:      #151929;
  --uip-navy-700:      #1c2050;
  --uip-navy-600:      #282c52;
  --uip-navy-line:     #2a2f52;  /* hairline borders on navy */

  /* ---- Neutrals -------------------------------------------------- */
  --uip-white:         #ffffff;
  --uip-cream:         #f7f6f1;  /* warm off-white page field */
  --uip-lavender:      #edeef6;  /* cool tint section field */
  --uip-gray-50:       #f4f4f7;
  --uip-gray-100:      #e7e6e6;
  --uip-gray-200:      #d6d7e0;
  --uip-gray-300:      #b8bac8;
  --uip-gray-400:      #8a8ea8;
  --uip-gray-500:      #6a6e8a;
  --uip-gray-600:      #4f5370;
  --uip-slate:         #2d3847;  /* dark text on light, neutral ink */
  --uip-ink:           #16182f;  /* deepest text */

  /* Brand */
  --color-brand:           var(--uip-indigo);
  --color-brand-accent:    var(--uip-coral);
  --color-action:          var(--uip-green);
  --color-action-hover:    var(--uip-green-600);

  /* Text */
  --text-strong:           var(--uip-ink);
  --text-body:             var(--uip-slate);
  --text-muted:            var(--uip-gray-500);
  --text-on-brand:         var(--uip-white);
  --text-on-dark:          var(--uip-white);
  --text-on-dark-muted:    var(--uip-gray-400);
  --text-link:             var(--uip-indigo);

  /* Surfaces — light */
  --surface-page:          var(--uip-cream);
  --surface-card:          var(--uip-white);
  --surface-subtle:        var(--uip-lavender);
  --surface-sunken:        var(--uip-gray-50);

  /* Surfaces — dark (the brand's signature navy field) */
  --surface-dark:          var(--uip-navy-deep);
  --surface-dark-raised:   var(--uip-navy-800);
  --surface-dark-card:     rgba(255, 255, 255, 0.05);

  /* Borders */
  --border-subtle:         var(--uip-gray-200);
  --border-strong:         var(--uip-gray-300);
  --border-on-dark:        var(--uip-navy-line);

  /* Focus ring */
  --focus-ring:            var(--uip-blue);

  /* Status (mapped to brand accents) */
  --status-success:        var(--uip-green);
  --status-info:           var(--uip-blue);
  --status-warning:        var(--uip-yellow);
  --status-danger:         var(--uip-coral);

  /* Priority-area accents (2030 roadmap pillars) */
  --pillar-economic:       var(--uip-indigo);
  --pillar-education:      var(--uip-green);
  --pillar-health:         var(--uip-coral);
  --pillar-housing:        var(--uip-teal);
  --pillar-immigration:    var(--uip-blue);
  --pillar-workforce:      var(--uip-yellow);

  /* Signature dark-field radial (event flyers / hero panels) */
  --gradient-navy-field:   radial-gradient(120% 90% at 50% 18%, #1c2050 0%, #0f1220 55%, #0a0d1a 100%);
  --gradient-indigo-cta:   linear-gradient(135deg, #353892 0%, #282A71 100%);
  --gradient-blue-field:   linear-gradient(150deg, #2a2c72 0%, #1746b8 52%, #0b86e6 100%);
}

/* ============================================================
   Unidos In Power — Typography Tokens
   ============================================================ */

:root {
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --text-3xs:  0.6875rem;
  --text-2xs:  0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.16em;

  --type-display:  var(--weight-extra) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-hero:     var(--weight-extra) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-h2:       var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:       var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h4:       var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-lead:     var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --type-body:     var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-ui:       var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-eyebrow:  var(--weight-bold) var(--text-2xs)/var(--leading-normal) var(--font-display);
}

/* ============================================================
   Unidos In Power — Spacing, Radius, Shadow, Motion Tokens
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   4rem;
  --space-10:  5rem;
  --space-12:  7rem;

  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1120px;
  --container-xl:  1320px;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-medium:   2px;

  --shadow-xs:  0 1px 2px rgba(22, 24, 47, 0.06);
  --shadow-sm:  0 2px 8px rgba(22, 24, 47, 0.08);
  --shadow-md:  0 8px 24px rgba(22, 24, 47, 0.10);
  --shadow-lg:  0 18px 48px rgba(22, 24, 47, 0.14);
  --shadow-brand: 0 14px 34px rgba(40, 42, 113, 0.24);
  --shadow-on-dark: 0 20px 60px rgba(0, 0, 0, 0.45);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

/* Unidos In Power — static site styles */

body { margin:0; background:var(--uip-cream); color:var(--text-body);
  font-family:var(--font-body,"Plus Jakarta Sans",sans-serif); -webkit-font-smoothing:antialiased; }
/* The client-approved font-size bump, applied per block instead of on body. The
   Revolution Slider measures the viewport in real device pixels via JS and breaks
   under any zoomed ancestor (tested: resetting zoom back to 1 for its own subtree
   does not reliably undo a zoom inherited from an ancestor), so instead of zooming
   body and trying to except the slider, every other content block gets its own,
   sibling-level zoom — the slider's row is simply never included. */
body:not(.uip-real-size) nav.uip-site-nav,
body:not(.uip-real-size) .uip-topbar,
body:not(.uip-real-size) footer,
body:not(.uip-real-size) .uip-post,
body:not(.uip-real-size) .uip-archive,
body:not(.uip-real-size) #not-found-hero,
body:not(.uip-real-size) .gdlr-core-pbf-wrapper:not(:has(rs-module-wrap)) {
  zoom:1.15;
}
/* Pages that carry body.uip-real-size (functions.php, uip_is_real_size_page()) skip
   the zoom above and get the same look from assets/real-size.css instead. */
*,*::before,*::after { box-sizing:border-box; }
img { max-width:100%; }
a { color:var(--uip-indigo); }
a:hover { color:var(--uip-coral-600); }
:root { --hi-hero:var(--uip-coral-600); --hi-eyebrow:var(--uip-coral-600); }

.wrap { max-width:1320px; margin:0 auto; }
.eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase;
  letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--hi-eyebrow);
  font-family:var(--font-display); }
.eyebrow::before { content:""; width:24px; height:2px; background:currentColor; flex:none; }
.eyebrow--coral300 { color:var(--uip-coral-300); }
.eyebrow--green { color:var(--uip-green); }

/* Some sections have no separate H2 — the eyebrow line is the whole section
   title (e.g. Partners, Funders), so it needs more weight than the 12px label
   size everywhere else, without losing the dash-accent look that ties it back
   to every other eyebrow on the page. */
.eyebrow--subtitle { font-size:20px; line-height:1.3; }
.eyebrow--subtitle::before { width:32px; height:3px; }

/* Buttons — design-system Button */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body,"Plus Jakarta Sans",sans-serif); font-weight:700;
  letter-spacing:.01em; font-size:var(--text-sm); padding:.7rem 1.4rem;
  border:2px solid transparent; border-radius:var(--radius-pill); cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:background .2s cubic-bezier(.4,0,.2,1), transform .12s cubic-bezier(.4,0,.2,1),
    box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1); }
.btn:active { transform:scale(.97); }
.btn--sm { font-size:var(--text-sm); padding:.5rem 1rem; }
.btn--lg { font-size:var(--text-md); padding:.95rem 1.9rem; }
.btn--primary { background:var(--uip-green); color:#173000; }
.btn--primary:hover { background:var(--uip-green-600); color:#173000; box-shadow:var(--shadow-sm); }
.btn--brand { background:var(--uip-indigo); color:#fff; }
.btn--brand:hover { background:var(--uip-indigo-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn--outline { background:transparent; color:var(--uip-indigo); border-color:var(--uip-indigo); }
.btn--outline:hover { background:var(--uip-lavender); color:var(--uip-indigo); }
.btn--outline-dark { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--outline-dark:hover { background:rgba(255,255,255,.08); color:#fff; }

/* Pill — design-system Pill (outline + dot) */
.pill { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display);
  font-weight:700; font-size:var(--text-2xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; border-radius:var(--radius-pill); padding:.4rem .85rem;
  line-height:1; white-space:nowrap; border:2px solid currentColor; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pill--green { color:var(--uip-green); }
.pill--teal { color:var(--uip-teal); }

/* Photo placeholders — replace with real photography */
.photo-slot { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px; font-size:12px; font-weight:600; line-height:1.45;
  background:var(--uip-lavender); color:var(--text-muted);
  border:1px dashed rgba(40,42,113,.35); }
.photo-slot--dark { background:rgba(255,255,255,.06); color:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.22); }

/* Cards */
.card-light { background:#fff; border-radius:16px; box-shadow:0 6px 18px rgba(40,42,113,.07); }
.navy-panel { background:var(--gradient-navy-field); border-radius:20px; }
.glass-row { background:rgba(255,255,255,.05); border:1px solid var(--border-on-dark);
  border-radius:12px; padding:16px; }
.glass-row-t { font-family:var(--font-display); font-weight:700; color:#fff; font-size:14px; }
.glass-row-d { margin:6px 0 0; font-size:13px; color:var(--uip-gray-300); }
.link-more { font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--uip-indigo); text-decoration:none; }

/* A Ninja Form embedded directly in a page (not inside an [nfm] modal), e.g.
   Contact's [ninja_form id="1"]. Same look as ninja-form-to-modal's own
   .nfm-modal-content rules, just rescoped — that stylesheet only ever
   targets forms rendered inside a modal, so a form embedded in the page body
   would otherwise fall back to the browser's bare, unstyled defaults. */
.uip-embedded-form .nf-field-label label,
.uip-embedded-form .nf-field-label .nf-label-span {
  color: var(--uip-indigo) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.uip-embedded-form .nf-field-container:not(.submit-container) .ninja-forms-field {
  background-color: #fff !important;
  color: var(--uip-indigo) !important;
  font-size: 16px !important;
  border: 1px solid rgba(40,42,113,.2) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.uip-embedded-form .nf-field-container:not(.submit-container) .ninja-forms-field:focus {
  outline: none !important;
  border-color: var(--uip-indigo) !important;
  box-shadow: 0 0 0 3px rgba(40,42,113,.12) !important;
}
/* The native <select> ignores the shared padding above (its OS chrome ring-fences
   space for the built-in arrow), so it renders thinner than the text inputs
   unless its own appearance is reset and the padding/arrow are redrawn by hand. */
.uip-embedded-form .nf-field-container:not(.submit-container) select.ninja-forms-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 12px 40px 12px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23282A71' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}
.uip-embedded-form .ninja-forms-req-symbol { color: var(--uip-coral) !important; }
.uip-embedded-form .nf-error-msg,
.uip-embedded-form .nf-error .nf-field-element::after { color: var(--uip-coral) !important; font-size: 13px !important; }
.uip-embedded-form .nf-error .ninja-forms-field { border-color: var(--uip-coral) !important; }
.uip-embedded-form .submit-container .ninja-forms-field,
.uip-embedded-form input[type="button"].ninja-forms-field,
.uip-embedded-form input[type="submit"].ninja-forms-field {
  background-color: var(--uip-indigo) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
}
.uip-embedded-form .submit-container .ninja-forms-field:hover,
.uip-embedded-form input[type="button"].ninja-forms-field:hover,
.uip-embedded-form input[type="submit"].ninja-forms-field:hover { opacity: .9; }

/* [uip_partner_logos] grid (Partners, Funders). Flex + justify-content:center
   instead of CSS Grid: when the logo count doesn't divide evenly by the
   column count, the leftover logos in the last row center themselves instead
   of hugging the left edge — works for any remainder (1 through cols-1),
   unlike a grid, which would need a different nth-child rule per remainder. */
.uip-logo-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.uip-logo-grid.is-cols-5 .uip-logo-item { flex:0 1 calc(20% - 12.8px); max-width:calc(20% - 12.8px); }
.uip-logo-grid.is-cols-4 .uip-logo-item { flex:0 1 calc(25% - 12px); max-width:calc(25% - 12px); }
.uip-logo-grid.is-cols-3 .uip-logo-item { flex:0 1 calc(33.333% - 10.667px); max-width:calc(33.333% - 10.667px); }
.uip-logo-item { height:90px; padding:6px 20px; background:#fff; overflow:hidden; display:block; }

@media (max-width: 1080px) {
  .uip-logo-grid.is-cols-5 .uip-logo-item,
  .uip-logo-grid.is-cols-4 .uip-logo-item,
  .uip-logo-grid.is-cols-3 .uip-logo-item { flex:0 1 calc(33.333% - 10.667px); max-width:calc(33.333% - 10.667px); }
}
@media (max-width: 640px) {
  .uip-logo-grid.is-cols-5 .uip-logo-item,
  .uip-logo-grid.is-cols-4 .uip-logo-item,
  .uip-logo-grid.is-cols-3 .uip-logo-item { flex:0 1 calc(50% - 8px); max-width:calc(50% - 8px); }
}

/* Get involved accordion */
.acc-item { border:1px solid var(--border-on-dark); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.04); transition:background .3s; }
.acc-item.is-open { background:rgba(255,255,255,.09); }
.acc-head { display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer;
  background:none; border:0; width:100%; text-align:left; font:inherit; }
.acc-title { font-family:var(--font-display); font-weight:700; color:#fff; font-size:16px; flex:1; }
.acc-plus { color:rgba(255,255,255,.6); transition:transform .3s; display:inline-flex; flex:none; }
.acc-item.is-open .acc-plus { transform:rotate(45deg); }
.acc-body { overflow:hidden; max-height:0; opacity:0;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .4s; }
.acc-item.is-open .acc-body { max-height:300px; opacity:1; }
.acc-photo { position:relative; height:240px; margin:0 10px 10px; border-radius:12px; overflow:hidden; }
.acc-scrim { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,13,26,.45) 0%, rgba(10,13,26,.08) 60%); }
.acc-copy { position:absolute; left:16px; bottom:16px; width:42%; background:rgba(10,13,26,.88);
  border-radius:12px; padding:16px 18px; }
/* The copy sits on the left, so the photo is anchored to its far side: a
   centred crop cut the subject in half once the panel narrowed. */
.acc-photo img { object-position:right center; }
.acc-copy p { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.94); margin:0 0 14px; }
.acc-cta { display:inline-flex; align-items:center; padding:10px 22px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.04em;
  text-decoration:none; }

/* One single breakpoint: desktop above 1080px, mobile below. There is no
   tablet tier on purpose — the old two-step (1080 then 680) left an in-between
   state where the grids had already stacked but the type and the cards were
   still sized for desktop, which is what pushed content past the viewport.
   Everything now switches at once. */
@media (max-width:1080px) {
  .grid-2, .grid-2-uneven, .grid-2-3 { grid-template-columns:1fr !important; }
  .grid-3, .grid-6, .goals-grid { grid-template-columns:1fr !important; }
  .goals-sticky { position:static !important; }
  .nav-links { display:none !important; }
  h1 { font-size:38px !important; }
  .acc-copy { width:auto !important; right:16px; }

  /* ---- Mobile overflow guards ----
     What was still pushing the page wider than the viewport is markup the
     reference design writes as *inline* style with no class to hook onto:
     several `display:flex` rows with no flex-wrap (the hero's stats strip, the
     Dímelo event card, the News header's title + button) and two hard
     six-column grids in the partners strip — which is why the `.grid-6` rule
     above never reached them. They are unwound here by structure instead of by
     class; inline declarations need !important to be overridden.
     Column-direction containers are excluded: wrapping them would break the
     accordion and the glass-row stacks. */
  .uip-home [style*="display:flex"]:not([style*="flex-direction:column"]),
  footer [style*="display:flex"]:not([style*="flex-direction:column"]) {
    flex-wrap: wrap !important;
  }
  .uip-home [style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* an odd number of logos leaves one on its own: let it span both columns so it
     sits centred in the full width instead of hugging the left edge */
  .uip-home [style*="repeat(6,1fr)"] > *:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
  /* the partners strip's last, centred row is sized in sixths to match the grid
     above it, so it has to follow the same collapse to two-up */
  .uip-home [style*="flex:0 0 calc"] {
    flex: 0 0 calc((100% - 5.5px) / 2) !important;
  }
  .uip-home [style*="justify-content:center"] > [style*="flex:0 0 calc"]:last-child:nth-child(odd) {
    flex-basis: 100% !important;
  }
  /* 40px of padding a side costs 80px of a phone's width. The header pays this
     twice over: it also carries a 147px fixed-width logo. */
  .uip-home section,
  .uip-site-nav,
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- Mobile nav toggle (added — the design file has no mobile menu control) ---- */
.uip-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.uip-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.uip-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.uip-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.uip-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .uip-nav-toggle { display: block; }
  .nav-links.is-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: var(--uip-indigo);
    padding: 20px 40px 28px;
  }
}

/* ---- header nav dropdown (one level) ----
   Desktop: a hover/focus panel anchored under its trigger link. Mobile: no
   hover, so the panel is always expanded in place under the stacked menu. */
.uip-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Stretches the hoverable box to the full height of the nav bar (the wrap's
     20px vertical padding on each side) without affecting layout — the
     negative margin cancels the padding's effect on the row's height. Without
     this, the item's box was only as tall as its own link text, so moving the
     mouse straight down from the link crossed a dead zone below it (still
     inside the nav bar, but outside .uip-nav-item) before ever reaching the
     dropdown, which dropped the :hover and closed the panel — intermittently,
     depending on the exact mouse path, which is why it "didn't always open".
  */
  padding: 20px 0;
  margin: -20px 0;
}
.uip-nav-dropdown {
  display: flex;
  flex-direction: column;
  position: absolute;
  /* Flush against the trigger link (no margin-top gap): a gap there is a
     dead zone the mouse crosses on the way down, which drops the :hover
     before it reaches the panel and closes it before a click can land. */
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--uip-indigo-600);
  border: 1px solid var(--border-on-dark);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  z-index: 200;
  /* Gated by opacity/visibility, not display: Safari can drop the parent's
     :hover the instant a display:none child becomes part of the layout right
     under the pointer (it re-hit-tests mid-hover and fires a spurious
     mouseleave), which closed the panel before it could be used — Chrome
     never showed this. Staying in the layout the whole time (just invisible
     and non-interactive) avoids that hit-test change entirely. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.uip-nav-item:hover > .uip-nav-dropdown,
.uip-nav-item:focus-within > .uip-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Infinite's `body .nav-links a{ text-transform:uppercase; ... }` (style-core.css)
   is a descendant selector, so it reaches these links no matter how deep they
   sit inside .nav-links — it only showed up on internal pages because the
   home page drops Infinite's CSS entirely (see reference-fit.css §5.1). Scoped
   up front so the specificity actually outranks it. */
.uip-site-nav .nav-links .uip-nav-dropdown-link {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.uip-nav-dropdown-link:hover,
.uip-nav-dropdown-link:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.uip-site-nav .nav-links .uip-nav-dropdown-link.is-current {
  color: #fff;
  font-weight: 800;
  background: rgba(255,255,255,.08);
}

@media (max-width: 1080px) {
  .uip-nav-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* The hover hit-area padding/margin trick is desktop-only — the mobile
       menu is always expanded in place, not hover-triggered, so it would
       just add unwanted spacing here. */
    padding: 0;
    margin: 0;
  }
  .uip-nav-dropdown {
    display: flex !important;
    position: static;
    margin-top: 6px;
    margin-left: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    /* Mobile shows the dropdown expanded in place regardless of hover, so it
       overrides the desktop opacity/visibility gate rather than relying on it. */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ---- Dímelo listing card ---------------------------------------------------
   The card is a flex row with a full-bleed overlay link, so clicking anywhere
   follows the listing's target URL while the Register button stays clickable
   on top of it. */
.uip-dimelo-listing { position:relative; }
.uip-dimelo-cover { position:absolute; inset:0; border-radius:16px; z-index:1; }
.uip-dimelo-listing > *:not(.uip-dimelo-cover) { position:relative; z-index:2; }
.uip-dimelo-listing:has(.uip-dimelo-cover):hover { box-shadow:0 12px 30px rgba(40,42,113,.16); }
.uip-dimelo-note { font-size:13px; line-height:1.55; color:var(--text-muted); margin:10px 0 0; }

/* ---- header nav links -----------------------------------------------------
   The links' own appearance lives in assets/reference-fit.css, not here: it has
   to outrank Infinite's `.nav-links` rules, which load on every view this theme
   does not isolate (404s, plain pages, search). Only the underline, which
   Infinite never touches, stays at this specificity. */
.uip-nav-underline { position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:var(--uip-green); border-radius:2px; }

/* ---- About · Contact form --------------------------------------------- */
.uip-contact-form { display:flex; flex-direction:column; gap:18px; max-width:560px; }
.uip-form-field { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600;
  color:var(--uip-indigo); font-family:var(--font-display); }
.uip-form-field input,
.uip-form-field select,
.uip-form-field textarea {
  font-family:var(--font-body,"Plus Jakarta Sans",sans-serif); font-size:15px; font-weight:400;
  color:var(--uip-indigo); background:#fff; border:1.5px solid var(--uip-gray-200,#dcdce6);
  border-radius:10px; padding:.7rem .9rem; resize:vertical;
}
.uip-form-field input:focus,
.uip-form-field select:focus,
.uip-form-field textarea:focus { outline:2px solid var(--uip-green); outline-offset:1px; }
.uip-form-notice { padding:14px 18px; border-radius:10px; font-size:14px; font-weight:600; }
.uip-form-notice.is-success { background:rgba(137,195,64,.15); color:#3f6316; }
.uip-form-notice.is-error { background:rgba(232,73,56,.12); color:#8a2418; }