/* index-design.css - styling ONLY for index_design.php, an experimental
   home-page redesign built from a Figma mockup (see index_design.php's own
   header comment). Loaded as its own <link>, after style.css, and every
   rule here is scoped under .home-design so it can never affect any other
   page - style.css itself is untouched by this file. Reuses the sitewide
   --font-display/--font-body/--amber tokens already defined on :root in
   style.css (loaded first); everything else (the coral/purple/lime exact
   hex values below) comes straight from the Figma file rather than the
   nearest sitewide token, since a couple of them are deliberately a
   slightly different shade to the sitewide accents (e.g. this hero coral
   #FF5243 vs the sitewide --red #FB4C3F) - fidelity to the design over
   forcing a token that's close-but-not-quite the same colour. */

.home-design {
  --hd-coral: #FF5243;
  --hd-black: #0B0B0B;
  --hd-amber: #F7C20E;
  --hd-lime: #C8F32A;
  --hd-purple: #BA8AF8;
  --hd-offwhite: #F2F2EF;
  background: var(--hd-black);
  padding: 20px 16px 0;
}

.home-design .hd-container {
  max-width: 1180px;
  margin: 0 auto;
}

.home-design section {
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}

/* style.css's shared .site-footer carries its own margin-top:60px, sized
   for every other page here (a plain white page background, where extra
   top space before the footer is invisible either way). This page's own
   black .home-design block ends flush with no page background to blend
   into, so that same 60px showed as a visible white gap - the real cause
   behind what looked like a spacing bug in .hd-closing-cta above.
   Scoped to only-when-.home-design-appears-earlier-on-the-page (a class
   that only exists here), so style.css itself stays untouched and every
   other page's footer spacing is unaffected. The general sibling
   combinator (~), not adjacent (+) - index.php's own script tags sit
   between .home-design and the footer in the DOM, so they aren't
   directly adjacent. */
.home-design ~ .site-footer { margin-top: 0; }

/* ---------- Hero ---------- */
.hd-hero {
  background: var(--hd-coral);
  padding: 56px 48px 64px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.hd-hero-copy { flex: 1 1 480px; min-width: 0; }
/* position:relative + the absolutely-positioned SVG behind the heading
   (z-index) replaces the old plain border-radius box - the shape itself
   is now the exact Figma vector path (see index.php), which is why the
   background/border-radius that used to fake it are gone from here. */
.hd-hero-bubble {
  position: relative;
  display: inline-block;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.hd-hero-bubble-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.hd-hero-bubble h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  /* Figma (node 3159:145): 84.827px at the 1440px design width. */
  font-size: clamp(32px, 5.9vw, 85px);
  line-height: 1.05;
  text-transform: capitalize;
  margin: 0;
}
.hd-hero-sub {
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  /* Figma: 19.33px - down from the 26px the earlier design used here. */
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.4;
  max-width: 520px;
}
.hd-hero-sub p { margin: 0 0 4px; }
.hd-hero-visual {
  flex: 0 1 340px;
  min-width: 220px;
  position: relative;
  text-align: center;
}
.hd-hero-visual img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 20px;
  display: inline-block;
}
.hd-free-delivery {
  position: absolute;
  top: 4%;
  right: 4%;
  background: var(--hd-black);
  color: var(--hd-lime);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  padding: 8px 16px;
  border-radius: 20px;
  transform: rotate(-4deg);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .hd-hero { flex-direction: column; text-align: center; padding: 40px 24px 40px; }
  /* Bug, fixed: .hd-hero-copy/.hd-hero-visual's flex-basis (480px/340px)
     is a WIDTH in .hd-hero's normal row layout - once flex-direction
     switches to column here, that same flex-basis becomes a forced
     minimum HEIGHT instead, leaving a large blank gap under the hero
     copy regardless of its real content height. flex-basis:auto sizes
     each child by its actual content in column mode, same fix pattern
     needed for every other section below that also flips to column. */
  .hd-hero-copy,
  .hd-hero-visual { flex-basis: auto; }
  .hd-hero-bubble { margin: 0 auto 24px; }
  .hd-hero-sub { max-width: none; text-align: left; }
  .hd-free-delivery { position: static; display: inline-block; margin-top: 16px; transform: rotate(-2deg); }
}

