/* =========================================================
   OCEAN AREA LIVING — website brand layer (shared parts)
   Source of truth: assets/oal-brand.css (Brand Identity v1.0,
   locked Nov 2026). Independent of Maison.

   Loaded AFTER the existing page styles. Visual only: copy, links,
   section order and behaviour do not depend on it. The legacy colour
   and font variables are re-pointed to the OAL palette so existing
   components inherit it; shared components (header, buttons, contact
   buttons, form fields, footer) are then restyled to the brand spec.

   Rollout: linked on every page of the Ocean Area Living site.
   ========================================================= */

/* ---------- Re-point legacy variables to the OAL palette ---------- */
:root {
  --navy:        var(--oal-deep);
  --navy-deep:   var(--oal-deep-2);
  --navy-soft:   rgba(0, 63, 113, .13);
  --navy-line:   var(--oal-line);
  --white:       #FFFFFF;
  --paper:       var(--oal-mist);
  --mist:        var(--oal-mist);
  --stone:       var(--oal-line);
  --stone-soft:  var(--oal-cloud);
  --dusted:      var(--oal-aqua);
  --dusted-soft: var(--oal-aqua);
  --dusted-deep: var(--oal-ocean-ink);
  --ink:         var(--oal-ink);
  --ink-soft:    var(--oal-slate);

  --font-display: var(--oal-display);
  --font-voice:   var(--oal-body);
  --font-ui:      var(--oal-body);

  /* 1240px content + 40px side padding */
  --page-max: 1320px;

  /* Height of the solid white header (logo 46px + 16px padding x2 + 1px
     rule). Interior heroes start below it. */
  --oal-nav-h: 79px;
}
@media (max-width: 1180px) { :root { --oal-nav-h: 75px; } }
@media (max-width: 860px)  { :root { --oal-nav-h: 63px; } }
@media (max-width: 480px)  { :root { --oal-nav-h: 57px; } }

/* ---------- Base ---------- */
html, body { font-family: var(--oal-body); color: var(--oal-ink); }
p { font-family: var(--oal-body); font-size: 16px; line-height: 1.65; color: var(--oal-ink); }
h1, h2, h3, h4 { font-family: var(--oal-display); font-weight: 600; color: var(--oal-deep); letter-spacing: -.02em; }
h1 i, h2 i, h3 i, h4 i { font-style: normal; font-weight: 400; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--oal-ocean); outline-offset: 3px;
}

/* Eyebrow */
.uc-label {
  font: 600 11.5px/1.2 var(--oal-display);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oal-ocean-ink);
}
.uc-label.dim { opacity: 1; }
.uc-label.on-navy, .uc-label.on-navy-dim, .uc-label.on-dark { color: var(--oal-aqua); opacity: 1; }

/* ---------- Buttons (.oal-btn spec) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--oal-r-sm);
  border: 1.5px solid transparent;
  font: 600 15px/1 var(--oal-display);
  letter-spacing: 0; text-transform: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { opacity: 1; }
.btn-primary { background: var(--oal-ocean); color: #fff; }
.btn-primary:hover { background: var(--oal-ocean-ink); }
.btn-ghost { background: #fff; color: var(--oal-deep); border-color: var(--oal-deep); }
.btn-ghost:hover { background: var(--oal-mist); }
.btn-inverse { background: #fff; color: var(--oal-deep); }
.btn-inverse:hover { background: var(--oal-mist); }

/* Text button (.oal-btn-text) */
.btn.btn-quiet,
.btn-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 0; padding: 0 0 3px;
  font: 600 16px/1.2 var(--oal-display); font-style: normal;
  letter-spacing: 0; text-transform: none;
  color: var(--oal-ocean-ink); background: transparent;
  border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0;
  transition: color .18s ease, gap .18s ease;
}
.btn.btn-quiet:hover, .btn-link:hover { color: var(--oal-deep); opacity: 1; gap: 14px; }

/* =========================================================
   HEADER — solid white at all times
   No transparent state and no background transition. The bar,
   logo, menu and burger look the same at load and after scrolling.
   ========================================================= */
.nav,
.nav.solid,
.nav.open {
  background: #fff;
  border-bottom: 1px solid var(--oal-line);
  transition: none;
}
.nav .nav-inner,
.nav.solid .nav-inner { padding: 16px 40px; gap: 32px; transition: none; }

.nav .brand,
.nav.solid .brand { color: var(--oal-deep); transition: none; }
.nav .oal-img,
.nav.solid .oal-img { filter: none; height: 46px; }
@media (max-width: 860px) { .nav .oal-img, .nav.solid .oal-img { height: 38px; } }
@media (max-width: 480px) { .nav .oal-img, .nav.solid .oal-img { height: 32px; } }

.nav-links {
  gap: 26px;
  font: 500 14.5px/1.2 var(--oal-display);
  letter-spacing: 0; text-transform: none;
}
.nav-links a,
.nav.solid .nav-links a {
  color: var(--oal-deep); opacity: 1;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease;
}
.nav-links a:hover { color: var(--oal-ocean-ink); }
.nav-links a.on { color: var(--oal-deep); border-bottom-color: var(--oal-ocean); }
.nav-links a.nav-nc { line-height: 1.2; }

.nav-cta,
.nav.solid .nav-cta {
  font: 600 14px/1 var(--oal-display);
  letter-spacing: 0; text-transform: none;
  color: #fff; background: var(--oal-deep);
  padding: 14px 20px;
  border-radius: var(--oal-r-sm);
  transition: background-color .18s ease;
}
.nav-cta:hover { background: var(--oal-deep-2); opacity: 1; }

