/* ==========================================================================
   bwb-features.css - layout only for the six base features.

   This file owns behaviour that must not be re-derived per client: the fixed
   positioning of the call bar, the footer clearance it needs, the notice
   layout, the area grid. It owns no palette and no type scale. Everything
   visual reads the custom properties the site already emits from brand.colors,
   with a neutral fallback so a page still looks deliberate before the site CSS
   loads.

   Remap in one place if a site names its variables differently: edit the alias
   block below and nothing else in this file needs to change.
   ========================================================================== */

:root {
  --bwbf-ink: var(--ink, #17181a);
  --bwbf-ink-soft: var(--ink-soft, var(--inkSoft, #5c6066));
  --bwbf-paper: var(--paper, #fff);
  --bwbf-paper-2: var(--paper-2, var(--paper2, #f4f4f1));
  --bwbf-line: var(--line, #dcdcd6);
  --bwbf-accent: var(--accent, #1f6f3f);
  --bwbf-accent-deep: var(--accent-deep, var(--accentDeep, #14522e));
  --bwbf-dark: var(--dark, #16181a);
  --bwbf-highlight: var(--highlight, #f0c14b);
  --bwbf-radius: var(--radius, 4px);
  --bwbf-font-display: var(--font-display, inherit);

  --bwbf-callbar-h: 0px; /* set by the breakpoint rule when the bar is live */
}

/* --------------------------------------------------------------------------
   1. Notice banner
   -------------------------------------------------------------------------- */

.bwb-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: var(--bwbf-paper-2);
  color: var(--bwbf-ink);
  border-bottom: 1px solid var(--bwbf-line);
  border-left: 4px solid var(--bwbf-accent);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.bwb-notice-alert { border-left-color: #b4462f; }
.bwb-notice-alert .bwb-notice-msg { font-weight: 600; }
.bwb-notice-good { border-left-color: var(--bwbf-accent-deep); }

.bwb-notice-msg { margin: 0; flex: 1 1 auto; }
.bwb-notice-link {
  color: inherit;
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.bwb-notice-x {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.15rem -0.35rem 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bwbf-ink-soft);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.bwb-notice-x:hover { background: rgba(0, 0, 0, 0.06); color: var(--bwbf-ink); }
.bwb-notice-x:focus-visible { outline: 2px solid var(--bwbf-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   2. Sticky call bar. Mobile only, and it must never sit over the footer's
      last line, so the body gets exactly the clearance the bar occupies.
   -------------------------------------------------------------------------- */

.bwb-callbar { display: none; }

@media (max-width: 860px) {
  .bwb-callbar {
    --bwbf-callbar-h: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    min-height: 3.5rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bwbf-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
    transition: transform 0.22s ease;
  }
  .bwb-callbar[data-hidden="1"] { transform: translateY(110%); }

  body:has(.bwb-callbar) { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }

  .bwb-callbar a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.55rem 1rem;
    text-decoration: none;
    font-family: var(--bwbf-font-display);
  }
  .bwb-callbar-1 {
    flex: 1 1 auto;
    background: var(--bwbf-accent);
    color: #fff;
  }
  .bwb-callbar-1:active { background: var(--bwbf-accent-deep); }
  .bwb-callbar-l {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.82;
  }
  .bwb-callbar-n { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; }
  .bwb-callbar-2 {
    flex: 0 0 auto;
    justify-content: center;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .bwb-callbar a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
}

/* Never overlay a printed page, and never fight a keyboard-open viewport. */
@media print { .bwb-callbar, .bwb-notice-x { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .bwb-callbar { transition: none; } }

/* --------------------------------------------------------------------------
   3. Service area pages
   -------------------------------------------------------------------------- */

.bwb-areas-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
}
.bwb-area-card a {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bwbf-line);
  border-radius: var(--bwbf-radius);
  background: var(--bwbf-paper);
  color: var(--bwbf-ink);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.bwb-area-card a:hover {
  border-color: var(--bwbf-accent);
  transform: translateY(-1px);
}

.bwb-area-svc-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.bwb-area-svc-list a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bwbf-line);
  border-left-width: 3px;
  border-left-color: var(--bwbf-accent);
  border-radius: var(--bwbf-radius);
  color: inherit;
  text-decoration: none;
}
.bwb-area-svc-list a:hover { background: var(--bwbf-paper-2); }
.bwb-area-svc-t { font-weight: 700; }
.bwb-area-svc-b { color: var(--bwbf-ink-soft); font-size: 0.9375rem; }

.bwb-area-jobs {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bwb-area-job {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.9rem;
  background: var(--bwbf-paper-2);
  border-radius: var(--bwbf-radius);
}
.bwb-area-job-t { font-weight: 600; font-size: 0.9375rem; }
.bwb-area-job-s { color: var(--bwbf-ink-soft); font-size: 0.8125rem; }

.bwb-area-landmarks {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  color: var(--bwbf-ink-soft);
  font-size: 0.9375rem;
}
.bwb-area-landmarks li::before { content: "\2022"; margin-right: 0.45rem; color: var(--bwbf-accent); }

.bwb-area-review { margin: 1.25rem 0 0; padding-left: 1rem; border-left: 2px solid var(--bwbf-line); }
.bwb-area-review blockquote { margin: 0; font-size: 1.0625rem; }
.bwb-area-review figcaption { margin-top: 0.4rem; color: var(--bwbf-ink-soft); font-size: 0.875rem; }

.bwb-area-faq details {
  border-bottom: 1px solid var(--bwbf-line);
  padding: 0.85rem 0;
}
.bwb-area-faq summary { cursor: pointer; font-weight: 600; }
.bwb-area-faq summary::marker { color: var(--bwbf-accent); }

.bwb-area-nearby ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.bwb-area-nearby a { color: var(--bwbf-ink-soft); text-underline-offset: 0.2em; }
.bwb-area-nearby a:hover { color: var(--bwbf-accent); }

.bwb-area-cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   4. Form extras and 5. thanks page
   -------------------------------------------------------------------------- */

/* Honeypot. Never display:none, some bots skip hidden fields; this is
   off-canvas and out of the tab order instead. */
.bwb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bwb-turnstile { margin: 1rem 0 0; min-height: 65px; }

.bwb-thanks-steps {
  margin: 1.5rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
  color: var(--bwbf-ink-soft);
}
.bwb-thanks-steps li::marker { color: var(--bwbf-accent); font-weight: 700; }
.bwb-thanks-call { margin-top: 1.5rem; font-weight: 600; }

/* Minimal button, only so an area or thanks page is usable before the site
   defines its own .bwb-btn skin. Site CSS should override both rules. */
.bwb-btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: var(--bwbf-radius);
  background: var(--bwbf-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.bwb-btn-ghost {
  background: transparent;
  color: var(--bwbf-ink);
  box-shadow: inset 0 0 0 1px var(--bwbf-line);
}