/* =====================================================================
   VADA on Nicasio Theme 12 — loaded AFTER css/user.css (which stays as Nicasio sells it).
   1. Token overrides: VADA navy (#00457C, from the logo) + ONE gold family (#af881a, theirs).
   2. Overrides for the few colours user.css hard-codes instead of deriving from tokens
      (teal/blue/violet rgba() values, button hover, island glass). Each says why.
   3. VADA-only pieces: hero photo crops, regions map, member voices, sponsor tiles.
   No font, size or weight is set here: the theme's TYPE MAP stays the only type source.
   ===================================================================== */

/* 1. Tokens ----------------------------------------------------------- */
:root {
  --n12-a1: #D4B04A;            /* gold: buttons, eyebrows, icons, dots (9.1:1 on night) */
  --n12-a2: #2D6CA8;            /* VADA navy, lifted so it reads on night: aurora + spotlight only */
  --n12-a3: #AF881A;            /* VADA's own gold: gradient end, aurora */
  --n12-accent-ink: #06111F;    /* text on gold buttons (9.1:1) */
  --n12-night: #06111F;         /* deep navy page */
  --n12-night-2: #0B1A2E;       /* raised navy: footer, drawers */
  --n12-ink: #EEF2F8;           /* 16.9:1 on night */
  --n12-mist: #A8B5C8;          /* 9.1:1 on night, 8.4:1 on night-2 */
  --n12-day: #EEF2F6;           /* ice: cool light neutral */
  --n12-day-2: #FFFFFF;
  --n12-day-ink: #0A1A2E;       /* 15.6:1 on ice */
  --n12-day-mist: #4C5A6E;      /* 6.2:1 on ice */
  --n12-link-ice: #00457C;      /* VADA navy, 8.7:1 on ice */
  --n12-grad: linear-gradient(100deg, #E6C766, var(--n12-a1) 45%, var(--n12-a3));   /* one gold family, no rainbow */
  --n12-logo-url: url('../shared/img/logo/vada-logo-white.png');                 /* phone bar logo (white PNG, 415x116) */
  --n12-logo-ratio: 3.58;
  --vada-gold-ice: #7A5C0A;     /* gold darkened for captions/icons on ice (5.5:1) */
  --vada-scrim: 6, 17, 31;      /* night as r,g,b for the scrims below */
}
.n12-ice { --c-accent: var(--vada-gold-ice); }   /* user.css hard-codes teal #138A75 here */

/* 2. Hard-coded colours in user.css that tokens can't reach ------------ */
.buttonStyle001:hover, .buttonStyle003:hover, .buttonStyle005:hover, .buttonStyle007:hover, input[type='submit']:hover,
.loginButton:hover, .nextButton:hover, .registerButton:hover, button.stylizedButton:hover {
  background: #E6C766; border-color: #E6C766;     /* was mint #7CF0DB */
}
/* glass islands, drawers, menus: were rgba(12,18,34) / rgba(9,13,27), a blue-grey that fights navy */
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel,
.n12-mainbar .WaLayoutItem:last-child > .WaLayoutPlaceHolder > div,
.zoneHeader1.is-scrolled .n12-logo { background: rgba(11, 26, 46, .74); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul, .zoneHeader1 .WaGadgetLoginForm .loginContainer { background: rgba(11, 26, 46, .98); }
@media (max-width: 1199px) { .WaGadgetMobilePanel .mobilePanel { background: rgba(11, 26, 46, .8); } }
.n12-ctrl { background: rgba(var(--vada-scrim), .6); }
.n12-ctrl:hover { background: rgba(var(--vada-scrim), .85); }
.n12-aurora .n12-card { background: rgba(var(--vada-scrim), .62); }
/* aurora fallback + media scrim: were teal/blue/violet glows */
.n12-aurora {
  background:
    radial-gradient(60% 70% at 12% 20%, rgba(212, 176, 74, .2), transparent 70%),
    radial-gradient(50% 60% at 85% 15%, rgba(45, 108, 168, .34), transparent 70%),
    radial-gradient(50% 60% at 60% 100%, rgba(175, 136, 26, .2), transparent 70%),
    var(--n12-night);
}
.n12-aurora::after { background: linear-gradient(180deg, rgba(var(--vada-scrim), .25), rgba(var(--vada-scrim), .45)); }
.n12-media::after {
  background:
    linear-gradient(90deg, rgba(var(--vada-scrim), .9) 0%, rgba(var(--vada-scrim), .68) 40%, rgba(var(--vada-scrim), .28) 75%, rgba(var(--vada-scrim), .4) 100%),
    linear-gradient(180deg, rgba(var(--vada-scrim), .45) 0%, transparent 25%, transparent 65%, var(--n12-night) 100%),
    radial-gradient(55% 70% at 4% 100%, rgba(0, 69, 124, .35), transparent 70%);
}
.n12-band.n12-media::after { background: linear-gradient(90deg, rgba(var(--vada-scrim), .92), rgba(var(--vada-scrim), .75) 55%, rgba(var(--vada-scrim), .5)), linear-gradient(180deg, transparent 55%, var(--n12-night)); }
@media (max-width: 767px) {
  .n12-media::after { background: linear-gradient(180deg, rgba(var(--vada-scrim), .5) 0%, rgba(var(--vada-scrim), .6) 45%, rgba(var(--vada-scrim), .82) 85%, var(--n12-night) 100%); }
  .n12-band.n12-media::after { background: linear-gradient(180deg, rgba(var(--vada-scrim), .7), rgba(var(--vada-scrim), .84) 70%, var(--n12-night)); }
}
.n12-hero-copy .n12-lead { text-shadow: 0 1px 2px rgba(var(--vada-scrim), .5); }
/* card spotlight: was blue + teal */
.n12-card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 176, 74, .12), rgba(45, 108, 168, .08) 45%, transparent 65%); }
.n12-ice .n12-card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 69, 124, .06), transparent 65%); }
.n12-ice .n12-card::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 69, 124, .35), transparent 65%); }
/* featured level card, form focus ring: were teal */
.n12-level.is-featured { border-color: rgba(212, 176, 74, .45); background: linear-gradient(180deg, rgba(212, 176, 74, .1), rgba(45, 108, 168, .06)); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(212, 176, 74, .2); }
/* rings and the timeline line: one gold family (were a1 / a2 / a3 = teal, blue, violet) */
.n12-stat:nth-child(2) .n12-ring-arc, .n12-stat:nth-child(3) .n12-ring-arc { stroke: var(--n12-a1); }
.n12-timeline::before, .WaGadgetUpcomingEvents.n12-timeline ul::before { background: linear-gradient(180deg, var(--n12-a1), var(--n12-a3)); }
::selection { background: var(--n12-a1); color: var(--n12-accent-ink); }

