/* ============================================================
   Jersey Jump — Global Styles
   ============================================================ */

/* ============================================================
   BODY
   flex column layout keeps the footer pinned to the bottom on
   short pages — .site-main below takes up the remaining space.
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-background);
}

.site-main {
  flex: 1;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ============================================================
   SECTION
   ============================================================ */
section {
  padding-block: 64px;
}

/* ============================================================
   SECTION HEADER
   Title + description centered above a section's main content
   (grid, row, etc). Reusable across any section that needs one.
   ============================================================ */
.section-header {
  text-align: center;
  max-width: 1039px;
  margin-inline: auto;
  margin-block-end: 2.5rem;
}

.section-description {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-block-start: 0.625rem;
}

/* Modifier — lighter/translucent white, for use on dark backgrounds. */
.section-description--light {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   SKIP TO CONTENT (Accessibility)
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 12px 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
}

/* ============================================================
   PUFFY HEADING
   Reusable "highlighter stroke" title treatment — white fill with a
   thick puffy CTA-orange background that follows the exact letter
   shapes. Apply to any title/heading element (h1–h3, span, etc.),
   alongside --font-accent for the font.

   Uses -webkit-text-stroke (em-based, so it scales with font-size).
   Accepted trade-offs, confirmed after comparing against a
   text-shadow-stamped-circle alternative: -webkit-text-stroke has no
   stroke-linejoin control, so acute angles (e.g. the top of a "W")
   show a small miter spike; and at this thickness small letter
   counters (e.g. the hole in "O") don't fully stay open. 0.5em fully
   closed the "O" but made the spike worse — 0.43em is the accepted
   middle ground.
   ============================================================ */
.heading-puffy {
  color: var(--color-white);
  -webkit-text-stroke: 0.43em var(--color-cta);
  paint-order: stroke fill;
}

/* ============================================================
   SECTION HEADING
   Standard regular (non-puffy) section title treatment — Rubik
   Semibold, brand blue. Apply to any section-level h2 site-wide.
   ============================================================ */
.heading-section {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-blue-800);
  line-height: 1.2;
  font-size: clamp(22px, 4vw, 28px);
  margin: 0;
}

/* Modifier — same treatment, white text for use on dark backgrounds. */
.heading-section--white {
  color: var(--color-white);
}

/* ============================================================
   ACCENT HEADING
   Regular-weight Catchy Melody treatment (not the puffy stroke) —
   apply to any section-level h2 that should carry the brand accent
   font instead of the standard Rubik heading.
   ============================================================ */
.heading-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-blue-700);
  line-height: 1.2;
  font-size: clamp(28px, 4vw, 34px);
  margin: 0;
}

/* ============================================================
   FEATURE CARDS
   Reusable image + title + description card, used across several
   contexts (homepage "How to Book" — 4 steps — and "Rentals for
   Every Type of Celebration" on About — 6 steps — both 4-per-row at
   the widest tier; the "How to Book" steps on each single
   rental-category page — 5 steps — need 5-per-row instead, via the
   .feature-cards-grid--five modifier). Background color is decided
   by context, not per card — default is the light-blue tint (used
   wherever the page itself is white); add .feature-cards-grid--white
   on the wrapping grid for contexts where the page itself is already
   light blue (e.g. single-service pages) so the cards read as white
   instead.

   Flexbox with a fixed per-card width (not CSS Grid's repeat(N,1fr))
   + justify-content:center — same pattern as .rental-item-grid: a
   row with fewer cards than the target column count centers them as
   a group instead of leaving an unfilled grid track (e.g. About's 6
   cards land 4+2, second row centered, with no special-casing).
   ============================================================ */
.feature-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.feature-card {
  width: 100%;
  background-color: var(--color-blue-150);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
}

@media (min-width: 667px) {
  .feature-card {
    width: calc((100% - 1.5rem) / 2);
  }
}

@media (min-width: 1024px) {
  .feature-card {
    width: calc((100% - 2 * 1.5rem) / 3);
  }
}

@media (min-width: 1200px) {
  .feature-card {
    width: calc((100% - 3 * 1.5rem) / 4);
  }
}

.feature-cards-grid--white .feature-card {
  background-color: var(--color-white);
}

/* 5-per-row at the widest tier instead of the 4-per-row default —
   only the single rental category page's How to Book (5 steps)
   needs this. */
@media (min-width: 1200px) {
  .feature-cards-grid--five .feature-card {
    width: calc((100% - 4 * 1.5rem) / 5);
  }
}

.feature-card-media {
  margin-block-end: 1rem;
}

.feature-card-media img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.feature-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-blue-800);
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0;
}

.feature-card-description {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-block-start: 0.5rem;
}

