/* ==========================================================================
   Bostello Divi Child — Page hero & type system

   One scale for every page: SIZE, MEASURE (how wide a line runs before it
   wraps) and SPACING. Values come from the saved "Bostello —
   FindSpanishHomes" design system.

   WHY THE MEASURE NEEDED FIXING
   The pages set their hero width in `ch` units (18ch, 20ch, 22ch, 24ch),
   which is the right idea — `ch` means "width of that many characters", so
   the line length stays typographically sensible at any size. But the
   setting sits on Divi's module wrapper, whose font-size is Divi's default
   14px, NOT the 36-56px of the heading inside it. So 22ch resolved to
   ~176px instead of ~646px and the title collapsed into a narrow column.

   The fix here is to give the wrapper the same font-size as its heading.
   Every existing `ch` value then resolves against the correct size and
   starts doing what it was always meant to do — no per-page maths, and
   the values stay visible and editable in Divi.
   ========================================================================== */

:root {
  /* --- Type scale -------------------------------------------------------
     Fluid: the middle value scales with the viewport, clamped between a
     mobile minimum and a desktop maximum. No breakpoints needed. */
  --bst-h1: clamp(34px, 4.6vw, 56px);
  --bst-h2: clamp(26px, 2.8vw, 34px);
  --bst-h3: clamp(19px, 1.6vw, 22px);
  --bst-lede: clamp(16px, 1.2vw, 18px);

  /* --- Line heights ----------------------------------------------------
     Display type sits tight; body type needs room. */
  --bst-lh-display: 1.1;
  --bst-lh-body: 1.6;

  /* --- Measure ---------------------------------------------------------
     Defaults only. A page that sets its own `ch` value in Divi overrides
     these, because the rules applying them use :where() (zero specificity). */
  --bst-measure-title: 22ch;
  --bst-measure-lede: 70ch;

  /* --- Vertical rhythm -------------------------------------------------- */
  --bst-hero-top: clamp(40px, 5vw, 72px);
  --bst-hero-bottom: clamp(28px, 3.5vw, 48px);

  --bst-ink-body: #3F3F3F;
}

/* ==========================================================================
   1. The hero block

   "Hero" = the first section of a page, and within it the first text
   module (the title) and the second (the lede). Targeting it structurally
   rather than by Divi's numbered classes matters: `.et_pb_text_0` is the
   hero title on /guides and /properties but an eyebrow label on the home
   page, so numbering alone would restyle the wrong things.

   Full-width sections are excluded — that is the home page's image hero,
   which is handled in section 3 below.
   ========================================================================== */

#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) {
  padding-top: var(--bst-hero-top) !important;
  padding-bottom: var(--bst-hero-bottom) !important;
}

/* --- Hero title ---------------------------------------------------------
   Setting the size on the module wrapper is what repairs the `ch` measure;
   the heading inside then inherits that same size. */
#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) .et_pb_column > .et_pb_text:first-child {
  font-size: var(--bst-h1) !important;
  line-height: var(--bst-lh-display) !important;
}

#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) .et_pb_column > .et_pb_text:first-child .et_pb_text_inner,
#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) .et_pb_column > .et_pb_text:first-child .et_pb_text_inner > * {
  font-size: inherit !important;
  line-height: var(--bst-lh-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--bst-ink, #222222) !important;
  margin: 0;
  /* Long place names should never be hyphenated mid-word on a phone. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* --- Hero lede ---------------------------------------------------------- */
#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) .et_pb_column > .et_pb_text:nth-child(2) {
  font-size: var(--bst-lede) !important;
  line-height: var(--bst-lh-body) !important;
  margin-top: 20px !important;
}

#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) .et_pb_column > .et_pb_text:nth-child(2) .et_pb_text_inner,
#main-content .et_builder_inner_content > .et_pb_section:first-child:not(.et_pb_fullwidth_section) .et_pb_column > .et_pb_text:nth-child(2) .et_pb_text_inner > * {
  font-size: inherit !important;
  line-height: var(--bst-lh-body) !important;
  color: var(--bst-ink-body) !important;
}

/* ==========================================================================
   2. Default measure

   :where() carries ZERO specificity, so these are true defaults: any page
   that sets its own max-width in Divi (the 18ch / 20ch / 22ch values) wins
   over them, while a page that sets nothing still gets a sensible line
   length instead of running the full container width.
   ========================================================================== */

:where(#main-content .et_builder_inner_content > .et_pb_section:first-child .et_pb_column > .et_pb_text:first-child) {
  max-width: var(--bst-measure-title);
}

:where(#main-content .et_builder_inner_content > .et_pb_section:first-child .et_pb_column > .et_pb_text:nth-child(2)) {
  max-width: var(--bst-measure-lede);
}

/* ==========================================================================
   3. The home page's image hero

   A different Divi module (fullwidth header) but the same scale, so both
   hero styles stay in step instead of drifting apart.
   ========================================================================== */

#main-content .et_pb_fullwidth_header h1.et_pb_module_header {
  font-size: var(--bst-h1) !important;
  line-height: var(--bst-lh-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

#main-content .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead {
  font-size: var(--bst-lede) !important;
  line-height: var(--bst-lh-body) !important;
}

:where(#main-content .et_pb_fullwidth_header h1.et_pb_module_header) {
  max-width: var(--bst-measure-title);
}

:where(#main-content .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead) {
  max-width: var(--bst-measure-lede);
  display: inline-block;
}

/* ==========================================================================
   4. Phones

   The clamp() values already scale the type down on their own. What a
   narrow screen additionally needs is for the measure to stop constraining
   width — below ~640px the container is already narrower than any sensible
   ch measure, and leaving one in place can strand a short line.
   ========================================================================== */

/* The image hero sat on its own geometry — a fixed 40px section padding
   plus a small auto margin on the text block — so its headline missed the
   page's left edge by -48px at tablet and +18px at desktop. Give it the
   same container every content row uses (80% wide, capped at 1080px,
   centred) and the hero lines up with the page at every width. */
#main-content .et_builder_inner_content > .et_pb_section.et_pb_fullwidth_section,
#main-content .et_pb_fullwidth_header {
  /* The side inset lives on the header MODULE (40px), not the section.
     Clear it so the 80% container below measures against the full width
     and lands on the same left edge as every content row. Vertical
     padding is untouched — it sets the hero's height. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#main-content .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
  width: 80% !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#main-content .et_pb_fullwidth_header .header-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 980px) {
  #main-content .et_pb_fullwidth_header .header-content {
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  #main-content .et_builder_inner_content > .et_pb_section:first-child .et_pb_column > .et_pb_text:first-child,
  #main-content .et_builder_inner_content > .et_pb_section:first-child .et_pb_column > .et_pb_text:nth-child(2),
  #main-content .et_pb_fullwidth_header h1.et_pb_module_header,
  #main-content .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead {
    max-width: 100% !important;
  }
}