/*
Theme Name: SDMLC
Description: Custom theme for the San Diego Miramar Lions Club — gold-watermark shell with a day-to-night San Diego skyline motif across section dividers. Built from the club's redesigned homepage (sdmlc_homepage_36.html).
Author: San Diego Miramar Lions Club
Version: 1.0
Text Domain: sdmlc
*/

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --blue:       #0033A0;
    --blue-dark:  #002278;
    --blue-deep:  #001550;
    --blue-deepest: #000f3e;
    --blue-mid:   #1a4bc4;
    --blue-light: #e8eef8;
    --blue-pale:  #f0f4fb;
    --gold:       #FFC72C;
    --gold-dark:  #D4A400;
    --gold-light: #fff8e1;
    --white:      #ffffff;
    --gray-50:    #f8f9fb;
    --gray-100:   #f0f2f7;
    --gray-200:   #e2e6ef;
    --text:       #1e2336;
    --text-muted: #5a6278;
    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    /* layered shadows read as softer/more premium than a single blur */
    --shadow-sm:  0 1px 2px rgba(0,51,160,0.06), 0 2px 6px rgba(0,51,160,0.06);
    --shadow:     0 2px 6px rgba(0,51,160,0.06), 0 8px 20px rgba(0,51,160,0.10);
    --shadow-lg:  0 4px 12px rgba(0,51,160,0.08), 0 18px 40px rgba(0,51,160,0.16);
    --shadow-gold: 0 10px 30px rgba(0,51,160,0.12), 0 0 24px rgba(255,199,44,0.35);
    /* one shared easing + lift so every interactive card feels like one system */
    --ease-out:   cubic-bezier(.22,1,.36,1);
    --lift:       .34s cubic-bezier(.22,1,.36,1);
  }

  html { scroll-behavior: smooth; }
  html, body { min-height: 100%; }
  body {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--text);
    background-color: var(--gold);
    background-image:
      linear-gradient(rgba(255,199,44,0.91), rgba(255,199,44,0.91)),
      url('images/lions-logo-watermark.png');
    background-size: auto, 190px 190px;
    background-position: 0 0, 42px 42px;
    background-attachment: fixed;
    font-size: 16px;
    line-height: 1.6;
  }

  /* --- PAGE WRAPPER --- */
  .page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--white);
    position: relative;
    border-radius: 36px;
    overflow: clip;
  }
  /* fixed header at top of viewport */
  .site-header { background: rgba(0,51,160,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  a { color: inherit; text-decoration: none; }
  .lci-logo { object-fit: contain; display: block; }

  /* --- UTILITY BAR --- */
  .sticky-header-wrap {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: transparent;
  }
  /* viewport-fixed gold layer that fills the rounded corner notches;
     lives OUTSIDE .page-wrap so its fixed background matches the body exactly,
     sits above scrolling content but below the blue header */
  .corner-fill {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 9998;
    pointer-events: none;
    background-color: var(--gold);
    background-image:
      linear-gradient(rgba(255,199,44,0.91), rgba(255,199,44,0.91)),
      url('images/lions-logo-watermark.png');
    background-size: auto, 190px 190px;
    background-position: 0 0, 42px 42px;
    background-attachment: scroll;
  }
  .util-bar { background: rgba(0,34,120,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 6px 0; font-size: 12px; color: rgba(255,255,255,0.75); border-radius: 36px 36px 0 0; }
  .util-inner { padding: 0 28px 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .util-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .util-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
  .util-link { display: flex; align-items: center; gap: 4px; color: rgba(255,255,255,0.75); white-space: nowrap; }
  .util-link:hover { color: var(--gold); }
  .util-link-active { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
  .util-join-link { text-transform: uppercase; letter-spacing: 0.3px; }
  .facebook-logo { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
  .facebook-logo-circle { fill: #1877F2; }
  .facebook-logo-f { fill: #fff; }
  .instagram-logo { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
  .instagram-logo-mark { fill: #E4405F; }
  .cellphone-icon { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .eyeglasses-icon { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .contact-icon { width: 15px; height: 15px; display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .member-icon { width: 17px; height: 17px; display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .donation-icon, .calendar-line-icon { width: 17px; height: 17px; display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .lion-icon { width: 17px; height: 17px; display: inline-block; flex-shrink: 0; object-fit: contain; }
  .util-sep { color: rgba(255,255,255,0.2); }
  .util-cta { background: var(--gold); color: var(--blue-dark); font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 4px 12px; border-radius: 4px; white-space: nowrap; }

  /* --- HEADER --- */
  .site-header { background: rgba(0,51,160,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .header-inner { padding: 0 40px; display: flex; align-items: center; height: 80px; gap: 16px; }

  .logo-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .logo-emblem { width: 80px; height: 80px; flex-shrink: 0; }
  .logo-text .club-name { font-family: 'Merriweather', serif; font-size: 14px; font-weight: 700; color: #fff; display: block; }
  .logo-text .club-sub { font-size: 10px; color: var(--gold); letter-spacing: .07em; text-transform: uppercase; display: block; font-weight: 600; }

  /* Desktop nav */
  .desktop-nav { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 16px; }
  .nav-item { position: relative; }
  .nav-item.has-sub::after { content: ''; position: absolute; left: 0; top: 100%; width: 210px; height: 10px; }
  .nav-link { position: relative; padding: 7px 10px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
  .nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.08); }
  .nav-link:hover { color: #fff; }
  .nav-link.active { color: var(--gold); }
  .nav-link::before { content: ''; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; background: var(--gold); border-radius: 2px; transform: translateX(-50%); transition: width .25s ease, background .2s ease; }
  .nav-link:hover::before, .nav-link.active::before { width: 18px; }
  .nav-link:hover::before { background: #fff; }
  .nav-link.active::before { background: var(--gold); }
  .has-sub > .nav-link::after { content: '\25BE'; font-size: 9px; opacity: .7; }
  .dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: rgba(0,34,120,0.68); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 190px; overflow: hidden; border: 1px solid rgba(255,199,44,0.75); z-index: 300; }
  .nav-item:hover .dropdown { display: block; }
  .dropdown a { display: block; padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(255,199,44,0.22); transition: background .15s, color .15s; }
  .dropdown a:last-child { border-bottom: none; }
  .dropdown a:hover { background: rgba(255,199,44,0.16); color: var(--gold); }
  .nav-spacer { flex: 1; }
  .nav-donate-btn { background: var(--gold); color: var(--blue-dark); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-sm); white-space: nowrap; display: inline-flex; align-items: center; flex-shrink: 0; transition: background .2s, transform .2s; }
  .nav-donate-btn:hover { background: #ffcf4a; transform: translateY(-2px); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .util-cart-btn { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.75); font-size: 14px; white-space: nowrap; transition: color .2s; }
  .util-cart-btn:hover { color: var(--gold); }
  .util-right .util-cart-btn { margin-right: 12px; }
  .sdmlc-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--gold); color: var(--blue-dark); font-size: 11px; font-weight: 700; line-height: 1; border-radius: 999px; }
  .sdmlc-cart-count:empty { display: none; }
  .header-search { position: relative; flex: 0 1 165px; width: 165px; margin-right: 12px; }
  .util-right .header-search { margin-left: auto; }
  .header-search input { width: 100%; height: 24px; padding: 0 28px 0 8px; border: 1px solid rgba(255,255,255,0.32); border-radius: var(--radius-sm); background: rgba(255,255,255,0.96); color: var(--text); font-size: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
  .header-search input::placeholder { color: var(--gray-500); }
  .header-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,184,0,0.22); }
  .header-search button { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 20px; height: 18px; border: none; border-radius: var(--radius-sm); background: var(--blue); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
  .header-search button:hover { background: var(--gold); color: var(--blue-dark); }

  /* Hamburger */
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; margin-left: auto; background: none; border: none; }
  .hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }

  /* Mobile menu */
  .mobile-menu { display: none; position: fixed; top: 88px; left: 0; right: 0; bottom: 0; background: var(--blue-deep); z-index: 10000; overflow-y: auto; padding: 16px 20px 28px; flex-direction: column; }
  .mobile-menu.open { display: flex; }
  .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
  .mobile-nav-link { display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; padding: 11px 8px 11px 0; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.9); }
  .mobile-nav-link:hover { color: var(--gold); }
  .mobile-sub { padding-left: 0; }
  .mobile-sub a { display: block; padding: 9px 0; font-size: 15px; color: rgba(255,255,255,0.72); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .mobile-sub a:hover { color: var(--gold); }
  /* dropdown-only parents (e.g. "About SDMLC") render as a plain heading on
     mobile, not a link — their real destination pages follow as indented
     sub-links right below via .mobile-nav-sublink */
  .mobile-nav-heading { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.9); padding: 11px 8px 4px 0; }
  .mobile-nav-sublink { padding-left: 18px; font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.72); }
  .mobile-section-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 16px 0 6px; }
  .mobile-search { position: relative; width: min(100%, 252px); margin: 0 auto 16px; }
  .mobile-search input { width: 100%; height: 30px; padding: 0 36px 0 10px; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-sm); background: rgba(255,255,255,0.96); color: var(--text); font-size: 15px; outline: none; }
  .mobile-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,184,0,0.24); }
  .mobile-search button { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 24px; height: 22px; border: none; border-radius: var(--radius-sm); background: var(--gold); color: var(--blue-dark); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-payment-panel { margin: 6px 0 14px; }
  .mobile-payment-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .mobile-donate-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: 100%; background: var(--gold); color: var(--blue-dark); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: var(--radius-sm); text-align: center; }
  .mobile-donate-btn .donation-icon { width: 13px; height: 13px; }
  .mobile-cart-link { display: flex; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: 100%; background: var(--blue); border: 1px solid var(--blue); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-sm); text-align: center; transition: background .2s, border-color .2s, color .2s; }
  .mobile-cart-link:hover { background: var(--blue-mid); border-color: var(--blue-mid); color: #fff; }
  .mobile-link-group { margin-top: 4px; }
  .mobile-nav-link .facebook-logo,
  .mobile-nav-link .instagram-logo,
  .mobile-nav-link .contact-icon,
  .mobile-nav-link .cellphone-icon { width: 16px; height: 16px; }

  /* --- HERO --- */
  /* Pure CSS decorative background — no external images */
  /* Geometric accent shapes */
  .we-serve-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; background: var(--gold); color: var(--blue-dark); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 4px; margin-bottom: 20px; }
  .btn-primary-hero { background: var(--gold); color: var(--blue-dark); font-size: 15px; font-weight: 700; padding: 13px 28px; border-radius: var(--radius-sm); display: inline-block; box-shadow: 0 4px 14px rgba(255,199,44,0.28); transition: background var(--lift), transform var(--lift), box-shadow var(--lift); }
  .btn-primary-hero:hover { background: #ffcf4a; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(255,199,44,0.42); }
  .btn-outline-hero { background: transparent; color: #fff; font-size: 15px; font-weight: 500; padding: 12px 26px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,0.4); display: inline-block; transition: border-color .2s, transform .2s; }
  .btn-outline-hero:hover { border-color: rgba(255,255,255,0.75); transform: translateY(-2px); }

  /* --- WAVE DIVIDERS --- */
  .wave-divider { position: relative; height: 0; z-index: 5; pointer-events: none; }
  .wave-divider svg { position: absolute; left: 0; bottom: -1px; width: 100%; height: 72px; display: block; }
  .wave-divider.wave-flip svg { transform: scaleX(-1); }
  .wave-divider.wave-hero svg { height: 22px; }
  .wave-divider.wave-small svg { height: 55px; }
  .wave-divider.wave-reverse svg { top: -1px; bottom: auto; transform: scaleY(-1); }
  .wave-divider.wave-reverse.wave-flip svg { transform: scaleY(-1) scaleX(-1); }
  /* Straight (non-wavy) section divider: a plain solid blue bar, matching
     the header/nav bar's own translucent blue (same rgba value as
     .site-header/.util-bar) rather than a flat opaque fill. */
  .straight-divider-blue { height: 6px; background: rgba(0,51,160,0.88); }
  /* The homepage's original divider (between "How We Serve" and "Upcoming
     Events") predates this header-blue treatment and keeps its own gold
     color — scoped via WordPress's automatic .home body class so it's the
     only instance affected. */
  .home .straight-divider-blue { background: rgba(255,199,44,0.45); }
  /* SD skyline divider: blue continues from the section above and ends in a
     gold-trimmed wave; cream below matches the next section. Fully opaque, so
     it sits in normal flow (-1px margins just prevent hairline gaps). */
  .band-divider { position: relative; z-index: 5; pointer-events: none; margin: -1px 0; line-height: 0; }
  .band-divider svg { display: block; width: 100%; height: auto; }
  .section.pillars-section { padding-top: 32px; padding-bottom: 110px; background: var(--gold-light); }
  @media (max-width: 768px) {
    .wave-divider svg { height: 34px; }
    .wave-divider.wave-hero svg { height: 22px; }
    .wave-divider.wave-small svg { height: 30px; }
    .section.pillars-section { padding-top: 32px; padding-bottom: 48px; }
  }

  /* --- SCROLL REVEAL --- */
  /* --- AMBIENT MOTION --- */
  @keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  @keyframes glowdrift { 0% { transform: translate(0,0); } 50% { transform: translate(24px,18px); } 100% { transform: translate(0,0); } }
  .contact-stars circle, .nite-stars circle { animation: twinkle 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .contact-stars circle:nth-child(3n) { animation-duration: 5.5s; animation-delay: .8s; }
  .contact-stars circle:nth-child(3n+1) { animation-duration: 6.5s; animation-delay: 1.6s; }
  .nite-stars circle:nth-child(3n) { animation-duration: 5s; animation-delay: .5s; }
  .nite-stars circle:nth-child(4n) { animation-duration: 6.2s; animation-delay: 1.3s; }
  .hero::before { animation: glowdrift 16s ease-in-out infinite; }
  .hero::after { animation: glowdrift 22s ease-in-out infinite reverse; }
  /* NOTE: no transform/slide on .hero itself — it's the actual layout box
     directly below the header, so moving it (even via transform) opens a gap
     revealing the white page background behind it until it slides back into
     place. The fade-in is opacity-only via the veil below; .hero never moves. */
  /* Blue veil (matches the hero's own overlay tone) fades away on load, instead
     of fading the hero's own opacity — which would expose the white page
     background behind it. */
  @keyframes heroCoverFade { from { opacity: 1; } to { opacity: 0; } }
  .hero-fade-cover { position: absolute; inset: 0; z-index: 5; background: var(--blue); pointer-events: none; animation: heroCoverFade 1.8s ease-out forwards; }
  @keyframes bannerCoverFade { from { opacity: 1; } to { opacity: 0; } }
  .page-banner-fade-cover { position: absolute; inset: 0; z-index: 5; background: var(--blue); pointer-events: none; animation: bannerCoverFade 1.8s ease-out forwards; }
  @media (prefers-reduced-motion: reduce) {
    .contact-stars circle, .nite-stars circle, .hero::before, .hero::after, .hero, .hero-fade-cover, .page-banner-fade-cover { animation: none; }
    .hero-fade-cover, .page-banner-fade-cover { display: none; }
  }
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 2.2s cubic-bezier(.22,1,.36,1), transform 2.2s cubic-bezier(.22,1,.36,1); }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
  .reveal-delay-1.in-view { transition-delay: .1s; }
  .reveal-delay-2.in-view { transition-delay: .2s; }
  .reveal-delay-3.in-view { transition-delay: .3s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* --- SECTIONS --- */
  .section { padding: 64px 0; }
  .section-soft-divider { border-top: 1px solid rgba(159,176,207,0.28); border-bottom: 1px solid rgba(159,176,207,0.28); }
  .about-section { padding: 42px 0 60px; }
  .section-alt { background: var(--gray-50); }
  .container { max-width: 100%; margin: 0 auto; padding: 0 40px; }
  .section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 8px; display: block; }
  .section-title { font-family: 'Merriweather', serif; font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 12px; }
  .section-desc { font-size: 15px; color: var(--text-muted); line-height: 1.65; max-width: 560px; margin-bottom: 36px; }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 16px; }
  .view-all { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--blue); border-bottom: 2px solid var(--gold); padding-bottom: 1px; white-space: nowrap; transition: gap .25s ease, color .2s; }
  .view-all:hover { gap: 9px; color: var(--blue-mid); }

  /* --- ABOUT --- */
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  /* Illustrated photo card — no external image needed */
  .about-photo-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .about-photo {
    width: 100%;
    height: 100%;
    /* Shorter box so the wide panorama crops less at the sides — shows more of
       the group. Lower this further to reveal more, raise it to crop more. */
    min-height: 250px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s ease;
  }
  .about-photo-wrap:hover .about-photo {
    transform: scale(1.06);
    border-radius: var(--radius-lg);
  }
  .about-badge {
    position: absolute; bottom: 20px; left: 20px; z-index: 2;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
    color: #fff; border-radius: var(--radius); padding: 12px 16px;
    font-size: 12px; border: 1px solid rgba(255,199,44,0.3);
  }
  .about-badge strong { display: block; font-size: 20px; font-weight: 700; color: var(--gold); }
  .about-text p { font-size: 15px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.7; }
  .btn-blue { display: inline-block; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 22px; border-radius: var(--radius-sm); transition: background var(--lift), transform var(--lift), box-shadow var(--lift); }
  .btn-blue:hover { background: var(--blue-mid); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,51,160,0.28); }
  .btn-blue-outline { display: inline-block; background: transparent; color: var(--gold); border: 2px solid var(--gold); font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: var(--radius-sm); transition: background .2s, color .2s, transform .2s; }
  .btn-blue-outline:hover { background: var(--gold); color: var(--blue-dark); transform: translateY(-2px); }

  /* --- PILLARS --- */
  .pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .pillar-card { background: var(--white); border-radius: var(--radius-lg); padding: 26px 22px; border: 1px solid var(--gray-200); border-top: 4px solid var(--blue); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
  .pillar-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-lg); transition: transform var(--lift), box-shadow var(--lift), border-color var(--lift); }
  .pillar-card.vision-card:hover,
  .pillar-card.community-card:hover { border-color: rgba(255,199,44,0.85); box-shadow: 0 14px 34px rgba(0,51,160,0.14), 0 0 26px rgba(255,199,44,0.55); }
  .pillar-card.veterans-card:hover { border-color: rgba(0,51,160,0.75); box-shadow: 0 14px 34px rgba(0,51,160,0.14), 0 0 28px rgba(0,51,160,0.42); }
  .pillar-card.veterans-card { border-top-color: var(--gold-dark); }
  .pillar-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 0.30; }
  .pillar-card.veterans-card .pillar-bg-img { opacity: 0.32; }
  .pillar-title, .pillar-desc { position: relative; z-index: 1; }
  .pillar-icon-wrap { width: 50px; height: 50px; background: linear-gradient(150deg, var(--blue-light), #d6e2f6); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; position: relative; z-index: 1; transition: transform var(--lift); }
  .pillar-card:hover .pillar-icon-wrap { transform: scale(1.08) rotate(-3deg); }
  /* Join-the-Lions page: gold top accent + light-blue/gold step numbers,
     instead of the homepage pillar cards' blue accent + blue icon color. */
  .join-steps-grid .pillar-card { border-top-color: var(--gold); }
  .join-step-num { font-family: 'Merriweather', serif; font-weight: 700; font-size: 22px; color: var(--gold); background: rgba(0,51,160,0.78); }
  .pillar-title { font-family: 'Merriweather', serif; font-size: 16px; font-weight: 700; color: var(--blue-dark); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(255,255,255,0.92); }
  .pillar-desc { font-size: 14px; font-weight: 500; color: #4a5266; line-height: 1.65; text-shadow: 0 1px 8px rgba(255,255,255,0.92); }

  /* --- GLASSES STRIP --- */
  .glasses-strip { background: linear-gradient(135deg, rgba(0,34,120,0.78) 0%, rgba(0,51,160,0.78) 100%); border-radius: var(--radius-xl); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 2px solid rgba(255,199,44,0.25); }
  .glasses-left { display: flex; align-items: center; gap: 16px; }
  .glasses-icon { font-size: 34px; flex-shrink: 0; }
  .glasses-text h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px; }
  .glasses-text p { font-size: 13px; color: rgba(255,255,255,0.65); }
  .glasses-phone { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--blue-dark); font-size: 15px; font-weight: 700; padding: 11px 22px; border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0; transition: background .2s, transform .2s; }
  .glasses-phone:hover { background: #ffcf4a; transform: translateY(-2px); }

  /* --- EVENTS --- */
  .events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
  .event-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 18px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow-sm); }
  .event-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: rgba(255,199,44,0.6); transition: box-shadow var(--lift), transform var(--lift), border-color var(--lift); }
  .event-date-block { width: 52px; height: 60px; background: linear-gradient(160deg, var(--blue-mid), var(--blue-dark)); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
  .edb-month { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
  .edb-day { font-family: 'Merriweather', serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
  .event-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--blue-light); color: var(--blue); padding: 2px 7px; border-radius: 3px; margin-bottom: 5px; }
  .event-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .event-meta { font-size: 12px; color: var(--text-muted); }

  .cal-highlight { background: linear-gradient(135deg, rgba(0,34,120,0.78) 0%, rgba(0,51,160,0.78) 100%); border-radius: var(--radius-xl); padding: 28px; display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
  .cal-icon-big { flex-shrink: 0; color: var(--gold); display: flex; align-items: center; justify-content: center; }
  .cal-icon-big .calendar-line-icon { width: 38px; height: 38px; }
  .cal-text { flex: 1; }
  .cal-text h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 5px; }
  .cal-text p { font-size: 13px; color: rgba(255,255,255,0.65); }
  .btn-gold-sm { display: inline-block; background: var(--gold); color: var(--blue-dark); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0; transition: background .2s, transform .2s; }
  .btn-gold-sm:hover { background: #ffcf4a; transform: translateY(-2px); }

  .archive-tease { background: var(--gray-100); border: 1px solid var(--gray-200); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .archive-tease strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }
  .archive-tease p { font-size: 13px; color: var(--text-muted); }

  /* --- PHOTO STRIP --- */
  .photo-strip { background: var(--blue-deep); padding: 22px 0; text-align: center; position: relative; overflow: hidden; }
  .photo-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,199,44,0.07) 0%, transparent 70%); }
  .photo-strip-inner { position: relative; z-index: 1; padding: 0 40px; }
  .photo-strip h2 { font-family: 'Merriweather', serif; font-size: 18px; color: #fff; margin-bottom: 8px; }
  .photo-strip p { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 24px; }
  .btn-gold-outline { display: inline-block; border: 2px solid var(--gold); color: var(--gold); font-size: 14px; font-weight: 700; padding: 11px 28px; border-radius: var(--radius-sm); }
  .btn-gold-outline:hover { background: var(--gold); color: var(--blue-dark); }

  /* --- CONTACT --- */
  .contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .contact-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)); border: 1px solid rgba(255,199,44,0.45); border-radius: var(--radius-lg); padding: 24px 22px; overflow: hidden; }
  .contact-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); opacity: .8; transition: opacity var(--lift); }
  .contact-card:hover { transform: translateY(-6px); background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07)); border-color: rgba(255,199,44,0.75); box-shadow: 0 16px 34px rgba(0,0,0,0.30), 0 0 26px rgba(255,199,44,0.22); transition: transform var(--lift), background var(--lift), box-shadow var(--lift), border-color var(--lift); }
  .contact-card:hover::before { opacity: 1; }
  .cc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .cc-icon { width: 44px; height: 44px; background: linear-gradient(150deg, rgba(255,199,44,0.32), rgba(255,199,44,0.14)); border: 1px solid rgba(255,199,44,0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; transition: transform var(--lift); }
  .contact-card:hover .cc-icon { transform: scale(1.08); }
  .contact-section { position: relative; }
  .contact-section .container { position: relative; }
  .contact-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .cc-icon .cellphone-icon { width: 24px; height: 24px; color: #9fb0cf; }
  .cc-icon .contact-icon { width: 24px; height: 24px; color: #9fb0cf; }
  .cc-title { font-size: 15px; font-weight: 700; color: var(--gold); line-height: 1.3; }
  .cc-title a { color: var(--gold); text-decoration: none; }
  .cc-body { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.65; }
  .cc-body a { color: var(--gold); text-decoration: underline; }
  .cc-body a.phone-card-link { text-decoration: none; }
  .cc-body strong { color: #fff; }

  /* --- JOIN CTA --- */
  .join-section { background: url("images/join-cta-background.jpg") center center / cover no-repeat; padding: 52px 0; }
  .join-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .join-text h2 { font-family: 'Merriweather', serif; font-size: 24px; color: var(--blue-dark); margin-bottom: 10px; }
  .join-text p { font-size: 15px; color: var(--blue); max-width: 520px; line-height: 1.65; }
  .join-btns { display: flex; gap: 12px; flex-shrink: 0; }

  /* --- LCI SECTION --- */
  .lci-section { background: var(--blue); padding: 30px 0 48px; }
  .lci-inner { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
  .lci-content { flex: 1; }
  .lci-logo-wrap { flex-shrink: 0; }
  .lci-content h2 { font-family: 'Merriweather', serif; font-size: 22px; color: #fff; margin-bottom: 10px; }
  .lci-content p { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.65; margin-bottom: 20px; }
  .lci-links { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn-white { display: inline-block; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: var(--radius-sm); transition: background .2s, transform .2s; }
  .btn-white:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }
  .join-btn { display: inline-block; background: var(--blue); border: 1px solid var(--blue); color: var(--gold); font-size: 15px; font-weight: 700; padding: 13px 28px; border-radius: var(--radius-sm); transition: background .2s, border-color .2s, color .2s, transform .2s; }
  .join-btn:hover { background: rgba(0,34,120,0.94); border-color: rgba(0,34,120,0.98); color: var(--gold); transform: translateY(-2px); }

  /* --- FOOTER --- */
  .footer { background: linear-gradient(rgba(0,21,80,0.62), rgba(0,21,80,0.62)), url("images/footer-blue-gold-background.png") center center / cover no-repeat; padding: 48px 0 24px; border-radius: 0 0 36px 36px; }
  .footer-grid { display: grid; grid-template-columns: minmax(270px,1.45fr) repeat(3,minmax(145px,1fr)); column-gap: clamp(34px,6vw,82px); row-gap: 32px; align-items: start; margin-bottom: 36px; padding: 0 40px; }
  .footer-brand { max-width: 300px; }
  .footer-link-col { transform: translate(42px, 14px); }
  .footer-brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 100%; margin: 0 0 18px; text-align: center; }
  .footer-brand-lockup .lci-logo { width: 92px; height: 92px; }
  .club-name-f { font-family: 'Merriweather', serif; font-size: 15px; color: #fff; font-weight: 700; margin-bottom: 3px; }
  .district-f { font-size: 11px; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
  .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 16px; }
  .footer-social { display: flex; justify-content: center; gap: 8px; }
  .social-btn { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: background .2s ease, transform .2s ease; }
  .social-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); }
  .social-btn .facebook-logo { width: 18px; height: 18px; }
  .social-btn .instagram-logo { width: 18px; height: 18px; }
  .social-btn .cellphone-icon { width: 18px; height: 18px; color: var(--gold); }
  .social-btn .contact-icon { width: 18px; height: 18px; color: var(--gold); }
  .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
  .footer-links-list { list-style: none; }
  .footer-links-list li { margin-bottom: 5px; }
  .footer-links-list a { font-size: 13px; color: rgba(255,255,255,0.55); }
  .footer-links-list a:hover { color: var(--gold); }
  .footer-info-block { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.55; }
  .footer-info-block strong { display: block; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
  .footer-info-block a { color: var(--gold); }
  .footer-info-block a:hover { color: #fff; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-left: 40px; padding-right: 40px; }
  .footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.35); }
  .we-serve-footer { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }

  /* --- MOBILE RESPONSIVE --- */
  @media (max-width: 768px) {
    /* Utility bar: hide on mobile */
    .util-bar { display: none; }
    .site-header { border-radius: 0; }
    .page-wrap { border-radius: 0; }
    .footer { border-radius: 0; }
    .corner-fill { display: none; }

    /* Header */
    .header-inner { height: 72px; }
    .logo-text .club-name { font-size: 12px; }
    .logo-text .club-sub { display: none; }
    .logo-emblem { width: 70px; height: 70px; }
    .desktop-nav { display: none; }
    .hamburger { display: flex; }

    /* Hero */
    .btn-primary-hero, .btn-outline-hero { font-size: 14px; padding: 11px 20px; }

    /* About: stack */
    .about-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-illustration { aspect-ratio: 16/9; padding: 24px; }

    /* Pillars: stack */
    .pillars-grid { grid-template-columns: 1fr; gap: 14px; }
    .pillar-card { min-height: 200px; }

    /* Glasses strip: stack */
    .glasses-strip { flex-direction: column; align-items: flex-start; padding: 22px 20px; border-radius: var(--radius-lg); }
    .glasses-phone { width: 100%; justify-content: center; }

    /* Events: single column */
    .events-grid { grid-template-columns: 1fr; gap: 12px; }
    .cal-highlight { flex-direction: column; align-items: flex-start; padding: 22px; }
    .btn-gold-sm { width: 100%; text-align: center; }
    .archive-tease { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Contact: stack */
    .contact-grid { grid-template-columns: 1fr; gap: 14px; }
    .contact-section { padding-top: 26px !important; padding-bottom: 28px !important; }

    /* Join: stack */
    .join-section { background-size: cover; background-position: center; }
    .join-inner { flex-direction: column; }
    .join-btns { flex-direction: column; width: 100%; }
    .join-btns a { text-align: center; }

    /* LCI: stack */
    .lci-inner { flex-direction: column; gap: 24px; text-align: center; }
    .lci-links { justify-content: center; }
    .lci-logo-wrap { display: flex; justify-content: center; }
    .lci-logo { width: 100px; height: 100px; }

    /* Footer: brand full-width, then 2-col link columns below */
    .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 16px; }
    .footer-brand { max-width: none; grid-column: 1 / -1; }
    .footer-link-col { transform: none; }
    .footer-brand-lockup { align-items: flex-start; text-align: left; }
    .footer-social { justify-content: flex-start; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer { background-size: cover; background-position: center; padding-top: 12px; }

    /* section padding */
    .section { padding: 44px 0; }
    .about-section { padding: 28px 0 28px; }
    .section-title { font-size: 22px; }
    .container { padding: 0 20px; }
    .util-inner, .header-inner { padding: 0 16px; }
    .footer-grid { padding: 0 20px; }
    .footer-bottom { padding-left: 20px; padding-right: 20px; }
  }

  @media (max-width: 768px) {
    .hero { padding-top: 8px; min-height: auto; }
    .hero-inner { flex-direction: column; }
    .hero-content { flex: none; width: 100%; padding: 36px 20px 28px; }
    .hero-photo-panel { flex: none; width: 100%; height: 220px; position: relative; }
    .hero h1 { font-size: 22px; margin-bottom: 14px; }
    .hero h1 br { display: none; }
    .hero-sub { font-size: 14px; margin-bottom: 20px; }
    .hero-btns { gap: 10px; margin-bottom: 24px; }
    .hero-stats { gap: 16px; padding-top: 20px; }
    .hero-stat-val { font-size: 20px; }
  }

  @media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand-lockup { align-items: center; text-align: center; }
    .footer-social { justify-content: center; }
  }

  /* --- HERO --- */
  .hero {
    /* Solid fallback so the gradients' transparent regions never reveal the
       white page background behind them while the photo image is loading. */
    background-color: var(--blue-dark);
    background-image:
      linear-gradient(to bottom, transparent 80%, rgba(0,51,160,0.18) 89%, rgba(0,51,160,0.48) 96%, var(--blue) 100%),
      linear-gradient(90deg, rgba(0,34,120,0.80) 0%, rgba(0,34,120,0.55) 44%, rgba(0,34,120,0.10) 100%),
      url('images/sdmlc-main-pic.jpg');
    background-position: center center, center center, center center;
    background-size: cover, cover, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 520px;
  }
  .hero::before, .hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 1;
    pointer-events: none;
  }
  .hero::before {
    width: 380px;
    height: 380px;
    top: -130px;
    left: 6%;
    background: radial-gradient(circle, rgba(255,199,44,0.38), transparent 70%);
  }
  .hero::after {
    width: 460px;
    height: 460px;
    bottom: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(26,75,196,0.5), transparent 70%);
  }
  .hero-inner {
    width: 100%;
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
  }
  .hero-content {
    flex: 0 0 58%;
    padding: 60px 40px 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-photo-panel {
    display: none;
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
  }
  .hero-photo-panel img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .hero h1 { font-family: 'Merriweather', serif; font-size: 38px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 18px; }
  .hero h1 em { font-style: normal; color: var(--gold); }
  .hero-sub { font-size: 16px; color: rgba(255,255,255,0.76); line-height: 1.65; margin-bottom: 28px; max-width: 480px; }
  .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
  .hero-stats { display: flex; gap: 28px; padding-top: 12px; flex-wrap: wrap; }
  .hero-stat-val { font-family: 'Merriweather', serif; font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 4px; }
  .hero-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: .06em; }
  .we-serve-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; background: var(--gold); color: var(--blue-dark); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 4px; margin-bottom: 20px; }

  @media (max-width: 768px) {
    .mobile-menu { top: 72px; }
    .hero {
      padding-top: 0;
      min-height: auto;
      background:
        linear-gradient(to bottom, transparent 78%, rgba(0,51,160,0.20) 89%, rgba(0,51,160,0.55) 96%, var(--blue) 100%),
        linear-gradient(90deg, rgba(0,34,120,0.84) 0%, rgba(0,34,120,0.60) 58%, rgba(0,34,120,0.26) 100%),
        url('images/sdmlc-main-pic.jpg') center center / cover no-repeat;
    }
    .hero-inner { flex-direction: column; }
    .hero-content {
      flex: none;
      width: 100%;
      padding: 36px 20px 30px;
    }
    .hero h1 { font-size: 22px; margin-bottom: 14px; }
    .hero h1 br { display: none; }
    .hero-sub { font-size: 14px; margin-bottom: 20px; }
    .hero-btns { gap: 10px; margin-bottom: 24px; }
    .hero-stats { gap: 16px; padding-top: 20px; }
    .hero-stat-val { font-size: 20px; }
  }

@media print {
  @page { size: 1300px 1800px; margin: 0; }
  body { min-width: 1300px; }
  .util-bar { display: flex !important; }
  .desktop-nav { display: flex !important; }
  .hamburger { display: none !important; }
  .about-grid { grid-template-columns: 1fr 1fr !important; }
  .pillars-grid { grid-template-columns: repeat(3,1fr) !important; }
  .events-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-grid { grid-template-columns: repeat(3,1fr) !important; }
  .join-inner { flex-direction: row !important; }
  .join-btns { flex-direction: row !important; width: auto !important; }
  .lci-inner { flex-direction: row !important; text-align: left !important; }
  .footer-grid { grid-template-columns: minmax(270px,1.45fr) repeat(3,minmax(145px,1fr)) !important; }
  .footer-brand { max-width: 300px !important; grid-column: auto !important; }
  .hero-inner { flex-direction: row !important; }
  .hero-content { flex: 0 0 55% !important; width: auto !important; }
  .hero-photo-panel { display: none !important; flex: 1 !important; width: auto !important; height: auto !important; }
  .section-title { font-size: 26px !important; }
  .container { padding: 0 40px !important; }
  .header-inner { height: 88px !important; padding: 0 40px !important; }
}

/* ===== PAGE TEMPLATES (shared across Leadership, Gallery, Members Area, and
   generic interior pages via page.php) ===== */
.page-banner { position: relative; background: linear-gradient(90deg, rgba(0,34,120,0.94) 0%, rgba(0,34,120,0.80) 55%, rgba(0,34,120,0.60) 100%), var(--blue); padding: 56px 0 120px; text-align: center; overflow: hidden; }
.page-banner::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); top: -160px; right: -80px; background: radial-gradient(circle, rgba(255,199,44,0.30), transparent 70%); pointer-events: none; }
.page-banner-no-glow::after { display: none; }
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { font-family: 'Merriweather', serif; font-size: 34px; font-weight: 700; color: #fff; margin: 8px 0 12px; }
.page-banner h1 em { font-style: normal; color: var(--gold); }
.page-banner p { color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto; font-size: 15px; line-height: 1.7; }
/* Lions page banner: the collage is a full scene meant to be seen whole,
   so this banner uses background-size:contain + an aspect-ratio locked to
   the source photo's own ratio (1672x941). aspect-ratio gives the section
   the right height for the current width, and contain guarantees the ENTIRE
   image fits with nothing cropped (unlike cover, which crops to fill).
   The class is set directly on the element in page.php — WordPress does NOT
   emit a .page-lions body class, so a body-class-scoped rule never matched. */
.page-banner-lions { aspect-ratio: 1672 / 941; padding: 0; display: flex; align-items: center; justify-content: center; }
.page-banner-lions .container { position: relative; z-index: 2; }
/* Join the Lions banner: taller than the default .page-banner (56px/120px
   padding) so more of the group photo shows above/below the title text
   instead of being cropped by the default bottom padding. */
.page-banner-joinus { padding: 70px 0 220px; }
/* Cart banner: taller than the default .page-banner so cartbanner.jpg's
   wide landscape photo shows more of its content instead of being
   heavily cropped by background-size:cover at the default height. */
.page-banner-cart { padding: 70px 0 220px; }
/* Thin banner: thinner than the default .page-banner (56px/120px padding)
   — for pages with no photo to show off (Checkout, individual news posts),
   less vertical space spent on the banner leaves more room for the
   content below. */
.page-banner-thin { padding: 32px 0 44px; }
.placeholder-note { max-width: 760px; margin: 0 auto 30px; text-align: center; font-size: 13px; color: var(--text-muted); background: var(--gold-light); border: 1px dashed var(--gold-dark); border-radius: var(--radius); padding: 10px 16px; }

/* --- Leadership: officer + member grids --- */
.leader-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.leader-card { padding: 26px 20px; text-align: center; }
.leader-card:hover { transform: translateY(-8px); transition: transform var(--lift); }
.leader-avatar { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(150deg, var(--blue-mid), var(--blue-dark)); color: #fff; font-family: 'Merriweather', serif; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid var(--gold); box-shadow: 0 6px 16px rgba(0,51,160,0.25); transition: transform var(--lift); overflow: hidden; }
.leader-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.leader-card:hover .leader-avatar { transform: scale(1.06); }
.leader-name { font-family: 'Merriweather', serif; font-size: 16px; font-weight: 700; color: var(--text); }
.leader-role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-dark); margin: 3px 0 8px; }
.leader-note { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* --- History page: reverse-chronological leadership-year timeline ---
   A vertical rail with a dot per year, no card boxes/borders/shadows —
   reads as a timeline rather than a stack of panels. */
.history-timeline { position: relative; max-width: 860px; margin: 0 auto; padding-left: 30px; }
.history-timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--gray-200); }
.history-timeline-item { position: relative; padding-bottom: 38px; }
.history-timeline-item:last-child { padding-bottom: 0; }
.history-timeline-item::before {
  content: ''; position: absolute; left: -30px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold-dark); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--gray-200);
}
.history-timeline-item.is-current::before { width: 14px; height: 14px; left: -31.5px; top: 3px; background: var(--gold); box-shadow: 0 0 0 4px rgba(255,199,44,0.28); }
.history-year-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-200); }
.history-year-label { font-family: 'Merriweather', serif; font-size: 19px; font-weight: 700; color: var(--blue-dark); }
.history-timeline-item.is-current .history-year-label { color: var(--gold-dark); }
.history-year-range { font-size: 13px; color: var(--text-muted); }
.history-current-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--gold); color: var(--blue-deep); padding: 3px 10px; border-radius: 20px; }
.history-officer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; }
.history-officer-row { font-size: 14px; line-height: 1.5; }
.history-officer-row .role { color: var(--text-muted); font-weight: 600; }
.history-officer-row .name { color: var(--text); font-weight: 600; }
@media (max-width: 600px) {
  .history-timeline { padding-left: 22px; }
  .history-timeline-item::before { left: -22px; }
  .history-timeline-item.is-current::before { left: -23.5px; }
}