.nav-burger span,
.nav.solid .nav-burger span,
.nav.open .nav-burger span {
  background: var(--oal-deep);
  height: 2px; border-radius: 2px;
  transition: none;
}

/* Header heights for body.nav-white (site.js measures the real value) */
.nav-white { --nav-h: 89px; }

/* Mobile drawer */
.nav-drawer { border-top: 1px solid var(--oal-line); padding: 12px 20px 24px; }
.nav-drawer a {
  font: 600 19px/1.3 var(--oal-display);
  color: var(--oal-deep);
  padding: 14px 0;
  border-bottom: 1px solid var(--oal-line);
}
.nav-drawer a.on { font-style: normal; color: var(--oal-ocean-ink); }

@media (max-width: 1320px) {
  .nav .nav-inner, .nav.solid .nav-inner { gap: 24px; }
  .nav-links { gap: 20px; font-size: 14px; }
}
@media (max-width: 1180px) {
  .nav .nav-inner, .nav.solid .nav-inner { padding: 14px 32px; }
  .nav-white { --nav-h: 75px; }
}
@media (max-width: 860px) {
  .nav .nav-inner, .nav.solid .nav-inner { padding: 12px 20px; gap: 12px; }
  .nav-cta, .nav.solid .nav-cta { font-size: 14px; padding: 12px 16px; }
  .nav-white { --nav-h: 63px; }
}
@media (max-width: 480px) {
  .nav-white { --nav-h: 57px; }
}

/* =========================================================
   CONTACT BUTTONS (.cx) — Call / Text / Email
   ========================================================= */
.cx {
  --cx-ink:   var(--oal-deep);
  --cx-on:    #fff;
  --cx-line:  var(--oal-deep);
  --cx-hover: var(--oal-deep-2);
}
.cx--inverse {
  --cx-ink:   #fff;
  --cx-on:    var(--oal-deep);
  --cx-line:  rgba(255, 255, 255, .7);
  --cx-hover: var(--oal-mist);
}
.cx .cx-call,
.cx .cx-alt {
  font-family: var(--oal-display); font-weight: 600;
  text-transform: none; letter-spacing: 0;
  border-radius: var(--oal-r-sm);
  border-width: 1.5px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cx .cx-call { min-height: 48px; font-size: 15px; padding: 0 22px; }
.cx .cx-alt  { min-height: 48px; font-size: 15px; padding: 0 14px; background: #fff; }
.cx .cx-alt:hover { background: var(--oal-mist); color: var(--oal-deep); border-color: var(--oal-deep); }
.cx--inverse .cx-alt { background: transparent; }
.cx--inverse .cx-alt:hover { background: #fff; color: var(--oal-deep); border-color: #fff; }
.cx-num { letter-spacing: 0; opacity: .85; font-variant-numeric: lining-nums tabular-nums; }
.cx .cx-call:focus-visible,
.cx .cx-alt:focus-visible { outline: 2px solid var(--oal-ocean); outline-offset: 3px; }

/* =========================================================
   FORM FIELDS (brand form spec)
   ========================================================= */
.field-l,
.field .field-l.uc-label {
  display: block;
  font: 600 13px/1.3 var(--oal-display);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-deep); opacity: 1;
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: 0 14px;
  background-color: #fff;
  border: 1.5px solid var(--oal-line);
  border-radius: var(--oal-r-sm);
  font: 400 16px/1.4 var(--oal-body);
  color: var(--oal-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { padding: 12px 14px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--oal-ocean);
  box-shadow: 0 0 0 3px rgba(0, 160, 210, .18);
}
.field select {
  padding-right: 40px;
  background-position: right 20px center, right 14px center;
}
.form-consent { font-size: 13px; line-height: 1.55; color: var(--oal-slate); }
.form-consent a { color: var(--oal-ocean-ink); text-decoration: underline; text-underline-offset: 2px; }
.thanks-h { font: 600 26px/1.25 var(--oal-display); font-style: normal; color: var(--oal-deep); }

/* =========================================================
   FOOTER — Deep Ocean
   ========================================================= */
.foot { background: var(--oal-deep); color: #fff; }
.foot-inner { max-width: 1320px; padding-left: 40px; padding-right: 40px; }
.foot-service {
  font: 400 17px/1.6 var(--oal-body); font-style: normal;
  color: var(--oal-aqua); opacity: 1;
}
.foot-rule { background: rgba(179, 227, 242, .25); }
.foot-col .uc-label { color: var(--oal-aqua); }
.foot-col a {
  font: 400 15px/1.4 var(--oal-body);
  color: #fff; opacity: .9;
  transition: opacity .18s ease;
}
.foot-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-note, .foot-broker { font-size: 14px; line-height: 1.6; color: var(--oal-aqua); opacity: 1; }
.foot-logo-plate, .foot-adache { border-radius: var(--oal-r-sm); }
.foot-bot {
  font: 400 13px/1.5 var(--oal-body);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-aqua); opacity: 1;
}
@media (max-width: 860px) {
  .foot-inner { padding-left: 20px; padding-right: 20px; }
  .foot-service { font-size: 16px; }
  .foot-bot { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .cx .cx-call, .cx .cx-alt, .nav-links a, .nav-cta { transition: none; }
}