/* ============================================================
   Wilderness Experts — Kadence + WordPress mapping layer
   Maps design-system tokens onto Kadence structural selectors and
   WP core/block selectors so the front end reflects the brand.
   Loaded AFTER ds/we-design-system.css.
   ============================================================ */

/* ---- Kadence global variables → brand tokens ---- */
:root {
  --global-palette1: var(--green-700);   /* brand */
  --global-palette2: var(--green-800);   /* brand dark */
  --global-palette3: var(--orange-500);  /* accent */
  --global-palette4: var(--orange-600);  /* accent hover */
  --global-palette5: var(--ink-900);     /* strongest text */
  --global-palette6: var(--ink-700);     /* body text */
  --global-palette7: var(--ink-500);     /* muted */
  --global-palette8: var(--border-default);
  --global-palette9: var(--paper-100);   /* subtle bg */
  --global-palette-highlight: var(--orange-500);
  --global-content-width: var(--container-xl);
  --global-content-narrow-width: var(--container-md);

  --global-body-font-family: var(--font-body);
  --global-heading-font-family: var(--font-display);
}

/* ---- Base page + typography ---- */
body,
.content-bg,
body.wp-singular .content-bg {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}
.entry-content a,
.entry-content a:visited { color: var(--text-link); }
.entry-content a:hover { color: var(--text-link-hover); }

/* ---- Header / site branding ---- */
#masthead,
.site-header-row {
  background: var(--surface-card);
  border-bottom: var(--border-hairline) solid var(--border-default);
}
.site-branding .site-title,
.site-title a {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--green-800);
  letter-spacing: var(--tracking-tight);
}
.site-description {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-2xs);
  color: var(--text-accent);
}
.header-navigation .menu-item > a,
.main-navigation .menu-item > a {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
}
.header-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:hover { color: var(--orange-600); }

/* ---- Buttons (Kadence + core blocks) → brand button system ---- */
.wp-block-button__link,
.kb-button,
.button,
button.wp-block-button__link,
input[type="submit"] {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  border: var(--border-hairline) solid transparent;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.wp-block-button__link:hover,
.kb-button:hover,
.button:hover,
input[type="submit"]:hover { background: var(--accent-hover); color: #fff; }
.wp-block-button__link:active,
.kb-button:active { transform: translateY(1px); }
/* Outline button variant → brand green */
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--green-700);
  border-color: var(--green-700);
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--green-700);
  color: var(--paper-50);
}

/* ---- Cards / posts grid ---- */
.entry.loop-entry,
.wp-block-group.has-border,
article.entry {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.loop-entry .entry-title a { color: var(--text-heading); }
.loop-entry .entry-title a:hover { color: var(--orange-600); }

/* ---- Deep-green emphasis band utility ---- */
.we-band {
  background: var(--surface-brand);
  color: var(--text-inverse);
  position: relative;
}
.we-band h1, .we-band h2, .we-band h3 { color: var(--paper-50); }
.we-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/topo-pattern.svg");
  background-size: 640px;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}
.we-band > * { position: relative; }

/* ---- Hero with photo scrim ---- */
.we-hero {
  position: relative;
  color: var(--paper-50);
  background-size: cover;
  background-position: center;
}
.we-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,39,25,0.55) 0%, rgba(27,39,25,0.90) 100%);
}
.we-hero > * { position: relative; z-index: 1; }
.we-hero h1 { color: #fff; }

/* ---- Footer ---- */
#colophon,
.site-footer {
  background: var(--green-900);
  color: var(--green-200);
}
#colophon a { color: var(--green-100); }
#colophon a:hover { color: var(--orange-300); }

/* ---- Focus visibility (brand ring) ---- */
a:focus-visible, button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ============================================================
   Content + homepage helpers (articles, reviews, front page)
   ============================================================ */
.we-lead { font-size: var(--text-lg); color: var(--text-heading); line-height: var(--leading-relaxed); }
.entry-content .we-lead { font-weight: var(--weight-medium); }
.we-source, .we-affiliate {
  font-size: var(--text-sm); color: var(--text-muted);
  border-top: var(--border-hairline) solid var(--border-default);
  padding-top: var(--space-3); margin-top: var(--space-8); font-style: italic;
}
.we-affiliate { border-top: 0; border-left: 3px solid var(--border-brand);
  padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-6);
  background: var(--surface-brand-soft); font-style: normal; border-radius: var(--radius-sm); }
