/* =========================================================
   FMB SHARED EDITORIAL SYSTEM
   Shared by Home, Start Here, Money Myths, and Tools.

   Keep page-specific composition in each page stylesheet. This file owns
   only the visual primitives that should remain identical site-wide:
   full-bleed section behavior, shell width, section headings, eyebrow labels,
   inline action links, and compact primary buttons.
========================================================= */

/* Full-bleed shortcode sections with one consistent content shell. */
.fmb-editorial-section {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw) !important;
  color: var(--fmb-heading);
  font-family: var(--fmb-font-body);
}

.fmb-editorial-section > .fmb-shell {
  width: min(var(--fmb-editorial-shell-desktop), var(--fmb-editorial-shell));
  max-width: var(--fmb-editorial-shell);
  margin-inline: auto;
}

/* Elementor should only host the shortcode. FMB modules own their spacing. */
.elementor-widget-shortcode:has(.fmb-editorial-section),
.elementor-widget-shortcode:has(.fmb-editorial-section) > .elementor-widget-container,
.e-con:has(.fmb-editorial-section),
.e-con-inner:has(.fmb-editorial-section),
.wp-block-shortcode:has(.fmb-editorial-section) {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Standard editorial heading. Layout modifiers stay page-specific. */
.fmb-editorial-heading {
  max-width: var(--fmb-editorial-heading-max);
  margin: 0 0 var(--fmb-editorial-heading-gap);
}

.fmb-editorial-title,
.fmb-editorial-heading > h2 {
  margin: 0;
  color: var(--fmb-navy);
  font-family: var(--fmb-font-display);
  font-size: var(--fmb-editorial-title-size);
  font-weight: 800;
  line-height: var(--fmb-editorial-title-line);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fmb-editorial-description,
.fmb-editorial-heading > p:not(.fmb-editorial-eyebrow) {
  max-width: var(--fmb-editorial-copy-max);
  margin: 8px 0 0;
  color: var(--fmb-body);
  font-family: var(--fmb-font-body);
  font-size: var(--fmb-editorial-description-size);
  font-weight: 400;
  line-height: var(--fmb-editorial-description-line);
  text-wrap: pretty;
}

.fmb-editorial-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--fmb-editorial-eyebrow-gap);
  margin: 0 0 9px;
  color: var(--fmb-gold-text);
  font-family: "Montserrat", sans-serif;
  font-size: var(--fmb-editorial-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--fmb-editorial-eyebrow-spacing);
  line-height: 1.3;
  text-transform: uppercase;
}

.fmb-editorial-eyebrow::before {
  width: var(--fmb-editorial-eyebrow-line);
  height: 1px;
  flex: 0 0 var(--fmb-editorial-eyebrow-line);
  background: currentColor;
  content: "";
}

.fmb-editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(168, 130, 58, 0.48);
  color: var(--fmb-navy);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.4;
  text-decoration: none;
}

.fmb-editorial-link > span[aria-hidden="true"] {
  color: var(--fmb-gold-dark);
  transition: transform var(--fmb-transition);
}

.fmb-editorial-link:hover,
.fmb-editorial-link:focus-visible {
  border-bottom-color: var(--fmb-gold-dark);
  color: var(--fmb-gold-text);
}

.fmb-editorial-link:hover > span[aria-hidden="true"],
.fmb-editorial-link:focus-visible > span[aria-hidden="true"] {
  transform: translateX(3px);
}

.fmb-button--compact {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.78rem;
  line-height: 1;
}

@media (max-width: 680px) {
  .fmb-editorial-section > .fmb-shell {
    width: calc(100% - 36px);
  }

  .fmb-editorial-heading {
    margin-bottom: 20px;
  }

  .fmb-editorial-title,
  .fmb-editorial-heading > h2 {
    font-size: 30px;
  }

  .fmb-editorial-eyebrow {
    font-size: 9px;
  }
}