/* ---------- Get Started / upload ---------- */
/* padding-top/padding-bottom matched (48px each) so the gap above "Get
   Started" (this padding-top + the hero's own 24px margin-bottom from
   .home-design section, below) equals the gap below the upload row
   (this padding-bottom + this section's own 24px margin-bottom) - both
   come out to 72px. This section's margin-bottom isn't set here
   because .home-design section's shared 24px rule is more specific
   (class+type vs. this single class) and wins regardless - the padding
   is what actually needed adjusting. */
.hd-get-started {
  background: transparent;
  padding: 48px 8px 48px;
  border-radius: 0;
}
.hd-get-started h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  /* Figma: 60px - was under-sized at a 40px cap since the original build;
     caught while re-checking every size against the current design. */
  font-size: clamp(28px, 4.2vw, 60px);
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 28px;
  padding: 0 8px;
}

/* Reuses the real upload-page.js-driven widgets (#dropzone/#qr-frame etc.
   from the shared index.php markup - see index_design.php's own comment)
   - this only resizes/rearranges them to match the Figma layout. Every id
   those scripts depend on is untouched; only these page-scoped classes
   and the wrapping row/labels around them are new. */
.hd-upload-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
  padding: 0 8px;
}
.hd-upload-col { flex: 1 1 380px; min-width: 0; max-width: 440px; }
.hd-upload-col-label {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--hd-purple);
  /* Figma: 30px. */
  font-size: clamp(20px, 2.1vw, 30px);
  text-transform: capitalize;
  margin: 0 0 16px;
}
.hd-upload-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-top: 56px;
}
/* Figma: 72px circle, 30px "OR" text - both up from the 56px/20px this
   used before. */
.hd-or-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--hd-lime);
  color: var(--hd-black);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Compact, side-by-side card sizing to match the Figma mockup - overrides
   style.css's own default .upload-card (420px/500px-tall) for this page
   only. Two classes of specificity beat one, so this wins regardless of
   stylesheet load order. */
.home-design .upload-card {
  width: 100%;
  min-height: 0;
  padding: 28px 24px;
  background: #fff;
}
/* Matches .qr-box's own fixed height (200px QR image + 16px padding on
   each side + 1px border on each side = 234px, from style.css) so the
   two upload cards line up as an even pair - .upload-dropzone already
   has justify-content:center (style.css), so its icon/title/sub/formats
   content re-centers vertically in the extra height for free. */
.home-design .upload-dropzone { min-height: 234px; }
/* Figma shows the QR code as its own small white/bordered square with the
   caption sitting beside it, not both wrapped in one shared white card -
   flattened to a transparent row here (the real #qr-frame/.qr-box element
   still supplies its own white background/border either way, unaffected).
   #mobile-upload-card/#qr-frame/#qr-status are the same real, functional
   elements upload-page.js already drives - only their layout/colour
   changes on this page. */
.home-design .upload-mobile-card {
  background: transparent;
  border: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  min-height: 0;
  padding: 0;
  text-align: left;
}
.home-design .upload-mobile-card .upload-title { display: none; }
.home-design .qr-box { margin-bottom: 0; flex-shrink: 0; }
.home-design #qr-status {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  /* Figma: 20px. */
  font-size: 20px;
  line-height: 1.4;
}
.home-design .upload-layout { display: block; }

@media (max-width: 640px) {
  .home-design .upload-mobile-card { flex-direction: column; text-align: center; }
  /* style.css's own shared rule already hides #mobile-upload-card itself
     below 640px (showing a QR code to the phone that would scan it makes
     no sense) - bug, fixed: that alone left this column's own "Upload
     From Your Mobile" label and the "OR" divider still showing, floating
     above nothing. Below this width there's only ever one real upload
     option, so it collapses to a single centered column, same shape as
     the real #upload-state's own .single-upload-mode already uses for
     the equivalent "QR card force-hidden" case. */
  .hd-upload-col--mobile,
  .hd-upload-divider { display: none; }
  .hd-upload-col--computer .hd-upload-col-label { display: none; }
  .hd-upload-row { display: flex; justify-content: center; }
  .hd-upload-col--computer { max-width: 420px; }
}

