/* ===========================================================
   Vibrant Hope Nutrition — Component layer
   Loaded after style.css. Additive only; nothing here overrides
   the header, nav, footer, typeface or brand palette.

   Brand palette (source of truth for the whole theme — style.css uses
   the same eight values, and the editor reads that same file):
     #ffffff  white
     #618aaf  steel blue   (primary)
     #6780b2  slate blue   (dark step / hover)
     #7173b8  violet       (accent)
     #836dc2  purple       (secondary accent)
     #a0b1cf  periwinkle   (soft / decorative)
     #3bb498  green        (available, not yet placed)
     #68beb0  teal         (available, not yet placed)
   Every non-neutral colour in the theme is one of the above. The only
   other values used are pure neutrals: white, greys for body text,
   hairline borders and panel fills, and black image overlays.

   Units are rem throughout. The theme sets
   html { font-size: min(1.3333vw, 16px) } so the whole page scales
   proportionally — px would break out of that zoom, and stacking
   breakpoints would fight it. Neither is used here.
   =========================================================== */



/* -----------------------------------------------------------
   Eyebrow — small label above a heading
   ----------------------------------------------------------- */

/* Sized as a heading, not as a small label: it is the title of the
   callout panel, so it matches the h2 rule in style.css
   (1.2rem / 1.6rem, bold). The uppercasing and the wide 0.14em
   tracking existed only to keep an 0.8rem label legible; at heading
   size they read as shouting, so both are dropped. */
.vh-eyebrow {
  color: var(--color-accent-blue);
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6rem;
  margin-bottom: 0.5rem;
  text-transform: none;
}


/* -----------------------------------------------------------
   Card — vh-card from the design system (site.css)

   One component covers both decks that used to be written
   separately: the three package cards on Services, and the rates
   below them. They were the same card with two sets of names.

   WordPress delivers the deck two different ways — the packages
   are a core columns block, the rates are a group — so .vh-cards
   matches both containers and lays them out with grid. Grid also
   settles the core stacking rule for free: core force-stacks
   .wp-block-columns below 782px with flex-basis:100%!important,
   and flex-basis does not apply to a grid item, so this layout
   holds its columns with no !important of its own.
   ----------------------------------------------------------- */

.vh-cards,
.vh-cards > .wp-block-group__inner-container {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  /* side margins zeroed on purpose: style.css indents every ul by
     0.5rem, which would push a list-shaped deck off the text measure. */
  margin: 1.5rem 0;
}

/* A deck may be a list — the team cards are — so clear the list
   affordances here rather than on each card. list-style inherits,
   which covers the items too. */
.vh-cards {
  list-style: none;
  padding-left: 0;
}

.vh-card {
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  border-top: 0.35rem solid var(--color-accent-blue);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-soft);
}

/* The lift from site.css. */
.vh-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-0.25rem);
}

/* Accent cycles in threes, so a deck stays balanced whatever its
   length and no card needs a hand-written modifier. */
.vh-card:nth-child(3n + 2) { border-top-color: var(--vh-violet); }
.vh-card:nth-child(3n + 3) { border-top-color: var(--vh-indigo); }

/* One card per deck may be brought forward. */
.vh-card--featured {
  box-shadow: var(--shadow-md);
}

.vh-card__title {
  color: var(--text-strong);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.7rem;
  margin-bottom: 0.75rem;
}

.vh-card:nth-child(3n + 1) .vh-card__title { color: var(--color-accent-blue); }
.vh-card:nth-child(3n + 2) .vh-card__title { color: var(--vh-violet); }
.vh-card:nth-child(3n + 3) .vh-card__title { color: var(--vh-indigo); }

.vh-card__desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6rem;
  margin-bottom: 1.25rem;
}

/* A rate's note sits inside its title rather than in a block of its
   own, which is what lets the title grow and push the price down. */
.vh-card__title .vh-card__desc {
  display: block;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 0.35rem;
}

.vh-card__price {
  border-top: 1px solid var(--border-soft);
  color: var(--text-strong);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6rem;
  /* auto top margin, not flex-grow on whatever sits above: the price
     lands on a common baseline whether or not the card has a
     description, which the two decks differ on. */
  margin: auto 0 0;
  padding-top: 1rem;
  white-space: nowrap;
}

