/* ── The Well — Shared Site CSS ── */
/* Loaded on every page. Adds design refinements that layer ON TOP of
   per-page inline styles without overriding any existing rules.     */

/* ── Design tokens (mirror jobs-board system) ── */
:root {
  --gold:       #BE9E44;
  --gold-hover: #D4AF50;
  --gold-faint: rgba(190,158,68,0.12);
  --border-gold: rgba(190,158,68,0.22);
  --ivory:      #F8F5F0;
  --dim-ivory:  #C2BDB4;
  --warm-gray:  #8E8378;
  --canvas:     #1A1A1A;
  --canvas-2:   #141414;
}

/* ── Global smoothing ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Nav refinements ── */

/* Strengthen the gold underline on the nav */
#nav {
  box-shadow: 0 1px 0 var(--border-gold) !important;
  border-bottom: none;
}

/* Open Roles — gold accent link in desktop nav */
.nav-links .nav-jobs {
  color: var(--gold) !important;
  opacity: 1 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  border: 1px solid rgba(190,158,68,0.35);
  padding: 5px 12px;
  border-radius: 3px;
  transition: background 0.18s, border-color 0.18s !important;
}
.nav-links .nav-jobs:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
}

/* Mobile nav — jobs link */
.nav-mobile .nav-jobs {
  color: var(--gold) !important;
}

/* Switch to the hamburger below 1024px. The full desktop nav (7 links +
   phone + CTA + logo) does not fit between ~769px and ~1100px, so it wrapped
   and the phone number overlapped the CTA on small laptops and tablet landscape. */
@media (max-width: 1024px) {
  #nav .nav-links,
  #nav .nav-right { display: none !important; }
  #nav .nav-hamburger { display: flex !important; }
}

/* Tablet gutters: between 769–1024px the nav is collapsed (above) but most
   pages still used the full 80px desktop side padding, leaving content cramped.
   Scoped to this range so it never overrides the ≤768px mobile gutters. */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sx: 48px; }
}

/* Respect reduced-motion: neutralize hero/scroll-reveal/marquee animations
   and smooth-scroll for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Footer refinements ── */

/* Tighten footer type and add open-roles row if needed */
.footer-col h4 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.2em;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(190,158,68,0.15) !important;
}
.footer-bottom p,
.footer-links a {
  font-size: 12px;
  color: var(--warm-gray);
  opacity: 0.7;
}

/* ── Floating "Map Your Hiring Plan" CTA ── */
/* On smaller screens it overlapped form fields (contact Email/Phone) and FAQ
   items. Hide it below 1024px; the planning tool stays reachable from the nav
   and footer. On desktop, give the footer extra bottom clearance so the button
   never sits on top of the footer links. */
@media (max-width: 1024px) {
  #tp-wrap { display: none !important; }
}
@media (min-width: 1025px) {
  #footer { padding-bottom: 104px; }
}

/* ── Selection color ── */
::selection {
  background: var(--gold-faint);
  color: var(--ivory);
}

/* ── Smooth image loading ── */
img {
  max-width: 100%;
  display: block;
}