/* 3. VADA pieces -------------------------------------------------------- */
/* Logo: the PNG is only 415px wide, never show it wider than ~210px (header 40px tall = 143px) */
.n12-logo img, .n12-logo img[width][height] { max-width: 200px; }

/* Hero photos: each slide sets its own crop (--pos desktop, --pos-m phone) so no face is cut */
.n12-hero-media img, .n12-hero-media img[width][height] { object-position: var(--pos, 50% 50%); }
@media (max-width: 767px) { .n12-hero-media img, .n12-hero-media img[width][height] { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
/* THEME FIX (can't be done with tokens): in Slideshow mode the slides gadget is the hero's only gadget, so user.css's
   photo-mode fade-in (.n12-hero-gadget:only-child .n12-hero-media, fill "both") pins every slide's photo at opacity 1
   and the LAST slide's photo always shows. Slides keep their own crossfade instead. Worth fixing in wa-kit/user.css. */
.js .n12-hero > .WaLayoutTable .n12-hero-gadget:only-child .n12-slide .n12-hero-media { animation: none; }
/* Events band photo (dining-room workshop): keep the people in frame on phones */
.vada-band-events { background-position: 50% 40%; }
@media (max-width: 767px) { .vada-band-events { background-position: 45% 50%; } }

/* THEME FIXES (spacing, not tokens):
   - user.css spaces stacked columns on phones with .WaLayoutItem + .WaLayoutItem, but WA puts a separator <td> between
     items, so that selector never matches and the second column sits flush under the first. Same values, matching selector.
   - .n12-head .n12-actions gets margin-top in section 3, but .gadgetStyleBody .n12-actions { margin: 0 } (same specificity,
     later) wins, so the section head's "View all" link touches the lead. */
@media (max-width: 767px) {
  .WaLayoutSeparator + .WaLayoutItem { margin-top: var(--n12-s6); }
  .n12-head .WaLayoutSeparator + .WaLayoutItem { margin-top: var(--n12-s4); }
  .n12-hero .WaLayoutSeparator + .WaLayoutItem, .zoneFooter2 .WaLayoutSeparator + .WaLayoutItem { margin-top: 0; }
}
.n12-head .gadgetStyleBody .n12-actions { margin-top: var(--n12-s4); }

/* Long button labels may wrap on phones instead of overflowing (buttons are nowrap in the theme) */
@media (max-width: 767px) { .stylizedButton.vada-btn-wrap { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; } }

/* Compact link cards (the theme's n12-card-sm row variant): label + arrow */
.vada-links { gap: var(--n12-s3); }
.vada-links .n12-card-sm { align-items: center; gap: var(--n12-s3); color: var(--c-ink); }
.vada-links .n12-card-sm i { color: var(--c-accent); }
.vada-links .n12-card-sm:hover .n12-h6 { color: var(--c-link); }
.n12-card > .n12-actions { margin-top: auto; }
.n12-card > .n12-meta + h4 { margin-top: calc(-1 * var(--n12-s1)); }

/* Regions map ---------------------------------------------------------- */
.vada-map { margin: 0; }
.vada-map-art { position: relative; margin: 28px 0 36px; }
.vada-map-svg { display: block; width: 100%; height: auto; color: rgba(0, 69, 124, .5); overflow: visible; }
.vada-map-svg path { stroke: rgba(212, 176, 74, .45); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vada-map figcaption { margin-top: var(--n12-s2); }
.vada-pin {
  position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--n12-mist); -webkit-tap-highlight-color: transparent;
}
.vada-pin:focus-visible { outline-offset: -6px; border-radius: 50%; }
.vada-pin-dot {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--n12-a1); box-shadow: 0 0 0 6px rgba(212, 176, 74, .18), 0 0 0 1px rgba(6, 17, 31, .6) inset;
  transition: transform .3s var(--n12-ease);
}
.vada-pin-label { position: absolute; left: 50%; margin: 0; white-space: nowrap; color: var(--n12-ink); transform: translateX(-50%); transition: color .2s; pointer-events: none; }
.vada-pin.is-above .vada-pin-label { bottom: 34px; }
.vada-pin.is-below .vada-pin-label { top: 34px; }
.vada-pin.is-below-left .vada-pin-label { top: 34px; left: auto; right: 10px; transform: none; }
.vada-pin.is-on .vada-pin-dot { transform: scale(1.45); }
.vada-pin.is-on .vada-pin-label { color: var(--n12-a1); }
.vada-directors h3 { margin-bottom: var(--n12-s2); }
.vada-directors > .n12-meta { margin: var(--n12-s4) 0 0; }
.vada-region { grid-template-columns: auto minmax(0, 1fr); padding: var(--n12-s4) var(--n12-s3); border-radius: 14px; transition: background-color .2s; }
.vada-region-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--n12-a1); box-shadow: 0 0 0 4px rgba(212, 176, 74, .16); }
.vada-region h5 { transition: color .2s; }
.vada-region.is-on { background: var(--c-glass-hover); }
.vada-region.is-on h5 { color: var(--n12-a1); }