.vh-card__price-label {
  color: var(--text-muted);
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* -----------------------------------------------------------
   Checklist — replaces long plain bullet lists
   ----------------------------------------------------------- */

.vh-checklist {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

/* The mark is a background image, not an absolutely positioned
   pseudo-element. Backgrounds resolve against the li's own padding box, so
   the mark cannot be knocked onto an ancestor's containing block — which is
   what happens here, because these lists sit inside the positioned
   .wrapper-checklist / .floating-textbox overlay boxes.
   Sized in rem so it scales with the page zoom. */
.vh-checklist > li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23618aaf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 0 0.42rem;
  background-repeat: no-repeat;
  background-size: 0.9rem 0.9rem;
  line-height: 1.6rem;
  margin-bottom: 0.75rem;
  padding-left: 1.75rem;
}

/* style.css draws a checkmark of its own on every li inside
   .youve-come-to-right-place / .if-you-are-looking-for, via a ::before
   loading checkmark.png from the old jrdietetics.com domain. Those
   sections now hold vh-checklist lists, so the two marks stacked on
   top of each other. The rule below matches that one's specificity
   exactly (one class + element + pseudo-element) and components.css
   loads after style.css, so the legacy mark is removed wherever the
   new one is in use. Neither selector names a block class: the
   components have to work on classic-editor pages too, which have no
   wp-block-* classes to hang off. */
.vh-checklist > li::before {
  content: none;
}

.vh-checklist--violet > li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%237173b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* -----------------------------------------------------------
   Panel — tinted block for a grouped section
   ----------------------------------------------------------- */

.vh-panel {
  background: var(--color-surface-mist);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  padding: 2.25rem 2rem;
}

.vh-panel--outlined {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-left: 0.3rem solid var(--vh-violet);
}

.vh-panel__title {
  color: var(--text-strong);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2rem;
  margin-bottom: 0.75rem;
}


/* -----------------------------------------------------------
   Section heading — a rule under a heading to separate bands
   without introducing full-bleed sections.
   ----------------------------------------------------------- */

.vh-sectionheading {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
}


/* -----------------------------------------------------------
   FAQ page

   Twelve question/answer pairs that used to run as a flat wall of
   h2 + paragraph. Now: three numbered groups, each question a
   collapsible card.

   The card, the summary row and the +/- indicator all come from the
   existing .wp-block-details rules in style.css (added for the
   Services page). Nothing is restyled here — this block only adds the
   page framing around them, so the two pages keep one accordion.
   ----------------------------------------------------------- */

.vh-faq {
  counter-reset: vh-faq__group;
}

/* Lede - the one paragraph that sets up the page */
.vh-faq .vh-faq__lede {
  border-left: 0.2rem solid var(--color-accent-blue);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.9rem;
  margin: 0 0 1.75rem;
  padding-left: 1.25rem;
}

/* Jump links to the three groups */
.vh-faq .vh-faq__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.vh-faq .vh-faq__nav a {
  background: var(--color-surface-mist);
  border: 1px solid var(--border-subtle);
  border-radius: 2rem;
  color: var(--color-accent-blue);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4rem;
  padding: 0.35rem 1.1rem;
  text-decoration: none;
}

.vh-faq .vh-faq__nav a:hover,
.vh-faq .vh-faq__nav a:focus {
  background: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: #fff;
}

/* Group heading. The 01 / 02 / 03 badge is a CSS counter, so the
   numbering stays correct if a group is added or reordered in the
   editor - there is no number to keep in sync by hand. */
.vh-faq .vh-faq__group-title {
  align-items: baseline;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-strong);
  counter-increment: vh-faq__group;
  display: flex;
  gap: 0.75rem;
  margin: 2.75rem 0 1.25rem;
  padding-bottom: 0.6rem;
  scroll-margin-top: 1.5rem;
}

.vh-faq .vh-faq__group-title::before {
  color: var(--color-accent-blue);
  content: counter(vh-faq__group, decimal-leading-zero);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Card spacing and open-state lift. Defined once for both accordion
   contexts — the FAQ groups and the Services package panel — so the
   two pages cannot drift apart. Everything else about the card comes
   from the base .wp-block-details rules in style.css.

   Scoped to the container rather than to a per-item class so a details
   block added in the editor picks it up with no class to remember. */
.vh-faq .wp-block-details,
.vh-panel .wp-block-details {
  margin: 0 0 0.6rem;
  transition: box-shadow 0.15s ease;
}

.vh-faq .wp-block-details[open],
.vh-panel .wp-block-details[open] {
  box-shadow: 0 0.1rem 0.7rem rgba(97, 138, 175, 0.14);
}


/* -----------------------------------------------------------
   Closing call to action
   ----------------------------------------------------------- */

.vh-faq .vh-faq__cta.wp-block-group {
  background: var(--color-surface-mist);
  border-radius: 0.5rem;
  margin: 2.75rem 0 1rem;
  padding: 2.25rem 2rem 1.75rem;
  text-align: center;
}

.vh-faq .vh-faq__cta .vh-panel__title {
  margin-top: 0;
}

.vh-faq .vh-faq__cta p {
  color: var(--text-muted);
  margin: 0 auto 1.25rem;
  max-width: 34rem;
}


/* -----------------------------------------------------------
   Home: "We Get It..." and "You're in the Right Place..." bands

   Both blocks are a single full-width .wrapper-checklist — the
   second column of each columns block is empty and collapses to
   zero width — so they are the same component and get the same
   treatment: a soft mist band, no frame.

   .wrapper-checklist is also carried by "If You Want...", which is
   a genuine two-column photo layout and keeps the white floating
   box, so these are scoped by their section ancestors rather than
   by that class on its own.
   ----------------------------------------------------------- */

.what-to-expect .wrapper-checklist,
.youve-come-to-right-place .wrapper-checklist {
  background: var(--color-surface-mist);
  border: 0;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  padding: 2.5rem 3rem;
}

/* style.css sets padding-right:4rem on both blocks via
   `.<section> .wp-block-column:first-child .wrapper-checklist`,
   which was sized for them as loose text beside a photo, not as a
   padded band. Repeating those selectors here matches their
   specificity, and this file loads second, so the padding is even. */
.what-to-expect .wp-block-column:first-child .wrapper-checklist,
.youve-come-to-right-place .wp-block-column:first-child .wrapper-checklist {
  padding: 2.5rem 3rem;
}

.what-to-expect .wrapper-checklist h2:first-child,
.youve-come-to-right-place .wrapper-checklist h2:first-child {
  margin-top: 0;
}

.what-to-expect .wrapper-checklist > .wp-block-group__inner-container > *:last-child,
.youve-come-to-right-place .wrapper-checklist > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}


