/* ==========================================================================
   Typography: Newsreader
   Replaces Grotley (display) and Inter (body) with a single classical serif,
   matching the 437 reference: wide-tracked caps for headings, sentence case
   at a comfortable measure for body. The nav stays on Montserrat on purpose,
   see "header nav" below.

   Newsreader stands in for Dominicale, which is a commercial licence we
   can't ship. It is SIL Open Font Licensed, free for commercial use. EB
   Garamond, the first stand-in, is still loaded and one line away in :root.

   IMPORTANT — why there is no `*` selector here:
   this Divi build has 110 distinct selectors that set an icon font
   (ETmodules, FontAwesome, feathericons, swiper-icons, dashicons). Many are
   plain elements, not pseudo-elements, so a blanket override would turn every
   icon into a stray letter. Everything below is a POSITIVE list of
   text-bearing elements; icon elements are never matched.
   ========================================================================== */

:root {
  /* ACTIVE SERIF. To go back to EB Garamond, swap these two lines - both
     families are loaded on every page, so nothing else needs touching. */
  --yp-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
              "Hoefler Text", Georgia, "Times New Roman", serif;
  /* --yp-serif: "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif; */

  /* Newsreader is variable (200-800). Display weights sit above 400 so the
     caps hold the same colour as Dominicale's single sturdy weight. */
  --yp-w-display: 560;
  --yp-w-section: 540;
  --yp-w-sub: 500;
  --yp-track-display: 0.14em;   /* h1/h2 caps */
  --yp-track-sub: 0.09em;       /* h3-h6 caps */
  --yp-track-nav: 0.18em;       /* nav, matches the "BACK IN STOCK" label */
}

/* ---- base ---------------------------------------------------------------- */

body,
.et_pb_module,
.et_pb_text,
.et_pb_text_inner,
p, li, dt, dd, td, th, caption, figcaption, blockquote, address,
label, legend,
input, select, textarea, button,
.et_pb_slide_description,
.et_pb_blurb_description,
.port-grid-img-title,
.et_pb_toggle_content,
.et_pb_tab,
.entry-content,
#main-content,
#footer,
.et_pb_button {
  font-family: var(--yp-serif) !important;
}

body, p, li, dd, td, .et_pb_text, .et_pb_text_inner, .entry-content {
  letter-spacing: 0.005em;
  line-height: 1.62;
}

/* ---- headings ------------------------------------------------------------ */
/* The reference sets every heading in caps with generous tracking. Display
   sizes get the widest track; sub-heads step down so they stay readable. */

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6,
.et_pb_slide_description .et_pb_slide_title,
h1.entry-title, .et_pb_post_title .entry-title,
.et_pb_blurb_container h4, .et_pb_toggle_title,
.et_pb_accordion .et_pb_toggle_title {
  font-family: var(--yp-serif) !important;
  font-weight: var(--yp-w-sub) !important;
  text-transform: uppercase;
  font-style: normal !important;
}

h1, .et_pb_slide_description .et_pb_slide_title, h1.entry-title {
  letter-spacing: var(--yp-track-display);
  line-height: 1.14;
  word-spacing: 0.08em;
  font-weight: var(--yp-w-display) !important;
  /* trailing letter-space would otherwise push centred caps left of centre */
  margin-right: calc(-1 * var(--yp-track-display));
  max-width: 100%;
}

h2 {
  letter-spacing: var(--yp-track-display);
  line-height: 1.2;
  font-weight: var(--yp-w-section) !important;
  margin-right: calc(-1 * var(--yp-track-display));
  max-width: 100%;
}
h3 { letter-spacing: var(--yp-track-sub);     line-height: 1.28; }
h4, h5, h6 { letter-spacing: var(--yp-track-sub); line-height: 1.34; }

/* Caps in a serif read larger than lowercase at the same size, so the display
   sizes sit about 8% under Divi's own 42px / 36px.

   These were `0.92em` / `0.94em`, which does not mean "92% of the heading
   size": em on font-size resolves against the PARENT, and the parent is 12px
   body copy. Every h1/h2 without a module-level size (legal page titles, the
   condo / home / map search list headings) rendered at 11px, under the text
   it introduces. Absolute and fluid now: 38.4px / 33.6px at desktop, stepping
   down so a long caps line still fits a 390px screen. */
h1 { font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.4rem); }
h2 { font-size: clamp(1.375rem, 1rem + 1.3vw, 2.1rem); }

