@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..700&family=Instrument+Sans:ital,wght@0,400;0,600;1,400&display=swap');

/* =====================================================================
   NICASIO WILD APRICOT THEME 12
   Dark, immersive, premium-tech. Base theme: Kaleidoscope Neon v3.0.
   Paste this whole file into Website > CSS (it becomes /resources/theme/user.css).

   THE SYSTEM (SYSTEM.md has the tables):
     Type      12 treatments, defined ONCE in section 1 (the TYPE MAP). No other rule in
               this file sets font-size, font-weight, font-family or line-height.
     Sections  4 treatments: .n12-night  .n12-ice  .n12-aurora  .n12-media
     Cards     3 treatments: .n12-card (glass)  .n12-mcard (media)  .n12-row (list row)
     Buttons   1 family: buttonStyle001 primary · 002 secondary · 004 text link
     Form      1 style: WA system forms, .n12-form, the subscribe form
     Icons     Font Awesome 5 (WA ships FA 5 Pro): fas / far / fab class names

   REBRANDING: change the colour tokens below. Everything derives from them.
   ===================================================================== */

:root {
  /* — Colour tokens: the $4,500 package lives here — */
  --n12-a1: #37E2C4;                           /* accent        — primary buttons, eyebrows, icons */
  --n12-a2: #6A8BFF;                           /* accent 2      — spotlight, aurora */
  --n12-a3: #C86BFF;                           /* accent 3      — gradient end, aurora */
  --n12-accent-ink: #06231E;                   /* text on the accent button (keep ≥ 4.5:1 on --n12-a1) */
  --n12-night: #070B16;                        /* page / night sections */
  --n12-night-2: #0C1222;                      /* raised surfaces, footer */
  --n12-ink: #EEF2FF;                          /* text on night */
  --n12-mist: #A3ADC8;                         /* muted text on night */
  --n12-day: #F3F5FB;                          /* ice sections */
  --n12-day-2: #FFFFFF;                        /* cards on ice */
  --n12-day-ink: #0B1020;                      /* text on ice */
  --n12-day-mist: #5B6480;                     /* muted text on ice */
  --n12-link-ice: #2B5BD7;                     /* links on ice */

  /* — Logo in the phone bar (light-on-dark file in Files) + its width ÷ height — */
  --n12-logo-url: url('/resources/Pictures/theme-12/nicasio-lockup-white.svg');
  --n12-logo-ratio: 4.22;

  /* — Families (max two). Change the @import on line 1 to match. — */
  --n12-font-display: 'Bricolage Grotesque', 'Segoe UI', Helvetica, Arial, sans-serif;
  --n12-font-body: 'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --n12-fa: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';   /* WA loads FA 5 Pro; Free is the demo stand-in */
  --n12-fa-brands: 'Font Awesome 5 Brands';

  /* — TYPE SCALE: 7 large + 5 small. weight size/line-height family — */
  --n12-type-display: 700 clamp(46px, 6.2vw, 88px)/0.98 var(--n12-font-display);
  --n12-type-h1:      700 clamp(38px, 4.5vw, 64px)/1.02 var(--n12-font-display);
  --n12-type-h2:      700 clamp(30px, 3.4vw, 48px)/1.06 var(--n12-font-display);
  --n12-type-h3:      600 clamp(24px, 2.1vw, 30px)/1.15 var(--n12-font-display);
  --n12-type-h4:      600 22px/1.2 var(--n12-font-display);
  --n12-type-h5:      600 18px/1.3 var(--n12-font-display);
  --n12-type-h6:      600 16px/1.25 var(--n12-font-display);
  --n12-type-lead:    400 clamp(18px, 1.4vw, 20px)/1.5 var(--n12-font-body);
  --n12-type-quote:   500 clamp(21px, 1.85vw, 26px)/1.3 var(--n12-font-display);
  --n12-type-body:    400 17px/1.6 var(--n12-font-body);
  --n12-type-meta:    400 15px/1.45 var(--n12-font-body);
  --n12-type-caption: 600 13px/1.3 var(--n12-font-body);
  /* icons are not text: one size per context, FA's own weights */
  --n12-icon: 900 1em/1 var(--n12-fa);
  --n12-icon-brand: 400 1em/1 var(--n12-fa-brands);

  /* — Spacing scale — */
  --n12-s1: 4px; --n12-s2: 8px; --n12-s3: 12px; --n12-s4: 16px; --n12-s5: 24px;
  --n12-s6: 32px; --n12-s7: 48px; --n12-s8: 64px; --n12-s9: 96px;
  --n12-sec-pad: clamp(64px, 8vw, 112px);       /* section top/bottom */
  --n12-gutter: clamp(16px, 4vw, 40px);
  --n12-max: 1200px;

  /* — Shape, header, motion — */
  --n12-radius: 20px;
  --n12-radius-sm: 12px;
  --n12-bar-h: 56px;                            /* header islands (plus 14px above and below) */
  --n12-grad: linear-gradient(100deg, var(--n12-a1), var(--n12-a2) 50%, var(--n12-a3));
  --n12-line: rgba(255, 255, 255, .1);
  --n12-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Colour roles. Night is the default; .n12-ice flips them. Aurora and Media are night sections. */
:root, .n12-night, .n12-aurora, .n12-media {
  --c-bg: var(--n12-night);
  --c-bg-2: var(--n12-night-2);
  --c-ink: var(--n12-ink);
  --c-mist: var(--n12-mist);
  --c-line: var(--n12-line);
  --c-glass: rgba(255, 255, 255, .04);
  --c-glass-hover: rgba(255, 255, 255, .07);
  --c-link: var(--n12-a1);
  --c-accent: var(--n12-a1);
  --c-btn-line: rgba(255, 255, 255, .28);
  --c-shadow: none;
}
.n12-ice {
  --c-bg: var(--n12-day);
  --c-bg-2: var(--n12-day-2);
  --c-ink: var(--n12-day-ink);
  --c-mist: var(--n12-day-mist);
  --c-line: rgba(11, 16, 32, .1);
  --c-glass: var(--n12-day-2);
  --c-glass-hover: var(--n12-day-2);
  --c-link: var(--n12-link-ice);
  --c-accent: #138A75;
  --c-btn-line: rgba(11, 16, 32, .22);
  --c-shadow: 0 1px 2px rgba(11, 16, 32, .05), 0 12px 32px -12px rgba(11, 16, 32, .14);
}

/* =====================================================================
   1. TYPE MAP — the ONLY place fonts are set. Each treatment is one rule;
   its selector list is every element on the site that uses it. To restyle
   an element, move it to another list. Only colour may vary by context.
   ===================================================================== */

/* Body — 17/1.6 Instrument Sans 400. Form controls do not inherit fonts, so they are listed. */
body, p, li, td, dd, input, textarea, select, button,
.gadgetStyleBody, .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a,
.WaGadgetEventsStateDetails .eventInfoValue { font: var(--n12-type-body); letter-spacing: 0; text-transform: none; }
/* WA base themes set a family on their gadget style classes; keep ours (size/weight come from the rules here). */
.gadgetStyleNone, .gadgetStyle001, .gadgetStyle002, .gadgetStyle003, .gadgetStyle004, .gadgetStyleTheme, .gadgetSystem { font-family: var(--n12-font-body) !important; }
strong, b { font-weight: 600; }                 /* the one inline variant: bold body */
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span { font: inherit; }   /* WA wraps menu labels in a span */

/* Display — the home hero headline only */
.n12-display, .n12-hero .n12-hero-copy h1 { font: var(--n12-type-display); letter-spacing: -.035em; }

/* H1 — page title (inner-page band) */
h1, .n12-h1 { font: var(--n12-type-h1); letter-spacing: -.03em; }

/* H2 — section title; WA's own title tags in details pages render at this size too */
h2, .n12-h2,
.WaGadgetEventsStateDetails h1.pageTitle,
.WaGadgetBlogStateDetails h4.boxHeaderTitle { font: var(--n12-type-h2); letter-spacing: -.028em; }

/* H3 — sub-section, form title, stat number */
h3, .n12-h3, h3.formTitle, h3.sectionTitle { font: var(--n12-type-h3); letter-spacing: -.02em; }

/* H4 — card title, date badge number, partner name, mobile menu item */
h4, .n12-h4, .gadgetTitleH4, h4.boxHeaderTitle,
.WaGadgetRecentBlogPosts.n12-cards .title,
.n12-badge b, .n12-marquee-track li, .WaGadgetDonationGoal .collectedPercents,
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a { font: var(--n12-type-h4); letter-spacing: -.015em; }

/* H5 — list-row title, FAQ question, level radio title */
h5, .n12-h5, .n12-faq-item summary,
.WaGadgetUpcomingEvents .title, .WaGadgetRecentBlogPosts .title, .WaGadgetForumUpdates .title,
table.pastEventsList a.pastEventLink, table.membersTable .memberValue h5,
#idMembershipLevelRadioGroupContainer .labelTitle, #idMembershipLevelRadioGroupContainer .labelSubTitle,
.WaGadgetEventsStateDetails .n12-price { font: var(--n12-type-h5); letter-spacing: -.01em; }

/* H6 — the label treatment: buttons, navigation, small labels, footer headings */
h6, .n12-h6,
.stylizedButton, input[type='submit'], input[type='button'], button.stylizedButton,
.loginButton, .nextButton, .registerButton, .typeButton,
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul li > .item > a,
.WaGadgetLoginForm .loginLink,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton,
.controlPanel .controlPanelInner a, .pageViewSwitcherContainer a,
.openAuthFormContainer .wa-authenticateLoginLink { font: var(--n12-type-h6); letter-spacing: -.005em; text-transform: none; }

/* Lead — standfirst */
.n12-lead { font: var(--n12-type-lead); letter-spacing: 0; }

/* Quote — testimonials, blockquotes */
.n12-quote, .n12-quote p, blockquote, blockquote p { font: var(--n12-type-quote); letter-spacing: -.015em; }

/* Meta — dates, locations, form labels, footer links, small print */
.n12-meta, .contStyleCaption, .contStyleSmaller, label, .fieldLabel, .mandatory, .mandatoryFieldsTitle, .validationError,
.WaGadgetUpcomingEvents .date, .WaGadgetUpcomingEvents .location,
.WaGadgetRecentBlogPosts .date, .WaGadgetRecentBlogPosts .author, .WaGadgetForumUpdates .date, .WaGadgetForumUpdates .author,
.boxInfoContainer h5, .WaGadgetEventsStateList .boxInfoContainer > span, table.pastEventsList td.left,
.WaGadgetEventsStateDetails .boxInfo li, .WaGadgetEventsStateDetails .registrationInfo li, .-wa-add-event-to-calendar-dropdown,
.typeInstruction, .infoSection, .pageBackContainer a,
.WaGadgetBreadcrumbs ul, .WaGadgetCustomMenu .gadgetStyleBody ul li a,
.zoneFooter2 .WaGadgetContent p,
.loginActionRememberMe, .loginPasswordForgot, #idRememberMe, #idForgotLinkBox a,
.memberDirectorySearchArea label, .memberDirectorySearchArea .searchResult, .advSearchContainerLink,
table.membersTable td, .WaGadgetDonationGoal .donationGoalNotesContainer, .WaGadgetDonationGoal .donationLabels { font: var(--n12-type-meta); letter-spacing: 0; }

/* Caption — eyebrows, badges, table heads (uppercase) */
.n12-caption, .contStyleCaptionAlt, .n12-badge small, th, .eventInfoTitle, .WaGadgetEventsStateDetails .infoTitle { font: var(--n12-type-caption); letter-spacing: .08em; text-transform: uppercase; }

/* Icons (Font Awesome glyphs drawn by the theme; not text) */
.WaGadgetSocialProfile ul li a::before { font: var(--n12-icon-brand); font-size: 16px; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxFieldContainer::before, .n12-drawer-search::before,
.WaGadgetLoginForm .loginLink::before,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton::before,
.WaGadgetUpcomingEvents .location::before, .WaGadgetEventsStateList .eventDates::before, .WaGadgetEventsStateList .eventLocation::before,
.pageBackContainer a::before, .n12-ev-badge::before { font: var(--n12-icon); font-size: 14px; }
.n12-ic, .n12-badge > i, .n12-marquee-track li i { font-size: 20px; }
.n12-ctrl i, .stylizedButton i { font-size: .875em; }

/* =====================================================================
   2. Base
   ===================================================================== */
html { scroll-behavior: smooth; }
body.LayoutMain, #mLayout { background: var(--n12-night) !important; color: var(--n12-ink); }
body, p, li, td { color: var(--c-ink); }
p { margin: 0 0 1em; }
img { max-width: 100%; }
img[width][height] { height: auto; }
a { color: var(--c-link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-ink); }
::selection { background: var(--n12-a2); color: #fff; }
:focus-visible { outline: 2px solid var(--n12-a1); outline-offset: 3px; border-radius: 4px; }
.n12-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4, h5, h6 { color: var(--c-ink); margin: 0 0 var(--n12-s4); padding: 0 !important; text-wrap: balance; }
.n12-lead { color: var(--c-mist); max-width: 60ch; }
.n12-meta, .n12-caption { color: var(--c-mist); }
.n12-caption { color: var(--c-accent); display: block; margin: 0 0 var(--n12-s3); }
.n12-grad-text { background: var(--n12-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.n12-center { text-align: center; }
blockquote { margin: var(--n12-s6) 0; padding: 0 0 0 var(--n12-s5); border-left: 3px solid var(--c-accent); color: var(--c-ink); }
blockquote p { margin: 0; }
ul, ol { padding-left: 1.3em; }
.gadgetStyleBody ul li, .gadgetStyleBody ol li { margin: 0 0 .35em; }
hr, .WaContentDivider { border: 0; height: 1px; background: var(--c-line); margin: var(--n12-s6) 0; width: 100%; }
th { color: var(--c-mist); text-align: left; }

/* =====================================================================
   3. Layout: zones, centred 1200px layout tables, section treatments
   ===================================================================== */
.zonePlace { padding: 0; width: 100%; }
.WaPlaceHolder { max-width: 100%; }
#idWaAdminSwitcher, .zoneWAbranding { display: none; }
.cornersContainer { display: none !important; }

[class^='WaLayoutContainer'] > .WaLayoutTable,
.zoneContent > .WaPlaceHolderContent > div > [class*='WaGadget']:not([class*='WaLayout']) {
  max-width: var(--n12-max); margin: 0 auto; width: calc(100% - 2 * var(--n12-gutter)); box-sizing: border-box;
}
.WaLayoutTable { table-layout: fixed; border-collapse: collapse; }
.WaLayoutItem { vertical-align: top; }
[class*='WaGadget'] { margin: 0; }
.gadgetStyleBody { padding: 0; }
.gadgetStyleBody > :last-child { margin-bottom: 0; }

/* A section = one WA layout with "n12-sec" + ONE treatment class (Layout settings > Advanced > CSS class). */
.n12-sec { position: relative; isolation: isolate; padding: var(--n12-sec-pad) 0; color: var(--c-ink); }
/* Treatment 1 — Night */
.n12-night { background: var(--n12-night); }
/* Treatment 2 — Ice */
.n12-ice { background: var(--n12-day); }
/* Treatment 3 — Aurora: the static gradient is the fallback; theme.js draws the moving aurora canvas over it */
.n12-aurora {
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 12% 20%, rgba(55, 226, 196, .26), transparent 70%),
    radial-gradient(50% 60% at 85% 15%, rgba(106, 139, 255, .3), transparent 70%),
    radial-gradient(50% 60% at 60% 100%, rgba(200, 107, 255, .24), transparent 70%),
    var(--n12-night);
}
canvas.n12-aurora-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.n12-aurora.is-live canvas.n12-aurora-canvas { opacity: .8; }
/* Treatment 4 — Media: a full-bleed photo (layout background image) or the hero's video/slides/photo, under the night scrim */
.n12-media { overflow: hidden; background-color: var(--n12-night); background-size: cover; background-position: center; }
.n12-aurora::after, .n12-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.n12-aurora::after { background: linear-gradient(180deg, rgba(7, 11, 22, .25), rgba(7, 11, 22, .45)); }
.n12-media::after {
  background:
    linear-gradient(90deg, rgba(7, 11, 22, .9) 0%, rgba(7, 11, 22, .7) 40%, rgba(7, 11, 22, .3) 75%, rgba(7, 11, 22, .4) 100%),
    linear-gradient(180deg, rgba(7, 11, 22, .45) 0%, transparent 25%, transparent 65%, var(--n12-night) 100%),
    radial-gradient(55% 70% at 4% 100%, rgba(55, 226, 196, .2), transparent 70%),
    radial-gradient(45% 60% at 96% 0%, rgba(200, 107, 255, .18), transparent 70%);
}
.n12-aurora > .WaLayoutTable, .n12-media:not(.n12-hero) > .WaLayoutTable { position: relative; z-index: 2; }

/* Section rhythm: consecutive sections of the same treatment merge into one (no double padding) */
.n12-night + .n12-night, .n12-ice + .n12-ice { padding-top: 0; }
/* Section head: two columns (eyebrow + h2 | lead + "View all"), class n12-head */
.n12-sec.n12-head { padding-bottom: var(--n12-s7); }
.n12-head .WaLayoutItem { vertical-align: bottom; }
.n12-head h2 { margin: 0; max-width: 18ch; }
.n12-head .n12-lead { margin: 0; }
.n12-head .n12-actions { margin-top: var(--n12-s4); }
.n12-mid .WaLayoutItem { vertical-align: middle; }          /* two-column sections: centre the columns */
/* gadgets inside a section */
.n12-sec [class*='WaGadget'] + [class*='WaGadget'] { margin-top: var(--n12-s5); }
.n12-sec [class*='WaGadget'] + .n12-subhead { margin-top: var(--n12-s8); }
.n12-subhead h2, .n12-subhead h3, .n12-subhead h4 { margin-bottom: var(--n12-s2); }
.n12-subhead .n12-lead, .n12-subhead .n12-meta { margin: 0; }

/* Grids for cards */
.n12-grid { display: grid; gap: var(--n12-s5); }
.n12-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n12-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n12-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.n12-bento { display: grid; gap: var(--n12-s5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n12-span-2 { grid-column: span 2; }

/* Photo (a Content gadget with one image, class n12-photo) and the photo grid */
.n12-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--n12-radius); }
.n12-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--n12-s3); aspect-ratio: 16 / 10; }
.n12-gallery img, .n12-gallery img[width][height] { width: 100%; height: 100%; object-fit: cover; border-radius: var(--n12-radius-sm); display: block; }
.n12-gallery img:first-child { grid-column: span 2; grid-row: span 2; border-radius: var(--n12-radius); }

/* =====================================================================
   4. Buttons — ONE family. 001 primary · 002 secondary · 004 text link.
   (003/005/007 alias to primary, 006/008 to secondary, so any WA style a client picks stays in the family.)
   Calm hovers: colour change + a 3px arrow nudge. No lift, no spring, no magnet.
   ===================================================================== */
.stylizedButton, input[type='submit'], input[type='button'],
.loginButton, .nextButton, .typeButton, .registerButton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid transparent;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
  -webkit-appearance: none; appearance: none;
}
.stylizedButton .fa-arrow-right { transition: transform .25s var(--n12-ease); }
.stylizedButton:hover .fa-arrow-right, .n12-mcard:hover .fa-arrow-right, a.n12-card:hover .fa-arrow-right { transform: translateX(3px); }
/* primary */
.buttonStyle001, .buttonStyle003, .buttonStyle005, .buttonStyle007, input[type='submit'], .loginButton, .nextButton, .registerButton, button.stylizedButton {
  background: var(--n12-a1); color: var(--n12-accent-ink) !important; border-color: var(--n12-a1);
}
.buttonStyle001:hover, .buttonStyle003:hover, .buttonStyle005:hover, .buttonStyle007:hover, input[type='submit']:hover, .loginButton:hover, .nextButton:hover, .registerButton:hover, button.stylizedButton:hover {
  background: #7CF0DB; border-color: #7CF0DB; color: var(--n12-accent-ink) !important;
}
/* secondary */
.buttonStyle002, .buttonStyle006, .buttonStyle008, input[type='button'], .typeButton {
  background: transparent; color: var(--c-ink) !important; border-color: var(--c-btn-line);
}
.buttonStyle002:hover, .buttonStyle006:hover, .buttonStyle008:hover, input[type='button']:hover, .typeButton:hover {
  background: var(--c-glass-hover); border-color: var(--c-mist); color: var(--c-ink) !important;
}
/* text link */
a.buttonStyle004, .buttonStyle004 { min-height: 0; padding: 0; background: none; border: 0; color: var(--c-ink) !important; }
.buttonStyle004:hover, a.buttonStyle004:hover { color: var(--c-link) !important; }
.n12-actions, .gadgetStyleBody .n12-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n12-s3) var(--n12-s5); margin: 0; }

