/*
Theme Name: Dendritic Outfitters
Theme URI: https://dendritic-outfitters.com
Author: WFPX Communications & Publishing, LLC
Author URI: https://wfpxnews.com
Description: Custom Elementor-compatible theme for Dendritic Outfitters, LLC — "Equipping You for the Scenic Route." Built for the Dendritic Highway universe (G & Empty, Wisdom, According to G).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dendritic-outfitters
*/

/* ==========================================================================
   DESIGN TOKENS
   The visual system is a topographic trail line: a branching spine that
   forks at every section, echoing "dendritic," "highway," and "the scenic
   route" all at once. Keep new components deriving from these tokens
   rather than introducing new colors/fonts ad hoc.
   ========================================================================== */
:root{
  /* Color — matched directly to the Dendritic Outfitters concept mark:
     navy circle/wordmark, forest-green pines, river-mist blue, sunset
     peach and gold behind the mountains, cream background. */
  --do-ink:        #102C46;   /* body copy — logo navy */
  --do-slate:      #102C46;   /* nav, footer, dark panels — logo navy */
  --do-slate-deep: #0A2033;   /* deepest panel / overlay */
  --do-teal:       #5187A6;   /* river / sky blue — mid-gradient, links */
  --do-mist:       #A7BEC0;   /* pale mountain/sky mist — soft borders, dividers */
  --do-rust:       #BE6E3E;   /* primary accent — trail waypoints, CTAs, sunset terracotta */
  --do-rust-deep:  #954F29;   /* hover state */
  --do-gold:       #D9A054;   /* secondary accent — badges, dividers, low sun */
  --do-peach:      #F1BA93;   /* sunset peach — gradients/highlights only */
  --do-line:       #2E564F;   /* trail spine stroke, hairlines — pine forest green */
  --do-paper:      #FDF9F0;   /* page background — logo cream */
  --do-paper-light:#F6EEE0;   /* card / panel background — warm cream */
  --do-white:      #FFFDF8;   /* text on dark */

  /* Type */
  --do-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --do-font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --do-font-mono: "Space Mono", "Courier New", monospace;

  /* Layout */
  --do-max: 1180px;
  --do-gutter: clamp(1.25rem, 4vw, 3rem);
  --do-radius: 3px;
  --do-trail-x: 2.75rem; /* horizontal position of the trail spine on desktop */
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:var(--do-paper);
  color:var(--do-ink);
  font-family:var(--do-font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--do-rust); text-decoration:none; }
a:hover{ color:var(--do-rust-deep); }
:focus-visible{ outline:3px solid var(--do-gold); outline-offset:2px; }
ul.do-reset{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--do-font-display);
  color:var(--do-slate);
  line-height:1.15;
  margin:0 0 0.5em;
  font-weight:600;
}
h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:500; }
h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); }
p{ margin:0 0 1.2em; }

.do-eyebrow{
  font-family:var(--do-font-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.75rem;
  color:var(--do-rust);
  display:inline-block;
  margin-bottom:0.6em;
}

.do-container{
  max-width:var(--do-max);
  margin-inline:auto;
  padding-inline:var(--do-gutter);
}

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.do-site-header{
  background:var(--do-slate);
  color:var(--do-white);
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(217,160,84,0.3);
}
.do-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:0.9rem;
}
.do-brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  color:var(--do-white);
}
.do-brand:hover{ color:var(--do-gold); }
.do-brand img{ max-height:44px; width:auto; }
.do-brand-name{
  font-family:var(--do-font-mono);
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:0.95rem;
}
.do-brand-tagline{
  font-family:var(--do-font-display);
  font-style:italic;
  font-size:0.78rem;
  color:var(--do-gold);
  margin-top:0.15rem;
}
.do-primary-nav ul{
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
}
.do-primary-nav a{
  color:var(--do-white);
  font-size:0.92rem;
  letter-spacing:0.02em;
  position:relative;
  padding-bottom:4px;
}
.do-primary-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--do-rust);
  transition:right 0.2s ease;
}
.do-primary-nav a:hover::after,
.do-primary-nav a:focus-visible::after{ right:0; }
.do-nav-toggle{
  display:none;
  background:none; border:1px solid var(--do-gold);
  color:var(--do-white);
  padding:0.4rem 0.7rem;
  border-radius:var(--do-radius);
}
@media (max-width:820px){
  .do-nav-toggle{ display:inline-block; }
  .do-primary-nav{
    display:none;
    width:100%;
    order:3;
  }
  .do-primary-nav.is-open{ display:block; }
  .do-primary-nav ul{ flex-direction:column; gap:0; padding-block:0.5rem 1rem; }
  .do-primary-nav a{ display:block; padding:0.6rem 0; }
  .do-header-inner{ flex-wrap:wrap; }
}