/* --- Club Formation / Charter info strip: plain inline stat pair, no card --- */
.history-formation-strip { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; margin: 0 auto 8px; }
.history-formation-item { display: flex; align-items: center; gap: 12px; }
.history-formation-icon { flex-shrink: 0; color: var(--gold-dark); display: flex; }
.history-formation-icon svg { width: 26px; height: 26px; }
.history-formation-label { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.history-formation-value { display: block; font-family: 'Merriweather', serif; font-size: 16px; font-weight: 700; color: var(--blue-dark); }
.history-formation-divider { width: 1px; height: 34px; background: var(--gray-200); }
@media (max-width: 500px) {
  .history-formation-divider { display: none; }
}
.member-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.member-card { padding: 18px 12px; text-align: center; }
.member-card:hover { transform: translateY(-5px); transition: transform var(--lift); }
.member-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 10px; background: var(--blue-light); color: var(--blue-dark); font-family: 'Merriweather', serif; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,199,44,0.6); overflow: hidden; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.member-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.member-since { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 900px) { .leader-grid { grid-template-columns: 1fr 1fr; } .member-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 560px) { .leader-grid { grid-template-columns: 1fr 1fr; } .member-grid { grid-template-columns: repeat(3,1fr); } }

/* --- Gallery: spotlight banner + filterable grid + lightbox --- */
.gallery-spotlight { position: relative; max-width: 720px; margin: 56px auto 60px; border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-lg); }
.gallery-spotlight-media { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; background: var(--blue-deepest); transition: transform .8s var(--ease-out); }
.gallery-spotlight:hover .gallery-spotlight-media { transform: scale(1.03); }
.gallery-spotlight::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,21,80,0.88)); pointer-events: none; }
.gallery-spotlight-badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--gold); color: var(--blue-dark); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; box-shadow: var(--shadow-sm); }
.gallery-spotlight-play { width: 74px; height: 74px; }
.gallery-spotlight-play::after { border-width: 13px 0 13px 21px; }
.gallery-spotlight:hover .gallery-play { background: var(--gold); transform: translate(-50%,-50%) scale(1.08); }
.gallery-spotlight:hover .gallery-play::after { border-left-color: var(--blue-dark); }
.gallery-spotlight-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 26px; color: #fff; font-size: 18px; font-weight: 700; font-family: 'Merriweather', serif; }
.gallery-spotlight-cap span { display: block; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
@media (max-width: 640px) { .gallery-spotlight-media { aspect-ratio: 4/3; } .gallery-spotlight-cap { font-size: 15px; padding: 16px 18px; } }
.gallery-active-cat { text-align: left; text-transform: uppercase; letter-spacing: .04em; font-family: 'Merriweather', serif; font-size: 18px; font-weight: 700; color: var(--blue); margin: 0 0 22px; }

/* --- Donate page: tab switcher (Donate / Pay Club Dues / Charter Night) + amount cards --- */
.donate-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.donate-tab { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 8px 20px; cursor: pointer; text-decoration: none; transition: background var(--lift), color var(--lift), border-color var(--lift); }
.donate-tab:hover { border-color: var(--gold); }
.donate-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.donate-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }
.donate-amount-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  background-image: url('images/donatecard.jpg'); background-size: cover; background-position: center;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 22px 18px; text-align: center;
  transition: transform var(--lift), box-shadow var(--lift);
}
.donate-amount-card::before {
  content: ''; position: absolute; inset: 0;
  /* Strong tint held further down (through ~50%) so the button below the
     text still sits on a solid, high-contrast backdrop instead of fading
     into the busy photo, which was making it look flat/off-color. */
  background: linear-gradient(to bottom, rgba(0,21,80,0.8) 0%, rgba(0,21,80,0.72) 45%, rgba(0,21,80,0.26) 68%, transparent 100%);
}
.donate-amount-card > * { position: relative; z-index: 1; }
/* .donate-amount-card is a column flexbox with no align-items set, so its
   default "stretch" was forcing the button to the card's full width —
   hence the flat, left-aligned-text look instead of a compact centered
   pill like the nav bar's version. align-self shrink-wraps it back down;
   the shadow gives it the same sense of depth the nav button has. */