/* =====================================================================
   5. Header (zoneHeader1): FLOATING ISLANDS, one row, no bar behind them.
   Logo (free-standing; gets its own glass pill once the page scrolls) ·
   menu in a centred glass capsule · an action capsule (search that
   expands, social, Log in, Join us). Sticky as a whole; the zone itself is
   transparent, so the page shows between the islands.
   ===================================================================== */
.zoneHeader1 { position: sticky; top: 0; z-index: 60; background: transparent; pointer-events: none; }
.zoneHeader1 .WaLayoutTable, .zoneHeader1 .WaLayoutItem > .WaLayoutPlaceHolder > div > * { pointer-events: auto; }
.zoneHeader1 .gadgetStyleBody p { margin: 0; }
.zoneHeader1 .WaLayoutItem { vertical-align: middle; }
.zoneHeader1 .WaLayoutSeparator { width: 16px !important; }
.zoneHeader1 [class*='WaGadget'] { margin: 0 !important; float: none; }
.n12-mainbar { padding: 14px 0; }
.n12-mainbar > .WaLayoutTable { height: var(--n12-bar-h); }
/* logo and action islands take their own width; the menu column gets the rest and centres its capsule */
.n12-mainbar > .WaLayoutTable { table-layout: auto; }
.n12-mainbar .WaLayoutItem:first-child, .n12-mainbar .WaLayoutItem:last-child { width: 1% !important; white-space: nowrap; }
.n12-mainbar .WaLayoutItem:nth-child(3) { width: auto !important; }
/* the shared island surface */
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel,
.n12-mainbar .WaLayoutItem:last-child > .WaLayoutPlaceHolder > div,
.zoneHeader1.is-scrolled .n12-logo {
  background: rgba(12, 18, 34, .72); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -18px rgba(0, 0, 0, .7);
}
/* logo island */
/* the pill is always there (same padding, border, radius); only its colours switch on, so nothing moves on scroll */
.n12-logo {
  display: inline-flex; align-items: center; color: var(--n12-ink) !important; padding: 8px 18px;
  background: transparent; border: 1px solid transparent; border-radius: 999px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.zoneFooter2 .n12-logo { padding: 0; }
.n12-logo img, .n12-logo img[width][height] { display: block; height: 40px; width: auto; max-width: none; }
/* action island */
.n12-mainbar .WaLayoutItem:last-child > .WaLayoutPlaceHolder > div { display: flex; justify-content: flex-end; align-items: center; gap: var(--n12-s1); width: max-content; margin-left: auto; padding: 5px 5px 5px 8px; }
.n12-mainbar .n12-actions { display: flex; flex-wrap: nowrap; gap: var(--n12-s2); }
.n12-mainbar .n12-actions .stylizedButton { min-height: 42px; padding-top: 0; padding-bottom: 0; }
.n12-mainbar .WaGadgetSocialProfile { padding-right: var(--n12-s2); margin-right: var(--n12-s1) !important; border-right: 1px solid rgba(255, 255, 255, .12); }
.n12-mainbar .WaGadgetSocialProfile ul { gap: 0; }
.n12-mainbar .WaGadgetSocialProfile ul li a { width: 34px; height: 34px; border: 0 !important; background: none !important; color: var(--n12-mist); }
.n12-mainbar .WaGadgetSocialProfile ul li a:hover { color: var(--n12-ink); }
@media (max-width: 1320px) {
  .n12-logo img, .n12-logo img[width][height] { height: 34px; }
  .n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { padding-left: 10px; padding-right: 10px; }
  .n12-mainbar .WaGadgetSocialProfile ul li a { width: 30px; }
  .zoneHeader1 .WaLayoutSeparator { width: 10px !important; }
}

/* Horizontal menu */
.n12-mainbar .WaGadgetMenuHorizontal .menuInner { border: 0; background: none; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner { display: flex; justify-content: center; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel { display: inline-flex; justify-content: center; align-items: center; gap: 2px; margin: 0; padding: 5px; list-style: none; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li { position: relative; margin: 0; padding: 0; height: auto; float: none; display: block; background: none; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item { padding: 0; margin: 0; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
  display: block; padding: 10px 12px; border-radius: 999px; white-space: nowrap; color: var(--n12-mist);
  text-shadow: none; background: none; height: auto; transition: color .2s, background-color .2s;
}
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span { padding: 0; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:hover,
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover > .item > a,
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a { color: var(--n12-ink); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover > .item > a { background: rgba(255, 255, 255, .07); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a { background: rgba(255, 255, 255, .1); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a > span { position: relative; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a > span::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--n12-a1); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after { display: none; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul {
  position: absolute; left: 0; top: calc(100% + 14px); min-width: 240px; z-index: 70; margin: 0; padding: var(--n12-s2); list-style: none;
  background: rgba(12, 18, 34, .97); border: 1px solid var(--n12-line); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
}
/* invisible hover bridge over the 8px gap, so the pointer never leaves the menu on the way down */
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul li { position: relative; margin: 0; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul li > .item { padding: 0; margin: 0; }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul li > .item > a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--n12-mist); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul li > .item > a:hover, .n12-mainbar .WaGadgetMenuHorizontal .menuInner ul ul li.sel > .item > a { color: var(--n12-ink); background: rgba(255, 255, 255, .06); }
.n12-mainbar .WaGadgetMenuHorizontal .menuInner li.dir:hover > .item > ul,
.n12-mainbar .WaGadgetMenuHorizontal .menuInner li.dir:focus-within > .item > ul { display: block; }

/* Log in (WA Login form gadget): always visible in the utility bar; the form drops down */
.WaGadgetLoginForm .loginContainerWrapper { position: relative; }
.WaGadgetLoginForm .loginLink { display: inline-flex; align-items: center; gap: var(--n12-s2); padding: 0 14px; min-height: 42px; border-radius: 999px; color: var(--n12-ink); }
.zoneHeader1 .WaGadgetLoginForm .loginLink:hover { background: rgba(255, 255, 255, .07); }
.WaGadgetLoginForm .loginLink::before { content: '\f007'; color: var(--n12-a1); }
.WaGadgetLoginForm .loginLink:hover { color: var(--n12-a1); }
.zoneHeader1 .WaGadgetLoginForm .loginContainer {
  position: absolute; right: 0; top: calc(100% + 16px); width: 320px; z-index: 80; box-sizing: border-box;
  background: rgba(12, 18, 34, .98); border: 1px solid var(--n12-line); border-radius: 16px; padding: var(--n12-s5); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
}
.zoneHeader1 .WaGadgetLoginForm .loginContainerShadowBox::before, .zoneHeader1 .WaGadgetLoginForm .loginContainerShadowBox::after { display: none; }
.zoneHeader1 .WaGadgetLoginForm .loginContainerForm form > div { display: block; }
.zoneHeader1 .WaGadgetLoginForm .loginUserName, .zoneHeader1 .WaGadgetLoginForm .loginPassword { margin: 0 0 var(--n12-s3); }
.zoneHeader1 .WaGadgetLoginForm .loginAction { margin: var(--n12-s1) 0 var(--n12-s3); }
.zoneHeader1 .WaGadgetLoginForm .loginAction input.loginButton { width: 100%; }
.zoneHeader1 .WaGadgetLoginForm .loginActionRememberMe, .zoneHeader1 .WaGadgetLoginForm .loginPasswordForgot { display: inline-block; color: var(--n12-mist); }
.zoneHeader1 .WaGadgetLoginForm .loginPasswordForgot { float: right; }
.zoneHeader1 .WaGadgetLoginForm .loginContainerWrapper.authenticated .loginContainer { position: static; width: auto; background: none; border: 0; padding: 0; box-shadow: none; display: block; }

/* Site search: a 42px round icon at the start of the action island; on focus the field opens rightwards across the island */
.zoneHeader1 .WaGadgetSiteSearch { position: relative; width: 42px; height: 42px; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxOuter, .zoneHeader1 .WaGadgetSiteSearch .searchBox, .zoneHeader1 .WaGadgetSiteSearch .generalSearchBox { margin: 0; padding: 0; display: block; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxFieldContainer { position: absolute; left: 0; top: 0; margin: 0; padding: 0; display: block; z-index: 2; }
.n12-drawer-search { position: relative; display: block; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxFieldContainer::before, .n12-drawer-search::before { content: '\f002'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--n12-mist); pointer-events: none; z-index: 1; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxFieldContainer::before { left: 15px; color: var(--n12-ink); }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxField {
  width: 42px; min-height: 42px; height: 42px; padding: 0 0 0 42px !important; border-radius: 999px !important; cursor: pointer;
  background: transparent; border-color: transparent !important; color: var(--n12-ink); transition: width .3s var(--n12-ease), background-color .2s;
}
.zoneHeader1 .WaGadgetSiteSearch .searchBoxField::placeholder { color: transparent; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxField:hover { background: rgba(255, 255, 255, .07); }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxField:focus { width: 260px; padding-right: 16px !important; cursor: text; background: var(--n12-night-2); border-color: rgba(255, 255, 255, .18) !important; }
.zoneHeader1 .WaGadgetSiteSearch .searchBoxField:focus::placeholder { color: var(--n12-mist); }
.zoneHeader1 .WaGadgetSiteSearch .autoSuggestionBox { margin-top: var(--n12-s2); background: var(--n12-night-2); border: 1px solid var(--n12-line); border-radius: 12px; min-width: 220px; }

/* =====================================================================
   6. Mobile panel (WA's own gadget) — a fixed bar + full-width drawers below 1200px.
   A floating pill like the desktop islands; theme.js adds Join, search and social icons to the menu drawer.
   ===================================================================== */
.mobilePanelContainer { display: none; }
@media (max-width: 1199px) {
  .zoneHeader1 { display: none; }
  body.LayoutMain { padding-top: 68px; }
  .mobilePanelContainer { display: block; position: fixed; top: 8px; left: 8px; right: 8px; z-index: 90; }
  .WaGadgetMobilePanel { display: block; margin: 0; }
  .WaGadgetMobilePanel .mobilePanel {
    position: relative; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px;
    background: rgba(12, 18, 34, .78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  }
  .WaGadgetMobilePanel .mobilePanel::before {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
    width: calc(28px * var(--n12-logo-ratio)); max-width: 42%; height: 28px; background: var(--n12-logo-url) center / contain no-repeat;
  }
  .WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
    position: static; display: inline-flex; align-items: center; gap: var(--n12-s2); width: auto; height: 40px; padding: 0 var(--n12-s3);
    text-indent: 0; border-radius: 999px; color: var(--n12-ink); background: transparent; cursor: pointer; float: none; order: 0;
  }
  .WaGadgetMobilePanel .mobilePanel .buttonMenu::before { content: '\f0c9'; }
  .WaGadgetMobilePanel .mobilePanel .buttonMenu.active::before { content: '\f00d'; }
  .WaGadgetMobilePanel .mobilePanel .buttonLogin { order: 2; }
  .WaGadgetMobilePanel .mobilePanel .buttonLogin::before { content: '\f007'; color: var(--n12-a1); }
  .WaGadgetMobilePanel .mobilePanel .buttonAdmin { order: 1; }
  .WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active, .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover { background: rgba(255, 255, 255, .08); }
  .WaGadgetMobilePanel .mobilePanel .menuInner, .WaGadgetMobilePanel .mobilePanel .loginInner {
    position: fixed; left: 8px; right: 8px; top: 68px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; box-sizing: border-box;
    width: auto; max-width: none; margin: 0; padding: var(--n12-s3) var(--n12-s4) var(--n12-s6); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--n12-radius); background: var(--n12-night-2); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
  }
  .WaGadgetMobilePanel .mobilePanel .menuInner ul { list-style: none; margin: 0; padding: 0; background: none; border: 0; }
  .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li { border: 0; }
  .WaGadgetMobilePanel .mobilePanel .menuInner .item { padding: 0; }
  .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a { display: block; padding: 12px; border-radius: 12px; color: var(--n12-ink); border: 0; }
  .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a { display: block; padding: 8px 12px 8px 24px; margin-left: 14px; border: 0; border-left: 2px solid var(--n12-line); color: var(--n12-mist); }
  .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a, .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel > .item > a { color: var(--n12-a1); }
  .WaGadgetMobilePanel .mobilePanel .menuInner a:hover { background: rgba(255, 255, 255, .06); color: var(--n12-ink); }
  .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm { width: auto; max-width: 420px; margin: 0 auto; padding: var(--n12-s5) 0; text-align: left; }
  .WaGadgetMobilePanel .mobilePanel .loginInner .generalLoginBox { width: auto; }
  .WaGadgetMobilePanel .mobilePanel .loginInner .generalLoginBox > div { margin-bottom: var(--n12-s3); }
  .WaGadgetMobilePanel .mobilePanel .loginInner .loginAction input.loginButton { width: 100%; }
  .WaGadgetMobilePanel .mobilePanel .loginInner a, .WaGadgetMobilePanel .mobilePanel .loginInner label { color: var(--n12-mist); }
  /* drawer extras added by theme.js: actions on top, search, social icons at the bottom */
  .n12-drawer-top { display: grid; gap: var(--n12-s3); padding: var(--n12-s2) 0 var(--n12-s4); margin-bottom: var(--n12-s2); border-bottom: 1px solid var(--n12-line); }
  .n12-drawer-top .n12-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .n12-drawer-top .n12-actions .stylizedButton { width: 100%; }
  .n12-drawer-search .searchBoxField { padding-left: 38px !important; border-radius: 999px !important; }
  .n12-drawer-social { padding-top: var(--n12-s4); margin-top: var(--n12-s3); border-top: 1px solid var(--n12-line); }
}

/* =====================================================================
   7. Home hero — ONE copy layout, three media modes (INSTALL.md 8a):
      Video (default) · Slideshow · Full photo. Layout class "n12-hero n12-media".
   The media layer lives in a gadget but is positioned against the whole hero, so WA's
   position:relative / overflow:hidden on cells and gadgets are switched off here.
   ===================================================================== */
.zoneHeader2 { background: var(--n12-night); }
.n12-hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: min(880px, calc(100vh - var(--n12-bar-h) - 28px));
  min-height: min(880px, calc(100svh - var(--n12-bar-h) - 28px));
}
.n12-hero > .WaLayoutTable { margin-top: 120px; margin-bottom: clamp(48px, 8vh, 88px); }
.n12-hero > .WaLayoutTable, .n12-hero .WaLayoutItem, .n12-hero .WaLayoutPlaceHolder, .n12-hero .WaLayoutPlaceHolder > div,
.n12-hero [class*='WaGadget'], .n12-hero .gadgetStyleBody, .n12-slides, .n12-slide { position: static; overflow: visible; z-index: auto; }
.n12-hero [class*='WaGadget'] + [class*='WaGadget'] { margin-top: 0; }
.n12-hero .n12-hero-copy, .n12-hero .n12-slides-nav { position: relative; z-index: 2; }
/* the copy block (hero copy gadget, every slide, every band) */
.n12-hero-copy { position: relative; z-index: 2; max-width: 780px; }
.n12-hero-copy .n12-caption { color: var(--n12-a1); margin-bottom: var(--n12-s4); }
.n12-hero-copy h1, .n12-hero-copy h2 { margin: 0 0 var(--n12-s5); color: #fff; max-width: 14ch; }
.n12-band .n12-hero-copy h1 { max-width: 18ch; }
.n12-hero-copy .n12-lead { color: #fff; max-width: 52ch; margin: 0; text-shadow: 0 1px 2px rgba(7, 11, 22, .4); }
.n12-hero-copy .n12-actions { margin-top: var(--n12-s6); }
/* entrance: one orchestrated rise */
.js .n12-hero .n12-hero-copy > .gadgetStyleBody > *, .js .n12-hero .n12-slide .n12-hero-copy > * { animation: n12-rise .9s var(--n12-ease) both; }
.js .n12-hero .n12-hero-copy h1, .js .n12-hero .n12-hero-copy h2 { animation-delay: .1s; }
.js .n12-hero .n12-hero-copy .n12-lead { animation-delay: .22s; }
.js .n12-hero .n12-hero-copy .n12-actions { animation-delay: .34s; }
@keyframes n12-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* media layer (video, photo, every slide's photo) */
.n12-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--n12-night); }
.n12-hero-media img, .n12-hero-media img[width][height], .n12-hero-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.n12-hero-media-video video { object-position: 56% 40%; }
.n12-hero-media { container-type: size; }   /* Vimeo background iframe, sized like object-fit: cover */
.n12-hero-media iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
.js .n12-hv-video .n12-hero-media, .js .n12-hv-photo .n12-hero-media, .js .n12-hero > .WaLayoutTable .n12-hero-gadget:only-child .n12-hero-media { animation: n12-media-in 1.4s ease both; }
@keyframes n12-media-in { from { opacity: 0; } to { opacity: 1; } }
.js .n12-hero-media-photo img { animation: n12-kenburns 30s ease-in-out infinite alternate; will-change: transform; }
@keyframes n12-kenburns { from { transform: scale(1.04); } to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); } }
.n12-hero.is-off .n12-hero-media-photo img { animation-play-state: paused; }

/* media controls: video pause, slideshow arrows/pause (one round control style) */
.n12-ctrl {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(9, 13, 27, .6); color: var(--n12-ink);
  transition: background-color .2s, border-color .2s, color .2s;
}
.n12-ctrl:hover { background: rgba(9, 13, 27, .85); border-color: rgba(255, 255, 255, .4); color: var(--n12-a1); }
.n12-ctrl i { grid-area: 1 / 1; }
.n12-ctrl .fa-play, .n12-ctrl.is-paused .fa-pause { display: none; }
.n12-ctrl.is-paused .fa-play { display: block; }
.n12-hero-play { position: absolute; z-index: 3; right: max(var(--n12-gutter), calc((100% - var(--n12-max)) / 2)); bottom: clamp(48px, 8vh, 88px); display: none; }
.n12-hero-play.is-wired { display: inline-grid; }

/* Slideshow: slides stack in one grid cell, so every slide's copy sits exactly where the hero copy sits */
.n12-slides { display: grid; }
.n12-slide { grid-area: 1 / 1; align-self: end; }
.n12-slide .n12-hero-media { opacity: 0; transition: opacity 1.1s ease; }
.n12-slide.is-current .n12-hero-media { opacity: 1; }
.n12-slide.is-prev .n12-hero-media { opacity: 1; z-index: -1; transition: none; }
.n12-slide .n12-hero-media img { animation: none; transform: scale(1.04); }
.n12-slide.is-current .n12-hero-media img { animation: n12-slide-zoom 9s ease-out both; }
.n12-slide .n12-hero-media { will-change: opacity; }
@keyframes n12-slide-zoom { from { transform: scale(1.1); } to { transform: scale(1.03); } }
.n12-slide .n12-hero-copy { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s ease, transform .5s var(--n12-ease), visibility 0s linear .5s; }
.n12-slide.is-current .n12-hero-copy { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease .3s, transform .7s var(--n12-ease) .3s, visibility 0s; }
.n12-slides-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--n12-s3); margin-top: var(--n12-s6); }
.n12-dots { display: inline-flex; align-items: center; gap: var(--n12-s2); padding: 0 var(--n12-s1); }
.n12-dots button { width: 10px; height: 10px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .3s var(--n12-ease), background-color .3s; }
.n12-dots button:hover { background: rgba(255, 255, 255, .7); }
.n12-dots button[aria-current='true'] { width: 28px; background: var(--n12-a1); }
.n12-slides-nav [data-n12-pause] { margin-left: var(--n12-s2); }

/* Inner-page band: the same copy block, H1 size, over Media (photo) or Aurora */
.n12-band { position: relative; isolation: isolate; }
.n12-band > .WaLayoutTable { margin-top: clamp(64px, 8vw, 112px); margin-bottom: clamp(48px, 6vw, 80px); }
.n12-band .n12-hero-copy .n12-lead { max-width: 56ch; }
.n12-band.n12-media::after { background: linear-gradient(90deg, rgba(7, 11, 22, .92), rgba(7, 11, 22, .75) 55%, rgba(7, 11, 22, .5)), linear-gradient(180deg, transparent 55%, var(--n12-night)); }

/* =====================================================================
   8. CARDS — three treatments.
   ===================================================================== */
/* Card 1 — Glass card (+ cursor spotlight). WA's own boxes (event/blog lists, login, event info) share the surface. */
.n12-card, ul.boxesList .boxOuterContainer.boxBaseView, .WaGadgetRecentBlogPosts.n12-cards li,
.WaGadgetEventsStateDetails .boxBodyInfoOuterContainer, .WaGadgetLoginForm.n12-login-card, .infoOuterContainer .infoContainer {
  position: relative; overflow: hidden; box-sizing: border-box; padding: var(--n12-s6);
  border-radius: var(--n12-radius); background: var(--c-glass); border: 1px solid var(--c-line); box-shadow: var(--c-shadow);
  color: var(--c-ink); transition: background-color .3s, border-color .3s;
}
.n12-card { display: flex; flex-direction: column; gap: var(--n12-s3); }
.n12-card > * { margin: 0; }
.n12-card > p { color: var(--c-mist); }
.n12-card > .stylizedButton, .n12-card > .n12-avatars { margin-top: auto; align-self: flex-start; }
.n12-card > .n12-ic + h4 { margin-top: var(--n12-s2); }
a.n12-card { text-decoration: none; }
a.n12-card:hover, ul.boxesList .boxOuterContainer.boxBaseView:hover, .WaGadgetRecentBlogPosts.n12-cards li:hover { border-color: rgba(255, 255, 255, .22); }
.n12-ice a.n12-card:hover, .n12-ice .WaGadgetRecentBlogPosts.n12-cards li:hover { border-color: rgba(11, 16, 32, .25); }
.n12-card::before, .n12-card::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s; border-radius: inherit; }
.n12-card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(106, 139, 255, .2), rgba(55, 226, 196, .05) 45%, transparent 65%); }
.n12-card::after { padding: 1px; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.n12-card > * { position: relative; z-index: 1; }
.n12-card:hover::before, .n12-card:hover::after { opacity: 1; }
.n12-night .n12-card:hover, .n12-aurora .n12-card:hover { background: var(--c-glass-hover); }
.n12-ice .n12-card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(106, 139, 255, .1), transparent 65%); }
.n12-ice .n12-card::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 91, 215, .4), transparent 65%); }
.n12-aurora .n12-card { background: rgba(9, 13, 27, .62); border-color: rgba(255, 255, 255, .14); }
/* Recent blog posts with class n12-cards: a grid of glass cards (date, title, author) */
.WaGadgetRecentBlogPosts.n12-cards ul { display: grid; gap: var(--n12-s5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.WaGadgetRecentBlogPosts.n12-cards li { display: flex; flex-direction: column; gap: var(--n12-s3); margin: 0; min-height: 200px; }
.WaGadgetRecentBlogPosts.n12-cards .date { order: -1; }
.WaGadgetRecentBlogPosts.n12-cards .title a { color: var(--c-ink); }
.WaGadgetRecentBlogPosts.n12-cards .title a::after { content: ''; position: absolute; inset: 0; }   /* the whole card is the link */
.WaGadgetRecentBlogPosts.n12-cards .author { margin-top: auto; padding-top: var(--n12-s3); border-top: 1px solid var(--c-line); }
.WaGadgetRecentBlogPosts.n12-cards .author a { color: var(--c-mist); }
/* card parts: icon tile, small card, dashed card */
.n12-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--c-accent); background: rgba(55, 226, 196, .1); border: 1px solid rgba(55, 226, 196, .2); }
.n12-card-sm { flex-direction: row; justify-content: space-between; align-items: baseline; padding: var(--n12-s4) var(--n12-s5); border-radius: 14px; }
.n12-card-dashed { border-style: dashed; }

/* Card 2 — Media card: photo on top, same surface and type as the glass card */
.n12-mcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--n12-radius); background: var(--c-glass); border: 1px solid var(--c-line); box-shadow: var(--c-shadow); color: var(--c-ink); text-decoration: none; transition: border-color .3s; }
a.n12-mcard:hover { color: var(--c-ink); border-color: rgba(255, 255, 255, .22); }
.n12-ice a.n12-mcard:hover { border-color: rgba(11, 16, 32, .25); }
.n12-mcard-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.n12-mcard-img img, .n12-mcard-img img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .8s var(--n12-ease); }
a.n12-mcard:hover .n12-mcard-img img { transform: scale(1.04); }
.n12-mcard-body { flex: 1; display: flex; flex-direction: column; gap: var(--n12-s2); padding: var(--n12-s5) var(--n12-s6) var(--n12-s6); }
.n12-mcard-body > * { margin: 0; }
.n12-mcard-body > p { color: var(--c-mist); }
.n12-mcard-body > .stylizedButton { margin-top: auto; padding-top: var(--n12-s3); align-self: flex-start; }