/* Member voices: equal text-only cards on the theme's marquee. NEVER pauses (see the comment in index.html). */
.vada-voices .n12-marquee-track { align-items: stretch; gap: var(--n12-s5); padding-right: var(--n12-s5); animation-duration: 160s; }
.vada-voices .n12-marquee-track > li { display: flex; align-items: stretch; width: 440px; white-space: normal; }
.vada-voices .n12-testimonial { width: 100%; justify-content: space-between; }
.vada-voices .n12-testimonial figcaption > span { gap: 2px; }
@media (max-width: 767px) { .vada-voices .n12-marquee-track > li { width: 300px; } .vada-voices .n12-marquee-track { animation-duration: 120s; } }

/* Sponsors: identical white tiles, logos contained. NEVER pauses (see the comment in index.html). */
.vada-sponsors .n12-marquee-track { gap: var(--n12-s4); padding-right: var(--n12-s4); animation-duration: 75s; }
.vada-sponsors .vada-tile { flex: none; width: 200px; height: 104px; box-sizing: border-box; padding: 14px 18px; border-radius: var(--n12-radius-sm); background: #fff; }
.vada-sponsors .vada-tile img, .vada-sponsors .vada-tile img[width][height] { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) { .vada-sponsors .vada-tile { width: 160px; height: 84px; padding: 12px 14px; } }

/* Events page */
.WaGadgetEventsStateDetails h2.pageTitle { margin: 0 0 var(--n12-s6); max-width: 22ch; }
.WaGadgetEventsStateDetails .boxBodyContentOuterContainer h3:first-child { margin-top: 0; }
.WaGadgetEventsStateDetails .n12-rows { margin-bottom: var(--n12-s5); }
.WaGadgetEventsStateDetails .n12-badge b { font-variant-numeric: tabular-nums; }
.WaGadgetEventsStateDetails .eventInfoNote { color: var(--c-mist); }
.vada-soon-badge { margin: 0; }
.vada-soon-badge::before { content: '\f017'; }
.vada-ev-contact { margin: var(--n12-s5) 0 0; }

/* Join page */
.vada-contact a { color: var(--c-ink); }
.vada-contact a:hover { color: var(--c-link); }
.n12-checks.vada-contact li { align-items: baseline; }

/* Logo legibility: at the theme's 40px height the "Virginia Association of Defense Attorneys" line is ~6px tall.
   52px tall = 186px wide, still under the 210px cap for the 415px PNG. */
.n12-mainbar .n12-logo img, .n12-mainbar .n12-logo img[width][height] { height: 52px; width: auto; }
#id_Footer .n12-logo img, .zoneFooter1 .n12-logo img, footer .n12-logo img { height: 50px; width: auto; }