/**
 * Theme Name:     Quickuote
 * Author:         Appetiser
 * Template:       generatepress
 * Text Domain:	   appetiser
 * Description:    Quickuote landing page — a GeneratePress child theme assembled from self-contained section components. Seeded from the Appetiser custom-theme-baseplate.
 */

/* ── Design Tokens ──────────────────────────────────────────── */
/* Quickuote light palette. Colours sampled from the Figma export
   (clients/quickuote/.figma-screenshots/Landing Page.png) — exact against the
   PNG, treat as estimates pending the Figma inspector. --color-brand matches
   the logo SVG fill (#063F78) exactly. */
:root {
  /* Colour */
  --color-bg:          #ffffff;
  --color-bg-2:        #f4f6f9;
  --color-bg-3:        #e8e8ea;
  --color-brand:       #063f78;
  --color-brand-shade: #0a5099; /* hover/active tint of brand */
  --color-brand-shade-04: #e8eef5; /* pale navy wash — pill-button hover bg */
  --color-text-pri:    #191d2b;
  --color-text-sec:    #535660;
  --color-text-ter:    #8c8e95;
  --color-text-inv:    #ffffff;
  --color-border:      #e8e8ea;
  --color-overlay:     rgba(25, 29, 43, 0.6);
  /* Hero media panel gradient (left split panel behind the phone mockups) */
  --color-panel-top:    #e8e8ea;
  --color-panel-bottom: #c1cee1;

  /* Typography */
  --font-title: 'Plus Jakarta Sans', sans-serif;
  --font-body:  'Plus Jakarta Sans', sans-serif;

  --text-h2:       clamp(2rem, 4vw, 3rem);
  --text-h3:       clamp(1.75rem, 3vw, 2.25rem);
  --text-h4:       1.875rem;
  --text-h6:       1.25rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-sub:      0.875rem;
  --text-caption:  0.6875rem;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  0.75rem;
  --space-lg:  1rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-5xl: 3.5rem;

  /* Radius */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-6xl: 4rem;
}

/* ── In-page anchors ────────────────────────────────────────── */
/* Smooth-scroll "#contact" etc., and stop the target landing under the
   sticky site_header (96 / 80 / 68px at desktop / tablet / mobile).
   Smoothing is gated on .is-loaded (added by functions.php after load) so a
   page arriving with a hash, e.g. the form redirect to "?contact=…#contact",
   jumps straight there instead of animating down from the top. */
html {
  scroll-padding-top: 96px;
}
html.is-loaded {
  scroll-behavior: smooth;
}
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
}
@media (max-width: 480px) {
  html { scroll-padding-top: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-loaded { scroll-behavior: auto; }
}

/* ── Images are not draggable ───────────────────────────────── */
/* Pairs with draggable="false" on the <img> tags (Firefox honours only the
   attribute; Chrome/Safari also honour this property). */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Accessibility utility ──────────────────────────────────── */
/* Visually-hidden but available to screen readers / form labels.
   Standard clip pattern; site-wide because it is a generic a11y helper. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Landing page background ────────────────────────────────── */
.full-width-content {
  background-color: var(--color-bg);
}

/* ── Landing page layout reset ──────────────────────────────── */
/* GeneratePress sets display:flex on .site-content, which makes
   all direct children (our sections) render side-by-side at desktop.
   Force block layout on the landing page template only. */
.full-width-content .site-content,
.full-width-content #primary,
.full-width-content #main {
  display: block;
  width: 100%;
}

/* ── Global chrome height (site_header + site_footer) ───────────
   Full-screen section views (message_screen, legal_page) fill exactly
   the space between the global header and footer via
   min-height: calc(100dvh - var(--apt-chrome-h)) — so they neither scroll
   (message screens) nor collapse on short content (legal pages). Values are
   the measured header+footer totals at each breakpoint (the footer stacks
   taller on mobile). Chrome-less views (Coming Soon) reset it to 0. */
:root {
  --apt-chrome-h: 260px; /* desktop: 130 header + 130 footer */
}
@media (max-width: 900px) {
  :root { --apt-chrome-h: 234px; } /* 104 + 130 */
}
@media (max-width: 480px) {
  :root { --apt-chrome-h: 335px; } /* 94 + 241 (footer stacks) */
}
body.apt-chrome-off {
  --apt-chrome-h: 0px; /* Coming Soon etc. — no header/footer to subtract */
}
.site-content{
  overflow-x: hidden;
}