/* Card 3 — List row: badge | title + meta | aside, hairline between rows. WA's list gadgets share it. */
.n12-rows, .WaGadgetUpcomingEvents ul, .WaGadgetRecentBlogPosts ul, .WaGadgetForumUpdates ul { list-style: none; margin: 0; padding: 0; }
.n12-row, .WaGadgetUpcomingEvents li, .WaGadgetRecentBlogPosts:not(.n12-cards) li, .WaGadgetForumUpdates li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--n12-s5); row-gap: 2px;
  margin: 0; padding: var(--n12-s5) 0; border: 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink);
}
.n12-row:last-child, .WaGadgetUpcomingEvents li:last-child, .WaGadgetRecentBlogPosts li:last-child, .WaGadgetForumUpdates li:last-child { border-bottom: 0; }
.n12-row-main > * { margin: 0; }
.n12-row-main h5 { margin-bottom: 2px; }
.n12-row-aside { justify-self: end; }
/* the badge: date (day + month), year, number or a file icon */
.n12-badge, .n12-tl-date {
  display: grid; place-content: center; justify-items: center; gap: 2px; width: 64px; height: 64px; box-sizing: border-box; border-radius: 16px; position: relative; z-index: 1;
  background: var(--c-bg-2); border: 1px solid var(--c-line); box-shadow: var(--c-shadow); color: var(--c-ink); text-align: center;
}
.n12-badge small { color: var(--c-link); }
.n12-badge > i { color: var(--c-accent); }
/* WA list gadgets as rows (no badge): title + date left, location/author right */
.WaGadgetUpcomingEvents li, .WaGadgetRecentBlogPosts:not(.n12-cards) li, .WaGadgetForumUpdates li { grid-template-columns: minmax(0, 1fr) auto; }
.WaGadgetUpcomingEvents li > .title, .WaGadgetUpcomingEvents li > .date,
.WaGadgetRecentBlogPosts li > .title, .WaGadgetRecentBlogPosts li > .date, .WaGadgetForumUpdates li > .title, .WaGadgetForumUpdates li > .date { grid-column: 1; }
.WaGadgetUpcomingEvents li > .location, .WaGadgetRecentBlogPosts:not(.n12-cards) li > .author, .WaGadgetForumUpdates li > .author { grid-column: 2; grid-row: 1 / span 2; color: var(--c-mist); }
.WaGadgetUpcomingEvents .title a, .WaGadgetRecentBlogPosts .title a, .WaGadgetForumUpdates .title a { color: var(--c-ink); }
.WaGadgetUpcomingEvents .title a:hover, .WaGadgetRecentBlogPosts .title a:hover, .WaGadgetForumUpdates .title a:hover { color: var(--c-link); }
.WaGadgetUpcomingEvents .date, .WaGadgetRecentBlogPosts .date, .WaGadgetForumUpdates .date, .WaGadgetRecentBlogPosts .author a, .WaGadgetForumUpdates .author a { color: var(--c-mist); }
.WaGadgetUpcomingEvents .location { display: flex; align-items: center; gap: var(--n12-s2); }
.WaGadgetUpcomingEvents .location::before { content: '\f3c5'; color: var(--c-accent); }
.WaGadgetUpcomingEvents .event-time-zone { display: none; }
/* Timeline = rows + a badge column + a line that draws in (class n12-timeline on the list or the WA gadget) */
.WaGadgetUpcomingEvents.n12-timeline li { grid-template-columns: auto minmax(0, 1fr) auto; }
.WaGadgetUpcomingEvents.n12-timeline .n12-tl-date { grid-column: 1; grid-row: 1 / span 2; }
.WaGadgetUpcomingEvents.n12-timeline li > .title, .WaGadgetUpcomingEvents.n12-timeline li > .date { grid-column: 2; }
.WaGadgetUpcomingEvents.n12-timeline li > .location { grid-column: 3; }
.n12-timeline, .WaGadgetUpcomingEvents.n12-timeline ul { position: relative; }
.n12-timeline::before, .WaGadgetUpcomingEvents.n12-timeline ul::before {
  content: ''; position: absolute; left: 31px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px; z-index: 0;
  background: linear-gradient(180deg, var(--n12-a1), var(--n12-a2), var(--n12-a3)); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--n12-ease);
}
.WaGadgetUpcomingEvents.n12-timeline::before { display: none; }
.n12-timeline.is-in::before, .WaGadgetUpcomingEvents.n12-timeline.is-in ul::before { transform: scaleY(1); }
.n12-timeline > li, .WaGadgetUpcomingEvents.n12-timeline li { opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--n12-ease), transform .6s var(--n12-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.n12-timeline.is-in > li, .WaGadgetUpcomingEvents.n12-timeline.is-in li { opacity: 1; transform: none; }
/* FAQ rows (native details) */
.n12-faq-item { display: block; }
.n12-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--n12-s5); color: var(--c-ink); }
.n12-faq-item summary::-webkit-details-marker { display: none; }
.n12-faq-item summary:hover { color: var(--c-link); }
.n12-faq-item summary i { color: var(--c-accent); transition: transform .3s var(--n12-ease); }
.n12-faq-item[open] summary i { transform: rotate(45deg); }
.n12-faq-item p { color: var(--c-mist); margin: var(--n12-s3) 0 0; max-width: 68ch; }
.n12-faq { max-width: 860px; }

