/* ===== Bradenton Area Guides: shared mobile UX layer ===== */
html{scroll-padding-top:calc(var(--ux-top,60px) + 56px)}
html.ux-lock,html.ux-lock body{overflow:hidden}
:focus-visible{outline:3px solid var(--ux-accent);outline-offset:2px}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
main h2[id],main section[id],main article[id]{scroll-margin-top:calc(var(--ux-top,60px) + 60px)}
img{height:auto}

/* header search button */
.ux-search-btn{display:inline-flex;align-items:center;gap:6px;flex:none;height:42px;min-width:42px;padding:0 10px;border-radius:999px;border:1px solid var(--ux-line);background:var(--ux-btn-bg);color:var(--ux-ink);font:600 14px/1 var(--ux-font);cursor:pointer}
.ux-search-btn:hover{border-color:var(--ux-accent)}
.ux-search-btn svg{width:20px;height:20px}
.ux-search-btn span{display:none}
@media(min-width:720px){.ux-search-btn span{display:inline}.ux-search-btn{padding:0 14px}}

/* search overlay */
.ux-search{position:fixed;inset:0;z-index:1000;background:rgba(6,12,24,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start}
.ux-search[hidden]{display:none}
.ux-search__panel{width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;background:var(--ux-surface);color:var(--ux-ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media(min-width:720px){.ux-search{padding-top:8vh}.ux-search__panel{border-radius:18px;max-height:80vh;overflow:hidden}}
.ux-search__bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--ux-line)}
.ux-search__bar svg{flex:none;color:var(--ux-muted)}
.ux-search__bar input{flex:1;min-width:0;height:46px;border:0;background:transparent;color:var(--ux-ink);font:500 17px/1.2 var(--ux-font);outline:none}
.ux-search__bar input::placeholder{color:var(--ux-muted)}
.ux-search__close{flex:none;height:40px;padding:0 6px;border:0;background:none;color:var(--ux-accent);font:600 15px/1 var(--ux-font);cursor:pointer}
.ux-search__body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(24px + env(safe-area-inset-bottom))}
.ux-search__hint{margin:0 0 10px;font-size:13px;color:var(--ux-muted)}
.ux-search.has-q .ux-search__hint,.ux-search.has-q .ux-search__chips{display:none}
.ux-search__chips{display:flex;flex-wrap:wrap;gap:8px}
.ux-chip{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--ux-line);background:var(--ux-chip-bg);color:var(--ux-ink);font:600 14px/1 var(--ux-font);cursor:pointer}
.ux-search__list{list-style:none;margin:0;padding:0}
.ux-search__list li{border-bottom:1px solid var(--ux-line)}
.ux-search__list a{display:block;padding:14px 4px;color:var(--ux-ink);text-decoration:none}
.ux-search__list a:hover,.ux-search__list a:focus{background:var(--ux-chip-bg);outline:none}
.ux-search__list strong{display:block;font-size:16.5px;line-height:1.3;margin:2px 0 3px}
.ux-res__site{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ux-accent)}
.ux-res__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45;color:var(--ux-muted)}
.ux-empty{padding:18px 4px;color:var(--ux-muted);font-size:15px}

/* jump menu */
.ux-jump-sentinel{height:1px}
.ux-jump{position:sticky;top:var(--ux-top,60px);z-index:90;margin:0 0 8px;background:var(--ux-jump-bg);border-bottom:1px solid var(--ux-line);backdrop-filter:saturate(1.3) blur(8px);-webkit-backdrop-filter:saturate(1.3) blur(8px)}
.ux-jump__in{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:9px 16px;max-width:1120px;margin:0 auto;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.ux-jump__in::-webkit-scrollbar{display:none}
.ux-jump__label{flex:none;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ux-muted);padding-right:2px}
.ux-jump a{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--ux-line);background:var(--ux-chip-bg);color:var(--ux-ink);font:600 13.5px/1 var(--ux-font);text-decoration:none;white-space:nowrap}
.ux-jump.is-stuck .ux-jump__label{display:none}
.ux-jump a.is-on{background:var(--ux-accent);border-color:var(--ux-accent);color:var(--ux-on-accent)}
@media(min-width:960px){.ux-jump__label{font-size:12px}}

