/* ============================================================================
   HAWAII VIRTUAL CARE — brand tokens and widget styling for Elementor
   ----------------------------------------------------------------------------
   Paste this into  Elementor → Site Settings → Custom CSS  (or enqueue it from
   the child theme). The generated page templates reference these classes by
   name, so importing a template WITHOUT this file gives you correct copy in
   Elementor's default typography — readable, but not the brand.

   SOURCE OF TRUTH for every value here is the site's own app/globals.css,
   which in turn takes them from the kit's 06_Web_Tokens/hvc-brand-tokens.json.
   These are the kit's authored values. Do not sample them off artwork.

   ── THE ACCESSIBILITY CONTRACT ──────────────────────────────────────────────
   The Next.js site enforces these at BUILD TIME (`npm run contrast` fails the
   build, and the image component throws if text sits on an unregistered
   photograph). WordPress has no equivalent. Once the site lives here these stop
   being enforced and become rules a human has to hold:

     ink on sand        12.67:1  AAA   display headlines
     deep on sand       11.57:1  AAA   body copy
     lagoon on sand      5.26:1  AA    secondary copy
     white on deep      13.10:1  AAA   reversed sections
     coral on sand       2.90:1  FAIL  ⚠ CORAL IS NEVER TEXT. Graphic only.
     ink on coral        4.37:1  UI    passes for an icon glyph, FAILS for text
     sea-glass on sand   2.22:1  FAIL  decorative shapes only, never type
     sea-glass on photo  3.38:1  FAIL  ⚠ banned over photography entirely

   Legibility floor is 14px. The 13px eyebrow is the ONE documented exception.
   Text over a photograph needs a scrim at 0.85 or the copy drops below AA —
   over photos the eyebrow is white and secondary copy is mist, never sea-glass.
   ========================================================================== */