/* Centered CTA below a .feature-cards-grid — used by the single
   rental category's How to Book and the About page's Celebration
   Types section. */
.feature-cards-cta {
  text-align: center;
  margin-block-start: 2.5rem;
}

/* ============================================================
   PHONE CTA
   The exact same compact rounded box as .footer-phone (navy
   background, 16px radius, yellow accent-font number) — not a
   full-width band. Centered via margin-inline:auto, sized to its
   own content. Used on every single rental category page (below
   the rental items) and the Packages page (below the closing text).
   ============================================================ */
.phone-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  width: fit-content;
  margin-inline: auto;
  margin-block-start: 3rem;
  background-color: var(--color-navy-700);
  border-radius: 16px;
  padding: 1rem 3rem;
}

.phone-cta-label {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.phone-cta-number {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-accent);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 500;
  color: var(--color-yellow);
  text-decoration: none;
}

/* ============================================================
   RENTALS GRID
   Grid of cards, one per top-level rental_category term — used on
   the homepage Rentals section AND the Party Rentals landing page.
   Mobile-first: each card stacks (image on top, content below);
   grid itself goes from 1 to 2 columns at 768px; each card's own
   internal layout switches from stacked to side-by-side (image
   left, content right) at 1024px — a separate breakpoint from the
   grid's column count.
   ============================================================ */
.rentals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rentals-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rental-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 16px var(--color-black-a07);
}

.rental-card-media {
  aspect-ratio: 3 / 2;
}

.rental-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rental-card-body {
  padding: 1.25rem;
}

.rental-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-blue-800);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0;
}

.rental-card-description {
  font-family: var(--font-body);
  color: var(--color-gray-800);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-block-start: 0.75rem;
}

.rental-card-cta {
  font-size: 0.875rem;
  margin-block-start: 1.25rem;
}

@media (min-width: 1200px) {
  .rental-card {
    flex-direction: row;
  }

  .rental-card-media {
    flex: 0 0 45%;
    aspect-ratio: auto;
  }

  .rental-card-body {
    flex: 1;
    padding: 2rem;
    align-self: center;
  }
}

/* ============================================================
   RESPONSIVE ROW
   Reusable 2-column (media + content) layout: stacked below 1024px,
   capped to a centered 700px column so it doesn't read as an
   oversized single-column blob on tablet — same max-width already
   used by Packages Promo/Reviews' own contained-card tablet tier —
   then a full-width horizontal row from 1024px. Apply alongside a
   location-specific class (e.g. page-intro-row) for any per-context
   spacing beyond this shared layout.
   ============================================================ */
