/* =========================================================
   base.css — loaded on EVERY page.
   Shared chrome for the whole site: design tokens, the bento
   header, the teal footer, and the slide-in mobile panel — so
   every page (404, generic pages, search…) gets a styled
   header + footer even without a page-specific stylesheet.
   Your per-page CSS files load AFTER this and can override.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

.lv-nav-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 999; opacity: 0; transition: opacity 350ms ease;
}
.lv-nav-overlay.active { display: block; opacity: 1; }

.lv-mobile-panel {
  display: none; position: fixed; top: 0; right: -100%;
  width: 82%; max-width: 340px; height: 100vh; height: 100dvh; z-index: 1001;
  transition: right 420ms cubic-bezier(0.32, 0.72, 0, 1);
  flex-direction: column; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(160deg, rgba(255,252,248,0.92) 0%, rgba(244,236,220,0.88) 100%);
  backdrop-filter: blur(48px) saturate(180%); -webkit-backdrop-filter: blur(48px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,0.55);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
@media (max-width: 900px) { .lv-mobile-panel { display: flex; } }
.lv-mobile-panel.active { right: 0; }
.lv-mobile-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 18px; border-bottom: 1px solid rgba(255,255,255,0.40);
}
.lv-mobile-panel-header img { height: 30px; width: auto; }
.lv-mobile-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.55);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: rgba(28,28,30,0.70); transition: background 150ms ease;
}
.lv-mobile-close:hover { background: rgba(255,255,255,0.65); }
.lv-mobile-nav-list { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; }
.lv-mobile-nav-list a {
  display: block; padding: 13px 16px; font-size: 1rem; font-weight: 500;
  color: rgba(28,28,30,0.88); border-radius: 14px;
  transition: background 150ms ease, color 150ms ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.lv-mobile-nav-list a:hover,
.lv-mobile-nav-list a.lv-active { background: rgba(255,255,255,0.45); color: #164863; }
.lv-mobile-divider {
  height: 1px; margin: 4px 20px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.55) 20%, rgba(200,190,178,0.35) 80%, transparent);
}
.lv-mobile-actions { padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 8px; }
.lv-mobile-cta {
  display: block; padding: 13px 16px; text-align: center; font-size: 1rem;
  font-weight: 600; border-radius: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(145deg, #164863 0%, #55AD9B 100%);
  color: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.18);
}

/* Hamburger open/close animation (shared) */
.lv-hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.lv-hamburger-menu.active span:nth-child(2) { opacity: 0; }
.lv-hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (prefers-reduced-motion: reduce) {
  .lv-mobile-panel, .lv-nav-overlay, .lv-hamburger-menu span { transition: none; }
}

/* =========================================================
   SHARED CHROME (tokens + header + footer)
   Copied from home.css so pages without their own stylesheet
   (404, generic pages) still get the full site chrome.
   Page CSS loads after base.css, so per-page variants win.
   ========================================================= */
@font-face {
  font-family: 'Nimbus Roman';
  src: local('Nimbus Roman'), local('Nimbus Roman No9 L'), local('NimbusRomNo9L-Reg'),
       url('https://fonts.cdnfonts.com/s/29719/NimbusRomNo9L-Reg.woff') format('woff');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Nimbus Roman';
  src: local('Nimbus Roman Italic'), local('NimbusRomNo9L-RegIta'),
       url('https://fonts.cdnfonts.com/s/29719/NimbusRomNo9L-RegIta.woff') format('woff');
  font-weight: 400; font-style: italic;
}

html, body { margin: 0; padding: 0; }