/* -----------------------------------------------------------
   Home: "Intrigued? Learn More About Our..." cards

   Was a row of four green pill buttons. These are the design
   system's image-topped card, vh-blog-card from site.css — same
   16/10 thumb, same title block — reused here for the four
   section links rather than adding a fourth card component.

   The columns block carries .vh-cards and each column carries
   .vh-blog-card, so the deck shares the grid and the stacking
   behaviour of every other card deck on the site.
   ----------------------------------------------------------- */

/* style.css draws a shared grey frame around .wrapper-intriguedleanmore
   (along with .wrapper-ourstoryandmission and friends). With the links
   now cards, that outer frame reads as a double border, so it is dropped
   here only - the other .wrapper-* blocks keep theirs. */
.wrapper-intriguedleanmore {
  border: 0;
  padding: 1rem 0;
}

.vh-blog-card {
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-soft);
}

.vh-blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-0.25rem);
}

/* Thumb. Generated content, so it cannot carry a vh-blog-card__thumb element
   the way the design system markup does — the images are named by
   position instead. Photography already shipped with the theme. */
.vh-blog-card::before {
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface-mist);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
}

.vh-blog-card:nth-child(1)::before { background-image: url("img/intro-hope.jpg"); }
.vh-blog-card:nth-child(2)::before { background-image: url("img/intro-office01.jpg"); }
.vh-blog-card:nth-child(3)::before { background-image: url("img/intro-fun.jpg"); }
.vh-blog-card:nth-child(4)::before { background-image: url("img/intro-food.jpg"); }

.vh-blog-card h2 {
  margin: 0;
}

/* Undo the green pill: inside a card the label is the card's title,
   the design system calls this vh-blog-card__title. */
.vh-blog-card h2 > a.healthie-signup {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-strong);
  display: block;
  font-size: 1.05rem;
  line-height: 1.4rem;
  margin: 0;
  max-width: none;
  padding: 1.1rem 1.3rem 1.4rem;
  text-align: left;
}

/* Stretch the link over the whole card. */
.vh-blog-card h2 > a.healthie-signup::after {
  content: "";
  inset: 0;
  position: absolute;
}

.vh-blog-card h2 > a.healthie-signup:hover,
.vh-blog-card h2 > a.healthie-signup:focus-visible {
  background: transparent;
  color: var(--color-primary-press);
  text-decoration: underline;
}


/* -----------------------------------------------------------
   Home: "Our Story and Mission" / "What Does All This Mean?"

   Both blocks carry .wrapper-ourstoryandmission, so the shared
   grey 1px frame style.css draws is dropped from both, and the
   second becomes a light band - the same mist as the "We Get It"
   panel and the footer.

   They are told apart by content, not position: only the first
   holds the team cards, so :has() on that component survives
   blocks being added or reordered above them.
   ----------------------------------------------------------- */

.wrapper-ourstoryandmission {
  border: 0;
}

.wrapper-ourstoryandmission:not(:has(.vh-team-card)) {
  background: var(--color-surface-mist);
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
  padding: 2.5rem 3rem;
}


/* -----------------------------------------------------------
   Team card — vh-team-card from the design system (site.css)

   Same card: 4:5 portrait, white surface, hairline border,
   rounded corners, soft shadow, padded body.

   The source is a core list block, so the list carries .vh-cards
   and each item carries .vh-team-card — the classes are on the
   content now, which is why nothing here has to recognise the
   block by the links inside it. The portrait is still a ::before,
   because a list item has nowhere to put an <img>, pulled
   full-bleed with negative margins so the label below keeps the
   card's padding.
   ----------------------------------------------------------- */

