/*
 * Typography defaults for Gutenberg content.
 *
 * Scoped so they only apply on pages where Gutenberg actually owns the
 * rendering — i.e. the body must NOT have the `.elementor-page` class
 * (which Elementor sets on every page it builds, including ones whose
 * "Edit with Elementor" canvas still wraps the post in `.entry-content`).
 *
 * The editor canvas (`.editor-styles-wrapper`) is also scoped here so the
 * block-editor preview matches the frontend Gutenberg rendering.
 *
 * Loads after tokens.css. All values are var() references — no literal hex or px.
 */

body:not(.elementor-page) .entry-content,
body:not(.elementor-page) .wp-block-post-content,
.editor-styles-wrapper {
  font-family: var(--font-body);
  font-size: var(--font-text-md);
  line-height: var(--line-height-text);
  color: var(--text-primary);
}

body:not(.elementor-page) .entry-content :is(h1,h2,h3,h4,h5,h6),
body:not(.elementor-page) .wp-block-post-content :is(h1,h2,h3,h4,h5,h6),
.editor-styles-wrapper :is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-display);
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}

body:not(.elementor-page) .entry-content h1,
body:not(.elementor-page) .wp-block-post-content h1,
.editor-styles-wrapper h1 { font-size: var(--font-display-xl); line-height: var(--line-height-display-xl); }

body:not(.elementor-page) .entry-content h2,
body:not(.elementor-page) .wp-block-post-content h2,
.editor-styles-wrapper h2 { font-size: var(--font-display-lg); line-height: var(--line-height-display-lg); }

body:not(.elementor-page) .entry-content h3,
body:not(.elementor-page) .wp-block-post-content h3,
.editor-styles-wrapper h3 { font-size: var(--font-display-md); line-height: var(--line-height-display-md); }

body:not(.elementor-page) .entry-content h4,
body:not(.elementor-page) .wp-block-post-content h4,
.editor-styles-wrapper h4 { font-size: var(--font-text-lg); line-height: var(--line-height-text); }

body:not(.elementor-page) .entry-content h5,
body:not(.elementor-page) .wp-block-post-content h5,
.editor-styles-wrapper h5 { font-size: var(--font-text-md); line-height: var(--line-height-text); }

body:not(.elementor-page) .entry-content h6,
body:not(.elementor-page) .wp-block-post-content h6,
.editor-styles-wrapper h6 { font-size: var(--font-text-sm); line-height: var(--line-height-text); }

body:not(.elementor-page) .entry-content p,
body:not(.elementor-page) .wp-block-post-content p,
.editor-styles-wrapper p {
  margin: 0 0 var(--space-lg);
}

body:not(.elementor-page) .entry-content a,
body:not(.elementor-page) .wp-block-post-content a,
.editor-styles-wrapper a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body:not(.elementor-page) .entry-content a:hover,
body:not(.elementor-page) .wp-block-post-content a:hover,
.editor-styles-wrapper a:hover {
  color: var(--accent-fill-hover);
}

body:not(.elementor-page) .entry-content small,
body:not(.elementor-page) .wp-block-post-content small,
.editor-styles-wrapper small {
  font-size: var(--font-text-sm);
}

/* Lead paragraph — opt-in via .lead class only (auto first-paragraph lead
   removed 2026-07-15 for consistency with the Elementor-rendered singles) */
body:not(.elementor-page) .entry-content .lead,
body:not(.elementor-page) .wp-block-post-content .lead,
.editor-styles-wrapper .lead {
  font-size: var(--font-lead);
  line-height: var(--line-height-lead);
}

/*
 * Elementor theme-builder singles (blog post + experience templates).
 *
 * The post body renders inside the Post Content widget
 * (`.elementor-widget-theme-post-content`), which the Gutenberg scope above
 * never matches — so entry content on those templates fell back to the
 * Elementor kit's generic body text. Same tokens as above, one extra scope.
 *
 * Heading scale runs ONE STEP below the Gutenberg scale (h1 display-lg …
 * h6 text-xs): inside an Elementor template the page-level h1/h2 already
 * live in the hero and surrounding sections, so content headings sit one
 * level under them visually.
 *
 * Kit CSS (post-6.css) declares no h1–h6 rules, so single-class selectors
 * are enough for headings; links need the extra `.elementor` ancestor to
 * out-rank `.elementor-kit-6 a` regardless of load order.
 */