.lv-page {
  /* Colours resolve from the theme.json presets (editable in the Site
     Editor) and fall back to the original hex if a preset is absent. */
  --bg: var(--wp--preset--color--bg, #F8F0E5);
  --bg-2: var(--wp--preset--color--bg-2, #EFE6D2);
  --panel: var(--wp--preset--color--panel, #ECE2CC);
  --ink: var(--wp--preset--color--ink, #0F1411);
  --ink-2: var(--wp--preset--color--ink-2, #5C564A);
  --ink-3: var(--wp--preset--color--ink-3, #8A8170);
  --line: rgba(15,20,17,0.10);
  --line-2: rgba(15,20,17,0.16);
  --accent: var(--wp--preset--color--accent, #164863);
  --accent-2: var(--wp--preset--color--accent-2, #55AD9B);
  --accent-soft: var(--wp--preset--color--accent-soft, #DCEFEA);
  --warm: var(--wp--preset--color--warm, #E07A3B);
  --good: var(--wp--preset--color--good, #2F8F5E);
  --dark: var(--wp--preset--color--dark, #0F1411);
  --dark-2: var(--wp--preset--color--dark-2, #161B17);
  --max-width: 1240px;
  --gutter: 1.5rem;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Nimbus Roman', 'Times New Roman', Georgia, serif;

  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
.lv-page *, .lv-page *::before, .lv-page *::after { box-sizing: border-box; }
/* :where() keeps these at class-level specificity so page stylesheets
   (loaded after base.css) always win ties — base only fills gaps. */
.lv-page :where(h1, h2) { margin: 0; font-family: 'Outfit', var(--font-sans); font-weight: 700; line-height: 1; color: var(--ink); }
.lv-page :where(h3, h4) { margin: 0; font-family: var(--font-serif); font-weight: 400; line-height: 1.02; color: var(--ink); }
.lv-page :where(p) { margin: 0; }
.lv-page :where(a) { color: inherit; text-decoration: none; }

.lv-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.lv-wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }

/* HEADER (liquid-glass bento) */
.lv-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  padding: 14px var(--gutter); transition: padding 0.4s ease;
  background: transparent; pointer-events: none;
}
.lv-header.scrolled { padding: 10px var(--gutter); }
.lv-header-container {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-width); margin: 0 auto; gap: 8px; pointer-events: none;
}
.lv-bento-card, .lv-hamburger-card { pointer-events: auto; }
.lv-bento-card {
  position: relative; overflow: hidden; border-radius: 100px;
  padding: 10px 22px;
  background: linear-gradient(158deg, rgba(255,252,248,0.62), rgba(244,236,220,0.46));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1.5px 0 rgba(255,255,255,0.7);
}
.lv-logo { display: flex; align-items: center; }
.lv-logo-img { height: 50px; width: auto; display: block; }
/* The Site Logo block renders <img class="custom-logo" width=…>; constrain
   it to the classic logo height so the header isn't oversized. */
.lv-logo .wp-block-site-logo { line-height: 0; margin: 0; }
.lv-logo img, .lv-logo .custom-logo { height: 50px !important; width: auto !important; display: block; }
/* Active nav item (the block Navigation marks the current page). */
.lv-nav .current-menu-item > a,
.lv-nav a[aria-current="page"] { color: var(--accent); }
.lv-nav-card { flex: 0 1 auto; }
.lv-nav ul { display: flex; gap: 0; align-items: center; list-style: none; margin: 0; padding: 0; }
.lv-nav li a {
  display: block; padding: 7px 18px; font-weight: 500;
  color: rgba(15,20,17,0.85); font-size: 0.88rem;
  border-radius: 100px; transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.lv-nav li a.lv-active { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .lv-nav li a:hover { color: var(--accent); }
}
.lv-actions-card { padding: 5px; }
.lv-page a.lv-actions-cta {
  background: linear-gradient(135deg, #55AD9B 0%, #164863 100%); color: #fff;
  font-weight: 600; padding: 8px 20px; font-size: 0.88rem;
  border-radius: 100px; display: block;
  transition: opacity 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .lv-page a.lv-actions-cta:hover { opacity: 0.88; }
}
.lv-hamburger-card { display: none; }
@media (max-width: 900px) {
  .lv-nav-card, .lv-actions-card { display: none; }
  .lv-hamburger-card { display: flex; align-items: center; justify-content: center; padding: 3px 10px; }
  .lv-hamburger-menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 36px; height: 36px; gap: 5px; background: transparent; border: none; cursor: pointer;
  }
  .lv-hamburger-menu span { width: 20px; height: 1.8px; background: rgba(15,20,17,0.8); border-radius: 2px; }
}

/* FOOTER */
.lv-page .lv-new-footer { position: relative; background-color: #6CB6A5; color: #fff; overflow: hidden; width: 100%; }
.lv-page .lv-footer-watermark-img { position: absolute; bottom: -1%; left: 50%; transform: translateX(-50%); width: 100%; height: auto; opacity: 1; pointer-events: none; z-index: 0; }
.lv-page .lv-footer-c-flex {
  display: flex; justify-content: space-between; padding-top: 4rem; padding-bottom: 12rem;
  position: relative; z-index: 1; gap: 4rem; max-width: var(--max-width); margin: 0 auto; padding-left: 2rem; padding-right: 2rem;
}
.lv-page .lv-footer-left-col { display: flex; flex-direction: column; gap: 0.5rem; max-width: 350px; }
.lv-page .lv-f-logo { width: 60px; height: auto; }
.lv-page .lv-f-slogan { font-size: 2.8rem; line-height: 1; text-transform: uppercase; font-weight: 900; color: #fff; letter-spacing: -1px; margin-top: 20px; margin-bottom: 20px; font-family: var(--font-sans); }
.lv-page .lv-f-socials { display: flex; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.lv-page .lv-f-socials img { height: 24px; width: auto; filter: brightness(0) invert(1); transition: opacity 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .lv-page .lv-f-socials img:hover { opacity: 0.8; }
  .lv-page .lv-f-col ul li a:hover { opacity: 0.7; }
}
.lv-page .lv-footer-right-col { flex: 1; display: flex; flex-direction: column; gap: 3rem; max-width: 800px; }
.lv-page .lv-f-links-grid { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 2rem; }
.lv-page .lv-f-col h4 { color: #fff; margin-bottom: 1.5rem; font-size: 1.1rem; font-family: var(--font-sans); font-weight: 800; }
.lv-page .lv-f-col ul { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.lv-page .lv-f-col ul li a { font-size: 0.95rem; color: #fff; font-weight: 400; transition: opacity 150ms ease; }
.lv-page .lv-f-connect p { font-size: 0.9rem; color: #fff; line-height: 1.5; font-weight: 400; }
.lv-page .lv-f-downloads h4 { color: #fff; margin-bottom: 1rem; font-size: 1.1rem; font-family: var(--font-sans); font-weight: 800; }
.lv-page .lv-f-dl-row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.lv-page .lv-f-dl-row img { height: 48px; width: auto; border-radius: 6px; border: 1px solid rgba(255,255,255,1); }
.lv-page .lv-footer-copyright { background-color: #F6EFDF; text-align: center; padding: 15px 1rem; font-size: 0.8rem; color: #444; position: relative; z-index: 2; font-family: var(--font-sans); }
@media (max-width: 900px) {
  .lv-page .lv-f-links-grid { grid-template-columns: 1fr 1fr; }
  .lv-page .lv-f-links-grid .lv-f-col:nth-child(3) { grid-column: span 2; }
  .lv-page .lv-footer-c-flex { flex-direction: column; gap: 4rem; padding-bottom: 8rem; }
  .lv-page .lv-footer-left-col { max-width: 100%; align-items: center; text-align: center; }
  .lv-page .lv-f-dl-row { justify-content: center; }
}
@media (max-width: 768px) {
  .lv-page .lv-footer-c-flex { padding-bottom: 6rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .lv-page .lv-f-slogan { font-size: 2rem; }
  .lv-page .lv-f-dl-row img { height: 42px; }
}
@media (max-width: 480px) {
  .lv-page .lv-f-links-grid { grid-template-columns: 1fr; }
  .lv-page .lv-f-links-grid .lv-f-col:nth-child(3) { grid-column: span 1; }
  .lv-page .lv-f-slogan { font-size: 1.8rem; }
  .lv-page .lv-footer-c-flex { padding-bottom: 5rem; gap: 2rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ---------------------------------------------------------------------
   Block-theme compatibility shim (FSE conversion)
   The seeded page content is composed of core blocks whose wrappers
   (.wp-block-group, figure.wp-block-image) and injected layout classes
   must stay transparent so the hand-tuned page CSS above is what shows.
   Scoped to .lv-page so it never touches the editor chrome.
   --------------------------------------------------------------------- */
.lv-page :where(.wp-block-post-content) { margin: 0; max-width: none; }
.lv-page .entry-content > * { max-width: none; }
/* Core image blocks used inside the design keep no figure chrome. */
.lv-page .wp-block-image { margin: 0; }
.lv-page .wp-block-image img { display: block; }
/* WordPress trims the block-end margin of a flow/constrained group's last
   child. In the Moments & Families sections the header is the sole child of
   its .lv-wrap (the full-bleed track sits outside it), so restore the
   header-to-track gap the design intends. */
.lv-page .lv-wrap > .lv-moments-head,
.lv-page .lv-wrap > .lv-families-head { margin-block-end: 3rem; }