/*
Theme Name: The Lantern Gala
Theme URI: https://thecharityauctioneer.uk/
Author: The Charity Auctioneer
Description: Storefront theme for The Lantern Gala, a demo fundraising event running on the Charity Auctions platform. WooCommerce-ready.
Version: 2.19.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lantern-gala
*/

/* =========================================================
   DESIGN TOKENS, matches thecharityauctioneer.uk brand system
   Warm paper canvas, friendly blue, sunny yellow accent, Poppins/Inter.
   ========================================================= */
:root{
  --cream:#fcfbf7;
  --cream-2:#eef2fb;
  --white:#ffffff;
  --ink:#23303f;
  --ink-soft:#52606f;
  --muted:#6a7482;

  --blue:#2e6cdf;
  --blue-deep:#2357c2;
  --yellow:#ffd23e;
  --amber:#f2b705;
  --navy:#173e96;
  --navy-deep:#123b8e;

  --line:rgba(35,48,63,.12);
  --shadow-sm:0 4px 18px -6px rgba(35,60,110,.14);
  --shadow:0 24px 60px -24px rgba(35,60,110,.20);
  --shadow-lg:0 40px 90px -30px rgba(35,60,110,.26);

  --f-display:"Poppins", system-ui, sans-serif;
  --f-body:"Inter", system-ui, sans-serif;

  --pad:clamp(1.25rem, 5vw, 6rem);
  --maxw:1280px;
  --r:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none), (pointer:coarse){ body{ cursor:auto } }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:var(--navy)}

.eyebrow{
  font-family:var(--f-body);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .eyebrow__dot{animation:dotpulse 2.6s var(--ease) infinite}
  @keyframes dotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
}
.h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem, 3.6vw, 2.7rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);
}
em{font-style:italic;color:var(--blue-deep)}

/* =========================================================
   CUSTOM CURSOR (desktop only)
   ========================================================= */
.cursor{
  position:fixed;top:0;left:0;z-index:9000;width:32px;height:32px;margin:-16px 0 0 -16px;
  border:1.5px solid var(--blue);border-radius:50%;pointer-events:none;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s;
}
.cursor.is-hover{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(46,108,223,.12)}
body.no-cursor .cursor{display:none}

.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:8000;background:linear-gradient(90deg,var(--blue),var(--yellow))}

/* =========================================================
   PERSISTENT DEMO BANNER
   ========================================================= */
.demo-banner{
  position:relative;z-index:6100;background:var(--navy);color:#dbe4f5;
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  padding:.55rem var(--pad);font-size:.82rem;text-align:center;
}
.demo-banner strong{color:#fff}
.demo-banner a{font-weight:700;color:var(--yellow);white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .3s}
.demo-banner a:hover{border-color:var(--yellow)}
@media (max-width:640px){.demo-banner span{display:none}}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;left:0;width:100%;z-index:6000;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1rem var(--pad);background:rgba(252,251,247,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:padding .3s var(--ease),box-shadow .3s;
}
.nav.is-scrolled{padding:.7rem var(--pad);box-shadow:var(--shadow-sm)}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:600;font-size:1.05rem;white-space:nowrap}
.nav__mark{width:36px;height:36px;display:grid;place-items:center;background:var(--blue);color:var(--yellow);border-radius:11px;flex:0 0 auto}
.nav__links{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.nav__links a{font-size:.86rem;font-weight:600;color:var(--ink-soft);position:relative;white-space:nowrap;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--yellow);border-radius:2px;transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}

/* dropdown submenus (desktop) */
.nav__drop{position:relative}
.nav__drop-btn{display:flex;align-items:center;gap:.35em;background:none;border:0;cursor:pointer;
  font-family:var(--f-body);font-size:.86rem;font-weight:600;color:var(--ink-soft);padding:0;transition:color .3s}
.nav__drop-btn svg{transition:transform .25s var(--ease)}
.nav__drop:hover .nav__drop-btn,.nav__drop.is-open .nav__drop-btn{color:var(--ink)}
.nav__drop:hover .nav__drop-btn svg,.nav__drop.is-open .nav__drop-btn svg{transform:rotate(180deg)}
.nav__drop-panel{display:none;position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);min-width:200px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:.5rem;flex-direction:column;gap:.1rem;z-index:10}
.nav__drop:hover .nav__drop-panel,.nav__drop.is-open .nav__drop-panel{display:flex;animation:cha-drop-in .28s var(--ease)}
@keyframes cha-drop-in{from{opacity:0;transform:translate(-50%,-7px)}to{opacity:1;transform:translate(-50%,0)}}
.nav__drop-panel a{padding:.6rem .9rem;border-radius:8px;font-size:.88rem}
.nav__drop-panel a::after{display:none}
.nav__drop-panel a:hover{background:var(--cream-2)}
/* ---- Language switcher (Google Website Translator under the hood) ---- */
.lang-switch__btn{display:flex;align-items:center;gap:.4em}
.lang-switch__current{font-weight:800;font-size:.78rem;letter-spacing:.03em}
.lang-switch__panel{min-width:170px;max-height:260px;overflow-y:auto}
.lang-switch__opt{width:100%;text-align:left;background:none;border:0;padding:.6rem .9rem;border-radius:8px;
  font-family:var(--f-body);font-size:.9rem;cursor:pointer;color:var(--ink)}
