@charset "UTF-8";
/* Compiles to css/section-components.css — enqueued front AND editor via
   enqueue_block_assets (see howardbrown_front_and_back in functions.php),
   so section components render identically in both without a separate
   editor stylesheet.

   The legacy accordion partial is included because the card accordion
   builds on its class contract (.accordion-header flex, the circle
   plus/minus toggle, open state) — on the front end pages.css also carries
   these rules (harmless duplicate), but the editor only loads this file. */
/* Grid sizes: */
/* http://gridcalculator.dk/#/1020/12/20/10 -- 65px col */
/* Colors */
.accordion-content-body {
  line-height: 1.8;
  font-size: 1.1rem;
  text-align: left;
}
.accordion-content-body p {
  margin-bottom: 1rem;
  /* Remove the trailing margin on the final paragraph inside a
     %basic-text container, so text components don't push extra
     whitespace below themselves. The `&` here refers to the parent
     `p` rule, so &:last-of-type compiles to `p:last-of-type`.
     (Was `&last-of-type` without the colon — a typo that compiled
     to `plast-of-type` and matched nothing.) */
}
.accordion-content-body p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 48em) {
  .accordion-content-body p {
    margin-bottom: 1.5rem;
  }
}
@media (min-width: 81.25em) {
  .accordion-content-body {
    font-size: 1.3rem;
  }
  .accordion-content-body p {
    margin-bottom: 1.4rem;
  }
}
@media (min-width: 100em) {
  .accordion-content-body p {
    margin-bottom: 1.6rem;
  }
}
@media (min-width: 112.5em) {
  .accordion-content-body p {
    margin-bottom: 1.8rem;
  }
}

/* Legacy custom accordion (acf/accordion). New accordion content should use
   the Accordion plugin (wpcomsp/accordion-*) — see _accordion-plugin.scss for
   theme overrides on those blocks. This block stays only so existing pages
   with saved ACF "questions" data keep rendering correctly. */
.accordion {
  padding: 1rem 0;
  border-top: 1px solid rgba(54, 54, 54, 0.3);
  max-width: 62.5rem;
  margin: 0 auto;
  display: block;
}
.accordion:first-child {
  margin-top: 1rem;
}
@media (min-width: 81.25em) {
  .accordion:first-child {
    margin-top: 2rem;
  }
}
.accordion-grouping-headline {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #510c76;
}
@media (min-width: 81.25em) {
  .accordion-grouping-headline {
    margin-bottom: 1.5rem;
    font-size: 2rem;
  }
}
.accordion-header {
  background: transparent;
  width: 100%;
  outline: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}
.accordion-header-icon {
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
  margin-right: 0.75rem;
  border: 1px solid #510c76;
  border-radius: 50%;
  padding: 0.5rem;
  transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
  flex: 0 0 auto;
  display: block;
}
.accordion-header-icon:before {
  width: 2px;
  height: 1rem;
  content: "";
  display: block;
  background: #510c76;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
}
.accordion-header-icon:after {
  width: 1rem;
  height: 2px;
  content: "";
  display: block;
  background: #510c76;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
}
.accordion-header-title {
  color: #510c76;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.4;
  flex: 1;
  transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
}
.accordion-header:hover .accordion-header-icon {
  background: #510c76;
  border-color: #510c76;
}
.accordion-header:hover .accordion-header-icon:before {
  background: #fff;
}
.accordion-header:hover .accordion-header-icon:after {
  background: #fff;
}
.accordion-content {
  text-align: left;
  /* The JS toggle uses the `hidden` attribute, so by default the panel
     is removed from layout entirely. When open, hidden is removed and
     the panel renders inline. No max-height transition (would fight
     the hidden attr); accept the snap. */
}
.accordion-content-body {
  padding: 0.5rem 0 0.5rem 2.25rem;
}
.accordion-content-body p:last-of-type {
  margin-bottom: 0;
}
.accordion {
  /* Open state: JS adds .accordion-open to the wrapper. */
}
.accordion.accordion-open .accordion-header-icon {
  background: #0071ce;
  border-color: #0071ce;
}
.accordion.accordion-open .accordion-header-icon:before {
  background: #fff;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.accordion.accordion-open .accordion-header-icon:after {
  background: #fff;
}

/* =========================================================================
   Section components (Insurance & Coverage pattern — reusable)
   --------------------------------------------------------------------------
   Three pieces, designed to work anywhere but built for section pages:

     • .section-layout  — two-column grid on template-section.php:
                          auto-built sidebar nav + block content
     • .card-accordion  — acf/card-accordion: white card of accordion rows,
                          each with a colored icon circle + colored title.
                          Rides on the legacy .accordion class contract
                          (script/common.js toggle, plus/minus circle)
     • .help-bar        — acf/help-bar: light lavender contact band,
                          up to 3-4 cells (icon / heading / short text)

   Compiled to its OWN file: css/section-components.css, enqueued via
   enqueue_block_assets so the SAME rules style the front end and the
   block editor preview (no editor-extract duplicate to maintain).
   ========================================================================= */