/* =====================================================================
   9. Components made from the cards
   ===================================================================== */
/* Stat rings (glass cards) */
.n12-stat { align-items: center; text-align: center; gap: var(--n12-s1); }
.n12-ring-wrap { position: relative; width: 128px; height: 128px; margin-bottom: var(--n12-s3); }
.n12-ring { width: 128px; height: 128px; transform: rotate(-90deg); display: block; }
.n12-ring-track { fill: none; stroke: var(--c-line); stroke-width: 8; }
.n12-ring-arc { fill: none; stroke: var(--n12-a1); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--n12-ease); }
.n12-stat.is-in .n12-ring-arc, .no-js .n12-ring-arc { stroke-dashoffset: var(--off, 20); }
.n12-stat:nth-child(2) .n12-ring-arc { stroke: var(--n12-a2); }
.n12-stat:nth-child(3) .n12-ring-arc { stroke: var(--n12-a3); }
.n12-stat-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.n12-stat .n12-h6 { color: var(--c-ink); }
/* Avatars row (bento) */
.n12-avatars { display: flex; padding-top: var(--n12-s3); }
.n12-avatars img, .n12-avatars img[width][height] { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-bg-2); margin-right: -10px; }
/* Membership level */
.n12-level.is-featured { border-color: rgba(55, 226, 196, .45); background: linear-gradient(180deg, rgba(55, 226, 196, .1), rgba(106, 139, 255, .05)); }
.n12-card.n12-level { padding-top: 64px; }
.n12-flag { position: absolute; top: var(--n12-s5); left: var(--n12-s6); margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--n12-a1); color: var(--n12-accent-ink); }
.n12-level > .n12-meta { min-height: 2.9em; }
.n12-price { display: flex; align-items: baseline; gap: var(--n12-s2); }
.n12-price .n12-h2 { color: var(--c-ink); }
.n12-checks { list-style: none; margin: var(--n12-s2) 0 var(--n12-s4); padding: 0; }
.n12-checks li { display: flex; gap: var(--n12-s3); align-items: baseline; padding: var(--n12-s2) 0; border-bottom: 1px solid var(--c-line); margin: 0; }
.n12-checks li:last-child { border-bottom: 0; }
.n12-checks i { color: var(--c-accent); }
.n12-level > .stylizedButton { width: 100%; align-self: stretch; }
/* Testimonial */
.n12-testimonial { margin: 0; gap: var(--n12-s5); }
.n12-testimonial blockquote { margin: 0; padding: 0; border: 0; }
.n12-testimonial figcaption { display: flex; align-items: center; gap: var(--n12-s4); }
.n12-testimonial figcaption img, .n12-testimonial figcaption img[width][height] { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.n12-testimonial figcaption > span { display: flex; flex-direction: column; }
/* Partner marquee — NEVER PAUSES. Not on hover, not on focus, not under prefers-reduced-motion.
   House rule; please don't "fix" it. */
.n12-marquee { display: flex; overflow: hidden; width: 100%; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.n12-marquee-track { display: flex; flex: none; gap: var(--n12-s8); padding: 0 var(--n12-s6) 0 0; margin: 0; list-style: none; align-items: center; animation: n12-marquee 42s linear infinite; will-change: transform; }
.n12-marquee-track li { display: inline-flex; align-items: center; gap: var(--n12-s3); margin: 0; white-space: nowrap; color: var(--c-mist); }
.n12-marquee-track li i { color: var(--c-accent); }
.n12-marquee-track li img { height: 36px; width: auto; }
@keyframes n12-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.n12-sec .WaGadgetContent + .WaGadgetCustomHTML .n12-marquee { margin-top: var(--n12-s3); }
/* "Launched by Nicasio LLC" (Nicasio's demo only; footer strip) */
.n12-launch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--n12-s5); }
.n12-launch-mark, .n12-launch-mark[width][height] { width: 57px; height: 56px; }
.n12-launch-copy p { margin: 0; color: var(--c-ink); max-width: 64ch; }
.n12-launch-copy .n12-caption { margin-bottom: var(--n12-s1); }
.n12-launch-copy a { color: var(--n12-a1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(55, 226, 196, .45); }
/* Typography (Demo) page helpers */
.n12-type-row { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
.n12-type-k { display: flex; flex-direction: column; gap: var(--n12-s1); }
.n12-type-k .n12-caption { margin: 0; }
.n12-type-s > * { margin: 0; }
.n12-swatch { display: grid; gap: var(--n12-s1); }
.n12-swatch-chip { height: 72px; border-radius: var(--n12-radius-sm); border: 1px solid var(--c-line); margin-bottom: var(--n12-s2); }
.n12-spacing { display: grid; gap: var(--n12-s3); }
.n12-spacing > div { display: flex; align-items: center; gap: var(--n12-s4); }
.n12-spacing-bar { height: 12px; border-radius: 4px; background: var(--n12-grad); flex: none; }

/* =====================================================================
   10. Form — one style: WA system forms, .n12-form, subscribe, login, search
   ===================================================================== */
input[type='text'], input[type='email'], input[type='password'], input[type='tel'], input[type='number'], input[type='search'], input[type='url'], input[type='date'],
textarea, select, .typeText, .typeTextArea, .typePassword, input[class$='TextBoxControl'], .searchBoxField {
  width: 100%; min-height: 48px; padding: 10px 14px; box-sizing: border-box; margin: 0;
  background: rgba(255, 255, 255, .05); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--n12-radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.n12-ice input[type='text'], .n12-ice input[type='email'], .n12-ice input[type='password'], .n12-ice textarea, .n12-ice select, .n12-ice .typeText { background: #fff; border-color: rgba(11, 16, 32, .18); }
::placeholder { color: var(--c-mist); opacity: .8; }
textarea, .typeTextArea { min-height: 132px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--n12-a1); box-shadow: 0 0 0 3px rgba(55, 226, 196, .18); }
select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  /* a select cannot hold an icon element, so its chevron is a background image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23A3ADC8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
select option { color: #0B1020; }
input[type='checkbox'], input[type='radio'] { width: 18px; height: 18px; min-height: 0; accent-color: var(--n12-a1); margin: 0 8px 0 0; vertical-align: middle; }
label, .fieldLabel, .mandatory { color: var(--c-mist); }
.n12-form { display: grid; gap: var(--n12-s4); }
.n12-form label { display: grid; gap: var(--n12-s2); }
.n12-form label.n12-check { display: inline-flex; align-items: center; gap: 0; color: var(--c-ink); }
.n12-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--n12-s4); }
.n12-form .n12-actions { margin-top: var(--n12-s2); }
.n12-subscribe { grid-template-columns: minmax(0, 1fr) auto; max-width: 560px; }
.n12-subscribe + .n12-actions { margin-top: var(--n12-s5); }
.mandatorySymbol { color: var(--n12-a3); }
.validationError { display: block; color: #FF8AA8; margin-top: 6px; }

/* =====================================================================
   11. Wild Apricot system gadgets
   ===================================================================== */
/* Membership application */
.fieldContainer { margin: 0 0 var(--n12-s4); }
.fieldSubContainer table { width: 100%; }
.fieldSubContainer table td.left { width: 200px; padding: 12px 16px 12px 0; vertical-align: top; }
.fieldSubContainer table td.right { padding: 4px 0; }
h3.formTitle, h3.sectionTitle { color: var(--c-ink); margin: 0 0 var(--n12-s2); }
.mandatoryFieldsTitle { color: var(--c-mist); margin-bottom: var(--n12-s5); }
.generalFormOuterContainer, .formOuterContainer, .infoOuterContainer, .sectionOuterContainer, .generalFieldsOuterContainer { background: none; }
.navigationOuterContainer { margin-top: var(--n12-s5); }
.navigationOuterContainer .navigationContainer .inner { display: flex; justify-content: space-between; align-items: center; gap: var(--n12-s3); }
.navigationOuterContainer .navigationContainer .left, .navigationOuterContainer .navigationContainer .right { display: flex; gap: var(--n12-s3); }
.navigationOuterContainer .navigationContainer .right { margin-left: auto; }
.navigationOuterContainer .clearEndContainer { display: none; }
.infoSection .infoText .textLine { display: block; }
#idMembershipLevelRadioGroupContainer .groupBodyVertical { display: grid; gap: var(--n12-s3); }
#idMembershipLevelRadioGroupContainer .fieldItem {
  display: grid; grid-template-columns: auto 1fr; gap: var(--n12-s3); align-items: start; padding: var(--n12-s4) var(--n12-s5);
  border-radius: var(--n12-radius-sm); border: 1px solid var(--c-line); background: var(--c-glass); transition: border-color .2s, background-color .2s;
}
#idMembershipLevelRadioGroupContainer .fieldItem:hover { border-color: var(--c-mist); }
#idMembershipLevelRadioGroupContainer .fieldItem:has(input:checked) { border-color: var(--n12-a1); background: rgba(55, 226, 196, .08); }
#idMembershipLevelRadioGroupContainer .fieldItem .typeRadioContainer input { margin-top: 3px; }
#idMembershipLevelRadioGroupContainer .fieldItem .label label { cursor: pointer; display: block; color: var(--c-ink); }
#idMembershipLevelRadioGroupContainer .labelTitle { color: var(--c-ink); }
#idMembershipLevelRadioGroupContainer .labelSubTitle { color: var(--c-accent); margin-left: 4px; }
#idMembershipLevelRadioGroupContainer .typeInstruction { display: block; color: var(--c-mist); }
/* Login page / login card */
.WaGadgetLoginForm.n12-login-card { max-width: 460px; }
.loginPageTable { width: 100%; }
#idLoginBox, #idPasswordBox { margin-bottom: var(--n12-s4); }
#idLoginBox .mandatory, #idPasswordBox .mandatory, #idLoginBox .mandatorySymbol, #idPasswordBox .mandatorySymbol { display: inline-block; margin-bottom: var(--n12-s2); }
#idLoginBox .mandatorySymbol, #idPasswordBox .mandatorySymbol { margin-left: 4px; }
#idRememberMe { margin: var(--n12-s1) 0 var(--n12-s4); color: var(--c-mist); }
#idSubmitBox { display: flex; align-items: center; gap: var(--n12-s4); flex-wrap: wrap; }
.password-wrapper { position: relative; }
.openAuthFormContainer .oAuthButtonsContainer { display: grid; gap: var(--n12-s2); margin-bottom: var(--n12-s4); }
.openAuthFormContainer .wa-authenticateLoginLink { display: flex; align-items: center; justify-content: center; gap: var(--n12-s2); min-height: 46px; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-ink) !important; transition: border-color .2s; }
.openAuthFormContainer .wa-authenticateLoginLink:hover { border-color: var(--c-mist); }
.n12-or { text-align: center; margin: 0 0 var(--n12-s4); }
/* Member directory */
.memberDirectorySearchArea { padding: 0 0 var(--n12-s4); display: flex; align-items: center; gap: var(--n12-s3); flex-wrap: wrap; color: var(--c-mist); }
.memberDirectorySearchArea input[type='text'] { width: 280px; }
.advSearchContainerLink { margin-bottom: var(--n12-s3); }
.memberDirectory { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.membersTable { width: 100%; min-width: 560px; border-collapse: collapse; }
table.membersTable th { padding: var(--n12-s3) 14px; border-bottom: 1px solid var(--c-line); }
table.membersTable td { padding: 14px; border-bottom: 1px solid var(--c-line); vertical-align: middle; color: var(--c-ink); }
table.membersTable tr:hover td { background: var(--c-glass); }
table.membersTable .memberValue h5 { margin: 0; display: flex; align-items: center; gap: var(--n12-s3); }
table.membersTable .memberValue h5 a { color: var(--c-ink); }
table.membersTable .memberValue h5 a:hover { color: var(--c-link); }
table.membersTable .memberValue img, table.membersTable .memberValue img[width][height] { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
/* System chrome */
.pagerOuterContainer.pagerIsEmpty, .rssFeedLabel { display: none; }
h1.pageTitle.SystemPageTitle:empty { display: none; }
.clearEndContainer { clear: both; }
.pageTitleOuterContainer { margin-bottom: var(--n12-s5); }
.pageViewSwitcherOuterContainer { float: none; }
.pageViewSwitcherContainer .inner { display: flex; align-items: center; }
.pageViewSwitcherContainer .calendarModeIcon { display: none; }
.pageViewSwitcherContainer a, .controlPanel .controlPanelInner a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--n12-s4); border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-ink); transition: border-color .2s; }
.pageViewSwitcherContainer a:hover, .controlPanel .controlPanelInner a:hover { border-color: var(--c-mist); color: var(--c-ink); }
.pageBackContainer a { display: inline-flex; align-items: center; gap: var(--n12-s2); color: var(--c-mist); }
.pageBackContainer a::before { content: '\f060'; }
.pageBackContainer a:hover { color: var(--c-ink); }
/* Event + blog box lists (glass cards) */
ul.boxesList { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--n12-s4); }
ul.boxesList li.boxesListItem { margin: 0; padding: 0; }
.boxHeaderContainer h4.boxHeaderTitle { margin: 0 0 var(--n12-s2); }
.boxHeaderContainer h4.boxHeaderTitle a { color: var(--c-ink); }
.boxHeaderContainer h4.boxHeaderTitle a:hover { color: var(--c-link); }
.boxInfoContainer h5 { color: var(--c-mist); margin: 0 0 var(--n12-s3); }
.boxInfoContainer h5 a { color: var(--c-mist); }
.boxBodyContentContainer.fixedHeight { max-height: none; overflow: visible; }
.boxBodyContentContainer p:last-child { margin-bottom: 0; }
.boxBodyContentContainer img { border-radius: var(--n12-radius-sm); display: block; }
.controlPanel { position: absolute; z-index: 2; right: var(--n12-s5); top: var(--n12-s5); }
.controlPanel .toggleButton { display: none; }
.boxFooterContainer .replyContainer:empty { display: none; }
.WaGadgetEventsStateList .upcomingEventsContainer > .inner { position: relative; }
.WaGadgetEventsStateList .pageTitleOuterContainer.idEventsTitleMainContainer { position: absolute; right: 0; top: 0; margin: 0; }
.WaGadgetEventsStateList h3.sectionTitle { margin-bottom: var(--n12-s5); }
.WaGadgetEventsStateList .boxOuterContainer.boxBaseView { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--n12-s2) var(--n12-s6); align-items: start; }
.WaGadgetEventsStateList .boxHeaderOuterContainer, .WaGadgetEventsStateList .boxBodyOuterContainer, .WaGadgetEventsStateList .n12-ev-badge { grid-column: 1; }
.WaGadgetEventsStateList .boxFooterOuterContainer { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.WaGadgetEventsStateList .boxInfoContainer { display: flex; flex-wrap: wrap; gap: var(--n12-s2) var(--n12-s5); margin-bottom: var(--n12-s3); }
.WaGadgetEventsStateList .boxInfoContainer > span { display: inline-flex; align-items: center; gap: var(--n12-s2); color: var(--c-mist); }
.WaGadgetEventsStateList .eventDates::before { content: '\f073'; color: var(--c-accent); }
.WaGadgetEventsStateList .eventLocation::before { content: '\f3c5'; color: var(--c-accent); }
.WaGadgetEventsStateList .boxBodyContentContainer p { color: var(--c-mist); }
.n12-ev-badge { display: inline-flex; align-items: center; gap: var(--n12-s2); color: var(--c-accent); margin: 0 0 var(--n12-s2); }
.n12-ev-badge::before { content: '\f058'; }
.pastEventsOuterContainer { margin-top: var(--n12-s8); }
table.pastEventsList { width: 100%; border-collapse: collapse; }
table.pastEventsList td { padding: var(--n12-s4) 0; border-bottom: 1px solid var(--c-line); vertical-align: baseline; }
table.pastEventsList tr:last-child td { border-bottom: 0; }
table.pastEventsList td.left { width: 190px; color: var(--c-mist); white-space: nowrap; }
table.pastEventsList a.pastEventLink { color: var(--c-ink); }
table.pastEventsList a.pastEventLink:hover { color: var(--c-link); }
/* Blog detail */
.WaGadgetBlogStateDetails .boxOuterContainer.boxBaseView { padding: 0; border: 0; background: none; box-shadow: none; }
.WaGadgetBlogStateDetails h4.boxHeaderTitle { max-width: 22ch; margin-bottom: var(--n12-s3); }
.WaGadgetBlogStateDetails .blogPostBody { max-width: 70ch; }
.WaGadgetBlogStateDetails .blogPostBody h3 { margin-top: var(--n12-s6); }
.WaGadgetBlogStateDetails .blogPostBody img, .WaGadgetEventsStateDetails .boxBodyContentOuterContainer img { border-radius: var(--n12-radius); display: block; }
.WaGadgetBlogStateDetails .controlPanel { position: static; margin: var(--n12-s5) 0 0; }
.WaGadgetBlogStateDetails .pageTitleOuterContainer { margin-bottom: var(--n12-s4); }
/* Event detail: title, then info card (sticky) beside the description */
.WaGadgetEventsStateDetails h1.pageTitle { margin: 0 0 var(--n12-s6); max-width: 22ch; }
.WaGadgetEventsStateDetails .boxOuterContainer.boxBaseView { padding: 0; border: 0; background: none; box-shadow: none; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--n12-s7); align-items: start; }
.WaGadgetEventsStateDetails .boxBodyOuterContainer { display: contents; }
.WaGadgetEventsStateDetails .boxBodyInfoOuterContainer { grid-column: 1; position: sticky; top: calc(var(--n12-bar-h) + 52px); padding: var(--n12-s5); }
.WaGadgetEventsStateDetails .boxBodyContentOuterContainer { grid-column: 2; }
.WaGadgetEventsStateDetails .boxBodyContentOuterContainer h3 { margin-top: var(--n12-s6); }
.WaGadgetEventsStateDetails ul.boxInfo, .WaGadgetEventsStateDetails ul.registrationInfo { list-style: none; margin: 0; padding: 0; }
.WaGadgetEventsStateDetails ul.boxInfo li { display: grid; gap: 2px; padding: var(--n12-s3) 0; margin: 0; border-bottom: 1px solid var(--c-line); color: var(--c-mist); }
.WaGadgetEventsStateDetails ul.boxInfo li:last-child { border-bottom: 0; }
.WaGadgetEventsStateDetails .eventInfoTitle { color: var(--c-mist); }
.WaGadgetEventsStateDetails .eventInfoValue { color: var(--c-ink); }
.WaGadgetEventsStateDetails .registrationInfoContainer { border-top: 1px solid var(--c-line); margin-top: var(--n12-s3); padding-top: var(--n12-s3); }
.WaGadgetEventsStateDetails ul.registrationInfo li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--n12-s3); padding: 6px 0; margin: 0; color: var(--c-ink); }
.WaGadgetEventsStateDetails .n12-price { color: var(--c-ink); }
.WaGadgetEventsStateDetails .boxActionContainer { padding: var(--n12-s4) 0 0 !important; margin: 0; background: none; border: 0; text-align: left; }
.WaGadgetEventsStateDetails .boxActionContainer input { width: 100%; }
.WaGadgetEventsStateDetails .-wa-add-event-to-calendar-dropdown { margin-top: var(--n12-s3); color: var(--c-mist); text-align: center; }
.n12-event-detail .WaGadgetContent + .WaGadgetEvents { margin-top: var(--n12-s5); }
/* Breadcrumbs, menus, social profile, donation goal, slideshow, forum */
.WaGadgetBreadcrumbs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--c-mist); }
.WaGadgetBreadcrumbs ul li { margin: 0; }
.WaGadgetBreadcrumbs ul li a { color: var(--c-mist); }
.WaGadgetBreadcrumbs ul li a:hover { color: var(--c-ink); }
.WaGadgetBreadcrumbs ul li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.WaGadgetCustomMenu .gadgetStyleBody ul { list-style: none; margin: 0; padding: 0; }
.WaGadgetCustomMenu .gadgetStyleBody ul li { margin: 0; padding: 0; }
.WaGadgetCustomMenu .gadgetStyleBody ul li::before, .WaGadgetCustomMenu .gadgetStyleBody ul li::after { display: none; }
.WaGadgetCustomMenu .gadgetStyleBody ul.orientationVertical li a { display: block; padding: 5px 0; color: var(--c-mist); }
.WaGadgetCustomMenu .gadgetStyleBody ul.orientationHorizontal { display: flex; flex-wrap: wrap; gap: var(--n12-s1) var(--n12-s5); }
.WaGadgetCustomMenu .gadgetStyleBody ul.orientationHorizontal.alignRight { justify-content: flex-end; }
.WaGadgetCustomMenu .gadgetStyleBody ul li a { color: var(--c-mist); }
.WaGadgetCustomMenu .gadgetStyleBody ul li a:hover { color: var(--c-ink); }
.WaGadgetSocialProfile ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--n12-s2); flex-wrap: wrap; }
.WaGadgetSocialProfile ul.alignRight { justify-content: flex-end; }
.WaGadgetSocialProfile ul li { margin: 0; padding: 0; }
.WaGadgetSocialProfile ul li a { display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-mist); text-indent: 0; background: none; transition: border-color .2s, color .2s; }
.WaGadgetSocialProfile ul li a:hover { color: var(--c-ink); border-color: var(--c-mist); }
.WaGadgetSocialProfile ul li a.Facebook::before { content: '\f39e'; }
.WaGadgetSocialProfile ul li a.X::before, .WaGadgetSocialProfile ul li a.Twitter::before { content: '\f099'; }
.WaGadgetSocialProfile ul li a.LinkedIn::before { content: '\f0e1'; }
.WaGadgetSocialProfile ul li a.YouTube::before { content: '\f167'; }
.WaGadgetSocialProfile ul li a.Instagram::before { content: '\f16d'; }
.WaGadgetSocialProfile ul li a.Pinterest::before { content: '\f231'; }
.WaGadgetDonationGoal .donationGoalNotesContainer { color: var(--c-mist); margin-bottom: var(--n12-s3); }
.WaGadgetDonationGoal table.progressBarTable { width: 100%; height: 12px; border-radius: 999px; overflow: hidden; background: var(--c-glass); border: 1px solid var(--c-line); border-collapse: collapse; }
.WaGadgetDonationGoal td.donationGoalProgressBarLeftPart { background: var(--n12-grad); padding: 0; }
.WaGadgetDonationGoal td.donationGoalProgressBarRightPart { padding: 0; }
.WaGadgetDonationGoal td span { display: block; height: 10px; }
.WaGadgetDonationGoal .progressBarAndButtonTable { width: 100%; }
.WaGadgetDonationGoal .progressBarAndButtonTable td { padding: 0; }
.WaGadgetDonationGoal .donationGoalProgressLabelsPercents { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--n12-s3); }
.WaGadgetDonationGoal .donationLabels { display: flex; gap: var(--n12-s4); color: var(--c-mist); }
.WaGadgetDonationGoal .donationAmount { color: var(--c-ink); }
.WaGadgetDonationGoal .collectedPercents { color: var(--c-accent); }
/* WA's own Slideshow gadget (camera) if a client uses it outside the hero: rounded, theme dots */
.WaGadgetSlideshow .camera_wrap { border-radius: var(--n12-radius); overflow: hidden; }
.WaGadgetSlideshow .camera_wrap .camera_pag .camera_pag_ul li > span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.WaGadgetSlideshow .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span { background: var(--n12-a1); }

