/*
Theme Name: Cherry Bus Palawan
Theme URI: https://onlinecreativesolutions.com/
Description: GeneratePress child theme for Cherry Bus Palawan — self-hosted fonts, fluid type, GSAP motion layer, booking shortcode. Design system lives in GP Global Colors + GenerateBlocks Pro Global Styles.
Author: Online Creative Solutions
Author URI: https://onlinecreativesolutions.com/
Template: generatepress
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
Tested up to: 7.1
Text Domain: cherrybus-child
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   0. Design tokens (audit Rev 2 — Phases 2 and 5). The fluid
   scale, elevation and radii get names here so pages stop
   hard-coding them. The type values are the ones already
   shipping — this names them, it does not restyle the site.
   Colours stay in GP Global Colors; never duplicate them here.
   ============================================================ */
:root {
  /* Type. */
  --fs-display: clamp(34px, 4.6vw, 54px);
  --fs-h2:      clamp(25px, 2.6vw, 34px);
  --fs-h3:      clamp(19px, 1.7vw, 23px);
  --fs-lead:    clamp(16.5px, 1.5vw, 19px);
  --fs-body:    16px;
  --fs-eyebrow: 0.8125rem;
  --lh-body:    1.65;
  --lh-tight:   1.16;

  /* Measure — prose columns cap here (spec: ~70ch). */
  --measure: 70ch;

  /* Elevation. Tinted with the brand contrast (#1a1113) rather
     than pure black, so cards sit on the warm base without the
     shadow reading grey. */
  --shadow-sm: 0 1px 2px rgba(26, 17, 19, 0.06), 0 1px 3px rgba(26, 17, 19, 0.08);
  --shadow-md: 0 4px 8px rgba(26, 17, 19, 0.06), 0 8px 20px rgba(26, 17, 19, 0.10);
  --shadow-lg: 0 12px 24px rgba(26, 17, 19, 0.10), 0 24px 48px rgba(26, 17, 19, 0.12);

  /* Radii — 16px is this build's established card radius. */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;
}

/* ============================================================
   1. Self-hosted fonts (files: Task 2). woff2 only, swap.
   ============================================================ */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-black-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/figtree-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/figtree-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/figtree-700.woff2') format('woff2');
}

/* ============================================================
   2. Fluid type scale (spec §2). GP Customizer has no clamp()
   support, so sizes live here; font FAMILIES are assigned in the
   Customizer (leave Customizer font-size fields untouched).
   ============================================================ */
body {
  font-size: var(--fs-body, 16px);
  line-height: var(--lh-body, 1.65); /* 1.6 → 1.65, audit Phase 2 */
  overflow-x: clip; /* clip, never hidden — motion.js scroll math (spec §7.5) */
}
h1 {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight, 1.16);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* The small uppercase label that sits above a section heading.
   Named so pages stop re-declaring the same four properties. */
.cb-eyebrow {
  font-size: var(--fs-eyebrow, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Prose measure (audit Phase 2). The guide posts render their body
   through core's post-content wrapper, so the run of text sits at
   .cb-prose > .entry-content > p — one level below the wrapper.
   Both levels are listed, and child combinators are used throughout
   so card grids, tables and figures keep the full column width. */
.cb-prose > p,
.cb-prose > ul,
.cb-prose > ol,
.cb-prose > .entry-content > p,
.cb-prose > .entry-content > ul,
.cb-prose > .entry-content > ol,
.cb-article > p,
.cb-article > ul,
.cb-article > ol {
  max-width: var(--measure, 70ch);
}

/* ============================================================
   3. Accessibility (spec §9)
   ============================================================ */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #ed1c24);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   4. Motion support (spec §7). Nothing here hides content —
   motion.js hides elements only after GSAP is confirmed loaded.
   ============================================================ */
.a-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.2em;  /* mask taller than the line so commas/descenders */
  margin-bottom: -0.2em;  /* aren't clipped (spec §7)                        */
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: var(--accent-600, #c8121c);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.washed {
  filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}

/* ============================================================
   5. Fare/schedule tables (spec §6). Desktop styling is the
   gb-table Global Style; the ≤900px stacked collapse needs
   td::before + data-label, which only CSS can do.
   ============================================================ */
.gb-table table {
  width: 100%;
  border-collapse: collapse;
}
.gb-table th,
.gb-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider, rgba(26, 17, 19, 0.15));
  text-align: left;
}
.gb-table thead th {
  background: var(--base-2, #fbeeef);
}
.gb-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent, #ed1c24) 7%, transparent);
}
@media (max-width: 900px) {
  .gb-table thead { display: none; }
  .gb-table table,
  .gb-table tbody,
  .gb-table tr,
  .gb-table td { display: block; width: 100%; }
  .gb-table tr {
    border-bottom: 2px solid var(--divider, rgba(26, 17, 19, 0.15));
    padding: 8px 0;
  }
  .gb-table td {
    border-bottom: 0;
    padding: 6px 16px;
  }
  .gb-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--accent-700, #9e0d16);
    margin-bottom: 2px;
  }
}

