/* ================================================================
   SMOKE DROP — DESIGN SYSTEM v3
   Single source of truth. Loaded once in theme.liquid.
   ================================================================

   BRAND COLOR PALETTE
   Primary Dark     #050505  — near-black base
   Surface          #111111  — elevated sections
   Card             #1A1A1A  — cards and containers

   Brand Green      #C7FF00  — primary CTA (neon)
   Brand Orange     #FF4D00  — secondary accent (flame)

   Text White       #FFFFFF  — headings
   Text Body        #CFCFCF  — body copy
   Text Muted       #8A8A8A  — captions

   Star Gold        #FFC940  — review stars
   ================================================================ */

:root {
  /* Backgrounds */
  --bg-main:        #050505;
  --bg-surface:     #111111;
  --bg-section:     #111111;
  --bg-card:        #1A1A1A;
  --bg-card-hover:  #222222;

  /* Brand Green — primary CTA */
  --green:          #C7FF00;
  --green-hover:    #D8FF3C;
  --green-press:    #A8D800;
  --green-10:       rgba(199,255,0,0.10);
  --green-15:       rgba(199,255,0,0.15);
  --green-20:       rgba(199,255,0,0.20);
  --green-25:       rgba(199,255,0,0.25);
  --green-30:       rgba(199,255,0,0.30);
  --green-glow:     0 0 24px rgba(199,255,0,0.45);

  /* Aliases used by existing section code */
  --accent-green:        #C7FF00;
  --accent-green-hover:  #D8FF3C;

  /* Brand Orange — secondary (flame in logo) */
  --orange:         #FF4D00;
  --orange-hover:   #FF6B2B;
  --orange-10:      rgba(255,77,0,0.10);
  --orange-20:      rgba(255,77,0,0.20);
  --orange-35:      rgba(255,77,0,0.35);
  --orange-glow:    0 0 24px rgba(255,77,0,0.40);

  /* Alias used by existing section code */
  --accent-orange:  #FF4D00;

  /* Text */
  --text-heading:   #FFFFFF;
  --text-body:      #CFCFCF;
  --text-muted:     #8A8A8A;

  /* Borders */
  --border:         rgba(255,255,255,0.09);
  --border-green:   rgba(199,255,0,0.22);
  --border-orange:  rgba(255,77,0,0.22);

  /* Stars */
  --star-color:     #FFC940;

  /* Shadows */
  --shadow:         0 10px 30px rgba(0,0,0,0.6);
  --shadow-sm:      0 4px 12px rgba(0,0,0,0.40);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:      0 16px 40px rgba(0,0,0,0.70);

  /* Glows — aliases for existing code */
  --glow:           0 0 24px rgba(199,255,0,0.45);
  --glow-orange:    0 0 24px rgba(255,77,0,0.40);

  /* Radius */
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      16px;
  --radius-pill:    100px;

  /* Motion */
  --transition:     0.25s ease;
  --transition-slow:0.4s ease;

  /* Logo */
  --logo-h-nav:     46px;
  --logo-h-mobile:  36px;
  --logo-h-footer:  52px;
}

/* ================================================================
   BASE RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-body);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ================================================================
   LOGO
   The uploaded PNG has a black background (not true alpha).
   mix-blend-mode: screen renders black as invisible on dark
   backgrounds — perfect transparent effect with zero editing.
   filter: brightness adds punch so logo doesn't look dull.
   ================================================================ */
.sd-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}

.sd-logo img {
  height: var(--logo-h-nav);
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.08) contrast(1.05) saturate(1.1);
  image-rendering: -webkit-optimize-contrast;
}

.sd-logo--footer img {
  height: var(--logo-h-footer);
}

@media (max-width: 900px) {
  .sd-logo img { height: var(--logo-h-mobile); }
}

