/* Component CSS for the Warm Care patterns.
   Only what theme.json cannot express. Everything colour- or type-related reads
   from the theme.json presets so the editor stays the single source of truth. */

/* ---------- Hero slideshow ----------
   Mirrors the rotating banner on VN's previous site. Every source photograph is
   960x300 (16:5); the container holds that exact ratio so nothing is ever cropped.
   Forcing these into taller boxes cuts through people's faces. */
.vnhh-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--wp--preset--color--paper-soft);
}
.vnhh-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  margin: 0;
  transition: opacity 1100ms ease-in-out;
}
.vnhh-slides img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vnhh-slides img { transition: none; }
}

/* ---------- Credential line ----------
   The four credentials that would otherwise want a four-up icon grid. One line,
   no boxes. */
.vnhh-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink-muted);
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.vnhh-creds li { display: inline-flex; align-items: center; gap: 0.65rem; margin: 0; }
.vnhh-creds li + li::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--wp--preset--color--marigold);
  flex-shrink: 0;
}

/* ---------- Services ----------
   One lead service with a photograph, the rest as a typographic list. Six
   identical cards is the layout that made the old design read as templated. */
.vnhh-svc-list { list-style: none; margin: 0; padding: 0; }
.vnhh-svc-list li {
  display: grid;
  grid-template-columns: minmax(12rem, 22rem) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(1.4rem, 2.5vw, 1.9rem) 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  margin: 0;
}
.vnhh-svc-list h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin: 0;
}
.vnhh-svc-list p { font-size: 1rem; margin: 0; color: var(--wp--preset--color--ink-soft); }

/* ---------- Why: three columns, no icons, no boxes ---------- */
.vnhh-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.vnhh-why > div { border-top: 2px solid var(--wp--preset--color--ink); padding-top: 1.35rem; }
.vnhh-why h4 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.vnhh-why p { font-size: 0.98rem; margin: 0; color: var(--wp--preset--color--ink-soft); }

/* ---------- Proof: one review at full size, linked out to Google ---------- */
.vnhh-proof { max-width: 48rem; margin: 0 auto; text-align: center; }
.vnhh-proof blockquote {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.vnhh-proof figcaption { display: flex; flex-direction: column; gap: 0.2rem; }
.vnhh-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin: 0 0 1.75rem; font-size: 0.95rem; color: var(--wp--preset--color--ink-soft);
}
.vnhh-badge .stars { color: var(--wp--preset--color--marigold); letter-spacing: 0.1em; font-size: 1.05rem; }

/* ---------- Language wall: the signature element ----------
   Eight languages is the one thing a national chain cannot copy, so it gets the
   boldest treatment on the page — the real scripts, at size. */
.vnhh-langs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  padding: 0;
  /* Clears the standfirst above — without it the first row's rule reads as an
     underline on that sentence rather than the top edge of the grid. */
  margin: 1.75rem 0 0;
}
.vnhh-langs li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  border-top: 1px solid rgba(251, 250, 249, 0.18);
  margin: 0;
}
.vnhh-langs .native {
  font-family: var(--wp--preset--font-family--display), 'Noto Sans', 'Hiragino Sans',
               'PingFang SC', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.vnhh-langs .en {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--wp--preset--color--marigold-soft);
}

