/**
 * common.css — shared design tokens & structural styles, loaded on every
 * public page (linked in <head>, before each page's own <style> block).
 *
 * Only truly shared chrome lives here: nav-tabs bar, the boxed page
 * container + listing grid's wide-screen column count, the footer, and
 * the favorites-count badge/button. Page-specific styling (headers,
 * card colors, filters, etc.) stays in each template's own <style> block.
 *
 * Goal: update the nav bar, container width, or fav-button look once,
 * here, instead of in every template.
 */

:root {
  --purple: #7c3aed; --purple-dark: #6d28d9; --orange: #f59e0b; --green: #10b981;
  --gray: #6b7280; --light: #f3f4f6; --white: #fff;
  --border: #e5e7eb; --shadow: 0 2px 8px rgba(0,0,0,.08);
  --radius: 12px;
}

/* Safety net: no page should ever be horizontally scrollable. Without this,
   any element that overflows its container (e.g. nav-tab labels that can't
   shrink below their intrinsic content width — see min-width below) makes
   the whole page scrollable sideways, which on mobile also lets a pinch-zoom
   pan reveal that overflowing content past other elements' backgrounds. */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Nav tabs — Events / Food / Weekend / Free / Blog / Favorites / Promote */
/* Natural-width tabs in a horizontally-scrollable single-line row — same
   pattern as .category-filters/.cat-btn below (which already handles this
   well). Forcing 8 tabs into equal flex:1 columns left too little width
   per tab on phones for labels like "Weekend" to fit without wrapping or
   overflowing into a neighboring tab; letting each tab keep its natural
   width and scroll instead avoids that entirely. */
.nav-tabs {
  display: flex; background: var(--white); border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  flex-shrink: 0; text-align: center; padding: .7rem .9rem; font-size: .85rem;
  font-weight: 600; text-decoration: none; color: var(--gray); white-space: nowrap;
  background: none; border: none; border-bottom: 3px solid transparent;
  cursor: pointer; transition: all .15s;
}
.nav-tab.active { color: var(--purple); border-bottom-color: var(--purple); }
.nav-tab:hover { color: var(--purple); }

/* Matches the landscape/short-viewport compacting done in index.html's
   sticky header — see the comment there for why. Harmless on other pages
   (they scroll normally), just a bit more compact. */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-tab { padding: .4rem .8rem; font-size: .8rem; }
}

/* ── Boxed page container used by the listing pages (city, weekend,
   free-events, favorites) to center content and cap line length. */
.container { padding: 1rem; max-width: 1400px; margin: 0 auto; }

/* Wide-screen 4th grid column, shared by every card grid regardless of
   its class name across pages. !important is needed here because each
   page's own <style> block (loaded after this file) still defines its
   own narrower 1024px breakpoint for the same class — without it, that
   later same-specificity rule would win the cascade and this would
   never actually apply. */
@media (min-width: 1400px) {
  .events-list, .list, .restaurant-list { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Footer link row shown at the bottom of every page. */
.footer { text-align: center; padding: 2rem 1rem; color: var(--gray); font-size: .85rem; }
.footer a { color: var(--purple); text-decoration: none; }

/* ── Favorites: the ☆ save button on cards, and the "⭐ N" nav badge. */
.fav-btn {
  position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9);
  border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer; color: #d97706; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: transform .1s;
}
.fav-btn:hover { transform: scale(1.1); background: #fef3c7; }
.fav-btn.saved { background: #fef3c7; color: #d97706; }
#fav-badge:empty { display: none; }
#fav-badge { background: var(--orange); color: #fff; border-radius: 10px; padding: 0 .4rem; font-size: .75rem; font-weight: 700; margin-left: .2rem; }

/* ── AdSense in-feed slots (index/food card lists, sticky mobile ad) reserve
   layout space before Google knows whether it has an ad to fill that slot.
   When there's no fill — common on mobile, low-traffic views, ad blockers —
   Google marks the element data-ad-status="unfilled" once it finishes
   processing. Collapsing it at that point removes the leftover blank gap
   between cards. This is Google's own documented pattern for unfilled ads:
   https://support.google.com/adsense/answer/9183363 */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