.lang-switch__opt:hover{background:var(--cream-2)}
.lang-switch--flat{display:flex;flex-wrap:wrap;gap:.5rem;padding:.2rem 0 1rem}
.lang-switch--flat .lang-switch__opt{width:auto;border:1px solid var(--line);border-radius:100px;padding:.4rem .9rem;font-size:.85rem}
/* Suppress Google's own banner/tooltip chrome; we drive the underlying
   translation engine entirely through our own UI. */
.goog-te-banner-frame.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}

.nav__actions{display:flex;align-items:center;gap:.8rem}
.nav__cart{position:relative;display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.86rem}
.nav__cart-count{background:var(--yellow);color:var(--navy);border-radius:100px;padding:.05em .55em;font-size:.75rem;font-weight:800}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){opacity:0}
body.menu-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:flex;flex-shrink:0}
  /* The brand name + cart + "Get tickets" pill + hamburger can't all fit on a
     narrow screen (none of them can shrink below their text width), so the
     hamburger, last in the row, gets pushed past the viewport edge and
     clipped by body's overflow-x:hidden, making the menu impossible to open.
     "Get tickets" is redundant here anyway (it's repeated at the bottom of
     the mobile menu itself), so drop it from this row and tighten the gaps. */
  .nav{gap:.6rem}
  .nav__actions{gap:.6rem}
  .nav__actions > a.btn{display:none!important}
}
@media (max-width:360px){
  .nav__cart{display:none}
}
.mobile-menu{position:fixed;inset:0;z-index:7000;background:var(--cream);padding:5.5rem var(--pad) 2rem;
  transform:translateY(-100%);transition:transform .5s var(--ease),visibility .5s;overflow-y:auto;
  display:flex;flex-direction:column;visibility:hidden;pointer-events:none;}
body.menu-open .mobile-menu{transform:translateY(0);visibility:visible;pointer-events:auto}
/* items cascade in as the menu lands, one wave, quick enough not to feel slow */
body.menu-open .mobile-menu > *{animation:cha-menu-item .5s var(--ease) backwards}
body.menu-open .mobile-menu > *:nth-child(1){animation-delay:.10s}
body.menu-open .mobile-menu > *:nth-child(2){animation-delay:.14s}
body.menu-open .mobile-menu > *:nth-child(3){animation-delay:.18s}
body.menu-open .mobile-menu > *:nth-child(4){animation-delay:.22s}
body.menu-open .mobile-menu > *:nth-child(5){animation-delay:.26s}
body.menu-open .mobile-menu > *:nth-child(6){animation-delay:.30s}
body.menu-open .mobile-menu > *:nth-child(7){animation-delay:.34s}
body.menu-open .mobile-menu > *:nth-child(8){animation-delay:.38s}
body.menu-open .mobile-menu > *:nth-child(9){animation-delay:.42s}
body.menu-open .mobile-menu > *:nth-child(10){animation-delay:.46s}
body.menu-open .mobile-menu > *:nth-child(n+11){animation-delay:.5s}
@keyframes cha-menu-item{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mobile-menu a{font-family:var(--f-display);font-size:1.3rem;font-weight:560;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu__group{font-family:var(--f-body);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:1.1rem 0 .2rem}
.mobile-menu a.mobile-menu__child{font-size:1.1rem;padding-left:1rem}
body.menu-open{overflow:hidden}

/* =========================================================
   BUTTONS, bulletproof override of WooCommerce's own :where()-gated
   defaults (which tie our specificity and can flip on cache/plugin
   updates). Layer + !important on the visual essentials only.
   ========================================================= */
.btn,.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,.woocommerce div.product form.cart .button,
a.add_to_cart_button,button.single_add_to_cart_button,a.added_to_cart,
.woocommerce a.checkout-button,.woocommerce-page a.checkout-button,
.wc-proceed-to-checkout a.checkout-button,button[type="submit"],input[type="submit"]{
  --bh:48px;display:inline-flex!important;align-items:center;justify-content:center;gap:.55em;
  height:var(--bh);min-height:var(--bh);padding:0 1.5rem!important;border-radius:100px!important;
  font-size:.92rem!important;font-weight:700!important;line-height:1!important;
  cursor:pointer;white-space:nowrap;font-family:var(--f-body)!important;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
  border:2px solid transparent!important;background:var(--yellow)!important;color:var(--navy)!important;
  box-shadow:0 12px 26px -12px rgba(23,62,150,.35)!important;
  text-shadow:none!important;margin:0;float:none!important;vertical-align:middle;
  position:relative;overflow:visible;
}
.btn:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
a.add_to_cart_button:hover,button.single_add_to_cart_button:hover,a.added_to_cart:hover,
.woocommerce a.checkout-button:hover{
  background:#f0c020!important;transform:translateY(-2px);color:var(--navy)!important;
}
.btn--soft,.woocommerce a.button.alt{background:var(--white)!important;color:var(--ink)!important;box-shadow:var(--shadow-sm)!important}
.btn--outline{background:transparent!important;border-color:var(--blue)!important;color:var(--blue)!important;box-shadow:none!important}
.btn--sm{--bh:40px;font-size:.85rem!important;padding:0 1.1rem!important}
.btn--lg{--bh:56px;font-size:1rem!important;padding:0 1.9rem!important}
/* shine sweep on hover */
.btn::before,.button::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn:hover::before,.button:hover::before{transform:translateX(130%)}
.btn span,.btn svg{position:relative;z-index:1}
/* press feedback: buttons physically depress on click */
.btn:active,.button:active,.woocommerce a.button:active,a.add_to_cart_button:active,
button.single_add_to_cart_button:active{transform:translateY(0) scale(.97)}

/* =========================================================
   HERO / PAGE HEADER
   ========================================================= */
.phero{position:relative;padding:5rem var(--pad) 3.5rem;overflow:hidden;isolation:isolate}
.phero__glow{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 70% at 85% -10%, rgba(46,108,223,.14), transparent 60%),
    radial-gradient(50% 60% at 5% 110%, rgba(255,210,62,.16), transparent 60%),
    var(--cream);}
.phero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.phero__inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.phero--split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.breadcrumb{display:flex;gap:.5rem;font-size:.8rem;color:var(--muted);margin-bottom:1.1rem;font-weight:600;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--blue)}
.phero h1{font-family:var(--f-display);font-weight:600;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;margin:.5rem 0 1rem}
.phero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.phero h1 .line>span{display:block;will-change:transform}
.phero__lead{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft);max-width:52ch}
.phero__actions{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.phero__stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}
.phero__stat strong{display:block;font-family:var(--f-display);font-size:1.6rem;color:var(--blue-deep)}
.phero__stat span{font-size:.82rem;color:var(--muted)}
.phero__media{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));display:grid;place-items:center}
.phero__media svg{width:60%;height:60%}

