/* The home page's call back section (quote/callback/callback.js) and the picker
   in its hero. Reads the site tokens (site.css, docs/DESIGN.md). The form's
   fields reuse the quick quote's classes (quote/quick/quick.css), so the two
   forms look the same; this file adds the rows, the panel, the bottom sheet
   and the four time cards. Hairlines, 6px radius, no shadows but the sheet's
   edge, which is a hairline too. */

/* ---- hero: copy on the left, the picker on the right ---- */
.hero-grid2 { display: grid; gap: var(--s4, 32px); }
.hero-copy .lead { margin-bottom: 0; }
.hero-picker { min-width: 0; }
.home-picker { padding: 0; }
.home-picker .q-h { font-size: 1.5rem; margin-top: 0; }
.home-picker .q-lines { margin-top: 14px; }
.home-picker .q-alt a { color: var(--blue-500, #1A6BDB); font-weight: 600; }
#quote-picker, #call-back { scroll-margin-top: 88px; }
@media (min-width: 900px) {
  .hero-two { padding: var(--s6, 48px) 0; }
  .hero-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; gap: var(--s4, 32px) var(--s8, 64px); align-items: start; }
  .hero-copy { grid-area: 1 / 1 / 2 / 2; }
  .hero-grid2 .hero-licence { grid-area: 2 / 1 / 3 / 2; align-self: end; margin-top: 0; }
  .hero-picker { grid-area: 1 / 2 / 3 / 3; }
  .home-picker .q-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .hero-grid2 .hero-licence { margin-top: 0; }
}

/* ---- the rows: each one a button that says "Call me back" ---- */
.cb-sub { color: var(--muted, #4A5568); margin-bottom: var(--s3, 24px); }
.cb-rows li { margin: 0; }
.cb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s1, 8px) var(--s3, 24px); width: 100%;
  padding: var(--s2, 16px) 0; margin: 0; border: 0; background: none; color: var(--ink, #0F1B2D); font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius, 6px); }
.cb-row .row-main { display: block; min-width: 0; }
.cb-cta { color: var(--blue-500, #1A6BDB); font-weight: 600; white-space: nowrap; font-size: 1rem; }
.cb-row:hover .row-name, .cb-row[aria-expanded="true"] .row-name { color: var(--blue-500, #1A6BDB); }
.cb-row:hover .cb-cta { text-decoration: underline; text-underline-offset: 2px; }
.cb-row:focus-visible { outline: 3px solid var(--blue-500, #1A6BDB); outline-offset: 2px; }
.cb-row.is-press { animation: cb-press 160ms ease; }
@keyframes cb-press { 50% { transform: scale(.985); } }
@media (min-width: 768px) {
  .cb-row { grid-template-columns: minmax(200px, 16rem) minmax(0, 1fr) auto; padding: 20px 0; }
  .cb-row .row-main { display: contents; }
}

/* ---- the panel under the open row ---- */
.cb-panel { padding: 0 0 var(--s3, 24px); }
.cb-panel[hidden] { display: none; }
.cb-host { max-width: 640px; }
.cb-host[hidden] { display: none !important; }
.cb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2, 16px); margin: 0 0 var(--s2, 16px); }
.cb-title { margin: 0; font-family: var(--font-display, 'Source Serif 4', Georgia, serif); font-size: 1.375rem; font-weight: 600; line-height: 1.25; color: var(--blue-900, #0B2545); }
.cb-title:focus { outline: none; }
.cb-title:focus-visible { outline: 3px solid var(--blue-500, #1A6BDB); outline-offset: 4px; border-radius: var(--radius, 6px); }
.cb-close { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; padding: 0 10px; margin: -8px -10px 0 0; border: 0; border-radius: var(--radius, 6px);
  background: transparent; color: var(--muted, #4A5568); font: 600 1rem/1.2 var(--font-body, sans-serif); cursor: pointer; }
.cb-close .q-icon { width: 20px; height: 20px; }
.cb-close:hover { background: var(--blue-100, #E6F0FB); color: var(--blue-900, #0B2545); }
.cb-close:focus-visible { outline: 3px solid var(--blue-500, #1A6BDB); outline-offset: 2px; }
.cb-optional { font-weight: 400; color: var(--muted, #4A5568); }
.cb-note { min-height: 88px; resize: vertical; line-height: 1.45; }
.cb-host .qq-fields { gap: var(--s2, 16px); }
.cb-host .qq-actions .btn { width: 100%; }
@media (min-width: 600px) { .cb-host .qq-actions .btn { width: auto; min-width: 220px; } }

/* The four time cards: real radio buttons laid over each card, so the whole card is the hit area and focus lands on the control. */
.cb-times-set { margin: var(--s2, 16px) 0 0; padding: 0; border: 0; min-width: 0; }
.cb-times-set legend { padding: 0; margin: 0 0 6px; }
.cb-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .cb-times { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cb-time { position: relative; display: block; cursor: pointer; }
.cb-time input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cb-time-box { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 8px; background: #fff;
  border: 1px solid var(--line, #D7E1EE); border-radius: var(--radius, 6px); color: var(--ink, #0F1B2D); font-weight: 600; text-align: center;
  transition: border-color var(--ease, 150ms ease), background-color var(--ease, 150ms ease); }
@media (hover: hover) { .cb-time:hover .cb-time-box { border-color: var(--blue-500, #1A6BDB); } }
.cb-time input:checked + .cb-time-box { padding: 9px 7px; border: 2px solid var(--blue-500, #1A6BDB); background: var(--blue-100, #E6F0FB); }
.cb-time input:focus-visible + .cb-time-box { outline: 3px solid var(--blue-500, #1A6BDB); outline-offset: 2px; }
.cb-time input[aria-invalid="true"] + .cb-time-box { border-color: var(--error, #B42318); }
.cb-time-check { display: inline-flex; width: 18px; height: 18px; opacity: 0; color: var(--blue-500, #1A6BDB); }
.cb-time-check .q-icon { width: 18px; height: 18px; stroke-width: 2.4; }
.cb-time input:checked + .cb-time-box .cb-time-check { opacity: 1; }
.cb-time.is-press .cb-time-box { animation: cb-press 160ms ease; }

/* ---- after sending ---- */
.cb-done-text { margin: 0; font-size: 1.125rem; }
.cb-done-text a { font-weight: 600; }

/* ---- the Turnstile box: nothing to see unless Cloudflare needs a click ---- */
.cb-turnstile:empty, .cb-turnstile[hidden] { display: none; }
.cb-turnstile { margin-top: var(--s2, 16px); }

/* ---- phones: the open panel is a bottom sheet ---- */
.cb-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(15, 27, 45, .4); cursor: pointer; }
.cb-backdrop[hidden] { display: none; }
html.cb-sheet-open { overflow: hidden; }
.cb-host.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; max-width: none; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
  overflow-y: auto; padding: var(--s2, 16px) var(--s2, 16px) calc(var(--s3, 24px) + env(safe-area-inset-bottom, 0px)); background: #fff;
  border-top: 1px solid var(--line, #D7E1EE); border-radius: 12px 12px 0 0; animation: cb-rise 220ms ease; }
.cb-host.is-sheet .cb-head { position: sticky; top: 0; z-index: 1; background: #fff; padding: 4px 0 8px; margin: -4px 0 var(--s1, 8px); }
@keyframes cb-rise { from { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cb-host, .cb-host *, .cb-row { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .cb-time input:checked + .cb-time-box { border: 3px solid Highlight; padding: 8px 6px; }
  .cb-row[aria-expanded="true"] { outline: 1px solid CanvasText; }
}