/* ============================================================
   6. Booking embed frame + fallback (spec §5). Frame min-heights
   live here so the fallback renders correctly even before the
   gb-embed-frame Global Style exists on staging.
   ============================================================ */
.gb-embed-frame {
  position: relative;
  min-height: 620px;
  border-radius: var(--radius-lg, 16px);
  overflow: clip;
  background: var(--base-2, #fbeeef);
  border: 1px solid var(--divider, rgba(26, 17, 19, 0.15));
}
@media (max-width: 900px) {
  .gb-embed-frame { min-height: 720px; }
}

/* Loading skeleton for the booking embed (audit Phase 4). This is
   the conversion surface, so the frame must not read as broken
   while easyb.lol connects. The shimmer sits behind the iframe and
   is dismissed by the iframe's load event, which sets data-loaded
   (see inc/booking-shortcode.php). With JS off the iframe simply
   paints over it, so the degradation is safe either way. */
.gb-embed-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0) 100%),
    var(--base-2, #fbeeef);
  background-size: 220% 100%, auto;
  background-repeat: no-repeat;
  animation: cb-shimmer 1.4s linear infinite;
  transition: opacity 0.35s ease;
}
.gb-embed-frame:has(iframe[data-loaded])::before {
  opacity: 0;
  animation: none;
}
.gb-embed-frame iframe {
  position: relative;
  z-index: 1;
}
@keyframes cb-shimmer {
  from { background-position: -110% 0, 0 0; }
  to   { background-position:  210% 0, 0 0; }
}
/* Reduced motion keeps the placeholder tint, drops the sweep. */
@media (prefers-reduced-motion: reduce) {
  .gb-embed-frame::before { animation: none; }
}
.cb-booking-fallback {
  padding: clamp(24px, 4vw, 48px);
}
.cb-booking-fallback h3 {
  margin: 0 0 12px;
}
.cb-booking-fallback .cb-phones {
  display: grid;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.cb-booking-fallback .cb-phones a {
  font-weight: 700;
  color: var(--accent-700, #9e0d16);
  text-decoration: none;
}
.cb-booking-fallback .cb-phones a:hover {
  color: var(--accent-800, #720a10);
}
.cb-booking-fallback .cb-messenger {
  display: inline-block;
  background: var(--accent-600, #c8121c);
  color: #ffffff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  text-decoration: none;
  margin: 0 0 24px;
}
.cb-booking-fallback .cb-messenger:hover {
  background: var(--accent-700, #9e0d16);
  color: #ffffff;
}
.cb-booking-fallback table caption {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent-700, #9e0d16);
  padding-bottom: 8px;
}

/* ============================================================
   7. Promo bar + mobile sticky book bar shells (spec §8).
   Markup ships as GP Elements on staging; classes styled here.
   ============================================================ */
.cb-promo {
  background: var(--accent-800, #720a10);
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding: 9px 20px;
}
/* The bar's padding is symmetric; GP's default paragraph margin was
   adding 21px below the text, so the bar read 9px top / 30px bottom. */
.cb-promo p { margin: 0; }
.cb-promo a {
  color: #ffffff;
  text-decoration: underline;
}
.cb-sticky-book { display: none; }
@media (max-width: 900px) {
  .cb-sticky-book {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--base, #fdf9f8);
    border-top: 1px solid var(--divider, rgba(26, 17, 19, 0.15));
    padding: 12px 16px;
  }
  .cb-sticky-book .cb-sticky-fare {
    font-size: 13px;
    font-weight: 600;
    color: var(--contrast, #1a1113);
  }
  .cb-sticky-book .cb-sticky-cta {
    background: var(--accent-600, #c8121c);
    color: #ffffff;
    border-radius: 999px;
    padding: 12px 22px;
    min-height: 44px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  body:has(.cb-sticky-book) .site-footer {
    /* Clearance has to track the bar's REAL height. A fixed value is wrong on
       two counts: the fare line wraps to two lines on a narrow phone, and
       env(safe-area-inset-bottom) adds ~34px on any device with a home
       indicator - so on those devices the last lines of the footer ended up
       underneath the bar. nav.js publishes the measured height; the fallback
       is generous rather than tight because being too short is what breaks. */
    padding-bottom: calc(var(--cb-stickybar-h, 96px) + 16px); /* keep the bar off the footer (spec §8) */
  }
}

/* ============================================================
   8. Interface polish pass (Web Interface Guidelines)
   ============================================================ */

h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6, p, li, td, th, a { overflow-wrap: break-word; }

.cb-stat,
.gb-table td,
.gb-table th,
.cb-price,
.cb-price-muted { font-variant-numeric: tabular-nums; }

a, button, summary, [role="button"], input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent, #ed1c24) 18%, transparent);
}

:target,
h2[id], h3[id], section[id] { scroll-margin-top: 96px; }

:root { color-scheme: light; }

@media (max-width: 900px) {
  .cb-sticky-book {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

.cb-header:focus-within { z-index: 60; }

img { max-width: 100%; height: auto; }
.cb-img-cover { height: 100%; }

/* ============================================================
   9. Flow rhythm — space between siblings inside a section.
   Grids and cards had no bottom margin, so the text and buttons
   that follow them sat flush against the row above.
   ============================================================ */
.gb-grid-3, .gb-grid-4, .gb-grid-2x, .gb-split, .gb-bento, .gb-table, .cb-panel { margin-bottom: 32px; }
.gb-grid-3:last-child, .gb-grid-4:last-child, .gb-grid-2x:last-child, .gb-split:last-child, .gb-bento:last-child, .gb-table:last-child, .cb-panel:last-child { margin-bottom: 0; }

/* A heading claims space above it and sits close to what it introduces. */
section h2.gb-text, section h3.gb-text { margin-top: 40px; margin-bottom: 14px; }
section h2.gb-text:first-child, section h3.gb-text:first-child,
.cb-cardbody h3.gb-text:first-child, .gb-card h3.gb-text:first-child,
.gb-kicker + h1, .gb-kicker + h2, .gb-kicker + h3 { margin-top: 0; }
/* Kicker and its heading are one unit. */
.gb-kicker { margin-bottom: 10px; }

/* The live-status chip is a pill, not a full-width band. */
.gb-chip-live { align-self: flex-start; width: fit-content; margin-top: 22px; }

/* Trailing notes need air after the row they qualify. */
.cb-fine { margin-top: 18px; }
.cb-btnrow { margin-top: 24px; }
.cb-btnrow .cb-fine, .cb-btnrow .cb-muted { margin-top: 0; }
/* ...but the header row is a centred flex line, not prose flow. There the
   24px is applied to a flex item, `align-items: center` centres the MARGIN
   box, and the button lands 12px below the logo while the header grows 24px
   taller than it should. Rhythm belongs to the document flow only. */
.cb-headerinner > .cb-btnrow,
.cb-sticky-book > .cb-btnrow,
.cb-nav > .cb-btnrow { margin-top: 0; }

/* Figure captions belong to their image, not to the next block. */
figure { margin: 0; }
figcaption { margin-top: 12px; margin-bottom: 4px; line-height: 1.45; }

/* Table caption reads as a label above its table. */
.gb-table table { margin-top: 0; }
.gb-table caption { caption-side: top; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--accent-700, #9e0d16); padding: 0 0 12px; }

/* An image frame with nothing to show must not reserve height. */
.cb-postthumb:not(:has(img[src]:not([src='']))) { display: none; }
.cb-prose img[src=''], .cb-postthumb img[src=''] { display: none; }

/* ============================================================
   10. Loop card evenness — excerpts vary wildly in length, so
   clamp them and let the card body fill, keeping a row level.
   ============================================================ */
.cb-cardlink { display: flex; flex-direction: column; height: 100%; }
.cb-cardbody { display: flex; flex-direction: column; flex: 1 1 auto; }
.cb-cardbody .cb-muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-cardtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-cardbody .cb-arrow { margin-top: auto; padding-top: 16px; }
/* Core's featured image block fills the frame like our own media does. */
.cb-postthumb .wp-block-post-featured-image { height: 100%; margin: 0; }
.cb-postthumb .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Section 11 removed: content-visibility broke ScrollTrigger measurement,
   leaving revealed sections stuck at partial opacity. The 3G win came from
   the image work, not from this. */

/* ============================================================
   11. Legacy article content (travel-guide posts).
   The five guide posts predate this design. They carry stock
   WordPress blocks - media-text pairs and an `is-nowrap` image
   row - authored against a much wider column. Dropped into the
   760px prose measure they collapse: the nowrap row squeezes
   four photos down to 138-202px each, every one a different
   size, on a ragged baseline.

   These rules make the legacy blocks sit correctly in the new
   measure without rewriting the authored content.
   ============================================================ */

/* An image row becomes an even grid. Flex was the obvious fix, but
   with `flex: 1 1 <basis>` the final wrapped row grows to fill the
   line - three photos at 224px followed by one at 697px. A grid
   sizes every track the same regardless of how the last row falls,
   and auto-fit re-columns it on narrow screens for free. */
.cb-article .wp-block-group.is-layout-flex:has(> figure),
.cb-prose .wp-block-group.is-layout-flex:has(> figure) { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: stretch; gap: 12px; margin-block: 8px 22px; }
.cb-article .wp-block-group.is-layout-flex:has(> figure) > figure,
.cb-prose .wp-block-group.is-layout-flex:has(> figure) > figure { margin: 0; }
/* One shared aspect ratio is what makes the row read as a row. */
.cb-article .wp-block-group.is-layout-flex:has(> figure) > figure img,
.cb-prose .wp-block-group.is-layout-flex:has(> figure) > figure img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }

/* A media-text pair is a two-column grid. If its image is missing
   the grid still reserves the column, leaving the text stranded in
   half the measure beside a blank gap - so collapse it to a block. */
.cb-article .wp-block-media-text:not(:has(img)),
.cb-prose .wp-block-media-text:not(:has(img)) { display: block; }
.cb-article .wp-block-media-text__media:empty,
.cb-prose .wp-block-media-text__media:empty { display: none; }

/* ============================================================
   12. Icons.
   Every icon accompanies a visible label, so these rules are
   only about optical alignment: an icon sized in `em` tracks
   its label's type scale, and the 0.11em nudge corrects for
   the fact that a 24x24 box is optically centred lower than a
   cap-height letterform beside it.
   ============================================================ */
.cb-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.11em; stroke: currentColor; fill: none; }
/* A label and its icon are one unit and must never wrap apart. */
.cb-iconrow { display: inline-flex; align-items: center; gap: 0.5em; }
/* Card icons lead the card, so they are larger and carry the accent tint. */
.gb-card > .cb-icon, .cb-cardbody > .cb-icon, .cb-icon-lead { width: 26px; height: 26px; color: var(--accent-600, #c8121c); margin-bottom: 12px; vertical-align: baseline; }
/* Footer contact rows: the icon is a fixed rail so numbers and
   addresses beside them line up on a single left edge. */
.site-footer .cb-iconrow .cb-icon, .cb-footcontact .cb-icon { width: 17px; height: 17px; opacity: 0.75; }

/* A contact link is icon + label on one baseline, and must never wrap between the two. */
.cb-footlink:has(.cb-icon) { display: flex; align-items: center; gap: 9px; }

/* The fare is supporting detail and may shrink; the CTA never does. */
@media (max-width: 900px){
  .cb-sticky-book .cb-sticky-fare { min-width: 0; }
  .cb-sticky-book .cb-sticky-cta { flex: 0 0 auto; }
}

/* ============================================================
   13. Horizontal scrollers must establish a containing block.

   WordPress renders star ratings with a `.screen-reader-text`
   span, and that span is `position: absolute`. Inside a
   `position: static` scroller its containing block resolves to
   an ancestor OUTSIDE the scroller, so the scroller's
   `overflow-x` does not clip it - and its 1px box, laid out
   wherever its content sits along the scroll track, stretches
   the document instead.

   On the home page that pushed the document to 951px against a
   374px viewport. iOS Safari lets a page pan sideways even with
   `overflow-x: hidden` on body, so the visitor could pan away
   from the fixed book bar and it read as unpinned - visible
   only 'when you scroll to the side'.

   One line makes the scroller its own containing block, so
   absolutely positioned descendants are clipped with everything
   else. Cheap insurance for any future scroller too.
   ============================================================ */
.cb-carousel,
.gb-table,
.gb-embed-frame { position: relative; }

/* ============================================================
   14. Gallery caption scrim.
   WordPress overlays gallery captions as white text directly on
   the photo. Over bright water or sky that white can drop below
   any usable contrast - and these captions carry the CC BY
   attributions, which must stay legible to keep the licence
   terms honoured. A bottom gradient guarantees a dark ground
   under the text regardless of the photograph behind it.
   ============================================================ */
/* Core ships its own weak 0.4 gradient at specificity (0,4,1) -
   `.wp-block-gallery.has-nested-images figure.wp-block-image
   figcaption` - so this must match it to win the cascade. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-block-gallery .wp-element-caption {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.66) 55%);
  color: #ffffff;
  padding: 30px 14px 12px;
  margin: 0;
}

/* ============================================================
   15. Hero direction chooser + trust stat (landing page).

   The hero previously ended in two plain links, with no way to
   begin a booking in the first viewport. Every comparable
   operator - 12Go, National Express, BusOnlineTicket, and even
   phbus.com's own page about Cherry Bus - puts a direction
   control there instead.

   Deliberately a direction chooser and NOT a date picker. The
   booking engine is an easyb.lol iframe on /book/, and
   inc/booking-shortcode.php can only pass it `liner` - there is
   no parameter to pre-fill a date or a direction. A date field
   here would collect a date that silently vanished on the next
   page, which is worse than no field at all. Each direction
   instead links to its real route page, which carries that
   direction's schedule and its own booking CTA.
   ============================================================ */
.cb-herotrust { font-weight: 700; font-size: 15px; color: var(--accent-700, #9e0d16); margin: 10px 0 16px; font-variant-numeric: tabular-nums; }
.cb-heroquick { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 6px; padding: 18px; background: var(--base, #fdf9f8); border: 1px solid var(--divider, rgba(26,17,19,0.15)); border-radius: 16px; }
.cb-heroquick-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-700, #9e0d16); margin: 0; }
.cb-heroquick-dir { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* A real link per direction: it goes somewhere that exists and works without JavaScript. */
.cb-heroquick-dir a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--accent-300, #ffb0ae); border-radius: 999px; background: #ffffff; font-size: 14px; font-weight: 700; color: var(--accent-800, #720a10); text-decoration: none; }
.cb-heroquick-dir a:hover, .cb-heroquick-dir a:focus-visible { background: var(--accent-100, #fff1f1); border-color: var(--accent-600, #c8121c); }
@media (min-width: 560px) { .cb-heroquick-dir { flex-wrap: nowrap; } }

/* ============================================================
   16. Accordions (audit Phase 4). Core's <details> ships a native
   marker that cannot be transitioned, so it is replaced with a
   chevron that rotates on open. Also buys the summary a real
   44px touch target, which the native marker never had.
   ============================================================ */
.wp-block-details > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 0;
  min-height: 44px;
  font-weight: 700;
}
.wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.wp-block-details > summary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--accent-600, #c8121c);
  border-bottom: 2px solid var(--accent-600, #c8121c);
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}
.wp-block-details[open] > summary::after {
  transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-details > summary::after { transition: none; }
}