.responsive-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 1023px) {
  .responsive-row {
    max-width: 700px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .responsive-row {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
}

/* ============================================================
   PAGE INTRO
   Image + heading + description (+ optional CTA below), the
   ".responsive-row" layout with its own spacing — used by every
   single rental category page's "About/Intro" and the About page's
   own intro section.
   ============================================================ */
.page-intro-media {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.page-intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-intro-content {
  max-width: 640px;
}

.page-intro-content .heading-section {
  margin-block-end: 1rem;
}

/* Two usage patterns: a WYSIWYG field wrapped in one .page-intro-description
   div with several real <p> children (single rental category intro), or a
   plain textarea split into separate <p class="page-intro-description">
   siblings (About page intro) — cover both. */
.page-intro-description p + p,
.page-intro-description + .page-intro-description {
  margin-block-start: 1rem;
}

.page-intro-cta {
  margin-block-start: 1.5rem;
}

@media (min-width: 1024px) {
  .page-intro-media,
  .page-intro-content {
    flex: 1;
  }
}

/* ============================================================
   PACKAGES PROMO
   Image + navy content panel with a yellow-star bullet list — used
   by the homepage Packages Promo section AND each single rental
   category page's own promo section (same component, different ACF
   source). Three tiers: (1) below 768px — flush/edge-to-edge, image
   on top, navy panel below, no radius; (2) 768-1023px — a contained
   rounded card with padding and a max-width, still stacked
   vertically; (3) from 1024px — back to flush/edge-to-edge,
   horizontal (image left, content right).
   ============================================================ */
.packages-promo-section {
  padding-block: 0;
  background-color: var(--color-white);
}

.packages-promo {
  display: flex;
  flex-direction: column;
}

.packages-promo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packages-promo-content {
  background-color: var(--color-primary);
  padding-block: 2rem;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}

.packages-promo-list-box {
  background-color: var(--color-blue-700);
  border-radius: 12px;
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
  margin-block: 1.5rem;
}

.packages-promo-list-heading {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 0.75rem;
}

.packages-promo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.packages-promo-list-item {
  position: relative;
  padding-inline-start: 1.75rem;
  color: var(--color-blue-50);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.packages-promo-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.1rem;
  height: 1.05rem;
  background-image: url('../images/yellow-star.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Tier 2 — contained rounded card, still stacked vertically */
@media (min-width: 768px) and (max-width: 1023px) {
  .packages-promo-section {
    padding-block: 64px;
    padding-inline: 24px;
  }

  .packages-promo {
    max-width: 700px;
    margin-inline: auto;
    border-radius: 24px;
    overflow: hidden;
  }
}

/* About page only — .about-page-intro and .about-celebration-section
   are both plain white (no background-color of their own), same as
   Packages Promo, and Promo's own padding-block change at this same
   tier (above) was doubling the gap on both sides — same white-on-
   white bug already fixed once between Packages Promo and
   .reviews-section on the homepage. Fixed the same way: drop the
   side of each neighbor's own padding that faces Promo, since
   Promo's own padding on that side already provides the gap. Scoped
   to these two page-specific classes, not to .packages-promo-section
   itself, since Promo is shared with contexts where the neighboring
   section has a different background and isn't actually broken. */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-page-intro {
    padding-block: 64px 0;
  }

  .about-celebration-section {
    padding-block: 0 64px;
  }
}

/* Tier 3 — back to flush/edge-to-edge, now horizontal */
@media (min-width: 1024px) {
  .packages-promo {
    flex-direction: row;
  }

  .packages-promo-media {
    flex: 0 0 50%;
  }

  .packages-promo-content {
    flex: 0 0 50%;
    padding-block: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .packages-promo-list-box,
  .packages-promo-cta {
    align-self: flex-start;
  }
}

/* ============================================================
   404 NOT FOUND
   Short centered message below the Page Banner (no-image variant)
   + CTA back home.
   ============================================================ */
.error-404-content {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.error-404-cta {
  margin-block-start: 1.5rem;
}

/* ============================================================
   CTA BUTTON
   Reusable orange pill button — apply site-wide, then add a
   location-specific class alongside it (header-cta-btn, about-cta,
   rental-card-cta, etc.) for any per-context spacing/behavior.
   ============================================================ */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  background: var(--color-cta) 0% 0% no-repeat padding-box;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  padding-inline: 28px;
  border-radius: 50px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .container {
    padding-inline: 1.25rem;
  }

  section {
    padding-block: 40px;
  }
}

/* ============================================================
   BOOK NOW / BOOKING FORM
   Gradient title banner sits outside the section's own padding — a
   flush divider strip at the top. .book-now-body carries the
   section's usual vertical padding instead (the section itself has
   none), wrapping a grid: fixed 450px image column + flexible form
   column on desktop, stacked on mobile. Used by the homepage Book
   Now section AND each single rental category page's own booking
   form (same shared Gravity Forms form, id 1, tagged per page via
   its hidden Rental Category field — see functions.php).
   ============================================================ */
.book-now-section {
  padding-block: 0;
  background-color: var(--color-blue-150);
}

.book-now-banner {
  background: linear-gradient(271deg, var(--color-blue-700) 0%, var(--color-blue-400) 18%, var(--color-sky-500) 39%, var(--color-sky-400) 69%, var(--color-blue-400) 100%);
  padding-block: 1.5rem;
  padding-inline: 24px;
  text-align: center;
}

.book-now-banner-title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
}

.book-now-body {
  padding-block: 64px;
}

@media (max-width: 768px) {
  .book-now-body {
    padding-block: 40px;
  }
}

.book-now-row {
  display: grid;
  grid-template-columns: 1fr;
}

.book-now-media img {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-inline: auto;
}

.book-now-form {
  margin-block-start: 1.5rem;
}

@media (min-width: 1024px) {
  .book-now-row {
    grid-template-columns: 450px 1fr;
    align-items: center;
    gap: 2.5rem;
  }

  .book-now-media img {
    margin-inline: 0;
  }
}

/* ---- Gravity Forms overrides — scoped to this form only ----
   Gravity Forms 2.7+'s "Orbital" theme ships its own fairly specific
   CSS (plus an inline per-form <style> block of --gf-* custom
   properties), which beats plain class selectors regardless of our
   stylesheet's load order. !important is the pragmatic fix here —
   this is third-party plugin CSS we don't own, not our own system. */
.book-now-form .gform_heading {
  display: none !important;
}

.book-now-form .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 15px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 667px) {
  .book-now-form .gform_fields {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.book-now-form .gfield {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  grid-column: auto !important;
}

.book-now-form .gfield_label {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  color: var(--color-blue-800) !important;
}

.book-now-form .gfield_required {
  color: var(--color-cta) !important;
}

.book-now-form input[type="text"],
.book-now-form input[type="email"],
.book-now-form input[type="tel"],
.book-now-form select {
  width: 100% !important;
  height: 50px !important;
  border: 1px solid var(--color-blue-700) !important;
  border-radius: 20px !important;
  padding-inline: 1.25rem !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  transition: border-color 0.2s ease !important;
}

.book-now-form input[type="text"]:focus,
.book-now-form input[type="email"]:focus,
.book-now-form input[type="tel"]:focus,
.book-now-form select:focus {
  border-color: var(--color-cta) !important;
  outline: none !important;
}

.book-now-form .gform_footer {
  margin-block-start: 20px !important;
}

/* Same visual style as the sitewide .cta-button */
.book-now-form .gform_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 45px !important;
  background: var(--color-cta) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: normal !important;
  white-space: nowrap !important;
  padding-inline: 28px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}

.book-now-form .gform_button:hover,
.book-now-form .gform_button:focus-visible {
  filter: brightness(0.92) !important;
  transform: translateY(-1px) !important;
}

/* ---- Gravity Forms success confirmation — global, not scoped to
   .book-now-form ----
   .gform_confirmation_message is the class GF renders in place of
   the form itself for any form using the default "message" (not
   redirect) confirmation type. That's form 1 ("Book Party Rentals")
   everywhere it's embedded — the homepage Book Now section AND every
   single rental category's Booking Form section, all the same form.
   Form 2 (Contact — Rental Request) uses a page redirect confirmation
   instead, so this never applies there. Mirrors the structure Gravity
   Forms itself uses for .gform_validation_errors (icon-in-a-circle +
   colored border/background box), in green instead of their error red. */
.gform_confirmation_message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #EAF7ED;
  border: 1px solid #34A853;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
  color: #1E7E34;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.gform_confirmation_message::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #34A853;
  background-image: url('../images/check-white.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 12px;
}

/* Facebook/Instagram/TikTok use pre-colored square icon assets that
   already bake in their own bg + glyph — cancel out .social-links a's
   circle/square wrapper background (footer.css, contact.css) so it
   doesn't show behind the icon's own shape. !important because this
   must win regardless of which of those two stylesheets loads last. */
.social-link-anchor--icon-final {
  background-color: transparent !important;
}

.social-link-anchor--icon-final:hover,
.social-link-anchor--icon-final:focus-visible {
  background-color: transparent !important;
  opacity: 0.85;
}

/* ============================================================
   Sitemap page (page-sitemap.php)
   Plain nested list of real site links — top-level pages, with
   the 6 rental categories nested under Party Rentals.
   ============================================================ */
.sitemap-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 600px;
  margin-inline: auto;
  background-color: var(--color-blue-100);
  border-radius: 16px;
  padding: 2rem clamp(1.25rem, 5vw, 3rem);
}

.sitemap-list > li > a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-blue-800);
  text-decoration: none;
}

.sitemap-list > li > a:hover,
.sitemap-list > li > a:focus-visible {
  text-decoration: underline;
}

.sitemap-sublist {
  list-style: none;
  margin: 0.75rem 0 0;
  padding-inline-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-inline-start: 2px solid var(--color-blue-150);
}

.sitemap-sublist a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
}

