/* Coastal theme layer for S² Home Partners.
   Loaded after the Tailwind CDN on every page. Colors and fonts come from each page's
   tailwind.config; this file softens the generic "app" feel (tilting cards, heavy
   shadows, pill badges) into something calmer and more editorial. */

:root {
  --sand: #F6F1E7;
  --sand-deep: #EBE3D3;
  --paper: #FFFDF9;
  --harbor: #112B37;
  --tide: #1E4A5C;
  --seaglass: #CFE3DB;
  --coral: #D9785B;
  --brass: #B8894A;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: #3D4D55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* Headings: calmer weight, tighter tracking, a serif that reads like a magazine, not a SaaS page */
body .font-serif {
  letter-spacing: -0.012em;
  font-weight: 600;
}
body .font-serif.font-extrabold,
body .font-serif.font-black { font-weight: 600; }
body h1.font-serif { line-height: 1.08; }

/* Surfaces: warm paper instead of stark white */
body .bg-white { background-color: var(--paper); }
body .bg-momentum-bgLight { background-color: var(--sand); }

/* Softer geometry */
body .rounded-3xl { border-radius: 1rem; }
body .rounded-2xl { border-radius: 0.75rem; }
body .rounded-xl  { border-radius: 0.5rem; }
body .rounded-lg  { border-radius: 0.375rem; }

/* Shadows: low, warm, tide-tinted */
body .shadow-sm  { box-shadow: 0 1px 2px rgba(17, 43, 55, 0.06); }
body .shadow-md  { box-shadow: 0 4px 14px -6px rgba(17, 43, 55, 0.16); }
body .shadow-lg  { box-shadow: 0 10px 24px -12px rgba(17, 43, 55, 0.22); }
body .shadow-3d  { box-shadow: 0 14px 30px -16px rgba(17, 43, 55, 0.28); }
body .shadow-3d-hover { box-shadow: 0 18px 34px -16px rgba(17, 43, 55, 0.32); }

/* No tilting / bouncing cards, no lifting buttons */
body .card-3d { transition: box-shadow 0.25s ease, border-color 0.25s ease; transform: none; }
body .card-3d:hover { transform: none; box-shadow: 0 18px 34px -16px rgba(17, 43, 55, 0.32); }
body .hover\:-translate-y-1:hover,
body .hover\:-translate-y-0\.5:hover { transform: none; }

/* Borders pick up the sand tone */
body .border-slate-100 { border-color: var(--sand-deep); }

/* Small caps eyebrows: quieter */
body .tracking-widest { letter-spacing: 0.14em; }

/* Links inside running copy */
body main p a:not([class]) { color: #3F7A68; text-decoration: underline; text-underline-offset: 3px; }

/* Focus ring in sea glass */
body :focus-visible { outline: 2px solid #5A917F; outline-offset: 2px; }

::selection { background: var(--seaglass); color: var(--harbor); }

/* ---- Wave edge under the first (dark) hero band on inner pages ---- */
main > section:first-child.bg-momentum-blueDark {
  position: relative;
  --wave: var(--paper);
}
main > section:first-child.bg-momentum-blueDark:has(+ section.bg-momentum-bgLight) { --wave: var(--sand); }
main > section:first-child.bg-momentum-blueDark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 34px;
  background: var(--wave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C120 6 240 4 360 16s240 22 360 8 300-20 480-6V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C120 6 240 4 360 16s240 22 360 8 300-20 480-6V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* Homepage hero uses its own wave element */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: var(--sand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C120 6 240 4 360 16s240 22 360 8 300-20 480-6V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C120 6 240 4 360 16s240 22 360 8 300-20 480-6V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* ---- Neighborhood guide cards: editorial notes rather than icon tiles ---- */
.guide-card-note {
  border: 0;
  border-top: 2px solid #9CC4B7;
  border-radius: 0;
  background: transparent;
  padding: 1rem 0.25rem 0.25rem;
  box-shadow: none;
}
.guide-card-note .guide-label {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #6D7B80;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Homepage hero panel tabs */
.hero-tab { background: rgba(255, 253, 249, 0.28); color: #fff; transition: background-color 0.2s ease, color 0.2s ease; }
.hero-tab:hover { background: rgba(255, 253, 249, 0.45); }
.hero-tab[aria-selected="true"] { background: #fff; color: #1E4A5C; }
[data-panel][hidden] { display: none !important; }

/* ---- Overlay header (set up by site.js on pages with a dark hero) ---- */
html.has-overlay-header body > header {
  position: fixed; top: 0; left: 0; right: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
html.has-overlay-header body > header:not(.is-solid):not(.menu-open) {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.has-overlay-header body > header:not(.is-solid):not(.menu-open) a img { filter: brightness(0) invert(1); }
html.has-overlay-header body > header:not(.is-solid):not(.menu-open) nav[aria-label="Primary"] > a:not(.bg-teal-600),
html.has-overlay-header body > header:not(.is-solid):not(.menu-open) nav[aria-label="Primary"] > div > button { color: #fff; }
html.has-overlay-header body > header:not(.is-solid):not(.menu-open) #menu-toggle { color: #fff; }
html.has-overlay-header main > section:first-child { padding-top: calc(var(--hdr, 96px) + 2rem); }
html.has-overlay-header main > section:first-child > .relative.flex { padding-top: 3.5rem; }

/* Mobile menu: let the open menu scroll when it is taller than the screen */
#mobile-menu {
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6rem;
}

/* FAQ accordions */
.faq-item { border-bottom: 1px solid #E6DFD2; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.25rem 1.05rem 0; position: relative;
  font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: #1E4A5C;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: .25rem; top: .9rem; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 1.5rem; font-weight: 400; color: #3F7A68; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: #153746; }
.faq-a { padding: 0 0 1.25rem; color: #3D4D55; line-height: 1.65; }
.faq-a p { margin: 0 0 .75rem; }
.faq-a .faq-list { margin: 0 0 .85rem; padding-left: 1.25rem; }
.faq-a ul.faq-list { list-style: disc; }
.faq-a ol.faq-list { list-style: decimal; }
.faq-a .faq-list li { margin: 0 0 .35rem; }
.faq-item { scroll-margin-top: 6rem; }