/* ============================================================
   Ocean Area Living — Unified contact component
   Call Our Team (primary) · Send a Text · Send an Inquiry
   One designed unit: navy pill on top, two equal outlined pills below.
   Variants:  .cx--inverse (on navy bands)   .cx--center (centered sections)
   Also: mobile header Call button (.nav-call) + drawer contact block.
   Loaded on every page AFTER the page stylesheets.
   ============================================================ */

.cx {
  --cx-ink:  var(--navy);
  --cx-on:   var(--paper);
  --cx-line: rgba(30, 42, 68, .34);
  --cx-hover: var(--navy-deep);
  display: grid; gap: 10px;
  width: 100%; max-width: 400px;
  margin: 0;
}
.cx--center { margin-left: auto; margin-right: auto; }
.cx--inverse {
  --cx-ink:  var(--paper);
  --cx-on:   var(--navy);
  --cx-line: rgba(244, 242, 237, .36);
  --cx-hover: var(--white);
}
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Shared pill geometry — double-class specificity so drawer / page link
   styles never leak in */
.cx .cx-call,
.cx .cx-alt {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 100%; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 500; font-style: normal;
  text-transform: uppercase; text-decoration: none; text-align: center;
  line-height: 1; white-space: nowrap;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* Primary — Call Our Team */
.cx .cx-call {
  min-height: 50px; padding: 0 24px; gap: 11px;
  font-size: 11px; letter-spacing: .3em;
  color: var(--cx-on); background: var(--cx-ink);
  border: 1px solid var(--cx-ink);
}
.cx .cx-call:hover { background: var(--cx-hover); border-color: var(--cx-hover); }
.cx-num {
  margin-left: 3px; padding-left: 13px;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 32%, transparent);
  letter-spacing: .08em; opacity: .8;
  font-variant-numeric: lining-nums;
}

/* Secondary — Send a Text · Send an Inquiry */
.cx .cx-alt {
  min-height: 44px; padding: 0 12px; gap: 9px;
  font-size: 10px; letter-spacing: .24em;
  color: var(--cx-ink); background: transparent;
  border: 1px solid var(--cx-line);
}
.cx .cx-alt:hover { background: var(--cx-ink); color: var(--cx-on); border-color: var(--cx-ink); }
.cx .cx-alt[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.cx .cx-call:focus-visible,
.cx .cx-alt:focus-visible { outline: 1px solid var(--cx-ink); outline-offset: 3px; }

/* Icons — fine line, drawn in currentColor */
.cx-ic {
  flex: none; display: inline-block;
  width: 13px; height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--cx-icon) center / contain no-repeat;
          mask: var(--cx-icon) center / contain no-repeat;
}
.cx-call .cx-ic { width: 14px; height: 14px; }
.cx-ic-call { --cx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.cx-ic-text { --cx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.cx-ic-mail { --cx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='1.5'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E"); }

/* ---------- Placement helpers ---------- */
/* Properties — inside each entry's price row */
.pr-foot > .cx { flex: 0 1 400px; }
.pr-network-actions .cx,
.pr-card-actions .cx { flex: 1 1 auto; }
.pr-card-actions .cx { max-width: none; }
/* Properties — intro (replaces "Inquire About Our Collection") */
.pr-hero-beyond + .pr-hero-cx { margin-top: 32px; }
/* Contact page — per-person actions */
.c-person > .cx { grid-column: 2; margin-top: -12px; max-width: 380px; }
/* Home — team block at the top of the direct-contact column */
.direct-team .cx { margin-top: 10px; }
/* Property Edit closing — replaces the former Call label + link */
.pe-close .cx { margin-top: 0; }

/* ============================================================
   MOBILE HEADER — compact Call beside the burger
   ============================================================ */
.nav-call {
  display: none;
  align-items: center; gap: 8px;
  height: 36px; padding: 0 16px 0 14px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; line-height: 1;
  color: var(--paper); background: var(--navy);
  border: 1px solid rgba(244, 242, 237, .42);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: border-color .35s ease, background .25s ease;
}
.nav-call .cx-ic { width: 12px; height: 12px; }
.nav-call:hover { background: var(--navy-deep); }
.nav-call:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.nav.solid .nav-call,
.nav.open .nav-call,
.page-light .nav .nav-call { border-color: var(--navy); }

/* Drawer — contact block replaces "Let's Talk" */
.nav-drawer .cx { max-width: none; margin-top: 22px; }

/* ============================================================
   DEVICE-AWARE "LET'S TALK"
   An href cannot change per breakpoint from HTML alone, so the
   header carries two anchors and CSS shows one:
     .nav-cta-desk → contact.html   (pointer / desktop)
     .nav-cta-mob  → tel: dialer    (≤860px / phones)
   Both share .nav-cta for identical pill styling, so neither the
   typography nor the visual design changes between devices.
   ============================================================ */
.nav-cta-mob { display: none; }

@media (max-width: 860px) {
  .nav-inner { grid-template-columns: 1fr auto auto; gap: 14px; }

  /* Swap the CTA: phones dial instead of navigating. */
  .nav-cta-desk { display: none; }
  .nav-cta-mob { display: inline-flex; }

  /* On phones "Let's Talk" IS the dial action, so the separate "Call" pill
     would be a second identical tel: button. Showing both pushed the
     header to four items in a three-column grid and wrapped the burger
     under the logo. Keep one phone control, labelled "Let's Talk". */
  .nav-call { display: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 860px) {
  .c-person > .cx { grid-column: 1 / -1; margin-top: 0; max-width: none; }
  .pr-foot > .cx { flex: none; width: 100%; align-self: stretch; }
}
@media (max-width: 560px) {
  .cx { max-width: none; }
  .cx .cx-call { min-height: 52px; }
  .cx .cx-alt  { min-height: 48px; }
}
@media (max-width: 400px) {
  .cx, .cx-row { gap: 8px; }
  .cx .cx-call { padding: 0 16px; letter-spacing: .22em; }
  .cx .cx-alt  { padding: 0 8px; gap: 7px; letter-spacing: .14em; }
}
@media (max-width: 380px) {
  .cx-num { display: none; }
  .nav-call { padding: 0 13px 0 12px; letter-spacing: .22em; }
}
@media (max-width: 350px) {
  .cx-alt .cx-ic { display: none; }
}

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