/*
Theme Name: Joint Rivers
Theme URI: https://jointrivers.com/
Author: HEADIE.TV
Author URI: https://headie.tv
Description: Evergreen-inspired dispensary theme with sticky header + category pills, mobile drawer, age gate, blog section, footer warnings, and Cloudflare R2 banner rotation. Includes Customizer controls for logo + brand colors.
Version: 5.5.2.3
License: GPL-2.0-or-later
Text Domain: joint-rivers
*/
:root{--jr-black:#111;--jr-muted:#6b7280;--jr-ring:#e5e7eb}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--jr-black);background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.jr-btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1rem;border-radius:.9rem;background:var(--jr-black);color:var(--jr-white);font-weight:600;transition:opacity .2s ease;border:0;cursor:pointer}
.jr-btn:hover{opacity:.9}
.jr-btn-outline{background:transparent;border:1px solid rgba(255,255,255,.7);color:var(--jr-white)}
.jr-btn-soft{background:#fff;border:1px solid #e5e7eb;color:#111}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}
.catbar-wrap{position:sticky;top:56px;z-index:49;background:#fff;border-bottom:1px solid #e5e7eb}
@media(min-width:900px){.catbar-wrap{top:64px}}
.catbar{display:flex;gap:.75rem;overflow:auto;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catpill{white-space:nowrap;border:1px solid #e5e7eb;border-radius:9999px;padding:.45rem .8rem;font-size:.9rem;background:#fff}
.catpill.active,.catpill:hover{background:var(--jr-black);color:var(--jr-white);border-color:#111}
.jr-hero{position:relative}
.jr-hero img{width:100%;height:62vh;object-fit:cover}
.jr-hero img.jr-hero-img{transition:opacity .6s ease;opacity:1}
.jr-hero img.jr-hero-img.jr-fade{opacity:0}
.jr-hero .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.22), transparent)}
.jr-hero .content{position:absolute;inset:0;display:flex;align-items:flex-end}
.jr-overlay-box{display:inline-block;padding:1rem 1.25rem;border-radius:1rem}
.jr-pos{position:absolute;max-width:min(92vw, 980px)}
.jr-tl{top:8%;left:5%}.jr-tr{top:8%;right:5%}.jr-bl{bottom:8%;left:5%}.jr-br{bottom:8%;right:5%}.jr-ct{top:50%;left:50%;transform:translate(-50%,-50%)}
.jr-align-left{text-align:left}.jr-align-center{text-align:center}.jr-align-right{text-align:right}
.section{padding:4rem 0}
.section .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:var(--jr-muted)}
.section .h2{font-size:clamp(1.8rem,3.2vw,2.25rem);font-weight:800;margin:.4rem 0}
.section .lead{color:#4b5563}
.grid{display:grid;gap:1.25rem}
.grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;overflow:hidden;border-radius:1.25rem;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid var(--jr-ring)}
.tile img{height:14rem;width:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.05)}
.tile .shade{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08), transparent)}
.tile h3{position:absolute;bottom:.9rem;left:1rem;color:var(--jr-white);text-shadow:0 4px 20px rgba(0,0,0,.6);margin:0}
.desktop-nav{display:none}
.mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #e5e7eb;border-radius:.75rem;background:#fff}
@media(min-width:960px){.desktop-nav{display:flex;gap:1.25rem;align-items:center}.mobile-toggle{display:none}}
.mobile-drawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:none}
.mobile-drawer.open{display:block}
.mobile-panel{position:absolute;right:0;top:0;height:100%;width:min(86vw,380px);background:#fff;padding:1rem 1rem 2rem;overflow:auto}
.mobile-panel a{display:block;padding:.75rem 0;border-bottom:1px solid #f1f5f9}
:target{scroll-margin-top:110px}
@media(min-width:900px){:target{scroll-margin-top:128px}}
.jr-age-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:9999}
.jr-age-modal{background:#fff;border-radius:1rem;padding:1.5rem;width:min(94vw,460px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* Blog section */
.jr-section-head{max-width:760px;margin:0 auto 22px auto;text-align:center}
.jr-section-head h2{font-size:28px;letter-spacing:-0.02em;margin:0 0 6px 0}
.jr-section-head p{margin:0;color:#6b7280}
.jr-blog-grid{margin-top:18px}
.jr-blog-card .jr-card-body{padding:16px}
.jr-blog-thumb{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#e5e7eb}
.jr-blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.jr-blog-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;color:#111;background:linear-gradient(180deg,#f3f4f6,#d1d5db)}
.jr-blog-meta{font-size:12px;color:#6b7280;margin-bottom:6px}
.jr-blog-title{margin:0 0 8px 0;font-size:18px;line-height:1.2}
.jr-blog-title a{color:#111;text-decoration:none}
.jr-blog-excerpt{margin:0 0 12px 0;color:#374151;font-size:14px;line-height:1.45}
.jr-link{color:#111;font-weight:700;text-decoration:none}
.jr-blog-cta{display:flex;justify-content:center;margin-top:18px}
.jr-empty{padding:18px;border:1px dashed #d1d5db;border-radius:16px;color:#6b7280;text-align:center}

/* Footer warnings */
.jr-footer-warnings{border-top:1px solid #e5e7eb;margin-top:18px;padding-top:14px}
.jr-footer-warnings p{margin:0 0 8px 0;color:#6b7280;font-size:12px;line-height:1.35}


/* === Brand Variables (Customizer) ===
   These are defaults. They can be overridden in Appearance → Customize → Brand (Theme).
*/
:root{
  --jr-white:#ffffff;
  --jr-black:#020202;
  --jr-green:#377438;
  --jr-blue:#2796c2;
  --jr-sage:#97ac8a;
  --jr-sky:#94bddb;

  --jr-muted:#6b7280;
  --jr-ring:#e5e7eb;
}

.jr-logo-fallback{font-weight:900;letter-spacing:-0.02em}

/* === Thin Hero Banner (v5.3.2) === */
.jr-hero{
  min-height: clamp(360px, 55vh, 520px);
}
@media (max-width: 768px){
  .jr-hero{
    min-height: clamp(260px, 45vh, 360px);
  }
}

/* === Thin Header (v5.3.3) === */
.site-header{
  padding: 10px 0;
}
.site-header .jr-container{
  min-height: 48px;
}
.jr-logo{
  max-height: 28px;
}
@media (max-width: 768px){
  .site-header{
    padding: 8px 0;
  }
  .site-header .jr-container{
    min-height: 44px;
  }
}

/* === Logo sizing (v5.3.4) === */
:root{ --jr-logo-h: 32px; }

.site-header .custom-logo-link,
.site-header .custom-logo{
  display:inline-flex;
  align-items:center;
  line-height:0;
}

.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header img.jr-logo{
  height: var(--jr-logo-h);
  max-height: var(--jr-logo-h);
  width: auto !important;
  max-width: 240px;
}

@media (min-width: 1024px){
  .site-header .custom-logo,
  .site-header .custom-logo-link img,
  .site-header img.jr-logo{
    max-width: 320px;
  }
}

/* === Locations section (v5.5.0) === */
.jr-locations-grid{margin-top:18px}
.jr-location-card{overflow:hidden}
.jr-location-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.jr-location-name{margin:0;font-size:18px;line-height:1.2}
.jr-location-line{font-size:14px;color:#374151;margin:8px 0}
.jr-location-line a{color:inherit;text-decoration:underline}
.jr-location-actions{margin-top:12px}
.jr-location-map{border-top:1px solid var(--jr-ring);background:#f3f4f6}
.jr-location-map iframe{display:block;width:100%;height:260px;border:0}
.jr-map-fallback{display:flex;align-items:center;justify-content:center;height:260px;font-weight:800;color:var(--jr-black);text-decoration:none}
@media (max-width: 900px){
  .jr-location-map iframe, .jr-map-fallback{height:220px}
}

/* === Jane preview (v5.5.1) === */
.jr-jane-preview{margin-top:14px}
.jr-menu-cta{margin-top:14px;display:flex;justify-content:center}

/* Jane iframe (v5.5.2) */
.jr-jane-iframe iframe{border-radius:16px;background:#fff}

/* === Verify badge + Jane preview embed (v5.5.2.3) === */
.jr-badge{display:inline-block; margin-left:8px; padding:4px 10px; border-radius:999px; font-size:12px; background:#e8eef2; color:#111; vertical-align:middle}
.jr-home-jane-wrap{margin-top:18px}
.jr-home-jane-iframe{border-radius:18px; overflow:hidden; background:#fff}