/* ---------- Service-area map ---------- */
.vnhh-map { width: 100%; height: auto; display: block; overflow: visible; }
.vnhh-map .scc-bg { fill: var(--wp--preset--color--jade-soft); stroke: #c6dad2; stroke-width: 1.25; pointer-events: none; }
.vnhh-map .region {
  fill: var(--wp--preset--color--paper);
  stroke: var(--wp--preset--color--line);
  stroke-width: 1;
  cursor: pointer;
  transform-origin: center;
  transition: fill .18s ease, stroke .18s ease, opacity .18s ease, transform .18s ease;
}
.vnhh-map:hover .region, .vnhh-map:focus-within .region { opacity: .5; }
.vnhh-map .region:hover, .vnhh-map .region:focus-visible, .vnhh-map .region.is-active {
  opacity: 1;
  fill: var(--wp--preset--color--jade);
  stroke: var(--wp--preset--color--jade);
  stroke-width: 1.5;
  transform: scale(1.02);
  outline: none;
}
.vnhh-map .region[data-name="San Jose"] { fill: var(--wp--preset--color--marigold-soft); stroke: #e0a862; }
.vnhh-map .region[data-name="San Jose"]:hover,
.vnhh-map .region[data-name="San Jose"].is-active { fill: var(--wp--preset--color--marigold); stroke: var(--wp--preset--color--marigold-deep); }

/* City names as real, selectable, indexable text beside the map — SVG labels are
   none of those things, which matters for a business whose market IS these cities. */
.vnhh-cities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: 1rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.vnhh-cities li { margin: 0; }
.vnhh-cities span {
  font-size: .95rem;
  color: var(--wp--preset--color--ink-soft);
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.vnhh-cities span:hover, .vnhh-cities span.is-active {
  color: var(--wp--preset--color--jade);
  border-bottom-color: currentColor;
}

@media (max-width: 900px) {
  .vnhh-why { grid-template-columns: 1fr; gap: 1.75rem; }
  .vnhh-langs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .vnhh-svc-list li { grid-template-columns: 1fr; gap: .4rem; }
  .vnhh-langs { grid-template-columns: 1fr; }
  .vnhh-creds { gap: .5rem 1.25rem; font-size: .85rem; }
}

/* ---------- Inline accent colour in headings ----------
   The editor emits <mark> for inline colour. Browsers give <mark> a yellow
   highlight by default, which turned the hero accent into a highlighter stripe.
   The colour itself still comes from the block, so this only kills the default. */
:where(h1, h2, h3, h4, .wp-block-heading) mark {
  background: transparent;
  background-color: transparent;
}

/* ---------- Measure utilities ----------
   WordPress's constrained layout centres content at contentSize, and its
   .alignwide rule forces max-width to the wide size. The design instead
   left-aligns text against the container edge with its own measure, which is
   why the WP build started 200px further in and read narrower.

   The selectors are deliberately specific: a bare .vnhh-lead loses to the
   generated .is-layout-constrained > .alignwide rule. */
.wp-block-group.vnhh-lead,
.wp-block-group.vnhh-head {
  /* !important is deliberate. WordPress generates
     `.is-layout-constrained > .alignwide { margin-left:auto; margin-right:auto }`
     at equal specificity but later in the cascade, so it wins on ties. These
     classes exist purely to override that centring, so forcing is the honest
     fix rather than inventing a deeper selector that breaks on a WP update. */
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  /* These blocks are `alignwide`, so their box is the 1240px wide rail while
     every sibling sits on the 1160px content rail — the same rail the header
     and footer use. The inset below is what puts them back on it.

     It has to be measured, not a fixed 40px: above 1240px the wide rail really
     is 80px wider than the content rail, but below 1240px both collapse to the
     same root-padded width and the gap closes. A fixed inset pushed every
     section heading 40px right of the header logo on any window under 1240px.
     `100%` here is the parent's content width, so this resolves to 40px at full
     width and to 0 once the rails converge. */
  padding-inline-start: max(0px, calc((100% - 1160px) / 2));
}
.wp-block-group.vnhh-lead { max-width: calc(54rem + max(0px, (100% - 1160px) / 2)); }
.wp-block-group.vnhh-head { max-width: calc(44rem + max(0px, (100% - 1160px) / 2)); }
.wp-block-group.vnhh-lead > *,
.wp-block-group.vnhh-head > * { margin-inline: 0; }
.wp-block-group.vnhh-lead > p { max-width: 40rem; }

/* ---------- Site header ----------
   The brand lockup, the expanded menu and the phone button only fit on one row
   above ~1200px. Below that the site title was wrapping onto a second line and
   the button was dropping under the menu, which doubled the header height and
   broke its alignment with the page below — on every window between 600px and
   1150px, which is most laptops. */
header .wp-block-site-title,
header .wp-block-site-title a { white-space: nowrap; }

/* The phone number is the conversion on this site — never let it wrap. */
header .wp-block-button__link { white-space: nowrap; }

/* Below ~700px the brand, the menu toggle and the phone button stop fitting on
   one line. Let the row wrap so the toggle and the button drop together onto a
   second right-aligned row, instead of the button being squeezed into a circle
   of wrapped text beside an over-wide brand. */
@media (max-width: 700px) {
  header.wp-block-group > .wp-block-group { flex-wrap: wrap; }
  /* Once it wraps it is alone on its line, so let it fill that line — the outer
     row's space-between would otherwise park it on the left. */
  header.wp-block-group > .wp-block-group > .wp-block-group:last-child {
    flex: 1 1 auto;
    /* ...and push the two apart. Inheriting the block's right-justification put
       both on the right edge, which left the menu toggle stranded in the middle
       of the row with dead space beside it. Toggle hard left, call button hard
       right, which is what a phone header is expected to do. */
    justify-content: space-between;
  }
}

/* Core only swaps the menu for the overlay toggle below 600px. Raise that to
   1200px, where the row actually runs out of room. Both selectors mirror
   core's own (same specificity, later in the cascade). */
@media (max-width: 1199px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* ---------- Interior page head ---------- */
.vnhh-pagehead {
  background: var(--wp--preset--color--jade-soft);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.vnhh-pagehead .eyebrow {
  display: block;
  font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wp--preset--color--jade); margin-bottom: .6rem;
}
/* `auto` inline margins, not 0: this rule's type selector outranks the
   `.vnhh-pagehead > *` measure rule below, so a `margin: 0 0 .75rem` shorthand
   here pinned the capped heading to the left of the band instead of centring
   it under the eyebrow. */
.vnhh-pagehead h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin: 0 auto .75rem; }
.vnhh-pagehead p { max-width: 44rem; margin: 0 auto; color: var(--wp--preset--color--ink-soft); }

/* ---------- Story pull-quote ---------- */
.vnhh-pullquote {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.35; letter-spacing: -0.02em;
  color: var(--wp--preset--color--ink);
  border: 0; margin: 2rem 0 0; padding: 0;
}
.vnhh-pullquote cite {
  display: block; margin-top: 1rem; font-family: var(--wp--preset--font-family--body);
  font-size: .8rem; font-weight: 600; font-style: normal;
  text-transform: uppercase; letter-spacing: .16em; color: var(--wp--preset--color--ink-muted);
}

/* ---------- Trust row ---------- */
.vnhh-trust {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.vnhh-trust li { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.vnhh-trust strong { font-weight: 700; color: var(--wp--preset--color--ink); }
.vnhh-trust span { font-size: .85rem; color: var(--wp--preset--color--ink-soft); }

/* ---------- Language chips (interior pages) ---------- */
.vnhh-langchips {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.vnhh-langchips li {
  margin: 0; padding: .5rem 1rem; border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; font-size: .95rem; background: var(--wp--preset--color--paper);
}
.vnhh-langchips span { color: var(--wp--preset--color--ink-muted); }

/* ---------- Service area: office card + map card ---------- */
.vnhh-area { display: grid; grid-template-columns: .85fr 1.4fr; gap: 2rem; align-items: start; margin-top: 2rem; }
.vnhh-office, .vnhh-mapcard {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
}
.vnhh-office { padding: 1.85rem; }
.vnhh-mapcard { padding: 1.25rem; }
.vnhh-office .tag, .vnhh-mapcard .tag {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wp--preset--color--jade); margin-bottom: .6rem;
}
.vnhh-office h3 { font-size: 1.35rem; margin: 0 0 .4rem; }
.vnhh-office p { color: var(--wp--preset--color--ink-soft); margin: 0 0 .85rem; line-height: 1.55; }
.vnhh-office .phone { display: inline-block; font-weight: 700; color: var(--wp--preset--color--marigold-deep); font-size: 1.12rem; margin-bottom: .85rem; }
.vnhh-office .hours { font-size: .9rem; color: var(--wp--preset--color--ink-muted); }
.vnhh-mapcard .maphead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.vnhh-mapcard .readout { font-size: .92rem; font-weight: 600; color: var(--wp--preset--color--jade); }

/* ---------- Referral steps ---------- */
.vnhh-steps {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem;
}
.vnhh-steps li {
  margin: 0; padding: 1.75rem; background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line); border-radius: 16px;
}
.vnhh-steps .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wp--preset--color--jade); color: var(--wp--preset--color--paper);
  font-weight: 700; margin-bottom: 1rem;
}
.vnhh-steps h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.vnhh-steps p { margin: 0; font-size: .95rem; color: var(--wp--preset--color--ink-soft); }

/* ---------- Resources ---------- */
.vnhh-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.vnhh-res-card {
  padding: 1.75rem; border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px; background: var(--wp--preset--color--paper);
}
.vnhh-res-card h3 { font-size: 1.1rem; margin: 0 0 .75rem; }
.vnhh-res-card ul { list-style: none; margin: 0; padding: 0; }
.vnhh-res-card li { margin-bottom: .55rem; }
.vnhh-res-note { margin-top: 2rem; font-size: .95rem; color: var(--wp--preset--color--ink-muted); }

/* ---------- Contact ---------- */
.vnhh-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.vnhh-contact-card {
  padding: 1.75rem; border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px; background: var(--wp--preset--color--paper);
}
.vnhh-contact-card .tag {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wp--preset--color--jade); margin-bottom: .5rem;
}
.vnhh-contact-card .big {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem;
}
.vnhh-contact-card p { margin: 0; font-size: .95rem; color: var(--wp--preset--color--ink-soft); }
.vnhh-hours { margin-top: 2rem; max-width: 34rem; }
.vnhh-hours h3 { font-size: 1.1rem; margin: 0 0 .75rem; }
.vnhh-hours .row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.vnhh-hours .row:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .vnhh-trust, .vnhh-steps, .vnhh-res { grid-template-columns: 1fr; }
  .vnhh-area { grid-template-columns: 1fr; }
  .vnhh-contact { grid-template-columns: 1fr; }
}

