/*
Theme Name: FiveStar Custom
Theme URI: https://fivestarsmokeshop.ca/
Author: WireStyler
Author URI: https://wirestyler.ca/
Description: Lightweight, block-first custom theme for Five Star Smoke Shop.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
Text Domain: fivestar
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========
   DESIGN TOKENS
   ========= */
:root{
  --fs-brand: #0B1E2D;
  --fs-brand-ink: #0e2436;
  --fs-accent: #F2B705;       /* gold accent */
  --fs-accent-2:#0f766e;      /* teal alt */
  --fs-bg: #ffffff;
  --fs-surface: #f7f9fb;
  --fs-ink: #0f172a;
  --fs-muted: #64748b;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.10);

  --container: 1200px;
  --gutter: clamp(16px, 3vw, 28px);

  --h1: clamp(2.0rem, 2.6vw + 1rem, 3.0rem);
  --h2: clamp(1.5rem, 1.8vw + .9rem, 2.2rem);
  --h3: clamp(1.2rem, 1.2vw + .8rem, 1.6rem);
  --lead: clamp(1.05rem, .7vw + .8rem, 1.25rem);
  --body: 1rem;

  --link: var(--fs-accent);
  --focus: 2px solid #2563eb;

  --header-h: 74px;
}
/* Force light mode across browsers (prevents auto-darkening in Edge/Chrome) */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  html, body { background-color: #fff !important; color: #111 !important; }
}

/* =========
   BASE / RESET
   ========= */
