/* ============================================================
   COMPLETE OUTDOORS — BRAND TOKEN LAYER
   Loads after Salient parent styles. Tokens first, then
   component overrides. One gold action per view.
   ============================================================ */

@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Open Sans';
  src:url('../fonts/opensans.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --co-navy:#0D1C2E; --co-navy-700:#0a1623; --co-navy-600:#14293f;
  --co-navy-500:#1d3a55; --co-navy-400:#2f5274; --co-navy-200:#93acc4;
  --co-gold:#D4B576; --co-gold-700:#9c7e3e; --co-gold-600:#b99a56; --co-gold-100:#faf5ea;
  --co-sky:#B1F1FC; --co-sky-600:#5fb9cc;
  --co-sand-50:#FAF8F4; --co-sand-100:#F4F1EA; --co-sand-200:#E8E3D8; --co-sand-300:#d6cebd;
  --co-ink:#2C2A25; --co-muted:#5a5247;
  --co-green:#2F8F5B; --co-green-bg:#E8F3EC;
  --co-yellow:#C9962F; --co-yellow-bg:#FBF2DD;
  --co-red:#B4452F; --co-red-bg:#F6E7E3;
  --co-r-sm:6px; --co-r-lg:16px; --co-r-pill:999px;
  --co-sh-md:0 8px 24px rgba(13,28,46,.09);
  --co-sh-lg:0 18px 48px rgba(13,28,46,.13);
  --co-sh-gold:0 10px 30px rgba(184,154,86,.28);
  --co-ease:cubic-bezier(.22,1,.36,1);
  --co-display:'Montserrat',system-ui,sans-serif;
  --co-body:'Open Sans',system-ui,sans-serif;
}

/* ── Base: warm white ground, brand type ── */
body{
  background:var(--co-sand-50);
  color:var(--co-ink);
  font-family:var(--co-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* !important beats Salient's dynamic typography CSS (Figtree), which
 * prints later in wp_head and otherwise wins on legacy WPBakery pages. */
h1,h2,h3,h4,h5,h6,
.nectar-fancy-ul, #header-outer nav > ul > li > a{
  font-family:var(--co-display) !important;
}
/* Body text needs the same guard: Salient re-declares p/blockquote/etc.
 * after this sheet. Display-font components (.eyebrow, .btn, .chip, .lab,
 * headings) set their own family and are not in this list. */
body, p, li, blockquote, figcaption, cite, address, dd, dt{
  font-family:var(--co-body) !important;
}
strong, b, em, small{font-family:inherit !important;}

/* Header nav (incl. dropdowns + mobile slide-out), utility bar: Montserrat 600.
 * Salient's dynamic CSS loads after this sheet, so !important is required. */
#header-outer nav > ul > li > a,
#header-outer .sf-menu li ul li a,
#header-secondary-outer a,
#slide-out-widget-area a{
  font-family:var(--co-display) !important;
  font-weight:600 !important;
}

/* Compact footer: tighter rhythm, two-column link list, smaller type. */
#footer-outer #footer-widgets{padding:44px 0 24px !important;}
#footer-outer .widget{margin-bottom:12px !important;}
#footer-outer .widget h4{margin-bottom:12px;font-size:.875rem;letter-spacing:.05em;text-transform:uppercase;}
#footer-outer p{font-size:13.5px;line-height:1.65;margin-bottom:10px;}
#footer-outer a.footer-link{display:block;font-size:13.5px;line-height:2.1;}
#footer-outer .co-footer-links{columns:2;column-gap:28px;}
#footer-outer .co-footer-logo{max-width:200px;height:auto;display:block;margin-bottom:14px;}

/* Footer widgets: Montserrat 600 headings, Open Sans body/links. */
#footer-outer h3, #footer-outer .widget h4{
  font-family:var(--co-display) !important;
  font-weight:600 !important;
}
#footer-outer, #footer-outer p, #footer-outer li, #footer-outer a{
  font-family:var(--co-body) !important;
}
h1,h2,h3,h4{font-weight:600;color:var(--co-navy);line-height:1.15;}
h1{font-size:clamp(2.25rem,4vw,3.25rem);letter-spacing:-.01em;line-height:1.1;}
h2{font-size:clamp(1.75rem,2.6vw,2.25rem);}
h3{font-size:1.5rem;line-height:1.2;}

.co-eyebrow{
  font-family:var(--co-display);font-weight:600;font-size:.8125rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--co-navy);
  display:flex;align-items:center;gap:.7em;margin-bottom:.9rem;
}
.co-eyebrow::before{content:"";width:18px;height:2px;background:var(--co-gold);flex:0 0 auto;}
.co-on-navy .co-eyebrow, .co-on-navy .co-eyebrow::before{color:var(--co-gold);background:var(--co-gold);}