.donate-amount-card .nav-donate-btn { align-self: center; justify-content: center; padding-left: 22px; padding-right: 22px; box-shadow: 0 4px 14px rgba(255,199,44,0.28); }
.donate-amount-card .nav-donate-btn:hover { box-shadow: 0 8px 20px rgba(255,199,44,0.4); }
.donate-amount-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.donate-amount { font-family: 'Merriweather', serif; font-size: 30px; font-weight: 700; color: #fff; }
.donate-amount-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); margin-top: 2px; }
.donate-amount-desc { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.55; margin: 10px 0 18px; }

/* Pay Club Dues cards: smaller, price/length pinned top-left, button
   pinned bottom-center, description moved out of the card entirely (see
   .dues-amount-desc-below) — a distinct layout from the Donate-tier cards,
   which keep the original centered/stacked look. */
.dues-cards-grid { max-width: 640px; gap: 40px; }
.dues-card-wrap { display: flex; flex-direction: column; }
.dues-amount-card {
  /* Square, not 4:3 — the mascot art is a circle inscribed in a square with
     transparent corners, so a square card shows the whole circle edge-to-edge
     (nothing cropped) with the corners falling away to the page behind it. A
     4:3 card instead left cream letterbox bars on the left/right of the circle
     (the "white background" that needed to go); a square card has none. */
  aspect-ratio: 1 / 1; padding: 16px; justify-content: flex-start;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  background-color: transparent;
  /* Base rule clips children to the card's 16px rounded corners, which would
     shave the corner off the price chip now that it's tucked right into the
     corner. Safe to release here: the ::before tint is off and the circular
     artwork already has its own transparent corners, so the card's own
     border-radius has nothing left to clip. */
  overflow: visible;
}
/* No dark tint on these — the mascot art has a transparent background
   (see femalelion.png/malelion.png) so the card blends into the page
   instead of showing a hard white square behind the circle badge. */
