/* Now Ayrshire Radio · Christmas Toy Appeal microsite. Mobile first. */
:root{
  --navy:#151435;--deep:#0B0A1F;--navy-2:#1f1d4a;--amber:#FAA61A;--amber-2:#ffbf4d;--ember:#F15A22;--red:#ED1B2F;--berry:#B0122A;--pine:#0F5B3A;
  --snow:#F7F4EE;--card:#fff;--ink:#151435;--muted:#55547a;--line:rgba(21,20,53,.13);
  --fd:'MuseoModerno',system-ui,sans-serif;--fb:'Darker Grotesque',system-ui,-apple-system,sans-serif;
  --r:18px;--gut:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section{scroll-margin-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--snow);color:var(--ink);font:600 19px/1.35 var(--fb);overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-style:italic;font-weight:800;line-height:1.05;margin:0}
h2{font-size:clamp(28px,6vw,44px);letter-spacing:-.01em}
h3{font-size:22px}
.muted{color:var(--muted);margin:.4em 0 0}
.small{font-size:16px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--navy);padding:8px 14px;z-index:50;font-weight:800}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 18px/1 var(--fb);border:0;border-radius:12px;padding:14px 20px;cursor:pointer;text-decoration:none;background:var(--navy);color:#fff;min-height:48px;transition:transform .12s,background .15s}
.btn:active{transform:scale(.98)}
.btn.amber{background:var(--amber);color:var(--navy)}
.btn.amber:hover{background:var(--amber-2)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut);padding-top:max(10px,env(safe-area-inset-top));background:rgba(21,20,53,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand img{display:block;height:34px;width:auto}
.top nav{display:flex;gap:4px}
.top nav a{color:#fff;text-decoration:none;font:800 16px var(--fb);padding:8px 12px;border-radius:10px}
.top nav a:first-child{background:var(--amber);color:var(--navy)}
.top nav a:not(:first-child):hover{background:rgba(255,255,255,.1)}
.hide-sm{display:none}
@media (min-width:720px){.hide-sm{display:inline-block}.brand img{height:40px}}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(120% 80% at 85% -10%,rgba(250,166,26,.22),transparent 60%),
  radial-gradient(90% 70% at -10% 110%,rgba(237,27,47,.20),transparent 60%),
  linear-gradient(180deg,var(--navy),var(--deep));padding:34px 0 30px}
.snow{position:absolute;inset:-200px 0 0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,#fff 1.4px,transparent 1.9px),radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.55) .8px,transparent 1.3px);
  background-size:120px 120px,70px 70px,43px 43px;background-position:0 0,35px 22px,12px 50px;animation:snow 38s linear infinite}
@keyframes snow{to{background-position:60px 1200px,0 700px,-20px 430px}}
@media (prefers-reduced-motion:reduce){.snow{animation:none}}
.hero-in{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.kicker{margin:0 0 6px;font:800 16px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.hero h1{font-size:clamp(44px,12vw,92px);font-weight:900;letter-spacing:-.02em}
.hero h1 span{display:block;color:var(--amber)}
.lede{font:700 24px/1.2 var(--fb);margin:14px 0 4px;max-width:30ch}
.sub{margin:6px 0 0;max-width:52ch;color:rgba(255,255,255,.82);font-weight:600}

.finder{margin:24px 0 0;max-width:560px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:16px}
.finder label{display:block;font:800 italic 20px var(--fd);margin:0 0 10px}
.finder-row{display:flex;gap:8px}
.finder input{flex:1;min-width:0;font:700 19px var(--fb);padding:12px 14px;border-radius:12px;border:2px solid transparent;background:#fff;color:var(--navy);min-height:52px}
.finder input:focus{outline:none;border-color:var(--amber)}
.finder input::placeholder{color:#8a89a6;font-weight:600}
.locate{width:100%;margin-top:10px}
.finder-msg{margin:10px 0 0;min-height:1.2em;font-size:17px;color:var(--amber-2)}
.finder-msg:empty{display:none}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 0;max-width:560px}
.facts>div{background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px}
.facts dt{font:800 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.facts dd{margin:2px 0 0;font:900 italic 26px/1.1 var(--fd);color:var(--amber)}
#f-when{font-size:19px;line-height:1.25;padding-top:4px}
@media (min-width:900px){
  .hero{padding:64px 0 56px}
  .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:20px 48px;align-items:end}
  .hero-in>.kicker,.hero-in>h1,.hero-in>.lede,.hero-in>.sub{grid-column:1}
  .finder{grid-column:2;grid-row:1/span 4;margin:0}
  .facts{grid-column:1 / span 2}
}

/* nearest results */
.nearest{background:#fff;padding:28px 0 24px;border-bottom:1px solid var(--line)}
.nearest h2{font-size:clamp(26px,5.5vw,38px)}
.near-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.near-list{grid-template-columns:repeat(3,1fr)}}
.near{display:flex;flex-direction:column;gap:6px;background:var(--snow);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative}
.near:first-child{background:var(--navy);color:#fff;border-color:var(--navy)}
.near:first-child .addr,.near:first-child .meta{color:rgba(255,255,255,.78)}
.near .rank{font:800 13px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.near:first-child .rank{color:var(--amber)}
.near h3{font-size:23px;display:flex;gap:10px;align-items:center}
.near h3 img{width:44px;height:44px;border-radius:50%;flex:none;background:#fff}
.near .addr{color:var(--muted);font-size:17px;line-height:1.25}
.near .meta{font-size:17px;color:var(--muted)}
.dist{font:900 italic 20px var(--fd);color:var(--berry)}
.near:first-child .dist{color:var(--amber)}
.near .acts{display:flex;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.near .acts .btn{flex:1;padding:12px 14px;font-size:17px}
.near:first-child .acts .btn.sec{background:rgba(255,255,255,.12)}
.btn.sec{background:rgba(21,20,53,.08);color:var(--navy)}
.near:first-child .btn.sec{color:#fff}
.near-more{margin:14px 0 0;font-size:18px}
.near-more a{font-weight:800;color:var(--navy)}

/* map + list */
.mapsec{padding:36px 0 0;background:var(--snow)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font:800 16px var(--fb);padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;min-height:42px}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.map-grid{display:grid;grid-template-columns:1fr}
.map-box{position:relative;height:58vh;min-height:340px;max-height:620px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#map{position:absolute;inset:0;background:#e8e4dc}
.map-expand{position:absolute;right:12px;bottom:28px;z-index:500;padding:10px 14px;min-height:42px;font-size:16px;box-shadow:0 6px 18px rgba(11,10,31,.3)}
.map-box.full{position:fixed;inset:0;z-index:60;height:auto;max-height:none}
body.map-open{overflow:hidden}
.pts{list-style:none;margin:0;padding:16px var(--gut) 40px;display:grid;gap:10px;align-content:start}
@media (min-width:680px){.pts{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .map-grid{grid-template-columns:1fr 420px;max-width:1180px;margin:0 auto;padding:0 var(--gut) 48px;gap:18px}
  .map-box{height:640px;max-height:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .map-expand{display:none}
  .pts{grid-template-columns:1fr;padding:0;max-height:640px;overflow-y:auto;padding-right:4px}
}
.pt{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 15px;cursor:pointer;display:grid;grid-template-columns:52px 1fr;gap:4px 12px;transition:border-color .15s,box-shadow .15s}
.pt:hover,.pt.sel{border-color:var(--amber);box-shadow:0 6px 22px rgba(250,166,26,.22)}
.pt .logo{grid-row:1/span 3;width:52px;height:52px}
.pt h3{font-size:20px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pt .addr{color:var(--muted);font-size:17px;line-height:1.25}
.pt .row{font-size:17px;line-height:1.3;color:var(--ink)}
.pt .acts{grid-column:1 / span 2;display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pt .acts a{font:800 16px var(--fb);text-decoration:none;padding:9px 13px;border-radius:10px;background:rgba(21,20,53,.07);color:var(--navy);min-height:40px;display:inline-flex;align-items:center}
.pt .acts a.go{background:var(--navy);color:#fff}
.pt .km{margin-left:auto;font:800 italic 16px var(--fd);color:var(--berry)}
.tag{font:800 12px var(--fb);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--amber);color:var(--navy);align-self:center}
.tag.full{background:#8a8fa8;color:#fff}
.empty{padding:28px 10px;text-align:center;color:var(--muted)}

/* logo disc: image badge, or initials in the same amber ring */
.disc{display:block;border-radius:50%;object-fit:cover;background:#fff}
.disc.init{display:grid;place-items:center;background:#fff;border:3px solid var(--amber);color:var(--navy);font:900 italic 18px var(--fd)}

/* leaflet */
.ta-pin{background:none;border:0}
.ta-pin svg{filter:drop-shadow(0 3px 4px rgba(11,10,31,.35))}
.you-dot{width:18px;height:18px;border-radius:50%;background:#2f7de1;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,125,225,.25)}
.leaflet-popup-content-wrapper{border-radius:14px}
.leaflet-popup-content{font:600 16px/1.3 var(--fb);margin:12px 14px;min-width:190px}
.leaflet-popup-content b{font:800 italic 18px var(--fd);display:block;margin-bottom:2px}
.leaflet-popup-content .go{display:inline-block;margin-top:8px;background:var(--navy);color:#fff;text-decoration:none;font-weight:800;padding:8px 12px;border-radius:9px}
.leaflet-container{font-family:var(--fb)}
.leaflet-control-attribution{font-size:11px}

/* give */
.give{background:#fff;padding:44px 0;border-top:1px solid var(--line)}
.give-grid{display:grid;gap:14px;margin-top:18px}
@media (min-width:860px){.give-grid{grid-template-columns:1.2fr 1fr 1fr}}
.card{border-radius:var(--r);padding:20px;border:1px solid var(--line);background:var(--snow)}
.card .ico{font-size:30px;line-height:1;margin-bottom:8px}
.card h3{margin-bottom:6px}
.card p{margin:0}
.card .small{margin-top:10px;color:var(--muted)}
.card.yes{background:var(--navy);color:#fff;border-color:var(--navy)}
.card.yes h3{color:var(--amber)}
.ideas{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.ideas li{font:800 15px var(--fb);padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.1)}
.card.no h3{color:var(--berry)}

/* businesses */
.biz{padding:44px 0 52px;background:linear-gradient(180deg,var(--navy),var(--deep));color:#fff}
.biz .muted{color:rgba(255,255,255,.75);max-width:60ch}
.badges{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px}
@media (min-width:600px){.badges{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.badges{grid-template-columns:repeat(6,1fr)}}
.badges button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%;border-radius:14px;padding:6px 2px}
.badges button:focus-visible{outline:3px solid var(--amber)}
.badges .disc{width:min(100%,112px);aspect-ratio:1;height:auto;transition:transform .15s}
.badges .disc.init{font-size:28px;border-width:5px}
.badges button:hover .disc{transform:translateY(-3px) rotate(-2deg)}
.badges span{font:800 16px/1.15 var(--fb)}
.badges small{display:block;font:600 14px var(--fb);color:rgba(255,255,255,.65)}
.join{margin-top:36px;display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:20px}
.join h3{color:var(--amber)}
.join p{margin:6px 0 0;color:rgba(255,255,255,.85)}
@media (min-width:760px){.join{flex-direction:row;align-items:center;justify-content:space-between}}

.foot{background:var(--deep);color:rgba(255,255,255,.75);padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:17px}
.foot-in{display:grid;gap:8px}
.foot img{height:40px;width:auto;margin-bottom:6px}
.foot p{margin:0}
.foot a{color:#fff}