/* One h1 per page, and the shared hero owns it. Divi pages that shipped their
   own h1 in the body now carry <h2 class="yp-h1">: demoted in the outline,
   drawn exactly as the h1 it replaced. Only the three properties where this
   file treats h1 and h2 differently are restated. */
h2.yp-h1 { font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.14; word-spacing: 0.08em; }
.et_pb_slide_description .et_pb_slide_title { font-size: 0.92em; }

/* Divi's `strong { font-weight: 700 }` would otherwise outvote the display
   weights above on any heading the editor wrapped in <strong>. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: inherit; }

/* ---- buttons and small caps labels --------------------------------------- */

.et_pb_button,
.et_pb_contact_submit,
input[type="submit"],
button[type="submit"] {
  font-family: var(--yp-serif) !important;
  text-transform: uppercase;
  letter-spacing: var(--yp-track-nav);
  font-weight: 400 !important;
}

/* ---- legal pages ---------------------------------------------------------- */
/* Their text modules carry no size of their own, so the whole document fell
   through to the Divi customizer's 12px body. Same 16px as the rest of the
   site's prose. Size only: the row width and alignment stay as Divi set them.
   Scoped by page id because the four pages share no class; es/ keeps the
   same ids. */

:is(.page-id-27992, .page-id-34626, .page-id-28087, .page-id-37436) #main-content .et_pb_text_inner {
  font-size: 1rem;
}

/* ---- header nav ---------------------------------------------------------- */
/* The nav is the one place the brand serif does not reach. */

/* Deliberately SANS, and deliberately not var(--yp-serif):
   (a) 437's own nav is Euclid, a sans - a serif nav is less faithful to the
       reference, not more;
   (b) header.css stacks two copies of every glyph in a fixed 1.15em
       overflow-hidden box tuned to Montserrat's metrics, and a serif's taller
       ascenders show a sliver of the second glyph;
   (c) at 12px with wide tracking, serifs fight the tracking and legibility drops. */
#main-header .st-nav-link,
#main-header .st-dropdown a {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

/* Nav set larger. The letter-swap boxes are height-relative (1.15em), so they
   scale with this automatically - no clipping introduced.

   These used to be a fixed 19px with two breakpoint steps under it, and that
   was what actually forced the nav onto a second line: header.css was sizing
   the row for 12px while this file rendered it at 19px. Size now comes from
   the fluid tokens header.css declares, so one file owns the scale and the row
   cannot be measured against a width it is not drawn at. */
#main-header .st-nav-link { font-size: var(--st-nav-fs); letter-spacing: var(--st-nav-track); }
#main-header .st-dropdown a { font-size: clamp(12px, 0.5vw + 8.8px, 15px); letter-spacing: 0.12em; }

/* ---- Spanish legal notice -------------------------------------------------- */
/* build-es.py injects this above the English legal text. It sits outside any
   Divi row, so without these lines it ran edge to edge at the 12px base.
   75% is the width of the legal text row below it (.et_pb_row_1), so the note
   and the document share one left edge at every viewport. */

.yp-legal-notice {
  width: 75%;
  margin: clamp(40px, 5vw, 72px) auto 0;
  color: var(--yp-ink);
  font-size: 1rem;
}
.yp-legal-notice p { margin: 0; padding: 0; }
.yp-legal-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- restore anything that must NOT become a serif ------------------------ */
/* Belt and braces: any element whose class names it an icon keeps whatever
   font its own rule gave it, even if a selector above happened to reach it. */

[class*="icon"]:not(.et_pb_text):not(p),
[class*="Icon"],
.et-pb-icon, .et_pb_font_icon,
.dsm-icon, .divi8-icon,
.swiper-button-next, .swiper-button-prev {
  font-family: inherit;
}

/* ---- legal pages on phones -------------------------------------------------
   Divi's inline block holds the text row on the four legal pages to 75% at
   every width. On a phone that stacks a 12.5% inset on top of the viewport
   edge: 49px gutters and a 292px measure at 390. Every other row on the site
   is 90% here, so these are too. */
@media (max-width: 767px) {
  body.page-id-27992 #page-container .et_pb_row_1.et_pb_row,
  body.page-id-34626 #page-container .et_pb_row_1.et_pb_row,
  body.page-id-28087 #page-container .et_pb_row_1.et_pb_row,
  body.page-id-37436 #page-container .et_pb_row_1.et_pb_row { width: 90%; }
}