.donate-amount-card.dues-amount-card::before { display: none; }
/* Price + duration sit in a dark rounded chip pinned to the card's top-left
   corner — i.e. over the circle's transparent corner rather than on the
   artwork, which keeps the mascot's face unobstructed. The chip background
   is what keeps the text (the duration especially) legible there. */
.donate-amount-card.dues-amount-card > .dues-card-topleft {
  position: absolute; top: 0; left: 0; text-align: left;
  background: rgba(0,15,62,0.82); padding: 6px 11px 7px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.dues-card-topleft .donate-amount { font-size: 19px; color: #fff; line-height: 1.1; }
.dues-card-topleft .donate-amount-label {
  font-size: 12px; color: var(--gold); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-top: 2px;
}
.donate-amount-card.dues-amount-card > .dues-card-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); align-self: auto; }
.donate-amount-card.dues-amount-card > .dues-card-btn:hover { transform: translateX(-50%); }
.dues-amount-desc-below { font-size: 13px; color: var(--text); line-height: 1.55; text-align: center; margin: 12px 0 0; }

.gallery-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.gallery-filter { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 7px 16px; cursor: pointer; text-decoration: none; transition: background var(--lift), color var(--lift), border-color var(--lift); }
.gallery-filter:hover { border-color: var(--gold); }
.gallery-filter.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.gallery-item video { background: var(--blue-deepest); }
/* play badge over video tiles */
.gallery-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,21,80,0.55); border: 2px solid rgba(255,255,255,0.9); pointer-events: none; transition: background var(--lift), transform var(--lift); }
.gallery-play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.gallery-item:hover .gallery-play { background: var(--gold); transform: translate(-50%,-50%) scale(1.08); }
.gallery-item:hover .gallery-play::after { border-left-color: var(--blue-dark); }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,21,80,0.82)); opacity: .55; transition: opacity var(--lift); }
/* transition lives on :hover only (not the base rule) — a same/lower-
   specificity transition on the base rule would overwrite .reveal's own
   2.2s fade-up entrance transition, since .gallery-item carries .reveal
   and this rule comes later in the stylesheet (same bug/fix as the
   pillar/event/contact/history-year cards). */
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); transition: transform var(--lift), box-shadow var(--lift); }
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.08); }
.gallery-item:hover::after { opacity: .85; }
.gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px; color: #fff; font-size: 13px; font-weight: 600; transform: translateY(6px); opacity: 0; transition: opacity var(--lift), transform var(--lift); }
.gallery-item:hover .gallery-cap { opacity: 1; transform: none; }
.gallery-cap span { display: block; font-size: 11px; font-weight: 500; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,8,32,0.93); display: none; align-items: center; justify-content: center; z-index: 20000; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; text-align: center; max-width: 92%; max-height: 90%; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 80vh; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.6); border: 3px solid var(--gold); display: block; margin: 0 auto; }
.lightbox video { background: #000; }
.lightbox figcaption { color: #fff; font-size: 14px; margin-top: 14px; }
.lb-btn { position: absolute; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--lift); }
.lb-btn:hover { background: var(--gold); color: var(--blue-dark); border-color: var(--gold); }
.lb-close { top: 22px; right: 26px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr 1fr; } .lb-prev { left: 10px; } .lb-next { right: 10px; } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

/* --- Members Area: login mockup + benefits grid --- */
.login-wrap { max-width: 430px; margin: 0 auto; }
.login-card { background: var(--white); border: 1px solid var(--gray-200); border-top: 4px solid var(--gold); border-radius: var(--radius-lg); padding: 34px 30px 30px; box-shadow: var(--shadow-lg); }
.login-lock { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(150deg, var(--blue-mid), var(--blue-dark)); display: flex; align-items: center; justify-content: center; border: 3px solid var(--gold); box-shadow: 0 6px 16px rgba(0,51,160,0.25); }
.login-lock svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 2; }
.login-card h2 { text-align: center; font-family: 'Merriweather', serif; font-size: 22px; color: var(--text); margin-bottom: 4px; }
.login-card .sub { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.field input, .field textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); outline: none; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,199,44,0.18); }
.login-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-bottom: 20px; color: var(--text-muted); }
.login-row a { color: var(--blue); font-weight: 600; }
.login-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.login-btn { width: 100%; background: var(--blue); color: #fff; border: none; padding: 13px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; cursor: pointer; transition: background var(--lift), transform var(--lift), box-shadow var(--lift); }
.login-btn:hover { background: var(--blue-mid); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,51,160,0.28); }
.login-foot { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 18px; }
.login-foot a { color: var(--blue); font-weight: 600; }
.login-msg { display: none; margin-top: 14px; text-align: center; font-size: 13px; color: var(--blue-dark); background: var(--gold-light); border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 9px 12px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.benefit-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); transition: transform var(--lift), box-shadow var(--lift), border-color var(--lift); }
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255,199,44,0.6); }
.benefit-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(150deg, var(--blue-light), #d6e2f6); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; }
.benefit-card h3 { font-family: 'Merriweather', serif; font-size: 16px; color: var(--blue); margin-bottom: 6px; }
.benefit-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 768px) { .benefit-grid { grid-template-columns: 1fr; } }