@media (max-width: 860px) {
  .hd-upload-row { flex-direction: column; align-items: center; }
  .hd-upload-col { width: 100%; max-width: 440px; flex-basis: auto; }
  .hd-upload-divider { padding-top: 0; padding: 12px 0; }
}

/* ---------- Yellow / quality section ---------- */
.hd-quality {
  background: var(--hd-amber);
  color: var(--hd-black);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 440px;
}
.hd-quality-copy { flex: 0 1 460px; max-width: 460px; min-width: 0; }
.hd-quality-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  /* Figma: 48px. */
  font-size: clamp(32px, 3.3vw, 48px);
  line-height: 1.08;
  text-transform: capitalize;
  margin: 0 0 20px;
}
.hd-quality-copy p {
  font-family: var(--font-body);
  font-weight: 600;
  /* Figma: 20px. */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  max-width: 440px;
  margin: 0;
}
/* Contained now, not bleeding to the viewport edge - the updated Figma
   file (node 3159:145) shows this image sitting fully inside the box
   with normal margin on every side, unlike the earlier design this
   replaced. object-fit:contain (not cover) matches the design's own
   "object-contain" - the printer's own aspect ratio is preserved rather
   than cropped to fill. */
.hd-quality-visual { flex: 1 1 420px; min-width: 0; text-align: center; }
.hd-quality-visual img { width: 100%; height: auto; max-height: 380px; object-fit: contain; display: block; }

@media (max-width: 860px) {
  .hd-quality { flex-direction: column; padding: 40px 24px; text-align: center; min-height: 0; }
  .hd-quality-copy,
  .hd-quality-visual { flex-basis: auto; max-width: none; }
  .hd-quality-copy p { margin: 0 auto; }
}

/* ---------- Purple / intelligent detection section ---------- */
.hd-detect {
  background: var(--hd-purple);
  color: var(--hd-black);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.hd-detect-images {
  flex: 0 1 460px;
  display: flex;
  gap: 16px;
  min-width: 0;
}
.hd-detect-image-wrap { flex: 1 1 0; min-width: 0; position: relative; }
.hd-detect-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border: 6px solid var(--hd-black);
  border-radius: 4px;
}
/* Amber with a black border, not the plain white chip from the earlier
   design - matches node 3159:145's own tags exactly. Figma: 26.895px
   text - up from the 15px this used before. */
.hd-detect-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hd-amber);
  color: var(--hd-black);
  border: 3px solid var(--hd-black);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.hd-detect-copy { flex: 1 1 380px; min-width: 0; }
.hd-detect-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  /* Figma: 48px. */
  font-size: clamp(28px, 3.3vw, 48px);
  line-height: 1.1;
  text-transform: capitalize;
  margin: 0 0 16px;
}
.hd-detect-copy p {
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  /* Figma: 20px. */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  max-width: 420px;
  margin: 0;
}

@media (max-width: 860px) {
  .hd-detect { flex-direction: column; padding: 40px 24px; text-align: center; }
  .hd-detect-images { width: 100%; max-width: 440px; flex-basis: auto; }
  .hd-detect-copy { flex-basis: auto; }
  .hd-detect-copy p { margin: 0 auto; }
}

/* ---------- FAQ - "We've got you covered" ---------- */
.hd-faq {
  background: var(--hd-coral);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.hd-faq-copy { flex: 1 1 540px; min-width: 0; }
.hd-faq-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--hd-black);
  font-size: clamp(32px, 4vw, 48px);
  text-transform: capitalize;
  margin: 0 0 20px;
}
.hd-faq-list { border-top: 1px solid var(--hd-black); }
.hd-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hd-black);
  /* Horizontal inset for the text/icon so they don't sit flush against
     the open-state tint's own edges - box-sizing:border-box (global,
     style.css) means this padding stays inside the button's existing
     100%-width border-box, so the border-bottom/top lines above and
     below it never move or change width. Same value regardless of
     aria-expanded, so nothing shifts when a question opens/closes. */
  padding: 14px 16px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  /* Figma: 20px. */
  font-size: 20px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* Fix 1: an open question's own border-bottom is removed - the divider
   between its answer and the next question is already provided by the
   "next question gets a top border" rule below, so this doesn't lose
   the separation, just the redundant second line directly under the
   open question itself. */
