/* ============================================================
   Self-hosted copies of the exact LYM brand fonts (Bely,
   Larsseit, Caveat/"Indigo"), so the preview renders with
   pixel-identical typography even when hosted on Netlify
   (a different origin) where the live site's cross-origin
   fonts could otherwise be blocked. Weights/styles/display
   match the site's own @font-face declarations exactly.
   PREVIEW-ONLY — production already has these fonts natively.
   ============================================================ */
@font-face { font-display: swap; font-family: 'Bely'; font-style: normal; font-weight: 400; src: url('/fonts/Bely-Display-W00-Regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Larsseit'; font-style: normal; font-weight: 300; src: url('/fonts/Larsseit-Light.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Larsseit'; font-style: normal; font-weight: 400; src: url('/fonts/Larsseit.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Larsseit'; font-style: normal; font-weight: 500; src: url('/fonts/Larsseit-Medium.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Larsseit'; font-style: normal; font-weight: 700; src: url('/fonts/Larsseit-Bold.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Indigo'; font-style: normal; font-weight: 400; src: url('/fonts/Caveat-VariableFont_wght.woff2') format('woff2'); }

/* ============================================================
   LYM hero fix — prevents headline text from overlapping the
   subject in the hero photo. Applied only to elements tagged
   .lym-hero-contain (the page's first hero block).
   In production this class is added via GenerateBlocks'
   "Additional CSS class(es)" field on each hero block, so the
   shared .gb-container-97fcf55a class used by mid-page CTAs is
   never touched.
   ============================================================ */

/* Pin the hero's flex content to the left and constrain the
   text column so it stays clear of the right-side subject. */
   IMPORTANT — anti-pixelation: the banner photo is a background
   image sized to be pixel-perfect at the hero's NATURAL height.
   Shrinking the text column makes the headline wrap to more lines,
   which grows the hero taller, which forces background-size:cover
   to UPSCALE the photo → pixelation. So we (a) pin the hero to its
   natural height (JS sets min-height on the preview; production
   uses the per-page values below) and (b) scale the text column
   down with `zoom` so the (now narrower) headline still fits inside
   that natural height. Result: text sits beside the subject and the
   photo stays at native scale = crisp. */
.lym-hero-contain {
  justify-content: flex-start !important;
}

.lym-hero-contain > .gb-container {
  max-width: 54% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-items: flex-start !important;
  zoom: 0.85 !important;            /* scales all headlines proportionally, shrinks block height */
}

.lym-hero-contain .gb-headline {
  max-width: 100% !important;
  text-align: left !important;
  margin-left: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .lym-hero-contain > .gb-container { max-width: 62% !important; zoom: 0.9 !important; }
}

/* --- Preview-only chrome (NOT shipped to production) --------- */
/* Hide the GDPR cookie bar so it never covers the review toolbar. */
#moove_gdpr_cookie_info_bar,
.moove-gdpr-info-bar-container,
.gdpr-cookie-message { display: none !important; }

#lym-toolbar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  max-width: 94vw;
}
#lym-toolbar .lym-tb-brand { font-weight: 700; letter-spacing: .2px; }
#lym-toolbar button {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; color: #111;
}
#lym-toolbar button.on { background: #b6f24a; }
#lym-toolbar button.off { background: #ff8a80; }
#lym-toolbar .lym-tb-state { opacity: .8; font-size: 12px; white-space: nowrap; }
#lym-toolbar select {
  border: 0; border-radius: 8px; padding: 6px 8px; font-size: 12px;
  background: #2a2a2a; color: #fff; max-width: 190px;
}
@media (max-width: 640px) {
  #lym-toolbar .lym-tb-state { display: none; }
  #lym-toolbar { gap: 8px; padding: 7px 10px; }
}

/* Mobile: the background subject sits behind the text, so add a
   readability scrim behind the text column and let it span full
   width. Keeps text legible without touching the image itself. */
@media (max-width: 768px) {
  .lym-hero-contain {
    position: relative !important;
  }
  .lym-hero-contain::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.45) 55%,
      rgba(0,0,0,0.15) 100%
    );
    z-index: 0;
    pointer-events: none;
  }
  .lym-hero-contain > .gb-container {
    max-width: 100% !important;
    zoom: 1 !important;             /* full-size text on mobile */
    position: relative;
    z-index: 1;
  }
  .lym-hero-contain .gb-headline { max-width: 100% !important; }
  /* On mobile the hero should keep its natural flow height, not the
     desktop pinned min-height. */
  .lym-hero-contain { min-height: 0 !important; }
}