/*
 * LiveWell content components and section rhythm.
 *
 * This stylesheet is the single live authority for native content accordions
 * and imported Gutenberg section layout. It loads after main.css and uses the
 * real #main landmark for cascade authority instead of fabricated specificity.
 */

:root {
  --lw-component-green: #0f5a45;
  --lw-component-paper: #fdf8e8;
  --lw-component-gold: #d9a648;
  --lw-component-ink: #181f2e;
  --lw-content-width: 1120px;
  --lw-reading-width: 720px;
  --lw-section-pad: clamp(2rem, 3vw, 3rem);
  --lw-page-gutter: clamp(1rem, 2.5vw, 2rem);
  --lw-section-gap: clamp(0.875rem, 1.75vw, 1.5rem);
  --lw-card-gap: clamp(0.75rem, 1.4vw, 1rem);
  --lw-card-pad: clamp(0.875rem, 1.5vw, 1.25rem);
  --lw-body-size: 1rem;
  --lw-body-leading: 1.55;
  --lw-h1-size: clamp(2rem, 3vw, 3rem);
  --lw-h2-size: clamp(1.5rem, 2vw, 2rem);
  --lw-h3-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  --lw-hero-title-size: clamp(2rem, 3vw, 3rem);
  --lw-hero-height: clamp(30rem, 58svh, 36rem);
  --lw-hero-scrim: linear-gradient(
    90deg,
    rgba(8, 34, 31, 0.9) 0%,
    rgba(8, 34, 31, 0.78) 28%,
    rgba(8, 34, 31, 0.42) 52%,
    rgba(8, 34, 31, 0.12) 72%,
    rgba(8, 34, 31, 0) 100%
  );
  --lw-radius: 14px;
  --lw-accordion-surface: var(--lw-component-green);
}

/*
 * Final shared scale and hero authority.
 *
 * Important declarations live in a named layer so readable selectors can
 * override the unlayered legacy cascade without fabricated specificity.
 */