.sitemap-sublist a:hover,
.sitemap-sublist a:focus-visible {
  color: var(--color-blue-800);
  text-decoration: underline;
}

/* ============================================================
   Entry Content (page.php / page-privacy-policy.php)
   Generic prose styling for any plain WordPress-editor page —
   readable column width, clear vertical rhythm between headings/
   paragraphs/lists, a subtle divider under each H2 so long pages
   (Privacy Policy, Terms, etc.) read as separated sections instead
   of one wall of stacked text.
   ============================================================ */
.entry-content {
  max-width: 720px;
  margin-inline: auto;
}

.entry-content > :first-child {
  margin-block-start: 0;
}

.entry-content > :last-child {
  margin-block-end: 0;
}

.entry-content h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--color-blue-800);
  margin-block: 2.5rem 1rem;
  padding-block-end: 0.75rem;
  border-bottom: 1px solid var(--color-blue-300);
}

.entry-content h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-blue-800);
  margin-block: 1.75rem 0.75rem;
}

.entry-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin-block-end: 1.25rem;
}

.entry-content ul,
.entry-content ol {
  margin-block-end: 1.25rem;
  padding-inline-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.entry-content li {
  line-height: 1.6;
}

.entry-content ul li::marker {
  color: var(--color-cta);
}

.entry-content a {
  color: var(--color-blue-800);
  text-decoration: underline;
}

.entry-content a:hover,
.entry-content a:focus-visible {
  color: var(--color-cta);
}