/* ── Buttons: override Salient defaults ── */
.co-btn, body .nectar-button,
input[type="submit"], button[type="submit"]{
  font-family:var(--co-display) !important;font-weight:600;font-size:.9375rem;
  border-radius:var(--co-r-sm) !important;
  padding:.9em 1.6em;min-height:48px;
  background:var(--co-navy) !important;color:#fff !important;
  border:1px solid transparent;
  transition:background .24s var(--co-ease),transform .24s var(--co-ease),box-shadow .24s var(--co-ease);
}
.co-btn:hover, body .nectar-button:hover{background:var(--co-navy-600) !important;transform:translateY(-1px);}
.co-btn--gold, body .nectar-button.co-gold{
  background:var(--co-gold) !important;color:var(--co-navy) !important;
  box-shadow:var(--co-sh-gold);
}
.co-btn--gold:hover, body .nectar-button.co-gold:hover{background:var(--co-gold-600) !important;}
.co-btn--ghost{background:transparent !important;color:var(--co-navy) !important;border-color:var(--co-sand-300);}
.co-btn--ghost:hover{background:var(--co-sand-100) !important;}

/* ── Cards ── */
.co-card{
  background:#fff;border:1px solid var(--co-sand-200);border-radius:var(--co-r-lg);
  padding:28px;box-shadow:var(--co-sh-md);
  transition:transform .28s var(--co-ease),box-shadow .28s var(--co-ease);
}
.co-card--hov:hover{transform:translateY(-4px);box-shadow:var(--co-sh-lg);}
.co-card--navy{background:var(--co-navy);border-color:var(--co-navy-600);color:#fff;}

/* ── Status pills (Go / Verify / Stop) ── */
.co-pill{display:inline-flex;align-items:center;gap:.4em;padding:.3em .8em;
  border-radius:var(--co-r-pill);font-family:var(--co-display);font-size:.72rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--co-navy);}
.co-pill::before{content:"";width:7px;height:7px;border-radius:50%;}
.co-pill--go{background:var(--co-green-bg);} .co-pill--go::before{background:var(--co-green);}
.co-pill--verify{background:var(--co-yellow-bg);} .co-pill--verify::before{background:var(--co-yellow);}
.co-pill--stop{background:var(--co-red-bg);} .co-pill--stop::before{background:var(--co-red);}

/* ── Forms ── */
.co-form input[type="text"], .co-form input[type="email"], .co-form input[type="tel"],
.co-form select, .co-form textarea{
  font-family:var(--co-body);font-size:1rem;padding:.85em 1em;min-height:48px;
  border:1px solid var(--co-sand-300);border-radius:var(--co-r-sm);
  background:#fff;color:var(--co-ink);width:100%;
}
.co-form label{
  font-family:var(--co-display);font-weight:600;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--co-navy);
}

/* ── Focus: gold ring, everywhere ── */
:focus-visible{outline:2px solid var(--co-gold) !important;outline-offset:2px;}

/* ── Water-line motif for navy sections ── */
.co-navy-section{background:var(--co-navy);position:relative;overflow:hidden;}
.co-navy-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-size:260px 130px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='130'%3E%3Cg fill='none' stroke='%23D4B576' stroke-width='1'%3E%3Cpath d='M0 22 Q32.5 6 65 22 T130 22 T195 22 T260 22'/%3E%3Cpath d='M0 54 Q32.5 38 65 54 T130 54 T195 54 T260 54'/%3E%3Cpath d='M0 86 Q32.5 70 65 86 T130 86 T195 86 T260 86'/%3E%3Cpath d='M0 118 Q32.5 102 65 118 T130 118 T195 118 T260 118'/%3E%3C/g%3E%3C/svg%3E");
}
.co-navy-section > *{position:relative;z-index:1;}

/* ── Scroll reveal (used by templates; honors reduced motion) ── */
.co-rv{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--co-ease),transform .55s var(--co-ease);}
.co-rv.co-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .co-rv{opacity:1 !important;transform:none !important;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ── Footer: staff "Team Login" link ──
 * Deliberately quiet — this is a staff utility, not a customer CTA, so it sits
 * below the legal links at reduced weight/size and never reads as a button. */
/* Colour rather than opacity: something in the Salient footer forces opacity:1,
 * and `.78em` resolved to the same 13.5px as its siblings — neither actually
 * muted the link. Explicit px + rgba, at (1,2,1) so it beats a.footer-link. */
#footer-outer .co-footer-links a.footer-link--staff{
  color:rgba(255,255,255,.58) !important;   /* ~6.5:1 on navy — AA at this size */
  font-size:12.5px !important;              /* brand floor is ~12px */
  margin-top:8px;
}
#footer-outer .co-footer-links a.footer-link--staff:hover{color:rgba(255,255,255,.92) !important;}

/* ── Responsive table guard (03J) ── */
/* No table may widen the page: content-area tables become their own scroll
   container below 1025px, with edge-fade scroll cues (background-attachment:
   local trick). No <table> exists in templates today — this guards DB/editor
   content (policy pages etc.) added later. */
@media (max-width:1024px){
  .container-wrap table, .co-root table, .entry-content table{
    display:block;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    background:
      linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
      linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(11,29,45,.16),transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(11,29,45,.16),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%,40px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}