/* tables become cards on phones */
@media(max-width:640px){
  table.ux-cards{display:block;border:0;background:none;box-shadow:none;min-width:0!important;width:100%!important;table-layout:auto}
  table.ux-cards caption{display:block;text-align:left;padding:0 0 8px}
  table.ux-cards thead{display:none}
  table.ux-cards tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  table.ux-cards tr{display:block;min-width:0;background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:14px;padding:12px 14px;box-shadow:var(--ux-card-shadow)}
  table.ux-cards td{display:block;width:auto!important;padding:7px 0!important;border:0!important;text-align:left!important;white-space:normal!important;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
  table.ux-cards td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ux-muted)}
  table.ux-cards td:first-child{font-size:16.5px;font-weight:700;color:var(--ux-ink);padding:0 0 8px!important;margin-bottom:2px;border-bottom:1px solid var(--ux-line)!important}
  table.ux-cards td:first-child::before{display:none}
  table.ux-cards td:empty{display:none}
  .table-wrap:has(> table.ux-cards){overflow:visible;border:0;background:none;box-shadow:none}
}

/* reflow safety (WCAG 2.2 SC 1.4.10): nothing may force sideways scrolling at 320 CSS px */
main{overflow-wrap:break-word}
main a,main code,main .card,main .fact,main td,main li{overflow-wrap:anywhere}
.grid-2>*,.grid-3>*,.grid>*,.facts>*,.guides>*,.tiles>*,.cards>*,.venues>*,.split>*,.two>*,.fact>div,.guide-top>div{min-width:0}
img,svg,video,iframe{max-width:100%}
pre{white-space:pre-wrap}

/* back to top */
.ux-top{position:fixed;right:14px;bottom:calc(var(--ux-bottom,0px) + 14px + env(safe-area-inset-bottom));z-index:105;width:46px;height:46px;border-radius:50%;border:1px solid var(--ux-line);background:var(--ux-surface);color:var(--ux-ink);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.18);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;cursor:pointer}
.ux-top.show{opacity:1;transform:none;pointer-events:auto}
@media(min-width:960px){.ux-top{bottom:24px;right:24px}}