/* --- Generic interior page (page.php) --- */
.page-content-section { padding: 40px 0 64px; }
.page-content-section .entry-content { max-width: 780px; margin: 0 auto; font-size: 15px; line-height: 1.75; color: var(--text); }
.page-content-section .entry-content h2 { font-family: 'Merriweather', serif; font-size: 24px; color: var(--blue-dark); margin: 28px 0 12px; }
.page-content-section .entry-content h3 { font-family: 'Merriweather', serif; font-size: 19px; color: var(--blue-dark); margin: 22px 0 10px; }
.page-content-section .entry-content p { margin-bottom: 16px; }
.page-content-section .entry-content ul, .page-content-section .entry-content ol { margin: 0 0 16px 22px; }
.page-content-section .entry-content a { color: var(--blue); text-decoration: underline; }
.page-content-section .entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }

/* --- WordPress image alignment classes (classic editor: align left/center/
   right). The theme was missing these, so "Align center" on an image did
   nothing. Applies site-wide — posts, pages, and event descriptions. --- */
img.aligncenter,
figure.aligncenter,
.wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.aligncenter { text-align: center; }
img.alignleft, figure.alignleft, .wp-caption.alignleft { float: left; margin: 4px 20px 12px 0; max-width: 100%; }
img.alignright, figure.alignright, .wp-caption.alignright { float: right; margin: 4px 0 12px 20px; max-width: 100%; }
img.alignnone { max-width: 100%; height: auto; }

/* --- News listing/archive/search (index.php, search.php) --- */
.news-page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.news-main { min-width: 0; }
.news-sidebar-block { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.news-sidebar-title { font-family: 'Merriweather', serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--gold); }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li { border-bottom: 1px solid var(--gray-200); }
.archive-list li:last-child { border-bottom: none; }
.archive-list a { display: block; padding: 9px 2px; font-size: 13px; color: var(--text-muted); transition: color var(--lift); }
.archive-list a:hover { color: var(--blue); }
@media (max-width: 900px) { .news-page-layout { grid-template-columns: 1fr; } .news-sidebar { order: 2; } }

/* --- Contact Us page: info card on the left, text + form on the right --- */
.contact-layout { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; max-width: 980px; margin: 0 auto; }
.contact-info-bar { display: flex; flex-direction: column; gap: 20px; transform: translateX(-15%); }
.contact-info-bar .contact-info-row { margin-bottom: 0; }
.contact-info-row { display: flex; align-items: flex-start; gap: 12px; }
.contact-info-row .cc-icon { width: 38px; height: 38px; background: var(--blue-light); border: 1px solid rgba(0,51,160,0.15); }
.contact-info-row .cc-icon svg { width: 18px; height: 18px; color: var(--blue); }
.contact-info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-dark); margin-bottom: 3px; }
.contact-info-value { font-size: 14px; color: var(--text); line-height: 1.5; }
.contact-info-value a { color: var(--blue); }
.contact-info-value a:hover { color: var(--blue-mid); }
.contact-info-social { display: flex; gap: 10px; margin-top: 4px; }
.contact-info-social .social-btn { width: 34px; height: 34px; background: transparent; }
.contact-info-social .social-btn:hover { background: rgba(0,51,160,0.08); }
.contact-right-col { transform: translateX(-70px); }
.entry-content.contact-intro-text { max-width: none; margin: 0 0 32px; text-align: left; font-size: 17px; }
.contact-form-card { max-width: none; margin: 0; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.contact-form-msg { font-size: 14px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; }
.contact-form-msg-success { background: rgba(46,160,67,0.1); color: #1a7a35; border: 1px solid rgba(46,160,67,0.3); }
.contact-form-msg-error { background: rgba(220,53,69,0.08); color: #b02a37; border: 1px solid rgba(220,53,69,0.3); }
.contact-form-msg-error a { color: inherit; text-decoration: underline; }

/* WooCommerce's own add-to-cart/error/info notices (printed via
   wc_print_notices() in woocommerce.php) — styled to match the contact
   form's success/error message boxes above. */
.woocommerce-message, .woocommerce-error, .woocommerce-info { position: relative; max-width: 640px; margin: 0 auto 44px; padding: 12px 44px 12px 16px; border-radius: var(--radius-sm); font-size: 14px; list-style: none; }
.woo-notice-close { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 22px; height: 22px; border: none; background: transparent; color: inherit; opacity: 0.6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; transition: opacity .2s; }
.woo-notice-close:hover { opacity: 1; }
/* WooCommerce's default stylesheet reserves left-padding for an icon-font
   glyph via this ::before — our padding above doesn't leave room for it,
   so it was rendering as an overlapping blob on top of the message text.
   We don't want the icon at all, so remove it outright. */
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { content: none; }
.woocommerce-message { background: rgba(46,160,67,0.1); color: #1a7a35; border: 1px solid rgba(46,160,67,0.3); }
.woocommerce-error { background: rgba(220,53,69,0.08); color: #b02a37; border: 1px solid rgba(220,53,69,0.3); }
.woocommerce-info { background: var(--blue-pale); color: var(--blue-dark); border: 1px solid rgba(0,51,160,0.2); }
.woocommerce-message a, .woocommerce-error a, .woocommerce-info a { color: inherit; text-decoration: underline; font-weight: 600; }
@media (max-width: 800px) {
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  /* the desktop leftward nudges push content off the narrow mobile viewport
     (page uses overflow:clip) — reset them so nothing gets cut off */
  .contact-info-bar, .contact-right-col { transform: none; }
}
.news-list { display: flex; flex-direction: column; }
.news-item { display: flex; gap: 30px; padding: 32px 0; border-bottom: 1px solid var(--gray-200); }
.news-item:first-child { padding-top: 0; }
.news-item-thumb { flex: 0 0 260px; width: 260px; aspect-ratio: 260/145; border-radius: var(--radius-lg); overflow: hidden; background: var(--blue-light); box-shadow: var(--shadow-sm); }
.news-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.news-item:hover .news-item-thumb img { transform: scale(1.06); }
.news-item-body { flex: 1; min-width: 0; }
.news-item-title { font-family: 'Merriweather', serif; font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 10px; }
.news-item-title a { color: inherit; transition: color var(--lift); }
.news-item-title a:hover { color: var(--blue); }
.news-item-excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.news-item-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.news-item-more { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); transition: color var(--lift); }
.news-item-more:hover { color: var(--gold-dark); }
.news-item-date { font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) { .news-item { flex-direction: column; gap: 16px; } .news-item-thumb { width: 100%; flex: none; } }
.news-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.news-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); color: var(--blue); font-size: 13px; font-weight: 600; background: var(--white); transition: background var(--lift), color var(--lift), border-color var(--lift); }
.news-pagination .page-numbers.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.news-pagination .page-numbers:hover { border-color: var(--gold); }

/* --- Single post --- */
.single-post-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--gray-200); }
.single-post-thumb { margin-bottom: 28px; }
.single-post-thumb img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.post-nav-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--gray-200); font-size: 13px; }
.post-nav-links a { color: var(--blue); font-weight: 600; }

/* --- 404 --- */
.error-404-wrap { text-align: center; max-width: 520px; margin: 0 auto; }
.error-404-code { font-family: 'Merriweather', serif; font-size: 72px; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 8px; }

/* --- The Events Calendar (/events/) — retheme via its own design tokens --- */
.tribe-common {
  --tec-color-accent-primary: var(--blue);
  --tec-color-accent-primary-hover: var(--blue-dark);
  --tec-color-accent-primary-active: var(--blue-dark);
  --tec-color-accent-primary-background: var(--blue);
  --tec-color-background-secondary: var(--blue);
  --tec-color-button-primary: var(--blue);
  --tec-color-button-primary-hover: var(--blue-dark);
  --tec-color-icon-primary: var(--blue);
  --tec-color-icon-subscribe-primary: var(--blue);
  --tec-color-link-primary: var(--blue);
  --tec-color-link-primary-hover: var(--gold-dark);
  --tec-color-text-primary: var(--text);
  --tec-color-text-secondary: var(--text-muted);
  --tec-font-family-sans-serif: 'Source Sans 3', sans-serif;
  --tec-font-family-heading--regular: 'Merriweather', serif;
  --tec-border-radius-0: var(--radius-sm);
}
.sdmlc-events-wrap { padding-top: 0 !important; }
.sdmlc-events-wrap > *:first-child { margin-top: 0 !important; }
/* the plugin puts 64px (mobile) / 96px (desktop) of padding-top on its own
   .tribe-events-l-container; trim it so the search bar sits just below the
   wave divider instead of far down the page. min-height also removed so an
   empty/short calendar doesn't leave a tall blank area. */
/* the plugin also puts a large padding-bottom (spacer-12/14) on the container;
   trim it too so the content sits closer to the footer, mirroring the top. */