/* ==========================================================================
   BUTTONS + BADGES
   ========================================================================== */
.do-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  font-family:var(--do-font-mono);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.82rem;
  padding:0.85em 1.6em;
  border-radius:var(--do-radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.do-btn:hover{ transform:translateY(-1px); }
.do-btn-primary{ background:var(--do-rust); color:var(--do-white); }
.do-btn-primary:hover{ background:var(--do-rust-deep); color:var(--do-white); }
.do-btn-outline{ background:transparent; border-color:currentColor; color:var(--do-slate); }
.do-btn-outline:hover{ background:var(--do-slate); border-color:var(--do-slate); color:var(--do-white); }
.do-btn-outline-light{ background:transparent; border-color:var(--do-white); color:var(--do-white); }
.do-btn-outline-light:hover{ background:var(--do-white); color:var(--do-slate); }

.do-stamp{
  display:inline-block;
  font-family:var(--do-font-mono);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.78rem;
  color:var(--do-rust);
  border:1.5px dashed var(--do-rust);
  padding:0.5em 0.9em;
  border-radius:var(--do-radius);
  transform:rotate(-2deg);
}

/* ==========================================================================
   THE TRAIL SPINE — signature element
   A vertical line runs down the left of the content column and forks
   toward every h2/h3/.do-waypoint, like a branch off a topo-map river.
   Static CSS version always renders; dendritic-trail.js upgrades it with
   precisely-drawn SVG forks once the DOM has settled.
   ========================================================================== */
.do-trail-wrap{ position:relative; }
.do-trail-line{
  position:absolute;
  top:0; bottom:0;
  left:var(--do-trail-x);
  width:2px;
  background:linear-gradient(to bottom, transparent 0, var(--do-line) 3%, var(--do-line) 97%, transparent 100%);
  z-index:0;
}
.do-trail-svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.do-trail-svg path{
  fill:none;
  stroke:var(--do-line);
  stroke-width:2;
  stroke-linecap:round;
}
.do-trail-svg circle{ fill:var(--do-rust); }
.do-content{
  position:relative;
  z-index:1;
  padding-left:calc(var(--do-trail-x) + 2.25rem);
}
.do-content > h2,
.do-content > h3,
.do-waypoint{ position:relative; }
.do-content > h2::before,
.do-content > h3::before{
  content:"";
  position:absolute;
  left:calc((var(--do-trail-x) + 2.25rem) * -1 + var(--do-trail-x) - 7px);
  top:0.55em;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--do-paper);
  border:2.5px solid var(--do-rust);
}
.do-content.do-trail-drawn > h2::before,
.do-content.do-trail-drawn > h3::before{ display:none; } /* JS-drawn fork replaces the static CSS dot */

