@import url("theme_settings/theme_settings.css");
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

:root{
  --color-1:        var(--color-1-theme, #00ff00);
  --color-2:        var(--color-2-theme, #ff00ff);
  --color-over-1:   var(--color-over-1-theme, #ffffff);
  /* The CMS mis-classifies the light-grey secondary (#D9D9D9) as dark — it derives
     over-2=white / isDark=1, which puts unreadable white text on secondary backgrounds.
     Force the light-secondary contrast: black text, not-dark. */
  --color-over-2:   #000000;
  --color-1-isDark: var(--color-1-theme-isDark, 1);
  --color-2-isDark: 0;

  --color-primary-50:  color-mix(in srgb, var(--color-1), white 94%);
  --color-primary-100: color-mix(in srgb, var(--color-1), white 88%);
  --color-primary-500: color-mix(in srgb, var(--color-1), white 15%);
  --color-primary-600: color-mix(in srgb, var(--color-1), black 8%);
  --color-primary-700: var(--color-1); /* CMS primary */
  --color-primary-800: color-mix(in srgb, var(--color-1), black 22%);
  --color-primary-900: color-mix(in srgb, var(--color-1), black 38%);
  --color-secondary-100: color-mix(in srgb, var(--color-2), white 88%);
  --color-secondary-300: color-mix(in srgb, var(--color-2), white 40%);
  --color-secondary-400: var(--color-2); /* CMS secondary */
  --color-secondary-600: color-mix(in srgb, var(--color-2), black 20%);
  --color-gray-50:#F9FAFB;   /* Cool White — Background */
  --color-gray-100:#F3F4F6;
  --color-gray-200:#E5E7EB;
  --color-gray-300:#D1D5DB;
  --color-gray-500:#6B7280;
  --color-gray-600:#4B5563;
  --color-gray-700:#374151;
  --color-gray-800:#1F2937;
  --color-gray-900:#111827;  /* Dark Slate — Text */

  --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-heading:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.25rem; --fs-lg:1.25rem;
  --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.375rem; --fs-4xl:3rem; --fs-5xl:3.75rem;
  --lh-tight:1.15; --lh-snug:1.35; --lh-body:1.65;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:2.5rem;
  --sp-6:3rem; --sp-8:4rem; --sp-10:5rem; --sp-section:6rem; --sp-section-lg:7.5rem;

  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-full:999px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:0 2px 8px rgba(16,24,40,.08);
  --shadow-md:0 8px 24px rgba(16,24,40,.10);
  --shadow-lg:0 16px 48px rgba(16,24,40,.14);
  --shadow-focus:0 0 0 3px color-mix(in srgb, var(--color-1), transparent 65%);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur-med:420ms; --dur-slow:700ms;
  --header-h:0px;
  --container:1280px;
}
*,*::before,*::after{box-sizing:border-box;}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{margin:0;min-height:100%;display:flex;flex-direction:column;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--color-gray-800);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ---------- Body shell & inside-page scaffold ---------- */
/* Only #content_main grows, so the footer sits at the viewport bottom on short CMS pages. */
.site-header,.site-footer{flex:none;}
#content_main{flex:1 0 auto;width:100%;box-sizing:border-box;max-width:var(--inside-content-max,var(--container));padding:var(--inside-content-pad-y,1.5rem) var(--inside-content-pad-x,clamp(0.5rem,5%,3rem));margin-inline:auto;background:#fff;}
/* Homepage bands span full width; the .site-homepage wrapper in index.jsp gates the reset. */
body:has(.site-homepage) #content_main{max-width:none;padding:0;background:transparent;}
.pageTitle{color:var(--color-1);filter:brightness(var(--color-1-isDark));font-size:2rem;line-height:1.25;margin-block:0 1.5rem;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:var(--lh-tight);color:var(--color-gray-900);margin:0;letter-spacing:normal;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
svg.lucide{width:1em;height:1em;flex-shrink:0;vertical-align:-0.125em;}
svg.icon-outline{width:1em;height:1em;flex-shrink:0;vertical-align:-0.125em;fill:currentColor;overflow:visible;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4);}
section{padding-block:var(--sp-section);}
@media (max-width:1024px){section{padding-block:var(--sp-8);} :root{--sp-section:4rem;}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--color-secondary-400);outline-offset:2px;border-radius:4px;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.section-head{max-width:720px;margin-bottom:var(--sp-5);}
.section-head.split{display:flex;align-items:flex-end;justify-content:space-between;max-width:none;gap:var(--sp-3);}
.eyebrow{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary-900);margin-bottom:var(--sp-1);}
.section-head h2{font-size:var(--fs-3xl);color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
.section-head p{color:var(--color-gray-600);margin-top:var(--sp-1);}
@media (max-width:768px){.section-head.split{flex-direction:column;align-items:flex-start;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);padding:.85rem 1.7rem;border-radius:var(--radius-md);border:2px solid transparent;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);white-space:nowrap;min-height:48px;cursor:pointer;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--color-primary-900);color:#fff;}
.btn-secondary{background:transparent;color:var(--color-primary-900);border-color:var(--color-primary-500);filter:brightness(var(--color-1-isDark));}
.btn-ghost{background:transparent;color:var(--color-primary-900);}
.btn-accent{background:var(--color-secondary-400);color:var(--color-over-2);}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);}
/* Override CMS a:link specificity (0,0,1,1) — compound selectors win at (0,0,2,1) */
a.btn-primary,a.btn-primary:link,a.btn-primary:visited,a.btn-primary:active{color:#fff;}
a.btn-secondary,a.btn-secondary:link,a.btn-secondary:visited{color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
a.btn-secondary:active{color:#fff;}
a.btn-accent,a.btn-accent:link,a.btn-accent:visited,a.btn-accent:hover,a.btn-accent:active{color:var(--color-over-2);}
a.btn-on-dark,a.btn-on-dark:link,a.btn-on-dark:visited,a.btn-on-dark:hover,a.btn-on-dark:active{color:#fff;}
a.donate-btn,a.donate-btn:link,a.donate-btn:visited,a.donate-btn:active{color:var(--color-primary-900);}
/* Hover feedback is desktop-only; touch devices have no true hover state. */
@media (min-width:1025px){
  .btn-primary:hover{background:var(--color-secondary-400);}
  .news-end .btn-primary:hover{outline:2px solid var(--color-primary-900);outline-offset:2px;}
  .btn-secondary:hover{background:var(--color-primary-600);color:#fff;border-color:var(--color-primary-600);}
  .btn-ghost:hover{background:var(--color-primary-50);}
  .btn-accent:hover{background:#fff;}
  /* Events sits on the dark primary section, so its hover uses a white fill + white outline
     (mirrors the News button's fill-change + outline, in colors that read on the dark bg). */
  .events-end .btn-accent:hover{outline:2px solid #fff;outline-offset:2px;}
  .btn-on-dark:hover{background:rgba(255,255,255,.16);border-color:#fff;}
  a.btn-primary:hover{color:var(--color-over-2);}
  a.btn-secondary:hover{color:#fff;}
  a.donate-btn:hover{color:var(--color-over-2);}
}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}
.btn-loading{color:transparent !important;pointer-events:none;}
.btn-loading::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .7s linear infinite;z-index:2;}
@keyframes spin{to{transform:rotate(360deg);}}
.section-end{display:flex;justify-content:center;margin-top:var(--sp-5);}
.icon-btn{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--color-gray-200);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out);color:var(--color-gray-800);}
@media (min-width:1025px){.icon-btn:hover{background:var(--color-gray-100);}}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-999px;top:auto;background:var(--color-primary-900);color:#fff;padding:.75rem 1.25rem;border-radius:var(--radius-sm);z-index:2000;font-family:var(--font-display);font-weight:600;}
.skip-link:focus{left:1rem;top:1rem;}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:1000;}
/* Site-identity band below the nav on inside pages; the homepage hides it (it renders its
   own over-hero brand card in index.jsp). */
.header-brand{display:flex;justify-content:center;align-items:center;background:var(--color-gray-100);padding:1.25rem var(--sp-4);}
.header-brand-mark{width:auto;height:76px;max-width:100%;object-fit:contain;}
body:has(.site-homepage) .header-brand{display:none;}
@media (max-width:1024px){.header-brand{padding:1rem var(--sp-4);}.header-brand-mark{height:52px;}}
.donate-btn{background:#fff;color:var(--color-primary-900);font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);height:44px;padding-inline:1.4rem;border-radius:var(--radius-sm);border:0;display:inline-flex;align-items:center;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out);}
@media (min-width:1025px){.donate-btn:hover{background:var(--color-secondary-400);}}
.nav-toggle{display:none;width:44px;height:44px;border-radius:0;background:transparent;border:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;color:#fff;flex-shrink:0;}
.nav-toggle-bar{display:block;width:26px;height:3px;background:currentColor;border-radius:0;}
.mobile-header-bar{display:none;}
@media (max-width:1024px){
  .mobile-header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:.375rem var(--sp-4);position:relative;z-index:1101;background:var(--color-primary-900);}
  .mobile-header-bar .nav-toggle{display:flex;}
}
.mobile-search-toggle{width:44px;height:44px;border-radius:50%;background:#fff;border:0;display:flex;align-items:center;justify-content:center;color:var(--color-primary-900);cursor:pointer;flex-shrink:0;}
.mobile-search-toggle svg{width:18px;height:18px;}
.brand-link{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;background:var(--color-gray-100);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.25rem 3rem;justify-content:center;}
@media (max-width:1024px){.brand-link{display:none;}}
.brand-block-mobile{display:none;}
@media (max-width:1024px){
  .brand-block-mobile{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--color-gray-100);padding:1.25rem var(--sp-4) 20px;position:relative;z-index:5;}
  .brand-block-mobile .brand-mark{height:52px;}
}
.brand-mark{width:auto;height:92px;object-fit:contain;flex-shrink:0;}

.nav-strip{background:var(--color-primary-900);}
.nav-strip .container{display:flex;align-items:center;gap:var(--sp-4);}
.nav-strip--mobile{display:none;}
.nav-inner{display:flex;align-items:center;gap:var(--sp-3);}
.nav-strip-actions{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;}
.nav-search-wrap{display:flex;align-items:center;}
.nav-search-toggle{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);}
.nav-search-toggle svg{width:17px;height:17px;}
@media (min-width:1025px){.nav-search-toggle:hover{background:var(--color-secondary-400);border-color:var(--color-secondary-400);color:var(--color-over-2);}}
/* flex row so the collapsed form's input+submit stay on one line — stacked, they inflate
   the flex row height and drag the mobile top bar taller than its controls. */
.nav-search-form{display:flex;align-items:center;max-width:0;overflow:hidden;transition:max-width var(--dur-med) var(--ease-out);}
.nav-search-wrap.is-open .nav-search-form{max-width:200px;margin-left:.6rem;}
.nav-search-form input{width:180px;height:36px;border:0;border-radius:var(--radius-full);padding:0 1rem;font-family:var(--font-body);font-size:var(--fs-sm);background:rgba(255,255,255,.14);color:#fff;}
.nav-search-form input::placeholder{color:rgba(255,255,255,.65);}
.nav-search-form input:focus{background:#fff;color:var(--color-gray-900);}
.nav-search-form input:focus::placeholder{color:var(--color-gray-500);}
.nav-list{display:flex;list-style:none;margin:0;padding:0;}
/* Desktop list fills the bar and distributes items across it, so the bar width and the
   gap to the search action stay fixed regardless of how many CMS nav items render. */
#sitenav_desktop .nav-list{flex:1 1 auto;justify-content:space-between;gap:var(--sp-3);}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.92);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);padding:1rem 1.1rem;border-radius:var(--radius-sm);position:relative;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
a.nav-link,a.nav-link:link,a.nav-link:visited{color:rgba(255,255,255,.92);}
a.nav-link:active{color:#fff;}
.nav-item:has(.dropdown-toggle[aria-expanded="true"]) .nav-link{background:var(--color-secondary-400);color:var(--color-over-2);}
.nav-item .chevron{transition:transform .12s ease;width:14px;height:14px;transform:rotate(90deg);}
.nav-item.submenu-open .chevron{transform:rotate(270deg);}
#sitenav_desktop .nav-item--contact .nav-link{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.5);}
@media (min-width:1025px){
  a.nav-link:hover,.nav-item:hover a.nav-link{color:var(--color-over-2);}
  .nav-item:hover .nav-link{background:var(--color-secondary-400);color:var(--color-over-2);}
  .nav-item.is-plain:hover .nav-link--plain{background:transparent !important;color:rgba(255,255,255,.92) !important;}
  #sitenav_desktop .nav-item--contact .nav-link:hover{text-decoration-color:var(--color-over-2);}
  /* Drive the dropdown from :hover directly so it opens instantly and stays open across
     the holder's transparent top bridge (see .sub-menu-holder), independent of the
     library's async aria toggle; the chevron flips up on the same hover. */
  #sitenav_desktop .nav-item.dropdown:hover > .sub-menu-holder{display:block;}
  #sitenav_desktop .nav-item.dropdown:hover .chevron{transform:rotate(270deg);}
}

/* accessible-menu dropdown toggle */
.dropdown-toggle{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;padding:0;margin:0;cursor:pointer;opacity:0;}
/* padding-top is a transparent bridge: it opens a visual gap to the dropdown while
   keeping the pointer inside the holder as it crosses from the nav item to the menu. */
.sub-menu-holder{display:none;position:absolute;top:100%;left:0;min-width:230px;padding-top:var(--sp-1);z-index:10;}
/* Reveal on the toggle's aria-expanded, which the library sets synchronously on open.
   Its .show class rides a transitionend that never fires here (.sub-menu has no CSS
   transition), so .show is unreliable as a visibility signal. */
.nav-item:has(> .dropdown-toggle[aria-expanded="true"]) > .sub-menu-holder{display:block;}
.sub-menu{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:.5rem;list-style:none;margin:0;}
.sub-menu-item a{display:block;padding:.65rem .85rem;border-radius:var(--radius-sm);color:var(--color-gray-800);font-size:var(--fs-sm);font-weight:500;}
@media (min-width:1025px){.sub-menu-item a:hover{background:var(--color-primary-900);color:#fff;}}

@media (max-width:1024px){
  .nav-toggle{display:flex;}
  .nav-strip:not(.nav-strip--mobile){display:none;}
  .nav-strip--mobile{background:var(--color-primary-900);position:fixed;top:0;right:0;height:100vh;width:min(360px,88vw);transform:translateX(100%);transition:transform var(--dur-med) var(--ease-out);z-index:1100;box-shadow:var(--shadow-lg);overflow-y:auto;display:block;}
  .nav-strip--mobile:has(.nav-menu.show){transform:translateX(0);}
  .nav-strip--mobile .container{padding:5rem var(--sp-4) 2rem;}
  .nav-strip--mobile{color:#fff;}
  .nav-close-btn{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;background:transparent;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  /* brighten the black close glyph to white so it reads on the navy panel */
  .nav-close-btn img{width:100%;height:100%;display:block;filter:brightness(0) invert(1);}
  .nav-strip--mobile .nav-list{flex-direction:column;width:100%;padding-top:4rem;}
  .nav-strip--mobile .nav-link{width:100%;justify-content:center;text-align:center;padding:1rem .25rem;border-bottom:1px solid rgba(255,255,255,.15);}
  .nav-strip--mobile a.nav-link,.nav-strip--mobile a.nav-link:link,.nav-strip--mobile a.nav-link:visited,.nav-strip--mobile span.nav-link{color:#fff;}
  .nav-strip--mobile .sub-menu-holder{position:static;box-shadow:none;}
  .nav-strip--mobile .sub-menu{box-shadow:none;padding:.5rem 0;background:transparent;}
  .nav-strip--mobile .sub-menu-item a{color:#fff;text-align:center;}
  .nav-scrim{position:fixed;inset:0;background:rgba(17,24,39,.5);opacity:0;visibility:hidden;transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med);z-index:1050;}
  .nav-scrim.is-visible{opacity:1;visibility:visible;}
}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;margin-top:0;}
@media (min-width:1025px){.hero{padding-block:0;}}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(180deg,rgba(9,26,48,.55),rgba(9,26,48,0));z-index:1;pointer-events:none;}
.hero .swiper,.hero .swiper-wrapper,.hero .swiper-slide{width:100%;height:100%;}
.hero .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* Desktop: swiper is disabled (swiper-disable-at-large), so only the first slide shows as a static background. */
.hero.swiper-disabled .swiper-wrapper{display:block;height:100%;}
.hero.swiper-disabled .swiper-slide{display:none;}
.hero.swiper-disabled .swiper-slide:first-child{display:block;width:100%;height:100%;}
.hero.swiper-disabled .shuffle-pill-nav{display:none;}
.hero-pause-btn{position:absolute;left:1.5rem;bottom:1.5rem;width:44px;height:44px;border-radius:var(--radius-md);background:transparent;border:0;padding:0;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);z-index:5;}
.hero-pause-icon{width:100%;height:100%;object-fit:cover;display:block;}
.hero-pause-btn.is-paused{opacity:.6;}
@media (min-width:769px){.hero-pause-btn{bottom:110px;}}
@media (max-width:1024px){
  .hero{height:240px;min-height:240px;padding-block:0;}
  .hero-pause-btn{display:none;}
}

/* ---------- Shuffle pill nav (hero + news photo shuffle) ---------- */
.shuffle-pill-nav{position:absolute;top:0;left:0;z-index:5;display:flex;border-radius:0 0 var(--radius-md) 0;overflow:hidden;background:rgba(255,255,255,.92);box-shadow:var(--shadow-md);}
.hero .shuffle-pill-nav{left:auto;right:0;border-radius:0 0 0 var(--radius-md);}
.news-shuffle .shuffle-pill-nav{display:none;}
.shuffle-pill-nav .swiper-button{position:static;width:40px;height:36px;margin:0;padding:0;background:transparent;border:0;color:var(--color-primary-900);cursor:pointer;--swiper-navigation-size:16px;}
.shuffle-pill-nav .swiper-button-prev{border-right:1px solid rgba(17,24,39,.15);}
@media (min-width:1025px){.shuffle-pill-nav .swiper-button:hover{background:rgba(17,24,39,.08);}}
.shuffle-pill-nav .swiper-button-disabled{opacity:.35;}

/* ---------- Spotlights (sticky label + horizontal scroll) ---------- */
.spotlights-layout{display:flex;gap:var(--sp-6);align-items:flex-start;}
.spotlights-sticky{position:sticky;top:calc(var(--header-h) + var(--sp-4));flex:0 0 300px;min-width:0;max-width:300px;overflow:hidden;align-self:flex-start;}
.spotlights-sticky h2{font-size:var(--fs-3xl);color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
.glance-list{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4);}
.glance-list li{display:flex;align-items:center;gap:.9rem;padding-bottom:var(--sp-4);border-bottom:1px solid var(--color-gray-200);}
.glance-list li:last-child{border-bottom:0;padding-bottom:0;}
.glance-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:56px;border-radius:50%;background:var(--color-primary-50);color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
.glance-icon svg{width:32px;height:32px;min-width:32px;min-height:32px;}
.glance-copy{display:flex;flex-direction:column;min-width:0;}
.glance-list h4{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--color-gray-900);margin-bottom:.2rem;}
.glance-list p{color:var(--color-gray-600);font-size:var(--fs-sm);margin:0;}
.spotlights-scroll{flex:1;display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;}
.spotlight-card{position:relative;margin:0 0 110px;border:none;padding:0;background:none;}
.spotlight-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-lg);display:block;transition:transform var(--dur-slow) var(--ease-out);}
.spotlight-card-body{position:absolute;z-index:1;left:34%;right:5%;bottom:-72px;background:var(--color-primary-900);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-4);transition:box-shadow var(--dur-med) var(--ease-out);}
.spotlight-card-body h3{color:#fff;font-size:var(--fs-2xl);margin-bottom:.75rem;}
.spotlight-card-body .spotlight-body,.spotlight-card-body .spotlight-body *{color:#fff !important;}
.spotlight-card-body .spotlight-body{font-size:var(--fs-sm);margin-bottom:var(--sp-3);}
.spotlight-card-body .spotlight-body>*{margin:0;}
.spotlight-card-body .btn{align-self:flex-start;}
.spotlight-card-body .btn-secondary{background:#fff;border-color:#fff;}
.spotlight-card-body a.btn-secondary,.spotlight-card-body a.btn-secondary:link,.spotlight-card-body a.btn-secondary:visited{color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
.spotlight-card-body a.btn-secondary:active{color:var(--color-over-2);}
.spotlight-card.no-image{margin-bottom:0;background:var(--color-primary-50);border-radius:var(--radius-lg);padding:var(--sp-5);}
.spotlight-card.no-image .spotlight-card-body{position:static;background:none;box-shadow:none;padding:0;}
.spotlight-card.no-image .spotlight-card-body h3{color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
.spotlight-card.no-image .spotlight-card-body .spotlight-body,.spotlight-card.no-image .spotlight-card-body .spotlight-body *{color:var(--color-gray-600) !important;}
.spotlight-card.no-image .spotlight-card-body .btn-secondary{background:transparent;border-color:var(--color-primary-500);}
.spotlight-card.no-image .spotlight-card-body a.btn-secondary,.spotlight-card.no-image .spotlight-card-body a.btn-secondary:link,.spotlight-card.no-image .spotlight-card-body a.btn-secondary:visited{color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}
.spotlight-card.no-image .spotlight-card-body a.btn-secondary:active{color:var(--color-over-2);}
@media (min-width:1025px){
  .spotlight-card:hover img{transform:scale(1.03);}
  .spotlight-card:hover .spotlight-card-body{box-shadow:0 20px 56px rgba(16,24,40,.18);}
  .spotlight-card-body .btn-secondary:hover{background:var(--color-secondary-400);border-color:var(--color-secondary-400);}
  .spotlight-card-body a.btn-secondary:hover{color:var(--color-over-2);}
  .spotlight-card.no-image .spotlight-card-body .btn-secondary:hover{background:var(--color-secondary-400);border-color:var(--color-secondary-400);}
  .spotlight-card.no-image .spotlight-card-body a.btn-secondary:hover{color:var(--color-over-2);}
}
@media (max-width:1024px){
  .spotlights-layout{flex-direction:column;gap:48px;}
  .spotlights-sticky{position:static;flex:none;max-width:none;width:100%;}
  .spotlight-card{margin:0;}
  .spotlights-scroll{gap:48px;}
  .spotlight-card img{border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
  .spotlight-card-body{position:static;left:auto;right:auto;bottom:auto;margin:0;padding:20px 20px var(--sp-4) 20px;border-radius:0 0 var(--radius-lg) var(--radius-lg);text-align:center;}
  .spotlight-card-body .spotlight-body{text-align:left;}
}
@media (min-width:1025px){
  .spotlight-card-body .spotlight-body,.spotlight-card-body .spotlight-body *{color:#fff !important;}
  .spotlight-card.no-image .spotlight-card-body .spotlight-body,.spotlight-card.no-image .spotlight-card-body .spotlight-body *{color:#000 !important;}
}

/* ---------- Events ---------- */
.events{background:var(--color-primary-900);}
.events .section-head{text-align:left;max-width:none;}
.events .section-head h2{color:#fff;}
.events-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4) var(--sp-6);margin-top:var(--sp-5);}
.event-card{position:relative;display:flex;align-items:center;gap:var(--sp-3);margin:0;padding:var(--sp-1) 0;border:none;background:none;}
.event-accent{flex-shrink:0;width:4px;align-self:stretch;background:var(--color-secondary-400);border-radius:2px;}
.event-date{flex-shrink:0;width:60px;height:64px;border-radius:var(--radius-sm);background:#fff;color:var(--color-primary-900);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.event-date .month{font-size:var(--fs-xs);text-transform:uppercase;font-weight:700;letter-spacing:.05em;}
.event-date .day{font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1;}
.event-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem;}
.event-body h3{font-size:1.05rem;margin:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.event-body h3 a,.event-body h3 a:link,.event-body h3 a:visited,.event-body h3 a:hover,.event-body h3 a:active{color:#fff;}
.event-body h3 a::after{content:"";position:absolute;inset:0;}
.event-meta-line{display:flex;flex-wrap:wrap;gap:0 var(--sp-3);color:rgba(255,255,255,.65);font-size:var(--fs-sm);}
.event-meta-line--stacked{flex-direction:column;gap:.2rem;}
.events-end{justify-content:flex-start;align-items:center;gap:var(--sp-4);}
.news-end{justify-content:flex-start;align-items:center;gap:var(--sp-4);}
.events-pager-nav{display:flex;gap:var(--sp-2);}
.events-swipe-nav{display:none;}
.events-pager-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-gray-200);background:#fff;color:var(--color-gray-700);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);}
.events-pager-btn:disabled{cursor:not-allowed;color:var(--color-gray-500);}
.events-pager-btn svg{width:18px;height:18px;}
/* Mobile events carousel arrows on the dark section: no fill, white circle outline + glyph. */
.events-swipe-nav .events-pager-btn{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;}
.events-swipe-nav .events-pager-btn:disabled{color:rgba(255,255,255,.4);border-color:rgba(255,255,255,.25);}
@media (min-width:1025px){
  .events-pager-btn:hover{background:var(--color-primary-900);color:#fff;}
}
@media (max-width:1024px){
  /* Swipe carousel on mobile: a scroll-snap row, one event per slide with the next card
     peeking so the swipe affordance reads. Replaces the desktop 3-col grid. */
  .events-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--sp-4);padding:0 20px var(--sp-3);scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .events-grid::-webkit-scrollbar{display:none;}
  .event-card{flex:0 0 100%;scroll-snap-align:center;}
  .event-body h3{white-space:normal;overflow:visible;text-overflow:clip;}
  .events .section-head{text-align:center;}
  .events-end{justify-content:center;gap:var(--sp-2);}
  .events-swipe-nav{display:contents;}
  #eventsSwipePrev{order:1;}
  .events-end .btn-accent{order:2;}
  #eventsSwipeNext{order:3;}
}
@media (max-width:640px){
  #newsPrevBtn,#newsNextBtn,#eventsSwipePrev,#eventsSwipeNext{width:38px;height:38px;}
}

/* ---------- News ---------- */
.news-layout{display:flex;gap:var(--sp-6);align-items:stretch;margin-top:var(--sp-5);}
@media (min-width:1025px){.news-layout{gap:80px;margin-top:0;}.news{padding-top:0;}}
.news-sticky-col{position:sticky;top:calc(var(--header-h) + var(--sp-3));flex:0 0 42%;min-width:0;z-index:3;}
.news-shuffle-mobile-section{display:none;}
.news-shuffle-backdrop{position:absolute;top:0;bottom:0;right:50%;width:100vw;background:var(--color-primary-900);}
.news-shuffle{position:relative;border-radius:var(--radius-lg);overflow:hidden;height:100%;}
.news-shuffle .swiper{width:100%;height:100%;}
.news-shuffle .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.shuffle-pause-btn{position:absolute;left:1.5rem;bottom:1.5rem;width:44px;height:44px;border-radius:var(--radius-md);background:transparent;border:0;padding:0;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);}
@media (min-width:1025px){.news-sticky-col .shuffle-pause-btn{left:1.5rem;bottom:110px;z-index:5;}}
.shuffle-pause-icon{width:100%;height:100%;object-fit:cover;display:block;}
.shuffle-pause-btn.is-paused{opacity:.6;}
.news-main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.news-main-col .section-head{margin-bottom:var(--sp-3);}
.news-main-col .news-end{margin-top:var(--sp-4);}
.news-row{transition:opacity 300ms var(--ease-out);}
.news-row.is-hidden{opacity:0;pointer-events:none;}
.site-news-list{display:flex;flex-direction:column;gap:0;}
.news-row{display:flex;gap:var(--sp-3);align-items:center;margin:0;padding:var(--sp-3) 0;border:none;border-bottom:1px solid var(--color-gray-200);background:none;}
.news-row:first-child{padding-top:0;}
.site-news-list .news-row:last-child{border-bottom:0;padding-bottom:0;}
.news-row img{width:120px;height:120px;flex-shrink:0;object-fit:cover;border-radius:var(--radius-md);}
.news-row-placeholder{width:120px;height:120px;flex-shrink:0;border-radius:var(--radius-md);background:var(--color-primary-50);display:flex;align-items:center;justify-content:center;}
.news-row-placeholder img{width:56px;height:56px;object-fit:contain;border-radius:0;}
.news-row-body{min-width:0;}
.news-row-body h4{font-size:1.1rem;margin-bottom:.4rem;}
@media (min-width:1025px){.news-row-body h4 a:hover{color:var(--color-primary-900);filter:brightness(var(--color-1-isDark));}}
.news-row-body p{color:#000;font-size:var(--fs-sm);margin:0;}
@media (max-width:1024px){
  .news-layout{flex-direction:column;margin-top:0;}
  .news-sticky-col{display:none;}
  .news-shuffle{height:240px;padding-block:0;}
  .news-shuffle .shuffle-pause-btn{display:none;}
  .news-shuffle .shuffle-pill-nav{display:flex;left:auto;right:0;border-radius:0 0 0 var(--radius-md);}
  .news-shuffle-backdrop{display:none;}
  .news-shuffle-mobile-section{display:block;order:6;padding-block:0;}
  .news-row{flex-direction:column;align-items:stretch;}
  .news-row img{width:100%;height:auto;aspect-ratio:16/9;}
  .news-row-placeholder{width:100%;height:auto;aspect-ratio:16/9;}
  .news-row:not(:first-child){display:none;}
  .news-row-body h4{text-align:center;}
  .news-end{justify-content:center;gap:var(--sp-2);}
  .news-end .events-pager-nav{display:contents;}
  #newsPrevBtn{order:1;}
  .news-end .btn-primary{order:2;}
  #newsNextBtn{order:3;}
}

/* ---------- Motto banner ---------- */
.motto-banner{position:relative;background:var(--color-primary-900);margin-top:38px;padding-block:var(--sp-8);}
@media (min-width:1025px){.motto-banner::before{content:'';position:absolute;top:-38px;left:0;right:0;height:38px;background:var(--color-primary-900);z-index:0;}}
.motto-banner p,.motto-banner div{max-width:900px;margin-inline:auto;text-align:center;color:#fff;font-family:var(--font-heading);font-style:normal;font-weight:700;font-size:var(--fs-2xl);line-height:var(--lh-snug);letter-spacing:normal;}
@media (max-width:1024px){.motto-banner{padding-inline:var(--sp-4);}}
@media (max-width:768px){.motto-banner p{font-size:var(--fs-xl);}}

/* ---------- Quick Links (floating card straddling hero bottom) ---------- */
.ql-links-bar{position:absolute;left:0;right:0;bottom:-36px;width:fit-content;max-width:calc(100% - 2rem);margin-inline:auto;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;background:var(--color-secondary-400);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
.ql-link-seg{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.4rem 2.25rem;color:var(--color-over-2);font-family:var(--font-display);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.03em;border-left:1px solid rgba(17,24,39,.2);transition:background-color var(--dur-fast) var(--ease-out);}
/* Round the end segments to match the bar's clip, so the inset hover outline follows the corner instead of being cut off. */
.ql-link-seg:first-child{border-left:0;border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg);}
.ql-link-seg:last-child{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);}
a.ql-link-seg,a.ql-link-seg:link,a.ql-link-seg:visited,a.ql-link-seg:active{color:var(--color-over-2);}
a.ql-link-seg:hover{color:#fff;}
/* Negative outline-offset draws the outline inside the segment, since .ql-links-bar clips overflow. */
.ql-link-seg:hover{background:var(--color-primary-900);outline:2px solid var(--color-secondary-400);outline-offset:-3px;}
.ql-link-icon{display:inline-flex;width:22px;height:22px;flex-shrink:0;}
.ql-link-icon svg{width:100%;height:100%;fill:currentColor;}
@media (max-width:1024px){.ql-links-bar{display:none;}}

/* ---------- Quick Links (mobile carousel) ---------- */
.quicklinks-mobile-section{display:none;}
@media (max-width:1024px){
  .quicklinks-mobile-section{display:block;padding-block:var(--sp-6);}
  .ql-mobile-viewport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);}
  .ql-mobile-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);width:100%;height:170px;background:var(--color-secondary-400);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--color-over-2);text-decoration:none;}
  /* Anchor-qualified so the system a:link{color:#333} (0,1,1) doesn't beat the class rule. */
  a.ql-mobile-card,a.ql-mobile-card:link,a.ql-mobile-card:visited{color:var(--color-over-2);}
  .ql-mobile-icon{display:inline-flex;width:44px;height:44px;}
  .ql-mobile-icon svg{width:100%;height:100%;fill:currentColor;}
  .ql-mobile-label{font-family:var(--font-display);font-weight:800;font-size:1rem;text-align:center;text-transform:uppercase;letter-spacing:.03em;}
}

/* ---------- Gallery ---------- */
.gallery{overflow:hidden;}
.gallery-marquee{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5);}
@media (min-width:1025px){.gallery-marquee{margin-top:0;}}
.gallery-row{display:flex;gap:var(--sp-3);width:max-content;}
.gallery-row-right{margin-left:calc(-1 * (220px + var(--sp-3)) / 2);}
.gallery-item{flex-shrink:0;width:220px;aspect-ratio:1/1;position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--color-gray-100);margin:0;}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-overlay{display:none;}
@media (max-width:640px){
  .gallery-item{width:140px;}
  .gallery-row-right{margin-left:calc(-1 * (140px + var(--sp-3)) / 2);}
}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(9,11,17,.94);z-index:2000;display:none;align-items:center;justify-content:center;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:88vw;max-height:82vh;border-radius:var(--radius-sm);}
.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;}
.lightbox-prev{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);}
.lightbox-next{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);}
.lightbox .icon-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;}
@media (min-width:1025px){.lightbox .icon-btn:hover{background:rgba(255,255,255,.22);}}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-primary-900);color:#fff;padding-block:56px 40px;}
.footer-top{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-bottom:var(--sp-5);}
.footer-logo-mark{width:auto;height:112px;max-width:100%;object-fit:contain;flex-shrink:0;}
.footer-divider{border-top:1px solid var(--color-secondary-400);margin-bottom:var(--sp-6);}
/* Centered flex row so the rendered columns (Visit Us / Connect With Us, and Helpful
   Links when present) sit centered as a group under the logo rather than left-packed
   into a fixed 3-column track. */
.footer-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6) var(--sp-8);align-items:flex-start;}
.footer-col{display:flex;flex-direction:column;align-items:center;text-align:center;}
.footer-col-title{color:#fff;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-3);}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.05rem;}
.contact-list{gap:1rem;}
.contact-list li{font-size:var(--fs-sm);color:#fff;}
.contact-list li > a,.contact-list li > span{display:flex;gap:.6rem;align-items:center;justify-content:center;}
.contact-list svg{width:16px;height:16px;flex-shrink:0;color:#fff;}
.contact-list .contact-address,.contact-value{text-decoration:underline;text-decoration-color:#fff;text-underline-offset:2px;}
.contact-list a.contact-link{text-decoration:underline;text-decoration-color:#fff;text-underline-offset:2px;}
.contact-address-lines{display:inline;}
@media (min-width:1025px){.contact-list a.contact-address:hover,.contact-list a:hover .contact-value{text-decoration-color:#fff;}}
.site-footer a,.site-footer a:link,.site-footer a:visited,.site-footer a:hover,.site-footer a:active{color:#fff;}
.footer-links-columns{display:flex;gap:var(--sp-6);}
.footer-links-columns ul{flex:1;}
.footer-col--links a{font-size:var(--fs-sm);text-decoration:underline;text-decoration-color:#fff;text-underline-offset:2px;}
@media (min-width:1025px){.footer-col--links a:hover{text-decoration-color:#fff;}}
.footer-credit{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-8);}
.powered-by-img{display:inline-flex;height:15px;filter:invert(1) brightness(2);opacity:1;}
.powered-by-img svg{height:100%;width:auto;}
.vendor-login-img{display:inline-flex;align-items:center;gap:.35rem;height:18px;transition:opacity var(--dur-fast) var(--ease-out);opacity:1;}
@media (min-width:1025px){.vendor-login-img:hover{opacity:1;}}
.vendor-login-img svg{height:100%;width:auto;filter:invert(1) brightness(2);}
@media (max-width:1024px){.footer-grid{gap:32px;}.site-footer{padding-top:32px;}}
@media (max-width:640px){.footer-grid{flex-direction:column;align-items:center;}.footer-top{flex-direction:column;}.footer-links-columns{gap:var(--sp-4);}}
@media (max-width:1024px){.footer-credit{margin-top:32px;}}

/* ---------- Mobile section order ---------- */
@media (max-width:1024px){
  #content_main{display:flex;flex-direction:column;gap:0;}
  .brand-block-mobile{order:1;}
  .hero{order:2;}
  .quicklinks-mobile-section{order:3;padding-block:48px;}
  .motto-banner{order:4;margin-top:0;padding-block:32px;}
  .featured{order:5;padding-block:48px;}
  .news{order:7;padding-block:48px;}
  .events{order:9;padding-block:32px;margin-top:48px;}
  .gallery{order:10;padding-block:48px;}
  .gallery-marquee{margin-top:0;}
  .section-head{text-align:center;max-width:none;}
  .spotlights-sticky h2{text-align:center;}
  .ql-mobile-viewport{justify-content:center;}
  .glance-list li{width:100%;}
  .glance-list{padding-inline:20px;}
  h1{font-size:32px;}
  .section-head h2,.spotlights-sticky h2{font-size:36px;}
  .spotlight-card-body h3{font-size:36px;}
}