.elementor-widget-theme-post-content {
  font-family: var(--font-body);
  font-size: var(--font-text-md);
  line-height: var(--line-height-text);
  color: var(--text-primary);
}

.elementor-widget-theme-post-content :is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-display);
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}

/* Scale rationale (2026-07-15): content h2s at display-md (32px) were
   LARGER than the experience template's own section headings (Details /
   Included / Gallery render at 26px) — content was out-shouting the page.
   h2 display-sm puts content sections level with the template's secondary
   headings; everything below steps down from there. */
.elementor-widget-theme-post-content h1 { font-size: var(--font-display-md); line-height: var(--line-height-display-md); }
.elementor-widget-theme-post-content h2 { font-size: var(--font-display-sm); line-height: var(--line-height-display-sm); }
.elementor-widget-theme-post-content h3 { font-size: var(--font-display-xs); line-height: var(--line-height-display-xs); }
.elementor-widget-theme-post-content h4 { font-size: var(--font-text-sm); line-height: var(--line-height-text); }
.elementor-widget-theme-post-content h5 { font-size: var(--font-text-xs); line-height: var(--line-height-text); }
.elementor-widget-theme-post-content h6 { font-size: var(--font-text-xs); line-height: var(--line-height-text); }

.elementor-widget-theme-post-content p {
  margin: 0 0 var(--space-lg);
}

/* :not(.wp-block-button__link): button blocks are anchors too — without the
   guard this painted accent text onto accent-fill buttons (unreadable). */
.elementor .elementor-widget-theme-post-content a:not(.wp-block-button__link) {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.elementor .elementor-widget-theme-post-content a:not(.wp-block-button__link):hover {
  color: var(--accent-fill-hover);
}

.elementor-widget-theme-post-content small {
  font-size: var(--font-text-sm);
}

/* Section air — content h2s open with a little space above (shared; the
   blog layer below raises this to 1.25em on posts) */
.elementor-widget-theme-post-content h2 {
  margin-block-start: 0.75em;
}

.elementor-widget-theme-post-content h3 {
  margin-block-start: 0.5em;
}

.elementor-widget-theme-post-content :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* Lists (promoted from the blog layer 2026-07-15 — itinerary lists on
   experience content rendered browser-default) */
.elementor-widget-theme-post-content :is(ul, ol) {
  padding-inline-start: 1.25em;
  margin-block: 0 var(--space-lg);
}

.elementor-widget-theme-post-content li { margin-block-end: 0.5em; }
.elementor-widget-theme-post-content li:last-child { margin-block-end: 0; }

/*
 * Lead paragraph — OPT-IN ONLY via the .lead class (add it in the editor's
 * "Additional CSS class" field). No automatic first-paragraph lead: decided
 * 2026-07-15, first paragraphs read as regular body text.
 */
.elementor-widget-theme-post-content .lead {
  font-size: var(--font-text-xl);
  line-height: 1.45;
}

/*
 * ============ BLOG-POST-ONLY SECTION (.single-post) ============
 * Everything below is the editorial layer for BLOG posts only (decided
 * 2026-07-15): reading measure, section top-margins, media rhythm/radius,
 * lists, quotes, accordion, buttons column. Experience (activity) content
 * keeps just the base scale above — the editorial layout rules distorted
 * the product-page templates.
 */

/*
 * Reading measure — text holds a centered 720px column while figures,
 * videos and embeds keep the full content width (narrow text, wide media).
 * px on purpose: a ch-based cap is font-relative, so headings would get a
 * wider column than body text and the left edges stop aligning.
 */
.single-post .elementor-widget-theme-post-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, .wp-block-buttons, .wp-block-accordion) {
  max-width: 720px;
  margin-inline: auto;
}

/* (Blog heading override removed 2026-07-15 — the base scale above now IS
   this ladder, shared by blog and experience content.) */

