/* =============================================================
   SERVICE PAGE  (service-page.php)

   Rebuilt on the same system as the front page, so a visitor moving from the
   home page to a service page meets the same components rather than a second
   design that happens to share a palette:

     - ONE RHYTHM. --sv-section-y is the padding above and below every
       section. Sections used to set their own (4rem here, 0 there, plus
       .sectio-to / .fo-top / .split-fo one-off overrides), which is why the
       gaps down the page never settled.
     - GROUND IS A MODIFIER. .sv-bg-white / .sv-bg-cream are set in the
       template, and two neighbours sharing a ground collapse the doubled gap
       between them.
     - SHARED COMPONENTS. Buttons come from the BUTTON SYSTEM in theme.css
       (.fr-btn), and the call-to-action blocks from CALL-TO-ACTION BLOCKS in
       the same file (.fr-cta). This file no longer defines either.

   Most of the copy on this page is plugin output — [page_section] for the
   split rows and [page_faq] for the accordion — so the rules below have to
   style whatever markup those emit rather than markup this template controls.
   That is why the split rows and the FAQ are styled by element rather than by
   class.
   ============================================================= */

:root {
  --sv-orange: #f2a820;
  --sv-orange-soft: var(--icon-bg);   /* Symbolfläche, siehe theme.css */
  --sv-dark: #2F5D34;   /* das Grün des Ölzweigs, siehe --brand-green in theme.css */
  --sv-ink: #2a2e34;
  --sv-green: #2F5D34;
  --sv-text: #444242;
  --sv-muted: #5c5a5a;
  --sv-cream: #fdf7ec;
  --sv-cream-2: #fdfaf5;
  --sv-border: #e5e7eb;
  --sv-edge: 15px;
  --sv-section-y: 4rem;
  --sv-head-gap: 2.5rem;
  --sv-card-radius: 16px;
}

/* `clip`, not `hidden`: hidden on one axis promotes the other to `auto`,
   which would make this wrapper its own scroll container. */
.sv-page {
  overflow-x: clip;
}

.sv-page .sv-section {
  position: relative;
  width: 100%;
  max-width: 100vw;
}

.sv-page .sv-inner {
  position: relative;
  z-index: 1;
  padding: var(--sv-section-y) var(--sv-edge);
}

/* Two neighbours on the same ground: the first one's bottom padding carries
   the gap on its own. With both paying it and no colour change to explain the
   doubling, it reads as a hole rather than a break. */
.sv-page .sv-bg-white + .sv-bg-white > .sv-inner,
.sv-page .sv-bg-cream + .sv-bg-cream > .sv-inner {
  padding-top: 0;
}

.sv-page .sv-bg-white {
  background-color: #fff;
}

.sv-page .sv-bg-cream {
  background-color: var(--sv-cream);
}

.sv-page figure {
  margin: 0;
}

.sv-page img {
  max-width: 100%;
  height: auto;
}

/* ---------- section header ---------- */

.sv-page .sv-head {
  max-width: 880px;
  margin: 0 auto var(--sv-head-gap);
  text-align: center;
}

.sv-page .sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #b8790a;
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sv-page .sv-eyebrow::before,
.sv-page .sv-eyebrow::after {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--sv-orange);
}

/* clamp() statt fester Pixel und eigener Verkleinerungsstufen: eine Zeile
   trägt Telefon bis Desktop, und die Größe folgt derselben Kurve wie h2 in
   theme.css. */
.sv-page .sv-section-title {
  width: auto; /* theme.css sets width:100% on every heading */
  margin: 0 auto;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.25;
  text-wrap: balance;
}

.sv-page .sv-lead {
  max-width: 760px;
  margin: 14px auto 0;
  color: var(--sv-muted);
  font-size: var(--fs-md);
  line-height: 1.75;
  text-align: center;
}

/* =============================================================
   1. HERO

   The same dark scrim as the home page banner rather than the shared gold
   one. The plugin supplies the photograph, the heading and the copy, so the
   heading and paragraph are styled by element — there is no class to hook.
   ============================================================= */

.sv-hero {
  min-height: 460px;
  display: flex;
  align-items: center;
  color: #fff;
}

.sv-hero-media,
.sv-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sv-hero-media img {
  position: relative;
  object-fit: cover;
}

