/* BroSisPKU new site. Tokens and layout from the approved canvas. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--ink:#12161F;--ink-2:#3A4152;--muted:#5B6170;--line:#E4E2DC;--line-2:#D5D2CA;--ground:#F6F5F1;--surface:#FFFFFF;--sand:#F1EFEA;--ph:#E7E3DA;--navy:#0E1A2B;--navy-2:#1C2B42;--navy-bar:#24406A;--navy-foot:#0A1524;--navy-foot-2:#050A13;--navy-nav:#1D3558;--navy-line:#3A4A63;--on-navy:#C9D1DD;--accent:#157347;--accent-hover:#0F5A37;--accent-tint:#E4EFE8;--cta:#C2410C;--cta-hover:#9A3412;--new-bg:#DBEAFE;--new-fg:#1E40AF}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2{text-wrap:balance;line-height:1.15}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Hidden until focused; clipped in place so right-to-left pages do not get a huge scroll width. */
.skip{position:absolute;top:8px;inset-inline-start:8px;z-index:50;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:8px 12px;border-radius:8px;background:var(--surface);color:var(--ink)}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none}

/* Navy shades, one per section so they read apart: city bar (steel, lightest), header (--navy, brand),
   phone bottom menu (brighter), footer (deep) with the copyright on the deepest full-width band */