/* =====================================================================
   12. Footer
   ===================================================================== */
.zoneFooter1 { background: var(--n12-night-2); border-top: 1px solid var(--n12-line); }
.zoneFooter1 > .WaPlaceHolder > div { padding: var(--n12-s7) 0; }
.zoneFooter2 { background: var(--n12-night); border-top: 1px solid var(--n12-line); }
.zoneFooter2 > .WaPlaceHolder > div { padding: var(--n12-s8) 0 var(--n12-s5); }
.zoneFooter2 h6 { color: var(--n12-ink); margin: 0 0 var(--n12-s3); }
.zoneFooter2 .WaGadgetContent p { color: var(--n12-mist); max-width: 40ch; }
.zoneFooter2 .WaGadgetContent a { color: var(--n12-mist); }
.zoneFooter2 .WaGadgetContent a:hover { color: var(--n12-ink); }
.zoneFooter2 .WaGadget + .WaGadget, .zoneFooter2 [class*='WaGadget'] + [class*='WaGadget'] { margin-top: var(--n12-s4); }
.zoneFooter2 .WaGadgetHeadline + .WaGadgetCustomMenu { margin-top: 0; }
.n12-footer-meta { margin-top: var(--n12-s8); }
.n12-footer-meta > .WaLayoutTable { border-top: 1px solid var(--n12-line); }
.n12-footer-meta .WaLayoutItem { padding-top: var(--n12-s5); vertical-align: middle; }
.zoneFooter2 .n12-credit { margin: 0; max-width: none; }
.n12-credit a { text-decoration: underline; text-underline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--n12-bar-h) + 48px); }