/* ---------- Services page grid ---------- */
.vnhh-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.vnhh-svc-grid article {
  padding: 1.85rem; border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px; background: var(--wp--preset--color--paper);
}
.vnhh-svc-grid article.is-featured { background: var(--wp--preset--color--jade-soft); border-color: #c6dad2; }
.vnhh-svc-grid .tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wp--preset--color--jade); margin-bottom: .6rem;
}
.vnhh-svc-grid h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.vnhh-svc-grid p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--wp--preset--color--ink-soft); }

/* Contact card labels are headings for semantics; keep the small-label look. */
.vnhh-contact-card h3.tag { font-size: .78rem; font-weight: 600; margin: 0 0 .5rem; }

@media (max-width: 900px) { .vnhh-svc-grid { grid-template-columns: 1fr; } }

/* Full-bleed bands reach the viewport edge; their contents sit on the same
   1160px measure as every other section so the page has one vertical rhythm. */
.wp-block-group.alignfull > .vnhh-trust,
.vnhh-pagehead > * {
  /* max-width caps the content box (nothing here sets border-box), so the
     measure stays 1160px and the padding adds the page gutter outside it. With
     the previous `padding-inline: 0` these bands ran flush to the screen edge
     below 1240px while the header kept its gutter. */
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
/* Root-padding-aware alignments add gutters to alignfull groups; a full-bleed
   colour band must reach the edges, so the inner list carries the gutter. */
.wp-block-group.vnhh-band { padding-inline: 0 !important; }

/* ---------- Component measures, matched to the concept ----------
   These sit on narrower measures than the 1160 section width; the numbers are
   taken from the concept rather than invented. */
.vnhh-slides.alignfull { max-width: 1240px; margin-inline: auto; }
.vnhh-area    { max-width: 62rem; margin-inline: auto; }  /* 992px  */
.vnhh-res     { max-width: 62rem; margin-inline: auto; }  /* 992px  */
.vnhh-res-note{ max-width: 62rem; margin-inline: auto; }
.vnhh-contact { max-width: 52rem; margin-inline: auto; }  /* 832px  */
.vnhh-hours   { max-width: 52rem; margin-inline: auto; }

/* ---------- Footer ---------- */
.vnhh-foot-sub { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.vnhh-foot-list { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.vnhh-foot-list li { margin-bottom: .5rem; }
.vnhh-foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(251,250,249,.18);
  font-size: .82rem; opacity: .75;
}
.vnhh-foot-bottom .meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.vnhh-foot-social { display: flex; gap: .9rem; margin: .5rem 0 0; }
.vnhh-foot-social a { display: inline-flex; opacity: .8; transition: opacity .2s ease; }
.vnhh-foot-social a:hover, .vnhh-foot-social a:focus-visible { opacity: 1; }
.vnhh-foot-social svg { width: 20px; height: 20px; }

/* Single closing link under the services list */
.vnhh-more { font-size: clamp(1.6rem, 2.6vw, 2.05rem); font-weight: 700; color: var(--wp--preset--color--jade); text-decoration: none; border-bottom: 2px solid transparent; }
.vnhh-more:hover { border-bottom-color: currentColor; }

/* Hero badge pill */
.vnhh-badge-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.1rem; margin: 0 0 1.25rem;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; font-size: .92rem; font-weight: 500;
}
.vnhh-badge-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--jade); }