/* "Pekanbaru now" bar above the header: date and live WIB clock, weather (BMKG), air quality (OpenWeather) */
.citybar{background:var(--navy-bar);color:#D5DEEB;font-size:13px}
.citybar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 20px;min-height:34px}
.cb-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cb-item svg{flex:none;color:#B4C6E0}
.cb-item strong{color:#fff;font-weight:700}
.js-clock{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.aqi-dot{flex:none;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.aqi-1{background:#22C55E}
.aqi-2{background:#EAB308}
.aqi-3{background:#F97316}
.aqi-4{background:#EF4444}
.aqi-5{background:#A855F7}
.aqi-6{background:#BE123C}

/* Header */
.site-header{position:relative;z-index:20;background:var(--navy);color:#fff}
.header-in{display:flex;align-items:center;gap:32px;min-height:68px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:18px}
.brand:hover{color:#fff}
.brand img{display:block;width:44px;height:44px}
.main-nav{display:flex;align-items:center;gap:24px;flex:1 1 auto;font-size:15px;font-weight:600}
.navlink{color:var(--on-navy);text-decoration:none}
.navlink:hover{color:#fff}
/* CCTV Pekanbaru (external): blinking red LIVE dot */
.nav-cctv{display:inline-flex;align-items:center;gap:8px}
.live-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#FF3B30;animation:live 1.4s ease-in-out infinite}
/* The capitals sit 1px above the exact middle, which looks centred because LIVE has no letters below the line (Dedy, 2026-11-06);
   the right padding is 1px less to make up for the letter-spacing after the last letter */
.live-tag{display:inline-block;height:18px;padding:0 5px 2px 6px;border-radius:4px;background:#E5322D;color:#fff;font-size:10px;font-weight:800;line-height:16px;letter-spacing:.06em;white-space:nowrap}
@keyframes live{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,59,48,.6)}50%{opacity:.35;box-shadow:0 0 0 5px rgba(255,59,48,0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.dd summary{list-style:none;cursor:pointer}
.dd summary::-webkit-details-marker{display:none}

/* Language menu: drops down in the page, no pop-up */
.lang{position:relative;margin-inline-start:auto}
.lang summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--navy-line);border-radius:999px;color:#fff;font-size:14px;font-weight:700}
.lang summary img{display:block;width:24px;height:18px;object-fit:cover;border-radius:3px}
.lang[open] summary{background:var(--navy-2)}
.lang-panel{position:absolute;top:calc(100% + 8px);right:0;width:300px;padding:8px 0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px rgba(18,22,31,.14)}
[dir=rtl] .lang-panel{right:auto;left:0}
.lang-title{margin:0;padding:8px 16px 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lang-panel ul{margin:0;padding:0;list-style:none}
.lang-panel a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;color:var(--ink);text-decoration:none;text-align:start}
.lang-panel a:hover{background:var(--sand);color:var(--ink)}
.lang-panel a[aria-current]{background:var(--accent-tint)}
.lang-panel .flag{flex:none;display:block;width:32px;height:24px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px rgba(18,22,31,.12)}
.lang-panel .names{flex:1;display:flex;flex-direction:column;line-height:1.3}
.lang-panel .names strong{font-size:15px}
.lang-panel .names span{font-size:12px;color:var(--muted)}
.lang-panel .check{flex:none;color:var(--accent)}
.lang-note{margin:0;padding:10px 16px 6px;font-size:12px;color:var(--muted)}

/* Phone menu (hamburger): phones only */
.mnav{display:none}
.mnav summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:#fff}
.mnav[open] summary{background:var(--navy-2)}
.mnav-panel{position:fixed;top:64px;left:0;right:0;padding:8px 0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 10px 20px rgba(18,22,31,.10)}
.mnav-panel a{display:flex;align-items:center;min-height:52px;padding:0 16px;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none}
.mnav-panel a:hover{background:var(--sand);color:var(--ink)}
.mnav-panel .nav-cctv{display:flex;gap:10px}

/* Plain hero (404) */
main{display:block}
.hero{padding:72px 0 104px;background:linear-gradient(180deg,rgba(14,26,43,.30) 0%,rgba(14,26,43,.62) 65%,rgba(14,26,43,.94) 100%),var(--navy);color:#fff;text-align:center}
.hero h1{margin:0;font-size:48px;font-weight:800;letter-spacing:-.02em}
.hero p{margin:8px 0 0;font-size:20px;color:var(--on-navy)}

/* Buttons and search box */
.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;border-radius:12px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.btn-cta{min-height:38px;padding:0 14px;border-radius:10px;background:var(--cta);color:#fff;font-size:14px}
.btn-cta:hover{background:var(--cta-hover);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff}
.btn-out{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.btn-out:hover{background:var(--sand);color:var(--ink)}
.search-box{display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;color:var(--muted)}
.search-box:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.search-box input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.search-box input:focus{outline:none}

/* Home hero with the city photo */
.hero-photo{background:linear-gradient(180deg,rgba(14,26,43,.30) 0%,rgba(14,26,43,.62) 65%,rgba(14,26,43,.94) 100%),url(/assets/image/banner3.jpg) center 72%/cover no-repeat,var(--navy)}
.home-hero{padding:72px 0 104px;color:#fff}
.home-hero .wrap{max-width:888px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.hero-title h1{margin:0;font-size:48px;font-weight:800;letter-spacing:-.02em}
.hero-title .sub{margin:8px 0 0;font-size:20px;color:var(--on-navy)}
.hero-search{width:100%;display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:var(--surface);border-radius:16px}
.hero-search:focus-within{outline:2px solid #fff;outline-offset:2px}
.hero-search .q{flex:1 1 320px;display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--muted)}
.hero-search input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.hero-search input:focus{outline:none}
.hero-search .btn-cta{min-height:48px;padding:0 28px;border-radius:12px;font-size:16px}
.popular{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center}
.popular-label{font-size:12px;font-weight:600;color:#fff}
.chip-glass{display:flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip-glass:hover{background:rgba(255,255,255,.26);color:#fff}
/* "Sering dicari" on the home hero: 60% of the location chips (Dedy, 2026-11-05) */
.popular .chip-glass{min-height:24px;padding:0 10px;font-size:12px;line-height:1.2}

/* Location picker (views/_locpick.php): a button and a white panel like the language menu */
.pick{position:relative;text-align:start}
.pick-btn{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px 0 14px;border-radius:12px;background:var(--sand);color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;list-style:none;cursor:pointer;transition:background-color .15s ease}
.pick-btn::-webkit-details-marker{display:none}
.pick-btn:hover,.pick[open] .pick-btn{background:#EAE7E0}
.pick-btn .pin{flex:none;color:var(--accent)}
.pick-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pick-btn .chev{flex:none;color:var(--muted);transition:transform .15s ease}
.pick[open] .chev{transform:rotate(180deg)}
.pick-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:max(100%,260px);max-height:min(360px,60vh);overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 28px rgba(18,22,31,.16)}
[dir=rtl] .pick-panel{left:auto;right:0}
.pick-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:8px;color:var(--ink);font-size:15px;cursor:pointer}
.pick-opt:hover{background:var(--sand)}
.pick-opt input{position:absolute;opacity:0;pointer-events:none}
.pick-opt:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.pick-opt .lbl{flex:1}
.pick-opt .cnt{font-size:13px;color:var(--muted)}
.pick-opt.is-checked,.pick-opt:has(input:checked){background:var(--accent-tint);color:var(--accent-hover);font-weight:700}
.pick-opt.is-off{opacity:.45;cursor:default}
.pick-opt.is-off:hover{background:transparent}

/* Home sections */
.home-main{display:flex;flex-direction:column;gap:40px;padding-bottom:48px}
.cats{position:relative;margin-top:-40px;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.cats h2{margin:0;font-size:22px;font-weight:800}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
.tile{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.tile:hover{border-color:var(--accent);color:var(--ink)}
.tile-icon{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px}
.tile-text{display:flex;flex-direction:column;gap:2px}
.tile-text strong{font-size:16px}
.tile-text .short{display:none}
.tile-text .desc{font-size:13px;color:var(--muted)}
.c-kuliner{background:#FDEBDD;color:#B4471B}
.c-wisata-hiburan{background:#DDEBFA;color:#1F5D99}
.c-belanja-oleh-oleh{background:#FBF0D5;color:#8A5A00}
.c-elektronik-gadget{background:#F0E6DC;color:#7A4B22}
.c-hotel-penginapan{background:#ECE6F7;color:#5B3B9C}
.c-kesehatan-kecantikan{background:#FBE4E8;color:#A12B3D}
.c-olahraga{background:#EEF3D8;color:#5A6B12}
.c-pendidikan{background:#DDF0F1;color:#16707A}
.c-otomotif-transportasi{background:#E4E7F4;color:#3B4A8F}
.c-acara-pernikahan{background:#FBE3F1;color:#9B2F6C}
.c-jasa-properti{background:#E2F0E7;color:#157347}
.c-info-kota{background:#ECEDF1;color:#3A4152}
.reviews{display:flex;flex-direction:column;gap:20px}
.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.section-head h2,.locs h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.01em}
.sort-tabs{display:flex;padding:4px;background:var(--sand);border-radius:999px}
.sort-tabs a{display:flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;color:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none}
.sort-tabs a:hover{color:var(--ink)}
/* Selected sort in the colour of its spotlight label: Terbaru green, Paling Populer red, Paling Menarik purple (Dedy, 2026-11-06).
   The order of the three links is the same on every page. */
.sort-tabs a[aria-current]{background:var(--accent);color:#fff;font-weight:700}
.sort-tabs a:nth-child(2)[aria-current]{background:#DC2626}
.sort-tabs a:nth-child(3)[aria-current]{background:#7C3AED}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:24px 20px}
.card{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,22,31,.08);color:var(--ink)}
.card-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ph)}
.card-img img{display:block;width:100%;height:100%;object-fit:cover}
.card-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.card-cat{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-hover)}
.card-title{font-size:16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:auto;padding-top:6px;font-size:13px;color:var(--muted)}
.btn-more{align-self:center;padding:0 24px}
.empty{margin:0;padding:32px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-align:center;color:var(--muted)}
.locs{display:flex;flex-direction:column;gap:16px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip svg{color:var(--muted)}

/* Home spotlight (views/_spotlight.php): a carousel two cards wide and one row high at the start of "Review terbaru",
   so the whole of it fits on a laptop screen (Dedy, 2026-11-06) */
.spot{grid-column:span 2;position:relative;min-height:420px;background:var(--navy)}
.spot:hover{transform:none;box-shadow:none}
.spot-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.spot-track::-webkit-scrollbar{display:none}
.spot-slide{position:relative;flex:0 0 100%;display:flex;flex-direction:column;justify-content:flex-end;scroll-snap-align:start;color:#fff;text-decoration:none}
.spot-slide:hover{color:#fff}
.spot-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot-body{position:relative;display:flex;flex-direction:column;gap:10px;padding:140px 28px 64px;background:linear-gradient(180deg,rgba(14,26,43,0) 0%,rgba(14,26,43,.7) 40%,rgba(14,26,43,.95) 100%)}
.spot-badge{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--cta);color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em}
.spot-badge.b-pop{background:#DC2626}
.spot-badge.b-int{background:#7C3AED}
.spot-badge.b-new{background:var(--accent)}
.spot .card-cat{color:#9FE0B8}
.spot-title{font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.spot-meta{font-size:14px;color:#D5DEEB}
.spot-dots{position:absolute;inset-inline-start:28px;bottom:26px;display:flex;gap:8px}
.spot-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s ease,background-color .25s ease}
.spot-dot[aria-current=true]{width:26px;background:#fff}
.spot-nav{position:absolute;inset-inline-end:20px;bottom:16px;display:flex;gap:8px}
.spot-nav button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(14,26,43,.4);color:#fff;cursor:pointer}
.spot-nav button:hover{background:rgba(14,26,43,.75)}
[dir=rtl] .spot-nav svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.spot-dot{transition:none}}

/* 404 */
.hero.nf{padding:56px 0 64px;text-align:center}
.nf-code{display:block;font-size:72px;line-height:1;font-weight:800;letter-spacing:-.03em}
.nf h1{margin-top:12px;font-size:28px}
.nf p{max-width:520px;margin-left:auto;margin-right:auto;font-size:16px;line-height:1.55}
.nf-actions{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto;padding:24px 16px 48px}

/* Footer */
.site-footer{background:var(--navy-foot);color:var(--on-navy);font-size:14px}
.footer-credit{display:block;margin-top:6px;font-size:12px;color:#8E9BB0}
.footer-credit a{color:#C9D1DD}
/* Date and clock at the top of the footer: phones only, where the city bar keeps just weather and air quality (Dedy, 2026-11-05) */
.footer-clock{display:none}
.footer-in{display:flex;flex-direction:column;gap:24px;padding-top:32px;padding-bottom:0}
.footer-top{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
/* Copyright on its own darker band across the full width (shadow + clip widen it past the .wrap) */
.footer-copy{margin:8px 0 0;padding:18px 0;background:var(--navy-foot-2);box-shadow:0 0 0 100vmax var(--navy-foot-2);clip-path:inset(0 -100vmax);font-size:13px;text-align:center}
.footer-copy strong{color:#fff}
.footer-wa{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--navy-line);border-radius:999px;color:#fff;font-weight:700;text-decoration:none}
.pill:hover{background:var(--navy-2);color:#fff}
.pill span{font-weight:500;color:var(--on-navy)}
/* Plain icons, no circle; the 44px box keeps the tap area and is pulled in so the first icon lines up with the edge. */
.social{display:flex;gap:4px;margin-inline-start:-12px}
.social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff}
.social a:hover{color:var(--on-navy)}

/* Bottom navigation, phones only */
.bottom-nav{display:none}

/* Tablets and small laptops: the five menu items do not fit in one row, so they use the phone menu (hamburger) (Dedy, 2026-11-05) */
@media (min-width:768px) and (max-width:1199px){
  .header-in{gap:20px}
  .main-nav{display:none}
  .mnav{display:block;position:static}
  .mnav-panel{position:absolute;top:100%;left:0;right:0;border-radius:0}
}

@media (max-width:767px){
  .wrap{padding:0 16px}
  .header-in{gap:8px;min-height:64px;padding-top:10px;padding-bottom:10px}
  .brand{font-size:17px}
  .brand img{width:40px;height:40px}
  .main-nav{display:none}
  .mnav{display:block}
  /* Panels hang right under the header (the city bar sits above it), full width */
  .lang,.mnav{position:static}
  .lang-panel,.mnav-panel{position:absolute;top:100%;left:0;right:0;width:auto;border-width:0 0 1px;border-radius:0}
  [dir=rtl] .lang-panel{left:0;right:0}
  /* Weather and air quality only; the date and clock move to the footer (Dedy, 2026-11-05) */
  .citybar-in{flex-wrap:wrap;justify-content:space-between;gap:2px 12px;min-height:30px;padding-top:5px;padding-bottom:5px;font-size:12px}
  .cb-time,.cb-wx .cb-lbl,.cb-aqi .cb-lbl{display:none}
  .hero{padding:24px 0 48px;text-align:start}
  .hero h1{font-size:28px}
  .hero p{font-size:15px}
  .hero.nf{padding:56px 0 64px;text-align:center}
  .nf h1{font-size:24px}
  .nf p{font-size:15px}

  .hero-photo{background-position:0 0,58% 80%}
  .home-hero{padding:20px 0 48px}
  .home-hero .wrap{max-width:none;align-items:stretch;gap:16px;text-align:start}
  .hero-title h1{font-size:28px;line-height:1.15;letter-spacing:-.01em}
  .hero-title .sub{margin-top:4px;font-size:15px;line-height:1.45}
  .hero-search{flex-wrap:nowrap;padding:0;border-radius:12px}
  .hero-search .q{padding:0 14px}
  .hero-search .pick,.hero-search .btn-cta{display:none}
  .popular{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .popular::-webkit-scrollbar{display:none}
  .popular-label{flex:none;white-space:nowrap}
  .chip-glass{flex:none;min-height:44px}
  .popular .chip-glass{min-height:26px}

  .home-main{gap:24px;padding-bottom:32px}
  .cats{margin-top:-28px;padding:16px 8px}
  .cats h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 0}
  .tile{flex-direction:column;gap:6px;padding:0;border:0;text-align:center}
  .tile-icon{width:48px;height:48px}
  .tile-text strong,.tile-text .desc{display:none}
  .tile-text .short{display:block;font-size:12px;font-weight:600;line-height:1.3}
  .section-head h2,.locs h2{font-size:22px}
  .sort-tabs{width:100%;overflow-x:auto;scrollbar-width:none}
  .sort-tabs a{flex:none;padding:0 14px}
  .card-grid{grid-template-columns:1fr;gap:12px}
  .card{flex-direction:row;align-items:flex-start;gap:12px;padding:10px}
  .card-img{flex:none;width:88px;height:88px;aspect-ratio:auto;border-radius:12px}
  .card-body{padding:2px 0 0;gap:4px}
  .card-cat{font-size:11px}
  .card-title{font-size:15px;line-height:1.35}
  .card-meta{margin-top:0;padding-top:0;font-size:12px}
  .btn-more{align-self:stretch}
  .chip{font-size:14px}
  .chip svg{display:none}
  .spot{grid-column:auto;min-height:440px;padding:0}
  .spot-body{padding:110px 18px 48px;gap:8px}
  .spot-title{font-size:22px}
  .spot-meta{font-size:13px}
  .spot-dots{inset-inline-start:18px;bottom:22px}
  .spot-nav{display:none}

  .footer-in{gap:20px;padding-top:24px;padding-bottom:0}
  .footer-clock{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding-bottom:16px;border-bottom:1px solid var(--navy-line);color:#D5DEEB;font-size:13px}
  .footer-clock svg{flex:none;color:#B4C6E0}
  /* Date and time stay together on one line; on a narrow phone they go under the label as a whole */
  .footer-clock .fc-when{display:flex;align-items:center;gap:6px;white-space:nowrap}
  .footer-top{flex-direction:column;align-items:flex-start;gap:16px}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #3A5A88;background:var(--navy-nav);box-shadow:0 -4px 16px rgba(14,26,43,.22)}
  /* Navy so it stands out from the light page; the current page is white with an orange bar */
  .bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--on-navy);font-size:11px;font-weight:600;text-decoration:none}
  .bottom-nav a:hover{color:#fff}
  .bottom-nav a[aria-current]{color:#fff;font-weight:700}
  .bottom-nav a[aria-current]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--cta)}
}

/* Prayer times (Dedy, 2026-11-07): the next prayer in the city bar (desktop), today's five times at the top of the footer.
   site.js moves the mark to the next prayer as the day goes on. */
.footer-pray{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-bottom:16px;border-bottom:1px solid var(--navy-line);color:#D5DEEB;font-size:13px}
.fp-title{display:flex;align-items:center;gap:6px;margin:0}
.fp-title svg{flex:none;color:#B4C6E0}
.footer-pray ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.footer-pray li{display:flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;white-space:nowrap}
.footer-pray time{color:#fff;font-weight:700}
.footer-pray li[aria-current]{background:var(--navy-2);box-shadow:inset 0 0 0 1px var(--navy-line);color:#fff}
@media (max-width:1099px){.cb-pray{display:none}}
@media (max-width:767px){
  .footer-pray{gap:8px;font-size:12px}
  .footer-pray ol{gap:4px}
  .footer-pray li{padding:0 8px}
}