/* =====================================================================
   13. Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .n12-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .WaGadgetEventsStateDetails .boxOuterContainer.boxBaseView { grid-template-columns: 300px minmax(0, 1fr); gap: var(--n12-s6); }
}
@media (max-width: 1199px) {
  .n12-hero { min-height: min(820px, calc(100vh - 68px)); min-height: min(820px, calc(100svh - 68px)); }
}
@media (max-width: 991px) {
  .n12-cols-3, .n12-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n12-bento .n12-span-2 { grid-column: span 2; }
  .WaGadgetEventsStateDetails .boxOuterContainer.boxBaseView { grid-template-columns: 1fr; }
  .WaGadgetEventsStateDetails .boxBodyInfoOuterContainer { position: static; grid-column: 1; }
  .WaGadgetEventsStateDetails .boxBodyContentOuterContainer { grid-column: 1; }
  .n12-launch { grid-template-columns: auto minmax(0, 1fr); }
  .n12-launch .n12-actions { grid-column: 2; }
  /* footer columns: 2 x 2 on tablets */
  .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable, .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable > tbody { display: block; }
  .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable > tbody > .WaLayoutRow { display: flex; flex-wrap: wrap; row-gap: var(--n12-s6); }
  .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable .WaLayoutItem { display: block; width: 50% !important; box-sizing: border-box; padding-right: var(--n12-s5); }
  .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable .WaLayoutSeparator { display: none; }
}
@media (max-width: 767px) {
  /* stack every layout */
  [class^='WaLayoutContainer'] > .WaLayoutTable { display: block; }
  [class^='WaLayoutContainer'] > .WaLayoutTable > tbody, [class^='WaLayoutContainer'] > .WaLayoutTable > tbody > .WaLayoutRow, [class^='WaLayoutContainer'] > .WaLayoutTable > tbody > .WaLayoutRow > .WaLayoutItem { display: block; width: 100% !important; }
  [class^='WaLayoutContainer'] > .WaLayoutTable .WaLayoutSeparator { display: none; }
  .WaLayoutItem + .WaLayoutItem { margin-top: var(--n12-s6); }
  .n12-head .WaLayoutItem + .WaLayoutItem { margin-top: var(--n12-s4); }
  .n12-hero .WaLayoutItem + .WaLayoutItem { margin-top: 0; }
  .n12-cols-2, .n12-cols-3, .n12-bento { grid-template-columns: 1fr; }
  .n12-bento .n12-span-2 { grid-column: auto; }
  .n12-cols-4 { grid-template-columns: 1fr; gap: var(--n12-s3); }
  .n12-cols-4:has(> .n12-stat), .n12-cols-4.n12-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n12-cols-4 > .n12-stat { padding: var(--n12-s5) var(--n12-s3); }
  .n12-media::after { background: linear-gradient(180deg, rgba(7, 11, 22, .55) 0%, rgba(7, 11, 22, .62) 45%, rgba(7, 11, 22, .8) 85%, var(--n12-night) 100%), radial-gradient(70% 45% at 0% 100%, rgba(55, 226, 196, .18), transparent 70%); }
  .n12-band.n12-media::after { background: linear-gradient(180deg, rgba(7, 11, 22, .7), rgba(7, 11, 22, .82) 70%, var(--n12-night)); }
  .n12-card, ul.boxesList .boxOuterContainer.boxBaseView, .WaGadgetRecentBlogPosts.n12-cards li, .WaGadgetLoginForm.n12-login-card { padding: var(--n12-s5); }
  .n12-mcard-body { padding: var(--n12-s5); }
  .n12-ring-wrap, .n12-ring { width: 104px; height: 104px; }
  .n12-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .n12-gallery img, .n12-gallery img[width][height] { aspect-ratio: 4 / 3; height: auto; }
  .n12-gallery img:first-child { grid-row: auto; }
  .n12-hero > .WaLayoutTable { margin-top: 96px; margin-bottom: var(--n12-s7); }
  .n12-hero-copy .n12-actions { flex-direction: column; align-items: stretch; }
  .n12-hero-copy .n12-actions .stylizedButton { width: 100%; }
  .n12-hero-play { top: 76px; bottom: auto; right: 16px; }
  .n12-row, .WaGadgetUpcomingEvents.n12-timeline li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--n12-s4); }
  .n12-row-aside { grid-column: 2; justify-self: start; margin-top: var(--n12-s2); }
  .n12-badge, .n12-tl-date { width: 56px; height: 56px; border-radius: 14px; }
  .n12-timeline::before, .WaGadgetUpcomingEvents.n12-timeline ul::before { left: 27px; }
  .WaGadgetUpcomingEvents.n12-timeline li > .location { grid-column: 2; grid-row: auto; margin-top: var(--n12-s1); }
  .WaGadgetUpcomingEvents li, .WaGadgetRecentBlogPosts:not(.n12-cards) li, .WaGadgetForumUpdates li { grid-template-columns: 1fr; }
  .WaGadgetUpcomingEvents li > .location, .WaGadgetRecentBlogPosts:not(.n12-cards) li > .author, .WaGadgetForumUpdates li > .author { grid-column: 1; grid-row: auto; }
  .n12-type-row { grid-template-columns: 1fr; row-gap: var(--n12-s3); }
  .n12-form-row, .n12-subscribe { grid-template-columns: 1fr; }
  .n12-launch { grid-template-columns: 1fr; }
  .n12-launch .n12-actions { grid-column: 1; }
  .controlPanel { position: static; margin-bottom: var(--n12-s3); }
  .WaGadgetEventsStateList .boxOuterContainer.boxBaseView { grid-template-columns: 1fr; }
  .WaGadgetEventsStateList .boxFooterOuterContainer { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--n12-s2); }
  .WaGadgetEventsStateList .pageTitleOuterContainer.idEventsTitleMainContainer { position: static; margin-bottom: var(--n12-s4); }
  .fieldSubContainer table, .fieldSubContainer table tbody, .fieldSubContainer table tr, .fieldSubContainer table td { display: block; width: 100% !important; }
  .fieldSubContainer table td.left { padding: 0 0 6px; }
  table.pastEventsList td.left { width: 120px; white-space: normal; }
  .n12-footer-meta .WaLayoutItem + .WaLayoutItem { margin-top: var(--n12-s3); padding-top: 0; }
  .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable .WaLayoutItem { margin-top: 0; }
  .zoneFooter2 .WaLayoutContainerFirst > .WaLayoutTable .WaLayoutItem:first-child { width: 100% !important; }
  .WaGadgetCustomMenu .gadgetStyleBody ul.orientationHorizontal.alignRight { justify-content: flex-start; }
}