/* ================================================================
   FOCUS (accessibility)
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   WHATSAPP — FAB + INLINE PILL
   Tokens reused: --green, --green-glow, --bg-card, --bg-card-hover,
                  --border, --border-green, --text-heading, --text-body,
                  --radius-pill, --transition
   No new variables. No !important. No external requests.
   ================================================================ */

/* ── Floating action button ────────────────────────────────────── */
.sd-wa-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 14px;
  background: var(--bg-card);
  color: var(--text-heading);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition:
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    max-width var(--transition);
  max-width: 56px;
  overflow: hidden;
  white-space: nowrap;
}

.sd-wa-fab[hidden],
.sd-wa-fab[data-sd-wa-hidden],
.sd-wa-fab[data-sd-wa-drawer-hidden] {
  display: none;
}

.sd-wa-fab__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--green);
}

.sd-wa-fab__label {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

@media (hover: hover) and (min-width: 768px) {
  .sd-wa-fab:hover,
  .sd-wa-fab:focus-visible {
    max-width: 320px;
    background: var(--bg-card-hover);
    box-shadow: var(--green-glow), 0 8px 24px rgba(0, 0, 0, 0.55);
    transform: translateY(-1px);
  }
  .sd-wa-fab:hover .sd-wa-fab__label,
  .sd-wa-fab:focus-visible .sd-wa-fab__label {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  .sd-wa-fab {
    height: 52px;
    max-width: 52px;
    right: max(12px, env(safe-area-inset-right));
  }
}

/* ── Inline pill (footer / contact / location / per-vertical) ─── */
.sd-wa-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--border);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
}

.sd-wa-inline:hover,
.sd-wa-inline:focus-visible {
  border-color: var(--border-green);
  color: var(--green);
  background: var(--green-10);
}

.sd-wa-inline__glyph {
  flex-shrink: 0;
  color: var(--green);
}

.sd-wa-inline__label {
  display: inline-block;
}

/* ── Reduced motion: strip all FAB transitions ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sd-wa-fab,
  .sd-wa-fab__label,
  .sd-wa-inline {
    transition: none;
  }
  .sd-wa-fab:hover,
  .sd-wa-fab:focus-visible {
    transform: none;
  }
}

/* ================================================================
   WHATSAPP — FAB + INLINE PILL
   Tokens reused: --green, --green-glow, --bg-card, --bg-card-hover,
                  --border, --border-green, --text-heading, --text-body,
                  --radius-pill, --transition
   No new variables. No !important. No external requests.
   ================================================================ */

/* ── Floating action button ────────────────────────────────────── */
.sd-wa-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 950;                          /* above header (900), below drawer/modals/age-gate */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 14px;
  background: var(--bg-card);
  color: var(--text-heading);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition:
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    max-width var(--transition);
  max-width: 56px;                       /* collapsed = circle */
  overflow: hidden;
  white-space: nowrap;
}

.sd-wa-fab[hidden],
.sd-wa-fab[data-sd-wa-hidden],
.sd-wa-fab[data-sd-wa-drawer-hidden] {
  display: none;
}

.sd-wa-fab__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--green);
}