.sdmlc-events-wrap .tribe-events-l-container { padding-top: 56px !important; padding-bottom: 16px !important; min-height: 0 !important; }
.sdmlc-events-wrap .tribe-common { font-family: 'Source Sans 3', sans-serif; color: var(--text); }
.sdmlc-events-wrap .tribe-events-header { background: transparent; padding: 0 0 20px; margin-top: 0 !important; }
.sdmlc-events-wrap .tribe-events-c-search__input,
.sdmlc-events-wrap .tribe-events-c-search__button,
.sdmlc-events-wrap .tribe-events-c-view-selector__button,
.sdmlc-events-wrap .tribe-events-c-nav__prev,
.sdmlc-events-wrap .tribe-events-c-nav__next,
.sdmlc-events-wrap .tribe-events-c-nav__today {
  border-radius: var(--radius-sm) !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.sdmlc-events-wrap .tribe-events-c-search__button,
.sdmlc-events-wrap .tribe-common-c-btn {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.sdmlc-events-wrap .tribe-events-c-search__button:hover,
.sdmlc-events-wrap .tribe-common-c-btn:hover {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-list__event-title,
.sdmlc-events-wrap .tribe-events-calendar-month__calendar-event-title {
  font-family: 'Merriweather', serif !important;
}
.sdmlc-events-wrap .tribe-events-calendar-list__event-title-link,
.sdmlc-events-wrap a.tribe-events-calendar-month__calendar-event-title-link {
  color: var(--blue) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-list__event-title-link:hover {
  color: var(--gold-dark) !important;
}
/* center the date box vertically against the taller event text beside it
   (the date-tag column stretches to the full row height, so centering its
   contents lines the box up with the middle of the title/venue/description). */
.sdmlc-events-wrap .tribe-events-calendar-list__event-date-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* date tag on the left of each list row — styled like the homepage's blue
   date box: gold weekday on top, white day number below, on a blue gradient. */
.sdmlc-events-wrap .tribe-events-calendar-list__event-date-tag-datetime {
  width: 52px;
  height: 60px;
  background: linear-gradient(160deg, var(--blue-mid), var(--blue-dark));
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.sdmlc-events-wrap .tribe-events-calendar-list__event-date-tag-weekday {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-list__event-date-tag-daynum {
  font-family: 'Merriweather', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
}
/* Mobile: the plugin's grid-gutter system shrinks the column gap between
   the date-tag box and the title/venue text, crowding them together. Add
   breathing room back with an explicit left margin on the text column. */
@media (max-width: 768px) {
  .sdmlc-events-wrap .tribe-events-calendar-list__event-wrapper {
    margin-left: 14px;
  }
}
/* venue / location text — lighter gold (to preview) */
.sdmlc-events-wrap .tribe-events-calendar-list__event-venue,
.sdmlc-events-wrap .tribe-events-calendar-list__event-venue-title,
.sdmlc-events-wrap .tribe-events-calendar-list__event-venue-address {
  color: var(--gold) !important;
}
/* Venue title and address are separate inline <span>s in the plugin's
   markup with nothing forcing a line break between them, so they ran
   together on one line ("Miramar National Cemetery 5795 Nobel Dr...") —
   put the address on its own line directly below the venue name. */
.sdmlc-events-wrap .tribe-events-calendar-list__event-venue-address {
  display: block;
}
/* active ("current") view in the view selector — light gold. The text lives in
   an inner span with its own color, so target that (not just the link), and
   match the active-tab underline to gold too. */
.sdmlc-events-wrap .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
  color: var(--gold) !important;
}
.sdmlc-events-wrap .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:after {
  background-color: var(--gold) !important;
}
/* Month/Day views: the top-bar month+year label (e.g. "July 2026") — dark blue.
   (List view shows the calendar icon here instead, so it's unaffected.) */
.tribe-events-view--month .tribe-events-c-top-bar__datepicker-button,
.tribe-events-view--month .tribe-events-c-top-bar__datepicker-time,
.tribe-events-view--day .tribe-events-c-top-bar__datepicker-button,
.tribe-events-view--day .tribe-events-c-top-bar__datepicker-time {
  color: var(--blue-dark) !important;
}
/* Day view event rows: time + title dark blue, location light gold */
.sdmlc-events-wrap .tribe-events-calendar-day__event-datetime {
  color: var(--blue-dark) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-day__event-title,
.sdmlc-events-wrap .tribe-events-calendar-day__event-title-link {
  color: var(--blue-dark) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-day__event-venue,
.sdmlc-events-wrap .tribe-events-calendar-day__event-venue-title,
.sdmlc-events-wrap .tribe-events-calendar-day__event-venue-address {
  color: var(--gold) !important;
}
/* Month view grid: weekday header letters gold, day numbers dark blue,
   event pills lighter blue background with gold text */
.sdmlc-events-wrap .tribe-events-calendar-month__header-column-title {
  color: var(--gold-dark) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__day-date-daynum {
  color: var(--blue-dark) !important;
}
/* Days with at least one event: the plugin renders the day number inside an
   <h3> (vs a plain <div> for empty days) — gold number in a light-blue
   circle to flag "something's happening here" at a glance. */
.sdmlc-events-wrap h3.tribe-events-calendar-month__day-date .tribe-events-calendar-month__day-date-daynum {
  background: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.sdmlc-events-wrap h3.tribe-events-calendar-month__day-date .tribe-events-calendar-month__day-date-link {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}
/* Desktop day numbers with events are wrapped in an <a> that carries its own
   default link color — target it directly, the parent's color doesn't
   cascade past an anchor's own UA color. */
.sdmlc-events-wrap h3.tribe-events-calendar-month__day-date .tribe-events-calendar-month__day-date-daynum,
.sdmlc-events-wrap h3.tribe-events-calendar-month__day-date .tribe-events-calendar-month__day-date-link {
  color: var(--gold) !important;
}
/* Today's day number bold in the Month view grid, both with and without
   events. Note WHY desktop needed this: mobile day numbers use the
   `tribe-common-h--alt` class (font-weight 400/regular) so normal days are
   thin and TEC's own bold-today rule makes today stand out; desktop uses
   `tribe-common-h4` (font-weight 700/bold) so EVERY day is already bold and
   today can't stand out. To mirror the mobile look on desktop we (a) set
   the desktop day numbers back to regular weight, then (b) bold only today.
   Scoped to the `--desktop` cell so mobile (already correct) is untouched. */
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--desktop .tribe-events-calendar-month__day-date,
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--desktop .tribe-events-calendar-month__day-date-daynum,
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--desktop .tribe-events-calendar-month__day-date-link {
  font-weight: 400 !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum,
.sdmlc-events-wrap .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
  font-weight: 700 !important;
}
/* Mobile Month view auto-selects today's cell (to show its events in the
   list below) and fills it with TEC's solid blue accent — desktop's month
   view has no such highlight. Removed per request: today's cell should
   look like any other day; the tap-to-expand-events-below behavior itself
   still works, it just doesn't leave a visible highlight afterward. */
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected,
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected:focus,
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected:hover {
  background-color: transparent !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date {
  color: inherit !important;
  opacity: 1 !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--event {
  background-color: var(--blue) !important;
  opacity: 1 !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--featured {
  opacity: 1 !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--featured .tribe-events-calendar-month__mobile-events-icon-svg path {
  fill: var(--blue) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__multiday-event-bar-inner {
  background-color: var(--blue) !important;
}
.sdmlc-events-wrap .tribe-events-calendar-month__multiday-event-bar-title {
  color: #fff !important;
}
/* "Subscribe to calendar" button sits at the bottom of the list/month/day
   views, pushed to the right by default. Center it on desktop only (mobile
   keeps its default). Belt-and-suspenders across every possible mechanism:
   make the container a full-width centered flex row, then shrink-wrap the
   inner dropdown and center it with auto margins, and un-stretch the button
   from its default width:100%. The dropdown's popup content is absolutely
   positioned, so this doesn't affect where the menu opens. */
@media (min-width: 769px) {
  .sdmlc-events-wrap .tribe-events-c-subscribe-dropdown__container {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .sdmlc-events-wrap .tribe-events-c-subscribe-dropdown__container .tribe-events-c-subscribe-dropdown {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    width: fit-content !important;
    max-width: 100%;
  }
  .sdmlc-events-wrap .tribe-events-c-subscribe-dropdown__container .tribe-events-c-subscribe-dropdown__button {
    width: auto !important;
    min-width: 220px;
  }
}
.sdmlc-events-wrap .tribe-events-calendar-list__event-row {
  border-radius: var(--radius-lg);
}
/* Single event page: title light blue, section/label bold text dark blue,
   the date/time line light gold */
.sdmlc-events-wrap .tribe-events-single-event-title {
  color: var(--blue) !important;
}
.sdmlc-events-wrap .tribe-events-meta-label,
.sdmlc-events-wrap .tribe-events-single-section-title {
  color: var(--blue-dark) !important;
}
.sdmlc-single-event .tribe-event-date-start,
.sdmlc-single-event .tribe-event-time {
  color: var(--blue-dark) !important;
}
/* the un-bolded value text next to each label (date, time, venue) — light gold */
.sdmlc-single-event .tribe-events-meta-value {
  color: var(--gold) !important;
}
/* venue name has no label span at all (just bare text in the <li>) — plain
   white, same weight as the other labels, no gold */
.sdmlc-single-event .tribe-events-meta-item.tribe-venue {
  color: #fff !important;
  font-weight: 700;
}
/* organizer name also has no label — add "Name:" to match the Phone:/Email:
   lines below it, same white-label + gold-value format as Details */
.sdmlc-single-event .tribe-events-meta-item.tribe-organizer:before {
  content: "Name: ";
  color: #fff;
  font-weight: 700;
}
.sdmlc-single-event .tribe-events-meta-item.tribe-organizer {
  color: var(--gold) !important;
}
.sdmlc-single-event .tribe-events-address {
  color: var(--gold) !important;
}
.sdmlc-single-event .tribe-events-address a {
  color: var(--gold) !important;
}
/* Details/Venue arrangement: one blue-gradient gold-trimmed panel (same
   family as the homepage's eyeglasses strip / calendar highlight), with the
   two groups as columns inside it. Gold section headers, white labels,
   gold values — matching the site's dark-panel treatment. */
.sdmlc-single-event .tribe-events-event-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 32px;
}
/* EXPERIMENT (2026-07-23): Venue always folds into the primary card now (see
   sdmlc_group_venue_when_mapped() in functions.php, flipped to always
   return false, + the tribe-events/modules/meta.php template override) —
   Venue sits as a THIRD column to the right of Organizer, same column
   width/gap as the existing Details/Organizer columns so the spacing reads
   identically. Its map (a sibling of .tribe-events-meta-group-venue, wrapped
   by the template override in .tribe-events-meta-group-gmap) spans the FULL
   width of the panel in its own row underneath, same as it did at full
   width before this change — only the address/name text moved up next to
   Organizer, not the map. */
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):has(.tribe-events-meta-group-organizer) {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
  grid-template-areas:
    "details organizer venue"
    "map     map       map";
}
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):has(.tribe-events-meta-group-organizer) .tribe-events-meta-group-details {
  grid-area: details;
}
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):has(.tribe-events-meta-group-organizer) .tribe-events-meta-group-organizer {
  grid-area: organizer;
}
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):has(.tribe-events-meta-group-organizer) .tribe-events-meta-group-venue {
  grid-area: venue;
  /* a bit more breathing room specifically between Organizer and Venue,
     on top of the 32px column gap shared by all three columns */
  margin-left: 20px;
}
/* No organizer: Venue takes the second column instead (map still spans full
   width below) — same as the original Details/Venue layout. */
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):not(:has(.tribe-events-meta-group-organizer)) {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  grid-template-areas:
    "details venue"
    "map     map";
}
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):not(:has(.tribe-events-meta-group-organizer)) .tribe-events-meta-group-details {
  grid-area: details;
}
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):not(:has(.tribe-events-meta-group-organizer)) .tribe-events-meta-group-venue {
  grid-area: venue;
}
/* The map is always wrapped in .tribe-events-meta-group-gmap when rendered
   inline in the primary section (per the template override) — THAT wrapper
   is the actual grid item (direct child of the grid container), not the
   .tribe-events-venue-map div nested inside it, so grid-area has to go on
   the wrapper for it to take effect. Clear margin-top so the full-width map
   row reads as visually separated from the Details/Organizer/Venue row
   above it, not cramped against it. */
.sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-gmap) .tribe-events-meta-group-gmap {
  grid-area: map;
  margin-top: 24px;
}
/* EXPERIMENT (2026-07-23): full-width color BAND instead of a rounded card,
   with the content shifted left. THE UNBLOCK: the plugin wraps the whole
   post in `.tribe-events-single > .tribe_events` with `overflow: hidden`,
   which clips any full-bleed band to the 740px content column — letting it
   overflow lets the meta band's background reach the page edges; the
   site's own .page-wrap (overflow:clip, max-width:1200px) then trims it
   precisely to the white page edges = "where the white ends."
   Easy revert: `git diff` this file for the previous rounded-card version. */
.sdmlc-single-event .tribe-events-single > .tribe_events {
  overflow: visible !important;
}
.sdmlc-single-event .tribe-events-event-meta {
  /* The actual Details/Venue/map content stays exactly in its natural
     content-column position (perfectly aligned with the title/description
     above) — only the ::before below paints the blue full-width behind it.
     isolation:isolate keeps that ::before's z-index:-1 behind this panel's
     own text but still in front of the white page (not dropped behind it). */
  width: 100% !important;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  /* Small nudge left to sit centered within the blue band (the panel's
     "natural" position reads slightly right of the band's true center) —
     the ::before band below compensates by the same amount so it stays put. */
  margin: 0 0 0 -24px !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 28px;
}
.sdmlc-single-event .tribe-events-event-meta:first-of-type {
  margin-top: 24px !important;
  padding-top: 32px;
}
/* Restore the larger gap below only the LAST panel (Venue), separating it
   from the prev/next event navigation below. */
.sdmlc-single-event .tribe-events-event-meta:last-of-type {
  margin-bottom: 56px !important;
  padding-bottom: 32px;
}
/* Full-viewport-width blue band painted BEHIND the content. Also cancels
   the plugin's own border-top line. left:50%/margin-left:-50vw centers a
   100vw box on this (viewport-centered) panel so it reaches both edges;
   .page-wrap's overflow:clip trims it back to the white page edges. */
.sdmlc-single-event .tribe-events-event-meta:before {
  content: '' !important;
  border-top: none !important;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: calc(-50vw + 24px);
  width: 100vw;
  background: linear-gradient(135deg, rgba(0,34,120,0.78) 0%, rgba(0,51,160,0.78) 100%);
}
.sdmlc-single-event .tribe-events-single-event-description:after {
  content: "";
  display: block;
  border-top: 1px solid var(--gray-200);
  margin-top: 28px;
}
/* Website label has no colon baked into its text (unlike Date:/Time:, and
   unlike Phone:/Email: which now have it baked directly into the template
   override — CSS ::after left a stray space before the colon there, since
   the label's own trailing whitespace collapses to a space first). */
.sdmlc-single-event .tribe-organizer-url-label:after,
.sdmlc-single-event .tribe-venue-url-label:after {
  content: ":";
}
/* Address country should sit on its own line (it currently runs on right
   after the postal code with no line break). */
.sdmlc-single-event .tribe-country-name {
  display: block;
}
/* Full-width map card: when an organizer is present, the plugin outputs the
   map as a bare .tribe-events-venue-map (NOT wrapped in .tribe-events-meta-
   group-gmap at all) — so target that class directly, which covers both
   code paths reliably. */
.sdmlc-single-event .tribe-events-venue-map {
  /* the plugin hardcodes width:211px on this element at desktop widths —
     override so it fills its grid row, then cap + center it below so it
     doesn't stretch edge-to-edge across the whole panel. (The content grid
     used to be shifted left of the blue band's true center, needing a
     compensating offset here — that shift was removed so plain centering
     now lines up correctly with the visible blue area.) */
  width: 100% !important;
  max-width: 600px;
  margin: 0 auto !important;
  box-sizing: border-box;
  background: var(--gold);
  border-radius: var(--radius);
  padding: 4px;
  overflow: hidden;
  line-height: 0;
}
.sdmlc-single-event .tribe-events-venue-map iframe {
  width: 100% !important;
}
/* In the other code path (map but no organizer), the map DOES get wrapped in
   .tribe-events-meta-group-gmap — reset it to transparent (already true via
   the generic .tribe-events-meta-group rule below) and hide its unused
   "Venue" title so it doesn't duplicate the venue group's own title;
   the white box/full-width styling itself lives on .tribe-events-venue-map
   above, so it's not doubled up. */
.sdmlc-single-event .tribe-events-meta-group-gmap .tribe-events-single-section-title {
  display: none;
}
.sdmlc-single-event .tribe-events-meta-group {
  background: transparent;
  border: 0;
  padding: 0;
}
.sdmlc-single-event .tribe-events-single-section-title {
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: .12em;
  margin: 0 0 12px !important;
}
.sdmlc-single-event .tribe-events-meta-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* label + value flow as plain inline text (not flex) — this is what actually
   keeps a long value (e.g. an email address) starting right after its label
   on the same line and wrapping naturally like a sentence if it's too long,
   instead of the flex-row approach dropping the whole value to its own line
   when it doesn't fit. */
.sdmlc-single-event .tribe-events-meta-item {
  display: block;
  white-space: nowrap;
}
.sdmlc-single-event .tribe-events-meta-label,
.sdmlc-single-event .tribe-events-meta-value {
  display: inline !important;
}
/* the Time value's inner content is a <div> (block by default), which still
   forces a line break even inside our now-inline meta-value span */
.sdmlc-single-event .tribe-events-meta-value .tribe-events-abbr {
  display: inline !important;
}
.sdmlc-single-event .tribe-events-meta-label {
  margin-right: 4px;
}
.sdmlc-single-event .tribe-events-meta-label {
  color: #fff !important;
  white-space: nowrap;
}
.sdmlc-single-event .tribe-events-meta-value a {
  color: var(--gold) !important;
}
/* drop the dotted "abbr" underline under the date */
.sdmlc-single-event .tribe-events-abbr {
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: default;
}
/* Mobile: the multi-column card layouts (Details/Organizer, Details/Venue,
   Venue+map) all use fixed minmax(...) column widths meant for desktop —
   below 768px those columns don't fit the viewport and force the cards to
   overflow/cut off. Collapse everything to a single stacked column, and let
   long meta values (addresses, emails) wrap instead of forcing width via
   white-space:nowrap. */
@media (max-width: 768px) {
  .sdmlc-single-event .tribe-events-event-meta,
  .sdmlc-single-event .tribe-events-event-meta:has(.tribe-events-venue-map),
  .sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):has(.tribe-events-meta-group-organizer),
  .sdmlc-single-event .tribe-events-event-meta.primary:has(.tribe-events-meta-group-venue):not(:has(.tribe-events-meta-group-organizer)) {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  /* grid-area assignments from the desktop-only area rules above still apply
     here (their :has() selectors still match) — an unmatched named area
     creates a ghost grid line that fights auto-placement and re-causes
     overlap, so explicitly reset placement to auto on mobile. */
  .sdmlc-single-event .tribe-events-meta-group-details,
  .sdmlc-single-event .tribe-events-meta-group-venue,
  .sdmlc-single-event .tribe-events-meta-group-organizer,
  .sdmlc-single-event .tribe-events-meta-group-gmap {
    grid-area: auto !important;
  }
  /* extra breathing room between stacked groups (e.g. Event Category →
     Organizer) now that they're no longer side-by-side columns */
  .sdmlc-single-event .tribe-events-meta-group-venue,
  .sdmlc-single-event .tribe-events-meta-group-organizer,
  .sdmlc-single-event .tribe-events-meta-group-gmap {
    margin-top: 20px;
  }
  .sdmlc-single-event .tribe-events-meta-item {
    white-space: normal;
  }
}
.sdmlc-events-wrap .tribe-events-calendar-list__month-separator-text {
  font-family: 'Merriweather', serif !important;
  color: var(--blue) !important;
}
/* The datepicker popup is a fixed 363px wide. Its day view (a 7-column table)
   naturally fills that width, but the month/year/decade pickers put their
   .datepicker-grid inside a <table> that shrink-wraps to its narrower content,
   leaving it squished in the left half of the popup. Force those inner tables
   to fill the popup so the 4-column grid stretches across the whole box. */
.tribe-events-c-top-bar__datepicker-container .datepicker-months,
.tribe-events-c-top-bar__datepicker-container .datepicker-years,
.tribe-events-c-top-bar__datepicker-container .datepicker-decades,
.tribe-events-c-top-bar__datepicker-container .datepicker-centuries { width: 100%; }
.tribe-events-c-top-bar__datepicker-container .datepicker-months > table,
.tribe-events-c-top-bar__datepicker-container .datepicker-years > table,
.tribe-events-c-top-bar__datepicker-container .datepicker-decades > table,
.tribe-events-c-top-bar__datepicker-container .datepicker-centuries > table { width: 100%; }
/* Today's month/year gets a light-blue ".current" fill that reads like a second
   selection next to the actually-selected (.active) month. Drop the fill on the
   month/year pickers so only the selected item looks highlighted; the day
   calendar's normal "today" marker is left untouched. */
.tribe-events-c-top-bar__datepicker-container .datepicker .month.current:not(.active),
.tribe-events-c-top-bar__datepicker-container .datepicker .year.current:not(.active) {
  background: transparent;
  color: inherit;
}
/* TEC also draws a 1px blue border on today via a :before overlay (the reason
   the .current rule sets position:relative) — hide it too so today's month is
   fully unmarked, matching the single-highlight look of the day view. */
.tribe-events-c-top-bar__datepicker-container .datepicker .month.current:not(.active):before,
.tribe-events-c-top-bar__datepicker-container .datepicker .year.current:not(.active):before {
  display: none;
}
/* Today's date in the day-grid: TEC marks it with the class .day.CURRENT
   (NOT .day.today — that's a different library's class and was why earlier
   attempts here did nothing). Its default treatment is a light-blue fill
   (.day.current background) PLUS a 1px blue border drawn via a :before
   overlay. User wants NEITHER — today should look exactly like every other
   day except BOLD. So: strip the background and the :before border in every
   state (base / hover / focus / focused), reset the accent text colour to
   inherit, and set bold. Covers desktop + mobile (same popup on both). */
.tribe-events-c-top-bar__datepicker-container .datepicker .day.current,
.tribe-events-c-top-bar__datepicker-container .datepicker .day.current:hover,
.tribe-events-c-top-bar__datepicker-container .datepicker .day.current.focused,
.tribe-events-c-top-bar__datepicker-container .datepicker .day.current:focus {
  background: transparent !important;
  color: inherit !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  outline: none !important;
}
.tribe-events-c-top-bar__datepicker-container .datepicker .day.current:before {
  display: none !important;
}
/* bootstrap-datepicker also fills ANY day with a light gray background on
   hover/tap/keyboard-focus (independent of today/selected). On touch a tap
   can leave this "stuck". Suppress it on days only — month/year levels keep
   their hover/focus feedback, which is still useful while drilling in. */
.tribe-events-c-top-bar__datepicker-container .datepicker .day:hover,
.tribe-events-c-top-bar__datepicker-container .datepicker .day.focused,
.tribe-events-c-top-bar__datepicker-container .datepicker .day:focus,
.tribe-events-c-top-bar__datepicker-container .datepicker .day.active,
.tribe-events-c-top-bar__datepicker-container .datepicker .day.active:hover {
  background: transparent !important;
  color: inherit !important;
  outline: none !important;
}
/* calendar icon shown in the top-bar datepicker in place of the "Upcoming"
   word (see tribe/events/v2/list/top-bar/datepicker.php override) */
.sdmlc-events-wrap .sdmlc-datepicker-cal-icon { display: inline-flex; align-items: center; }
.sdmlc-events-wrap .sdmlc-datepicker-cal-icon svg {
  width: 22px; height: 22px;
  stroke: var(--blue); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: block;
}
.error-404-wrap .header-search { width: 100%; max-width: 320px; margin: 22px auto; }

/* ==========================================================================
   Shopping Cart page (WooCommerce's default [woocommerce_cart] shortcode
   output, rendered through page.php's generic .entry-content — scoped via
   the .woo-cart-page class added in page.php's is_cart() check). WooCommerce
   ships this completely unstyled, so without this block it looks like a
   bare browser table dropped into the middle of the themed page shell.
   ========================================================================== */
.entry-content.woo-cart-page {
  /* Wider than the site's normal 780px reading column — a cart table +
     totals sidebar side by side needs the room. */
  max-width: 1040px;
}
.sdmlc-cart-heading {
  font-family: 'Merriweather', serif; font-size: 30px; font-weight: 700; color: var(--blue-dark);
  text-align: center; margin: 0 0 28px;
}
.woo-cart-page .woocommerce-notices-wrapper:empty { display: none; }
.woo-cart-page .woocommerce-message,
.woo-cart-page .woocommerce-error,
.woo-cart-page .woocommerce-info {
  list-style: none; font-size: 14px; padding: 12px 16px; border-radius: var(--radius-sm);
  margin: 0 0 20px;
}
.woo-cart-page .woocommerce-message { background: rgba(46,160,67,0.1); color: #1a7a35; border: 1px solid rgba(46,160,67,0.3); }
.woo-cart-page .woocommerce-error { background: rgba(220,53,69,0.08); color: #b02a37; border: 1px solid rgba(220,53,69,0.3); }
.woo-cart-page .woocommerce-info { background: var(--blue-pale); color: var(--blue-dark); border: 1px solid var(--blue-light); }

/* CONFIRMED via the actual rendered HTML (fetched straight from LocalWP's
   nginx port with curl, bypassing this sandbox's DNS restriction on
   *.local domains) that the [woocommerce_cart] shortcode DOES wrap its
   output in <div class="woocommerce">: the shortcode is registered as
   WC_Shortcodes::cart(), which calls shortcode_wrapper() with the default
   wrapper class "woocommerce" — a different, outer layer from
   WC_Shortcode_Cart::output() (the inner renderer looked at during the
   previous, WRONG fix that removed this rule's ".woocommerce" and moved
   the grid up to .woo-cart-page itself). That earlier "fix" broke the
   layout: .woo-cart-page's only real child is that one .woocommerce div,
   so a 2-column grid there had nothing to split into columns — the
   heading/form/totals (all genuinely INSIDE .woocommerce) just stacked
   in normal block flow. Restored to the correct target below. */
.woo-cart-page .woocommerce {
  display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start;
}
.woo-cart-page .sdmlc-cart-heading { grid-column: 1 / -1; }

/* WooCommerce's own default stylesheet (still loaded — this theme doesn't
   dequeue it, since other WC-rendered pages like single-product still lean
   on it) sets `.cart-collaterals .cart_totals{float:right;width:48%}` and
   `.cart-collaterals{width:100%}` (targets the `.woocommerce-page` body
   class WC adds on this page) — those fight directly with the grid above,
   which is why this needed explicit, higher-specificity resets rather than
   just adding new rules on top. */
.woo-cart-page .cart-collaterals,
.woo-cart-page .cart-collaterals .cart_totals {
  float: none !important; width: auto !important;
}

/* -- Cart items table, restyled as a clean white card -- */
.woo-cart-page .woocommerce-cart-form {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
/* WooCommerce's own default stylesheet sets table.shop_table's margin to
   "0 -1px 24px 0" — that surviving 24px bottom margin is exactly the
   white gap that showed up below the blue Update Cart row, inside this
   same card (overflow:hidden clips CONTENT overflow, not the space a
   margin still reserves in normal flow). */
.woo-cart-page table.cart { width: 100%; border-collapse: collapse; margin: 0; }
.woo-cart-page table.cart thead th {
  text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gold); padding: 16px 14px; border-bottom: 1px solid var(--gray-200); background: var(--blue);
}
.woo-cart-page table.cart thead th.product-remove,
.woo-cart-page table.cart thead th.product-thumbnail { width: 1%; }
/* The 1% hint above is only a preferred-width signal for table auto-layout
   — it does NOT guarantee the column stays at least as wide as the 68px
   thumbnail image actually needs. Confirmed via real-browser inspection:
   with several other columns' text competing for space, the algorithm
   squeezed this column down to ~4px, leaving the (still correctly-sized,
   68px/object-fit:cover) image cropped to a sliver by its own tiny cell.
   min-width here is the actual fix — it's what stops the collapse. */
.woo-cart-page table.cart td.product-thumbnail { min-width: 96px; }
.woo-cart-page table.cart tbody tr.cart_item {
  border-bottom: 1px solid var(--gray-200); transition: background .2s;
}
.woo-cart-page table.cart tbody tr.cart_item:last-child { border-bottom: none; }
.woo-cart-page table.cart tbody tr.cart_item:hover { background: var(--blue-light); }
.woo-cart-page table.cart td { padding: 16px 14px; vertical-align: middle; font-size: 14px; color: var(--text); }
.woo-cart-page table.cart td.product-remove { text-align: center; width: 40px; }
.woo-cart-page table.cart td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--blue); color: #fff !important;
  font-size: 16px; line-height: 1; text-decoration: none !important; transition: background .2s, color .2s;
}
.woo-cart-page table.cart td.product-remove a.remove:hover { background: #fbeaec; color: #c0293a !important; }
.woo-cart-page table.cart td.product-thumbnail img {
  width: 68px; height: 68px; object-fit: cover; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); display: block;
}
.woo-cart-page table.cart td.product-name a {
  color: var(--blue-dark); font-weight: 700; text-decoration: none;
}
.woo-cart-page table.cart td.product-name a:hover { color: var(--blue); text-decoration: underline; }
.woo-cart-page table.cart td.product-name dl.variation { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.woo-cart-page table.cart td.product-price,
.woo-cart-page table.cart td.product-subtotal { font-weight: 700; color: var(--blue-dark); white-space: nowrap; }
.woo-cart-page table.cart td.product-subtotal { font-family: 'Merriweather', serif; }
/* Quantity stepper: a single bordered pill housing minus/input/plus, each
   separated by a thin divider — the minus/plus buttons are added server-
   side (functions.php, woocommerce_before/after_quantity_input_field) so
   this works with zero JS too (buttons just won't do anything without it,
   but typing a number directly into the field always has). */
.woo-cart-page table.cart .quantity {
  display: inline-flex; align-items: stretch; border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--white);
}
.woo-cart-page table.cart .quantity .sdmlc-qty-btn {
  width: 30px; border: none; background: var(--blue); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .2s, color .2s;
}
.woo-cart-page table.cart .quantity .sdmlc-qty-minus { border-right: 1px solid var(--gray-200); }
.woo-cart-page table.cart .quantity .sdmlc-qty-plus { border-left: 1px solid var(--gray-200); }
.woo-cart-page table.cart .quantity .sdmlc-qty-btn:hover { background: var(--gold); color: var(--blue-dark); }
.woo-cart-page table.cart .quantity .qty {
  width: 46px; padding: 9px 4px; text-align: center; border: none;
  font-size: 14px; font-family: inherit; color: var(--text); outline: none;
  -moz-appearance: textfield;
}
.woo-cart-page table.cart .quantity .qty::-webkit-inner-spin-button,
.woo-cart-page table.cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woo-cart-page table.cart .quantity:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,199,44,0.18); }

/* -- Coupon form + Update cart button row. WooCommerce puts this in a
   plain <tr><td class="actions"> inside the same <tbody> — NOT inside a
   <tfoot> as the markup might suggest; selectors here must target
   td.actions directly, confirmed via real DOM inspection (a `tfoot`-based
   selector silently matched nothing since this cart styling was first
   written, which is why this row's button/coupon styling never applied). -- */
.woo-cart-page table.cart td.actions {
  background: var(--blue); border-top: 1px solid var(--gray-200); padding: 18px 14px;
}
/* "Have a coupon? Add Coupon" toggle link — added by JS (main.js), hides
   the .coupon fields behind it until clicked. Falls back gracefully with
   JS disabled: the toggle button is never inserted, so the coupon form
   just shows plainly like it always has. Text colors flipped to white/
   gold here since the row's own background is now a solid deep blue. */
.woo-cart-page .sdmlc-coupon-toggle {
  display: block; background: none; border: none; padding: 0; margin-bottom: 12px;
  font-size: 13px; color: rgba(255,255,255,0.8); cursor: pointer; text-align: left;
}
.woo-cart-page .sdmlc-coupon-toggle span {
  color: var(--gold); font-weight: 700; text-decoration: underline; margin-left: 4px;
}
.woo-cart-page table.cart td.actions .coupon.sdmlc-coupon-collapsed { display: none; }
.woo-cart-page table.cart td.actions .coupon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px;
}
.woo-cart-page table.cart td.actions .coupon label { display: none; }
.woo-cart-page table.cart td.actions .coupon input#coupon_code {
  padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--text); outline: none; width: 180px; max-width: 100%;
  background: var(--white); transition: border-color .2s, box-shadow .2s;
}
.woo-cart-page table.cart td.actions .coupon input#coupon_code:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,199,44,0.18); }
/* Solid gold + dark blue text, matching the site's standard button
   treatment (Proceed to Checkout, Join the Lions) rather than the earlier
   white/bordered look. */
.woo-cart-page table.cart td.actions button[name="apply_coupon"],
.woo-cart-page table.cart td.actions button[name="update_cart"] {
  background: var(--gold); color: var(--blue-dark); font-size: 13px; font-weight: 700;
  padding: 9px 18px; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .2s, transform .2s;
  /* Without this, the browser's native focus/active ring (blue on Chrome/
     Edge by default) shows on top of the gold fill, reading as a stray
     "blue overlay" over the button — replaced with a gold-tinted ring
     matching the focus style already used on the coupon input/quantity
     field elsewhere on this page. */
  -webkit-appearance: none; appearance: none; outline: none;
}
.woo-cart-page table.cart td.actions button[name="apply_coupon"]:hover,
.woo-cart-page table.cart td.actions button[name="update_cart"]:hover { background: var(--gold-dark); transform: translateY(-1px); }
.woo-cart-page table.cart td.actions button[name="apply_coupon"]:focus-visible,
.woo-cart-page table.cart td.actions button[name="update_cart"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(212,164,0,0.5);
}
/* WooCommerce's own cart.js sets this button to disabled by default (and
   again after every AJAX update) until a quantity actually changes. Any
   translucent color here — gold or white — still blends with whatever
   sits behind it (this row's deep blue), which is what produced a muddy/
   washed-out look either way. Fully opaque muted-gold instead, so the
   disabled look is fixed and predictable regardless of backdrop. */
.woo-cart-page table.cart td.actions button[name="update_cart"]:disabled {
  background: #d4a400; color: rgba(0,21,80,0.85); cursor: default;
}

/* -- Cart totals sidebar card -- */
.woo-cart-page .cart-collaterals { grid-column: 2; }
.woo-cart-page .cart_totals {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 30px 32px 0; box-shadow: var(--shadow-sm); position: sticky; top: 100px;
  overflow: hidden;
}
/* Full-bleed gold band at the top of the card (title lives inside it),
   same negative-margin technique as the blue checkout band at the
   bottom — cancels the card's own padding so it reaches the edges, and
   overflow:hidden on .cart_totals clips it to the card's rounded top
   corners. Replaces the old plain 4px gold top-border accent. */
.woo-cart-page .cart_totals h2 {
  /* Padding trimmed to roughly match the thickness of the items table's
     blue thead row (16px vertical padding there, but at a much smaller
     12px label size vs. this 19px serif heading — less padding here
     keeps the two bands visually similar in height despite that). */
  font-family: 'Merriweather', serif; font-size: 17px; color: var(--blue-dark);
  margin: -30px -32px 24px; padding: 12px 32px; background: var(--gold);
}
.woo-cart-page .cart_totals table.shop_table { width: 100%; border-collapse: collapse; }
/* The divider lines live on the flexed <tr> itself, not the individual
   th/td — putting border-bottom on the cells instead left two disconnected
   short segments (one under the label, one under the value, with a gap
   between) since a flex item's own border only spans its own shrink-to-fit
   width, not the full row. */
.woo-cart-page .cart_totals table.shop_table tr {
  display: flex; justify-content: space-between; align-items: baseline;
  /* Thickened further (2px still read as pale/washed out) — a thin line
     of a saturated color anti-aliases against the white background on
     either side of it, which a 4px band is thick enough to overcome. */
  border-bottom: 4px solid var(--blue);
}
/* The row right before Total already gets its own gold divider (below) —
   without this, that row's plain gray border-bottom sat just a few px
   above the gold line, reading as two redundant, cluttered dividers
   instead of one clean one. */
.woo-cart-page .cart_totals table.shop_table tr:has(+ tr.order-total) { border-bottom: none; }
.woo-cart-page .cart_totals table.shop_table th,
.woo-cart-page .cart_totals table.shop_table td {
  padding: 10px 6px; font-size: 14px; color: var(--text); text-align: right;
  font-weight: 400;
  /* WooCommerce's own default stylesheet puts a faint border-top directly
     on every td (table.shop_table td{border-top:1px solid...}) — that's
     what was showing as short, disconnected line segments above "Total"
     and its price, separate from (and on top of) the intentional row-
     level divider below. This design uses row-level borders only. */
  border-top: none;
}
.woo-cart-page .cart_totals table.shop_table th { text-align: left; font-weight: 400; }
.woo-cart-page .cart_totals table.shop_table tr.order-total {
  /* THIS is the line actually visible above "Total" — the earlier row's
     own border-bottom is forced to "none" by the :has() rule below (so
     there's only ever one divider, not two overlapping ones). Matches the
     card's own outer border (1px solid var(--gray-200)) per request,
     instead of standing out as its own gold accent. */
  margin-top: 12px; border-bottom: none; border-top: 1px solid var(--gray-200); padding-top: 16px;
}
.woo-cart-page .cart_totals table.shop_table tr.order-total th,
.woo-cart-page .cart_totals table.shop_table tr.order-total td {
  font-size: 19px; font-weight: 700; color: var(--blue-dark); font-family: 'Merriweather', serif;
}
/* Full-bleed blue band at the bottom of the totals card, matching the
   cart-items table's own blue header/actions treatment — negative side
   margins cancel the card's own 32px padding so this section reaches the
   card's edges, and overflow:hidden on .cart_totals (above) clips it to
   the card's rounded bottom corners. */
.woo-cart-page .wc-proceed-to-checkout {
  /* Vertical padding trimmed to match the items table's blue actions-row
     thickness (18px there), same reasoning as the gold band above. */
  margin: 24px -32px 0; padding: 18px 32px; background: var(--blue);
}
.woo-cart-page .wc-proceed-to-checkout a.checkout-button {
  /* width:auto on a display:block element still stretches to fill the
     container (block boxes default to their container's full width) —
     it doesn't shrink-to-fit like an inline element would. width:
     fit-content is what actually makes the button size to its own text
     instead of spanning the whole band, while margin:0 auto still works
     to center it since it's still a block-level box. */
  display: block; width: fit-content; margin: 0 auto; text-align: center;
  background: var(--gold); color: var(--blue-dark);
  font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(255,199,44,0.28); transition: background var(--lift), transform var(--lift), box-shadow var(--lift);
}
.woo-cart-page .wc-proceed-to-checkout a.checkout-button:hover {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,199,44,0.4);
}