li.vh-team-card {
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  line-height: 1.35rem;
  margin: 0;
  overflow: hidden;
  padding: 0 1.1rem 1.15rem;
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-soft);
}

li.vh-team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-0.25rem);
}

/* Portrait, pulled full-bleed back out of the card's side padding.
   Faces sit in the upper third of all four shots, hence 20% down. */
li.vh-team-card::before {
  aspect-ratio: 4 / 5;
  background-color: var(--color-surface-mist);
  background-position: center 20%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  margin: 0 -1.1rem 1rem;
}

li.vh-team-card:nth-child(1)::before { background-image: url("img/team-jen.jpg"); }
li.vh-team-card:nth-child(2)::before { background-image: url("img/team-allison.jpg"); }
li.vh-team-card:nth-child(3)::before { background-image: url("img/team-brookelyn.jpg"); }
li.vh-team-card:nth-child(4)::before { background-image: url("img/team-cora.jpg"); }

li.vh-team-card a,
li.vh-team-card a:visited {
  color: var(--text-strong);
  text-decoration: none;
}

li.vh-team-card:hover a {
  color: var(--color-primary-press);
}

/* Whole card clickable. Jen, Allison and Brookelyn wrap the name in
   <strong>; Cora's item is a single link - cover both shapes. Both
   links in an item point at the same page, so the overlay covering
   the second one costs nothing. */
li.vh-team-card > strong:first-child > a::after,
li.vh-team-card > a:first-child::after {
  content: "";
  inset: 0;
  position: absolute;
}


/* -----------------------------------------------------------
   Home: "The Truth Is... / photo / You've Got This..." band

   The three blocks plus the photo credit are one statement —
   claim, portrait, claim, call to action — but in post content
   they are four separate siblings of <article>, so there is no
   wrapper to put a background on. Each is bled and backgrounded
   individually, and the vertical margins between them are zeroed,
   so they read as a single edge-to-edge section.

   This is the only full-bleed section on the site. The bleed is
   the standard pair:

     margin-inline:  calc(50% - 50vw)   pushes each edge out to the viewport
     padding-inline: calc(50vw - 50%)   pulls the content back in

   Both percentages resolve against <article> (the containing
   block), never against the element itself, so the two cancel
   exactly and the text and photo stay on the same measure as the
   rest of the page — at 1280px that is -88px / +88px. .container
   caps at 1200px, so on a wide screen the band keeps growing while
   its contents do not, which is the intent.

   html and body are both overflow-x: clip (style.css), so the
   bleed cannot introduce a horizontal scrollbar.

   The blocks carry no class of their own — they are bare
   .wp-block-columns — so they are found by :has() on the inner
   column, which survives the editor re-saving the page. */

.frontpage article > .wp-block-columns:has(> .wrapper-thetruthis),
.frontpage article > .wp-block-columns:has(> .wrapper-thetruthis) + figure.wp-block-image,
.frontpage article > .wp-block-columns:has(> .wrapper-youvegotthis),
.frontpage article > .wp-block-columns:has(> .wrapper-youvegotthis) + p {
  background: var(--color-surface-mist);
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* Band ends: the only vertical padding on the section. */
.frontpage article > .wp-block-columns:has(> .wrapper-thetruthis) {
  margin-top: 2rem;
  padding-top: 2.5rem;
}

.frontpage article > .wp-block-columns:has(> .wrapper-youvegotthis) + p {
  margin-bottom: 2rem;
  padding-bottom: 2.5rem;
}

/* The frame, the 1rem margin and the 1rem padding style.css gives
   these two columns were what made them read as boxes. The band
   supplies the padding now, so all three go. */
.frontpage .wrapper-thetruthis,
.frontpage .wrapper-youvegotthis {
  border: 0;
  margin: 0;
  padding: 0;
}

.frontpage .wrapper-thetruthis > h2:first-child {
  margin-top: 0;
}

.frontpage .wrapper-thetruthis > *:last-child {
  margin-bottom: 1.5rem;
}

/* Portrait: rounded on the band, still on the content measure. */
.frontpage article > .wp-block-columns:has(> .wrapper-thetruthis) + figure.wp-block-image img {
  border-radius: 0.75rem;
  display: block;
}

.frontpage article > .wp-block-columns:has(> .wrapper-youvegotthis) {
  padding-top: 1.5rem;
}

/* Photo credit — the tail of the section, not a stray line under it. */
.frontpage article > .wp-block-columns:has(> .wrapper-youvegotthis) + p {
  color: var(--text-muted);
  font-size: 0.85rem;
}