.sv-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--fr-scrim);
}

.sv-hero .sv-inner {
  width: 100%;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.sv-hero-copy {
  max-width: 680px;
}
.sv-hero-copy .page-section-1 a:hover{color: var(--sv-cream);}
/*
 * WHAT [page_section] ACTUALLY EMITS.
 *
 * Not a bare heading. Every field comes back wrapped in a div:
 *
 *   [page_section number="1" field="title" class="sv-title"]
 *     -> <div class="page-section page-section-1 sv-title"><h1>...</h1></div>
 *
 * So the heading is a GRANDCHILD of .sv-hero-copy, and the title and the
 * description are two sibling divs rather than a heading followed by
 * paragraphs. The child selectors written against the plain markup (`> h1`,
 * `> h2`) matched nothing at all — which is why every title on this page sat
 * straight on top of its first line of copy with no space between them.
 *
 * The gap belongs on the wrapper. The `class` attribute the shortcode accepts
 * is what names those wrappers, so the rules below address them directly
 * rather than by position — the hero has a breadcrumb ahead of the title, and
 * anything counting children would count that too.
 */
.sv-page .sv-title + .sv-desc {
  margin-top: 18px;
}

/* The size has to be set here. theme.css puts every h1 at 55px, and the
   fallback rule below — for a title field holding bare text with no heading
   tag — caps at 46px, so the same heading came out at two different sizes
   depending on how the copy happened to be entered in the meta box. 46px is
   the one that fits: these titles carry a service AND a city, so they are
   longer than a normal page's. */
.sv-hero-copy h1,
.sv-hero-copy h2 {
  width: auto;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* A title field holding bare text with no heading tag still has to look like
   a heading. Where it does hold an <h1>, the rule above wins on the heading
   itself and this only sets the block it sits in. */
.sv-hero-copy .sv-title {
  color: #fff;
  font-family: 'Inter';
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.sv-hero-copy .sv-title > :last-child {
  margin-bottom: 0;
}

.sv-hero-copy p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-md);
  line-height: 1.75;
}

.sv-hero-copy p:last-child {
  margin-bottom: 0;
}

.sv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

/* The number, set as two lines rather than hidden behind the word "Anrufen".
   Matches .fr-cta-phone on the home page but sits on a photograph, so it is
   glass rather than solid. */
.sv-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: var(--btn-h);
  padding: 8px 22px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--btn-radius);
  background-color: rgba(255, 255, 255, .12);
  color: #fff !important; /* beats theme.css's orange global a colour */
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Orange, like every other control on a dark ground. A slightly less
   transparent white was a change you had to look for. */
/* Überfahren grün — dieselbe Regel wie bei den Schaltflächen. */
.sv-hero-phone:hover,
.sv-hero-phone:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .8);
}

/* The icon disc is orange; on an orange fill it needs its own edge. */
.sv-hero-phone:hover .sv-hero-phone-ico,
.sv-hero-phone:focus-visible .sv-hero-phone-ico {
  background-color: rgba(255, 255, 255, .22);
}

.sv-hero-phone:hover .sv-hero-phone-label,
.sv-hero-phone:focus-visible .sv-hero-phone-label {
  color: rgba(255, 255, 255, .95);
}

.sv-hero-phone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.sv-hero-phone-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--sv-orange);
  color: #fff;
}

.sv-hero-phone-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}

