/* =====================================================================
   Universal Call CTAs — desktop nav button + mobile floating sticky pill
   =====================================================================
   Shipped alongside _shared/base.css. Loaded by every package template
   via <link rel="stylesheet" href="call-buttons.css" />, so any new
   customer build inherits the Call CTAs automatically.

   Markup is emitted by render helpers in websites/generate.ts:
     • renderNavCall       ->         (desktop nav pill)
     • renderNavCallMobile ->  (mobile drawer link)
     • renderStickyCall    ->      (mobile floating pill)

   All three return "" when c.phone is missing, so this file is safe to
   include unconditionally.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Desktop nav Call button
   --------------------------------------------------------------------- */

/* The render helper emits <a class="btn btn-ghost nav-call">. Inheriting
   from .btn (padding 0.9rem 1.6rem, font-weight 600, font-size 0.95rem,
   border-radius 999px, gap 0.55rem) means the Call pill matches the
   adjacent .nav-cta (Book now) pill exactly in shape + height.
   We override the colour treatment with the brand accent so visitors
   immediately spot the phone number. */
.btn.nav-call {
  margin-left: 0.5rem;
  background: var(--color-accent);
  color: var(--color-surface, #fff);
  border-color: var(--color-accent);
  font-feature-settings: "tnum";
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.btn.nav-call:hover {
  background: color-mix(in srgb, var(--color-accent) 88%, #000);
  color: var(--color-surface, #fff);
  border-color: color-mix(in srgb, var(--color-accent) 88%, #000);
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
.nav-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nav-call__icon svg { display: block; }
.nav-call__label { display: none; }                /* phone number is enough on desktop */
.nav-call__num   { font-weight: 700; letter-spacing: 0.005em; }

/* Nav-bar buttons are 25% smaller than the body .btn defaults so they
   sit more proportionally next to the link list (and the new centered
   logo). Only the nav variants are scoped — body .btn sizing for hero
   / final-CTA buttons stays unchanged.
   Body .btn:  padding 0.9rem 1.6rem, font 0.95rem, gap 0.55rem.
   Nav scaled: padding 0.675rem 1.2rem, font 0.7125rem, gap 0.4125rem. */
.nav-cta,
.btn.nav-call {
  padding: 0.675rem 1.2rem;
  font-size: 0.7125rem;
  gap: 0.4125rem;
}
.btn.nav-call .nav-call__icon { width: 11px; height: 11px; }

/* Hide the desktop pill on mobile — the floating sticky pill takes over. */
@media (max-width: 720px) {
  .nav-call { display: none; }
}


/* ---------------------------------------------------------------------
   "Request a callback" ghost button — urgent-local family nav pair
   --------------------------------------------------------------------- */

/* The rendered markup is <a class="btn btn-ghost nav-callback">.
   Three-class selector (.btn.btn-ghost.nav-callback) gives specificity
   (0,3,0), which beats every per-theme [data-theme="X"] .btn-ghost rule
   (all at 0,2,0) cleanly — no !important, no cascade-position tricks
   required. Hero / body ghost buttons are single-class .btn-ghost targets
   so they are unaffected.

   Goal: the "Call Now" filled primary (`.nav-cta`) and the "Request a
   callback" outlined ghost (`.nav-callback`) sit as a visually matched
   pair — same pill dimensions, same font size, only fill vs outline
   distinguishes them. */
.btn.btn-ghost.nav-callback {
  /* Dimensions — mirror the scaled nav-cta / nav-call sizing above. */
  padding: 0.675rem 1.2rem;
  font-size: 0.7125rem;
  font-weight: 700;
  gap: 0.4125rem;
  margin-left: 0.5rem;

  /* Outline — 2px bolder border per operator spec, primary colour for
     strong contrast across every theme. */
  border-width: 2px;
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;

  /* Ensure no theme's border-radius override leaks in for this element
     specifically — keep the pill shape matching .nav-cta. */
  border-radius: 999px;

  /* No drop-shadow on ghost. */
  box-shadow: none;
}
.btn.btn-ghost.nav-callback:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
}

/* Hide on mobile — the mobile drawer variant takes over. */
@media (max-width: 720px) {
  .btn.btn-ghost.nav-callback { display: none; }
}

/* midnight-lounge: primary is near-black on dark surface — use accent
   (brass) so the ghost button reads against the dark nav background. */
[data-theme="midnight-lounge"] .btn.btn-ghost.nav-callback {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[data-theme="midnight-lounge"] .btn.btn-ghost.nav-callback:hover {
  background: rgba(212, 162, 76, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ---------------------------------------------------------------------
   Mobile drawer Call link
   --------------------------------------------------------------------- */

/* Modifier on the existing .nav-cta-mobile pill in the hamburger panel.
   Inherits all .nav-cta-mobile sizing rules from the shared base.css,
   only overrides colour to use the accent so the mobile drawer surfaces
   the phone number alongside the existing primary CTA. */
.nav-mobile-panel .nav-cta-mobile--call {
  background: var(--color-accent);
  color: var(--color-surface, #fff);
  margin-top: 0.45rem;
  font-variant-numeric: tabular-nums;
}

/* Mobile-panel "Request a callback" — mirrors --call pill in shape.
   Ghost treatment: transparent background, 2px border, primary colour.
   Sits directly below the primary "Call Now" in the drawer. */
.nav-mobile-panel .nav-cta-mobile--callback {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-weight: 700;
  margin-top: 0.45rem;
}
[data-theme="midnight-lounge"] .nav-mobile-panel .nav-cta-mobile--callback {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ---------------------------------------------------------------------
   Mobile floating sticky Call pill
   --------------------------------------------------------------------- */

/* Floats 14px in from every viewport edge — NOT an edge-to-edge bar.
   Pill shape, drop shadow, 56px tap target. Mobile-only via media query.
   body:has(.sticky-call) reserves footer clearance only when the pill
   is actually rendered (the helper returns "" when phone is missing). */
.sticky-call {
  display: none;                                   /* desktop default: hidden */
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  background: var(--color-accent);
  color: var(--color-surface, #fff);
  text-decoration: none;
  text-align: center;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.012em;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.45);
  font-feature-settings: "tnum";
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 56px;
  transition: background 0.18s var(--ease, cubic-bezier(0.2,0.7,0.2,1)),
              color 0.18s var(--ease, cubic-bezier(0.2,0.7,0.2,1));
}
.sticky-call:hover {
  background: color-mix(in srgb, var(--color-accent) 90%, #000);
  color: var(--color-surface, #fff);
}
.sticky-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sticky-call__icon svg { display: block; }
.sticky-call__label { font-weight: 700; }
.sticky-call__num   { font-weight: 600; opacity: 0.86; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .sticky-call { display: inline-flex; }
  body:has(.sticky-call) { padding-bottom: 92px; }
}


/* ---------------------------------------------------------------------
   Theme overlays
   --------------------------------------------------------------------- */

/* midnight-lounge — brass on near-black, dark text on the brass pill */
[data-theme="midnight-lounge"] .btn.nav-call {
  background: var(--color-accent);
  color: #0b0d14;
  border-color: var(--color-accent);
}
[data-theme="midnight-lounge"] .btn.nav-call:hover {
  background: #f0d186;
  color: #0b0d14;
  border-color: #f0d186;
}
[data-theme="midnight-lounge"] .sticky-call {
  background: var(--color-accent);
  color: #0b0d14;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="midnight-lounge"] .sticky-call:hover {
  background: #f0d186;
  color: #0b0d14;
}
[data-theme="midnight-lounge"] .nav-mobile-panel .nav-cta-mobile--call {
  background: var(--color-accent);
  color: #0b0d14;
}

/* press-editorial — warm tan accent on cream paper */
[data-theme="press-editorial"] .btn.nav-call {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}
[data-theme="press-editorial"] .sticky-call {
  background: var(--color-primary);
  color: var(--color-surface);
}

/* garden-bistro — peach accent on sage */
[data-theme="garden-bistro"] .btn.nav-call {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}
[data-theme="garden-bistro"] .sticky-call {
  background: var(--color-primary);
  color: var(--color-surface);
}


/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn.nav-call,
  .sticky-call {
    transition: none;
  }
}


/* =====================================================================
   Socials — "Find us on…" footer row
   =====================================================================
   Emitted by renderSocials() in websites/generate.ts as .
   Returns "" when the lead has no scraped social links, so the row is
   suppressed entirely for customers without socials.
   ===================================================================== */

.socials {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
  color: var(--color-ink-soft, #475569);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.socials__lead {
  margin-right: 0.2rem;
  opacity: 0.85;
}
/* No chrome — just the brand mark in full colour. The anchor still
   carries enough padding to keep the 44pt tap target on mobile even
   though it has no visible background. */
.socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.18s var(--ease, cubic-bezier(0.2,0.7,0.2,1)),
              transform 0.18s var(--ease, cubic-bezier(0.2,0.7,0.2,1));
}
.socials__link:hover { transform: translateY(-1px); opacity: 0.85; }
.socials__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.socials__icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* Per-platform brand colours (Simple Icons official). */
.socials__link--instagram { color: #E4405F; }
.socials__link--facebook  { color: #1877F2; }
.socials__link--twitter   { color: #000000; }
.socials__link--linkedin  { color: #0A66C2; }
.socials__link--youtube   { color: #FF0000; }
.socials__link--tiktok    { color: #000000; }

/* On dark surfaces (midnight-lounge) X/TikTok would vanish — lift them
   so the silhouette stays visible without losing the "black brand mark"
   intent. */
[data-theme="midnight-lounge"] .socials__link--twitter,
[data-theme="midnight-lounge"] .socials__link--tiktok { color: #f2e7c9; }
[data-theme="midnight-lounge"] .socials { color: var(--color-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .socials__link { transition: none; }
  .socials__link:hover { transform: none; }
}

/* ============================================================
   Centered nav logo + button grouping (multipage package)
   ------------------------------------------------------------
   .nav-logo:    slot rendered by renderNavLogo() inside the multipage
                 primary nav, sitting between Services and About in
                 .nav-links. Renders only when content.logo_image is
                 set; otherwise the slot is empty and the link list
                 collapses with no visible gap.

   .nav-actions: wrapper around the Book-now + Call buttons so they
                 stay adjacent as a single flex item (instead of being
                 spread by space-between).

   When [data-has-logo] is on the <html> tag (i.e. a logo has been
   uploaded for this customer), the nav switches from the default
   flex space-between to a 3-column grid so the centered logo lands
   at the page horizontal centre and the .nav-actions group pins to
   the right edge.
   ============================================================ */
/* The wrapper is sized to match a single nav-link line so the nav bar
   stays slim regardless of how big the operator scales the logo. The
   <img> inside is absolutely positioned, anchored to the TOP of the
   wrapper — when the logo is larger than the bar it overflows DOWNWARD
   only, with the top of the logo aligned with the top of the menu. */
.nav-logo {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  /* No `align-self` — inherits the parent flex container's
     `align-items: center` so the wrapper sits on the same baseline as
     the text links. The img inside is anchored at top:0 of this wrapper
     so the logo's TOP aligns with the links' top, and the overflow
     (when scaled large) spills downward. */
  margin: 0 0.5rem;
  /* Reserve horizontal space proportional to the scaled logo height —
     square-ish; wider logos rely on max-width on the img. */
  width: calc(96px * var(--logo-size-scale, 1));
  height: 1.4rem;
  vertical-align: middle;
}
/* --logo-size-scale defaults to 1 and is overridden by an inline
   <style id="logo-size"> block on every build. Range: 1.5..6.25
   (150%..625%) with 2.5 (250%) as the default. */
.nav-logo img {
  position: absolute;
  /* Centre-anchored: logo's geometric centre sits at the wrapper centre
     (same cross-axis centre as the text links). When the scaled height
     exceeds the bar height, the overflow spills equally above and below.
     --logo-offset (px) lets the operator nudge the centre line up
     (negative) or down (positive) from the lead-page slider. */
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + var(--logo-offset, 0px)));
  display: block;
  height: calc(96px * var(--logo-size-scale, 1));
  width: auto;
  max-width: calc(320px * var(--logo-size-scale, 1));
  object-fit: contain;
  transition: transform 0.22s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
              filter 0.22s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
/* Hover-pop is opt-in per lead: gated by [data-logo-hover-pop] on <html>. */
[data-logo-hover-pop] .nav-logo:hover img {
  transform: translate(-50%, calc(-50% + var(--logo-offset, 0px) - 2px)) scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.18));
}
/* Left-aligned logo brand mark uses the SAME base size + scale as the
   centred placement so the slider value renders identically across the
   two positions. Wrapper sits at the inherited cross-axis centre next
   to the text links; img is absolutely positioned and pinned to the
   wrapper's left edge. */
.nav-brand--logo {
  position: relative;
  height: 1.4rem;
  width: calc(96px * var(--logo-size-scale, 1));
  overflow: visible;
}
.nav-brand--logo img {
  position: absolute;
  /* Centre-anchored on the cross axis, pinned to wrapper left edge.
     --logo-offset shifts the centre line up/down as configured. */
  left: 0; top: 50%;
  transform: translateY(calc(-50% + var(--logo-offset, 0px)));
  height: calc(96px * var(--logo-size-scale, 1));
  width: auto;
  max-width: calc(320px * var(--logo-size-scale, 1));
  object-fit: contain;
  transform-origin: left center;
  transition: transform 0.22s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
              filter 0.22s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
[data-logo-hover-pop] .nav-brand--logo:hover img {
  transform: translateY(calc(-50% + var(--logo-offset, 0px) - 2px)) scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.18));
}

/* Respect reduced-motion: keep the hover state visually flat. */
@media (prefers-reduced-motion: reduce) {
  [data-logo-hover-pop] .nav-logo img, [data-logo-hover-pop] .nav-brand--logo img { transition: none; }
  [data-logo-hover-pop] .nav-logo:hover img { transform: translate(-50%, calc(-50% + var(--logo-offset, 0px))); filter: none; }
  [data-logo-hover-pop] .nav-brand--logo:hover img { transform: translateY(calc(-50% + var(--logo-offset, 0px))); filter: none; }
}

/* Desktop (≥721px): centred-logo layout uses .nav-logo (inside nav-links)
   as the primary logo; the brand-slot duplicate must be hidden so the logo
   doesn't appear twice. */
.nav-brand--logo--mobile-only { display: none; }

/* Mobile: enlarge the logo (2.5x cap, 80px max-height), centre it
   horizontally, and let it FLOAT above the nav bar. The nav row keeps
   its natural compact height; the logo overflows below the row with a
   soft drop-shadow so it reads as a hovering badge rather than being
   crammed into a tall menu bar. .nav-inner stays position:relative so
   the absolute centring anchors to the row, and overflow:visible is
   already set on .nav/.nav-inner below this block. The hamburger toggle
   keeps its margin-left:auto right-anchor. z-index keeps the floating
   logo above hero content that scrolls beneath. */
@media (max-width: 720px) {
  /* Show the mobile-only brand logo (centred-layout packages). */
  .nav-brand--logo--mobile-only { display: inline-flex; }

  .nav-inner { position: relative; }

  .nav-brand--logo {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    z-index: 5;
    height: auto;
    width: auto;
    max-width: 60%;
    overflow: visible;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22)) drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12));
  }
  .nav-brand--logo img {
    position: static;
    transform: none;
    height: auto;
    max-height: 80px;
    max-width: 280px;
    width: auto;
    transition: none;
  }
  [data-logo-hover-pop] .nav-brand--logo:hover img {
    transform: none;
    filter: none;
  }
}

/* The nav header must NOT clip the floating logo when it overflows
   vertically. The default overflow on .nav is visible, but some themes
   add backdrop-filter which can introduce a stacking context; this
   keeps the overflow path unambiguous. */
.nav, .nav-inner { overflow: visible; }
.nav-actions {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
@media (max-width: 900px) {
  .nav-logo { display: none; }
}

/* Centered-nav layout: only when a logo is uploaded on the multipage
   package. Three columns — empty left, auto-width nav-links centre,
   right-aligned actions. The grid puts everything on row 1; nav-toggle
   sits in column 3 too and reveals only on mobile where the grid
   collapses to a single flex line anyway. */
:is([data-package="multipage"], [data-package="advanced"])[data-has-logo] .nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: stretch;
  align-items: center;
}
:is([data-package="multipage"], [data-package="advanced"])[data-has-logo] .nav-brand   { grid-column: 1; justify-self: start; }
:is([data-package="multipage"], [data-package="advanced"])[data-has-logo] .nav-links   { grid-column: 2; justify-self: center; }
:is([data-package="multipage"], [data-package="advanced"])[data-has-logo] .nav-actions { grid-column: 3; justify-self: end; }
:is([data-package="multipage"], [data-package="advanced"])[data-has-logo] .nav-toggle  { grid-column: 3; justify-self: end; }
@media (max-width: 900px) {
  /* Mobile: revert to the default flex layout so the hamburger drawer
     and brand stack as before. */
  :is([data-package="multipage"], [data-package="advanced"])[data-has-logo] .nav-inner {
    display: flex;
    justify-content: space-between;
  }
}