@media (max-width:760px){
  :root{ --do-trail-x:0.4rem; }
  .do-trail-line{ display:none; }
  .do-content{ padding-left:1.6rem; }
  .do-content > h2::before,
  .do-content > h3::before{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.do-hero{
  background:linear-gradient(165deg, var(--do-slate-deep) 0%, var(--do-slate) 25%, var(--do-teal) 50%, var(--do-peach) 78%, var(--do-gold) 100%);
  color:var(--do-white);
  padding-block:clamp(3.5rem, 8vw, 7rem);
  position:relative;
  overflow:hidden;
}
.do-hero::after{
  content:"";
  position:absolute;
  right:-10%;
  top:-20%;
  width:70%;
  height:140%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cg fill='none' stroke='%232E564F' stroke-width='2' opacity='0.55'%3E%3Cpath d='M50 0 L50 200 L150 300 L150 450 L100 600'/%3E%3Cpath d='M50 200 L-30 280'/%3E%3Cpath d='M150 300 L260 340'/%3E%3Cpath d='M150 450 L230 520'/%3E%3Cpath d='M100 600 L20 650'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.85;
}
.do-hero-inner{ position:relative; z-index:1; max-width:640px; }
.do-hero h1{ color:var(--do-white); }
.do-hero p.do-dek{
  font-size:1.15rem;
  color:var(--do-paper);
  max-width:34em;
}
.do-hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

/* ==========================================================================
   SECTIONS / CARDS
   ========================================================================== */
.do-section{ padding-block:clamp(3rem, 6vw, 5.5rem); }
.do-section-alt{ background:var(--do-paper-light); }
.do-section-dark{ background:var(--do-slate); color:var(--do-white); }
.do-section-dark h2, .do-section-dark h3{ color:var(--do-white); }

.do-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.do-card{
  background:var(--do-white);
  border:1px solid rgba(167,190,192,0.5);
  border-radius:var(--do-radius);
  padding:1.75rem;
}
.do-card h3{ margin-bottom:0.4em; }
.do-card .do-eyebrow{ margin-bottom:0.5em; }

.do-pullquote{
  border-left:3px solid var(--do-gold);
  margin:2rem 0;
  padding:0.25rem 0 0.25rem 1.5rem;
  font-family:var(--do-font-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--do-slate);
}
.do-pullquote cite{
  display:block;
  font-family:var(--do-font-mono);
  font-style:normal;
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--do-rust);
  margin-top:0.6rem;
}

.do-divider{
  border:none;
  height:1px;
  background:repeating-linear-gradient(to right, var(--do-line) 0 6px, transparent 6px 12px);
  margin:2.5rem 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.do-site-footer{
  background:var(--do-slate-deep);
  color:var(--do-paper);
  padding-block:3rem 2rem;
}
.do-footer-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:1.4fr 1fr 1fr;
}
@media (max-width:760px){ .do-footer-grid{ grid-template-columns:1fr; } }
.do-footer-brand .do-brand-name{ color:var(--do-white); }
.do-footer-brand p{ color:rgba(251,250,246,0.75); max-width:32em; }
.do-footer-heading{
  font-family:var(--do-font-mono);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.78rem;
  color:var(--do-gold);
  margin-bottom:0.8em;
}
.do-footer-grid a{ color:var(--do-paper); }
.do-footer-grid a:hover{ color:var(--do-gold); }
.do-footer-grid ul li{ margin-bottom:0.5em; }
.do-footer-bottom{
  border-top:1px solid rgba(217,160,84,0.25);
  margin-top:2.5rem;
  padding-top:1.5rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:0.82rem;
  color:rgba(251,250,246,0.6);
}

/* ==========================================================================
   BOOK / SERIES ARCHIVE (Wisdom, According to G)
   ========================================================================== */
.do-book-card{
  background:var(--do-white);
  border-radius:var(--do-radius);
  overflow:hidden;
  border:1px solid rgba(167,190,192,0.5);
}
.do-book-cover{
  aspect-ratio:2/3;
  background:var(--do-slate) linear-gradient(160deg, var(--do-teal), var(--do-slate-deep));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--do-gold);
  font-family:var(--do-font-mono);
  text-align:center;
  padding:1rem;
}
.do-book-body{ padding:1.25rem; }

/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   Elementor supplies its own section/container widths. Templates only wrap
   output in .do-trail-wrap/.do-content for pages NOT built with Elementor
   (see page.php / front-page.php) — when a page IS built with Elementor,
   the_content() is printed on its own with no theme wrapper, so Elementor's
   full-width sections are never fought by theme CSS.
   ========================================================================== */
.elementor-widget-theme-post-content .do-trail-wrap{ padding-left:0; }
body.elementor-editor-active .do-trail-line,
body.elementor-editor-active .do-trail-svg{ display:none; }