.hd-faq-question[aria-expanded="true"] {
  border-bottom-color: transparent;
  /* Fix 4: a slightly darker tint over the section's own coral
     background - not a separate flat color, so it stays correct if the
     section background ever changes. */
  background: rgba(11, 11, 11, 0.08);
}
/* Pure-CSS plus/minus, driven off the button's own aria-expanded state -
   no icon swapping in JS (assets/js/faq-accordion.js only ever toggles
   this attribute and the answer's [hidden]). Figma: 24px icon - up from
   18px. */
.hd-faq-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.hd-faq-icon::before,
.hd-faq-icon::after {
  content: "";
  position: absolute;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hd-faq-icon::before { width: 24px; height: 2px; }
.hd-faq-icon::after { width: 2px; height: 24px; transition: transform 0.15s ease; }
.hd-faq-question[aria-expanded="true"] .hd-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
/* When a question is open, the *next* question's heading gets its own
   top border - .hd-faq-question already has a border-bottom sitting
   above its own answer, but nothing previously separated an open
   answer from the question that follows it, just blank space. Matches
   automatically off the answer's real [hidden] state, no JS involved. */
.hd-faq-answer:not([hidden]) + .hd-faq-question { border-top: 1px solid var(--hd-black); }
/* Fix 2: real bottom padding, not just top - previously the answer's own
   box ended flush with the next question's border-top, reading as
   "nearly touching". Same 16px horizontal inset as the question above
   it, so the answer text lines up under the (now-indented) question
   text rather than sitting further left than it. */
.hd-faq-answer { padding: 14px 16px 28px; }
.hd-faq-answer p {
  font-family: var(--font-body);
  font-weight: 400;
  color: #fff;
  /* Figma: 18px, revised to 16px per direct feedback. */
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 480px;
}
/* Links to the full /faqs page (faqs.php) - every question shown here is
   only ever a subset (admin-curated via "Show on home page" per FAQ, see
   CLAUDE.md), so this is the way out to the complete list. Styled in
   --hd-black (matching the section heading, not the white question text)
   so it reads as its own distinct action rather than blending into the
   accordion list above it. */
.hd-faq-view-all {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--hd-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hd-faq-view-all:hover { opacity: 0.7; }
.hd-faq-visual { flex: 1 1 320px; min-width: 0; text-align: center; }
.hd-faq-visual img { width: 100%; height: auto; max-height: 380px; object-fit: contain; display: block; margin: 0 auto; }

@media (max-width: 860px) {
  .hd-faq { flex-direction: column; padding: 40px 24px; }
  .hd-faq-copy,
  .hd-faq-visual { flex-basis: auto; width: 100%; }
  .hd-faq-question { text-align: left; }
}

/* ---------- Closing CTA band ---------- */
/* Bug, fixed: margin-bottom:0 here was silently losing to the shared
   .home-design section rule below (class+type beats this single class,
   regardless of source order - the same specificity trap already caught
   twice elsewhere in this file). The 24px it fell back to had nothing
   under it to contain it (.home-design/.hd-container have no bottom
   padding), so it collapsed straight through and showed as a gap of the
   plain white body background between the black page content and the
   footer - "white gap below Get Started and the footer" was body
   showing through, not an actual white element. Qualified with
   .home-design here so this rule's specificity matches the one it needs
   to beat. */
.home-design .hd-closing-cta {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  padding: 40px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hd-closing-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  /* Figma: 60px. */
  font-size: clamp(32px, 4.2vw, 60px);
  text-transform: capitalize;
  margin: 0;
}
.hd-closing-cta-btn {
  display: inline-block;
  background: var(--hd-purple);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  /* Figma: 20px. */
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
}
.hd-closing-cta-btn:hover { filter: brightness(1.05); }