/* -- Empty-cart state — the table/column headers stay visible (theme
   override at woocommerce/cart/cart-empty.php) instead of the table
   disappearing entirely; only the row content changes to a message. -- */
.woo-cart-page table.cart .sdmlc-cart-empty-row {
  text-align: center; padding: 40px 20px; font-size: 15px; color: var(--text);
}
.woo-cart-page table.cart .sdmlc-cart-empty-row a.button.wc-backward {
  display: inline-block; margin-left: 12px; background: var(--gold); color: var(--blue-dark);
  font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(255,199,44,0.28); transition: background var(--lift), transform var(--lift), box-shadow var(--lift);
}
.woo-cart-page table.cart .sdmlc-cart-empty-row a.button.wc-backward:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,199,44,0.4); }
/* No .cart-collaterals when the cart is empty (nothing to total) — let the
   table card use the full grid width instead of leaving column 2 blank.
   :last-child (not :only-child) is the right check here: the heading is
   always a sibling too, so .woocommerce-cart-form is only ever the LAST
   child when .cart-collaterals isn't present after it.

   BUT :last-child alone isn't enough after removing the cart's last item
   via the AJAX "x" link (not a full page reload) — WooCommerce's own
   cart.js swaps in the new empty-cart form correctly, but replaces
   .cart_totals with nothing rather than removing its .cart-collaterals
   wrapper, leaving an empty shell sibling behind. That empty div is still
   the real last DOM child, so :last-child stops matching until a full
   refresh re-renders without it.

   A first attempt checked ":has(.cart-collaterals:not(:empty))", but
   CSS :empty is stricter than it sounds — it fails to match if even a
   single whitespace text node is present, and WordPress/PHP template
   output almost always has stray whitespace between tags. So the
   leftover .cart-collaterals wrapper was never truly ":empty" even
   though it LOOKED empty (blank, no visible box), and the old rule never
   fired. Checking for the actual .cart_totals element's presence instead
   sidesteps whitespace entirely — that element is either there or it
   isn't, no ambiguity. */