/* =========================================================
   SCROLL REVEALS (GSAP targets these; CSS gives a safe hidden start)
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(28px)}
[data-hero]{opacity:0}
.js [data-reveal],.js [data-hero]{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-hero]{opacity:1!important;transform:none!important}
}

/* =========================================================
   SECTIONS
   ========================================================= */
/* Content column: width:min() so the left edge lands in exactly the same
   place as the hero at EVERY viewport. (The old max-width + horizontal-padding
   pattern double-inset sections by one --pad once the viewport got wider than
   --maxw, pushing every section heading right of the hero text.) */
.section{width:min(calc(100% - 2 * var(--pad)),var(--maxw));margin-inline:auto;padding:clamp(3.5rem,7vw,5.5rem) 0}
.band{background:var(--cream-2)}
.band .section{padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.section__head{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.4rem;max-width:64ch}
.prose p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:1.1rem;max-width:68ch}
.prose h2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);margin:1.8rem 0 .9rem}
.prose ul{margin:0 0 1.3rem;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}
.prose ul li{position:relative;padding-left:1.7rem;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:3px;background:var(--yellow)}
.prose a{border-radius:3px;transition:background .25s;padding:0 .1em;margin:0 -.1em;color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{background:rgba(255,210,62,.35)}

/* Inline illustration in running text: sized like a book figure, not a banner.
   Width/height attrs on the img reserve the space (no layout shift); this
   just shapes and centres it. */
.figure{display:block;max-width:620px;margin:1.8rem auto;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);transform:translateZ(0)}
.figure img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.figure:hover img{transform:scale(1.02)}
.figure--wide{max-width:820px}

/* =========================================================
   USER GUIDE, searchable index + grouped accordions
   ========================================================= */
.guide-search{position:sticky;top:calc(var(--nav-h, 78px));z-index:40;background:var(--cream);
  padding:1rem 0;margin-bottom:.5rem}
.guide-search__box{position:relative;max-width:520px}
.guide-search__box svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.guide-search__box input{width:100%;padding:.9rem 1.2rem .9rem 2.8rem;border:2px solid var(--line);border-radius:100px;
  font-family:var(--f-body);font-size:1rem;background:var(--white);box-shadow:var(--shadow-sm);transition:border-color .25s}
.guide-search__box input:focus{outline:none;border-color:var(--blue)}
.guide-search__count{font-size:.82rem;color:var(--muted);margin-top:.6rem}
.guide-index{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 2.2rem}
.guide-index a{background:var(--white);border:1px solid var(--line);border-radius:100px;padding:.5rem 1.1rem;
  font-size:.85rem;font-weight:700;color:var(--blue-deep);transition:background .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s}