/* tappable addresses */
a.ux-dir{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.ux-dir::after{content:" ↗";font-size:.85em;opacity:.7}

/* readability on phones */
@media(max-width:640px){
  .src,.updated{font-size:13.5px}
  main p,main li{line-height:1.6}
  main summary{min-height:48px;display:flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){.ux-top{transition:none}}
@media print{.ux-jump,.ux-top,.ux-search-btn,.ux-search{display:none!important}}

/* mobile menu button + slide-out drawer */
.ux-menu-btn{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;margin-left:-6px;border:0;border-radius:12px;background:transparent;color:var(--ux-ink);cursor:pointer}
.ux-menu-btn:hover{background:var(--ux-chip-bg)}
@media(min-width:961px){.ux-menu-btn{display:none}}
.ux-drawer{position:fixed;inset:0;z-index:1001;background:rgba(6,12,24,0);transition:background .22s ease}
.ux-drawer[hidden]{display:none}
.ux-drawer.is-open{background:rgba(6,12,24,.55)}
.ux-drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);display:flex;flex-direction:column;background:var(--ux-surface);color:var(--ux-ink);box-shadow:12px 0 40px rgba(0,0,0,.25);transform:translateX(-102%);transition:transform .22s ease}
.ux-drawer.is-open .ux-drawer__panel{transform:none}
.ux-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 10px 10px 18px;border-bottom:1px solid var(--ux-line)}
.ux-drawer__title{font:800 18px/1.1 var(--ux-font);letter-spacing:.2px}
.ux-drawer__close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ux-ink);cursor:pointer}
.ux-drawer__close:hover{background:var(--ux-chip-bg)}
.ux-drawer__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 10px calc(24px + env(safe-area-inset-bottom))}
.ux-drawer__search{display:flex;align-items:center;gap:10px;width:100%;height:48px;margin:0 0 6px;padding:0 14px;border:1px solid var(--ux-line);border-radius:12px;background:var(--ux-chip-bg);color:var(--ux-muted);font:500 15.5px/1 var(--ux-font);cursor:pointer;text-align:left}
.ux-drawer__group{padding:10px 0 4px;border-top:1px solid var(--ux-line);margin-top:8px}
.ux-drawer__group:first-of-type{border-top:0;margin-top:0}
.ux-drawer__group h2{margin:4px 8px 6px;font:700 11.5px/1.2 var(--ux-font);letter-spacing:.9px;text-transform:uppercase;color:var(--ux-muted)}
.ux-drawer__group ul{list-style:none;margin:0;padding:0}
.ux-drawer__group a{display:flex;align-items:center;min-height:46px;padding:8px 10px;border-radius:10px;color:var(--ux-ink);font:600 15.5px/1.3 var(--ux-font);text-decoration:none}
.ux-drawer__group a:hover,.ux-drawer__group a:focus-visible{background:var(--ux-chip-bg)}
.ux-drawer__group a[aria-current="page"]{background:var(--ux-chip-bg);box-shadow:inset 3px 0 0 var(--ux-accent)}
.ux-drawer__group.is-primary a{font-size:17px;font-weight:700}
.ux-drawer__sisters a{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.ux-drawer__sisters small{font-size:13px;font-weight:500;color:var(--ux-muted)}
.ux-drawer__group.is-shop a{color:var(--ux-shop,var(--ux-accent))}
.ux-drawer__foot{margin:16px 10px 0;font-size:13px;color:var(--ux-muted)}
.ux-drawer__foot a{color:var(--ux-accent)}
@media(prefers-reduced-motion:reduce){.ux-drawer,.ux-drawer__panel{transition:none}}
@media print{.ux-menu-btn,.ux-drawer{display:none!important}}
:root{--ux-accent:#F5B841;--ux-on-accent:#0A0F1F;--ux-ink:#E8ECF6;--ux-muted:#AEB7CB;--ux-line:#24304D;--ux-surface:#121A30;--ux-chip-bg:#0F162B;--ux-btn-bg:#121A30;--ux-jump-bg:rgba(10,15,31,.92);--ux-card-shadow:none;--ux-font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ux-bottom:64px}
@media(min-width:960px){:root{--ux-bottom:0px}}
/* sticky header with one-line, swipeable nav */
.site-head{position:sticky;top:0;z-index:100;background:rgba(10,15,31,.94);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);padding-top:env(safe-area-inset-top)}
.head-row .logo{order:1}
.head-row .ux-search-btn{order:2;margin-left:auto}
.head-row .main-nav{order:3}
@media(min-width:961px){.head-row .ux-search-btn{order:4;margin-left:0}}
@media(max-width:960px){
  .head-row{gap:6px 10px;padding-top:10px;padding-bottom:0}
  .logo{font-size:21px}
  .main-nav{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;scrollbar-width:none;margin:0 -16px;padding:2px 16px 8px;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{flex:none;white-space:nowrap;padding:8px 12px;border-radius:999px;font-size:14.5px}
  .main-nav a[aria-current]{background:#1B2440;box-shadow:none;color:#fff}
}
/* content-first headings on phones */
@media(max-width:640px){
  h1{font-size:clamp(30px,8.6vw,40px);letter-spacing:-.8px}
  .hero{padding-top:26px}
  .hero h1{font-size:clamp(32px,9.4vw,44px);letter-spacing:-1px}
  .hero .lede{margin:14px auto 20px}
  .lede{font-size:16.5px}
  .page-head{padding-top:14px}
  .crumbs{padding-top:12px;padding-bottom:4px;font-size:13px}
  .sec{padding-top:28px;padding-bottom:28px}
  .art.venue-media,.venue-media.art{height:96px}
  .hero-fig{margin-top:28px}
  .hero-fig img{height:200px}
  .banner{max-height:220px;object-fit:cover;width:100%}
}
/* bottom navigation (phones) */
.tn-bottom{position:fixed;left:0;right:0;bottom:0;z-index:110;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(12,18,36,.97);border-top:1px solid #24304D;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tn-bottom a,.tn-bottom button{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#AEB7CB;font:600 11.5px/1 var(--ux-font);text-decoration:none;background:none;border:0;cursor:pointer}
.tn-bottom svg{width:22px;height:22px}
.tn-bottom [aria-current="page"]{color:#F5B841}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
@media(min-width:961px){.tn-bottom{display:none}body{padding-bottom:0}}
:root{--ux-shop:#F5B841}
.head-row .ux-menu-btn{order:0}
@media(max-width:960px){.head-row .main-nav{display:none}.head-row{padding-bottom:10px}.logo{font-size:21px}}
.split>*{min-width:0;flex:1 1 260px;max-width:100%}
@media(max-width:400px){.panel{padding:20px 16px}}
.cards{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.cards.small{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.two{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.tiles{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