/* =====================================================================
   14. Reduced motion — everything settles instantly, EXCEPT the partner
   marquee, which keeps moving on purpose (house rule). The slideshow does
   not autoplay and the video does not autoplay (theme.js).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .n12-hero .n12-hero-copy > .gadgetStyleBody > *, .js .n12-hero .n12-slide .n12-hero-copy > *, .js .n12-hero-media, .js .n12-hero-media-photo img, .n12-slide.is-current .n12-hero-media img { animation: none; }
  .n12-ring-arc, .n12-timeline::before, .WaGadgetUpcomingEvents.n12-timeline ul::before, .n12-timeline > li, .WaGadgetUpcomingEvents.n12-timeline li,
  .n12-mcard-img img, .n12-card::before, .n12-card::after, .n12-slide .n12-hero-media, .n12-slide .n12-hero-copy, .n12-dots button { transition: none !important; }
  .n12-stat .n12-ring-arc { stroke-dashoffset: var(--off, 20); }
  .n12-timeline::before, .WaGadgetUpcomingEvents.n12-timeline ul::before { transform: none; }
  .n12-timeline > li, .WaGadgetUpcomingEvents.n12-timeline li { opacity: 1; transform: none; }
  canvas.n12-aurora-canvas { display: none; }
  /* .n12-marquee-track intentionally not listed here */
}