*{ box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  color: var(--fs-text, #111);
  background-color: var(--fs-bg, #fff);
}

body{
  font: 400 var(--body)/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--fs-ink);
  background: var(--fs-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: var(--focus); outline-offset: 2px; }
hr{ border:0; height:1px; background:#e5e7eb; margin: 24px 0; }
.site-container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }

/* Gutenberg width helpers */
.alignwide { max-width: min(1200px, 100% - 2*var(--gutter)); margin-inline:auto; }
.alignfull { width:100%; margin-inline:0; }

/* Headings */
h1{ font-size: var(--h1); line-height:1.15; margin:.2em 0 .3em; letter-spacing:-.01em; }
h2{ font-size: var(--h2); line-height:1.2; margin:.8em 0 .4em; letter-spacing:-.01em; }
h3{ font-size: var(--h3); line-height:1.25; margin:.9em 0 .5em; }
.lead{ font-size: var(--lead); color: var(--fs-brand-ink); }
.muted{ color: var(--fs-muted); }

/* =========
   BUTTONS
   ========= */
.btn, .wp-block-button__link, .button{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.68rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; text-decoration:none; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:active, .wp-block-button__link:active, .button:active{ transform: translateY(1px); }
.btn.solid, .wp-block-button.is-style-fill .wp-block-button__link{
  background: var(--fs-accent); color:#1f2937; border-color:#e7ab06; box-shadow: var(--shadow-sm);
}
.btn.outline{ background: transparent; color: var(--fs-brand); border-color: var(--fs-brand); }
.btn.ghost{ background: transparent; color: var(--fs-ink); border-color: #cbd5e1; }

/* =========
   HEADER / NAV (dark scheme)
   ========= */
.site-header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
  background:#274343; /* dark teal */
  color:#fff;
  border-bottom:none;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h);
  gap:18px; padding-block:8px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:40px; width:auto; }
.brand-title{ color:#fff; font-weight:700; letter-spacing:.2px; }

/* Primary nav horizontal */
.primary-nav{ display:flex; align-items:center; gap: clamp(10px, 2.4vw, 26px); flex-wrap: nowrap; }
.site-header .nav{ display:flex; gap:1.5rem; flex-wrap:nowrap; align-items:center; }
.site-header .primary-nav a,
.site-header a{ color:#fff; }
.site-header .primary-nav a:hover{ color: var(--fs-accent); text-decoration:none; }

/* Compact header buttons + equalized link height */
.site-header .btn{
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.2;
}
.site-header .nav a{
  display:inline-flex; align-items:center;
  height:32px; font-size:.9rem;
}
.site-header .btn.solid{ background: var(--fs-accent); color:#1f2937; border:none; }
.site-header .btn.outline{ border:1px solid var(--fs-accent); background:transparent; color: var(--fs-accent); }

/* Mobile toggle */
.nav-toggle{ display:none; }
@media (max-width: 840px){
  .primary-nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; color:#fff; }
  .site-header.open .primary-nav{
    display:flex; flex-direction:column; width:100%; padding:12px 0; background:#274343;
  }
  .site-header.open .header-ctas{ width:100%; }
}

/* ===== MOBILE MENU COLORS ===== */
@media (max-width: 768px){
  .primary-nav, .mobile-nav, .menu-toggle.active + .primary-nav { background:#274343; }
  .primary-nav a, .mobile-nav a{
    display:block; padding:0.75rem 1rem; color:#ffffff;
    border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .primary-nav a:hover, .mobile-nav a:hover,
  .primary-nav a:focus, .mobile-nav a:focus{
    background:rgba(255,255,255,0.08); color: var(--fs-accent);
  }
  .primary-nav ul ul, .mobile-nav ul ul{
    background:#274343; border-top:1px solid rgba(255,255,255,0.15);
  }
  .primary-nav ul ul a, .mobile-nav ul ul a{ padding-left:2rem; }
}
/* ========== Mobile nav & hero fixes ========== */
@media (max-width: 782px) {
  /* Hide header CTAs (e.g., Directions) on mobile */
  .header-ctas,
  .hide-mobile { display: none !important; }

  /* Vertical dropdown menu */
  .primary-nav { width: 100%; }
  .primary-nav .nav {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
  }
  .site-header.open .primary-nav .nav { display: flex; }
  .primary-nav .nav > li > a {
    display: block;
    padding: 12px 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  /* Compact toggle button */
  .nav-toggle.btn { padding: 6px 10px; line-height: 1.2; }

  /* Center the hero on mobile */
  .hero { text-align: center; }
  .hero .hero-copy {
    margin-inline: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .hero .hero-actions { justify-content: center; }
  /* Optional: hide art on mobile if you want tighter layout */
  .hero .hero-art { display: none; }
}
@media (max-width: 782px) {
  /* Show the hero image on mobile */
  .hero .hero-art { 
    display: block; 
    margin: 12px 0 0; 
  }

  /* Make the image scale cleanly */
  .hero .hero-art img,
  .hero .hero-art picture,
  .hero .hero-art svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Keep hero copy centered, as before */
  .hero { text-align: center; }
  .hero .hero-copy { margin-inline: auto; }
  .hero .hero-actions { justify-content: center; }
}
@media (min-width: 600px) and (max-width: 782px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
  .hero .hero-actions { justify-content: flex-start; }
}

/* ========== Age Gate ========== */
.age-gate {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  color: #fff;
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.age-gate.show { display: flex; }
.age-card {
  background: #274343; /* site header color */
  color: #fff;
  padding: 24px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  width: min(90vw, 420px);
  text-align: center;
}
.age-card h2 { margin: 0 0 8px; }
.age-card p { margin: 0 0 14px; }
.age-card .cluster { display: flex; gap: 10px; justify-content: center; }
.age-card .btn { min-width: 120px; }

/* =========
   FOOTER (dark scheme)
   ========= */
.site-footer{
  background:#274343; color:#fff; border-top:none; margin-top:48px;
}
.site-footer .wrap{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; padding-block:28px;
}
.site-footer a, .site-footer h3, .site-footer h4, .site-footer small{ color:#fff; }
.site-footer a:hover{ color: var(--fs-accent); }
.footer-col{ grid-column: span 4; }
.footer-col small{ color:#fff; opacity:.8; }
@media (max-width: 900px){ .site-footer .wrap{ grid-template-columns: 1fr 1fr; } .footer-col{ grid-column:auto; } }
@media (max-width: 580px){ .site-footer .wrap{ grid-template-columns: 1fr; } }

/* =========
   HERO
   ========= */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(18px, 3.6vw, 40px);
  background: linear-gradient(160deg, var(--fs-brand) 0%, #132a40 40%, #102536 100%);
  color:#eaf2f8; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius);
  margin: clamp(10px, 2vw, 20px) 0; box-shadow: var(--shadow);
}
.hero h1{ color:#fff; margin-top:6px; }
.hero p{ color:#dbe5ee; }
.hero .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.hero .trust{ list-style:none; padding:0; margin:16px 0 0; color:#c7d5e3; display:grid; gap:6px; }
.hero .hero-art{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
@media (max-width: 980px){ .hero{ grid-template-columns: 1fr; } }

/* Modifier: Slate hero background */
.hero-slate{ background: rgb(47,79,79); }
.hero-slate .hero-copy h1,
.hero-slate .hero-copy p,
.hero-slate .trust li{ color:#eaf2f8; }
.hero-slate .btn.ghost{ color:#fff; border-color: rgba(255,255,255,0.4); }
.hero-slate .btn.ghost:hover{ border-color:#fff; }
.hero-slate .btn.solid{ background: var(--fs-accent); color: var(--fs-brand-ink); }

/* =========
   CARDS / GRIDS
   ========= */
.grid{ display:grid; gap: clamp(14px, 2vw, 24px); }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid.cols-3{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 580px){ .grid.cols-3,.grid.cols-2{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow:hidden;
}
.card .card-media img{ width:100%; height:auto; }
.card .card-body{ padding: 16px 16px 18px; }
.card h3{ margin:.3em 0; }
.card .meta{ color: var(--fs-muted); font-size:.95rem; }

/* =========
   SPLIT CARDS (media/content)
   ========= */
.split-card{
  display:grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(14px, 2vw, 24px); align-items: stretch;
}
.split-card .split-media{ overflow:hidden; border-right: 1px solid #e5e7eb; }
.split-card .split-content{ display:grid; align-content:center; gap:10px; }

/* Reverse: content left, media right */
.split-card.split-reverse{ grid-template-columns: 1.1fr 1fr; }
@media (max-width: 900px){
  .split-card, .split-card.split-reverse{ grid-template-columns: 1fr; }
  .split-card .split-media{ border-right:0; border-bottom:1px solid #e5e7eb; }
}

/* 16:9 media by default */
.media-ratio{
  position:relative; width:100%; padding-bottom:56.25%; overflow:hidden; border-radius: var(--radius);
}
.media-ratio > iframe, .media-ratio > img, .media-ratio > svg, .media-ratio > picture, .media-ratio > video{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}

/* Full-height map iframe inside split card */
.split-media.map-embed{ display:flex; }
.split-media.map-embed .media-ratio{
  position:relative; width:100%; height:auto; padding-bottom:0; flex:1;
}
.split-media.map-embed .media-ratio iframe{
  position:relative; width:100%; height:100%; min-height:100%; border:0;
}

/* =========
   LOCATIONS
   ========= */
.locations{ display:grid; gap: 18px; }
.store-card{
  background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm); display:grid; gap:10px;
}
.store-card h2{ margin:.1em 0; }
.store-card p{ margin:.2em 0; color: var(--fs-ink); }
.store-card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* =========
   REWARDS (account/marketing helpers)
   ========= */
.rewards .progress{
  background:#e5e7eb; border-radius:999px; height:12px; overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.rewards .progress > .bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--fs-accent) 0%, #ffd76a 100%);
  transition: width .35s ease;
}
.fivestar-points{ font-weight:700; }
#fivestar-redeem.card{ border:1px dashed #d1d5db; background:#fcfcfd; }
#fivestar-redeem input[type="number"]{ padding:.55rem .7rem; border:1px solid #cbd5e1; border-radius:10px; width:160px; }
#fivestar-redeem button{ margin-left:8px; }
#redeem-result{ margin-top:8px; color: var(--fs-muted); }

/* =========
   FORMS
   ========= */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select{
  width:100%; padding:.65rem .75rem; font: inherit; color: var(--fs-ink);
  border:1px solid #cbd5e1; border-radius: var(--radius-sm); background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:#93c5fd; box-shadow:0 0 0 4px rgba(147,197,253,.3);
}
label{ display:block; font-weight:600; margin-bottom:6px; }

/* =========
   TABLES
   ========= */
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid #e5e7eb; }
thead th{ font-size:.95rem; color: var(--fs-muted); text-transform: uppercase; letter-spacing:.04em; }

/* =========
   MESSAGES / BADGES
   ========= */
.notice{ border:1px solid #e5e7eb; background:#f8fafc; padding:12px 14px; border-radius: 10px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:.28rem .55rem; border-radius:999px; font-weight:600; font-size:.85rem; }
.badge.gold{ background:#fff7d6; color:#7c5a00; border:1px solid #fde68a; }
.badge.teal{ background:#e6fffa; color:#064e3b; border:1px solid #99f6e4; }

/* =========
   WOO MINIMAL POLISH
   ========= */
.woocommerce .button{ border-radius: var(--radius-sm); }
.woocommerce-message{ border-color:#bbf7d0; background:#f0fdf4; }
.woocommerce-error{ border-color:#fecaca; background:#fff1f2; }
.woocommerce-info{ border-color:#bfdbfe; background:#eff6ff; }

/* =========
   UTILITIES
   ========= */
.center{ text-align:center; }
.stack > * + *{ margin-top: var(--stack, 12px); }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--gap, 10px); }
.hidden{ display:none !important; }
.maxw-sm{ max-width:640px; }
.maxw-md{ max-width:820px; }
.pad{ padding: clamp(12px, 2.4vw, 24px); }
.mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; } .mt-3{ margin-top:18px; } .mt-4{ margin-top:24px; }
.mb-1{ margin-bottom:6px; } .mb-2{ margin-bottom:12px; } .mb-3{ margin-bottom:18px; } .mb-4{ margin-bottom:24px; }

/* =========
   REDUCED MOTION & DARK MODE
   ========= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
}
@media (prefers-color-scheme: dark){
  :root{
    --fs-bg:#0b1220; --fs-surface:#0e1626; --fs-ink:#e6edf3; --fs-muted:#9fb0c2;
    --link:#ffe08a;
  }
  .site-header{ background:#274343; border-bottom-color:#1f2a3a; }
  .card, .store-card{ background:#0f172a; border-color:#1f2a3a; }
  .hero{ box-shadow:none; }
  input, textarea, select{ background:#0f172a; border-color:#203047; color:var(--fs-ink); }
  hr{ background:#203047; }
}
/* Edge/extension override guard */
body:not(.force-dark) { background-color: #fff !important; }
/* Fix hero alignment on mobile */
@media (max-width: 782px) {
  .hero {
    margin: 0 auto;
    padding: 0 1rem;   /* even padding left/right */
    max-width: 100%;   /* no artificial shrinking */
    text-align: center;
  }

  .hero .hero-copy,
  .hero .hero-art {
    margin: 0 auto;
    padding: 0;
  }
}