.we-callout__content { flex: 1; }
.we-callout { margin: var(--space-6) 0; }
.we-ratingline { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); }
.we-ratingline .we-eyebrow { margin: 0; }
.we-specs-h { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.we-specs { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body);
  background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.we-specs span { white-space: nowrap; }

/* ---- Front page ---- */
.we-hero-home {
  background: var(--surface-brand); color: var(--paper-50);
  padding: var(--space-24) var(--gutter); position: relative; overflow: hidden; text-align: center;
}
.we-hero-home::before { content:""; position:absolute; inset:0;
  background-image:url("assets/topo-pattern.svg"); background-size:640px; opacity:.12; mix-blend-mode:screen; }
.we-hero-home > * { position: relative; max-width: var(--container-md); margin-inline: auto; }
.we-hero-home h1 { color:#fff; font-size: var(--text-5xl); margin-bottom: var(--space-4); }
.we-hero-home p { color: var(--green-100); font-size: var(--text-xl); margin-bottom: var(--space-8); }
.we-section { max-width: var(--container-xl); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.we-section > .we-eyebrow { display:block; margin-bottom: var(--space-2); }
.we-section h2 { font-size: var(--text-3xl); margin-bottom: var(--space-8); }
.we-grid { display:grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.we-tile {
  display:block; background: var(--surface-card); border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6);
  text-decoration:none; color: var(--text-body);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard);
}
.we-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); color: var(--text-body); }
.we-tile h3 { font-size: var(--text-xl); margin: var(--space-2) 0; color: var(--text-heading); }
.we-tile p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.we-tile .we-eyebrow { font-size: var(--text-2xs); }
.we-band-cta { background: var(--surface-brand); color: var(--paper-50); position: relative; overflow:hidden;
  border-radius: var(--radius-lg); padding: var(--space-16) var(--space-8); text-align:center; }
.we-band-cta::before { content:""; position:absolute; inset:0; background-image:url("assets/topo-pattern.svg"); background-size:520px; opacity:.12; mix-blend-mode:screen; }
.we-band-cta > * { position:relative; }
.we-band-cta h2 { color:#fff; }
.we-band-cta p { color: var(--green-100); max-width: 46ch; margin-inline:auto; }

/* ============================================================
   Photography (Unsplash placeholders — swap for licensed shots)
   ============================================================ */
.we-hero-home {
  background-image:
    linear-gradient(180deg, rgba(27,39,25,0.60) 0%, rgba(27,39,25,0.88) 100%),
    url("https://images.unsplash.com/photo-1757997853073-d088630c87e7?auto=format&fit=crop&w=2000&q=70");
  background-size: cover;
  background-position: center;
}
.we-hero-home::before { opacity: 0.10; }

/* Full-width article header image */
.we-article-hero { margin: 0 0 var(--space-8); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: var(--border-hairline) solid var(--border-default); }
.we-article-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }

/* Photo tiles (featured cards) */
.we-tile--photo { padding: 0; overflow: hidden; }
.we-tile--photo .we-tile__img { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.we-tile--photo .we-tile__body { display: block; padding: var(--space-6); }
.we-tile--photo .we-tile__body .we-eyebrow { display: block; margin-bottom: var(--space-2); }
.we-tile--photo .we-tile__body h3 { margin-top: 0; }

/* ============================================================
   Hero refinement — left-aligned, size-capped headline (fixes
   overflow at large viewports). Overrides earlier .we-hero-home.
   ============================================================ */
.we-hero-home {
  text-align: left;
  padding: clamp(3.5rem, 8vw, 7.5rem) var(--gutter);
  background-image:
    linear-gradient(90deg, rgba(27,39,25,0.86) 0%, rgba(27,39,25,0.58) 48%, rgba(27,39,25,0.28) 100%),
    url("https://images.unsplash.com/photo-1757997853073-d088630c87e7?auto=format&fit=crop&w=2000&q=70");
  background-size: cover;
  background-position: center;
}
.we-hero-home > * { max-width: none; margin-inline: 0; }   /* reset old centering */
.we-hero-home__inner { max-width: var(--container-xl); margin-inline: auto; }
.we-hero-home__inner > * { max-width: 36rem; }
.we-hero-home .we-eyebrow { display: block; margin: 0 0 var(--space-4); color: var(--orange-300); }
.we-hero-home h1 {
  color: #fff;
  font-size: clamp(2.5rem, 2vw + 2rem, 4.25rem);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-5);
}
.we-hero-home p {
  color: var(--green-100);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-8);
  max-width: 32rem;
}
.we-hero-home__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; max-width: none; }
/* Light outline button for use on the dark hero */
.we-hero-home .we-btn--outline {
  background: transparent;
  border-color: rgba(255,255,255,0.65);
  color: #fff;
}
.we-hero-home .we-btn--outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* ============================================================
   Replace Kadence chrome with the design-system header/footer
   ============================================================ */
#masthead, #colophon, .site-header, .site-footer { display: none !important; }
/* Custom header is sticky; ensure content sits flush beneath it */
.we-site-header + #wrapper, .we-site-header ~ #wrapper { margin-top: 0; }
/* Kadence sometimes adds top padding on the content area of the front page */
.home #inner-wrap, .page-template-front-page #inner-wrap { padding-top: 0; }