/* ================================================================
   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; }
}