.guide-index a:hover{background:var(--cream-2);border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.guide-group{margin-bottom:2.4rem;scroll-margin-top:calc(var(--nav-h, 78px) + 5rem)}
.guide-group h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.6rem}
.guide-group h3 .guide-group__icon{width:34px;height:34px;border-radius:10px;background:var(--cream-2);color:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.guide-group__lead{color:var(--ink-soft);font-size:.92rem;margin-bottom:1rem;max-width:64ch}
.guide-noresults{display:none;text-align:center;color:var(--muted);padding:3rem 1rem}
.guide-noresults.is-show{display:block}
mark.guide-hit{background:rgba(255,210,62,.55);color:inherit;border-radius:3px;padding:0 .1em}

/* FAQ accordion, reused wherever a page has visible Q&A content (matches FAQPage schema in inc/seo.php) */
.faq-item{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq-item summary{cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--blue);font-size:1.3rem;flex:0 0 auto;transition:transform .25s}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary::after{transition:transform .3s var(--ease),color .3s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{margin:.7rem 0 0;color:var(--ink-soft);max-width:68ch}
.faq-item [open] p,.faq-item[open] p{animation:cha-faq-in .35s var(--ease)}
@keyframes cha-faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* grid cards: tickets/games/tiers etc. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column;gap:.8rem}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__icon{width:52px;height:52px;border-radius:14px;background:var(--cream-2);color:var(--blue);display:grid;place-items:center;flex:0 0 auto;
  transition:transform .35s var(--ease),background .35s,color .35s}
.card:hover .card__icon{transform:scale(1.08) rotate(-4deg);background:var(--yellow);color:var(--navy)}
.card h3{font-family:var(--f-display);font-weight:600;font-size:1.15rem}
.card p{color:var(--ink-soft);font-size:.95rem;flex:1}
.card__price{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--blue-deep)}

/* tier badge medallions */
.tier{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;padding:2rem 1.4rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tier--feature{border-color:var(--yellow);box-shadow:0 24px 60px -30px rgba(255,210,62,.55)}
.tier__badge{width:84px;height:84px}
.tier h3{font-family:var(--f-display);font-weight:600;font-size:1.2rem}
.tier__price{font-family:var(--f-display);font-weight:700;font-size:1.6rem;color:var(--blue-deep)}
.tier p{color:var(--ink-soft);font-size:.9rem}

/* animated stat counters */
[data-count]{display:inline-block;font-variant-numeric:tabular-nums}

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */
/* fundraising progress bar */
.raised{width:min(calc(100% - 2 * var(--pad)),var(--maxw));margin-inline:auto;padding:0 0 clamp(2.5rem,5vw,4rem)}
.raised__card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 2rem;box-shadow:var(--shadow-sm)}
.raised__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.raised__now{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--blue-deep)}
.raised__label{color:var(--ink-soft);font-size:.9rem;font-weight:600}
.raised__bar{height:14px;border-radius:100px;background:var(--cream-2);overflow:hidden;position:relative}
.raised__fill{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--blue),var(--yellow));position:relative}
.raised__fill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%)}
@media (prefers-reduced-motion:no-preference){
  .raised__fill::after{animation:raisedshine 2.6s var(--ease) 1.4s infinite}
  @keyframes raisedshine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
}

/* highlighter sweep under italic brand phrases */
.em-hl{position:relative}
.em-hl::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.3em;
  background:var(--yellow);opacity:.4;border-radius:.15em;z-index:-1;
  transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease) .2s}
.em-hl.is-inview::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.em-hl::after{transition:none}}

/* confetti micro-burst particles (spawned by JS on add-to-cart / CTA clicks) */
.burst{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:9500}

/* =========================================================
   TICKET TIERS — early-bird badge + live capacity bar
   ========================================================= */
.ticket-badge{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;
  font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding:.25rem .65rem;border-radius:100px;margin:0 0 .5rem}
.ticket-avail{margin-top:.7rem}
.ticket-avail__bar{height:8px;border-radius:100px;background:var(--cream-2);overflow:hidden}
.ticket-avail__bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--yellow));
  transition:width .6s var(--ease)}
.ticket-avail__note{font-size:.78rem;color:var(--muted);margin-top:.4rem;font-weight:600}
.ticket-avail__note--low{color:#c0392b}
.ticket-avail__note--sold-out{color:#c0392b;text-transform:uppercase;letter-spacing:.04em}

/* product image hover zoom */
.woocommerce ul.products li.product .woocommerce-loop-product__link img{transition:transform .5s var(--ease)}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link img{transform:scale(1.05)}

/* =========================================================
   VENUE MAP
   ========================================================= */
.venue{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}

/* Two related prose blocks placed side by side instead of stacked/separated */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:880px){.two-up{grid-template-columns:1fr}}
.venue__map{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--cream-2)}
.venue__map svg{width:100%;height:100%;display:block}
.venue__pin{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .venue__pin{animation:pinbounce 2.4s var(--ease) infinite}
  @keyframes pinbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .venue__ring{animation:ringpulse 2.4s var(--ease) infinite}
  @keyframes ringpulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
}
.venue__addr{display:flex;align-items:center;gap:.6rem;font-weight:700;margin-top:1rem;color:var(--ink)}
.venue__addr svg{color:var(--blue)}