@layer lw-authority {
  body {
    font-size: var(--lw-body-size) !important;
    line-height: var(--lw-body-leading) !important;
  }

  main :is(h1, h2, h3, h4, p, li, dd, dt, blockquote) {
    overflow-wrap: break-word !important;
  }

  main h1 {
    font-size: var(--lw-h1-size) !important;
    line-height: 1.08 !important;
    text-wrap: balance !important;
  }

  main h2 {
    font-size: var(--lw-h2-size) !important;
    line-height: 1.14 !important;
    text-wrap: balance !important;
  }

  main h3 {
    font-size: var(--lw-h3-size) !important;
    line-height: 1.24 !important;
    text-wrap: balance !important;
  }

  main h4 {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
  }

  main :is(p, li, dd, dt) {
    font-size: var(--lw-body-size) !important;
    line-height: var(--lw-body-leading) !important;
  }

  main :is(
    .lw-eyebrow,
    .lw-sectionhead__eyebrow,
    .lw-bento__eyebrow,
    .lw-ins-tier__label,
    [class*='__eyebrow']
  ) {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  main small,
  main .has-small-font-size {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
  }

  main :is(.lw-faq, .lw-condition-faq__list) {
    display: grid !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    width: min(100%, var(--lw-reading-width)) !important;
    max-width: var(--lw-reading-width) !important;
    margin-inline: auto !important;
  }

  main :is(
    .wp-block-group.lw-warm,
    .wp-block-group.lw-frost,
    .wp-block-group.lw-bg-dark,
    .wp-block-group.lw-bg-slate
  ) {
    --lw-accordion-surface: rgba(253, 248, 232, 0.09);
  }

  main :is(
    .wp-block-group.lw-white,
    .wp-block-group.lw-bg-concrete
  ) {
    --lw-accordion-surface: var(--lw-component-green);
  }

  main details {
    box-sizing: border-box !important;
    width: min(100%, var(--lw-reading-width)) !important;
    max-width: var(--lw-reading-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(253, 248, 232, 0.5) !important;
    border-radius: 12px !important;
    background: var(--lw-accordion-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--lw-component-paper) !important;
  }

  main details + details {
    margin-top: 0.5rem !important;
  }

  main :is(.lw-faq, .lw-condition-faq__list) > details + details {
    margin-top: 0 !important;
  }

  main details > summary {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0.8rem 3rem 0.8rem 1rem !important;
    list-style: none !important;
    cursor: pointer !important;
    background: transparent !important;
    color: var(--lw-component-paper) !important;
    -webkit-text-fill-color: var(--lw-component-paper) !important;
    font-family: var(--lw-body-font, Inter, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  main details > summary::-webkit-details-marker {
    display: none !important;
  }

  main details > summary::marker {
    content: '' !important;
  }

  main details > summary::after {
    content: '+' !important;
    position: absolute !important;
    top: 50% !important;
    right: 1rem !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    color: var(--lw-component-gold) !important;
    font-family: Inter, sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
  }

  main details[open] > summary::after {
    content: '\2212' !important;
  }

  main details > summary:focus-visible {
    outline: 3px solid var(--lw-component-gold) !important;
    outline-offset: -4px !important;
  }

  main details > :not(summary) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 1rem !important;
    background: transparent !important;
    color: var(--lw-component-paper) !important;
    -webkit-text-fill-color: var(--lw-component-paper) !important;
  }

  main details > :is(ul, ol) {
    padding-left: 2.35rem !important;
  }

  main details > summary + * {
    padding-top: 0.1rem !important;
  }

  main details > :last-child:not(summary) {
    margin-bottom: 0 !important;
    padding-bottom: 1rem !important;
  }

  main details > :not(summary) * {
    color: var(--lw-component-paper) !important;
    -webkit-text-fill-color: var(--lw-component-paper) !important;
  }

  main details a {
    text-decoration-color: var(--lw-component-gold) !important;
    text-underline-offset: 0.16em !important;
  }

  main > :is(
    .wp-block-cover.alignfull:first-child,
    .wp-block-cover.alignfull:first-of-type,
    .lw-home-hero-fb,
    .lw-vhero,
    .lw-appointment-hero,
    .lw-tools__hero,
    .lw-med-page__hero
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--lw-hero-height) !important;
    min-height: var(--lw-hero-height) !important;
    max-height: var(--lw-hero-height) !important;
    aspect-ratio: auto !important;
    margin-block: 0 !important;
    overflow: hidden !important;
  }

  main > :is(
    .wp-block-cover.alignfull:first-child,
    .wp-block-cover.alignfull:first-of-type,
    .lw-home-hero-fb,
    .lw-vhero,
    .lw-appointment-hero,
    .lw-tools__hero,
    .lw-med-page__hero
  ) :is(
    h1,
    .lw-home-hero-fb__title,
    .lw-vhero__title,
    .lw-appointment-hero__title,
    .lw-tools__title,
    .sqsrte-scaled-text
  ),
  main .lw-founder-hero h1 {
    font-size: var(--lw-hero-title-size) !important;
    line-height: 1.08 !important;
  }

  main > :is(
    .wp-block-cover.alignfull:first-child,
    .wp-block-cover.alignfull:first-of-type,
    .lw-home-hero-fb,
    .lw-vhero,
    .lw-appointment-hero,
    .lw-tools__hero,
    .lw-med-page__hero
  ) :is(
    .lw-home-hero-fb__sub,
    .lw-vhero__sub,
    .lw-appointment-hero__sub,
    .lw-tools__sub,
    .wp-block-cover__inner-container > p
  ) {
    font-size: clamp(1rem, 0.94rem + 0.2vw, 1.0625rem) !important;
    line-height: 1.45 !important;
  }

  /*
   * Core cover media keeps its own crop. The overlay always fills the hero,
   * preventing the old 56.25vw rule from ending in a hard horizontal band.
   */
  :is(
    main > .wp-block-cover.alignfull:first-child .wp-block-cover__background.has-background-dim,
    main > .wp-block-cover.alignfull:first-of-type .wp-block-cover__background.has-background-dim,
    .lw-home-hero-fb__scrim,
    .lw-vhero__ov,
    .lw-tools__hero-ov,
    .lw-med-page__hero-shade
  ) {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    background: var(--lw-hero-scrim) !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Core Cover's one-pixel frame is part of the hero box, so cover it too. */
  :is(
    main > .wp-block-cover.alignfull:first-child,
    main > .wp-block-cover.alignfull:first-of-type
  ) > .wp-block-cover__background.has-background-dim {
    bottom: -1px !important;
  }

  :is(
    main > .wp-block-cover.alignfull:first-child .wp-block-cover__inner-container,
    main > .wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container,
    .lw-home-hero-fb__inner,
    .lw-vhero__in,
    .lw-tools__hero-in,
    .lw-med-page__hero-inner
  ) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  main > .wp-block-cover.alignfull:first-child::after,
  main > .wp-block-cover.alignfull:first-of-type::after {
    background: none !important;
    box-shadow: none !important;
  }

  main figure.wp-block-pullquote {
    box-sizing: border-box !important;
    width: min(100%, var(--lw-reading-width)) !important;
    max-width: var(--lw-reading-width) !important;
    min-height: 0 !important;
    margin: 1.5rem auto !important;
    padding: 1.25rem 1.4rem !important;
    border-width: 0 0 0 4px !important;
    border-radius: var(--lw-radius) !important;
    font-family: var(--lw-body-font, Inter, sans-serif) !important;
    text-align: left !important;
  }

  main figure.wp-block-pullquote blockquote {
    margin: 0 !important;
    padding: 0 !important;
  }

  main figure.wp-block-pullquote :is(p, blockquote) {
    font-family: var(--lw-body-font, Inter, sans-serif) !important;
    font-size: clamp(1.05rem, 1vw + 0.8rem, 1.125rem) !important;
    line-height: 1.45 !important;
  }

  main figure.wp-block-pullquote cite {
    display: block !important;
    margin-top: 0.65rem !important;
    font-family: var(--lw-body-font, Inter, sans-serif) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  main > .wp-block-group.alignfull:not(.lw-hero):not(.lw-vhero):not(.lw-videoband):not(:has(> .wp-block-cover)):not(:has(> video)),
  main > section:not(.lw-home-hero-fb):not(.lw-vhero):not(.lw-appointment-hero):not(.lw-tools__hero):not(.lw-med-page__hero):not(.lw-trust-strip) {
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding-block: var(--lw-section-pad) !important;
    padding-inline: var(--lw-page-gutter) !important;
  }

  main > .wp-block-group.alignfull > :is(
    .wp-block-group__inner-container,
    .wp-block-group,
    .lw-section-wrap,
    .wp-block-columns,
    .lw-sectionhead
  ) {
    box-sizing: border-box !important;
    width: min(100%, var(--lw-content-width)) !important;
    max-width: var(--lw-content-width) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  main > .wp-block-group.alignfull > :is(
    p,
    h2.wp-block-heading,
    h3.wp-block-heading,
    .lw-insurance-list,
    figure.wp-block-pullquote
  ) {
    box-sizing: border-box !important;
    width: min(100%, var(--lw-reading-width)) !important;
    max-width: var(--lw-reading-width) !important;
    margin-inline: auto !important;
  }

  main > .wp-block-group.alignfull > .lw-section-wrap:only-child {
    width: min(100%, var(--lw-reading-width)) !important;
    max-width: var(--lw-reading-width) !important;
  }

  main > .wp-block-group.alignfull > h2.wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: var(--lw-section-gap) !important;
  }

  main > .wp-block-group.alignfull > :is(.has-text-color, .lw-eyebrow) + h2.wp-block-heading {
    margin-top: 0.65rem !important;
  }

  main .wp-block-columns {
    align-items: flex-start !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    margin-block: 0 !important;
  }

  main .wp-block-column {
    min-width: 0 !important;
  }

  main .wp-block-column > :first-child {
    margin-top: 0 !important;
  }

  main :is(
    .lw-feature,
    .lw-step,
    .lw-how__step,
    .lw-sidecard,
    .lw-rquote,
    .lw-stat,
    .lw-team-card,
    .lw-real-team__card,
    .lw-spoke-card,
    .lw-condition-card,
    .lw-svc-card,
    .lw-trio__card,
    .lw-grit-card,
    .lw-connect__card,
    .lw-stepcard,
    .lw-dig-deeper,
    .lw-info-card,
    .lw-bento__tile:not(.img)
  ) {
    box-sizing: border-box !important;
    padding: var(--lw-card-pad) !important;
    border-radius: var(--lw-radius) !important;
  }

  main :is(
    .lw-feature,
    .lw-step,
    .lw-how__step,
    .lw-sidecard,
    .lw-rquote,
    .lw-stat,
    .lw-team-card,
    .lw-real-team__card,
    .lw-spoke-card,
    .lw-condition-card,
    .lw-svc-card,
    .lw-trio__card,
    .lw-grit-card,
    .lw-connect__card,
    .lw-stepcard,
    .lw-dig-deeper,
    .lw-info-card,
    .lw-bento__tile
  ) :is(h2, h3, h4, .lw-card__title) {
    font-size: clamp(1.05rem, 1vw + 0.2rem, 1.125rem) !important;
    line-height: 1.25 !important;
  }

  main :is(
    .lw-feature,
    .lw-step,
    .lw-how__step,
    .lw-sidecard,
    .lw-rquote,
    .lw-stat,
    .lw-team-card,
    .lw-real-team__card,
    .lw-spoke-card,
    .lw-condition-card,
    .lw-svc-card,
    .lw-trio__card,
    .lw-grit-card,
    .lw-connect__card,
    .lw-stepcard,
    .lw-dig-deeper,
    .lw-info-card,
    .lw-bento__tile
  ) :is(p, li) {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
  }

  .lw-skip-link:not(:focus):not(:focus-visible) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .lw-skip-link:focus,
  .lw-skip-link:focus-visible {
    position: fixed !important;
    z-index: 100000 !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.65rem 0.9rem !important;
    overflow: visible !important;
    border: 2px solid var(--lw-component-gold) !important;
    border-radius: 8px !important;
    clip: auto !important;
    clip-path: none !important;
    background: var(--lw-component-ink) !important;
    color: var(--lw-component-paper) !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    transform: none !important;
  }

  /* Keep the intentionally off-canvas spam trap inside its form's paint box. */
  form:has(.lw-hp) {
    position: relative !important;
    overflow-x: clip !important;
  }

  .site-header__inner {
    min-height: 60px !important;
    padding-block: 0.4rem !important;
  }

  .site-nav .nav-menu > li > a {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  :is(main, .site-header) :is(
    .wp-block-button__link,
    a.button,
    button.button,
    a.btn,
    button.btn,
    a[class*='__cta'],
    button[class*='__cta'],
    [role='button'][class*='__cta']
  ) {
    min-height: 2.5rem !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  main .lw-trust-strip {
    display: block !important;
    min-height: 0 !important;
    padding: 0.7rem var(--lw-page-gutter) !important;
  }

  main .lw-trust-strip__inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(100%, var(--lw-content-width)) !important;
    max-width: var(--lw-content-width) !important;
    gap: 0.75rem !important;
    margin-inline: auto !important;
  }

  main .lw-trust-strip :is(p, span, strong, a) {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }

  .lw-footer {
    padding-block: 2.5rem 1.25rem !important;
  }

  .lw-footer__inner {
    gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  }

  .lw-footer :is(p, li, a) {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  .lw-footer :is(h2, h3, h4, .lw-footer__heading) {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  @media (min-width: 600px) and (max-width: 900px) {
    main .lw-how {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: var(--lw-card-gap) !important;
    }

    main .lw-bento {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: var(--lw-card-gap) !important;
      margin-inline: auto !important;
      padding-inline: var(--lw-page-gutter) !important;
    }

    main .lw-bento > * {
      grid-column: span 1 !important;
      grid-row: auto !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    main .lw-bento > :is(.x8, .x12) {
      grid-column: 1 / -1 !important;
      aspect-ratio: auto !important;
      min-height: 0 !important;
    }

    main .wp-block-columns {
      display: flex !important;
      flex-flow: row nowrap !important;
    }

    main .wp-block-columns > .wp-block-column {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 599px) {
    :root {
      --lw-hero-height: clamp(28rem, 118vw, 32rem) !important;
      --lw-hero-scrim: linear-gradient(
        180deg,
        rgba(8, 34, 31, 0) 0%,
        rgba(8, 34, 31, 0.03) 28%,
        rgba(8, 34, 31, 0.12) 45%,
        rgba(8, 34, 31, 0.38) 62%,
        rgba(8, 34, 31, 0.72) 80%,
        rgba(8, 34, 31, 0.92) 100%
      ) !important;
    }

    main details > summary {
      min-height: 50px !important;
      padding: 0.75rem 2.8rem 0.75rem 0.9rem !important;
      font-size: 0.9375rem !important;
    }

    main details > :not(summary) {
      padding-inline: 0.9rem !important;
    }

    main details > :is(ul, ol) {
      padding-left: 2.1rem !important;
    }

    main .lw-trust-strip__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.5rem 0.75rem !important;
    }

    main .lw-bento {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: var(--lw-card-gap) !important;
      margin-inline: auto !important;
      padding-inline: 0 !important;
    }

    main .lw-bento > * {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    main .lw-bento > :not(.img) {
      aspect-ratio: auto !important;
      min-height: 0 !important;
      align-content: start !important;
      justify-content: flex-start !important;
    }

    main .wp-block-columns {
      display: flex !important;
      flex-direction: column !important;
    }

    main .wp-block-columns > .wp-block-column {
      flex-basis: 100% !important;
      width: 100% !important;
    }
  }
}