/* ---- Per-card accent colors ----
   --hb-accent      = icon circle fill (decorative — white glyph on top)
   --hb-accent-text = card title text; teal/green darkened so bold-large
                      titles clear WCAG 3:1 on white */
.card-accordion-item.is-purple {
  --hb-accent: #510c76;
  --hb-accent-text: #510c76;
}

.card-accordion-item.is-teal {
  --hb-accent: #00c1de;
  --hb-accent-text: #007c93;
}

.card-accordion-item.is-orange {
  --hb-accent: #ff4d00;
  --hb-accent-text: #ff4d00;
}

.card-accordion-item.is-blue {
  --hb-accent: #0071ce;
  --hb-accent-text: #0071ce;
}

.card-accordion-item.is-green {
  --hb-accent: #61a60e;
  --hb-accent-text: #4c8309;
}

/* ---- Section layout (template-section.php) ---- */
@media (min-width: 64em) {
  .content.section-layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}
@media (min-width: 100em) {
  .content.section-layout {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 4rem;
  }
}
.content.section-layout {
  /* The theme caps .content children at 900px and centers them, which
     floats the main column off its grid cell (and throws the wide
     breakout out of alignment with the sidebar) — the grid owns
     widths here. */
}
.content.section-layout > .section-main {
  max-width: none;
  margin: 0;
  width: 100%;
  /* Page title sits beside the sidebar — left-justify it. */
}
.content.section-layout > .section-main > h1 {
  text-align: left;
}

/* ---- Section sidebar nav ----
   Prefixed with .content: the theme styles .content ul / .content a with
   equal specificity (centered ul, blue bold links), so the nav needs to
   outrank them. */
.content .section-nav {
  margin-bottom: 2rem;
}
@media (min-width: 64em) {
  .content .section-nav {
    margin-bottom: 0;
  }
}
.content .section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}
.content .section-nav li {
  margin: 0 0 0.35rem;
  padding: 0;
  width: 100%;
}
.content .section-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #363636;
  text-decoration: none;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
  /* The theme block-displays and auto-centers spans inside content
     links — pin the label to the left and let it take the free space. */
}
.content .section-nav a .section-nav-label {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
}
.content .section-nav a .section-nav-chevron {
  width: 0.55rem;
  height: 0.9rem;
  flex: 0 0 auto;
  color: #510c76;
  transition: color 0.2s ease-in-out;
}
.content .section-nav a:hover, .content .section-nav a:focus-visible {
  background: rgba(81, 12, 118, 0.08);
  color: #510c76;
}
.content .section-nav a.active {
  background: #510c76;
  color: #fff;
}
.content .section-nav a.active .section-nav-chevron {
  color: #fff;
}