/* Section rhythm — headings open their section with space above */
.single-post .elementor-widget-theme-post-content h2 { margin-top: 1.25em; }
.single-post .elementor-widget-theme-post-content :is(h3, h4, h5, h6) { margin-top: 1em; }
.single-post .elementor-widget-theme-post-content :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

/* Media blocks — vertical rhythm + the site's radius language.
   !important: core block-library styles (inlined, layout-support margins)
   out-cascade any sane specificity here and pinned images/embeds at 1em. */
.single-post .elementor-widget-theme-post-content :is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-columns) {
  margin-block: calc(var(--space-lg) * 1.5) !important;
}
.single-post .elementor-widget-theme-post-content :is(.wp-block-image img, .wp-block-video video, .wp-block-embed iframe, video) {
  border-radius: var(--radius-md);
}

/* (List rules promoted to the shared layer above, 2026-07-15.) */

/* Quotes */
.single-post .elementor-widget-theme-post-content blockquote {
  border-inline-start: 3px solid var(--accent-text);
  padding: 0.25em 0 0.25em 1.25em;
  font-style: italic;
}

/*
 * Core accordion block — match the Elementor nested-accordion (FAQ) look.
 * The item heading is an h3 wrapping a native <button>, which the Elementor
 * kit paints as a full-width accent button (`.elementor-kit-6 button`), so
 * the toggle needs a hard reset before restyling.
 */
/* Reference: the Elementor nested-accordion FAQ on /scooter-rental/ —
   question and answer are SEPARATE bordered pills (radius 12), icon on the
   left, regular-weight titles, 4px title→answer gap, 8px between items. */
.single-post .elementor-widget-theme-post-content .wp-block-accordion-item {
  border: none;
  margin-block-end: calc(var(--space-lg) * 0.5);
}

/* Core's layout blockGap adds its own margin between items on top of ours
   (8px became 20px); the reference gap is 8px total. */
.single-post .elementor-widget-theme-post-content .wp-block-accordion > * + * {
  margin-block-start: 0 !important;
}

.single-post .elementor-widget-theme-post-content h3.wp-block-accordion-heading {
  margin: 0;
  font-size: var(--font-text-md);
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading button {
  display: flex;
  align-items: center;
  gap: calc(var(--space-lg) * 0.625);
  background: transparent;
  border: var(--border-width-thin) solid var(--border-strong);
  border-radius: var(--radius-lg);
  width: 100%;
  text-align: start;
  padding: calc(var(--space-lg) * 0.625) var(--space-lg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-text-md);
  font-weight: 400;
  line-height: var(--line-height-text);
  letter-spacing: normal;
  cursor: pointer;
}

/* Icon left of the title, as on the Elementor accordions. Text glyphs
   ("+"/"−") have unequal optical sizes and baselines, so the icon is DRAWN:
   two centered bars, the vertical one rotating flat when open. Identical
   size and perfect centering in both states by construction. The span's own
   "+" text is muted with font-size 0; core pins the span at 0×0, so it gets
   an explicit box. */
.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading__toggle-icon {
  position: relative;
  order: -1;
  font-size: 0;
  width: var(--font-text-md);
  height: var(--font-text-md);
  flex: none;
  transform: none !important;
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading__toggle-icon::before,
.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading__toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  /* bar geometry 12×3px, rounded caps — measured off the reference's
     fa-minus SVG (13px render ≈ 11.5×2.8px bar) */
  border-radius: 1.5px;
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading__toggle-icon::before {
  width: 12px;
  height: 3px;
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading__toggle-icon::after {
  width: 3px;
  height: 12px;
  transition: transform 0.2s ease;
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading button[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::after {
  transform: rotate(90deg);
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading button:hover,
.single-post .elementor-widget-theme-post-content .wp-block-accordion-heading button:focus {
  background: var(--surface-alt);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-panel {
  border: var(--border-width-thin) solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-block-start: calc(var(--space-lg) * 0.25);
  padding: var(--space-lg) calc(var(--space-lg) * 1.5);
}

.single-post .elementor-widget-theme-post-content .wp-block-accordion-panel > p:last-child {
  margin-block-end: 0;
}