/* CTA band */
.cta{position:relative;margin:0 var(--pad) 4rem;border-radius:32px;overflow:hidden;padding:clamp(3.5rem,8vw,6rem) var(--pad);
  text-align:center;background:radial-gradient(80% 120% at 20% 0%, #2f62d8, var(--navy-deep));}
.cta__inner{position:relative;z-index:2;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.cta__title{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.05;color:#fff}
.cta__lead{color:#dbe0ec;max-width:46ch}
.cta__actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding:clamp(3rem,6vw,4rem) var(--pad) 2rem;background:var(--navy);color:#dbe4f5}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand{font-family:var(--f-display);font-weight:600;font-size:1.4rem;color:#fff;display:flex;align-items:center;gap:.6rem}
.footer__cols{display:flex;gap:3rem;flex-wrap:wrap}
.footer__col h4,.footer__col h2{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#ffe6a3;margin-bottom:.9rem;font-weight:700;margin-top:0}
.footer__col a{display:block;color:#dbe4f5;font-size:.9rem;margin-bottom:.5rem;transition:color .3s}
.footer__col a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;color:#b8c6de;font-size:.82rem}
.footer__bottom a{color:#dbe4f5}
.footer__bottom a:hover{color:#fff}

/* =========================================================
   WOOCOMMERCE OVERRIDES (targeting default WC markup, no template overrides)
   ========================================================= */
.woocommerce{max-width:var(--maxw);margin:0 auto;padding:2.5rem var(--pad) 5rem}
/* When a [products] shortcode is dropped inside our own .section wrapper (every
   hand-built page does this), that wrapper has ALREADY inset the content to the
   correct left edge, this shortcode's own .woocommerce div then adds a second,
   redundant --pad of padding on top, pushing every lot one full --pad to the
   right of the hero/heading text above it. Neutralise it in that context only;
   standalone WooCommerce templates (shop archive, single product) still get
   their own centering/padding as before. */
.section .woocommerce{max-width:none;margin:0;padding:0}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem;list-style:none}
/* Honour the shortcode's own columns="N" attribute (WooCommerce renders it as
   this exact class) instead of always falling back to auto-fill, so a page
   author's explicit "I want 4 per row" is respected rather than overridden. */
.woocommerce ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
.woocommerce ul.products.columns-4{grid-template-columns:repeat(4,1fr)}
.woocommerce ul.products.columns-5{grid-template-columns:repeat(5,1fr)}
.woocommerce ul.products.columns-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){
  .woocommerce ul.products.columns-4,.woocommerce ul.products.columns-5,.woocommerce ul.products.columns-6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr!important}
}
/* WooCommerce's own CSS gives ul.products a float-based clearfix (::before/::after
   with real content and display:table) for its legacy layout. Once the parent is
   display:grid, browsers count those pseudo-elements as genuine grid items, silently
   eating the first cell and shunting every real product one slot along. Neutralise
   them now that grid (not floats) is doing the layout. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
/* WooCommerce's core CSS also still floats every card and gives it a legacy
   percentage width (e.g. 22.05%, or 30.75% for a 3-column shortcode) meant for
   its old float-based grid. Since a percentage width on a grid item resolves
   against that item's OWN grid cell (not the whole row), this was shrinking
   every card to ~30% of its already-narrow column, squashing the image, price
   and button inside it. Grid handles sizing now, so kill float/width/margin. */
.woocommerce ul.products li.product{float:none!important;width:auto!important;margin:0!important;clear:none!important}
.woocommerce ul.products li.product{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)}
.woocommerce ul.products li.product:hover{transform:translateY(-4px)}
.woocommerce ul.products li.product img{border-radius:12px;margin-bottom:.8rem;aspect-ratio:1/1;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--f-display);font-weight:600;font-size:1rem;margin:0 0 .3rem}
.woocommerce span.price,.woocommerce ul.products li.product .price{color:var(--blue-deep);font-weight:700}
.woocommerce div.product .product_title{font-family:var(--f-display)}
.woocommerce table.shop_table{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.woocommerce table.shop_table th{background:var(--cream-2)}
.woocommerce-checkout #payment{background:var(--cream-2)!important;border-radius:var(--r)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom-color:var(--line)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea{
  border-radius:10px;border:1px solid var(--line);padding:.7rem .9rem;font-family:var(--f-body)}
.woocommerce-message,.woocommerce-info{border-top-color:var(--yellow)!important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--blue-deep)!important}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border-radius:8px}
.woocommerce .star-rating span::before{color:var(--yellow)}
#main{background:var(--cream)}
.woocommerce .quantity .qty{border-radius:10px;border:1px solid var(--line)}

/* =========================================================
   WOOCOMMERCE BLOCKS, Cart & Checkout (block editor, not the classic
   [woocommerce_cart]/[woocommerce_checkout] shortcode markup above)
   ========================================================= */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{font-family:var(--f-body);margin-top:1rem}
.wc-block-components-sidebar{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.8rem!important;box-shadow:var(--shadow-sm)}
.wc-block-components-product-name{font-family:var(--f-display)!important;font-weight:600!important;color:var(--ink)}
.wc-block-cart-item__total-price-and-sale-badge-wrapper,.wc-block-components-formatted-money-amount{color:var(--blue-deep)}
.wc-block-components-panel__button,.wc-block-components-totals-item__label{font-weight:700}
.wc-block-components-quantity-selector{border:1px solid var(--line)!important;border-radius:100px!important;overflow:hidden}
.wc-block-components-quantity-selector__button{color:var(--blue)!important}
.wc-block-components-checkbox__input:checked+.wc-block-components-checkbox__mark{color:var(--blue)}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked-with-children,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__input:checked{
  accent-color:var(--blue)}
.wc-block-components-radio-control__option{border-radius:12px!important}
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button,
a.wc-block-cart__submit-button,button.wc-block-components-checkout-place-order-button{
  background:var(--yellow)!important;color:var(--navy)!important;border-radius:100px!important;
  font-weight:800!important;border:0!important;transition:transform .3s var(--ease),background .3s}
.wc-block-cart__submit-button:hover,.wc-block-components-checkout-place-order-button:hover{
  background:#f0c020!important;transform:translateY(-2px)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--blue-deep);font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.wc-block-components-title{font-family:var(--f-display)!important}
.wc-block-components-order-summary-item__individual-prices,.wc-block-components-order-summary-item__description{color:var(--muted)}
.wc-block-cart-items,.wc-block-components-panel{border-color:var(--line)!important}

/* my-account tabs */
.woocommerce-MyAccount-navigation ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.woocommerce-MyAccount-navigation a{padding:.6rem .9rem;border-radius:10px;display:block;font-weight:600}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--cream-2);color:var(--blue-deep)}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.to-top{position:fixed;right:1.2rem;bottom:1.2rem;z-index:6400;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;background:var(--navy);color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s,transform .35s,background .3s}
.to-top.is-show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--blue)}