.woo-cart-page .woocommerce-cart-form:last-child,
.woo-cart-page .woocommerce:not(:has(.cart_totals)) .woocommerce-cart-form {
  grid-column: 1 / -1;
}

/* -- Responsive: sidebar drops below the table, table collapses to a
   stacked-card layout per row using WooCommerce's own data-title attrs -- */
@media (max-width: 900px) {
  .woo-cart-page .woocommerce { grid-template-columns: 1fr; }
  .woo-cart-page .cart-collaterals { grid-column: 1; }
  .woo-cart-page .cart_totals { position: static; }
}
@media (max-width: 640px) {
  .woo-cart-page table.cart thead { display: none; }
  .woo-cart-page table.cart, .woo-cart-page table.cart tbody, .woo-cart-page table.cart tr, .woo-cart-page table.cart td {
    display: block; width: 100%;
  }
  .woo-cart-page table.cart tr.cart_item { padding: 16px 14px; position: relative; }
  .woo-cart-page table.cart tr.cart_item td { padding: 4px 0; border: none; }
  .woo-cart-page table.cart td.product-remove { position: absolute; top: 14px; right: 14px; width: auto; }
  .woo-cart-page table.cart td.product-thumbnail { display: inline-block; width: auto; vertical-align: top; margin-right: 12px; }
  .woo-cart-page table.cart td.product-name { display: inline-block; width: calc(100% - 90px); vertical-align: top; }
  .woo-cart-page table.cart td.product-price,
  .woo-cart-page table.cart td.product-quantity,
  .woo-cart-page table.cart td.product-subtotal {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  }
  .woo-cart-page table.cart td.product-price::before,
  .woo-cart-page table.cart td.product-quantity::before,
  .woo-cart-page table.cart td.product-subtotal::before {
    content: attr(data-title); font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--gold-dark);
  }
  .woo-cart-page table.cart td.actions .coupon { flex-direction: column; align-items: stretch; }
  .woo-cart-page table.cart td.actions .coupon input#coupon_code { width: 100%; }
}