/**
 * theme-2026.css — Premium 2026 visual layer for FibreSwitch.com
 * Overrides only. No removal of existing classes/IDs. Linked last in head.
 * Non‑regression: postcode/Stickee/JS logic unchanged; no CLS.
 */

/* ==========================================================================
   PHASE 2 — Design tokens, surfaces, consistent width
   ========================================================================== */

:root {
  /* Width and alignment (override to unify) */
  --container-max: var(--fs-max);
  --gutter: clamp(16px, 2.2vw, 28px);
  --pad: var(--gutter);
  --pad-m: clamp(14px, 3.5vw, 18px);

  /* Surface and text (additive; do not remove brand colours) */
  --bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: rgba(8, 27, 46, 0.04);
  --text-1: #0b1220;
  --text-2: rgba(11, 18, 32, 0.78);
  --text-3: rgba(11, 18, 32, 0.62);
  --border-1: rgba(8, 27, 46, 0.10);
  --border-2: rgba(8, 27, 46, 0.14);
  --shadow-1: 0 10px 30px rgba(8, 27, 46, 0.10);
  --shadow-2: 0 14px 40px rgba(8, 27, 46, 0.14);
  --radius-1: 14px;
  --radius-2: 18px;
  --radius-3: 22px;
  --focus: var(--fs-cyan);

  /* Motion (for Phase 5) */
  --motion-fast: 140ms;
  --motion-med: 220ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body {
  background: var(--bg);
  color: var(--text-1);
}

/* ==========================================================================
   PHASE 3 — Component polish (buttons, inputs, cards, chips)
   ========================================================================== */

/* Buttons — primary CTA pops; existing classes only */
.btn,
button.btn,
a.btn,
input[type="submit"],
.button,
.cta {
  transition: transform var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.btn-primary,
button.btn-primary,
a.btn-primary,
.hero .btn-primary,
.fs-hero__panel .btn-primary {
  background: linear-gradient(180deg, #1ae0ff 0%, #14b8d9 100%);
  color: var(--fs-navy);
  box-shadow: var(--fs-shadow-cta), 0 4px 14px rgba(25, 211, 255, 0.25);
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(25, 211, 255, 0.3), 0 6px 16px rgba(8, 27, 46, 0.12);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:focus-visible,
.btn:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn-outline:hover {
  background: var(--surface-3);
  border-color: var(--border-2);
}

/* Inputs — postcode box premium, min 48px height, no layout shift */
.fs-hero__input,
input.fs-hero__input,
[data-postcode-input] {
  min-height: 48px;
  padding: 14px 18px;
  background: var(--surface-1);
  border: 2px solid var(--border-1);
  border-radius: var(--radius-1);
  font-size: clamp(16px, 1.05vw, 18px);
  transition: border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.fs-hero__input::placeholder {
  color: var(--text-3);
}

.fs-hero__input:focus {
  border-color: var(--fs-cyan);
  box-shadow: 0 0 0 3px rgba(25, 211, 255, 0.2);
  outline: none;
}

/* Cards — consistent border and shadow */
.card,
.band .card,
.band-results-light .card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

.band-dark .card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Chips and trust bullets */
.chip,
.ticks .tick {
  font-weight: 700;
  color: var(--text-2);
}

.chip {
  background: var(--surface-2);
  border-color: var(--border-1);
  border-radius: 999px;
  padding: var(--s8) var(--s12);
}

/* ==========================================================================
   PHASE 4 — Homepage hero and first band (fix dark stacking)
   ========================================================================== */

/* Hero: keep dark; panel = light surface so form stands out */
.fs-hero {
  background: radial-gradient(900px 520px at 10% 10%, rgba(25, 211, 255, 0.18), transparent 55%),
    radial-gradient(820px 480px at 88% 18%, rgba(46, 242, 178, 0.12), transparent 55%),
    linear-gradient(135deg, #061524 0%, #081b2e 40%, #06131f 100%);
}

.fs-hero__panel {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  padding: var(--s24);
  backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(12px)) {
  .fs-hero__panel {
    background: var(--surface-1);
  }
}

.hero-postcode-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* First band after hero — clearly light (surface-2); links readable */
.band-results-light {
  background: var(--surface-2);
  border-top: 1px solid var(--border-1);
}

.band-results-light a {
  color: var(--text-1);
}

.band-results-light a:hover {
  color: var(--fs-cyan);
}

/* Trust strip — readable on dark */
.trust-strip .wrap {
  color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   PHASE 5 — Animation, intentional and safe (prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Single gentle hero CTA attention (one cycle, max ~900ms) */
@keyframes theme-cta-breathe {
  0%, 100% { box-shadow: var(--fs-shadow-cta), 0 4px 14px rgba(25, 211, 255, 0.25); }
  50% { box-shadow: 0 12px 28px rgba(25, 211, 255, 0.35), 0 6px 18px rgba(8, 27, 46, 0.1); }
}

.fs-hero__panel .btn-primary {
  animation: theme-cta-breathe 0.9s var(--ease) 0.3s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .fs-hero__panel .btn-primary {
    animation: none;
  }
}

/* Card hover — very subtle */
.card {
  transition: box-shadow var(--motion-med) var(--ease),
    border-color var(--motion-med) var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-2);
}

/* ==========================================================================
   PHASE 6 — Review carousel (look only)
   ========================================================================== */

.review-carousel {
  margin-top: var(--s16);
}

.carousel-track {
  grid-auto-columns: minmax(260px, 320px);
  gap: var(--s20);
  padding-bottom: var(--s12);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.carousel-track::-webkit-scrollbar {
  height: 6px;
}

.carousel-track::-webkit-scrollbar-track {
  background: var(--surface-3);
  border-radius: 999px;
}

.carousel-track::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
}

.review-card {
  min-height: 0;
  padding: var(--s20);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

.carousel-btn {
  width: 36px;
  height: 36px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}

.carousel-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.carousel-dots {
  margin-top: var(--s20);
}

/* ==========================================================================
   PHASE 7 — Footer (look only, professional)
   ========================================================================== */

.site-footer {
  background: linear-gradient(165deg, #000814 0%, #06121f 42%, #071626 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--s64) 0 var(--s32);
}

.site-footer .footer-brand .footer-logo {
  height: 112px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .site-footer .footer-brand .footer-logo {
    height: 140px;
  }
}

.site-footer .micro {
  color: rgba(255, 255, 255, 0.78);
}

.site-footer .footer-title {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
}

.site-footer .footer-list a {
  color: rgba(25, 211, 255, 0.95);
}

.site-footer .footer-list a:hover {
  color: rgba(46, 242, 178, 0.95);
  text-decoration: underline;
}

.site-footer .footer-list a:focus-visible {
  outline: 2px solid var(--fs-cyan);
  outline-offset: 2px;
}

.site-footer .footer-grid {
  gap: var(--s40);
}

.site-footer .footer-bottom {
  margin-top: var(--s40);
  padding-top: var(--s24);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 520px) {
  .site-footer .footer-brand .footer-logo {
    height: 88px;
  }
}

/* ==========================================================================
   PHASE 8 — Business page visual balance (CSS only)
   ========================================================================== */

.hero--business .hero-grid {
  gap: clamp(20px, 3vw, 48px);
}

@media (min-width: 980px) {
  .hero--business .hero-grid {
    grid-template-columns: 1.05fr minmax(480px, 1fr);
    align-items: start;
  }
}

.hero-widget,
.hero--business .hero-widget {
  padding: var(--s24);
  min-height: 0;
}

/* ==========================================================================
   PHASE 9 — Switch page spacing rhythm
   ========================================================================== */

.band {
  padding: var(--section-y) 0;
}

.band .wrap > .card + .card,
.band .wrap > section.card + section.card,
.band .wrap > div.card + div.card {
  margin-top: var(--stack-4);
}

/* Trust and transparency blocks — align to container */
.band .wrap {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   Container width unification (all pages)
   ========================================================================== */

.wrap {
  max-width: var(--container-max);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-container .wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* FAQ / accordion (look only) */
.faq-list {
  gap: var(--s16);
}

.faq-toggle {
  padding: var(--s12) var(--s16);
  border-radius: var(--radius-1);
  transition: background var(--motion-fast) var(--ease);
}

.faq-toggle:hover {
  background: var(--surface-3);
}

.faq-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.faq-panel {
  padding: 0 var(--s16) var(--s16);
}

/* Sticky CTA and scroll-top — polish */
.sticky-cta,
.scroll-top {
  transition: opacity var(--motion-med) var(--ease),
    transform var(--motion-med) var(--ease);
}

.sticky-cta:focus-visible,
.scroll-top:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}