/* =====================================================================
   15. Admin edit mode — keep the editor usable: no sticky header, no fixed
   mobile bar, no hero min-height, static fallbacks everywhere.
   ===================================================================== */
body.adminContentView .zoneHeader1 { position: static; }
body.adminContentView .mobilePanelContainer { position: static; }
body.adminContentView .n12-hero { min-height: 0; }
body.adminContentView .n12-card::before, body.adminContentView .n12-card::after { display: none; }
body.adminContentView .n12-timeline > li, body.adminContentView .WaGadgetUpcomingEvents.n12-timeline li { opacity: 1; transform: none; }
body.adminContentView .n12-timeline::before, body.adminContentView .WaGadgetUpcomingEvents.n12-timeline ul::before { transform: none; }
body.adminContentView .n12-stat .n12-ring-arc { stroke-dashoffset: var(--off, 20); }
body.adminContentView .n12-hero * { animation: none !important; }
body.adminContentView .n12-hero-media { position: relative; height: 200px; border-radius: 12px; margin-bottom: 12px; }
body.adminContentView .n12-slide { grid-area: auto; }
body.adminContentView .n12-slide .n12-hero-media, body.adminContentView .n12-slide .n12-hero-copy { opacity: 1; visibility: visible; transform: none; }
body.adminContentView .n12-hero-play { display: none; }