.sd-wa-fab__label {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

/* Desktop hover-expand */
@media (hover: hover) and (min-width: 768px) {
  .sd-wa-fab:hover,
  .sd-wa-fab:focus-visible {
    max-width: 320px;
    background: var(--bg-card-hover);
    box-shadow: var(--green-glow), 0 8px 24px rgba(0, 0, 0, 0.55);
    transform: translateY(-1px);
  }
  .sd-wa-fab:hover .sd-wa-fab__label,
  .sd-wa-fab:focus-visible .sd-wa-fab__label {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile sizing */
@media (max-width: 480px) {
  .sd-wa-fab {
    height: 52px;
    max-width: 52px;
    right: max(12px, env(safe-area-inset-right));
  }
}

/* ── Inline pill (footer / contact / location / per-vertical) ─── */
.sd-wa-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--border);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
}

.sd-wa-inline:hover,
.sd-wa-inline:focus-visible {
  border-color: var(--border-green);
  color: var(--green);
  background: var(--green-10);
}

.sd-wa-inline__glyph {
  flex-shrink: 0;
  color: var(--green);
}

.sd-wa-inline__label {
  display: inline-block;
}

/* ── Reduced motion: strip all FAB transitions ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sd-wa-fab,
  .sd-wa-fab__label,
  .sd-wa-inline {
    transition: none;
  }
  .sd-wa-fab:hover,
  .sd-wa-fab:focus-visible {
    transform: none;
  }
}

/* ================================================================
   WHATSAPP — FAB + INLINE PILL
   Tokens reused: --green, --green-glow, --bg-card, --bg-card-hover,
                  --border, --border-green, --text-heading, --text-body,
                  --radius-pill, --transition
   No new variables. No !important. No external requests.
   ================================================================ */

/* FAB */
.sd-wa-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 14px;
  background: var(--bg-card);
  color: var(--text-heading);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition:
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    max-width var(--transition);
  max-width: 56px;
  overflow: hidden;
  white-space: nowrap;
}

.sd-wa-fab[hidden],
.sd-wa-fab[data-sd-wa-hidden],
.sd-wa-fab[data-sd-wa-drawer-hidden] {
  display: none;
}

.sd-wa-fab__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--green);
}

.sd-wa-fab__label {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

@media (hover: hover) and (min-width: 768px) {
  .sd-wa-fab:hover,
  .sd-wa-fab:focus-visible {
    max-width: 320px;
    background: var(--bg-card-hover);
    box-shadow: var(--green-glow), 0 8px 24px rgba(0, 0, 0, 0.55);
    transform: translateY(-1px);
  }
  .sd-wa-fab:hover .sd-wa-fab__label,
  .sd-wa-fab:focus-visible .sd-wa-fab__label {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  .sd-wa-fab {
    height: 52px;
    max-width: 52px;
    right: max(12px, env(safe-area-inset-right));
  }
}

/* Inline pill */
.sd-wa-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--border);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
}

.sd-wa-inline:hover,
.sd-wa-inline:focus-visible {
  border-color: var(--border-green);
  color: var(--green);
  background: var(--green-10);
}

.sd-wa-inline__glyph {
  flex-shrink: 0;
  color: var(--green);
}

.sd-wa-inline__label {
  display: inline-block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sd-wa-fab,
  .sd-wa-fab__label,
  .sd-wa-inline {
    transition: none;
  }
  .sd-wa-fab:hover,
  .sd-wa-fab:focus-visible {
    transform: none;
  }
}

/* ================================================================
   RANKLIFT STUDIO ATTRIBUTION
   Reusable agency-credit variants. Footer styles live with the
   footer section (see sections/footer.liquid). These cover the
   prose `inline` and block `credit` variants used on About / etc.
   See snippets/ranklift-attribution.liquid for usage.
   ================================================================ */

.rl-attrib--inline {
  display: inline;
  font-family: 'Outfit', sans-serif;
  color: inherit;
}
.rl-attrib--inline a {
  color: var(--text-heading);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(199, 255, 0, 0.35);
  padding-bottom: 1px;
  transition:
    color var(--transition),
    border-bottom-color var(--transition);
}
.rl-attrib--inline a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}
.rl-attrib--inline a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.rl-attrib--credit {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  font-family: 'Outfit', sans-serif;
  text-align: left;
}
.rl-attrib--credit .rl-attrib__lede {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 8px;
}
.rl-attrib--credit .rl-attrib__sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: .02em;
}
.rl-attrib--credit a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 255, 0, 0.35);
  padding-bottom: 1px;
  transition: border-bottom-color var(--transition);
}
.rl-attrib--credit a:hover { border-bottom-color: var(--green); }
.rl-attrib--credit a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .rl-attrib--credit { padding: 24px; margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-attrib--inline a,
  .rl-attrib--credit a { transition: none; }
}