:root {
  /* grounds */
  --hvc-sand: #f6f0e8;
  --hvc-sand-light: #fbf8f3;

  /* teal ramp */
  --hvc-deep: #003548;
  --hvc-deep-teal: #0f434d;
  --hvc-lagoon: #2d6c78;
  --hvc-sea-glass: #75adad;
  --hvc-mist: #aacccb;

  /* accent — graphic use only on light grounds */
  --hvc-coral: #f25e26;
  --hvc-coral-soft: #f5744c;

  /* type */
  --hvc-ink: #102e35;

  --hvc-radius-card: 24px;
  --hvc-shell-x: clamp(1.25rem, 5vw, 5.5rem);

  --hvc-font-display: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --hvc-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Depth. A single big blur reads as a smudge; real lift is stacked. */
  --hvc-shadow-soft:
    0 1px 2px rgba(16, 46, 53, 0.07),
    0 4px 10px rgba(0, 53, 72, 0.07),
    0 16px 32px rgba(0, 53, 72, 0.09),
    0 36px 64px rgba(0, 53, 72, 0.08);
  --hvc-edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.hvc-section {
  padding-inline: var(--hvc-shell-x) !important;
}

.hvc-ground-sand { background-color: var(--hvc-sand); }
.hvc-ground-sand-light { background-color: var(--hvc-sand-light); }
.hvc-ground-deep { background-color: var(--hvc-deep); }
.hvc-ground-deep-teal { background-color: var(--hvc-deep-teal); }
.hvc-ground-lagoon { background-color: var(--hvc-lagoon); }
.hvc-ground-mist { background-color: var(--hvc-mist); }
.hvc-ground-ink { background-color: var(--hvc-ink); }

/* Reversed grounds. White clears 13.10:1 on deep; mist is the secondary. */
.hvc-on-dark .hvc-display .elementor-heading-title,
.hvc-on-dark .hvc-subhead .elementor-heading-title { color: #ffffff; }
.hvc-on-dark .hvc-body,
.hvc-on-dark .hvc-body p,
.hvc-on-dark .hvc-bullets .elementor-icon-list-text { color: var(--hvc-mist); }
.hvc-on-dark .hvc-eyebrow .elementor-heading-title { color: var(--hvc-mist); }

/* ── Type ─────────────────────────────────────────────────────────────────── */

/* The eyebrow is the ONE documented exception to the 14px floor. */
.hvc-eyebrow .elementor-heading-title {
  font-family: var(--hvc-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hvc-lagoon);
  margin: 0;
}

.hvc-display .elementor-heading-title {
  font-family: var(--hvc-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--hvc-ink);
  text-wrap: balance;
}

/* h1 and h2 both carry .hvc-display; the tag decides the size. */
.hvc-display h1.elementor-heading-title { font-size: clamp(2.9rem, 6.4vw, 5.6rem); }
.hvc-display h2.elementor-heading-title { font-size: clamp(2.5rem, 4.6vw, 4.4rem); }

.hvc-subhead .elementor-heading-title {
  font-family: var(--hvc-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hvc-ink);
}

/* Body copy on light grounds is LAGOON (5.26:1), 1rem/1.625 — measured off the live site.
   Vertical rhythm comes from each element's authored margin (mt-*), emitted per widget;
   the paragraphs inside one editor keep the live 0.75rem stack. */
/* Metrics sit on the WIDGET (so an emitted lead size — 1.2rem/1.625 — wins); the <p> only inherits. */
.hvc-body {
  font-family: var(--hvc-font-body);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--hvc-lagoon);
}
.hvc-body p { margin: 0; max-width: 46rem; font: inherit; color: inherit; }
.hvc-body p + p { margin-top: 0.75rem; }
.elementor-widget:not(:last-child) { margin-block-end: 0; } /* rhythm is per-widget margin-top */

/* Display + subhead metrics, measured: leading 0.98, tracking -0.033em; h3 leading 1.4. */
.hvc-display .elementor-heading-title { line-height: 0.98; letter-spacing: -0.033em; text-wrap: balance; }
.hvc-subhead .elementor-heading-title { line-height: 1.4; }
/* Eyebrow: 600, 13px, leading 1.5; page-header eyebrow tracks 0.16em, section eyebrows 0.22em. */
.hvc-eyebrow .elementor-heading-title { font-weight: 600; line-height: 1.5; }
.hvc-eyebrow-section .elementor-heading-title { letter-spacing: 0.22em; }
/* Buttons: 14px on a 20px line. On DARK grounds the primary inverts (white pill, deep text). */
.elementor-widget-button.hvc-btn .elementor-button { line-height: 1.4286; }
.hvc-on-dark .elementor-widget-button.hvc-btn-primary .elementor-button { background: #ffffff; background-color: #ffffff; color: var(--hvc-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.elementor-widget-button.hvc-link .elementor-button { line-height: 1.4286; letter-spacing: 0.14em; }
/* Bullets: 16px between items (space-y-4), no icon-list default spacing. */
.hvc-bullets .elementor-icon-list-items { display: grid; gap: 1rem; }
.hvc-bullets .elementor-icon-list-item { margin: 0 !important; padding: 0; }
/* Definition list + FAQ + captions, measured. */
.elementor-widget .hvc-deflist dt { line-height: 1.556; }
.elementor-widget .hvc-deflist dd { line-height: 1.625; }
/* Eyebrows inside cards keep the page-header tracking; only SectionHead eyebrows widen. */
.hvc-card .hvc-eyebrow-section .elementor-heading-title { letter-spacing: 0.16em; }
.hvc-faq .elementor-tab-title { line-height: 1.55; }
.hvc-faq .elementor-tab-content p { line-height: 1.625; margin: 0.75rem 0 0; }

.hvc-caption p {
  font-size: 0.875rem;
  color: var(--hvc-lagoon);
}

/* The coral full stop that closes a headline. Graphic, not text — it carries
   no meaning, so its 2.90:1 against sand is acceptable where a word is not. */
.hvc-display .hvc-stop { color: var(--hvc-coral); }
/* The composed question mark: a "?" whose lower 30% is coral (two clipped copies). */
.hvc-qstop { position: relative; display: inline-block; }
.hvc-qstop > span:first-child { clip-path: inset(0 0 30% 0); }
.hvc-qstop .hvc-qstop-dot { position: absolute; inset: 0; color: var(--hvc-coral); clip-path: inset(70% 0 0 0); }
.hvc-qstop .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ── Photograph as a section ground ──────────────────────────────────────── */
/* The generator sets the exact registered scrim per section through Elementor
   Pro's per-element Custom CSS. This is the fallback for a site without Pro:
   the 0.85 deep plateau held across 62% (the widest registered text zone),
   then falling away — never a gradient that starts fading UNDER the copy. */
.hvc-photo-band { position: relative; isolation: isolate; }
.hvc-photo-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 53, 72, 0.85) 0%, rgba(0, 53, 72, 0.85) 62%, rgba(0, 53, 72, 0.357) 100%);
}
.hvc-photo-band > .e-con-inner, .hvc-photo-band > .elementor-element { position: relative; z-index: 1; }
/* Over a photograph the eyebrow is WHITE, not mist and never sea-glass (PageHeader). */
.hvc-photo-band .hvc-eyebrow .elementor-heading-title { color: #ffffff; }
.hvc-photo-band .hvc-display .elementor-heading-title { color: #ffffff; }

/* ── Lists ────────────────────────────────────────────────────────────────── */

.hvc-bullets .elementor-icon-list-item {
  align-items: flex-start;
  gap: 12px;
}

.hvc-bullets .elementor-icon-list-item::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.6em;
  border-radius: 999px;
  background: var(--hvc-coral);
}

.hvc-bullets .elementor-icon-list-icon { display: none; }

.hvc-bullets .elementor-icon-list-text {
  font-family: var(--hvc-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hvc-deep);
}

/* ⚠️ NO CSS COUNTER HERE, deliberately. Every ordered list on this site bakes
   its own "01"…"04" into the content, so a `counter()` would render the number
   twice. If a future list needs generated numbering, add a separate class for
   it rather than putting a counter back on this one. */
.hvc-steps ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.hvc-steps ol li {
  margin-bottom: 1.5rem;
  color: var(--hvc-deep);
  line-height: 1.7;
}

/* Numbered step cards — the four-up "how it works" grid. */
.hvc-step-row { align-items: flex-start; }
.hvc-step-row > .hvc-step { flex: 1 1 14rem; }

.hvc-step-number .elementor-heading-title {
  font-family: var(--hvc-font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  /* mist on sand is decorative-weight contrast, which is correct here: the
     number is a visual marker and the step is fully readable without it. */
  color: var(--hvc-mist);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.hvc-card {
  background: var(--hvc-sand-light);
  border-radius: var(--hvc-radius-card);
  box-shadow: var(--hvc-shadow-soft), var(--hvc-edge-light);
}

.hvc-ground-sand-light .hvc-card { background: #ffffff; }

.hvc-card-row { align-items: stretch; }
.hvc-card-row > .hvc-card { flex: 0 0 auto; } /* width comes from the emitted column share */

/* ── Grid rows (Split copy|photo, header-first articles, item grids) ─────── */
.hvc-grid > .e-con { min-width: 0; }
/* Split `flip`: photo first on desktop, copy first below it (the live site's lg:order-2). */
@media (min-width: 1025px) { .hvc-grid-flip > .e-con.hvc-col-0 { order: 2; } }
.hvc-col .hvc-figure { width: 100%; }

.hvc-figure img {
  border-radius: var(--hvc-radius-card);
  box-shadow: var(--hvc-shadow-soft);
  display: block;
  width: 100%;
  height: auto;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.elementor-widget-button.hvc-btn .elementor-button {
  border-radius: 999px;
  padding: 1rem 2rem;
  font-family: var(--hvc-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;
}

.elementor-widget-button.hvc-btn .elementor-button:hover { transform: translateY(-2px); }

.elementor-widget-button.hvc-btn-primary .elementor-button {
  background: var(--hvc-deep);
  background-color: var(--hvc-deep);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 53, 72, 0.35);
}

.elementor-widget-button.hvc-btn-primary .elementor-button:hover { box-shadow: 0 10px 26px rgba(0, 53, 72, 0.42); }

.elementor-widget-button.hvc-btn-secondary .elementor-button {
  background: transparent;
  background-color: transparent;
  color: var(--hvc-deep);
  border: 2px solid var(--hvc-deep);
}

.hvc-on-dark .elementor-widget-button.hvc-btn-secondary .elementor-button {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ── Cross-links ──────────────────────────────────────────────────────────── */
/* The site's internal linking wheels. These are text links, not buttons —
   uppercase, tracked, with a trailing arrow. Keep them: the SEO plan's
   two-clicks-to-anywhere rule is built on them. */

.elementor-widget-button.hvc-link .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  background: transparent;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 44px;
  font-family: var(--hvc-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hvc-deep);
}

.elementor-widget-button.hvc-link .elementor-button::after {
  content: "→";
}

.hvc-on-dark .elementor-widget-button.hvc-link .elementor-button { color: var(--hvc-mist); }

/* ── Definition list (the insurance glossary) ─────────────────────────────── */

.hvc-deflist {
  display: grid;
  gap: 2rem 3rem;
  margin: 0;
  max-width: 62rem;
}

@media (min-width: 768px) {
  .hvc-deflist { grid-template-columns: 1fr 1fr; }
}

.hvc-deflist dt {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hvc-ink);
}

.hvc-deflist dd {
  margin: 0.5rem 0 0;
  line-height: 1.7;
  color: var(--hvc-lagoon);
}

/* ── Intake form placeholder ──────────────────────────────────────────────── */
/* Deliberately loud. This is a spec, not a form — see the README. If this
   block is still visible on a staging build, the form has not been built yet,
   which is the correct state until a BAA-covered endpoint exists. */

.hvc-form-spec .hvc-form-placeholder {
  border: 2px dashed var(--hvc-coral);
  border-radius: var(--hvc-radius-card);
  padding: 1.5rem;
  background: rgba(242, 94, 38, 0.04);
}

.hvc-form-spec .hvc-form-placeholder > p {
  /* ink on this tint measures well above 4.5:1 — the coral is the border and
     a 4% wash, never the type. */
  color: var(--hvc-ink);
  margin-top: 0;
}

/* ── FAQ accordion ────────────────────────────────────────────────────────── */

.elementor-widget-accordion.hvc-faq .elementor-accordion-item {
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 53, 72, 0.15) !important;
  background: transparent;
}
.elementor-widget-accordion.hvc-faq .elementor-tab-title { background: transparent; padding: 1.25rem 0; }
.elementor-widget-accordion.hvc-faq .elementor-tab-title .elementor-accordion-icon { color: var(--hvc-deep); font-size: 0.85rem; }
.elementor-widget-accordion.hvc-faq .elementor-tab-content { border: 0 !important; padding: 0 0 1.25rem; background: transparent; }
.hvc-btn-row { flex-wrap: wrap; }
/* Icon chips (the live site's round sprite badges on cards + feature rows). Coral chips carry
   an icon GLYPH only — ink on coral is 4.37:1, fine for a glyph, never for text. */
.hvc-chip { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 999px; }
.hvc-chip svg { height: 20px; width: 20px; }
.hvc-chip-deep { background: var(--hvc-deep); } .hvc-chip-mist { background: var(--hvc-mist); } .hvc-chip-coral { background: var(--hvc-coral); }
.hvc-chip-sand { background: var(--hvc-sand); } .hvc-chip-sand-light { background: var(--hvc-sand-light); } .hvc-chip-white { background: #fff; }
.hvc-chip-fg-white { color: #fff; } .hvc-chip-fg-deep { color: var(--hvc-deep); } .hvc-chip-fg-ink { color: var(--hvc-ink); } .hvc-chip-fg-lagoon { color: var(--hvc-lagoon); }
.hvc-card-sand { background: var(--hvc-sand) !important; }
.hvc-card-sand-light { background: var(--hvc-sand-light) !important; }
.hvc-card-white { background: #ffffff !important; }

.hvc-faq .elementor-tab-title {
  background: transparent;
  padding: 1.25rem 0;
  font-family: var(--hvc-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hvc-ink);
}

.hvc-faq .elementor-tab-content {
  background: transparent;
  border: 0;
  padding: 0 0 1.25rem;
  /* lagoon on sand-light measures 5.62:1 — comfortably over the 4.5 floor.
     It measured 4.68:1 when these answers sat on the pattern tile, which is
     why the tile was retired rather than re-tinted. */
  color: var(--hvc-lagoon);
  line-height: 1.7;
  max-width: 46rem;
}

/* ── Comparison table ─────────────────────────────────────────────────────── */

.hvc-table-scroll { overflow-x: auto; }

.hvc-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  text-align: left;
}

.hvc-table thead th {
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--hvc-lagoon);
}

/* The middle column is the one being sold; it gets the darker ground. */
.hvc-table thead th:nth-child(3) { background: var(--hvc-deep); }

.hvc-table tbody tr { border-bottom: 1px solid rgba(0, 53, 72, 0.15); }

.hvc-table tbody th {
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hvc-ink);
}

.hvc-table tbody td { padding: 1rem; color: var(--hvc-deep); }
.hvc-table tbody td:nth-child(3) { background: var(--hvc-sand); font-weight: 600; }

/* ── Fonts ────────────────────────────────────────────────────────────────── */
/* The live site self-hosts these through next/font. On WordPress, either use
   an Elementor Custom Font upload (preferred — no third-party request) or the
   Google Fonts loader. Weights actually used: Figtree 700, Inter 400/600/700. */