/* ---- Card accordion ---- */
.card-accordion {
  background: #fff;
  border: 1px solid rgba(81, 12, 118, 0.12);
  border-radius: 0.9rem;
  box-shadow: 0 10px 30px rgba(81, 12, 118, 0.07);
  padding: 0.5rem 1.25rem;
  margin: 1.5rem auto 2rem;
  /* Width scheme mirrors theme.json (content 900 / wide 1400): default is
     a comfortable reading measure; Wide fills the container. Inside the
     section template the sidebar column governs instead — see the
     .section-main override below. */
  max-width: 56.25em;
}
@media (min-width: 48em) {
  .card-accordion {
    padding: 0.75rem 1.75rem;
  }
}
.card-accordion.alignwide {
  max-width: none;
}
.card-accordion {
  /* Override the legacy global .accordion base for rows inside a card:
     the card provides the frame, rows get internal separators. */
}
.card-accordion .accordion {
  max-width: none;
  margin: 0;
  padding: 0.65rem 0;
  border-top: 0;
}
.card-accordion .accordion + .accordion {
  border-top: 1px solid rgba(81, 12, 118, 0.12);
}
.card-accordion .accordion:first-child {
  margin-top: 0;
}
@media (min-width: 81.25em) {
  .card-accordion .accordion:first-child {
    margin-top: 0;
  }
}
.card-accordion {
  /* Heading wrapper exists for semantics only — the button is the UI. */
}
.card-accordion .card-accordion-heading {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.card-accordion .card-accordion-badge {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--hb-accent, #510c76);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}
.card-accordion .card-accordion-badge svg {
  /* The designed icon set (72×72 artboards) carries built-in
     padding, so the glyphs need a larger box to fill the circle
     like the mockup. */
  width: 2rem;
  height: 2rem;
  display: block;
}
.card-accordion .accordion-header {
  padding: 0.35rem 0;
}
.card-accordion .accordion-header-title {
  color: var(--hb-accent-text, #510c76);
  font-size: 1.2rem;
}
@media (min-width: 48em) {
  .card-accordion .accordion-header-title {
    font-size: 1.3rem;
  }
}
.card-accordion .accordion-header {
  /* Plus/minus toggle moves to the right edge and takes the card's
     accent color (legacy default is purple/blue). */
}
.card-accordion .accordion-header-icon {
  margin-right: 0;
  margin-left: 1rem;
  border-color: var(--hb-accent, #510c76);
}
.card-accordion .accordion-header-icon:before, .card-accordion .accordion-header-icon:after {
  background: var(--hb-accent, #510c76);
}
.card-accordion .accordion-header:hover .accordion-header-icon {
  background: var(--hb-accent, #510c76);
  border-color: var(--hb-accent, #510c76);
}
.card-accordion .accordion.accordion-open .accordion-header-icon {
  background: var(--hb-accent, #510c76);
  border-color: var(--hb-accent, #510c76);
}
.card-accordion {
  /* Panel content aligns under the title (badge 2.9rem + 1rem gap) from
     tablet up; full-width below that. */
}
.card-accordion .accordion-content-body {
  padding: 0.35rem 0 0.75rem;
}
@media (min-width: 48em) {
  .card-accordion .accordion-content-body {
    padding-left: 3.9rem;
  }
}

/* ---- Core buttons ----
   theme.json paints buttons (purple bg / white text), but its global
   styles emit zero-specificity :where() rules that lose to the theme's
   .content a { color: blue } — pin the button text color here. */
.content a.wp-block-button__link,
a.wp-block-button__link {
  color: #fff;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.content a.wp-block-button__link:hover, .content a.wp-block-button__link:focus,
a.wp-block-button__link:hover,
a.wp-block-button__link:focus {
  color: #fff;
  /* theme.json declares an orange button hover, but its zero-
     specificity :where() rule loses to the block-level purple —
     enforce it here. */
  background-color: #ff4d00;
}

/* ---- Help bar ---- */
.help-bar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: rgba(81, 12, 118, 0.06);
  border: 1px solid rgba(81, 12, 118, 0.12);
  border-radius: 0.9rem;
  box-shadow: 0 10px 30px rgba(81, 12, 118, 0.07);
  padding: 1.5rem;
  margin: 3.5rem auto 2rem;
  max-width: 56.25em; /* same width scheme as .card-accordion above */
}
@media (min-width: 48em) {
  .help-bar {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 1.75rem 0.5rem;
  }
}
.help-bar.alignwide {
  max-width: none;
}

/* Section template: the sidebar grid column defines the default width.
   Wide breaks OUT of the column and spans the full container (under the
   sidebar), matching the mockup's full-width help bar — the negative
   margin mirrors the grid's sidebar column + gap at each breakpoint. */
.section-main .card-accordion,
.section-main .help-bar {
  max-width: none;
}

@media (min-width: 64em) {
  .section-main .card-accordion.alignwide,
  .section-main .help-bar.alignwide {
    margin-left: -19rem;
  }
}
@media (min-width: 100em) {
  .section-main .card-accordion.alignwide,
  .section-main .help-bar.alignwide {
    margin-left: -22rem;
  }
}
.help-bar-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  /* 40 / 30 / 30 split (4:3:3). */
  flex: 3;
}
.help-bar-cell:first-child {
  flex: 4;
}
@media (min-width: 48em) {
  .help-bar-cell {
    padding: 0 1.5rem;
  }
  .help-bar-cell + .help-bar-cell {
    border-left: 1px solid rgba(81, 12, 118, 0.15);
  }
}

/* Every icon gets the filled-circle treatment. margin: 0 matters — the
   theme auto-centers bare spans inside .content, which floated the plain
   glyphs off-left and broke the stacked mobile layout. */
.help-bar-icon {
  flex: 0 0 auto;
  margin: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #510c76;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-bar-icon svg {
  width: 2rem;
  height: 2rem;
  display: block;
}

/* Cell headings are real core/heading blocks (any level) — outrank the
   theme's element heading styles (.content h2/h3 are centered, 2rem,
   per-level colors) with double-class-plus-element selectors. Editors can
   still override size/color per heading via block controls. */
.help-bar .help-bar-text h2,
.help-bar .help-bar-text h3,
.help-bar .help-bar-text h4 {
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 700;
  color: #510c76;
  margin: 0;
  text-align: left;
}

.help-bar .help-bar-text {
  text-align: left;
  /* A theme rule auto-centers this div inside the cell's free space,
     indenting cells whose text is narrow (the Call us cell) — pin it
     left and let it own the remaining width. */
  margin: 0;
  flex: 1;
  min-width: 0;
}
.help-bar .help-bar-text p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
}
.help-bar .help-bar-text a {
  font-weight: 700;
}