.sv-hero-phone-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sv-hero-phone-label {
  color: rgba(255, 255, 255, .78);
  font-family: 'Inter';
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sv-hero-phone-number {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

/* =============================================================
   2 / 3 / 5 / 6 / 9 / 10. SPLIT ROWS

   Six rows, one component. They had four different classes between them
   (.split-svs, .split-fo, .fo-top, .sectio-to) doing nothing but patching
   the padding each one had set for itself.
   ============================================================= */

.sv-split .sv-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  row-gap: 2.5rem;
  align-items: center;
}

/* Title and description are two sibling divs — see the note in the hero
   above. This is where the space between them comes from; nothing inside
   either div can provide it. */
.sv-split-copy .sv-title + .sv-desc {
  margin-top: 20px;
}

.sv-split-copy h1,
.sv-split-copy h2,
.sv-split-copy h3 {
  width: auto;
  margin: 0 0 14px;
  /* font-size: 27px; */
  line-height: 1.3;
}

.sv-split-copy h1:last-child,
.sv-split-copy h2:last-child,
.sv-split-copy h3:last-child {
  margin-bottom: 0;
}

/* The title field may hold bare text rather than a heading tag. */
.sv-split-copy .sv-title {
  color: var(--sv-ink);
  font-family: 'Inter';
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
}

.sv-split-copy .sv-title > :last-child {
  margin-bottom: 0;
}

.sv-split-copy p {
  margin: 0 0 16px;
  color: var(--sv-muted);
  font-size: var(--fs-md);
  line-height: 1.75;
}

.sv-split-copy p:last-child {
  margin-bottom: 0;
}

.sv-split-copy .fr-btn {
  margin-top: 24px;
}

/* .sv-split--reverse carries no desktop rule on purpose: the template puts
   the figure before the copy in the source for those rows, so the grid places
   it left on its own. Ordering it in CSS as well would fight the markup, and
   the stacked breakpoint below is the only place order has to be forced. */

/* The plugin returns an <img>, sometimes wrapped in its own <figure> or <p>.
   Sizing the descendant image rather than a direct child covers all three. */
.sv-split-figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--sv-card-radius);
}

.sv-split-figure p {
  margin: 0;
}

/* =============================================================
   4. PACKING + EXTRAS
   ============================================================= */

.sv-duo .sv-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
  row-gap: 2.5rem;
  align-items: stretch;
}

.sv-duo-col {
  display: flex;
  flex-direction: column;
}

/* The left panel is a card; the right runs on the section ground, so the row
   does not read as two identical boxes. */
.sv-duo-col--packing {
  padding: 34px 32px 30px;
  background-color: #fff;
  border: 1px solid #f4e8d3;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(96, 58, 20, .04), 0 20px 44px -30px rgba(96, 58, 20, .3);
}

.sv-duo-col--packing .sv-eyebrow {
  color: #c2883a;
}

.sv-duo-col h2 {
  width: auto;
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.3;
}

.sv-duo .sv-duo-lead {
  max-width: 46ch;
  margin: 0 0 22px;
  color: var(--sv-muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

/* Pushed to the bottom so the card ends level with the grid opposite. */
.sv-duo .sv-duo-note {
  margin: auto 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--sv-orange);
  color: var(--sv-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.sv-duo .sv-duo-note strong {
  color: var(--sv-text);
  font-weight: 700;
}

.sv-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
}

.sv-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background-color: var(--sv-cream-2);
  border: 1px solid #f3e8d3;
  border-radius: 12px;
  color: var(--sv-text) !important; /* beats theme.css's global li colour */
  transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.sv-list li:hover {
  border-color: var(--sv-orange);
  transform: translateX(3px);
  box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 14px 28px -20px rgba(242, 168, 32, .6);
}

.sv-list-text {
  color: var(--sv-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.sv-list-text strong {
  display: block;
  color: var(--sv-text);
  font-weight: 700;
}

.sv-extras {
  list-style: none;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
}

.sv-extras li {
  display: block;
  padding: 20px 20px 22px;
  background-color: #fff;
  border: 1px solid var(--sv-border);
  border-left: 3px solid var(--sv-orange);
  border-radius: 12px;
  color: var(--sv-text) !important;
  box-shadow: 0 1px 2px rgba(29, 35, 38, .04), 0 14px 32px -26px rgba(29, 35, 38, .3);
  transition: transform .28s ease, box-shadow .28s ease;
}

.sv-extras li:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 18px 34px -22px rgba(242, 168, 32, .65);
}

.sv-list-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--sv-orange-soft);
  color: var(--icon-fg);
  transition: background-color .28s ease, color .28s ease;
}

.sv-extras .sv-list-icon {
  margin-bottom: 14px;
}

.sv-list li:hover .sv-list-icon,
.sv-extras li:hover .sv-list-icon {
  background-color: var(--icon-bg-hover);
  color: var(--icon-fg-hover);
}

.sv-list-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.sv-extras h3 {
  width: auto;
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.3;
}

.sv-extras p {
  margin: 0;
  color: var(--sv-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* =============================================================
   7. FEATURES  /  8. REASONS

   Both were a card inside a section — a panel with its own background, its
   own padding and its own heading, sitting on a section that already had
   all three. The section is the card now.
   ============================================================= */

.sv-features-grid,
.sv-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sv-feature,
.sv-reason {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  background-color: #fff;
  border: 1px solid #f3e9d6;
  border-radius: var(--sv-card-radius);
  box-shadow: 0 1px 2px rgba(96, 58, 20, .04), 0 16px 34px -28px rgba(96, 58, 20, .35);
  transition: box-shadow .28s ease, transform .28s ease;
}

/* The rule wipes in from the left rather than switching on all at once. */
.sv-feature::before,
.sv-reason::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--sv-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.sv-feature:hover::before,
.sv-feature:focus-within::before,
.sv-reason:hover::before,
.sv-reason:focus-within::before {
  transform: scaleX(1);
}

.sv-feature:hover,
.sv-reason:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 22px 40px -24px rgba(242, 168, 32, .65);
}

.sv-feature-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 13px;
  background-color: var(--sv-orange-soft);
  color: var(--icon-fg);
  transition: background-color .28s ease, color .28s ease;
}

.sv-feature:hover .sv-feature-icon {
  background-color: var(--icon-bg-hover);
  color: var(--icon-fg-hover);
}

.sv-feature-icon svg {
  display: block;
  width: 23px;
  height: 23px;
}

.sv-reason-num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background-color: var(--sv-orange);
  color: #fff;
  font-family: 'Inter';
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transition: background-color .28s ease;
}