/* accessible focus states */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* skip-to-content link: hidden until keyboard-focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#0b1f3a;color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:880px){
  .phero--split{grid-template-columns:1fr}
  .phero__media{order:-1;max-width:26rem;margin:0 auto}
  .venue{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* =========================================================
   PWA — install banner + installed "app mode" refinements
   ========================================================= */
.pwa-install{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:9000;
  width:calc(100% - 2rem);max-width:460px;display:flex;align-items:center;gap:.9rem;
  background:var(--navy,#173e96);color:#fff;border-radius:16px;padding:.9rem 1rem;
  box-shadow:0 18px 45px -14px rgba(10,26,62,.6);animation:pwa-rise .45s cubic-bezier(.22,1,.36,1)}
@keyframes pwa-rise{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
.pwa-install__icon{font-size:1.6rem;flex:0 0 auto;line-height:1}
.pwa-install__body{flex:1;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.pwa-install__body strong{font-weight:700}
.pwa-install__hint{color:#cdd8f0;font-size:.82rem}
.pwa-install__go{align-self:flex-start;margin-top:.15rem;background:var(--yellow,#ffd23e)!important;color:var(--navy,#173e96)!important;
  border:0;border-radius:100px;padding:.45rem 1rem;font-weight:800;font-size:.82rem;cursor:pointer}
.pwa-install__close{flex:0 0 auto;background:rgba(255,255,255,.15);border:0;color:#fff;width:28px;height:28px;
  border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.pwa-install__close:hover{background:rgba(255,255,255,.28)}

/* Installed app: it launches full-screen, so the marketing demo banner is just
   noise — hide it and reclaim the notch/safe-area space for real content. */
html.is-app .demo-banner{display:none}
html.is-app body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
html.is-app .nav{padding-top:calc(1rem + env(safe-area-inset-top))}
html.is-app .to-top{bottom:calc(1.2rem + env(safe-area-inset-bottom))}

/* App login screen: make the WooCommerce my-account entry feel like an app front page. */
html.is-app .woocommerce-account .woocommerce{max-width:460px;padding-top:1.5rem}
html.is-app .woocommerce-account .u-columns>.col-1,
html.is-app .woocommerce-account .u-columns>.col-2{float:none;width:100%}

/* iOS zooms the whole page in when a guest focuses any input under 16px, and
   then will not zoom back out on its own. On a shared bidding tablet that
   leaves the next guest looking at a magnified, half-off-screen page, which is
   exactly the sort of "the app is broken" a busy event night produces. */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],input[type=search],input[type=url],select,textarea{font-size:16px}
html{-webkit-text-size-adjust:100%}

/* ---------------------------------------------------------
   TABLET MODE
   A kiosk layout for a shared iPad or Android tablet left out
   on a table for guests to bid on. Entered from the footer,
   behind a password, so a guest can't put the tablet into (or
   out of) it. See inc/tablet-mode.php.
   --------------------------------------------------------- */
html.tablet-mode .demo-banner,
html.tablet-mode .cursor,
html.tablet-mode .progress,
html.tablet-mode .pwa-install{display:none!important}
html.tablet-mode body{
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  -webkit-tap-highlight-color:rgba(255,210,62,.35)}
html.tablet-mode .nav{padding-top:calc(1rem + env(safe-area-inset-top));position:static}
/* Bigger type and much bigger touch targets: fingers, not a mouse pointer. */
html.tablet-mode{font-size:112.5%}
html.tablet-mode .btn,
html.tablet-mode button,
html.tablet-mode .cha-bidbtn,
html.tablet-mode .cha-buynowbtn,
html.tablet-mode .single_add_to_cart_button{min-height:56px;font-size:1.05rem}
html.tablet-mode input,html.tablet-mode select,html.tablet-mode textarea{min-height:52px;font-size:17px}
html.tablet-mode .cha-box{max-width:none}
/* No hover-only affordances: a touchscreen has no hover, and the sticky
   :hover state a tap leaves behind reads as a stuck button. */
html.tablet-mode *:hover{transition:none}

.tablet-toggle{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;
  opacity:.75;text-decoration:underline;text-underline-offset:3px}
.tablet-toggle:hover{opacity:1}
.tablet-lock{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,48,.72);padding:1.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tablet-lock[hidden]{display:none}
.tablet-lock__card{background:#fff;color:#0b1f3a;border-radius:20px;padding:2rem 1.8rem;max-width:420px;width:100%;
  box-shadow:0 30px 70px rgba(6,15,35,.45);text-align:center}
.tablet-lock__card h2{font-size:1.35rem;margin:0 0 .5rem}
.tablet-lock__card p{color:#4a5568;line-height:1.5;margin:0 0 1.2rem;font-size:.95rem}
.tablet-lock__card input{width:100%;padding:.9rem 1rem;border:2px solid #d8dee9;border-radius:12px;font-size:17px;text-align:center}
.tablet-lock__card input:focus{outline:none;border-color:#173e96}
.tablet-lock__row{display:flex;gap:.6rem;margin-top:1rem}
.tablet-lock__row button{flex:1;min-height:52px;border-radius:100px;border:2px solid #173e96;font-weight:800;
  font-size:1rem;cursor:pointer;background:#fff;color:#173e96}
.tablet-lock__row button.is-primary{background:#173e96;color:#fff}
.tablet-lock__msg{min-height:1.3em;margin:.7rem 0 0;font-weight:600;color:#c0392b;font-size:.9rem}
.tablet-lock__hint{margin-top:1rem;font-size:.85rem;color:#6a7482;line-height:1.45;text-align:left;
  background:#f5f7fb;border-radius:12px;padding:.8rem 1rem}

/* Gift Aid callout on donation pages */
.giftaid-note{max-width:var(--maxw);margin:1.4rem auto 0;background:#eef7ef;border:1px solid #cfe8d4;border-left:4px solid #1a8f4c;
  border-radius:12px;padding:1rem 1.3rem;color:#23303f;font-size:1rem;line-height:1.5}
.giftaid-note strong{color:#137a3f}

/* =========================================================
   BLOG POST (single.php), matches the article design on
   thecharityauctioneer.uk: text hero, featured banner, prose
   column, related block, closing CTA.
   ========================================================= */
.article__head{max-width:820px}
.article__meta{display:flex;gap:.75rem;align-items:center;color:var(--muted);font-size:.85rem;font-weight:600;margin-top:1.1rem;flex-wrap:wrap}
.article__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);flex:none}

.article__figure-wrap{max-width:980px;margin:0 auto;padding:0 var(--pad)}
.article__figure{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--cream-2);margin:0}
.article__figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

.article{max-width:760px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--pad) 4rem}
.article .prose p,.article .prose li{font-size:1.12rem;line-height:1.7}

/* Prose extras not already defined above */
.prose h1{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 1.1rem}
.prose h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin:1.7rem 0 .7rem}
.prose h2{margin-top:2.2rem}
.prose strong{color:var(--ink);font-weight:700}
.prose ol{margin:0 0 1.3rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.prose ol li{color:var(--ink-soft);padding-left:.3rem}
.prose ol li::marker{color:var(--blue-deep);font-weight:700}
.prose blockquote{margin:1.6rem 0;padding:1.2rem 1.5rem;background:var(--cream-2);border-left:4px solid var(--yellow);border-radius:0 12px 12px 0;font-family:var(--f-display);font-size:1.18rem;color:var(--ink)}
.prose blockquote p{color:var(--ink);max-width:none;margin:0}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4rem 0}
.prose figure{margin:2rem 0}
.prose figure img,.prose>img{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-sm);display:block}
.prose figcaption{margin-top:.6rem;font-size:.85rem;color:var(--muted);text-align:center}
.prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.98rem}
.prose table th,.prose table td{border:1px solid var(--line);padding:.65rem .8rem;text-align:left}
.prose table th{background:var(--cream-2);font-family:var(--f-display);font-weight:600;color:var(--ink)}
.prose h2:first-child,.prose h1:first-child{margin-top:0}

.related{max-width:760px;margin:0 auto;padding:1.6rem 1.9rem;background:var(--cream-2);border-radius:18px;border-left:4px solid var(--blue)}
.related h2{font-family:var(--f-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);margin:0 0 1rem}
.related__links{display:flex;flex-direction:column;gap:.55rem}
.related__links a{font-family:var(--f-display);font-weight:600;font-size:1.08rem;color:var(--ink);transition:color .25s}
.related__links a:hover{color:var(--blue-deep)}
.article .related{margin-top:2.5rem;padding-left:1.9rem;padding-right:1.9rem}

@media (max-width:600px){
  .article__figure img{aspect-ratio:4/3}
}

/* Blog index (home.php): post-card grid, matches thecharityauctioneer.uk */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);cursor:pointer}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-card__top{height:6px;display:block}
.post-card__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--cream-2)}
.post-card:hover .post-card__img{opacity:.96}
.post-card__body{padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.post-card__cat{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep)}
.post-card h3{font-family:var(--f-display);font-weight:600;font-size:1.18rem;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.post-card p{color:var(--ink-soft);font-size:.92rem;flex:1}
.post-card__more{font-weight:700;color:var(--blue-deep);font-size:.9rem}
@media (max-width:960px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.blog-empty{color:var(--ink-soft);font-size:1.05rem;text-align:center;padding:2rem 0}
.pagination{display:flex;justify-content:center;margin-top:2.5rem}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .8rem;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-family:var(--f-display);transition:background .25s,color .25s}
.pagination a.page-numbers:hover{background:var(--cream-2);color:var(--blue-deep)}
.pagination .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Light button + eyebrow variants for use on the dark CTA panel */
.eyebrow--light{color:rgba(255,255,255,.9)}
.btn--white{background:#fff!important;color:var(--navy)!important;box-shadow:var(--shadow-sm)!important;border-color:#fff!important}
.btn--outline-light{background:transparent!important;border-color:rgba(255,255,255,.55)!important;color:#fff!important;box-shadow:none!important}
.btn--outline-light:hover{border-color:#fff!important}

/* =========================================================
   WCAG 2.2 AA contrast fixes for the guest flow. axe-core flagged these
   against their backgrounds on the lot/checkout pages: the WooCommerce
   breadcrumb and single-product price sit on the near-white page, the tablet
   toggle on the deep-blue bar. Nudged to clear 4.5:1 without changing the look.
   ========================================================= */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a{color:#595f66!important}
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price .woocommerce-Price-amount,
.woocommerce div.product .summary .price bdi{color:var(--blue-deep)!important}
.tablet-toggle{color:#cdd8ee}

/* =========================================================
   Homepage blocks, moved here from page content on purpose.
   WordPress strips <style>/<script> from page content for users without
   unfiltered_html and wptexturize mangles "--" into an en-dash, so this CSS
   was leaking onto the page as visible text. Kept in the theme it cannot recur.
   ========================================================= */
.phero__actions a.btn--app{background:#0f2350!important;color:#fff!important;border:0!important}
.phero__actions a.btn--app:hover{background:#153063!important}
#event-app .appwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;align-items:center}
#event-app .app-list{list-style:none;padding:0;margin:1.1rem 0 1.5rem}
#event-app .app-list li{position:relative;padding-left:1.7rem;margin:.6rem 0;line-height:1.5}
#event-app .app-list li::before{content:'';position:absolute;left:0;top:.45em;width:.95rem;height:.95rem;border-radius:50%;background:#c8a24b}
#event-app .phone{width:220px;margin:0 auto;background:#0b1f3a;border-radius:34px;padding:13px;box-shadow:0 26px 60px rgba(11,31,58,.3)}
#event-app .phone__screen{background:radial-gradient(120% 120% at 50% 0%,#12315c,#0b1f3a);border-radius:22px;padding:1.7rem 1.1rem;text-align:center;color:#fff;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#event-app .phone__tile{width:56px;height:56px;border-radius:15px;background:#0f2350;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
#event-app .phone__eyebrow{color:#c8a24b;text-transform:uppercase;letter-spacing:.24em;font-size:.6rem;font-weight:700;margin:0}
#event-app .phone__total{font-size:2.2rem;font-weight:800;margin:.35rem 0 .15rem}
#event-app .phone__cap{color:#aebbd8;font-size:.78rem;margin:.2rem 0 0}
@media(max-width:760px){#event-app .appwrap{grid-template-columns:1fr}}