/* ===== 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:#0369A1;--ux-on-accent:#fff;--ux-ink:#0F172A;--ux-muted:#526076;--ux-line:#E3E8EF;--ux-surface:#fff;--ux-chip-bg:#F1F5F9;--ux-btn-bg:#fff;--ux-jump-bg:rgba(245,247,250,.94);--ux-card-shadow:0 1px 2px rgba(15,23,42,.05),0 3px 10px rgba(15,23,42,.05);--ux-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ux-bottom:64px}
@media(min-width:960px){:root{--ux-bottom:0px}}
/* compact, content-first heroes on phones */
@media(max-width:640px){
  .hero{padding:20px 0 74px}
  .hero-sub{padding:16px 0 70px}
  .hero h1{font-size:clamp(30px,9vw,40px);line-height:1.02;margin:8px 0 10px;letter-spacing:.2px}
  .hero-sub h1{font-size:clamp(28px,8.2vw,36px)}
  .hero .lede{font-size:15.5px;line-height:1.55;margin-bottom:16px}
  .eyebrow{font-size:11.5px;gap:6px}
  .crumbs{font-size:13px;margin-bottom:6px}
  .hero-actions{gap:8px}
  .hero-actions .btn{min-height:44px;padding:0 14px;font-size:14.5px}
  .facts{margin-top:-56px}
}
@media(max-width:420px){.brand small{display:none}.appbar .container{gap:8px}.appbar .btn-shop{padding:0 12px;font-size:14px}}
:root{--ux-shop:#C8102E}
@media(max-width:960px){.appbar .ux-search-btn{margin-left:auto}.appbar .btn-shop{margin-left:0}.appbar .container{gap:8px}}
@media(max-width:420px){.brand .brand-logo{height:23px}.appbar .btn-shop{padding:0 11px;font-size:13.5px;min-height:38px}.ux-search-btn{width:40px;min-width:40px;height:40px;padding:0;justify-content:center}.ux-menu-btn{width:40px;height:40px}}
@media(max-width:420px){.brand b{font-size:16px;letter-spacing:0}.brand img{width:28px;height:28px}.appbar .brand{gap:7px}}
@media(max-width:440px){.brand small{display:none}}
.ux-jump.after-facts{margin:14px -16px 6px}
@media(min-width:1152px){.ux-jump.after-facts{margin-left:0;margin-right:0;border-radius:12px;border:1px solid var(--ux-line)}}
@media(max-width:380px){.ux-hide-sm{display:none}.appbar .btn-shop{padding:0 14px}}
@media(max-width:330px){.appbar .brand b{display:none}}