.sv-reason:hover .sv-reason-num {
  background-color: var(--sv-ink);
}

.sv-feature h3,
.sv-reason h3 {
  width: auto;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.35;
}

.sv-feature p,
.sv-reason p {
  margin: 0;
  color: var(--sv-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.sv-reasons-foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* =============================================================
   11. FAQ

   Full width, one column, no photograph — the stock image took half the row
   and said nothing, and the accordion was squeezed into the other half.
   ============================================================= */

/* The accordion runs the full container, same 1350px as every other section
   on the page — the FAQ was the only block sitting at its own narrower width,
   which read as a stray column rather than as a decision.

   A question set across 1350px is still one line; an ANSWER across 1350px is
   not comfortable to read, so the measure is held on the answer alone, where
   it is actually needed. */
.sv-accordion {
  max-width: none;
  margin: 0;
}

.sv-accordion .pfaq-answer > * {
  max-width: 105ch;
}

/* A line of text under the accordion, deliberately not a card: the closing
   card below is the page's one call to action, and a second panel competing
   with it directly above was the whole problem. */
.sv-faq-note {
  margin: 1.75rem 0 0;
  padding: 16px 20px;
  background-color: #fff;
  border: 1px solid #f2e6d1;
  border-radius: 12px;
  color: var(--sv-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: center;
}

.sv-faq-note strong {
  color: var(--sv-ink);
  font-weight: 700;
}

.sv-faq-note a {
  color: #b8790a;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sv-faq-note a:hover,
.sv-faq-note a:focus-visible {
  color: var(--sv-ink);
}

/* =============================================================
   12. CLOSING
   ============================================================= */

/* The closing block is the shared .fr-cta--panel from theme.css. Only two
   things are local: the ground, and the reassurance line under the copy.

   .fr-cta--panel is a WHITE card, and this section is white — so it takes the
   cream instead. Same trade the front page's FAQ panel makes on its white
   section: the panel is always whichever ground its section is not. */
.sv-closing-cta {
  background-color: var(--sv-cream);
  border-color: #f2e4d1;
}

.sv-closing-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 16px 0 0;
  color: var(--sv-muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.sv-closing-note span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sv-closing-note svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--sv-orange);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media only screen and (max-width: 1200px) {
  :root {
    --sv-section-y: 3.5rem;
  }


  .sv-split .sv-inner,
  .sv-duo .sv-inner {
    column-gap: 2.5rem;
  }

  .sv-features-grid,
  .sv-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --sv-section-y: 3rem;
    --sv-head-gap: 2rem;
  }

  .sv-hero {
    min-height: 0;
  }

  .sv-hero .sv-inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Stacked, so the scrim no longer needs to be heaviest on one side. */
  .sv-hero-overlay {
    background: var(--fr-scrim-stacked);
  }

  .sv-split .sv-inner,
  .sv-duo .sv-inner {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  /* Copy first on every stacked row, including the reversed ones. */
  .sv-split .sv-split-copy {
    order: 1;
  }

  .sv-split .sv-split-figure {
    order: 2;
  }

  .sv-duo-col--packing {
    padding: 28px 24px 26px;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --sv-section-y: 2.5rem;
    --sv-head-gap: 1.75rem;
  }

  .sv-duo-col h2 {
    font-size: 23px;
  }

  .sv-split-copy h1,
  .sv-split-copy h2,
  .sv-split-copy h3,
  .sv-split-copy .sv-title {
    font-size: 23px;
  }

  .sv-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sv-hero-phone {
    justify-content: flex-start;
  }

  .sv-features-grid,
  .sv-reasons-grid,
  .sv-extras {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-feature,
  .sv-reason {
    padding: 22px 20px 24px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .sv-hero-phone,
  .sv-list li,
  .sv-extras li,
  .sv-list-icon,
  .sv-feature,
  .sv-feature::before,
  .sv-feature-icon,
  .sv-reason,
  .sv-reason::before,
  .sv-reason-num {
    transition: none;
  }

  .sv-hero-phone:hover,
  .sv-list li:hover,
  .sv-extras li:hover,
  .sv-feature:hover,
  .sv-reason:hover {
    transform: none;
  }
}

/* =============================================================
   [page_faq] — the plugin's accordion

   This markup belongs to the plugin, not to the theme: .page-faq-accordion
   wrapping .pfaq-item / .pfaq-question / .pfaq-answer, toggled by an `open`
   class from assets/js/front-page.js. The rules below only restyle it to
   match the accordions elsewhere on the site.
   ============================================================= */

.page-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
  font-family: inherit;
}

.page-faq-accordion .pfaq-item {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.page-faq-accordion .pfaq-item:hover {
  border-color: #f0d9b4;
}

.page-faq-accordion .pfaq-item.open {
  border-color: var(--sv-orange);
  box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 16px 34px -22px rgba(242, 168, 32, .5) !important;
}

.page-faq-accordion .pfaq-question {
  position: relative;
  margin: 0;
  padding: 20px 60px 20px 22px !important;
  background: transparent !important;
  color: var(--sv-ink);
  font-size: 17px !important;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
}

/* The plugin ships a "+" here; this is a chevron drawn from two borders. */
.page-faq-accordion .pfaq-question::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  right: 26px;
  width: 10px;
  height: 10px;
  border: 0;
  border-right: 2.4px solid var(--sv-orange);
  border-bottom: 2.4px solid var(--sv-orange);
  background: none;
  transform: translateY(-75%) rotate(45deg) !important;
  transition: transform .25s ease;
}

.page-faq-accordion .pfaq-item.open .pfaq-question::after,
.page-faq-accordion .pfaq-item.active .pfaq-question::after,
.page-faq-accordion .pfaq-item.is-open .pfaq-question::after,
.page-faq-accordion .pfaq-item[aria-expanded="true"] .pfaq-question::after,
.page-faq-accordion .pfaq-question[aria-expanded="true"]::after {
  transform: translateY(-25%) rotate(-135deg) !important;
}

.page-faq-accordion .pfaq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  color: var(--sv-muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
  transition: max-height .35s ease, padding .25s ease;
}

.page-faq-accordion .pfaq-answer p {
  margin: 0 0 18px;
}

.page-faq-accordion .pfaq-item.open .pfaq-answer,
.page-faq-accordion .pfaq-item.active .pfaq-answer,
.page-faq-accordion .pfaq-item.is-open .pfaq-answer,
.page-faq-accordion .pfaq-item[aria-expanded="true"] .pfaq-answer {
  max-height: 800px;   /* generous cap for long answers */
  padding-top: 4px;
}

@media (max-width: 767px) {
  .page-faq-accordion .pfaq-question {
    padding: 16px 48px 16px 18px !important;
    font-size: 15.5px !important;
  }

  .page-faq-accordion .pfaq-answer {
    padding: 0 18px;
  }

  .page-faq-accordion .pfaq-question::after {
    right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq-accordion .pfaq-item,
  .page-faq-accordion .pfaq-question::after,
  .page-faq-accordion .pfaq-answer {
    transition: none;
  }
}