/* ================================================================
   RANKLIFT STUDIO ATTRIBUTION
   Reusable agency-credit variants. Footer styles live in
   sections/footer.liquid alongside the rest of the footer's CSS.
   These cover the prose `inline` and block `credit` variants used
   on the About page (and any future templates).
   See snippets/ranklift-attribution.liquid for usage.
   ================================================================ */

.rl-attrib--inline {
  display: inline;
  font-family: 'Outfit', sans-serif;
  color: inherit;
}
.rl-attrib--inline a {
  color: var(--text-heading);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(199, 255, 0, 0.35);
  padding-bottom: 1px;
  transition:
    color var(--transition),
    border-bottom-color var(--transition);
}
.rl-attrib--inline a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}
.rl-attrib--inline a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.rl-attrib--credit {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  font-family: 'Outfit', sans-serif;
  text-align: left;
}
.rl-attrib--credit .rl-attrib__lede {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 8px;
}
.rl-attrib--credit .rl-attrib__sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: .02em;
}
.rl-attrib--credit a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 255, 0, 0.35);
  padding-bottom: 1px;
  transition: border-bottom-color var(--transition);
}
.rl-attrib--credit a:hover { border-bottom-color: var(--green); }
.rl-attrib--credit a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .rl-attrib--credit { padding: 24px; margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-attrib--inline a,
  .rl-attrib--credit a { transition: none; }
}

/* ===== Local info + contextual links (SEO enhancement, v3 impl) ===== */
.sd-local{max-width:1100px;margin:0 auto;padding:40px 20px 8px}
.sd-local h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(24px,3vw,32px);color:var(--text-heading);margin:0 0 6px;text-transform:uppercase;letter-spacing:.01em}
.sd-local__lead{color:var(--text-body);max-width:820px;line-height:1.7;margin:0 0 22px}
.sd-local-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 24px}
.sd-local-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 16px}
.sd-local-card h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
.sd-local-card p,.sd-local-card ul{color:var(--text-body);font-size:14.5px;line-height:1.65;margin:0}
.sd-local-card ul{list-style:none;padding:0}
.sd-local-card li{padding:3px 0 3px 16px;position:relative}
.sd-local-card li::before{content:"›";position:absolute;left:0;color:var(--green)}
.sd-map{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin:0 0 22px}
.sd-map iframe{display:block;width:100%;height:340px;border:0}
.sd-local-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px}
.sd-related{max-width:1100px;margin:0 auto;padding:8px 20px 44px}
.sd-related h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--text-heading);margin:0 0 14px;text-transform:uppercase;letter-spacing:.01em}
.sd-related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sd-related a{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm,10px);padding:13px 16px;color:var(--text-body);text-decoration:none;line-height:1.5;transition:border-color .15s,background .15s}
.sd-related a:hover,.sd-related a:focus-visible{border-color:var(--green);background:var(--green-10);color:var(--text-heading)}
@media(max-width:820px){.sd-local-grid{grid-template-columns:1fr}}
.sd-local-cta a{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:15px;padding:12px 22px;border-radius:var(--radius-pill,999px);text-decoration:none;transition:transform .12s,box-shadow .12s}
.sd-local-cta a.sd-cta-primary{background:var(--green);color:#06120b}
.sd-local-cta a.sd-cta-secondary{background:transparent;color:var(--text-heading);border:1px solid var(--border-green,var(--green))}
.sd-local-cta a:hover{transform:translateY(-1px)}
.sd-local-cta a:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.sd-skip-link{position:absolute;left:-9999px;top:0;z-index:1000000;background:var(--green);color:#06120b;padding:10px 18px;font-weight:700;border-radius:0 0 8px 0;text-decoration:none}
.sd-skip-link:focus{left:0 !important;outline:2px solid #06120b}