/* ========================================================================
   Site chrome — header/nav + footer, loaded on every page.
   Matches thejoshuatreehouse.com (live Aesthetic/Brizy), Sep 2026 parity build.
   ======================================================================== */

@font-face {
  font-family: "Windsor";
  src: url("../fonts/windsor-regular.woff2") format("woff2"),
       url("../fonts/windsor-regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Windsor";
  src: url("../fonts/windsor-bold.woff2") format("woff2"),
       url("../fonts/windsor-bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --jth-ink: #1D130F;
  --jth-sand: #D3C2B5;
  --jth-sand-light: #EDE4D6;
  --jth-clay: #8E5E3B;
  --jth-clay-dark: #6E4A2E;
  /* Real production color, not a guess — sampled from the actual painted
     background of .fw-footer-widgets on the live footer (rgb(162,126,74)),
     which also turned out to be the Lodgify Search button's true fill.
     Distinct from --jth-clay; this is more golden/khaki. */
  --jth-gold: #A27E4A;
  --jth-gold-dark: #8A6A3C;
}

/* Production sets Windsor as the actual body-text font sitewide, not just
   headings (confirmed via computed style on a live blog post's paragraph
   text). Kadence's default templates set body font-family via its own
   --global-body-font-family variable (a system-font stack), applied with
   enough specificity/cascade order to beat a plain (no-!important) rule
   here — hence !important, to actually win. */
body {
  font-family: "Windsor", Georgia, "Times New Roman", serif !important;
}
/* Kadence's own body background (#f2ece4) is a close but NOT identical
   beige to our --jth-sand-light (#EDE4D6) — close enough to look like a
   mismatch/seam wherever the two sit next to each other, rather than a
   deliberate two-tone design. Make it the same color everywhere. */
body {
  background: var(--jth-sand) !important;
}

/* ── BLOG ARCHIVE / SINGLE POST (Kadence default templates) ─────────── */
/* Same ".content-bg" utility as the WooCommerce fix — Kadence paints its
   own near-white theme background on every article card here too. */
body.blog .content-bg,
body.archive .content-bg,
body.single .content-bg {
  background: var(--jth-sand) !important;
}
/* Full-width featured image is fine, but unconstrained paragraph text at
   this content width runs to an uncomfortable line length — give the
   text itself a proper reading measure while the image stays full width.
   Explicit margin-left:0 because Kadence's own boxed/content styles
   sometimes center a max-width child via auto margins — this keeps it
   flush with the image's left edge instead of drifting to center. */
body.blog .entry-content,
body.archive .entry-content,
body.single .entry-content,
.post .entry-summary,
.post-list-type-1 p {
  max-width: 700px;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Author byline — Rich wants this off the archive cards. ".posted-by"
   wraps both the "By" label and the name as one unit, so hiding it drops
   both together and leaves the date (".posted-on") in place. */
body.blog .posted-by,
body.archive .posted-by {
  display: none !important;
}

/* ── HEADER ──────────────────────────────────────────────────────── */
/* Rich caught the header isn't actually sticky on scroll — computed
   position was "relative", not "sticky". Same cascade-losing pattern as
   everywhere else in this build: Kadence has its own, more specific
   rule setting position on .site-header (its native sticky-header
   feature is toggled by a customizer setting/JS-added class we don't
   have enabled), which was beating this plain rule. Needed !important.

   Second bug found from the same fix (Rich caught this on a blog post):
   every level of the header — .site-header itself and every wrapper div
   inside it — is fully transparent (rgba(0,0,0,0)), by design of
   Kadence's "transparent header" feature (body carries a
   transparent-header class sitewide, meant to let a hero image show
   through behind the header on pages that have one). That's invisible
   and harmless while the header sits in its normal spot at the top of
   the page — but once forced sticky, the header stays fixed on screen
   while ordinary page content scrolls up underneath it, and being fully
   see-through, that scrolling content visibly bleeds through the header
   the whole time you scroll. A background on .site-header alone is
   enough to fix it (its transparent children just reveal *this*
   background, not whatever's further behind), but needs !important —
   without it, Kadence's own transparent-header rule wins and the fix
   silently does nothing, which is exactly what happened on the first
   attempt here. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background-color: var(--jth-sand) !important;
}
.site-header-upper-wrap {
  padding: 14px 0;
}
.site-header .brand img.custom-logo {
  height: 34px;
  width: auto;
}
/* The logo image already carries the wordmark — hide Kadence's separate
   site-title text next to it so it doesn't read twice. */
.site-header .site-title,
.site-header .site-tagline {
  display: none;
}
/* Rich caught the nav links rendering in a muted grey instead of our real
   off-black. Root cause: Kadence's own header-text color customizer
   setting (--global-palette5, #6e6a64) was reaching the link through a
   more specific Kadence selector than this rule — needed !important to
   actually win the cascade, same pattern as the Lodgify placeholder
   fixes elsewhere in this build. */
.main-navigation ul li a {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jth-ink) !important;
}
.main-navigation ul li a:hover {
  opacity: 0.65;
}
/* More breathing room between Field Guide / Shop / Book Now — live's nav
   items sit further apart than Kadence's tight default spacing. The list
   is a flex row, so `gap` is the clean way to add it. */
.main-navigation > div > ul {
  gap: 32px;
}
/* Book Now — last top-level nav item — styled as the bordered button
   the live site uses. First padding bump (14px 28px) never actually
   rendered — Kadence's own more specific rule
   (.main-navigation .primary-menu-container > ul > li.menu-item > a,
   3 classes vs. our 1) was winning the cascade the whole time, same
   pattern as the nav color/dropdown bugs above. Needed !important this
   time. Started from live's own measured padding (9px 26px 3px), then
   Rich hand-tuned it further. */
.main-navigation > div > ul > li:last-child > a {
  padding: 15px 25px 13px !important;
  border: 2px solid var(--jth-ink);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Book Now hover — solid fill instead of the plain opacity-fade every
   other nav link gets (that generic rule still applies underneath, so
   override it back to full opacity here). */
.main-navigation > div > ul > li:last-child > a:hover {
  background: var(--jth-ink);
  color: #fff !important;
  opacity: 1;
}
/* Dropdown chevrons (Field Guide/Shop) — live's nav doesn't show them. */
.main-navigation .dropdown-nav-toggle {
  display: none !important;
}
/* Submenu panel was rendering in Kadence's dark customizer background
   (--global-palette3, near-black) with our own dark ink text on top of
   it — nearly unreadable, same cascade-losing pattern as the top-level
   link color. Matched live's actual measured panel: light cream
   background, solid dark border (not our translucent clay one), dark
   readable text. */
.main-navigation ul ul {
  background: var(--jth-sand-light) !important;
  border: 1px solid var(--jth-ink) !important;
  padding: 8px 0 0;
}
.main-navigation ul ul a {
  color: var(--jth-ink) !important;
}
/* Submenu item hover — Kadence's own olive hover background
   (--global-palette2) was already coming through, but paired with our
   dark ink text override above, that left dark-on-olive: readable-ish
   but not the clean white-on-olive Rich wants. */
.main-navigation ul ul li:hover > a,
.main-navigation ul ul a:hover {
  color: #fff !important;
}

/* Mobile menu toggle — Kadence colors it via --global-palette5, which
   resolves too close to the sand header background to be visible. */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
  color: var(--jth-ink) !important;
}
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
  color: var(--jth-clay) !important;
}
/* Mobile drawer menu itself was never actually checked past the toggle
   icon being visible — Rich caught it opens with Kadence's near-black
   default drawer background (rgb(9,12,16)), which doesn't match live at
   all: live's drawer is the site's olive/sage brand color
   (--global-palette2) with cream text. Matched it; kept Kadence's own
   cream-ish text color since it already measured close to live's. */
.popup-drawer .drawer-inner {
  background-color: var(--global-palette2, #8f9a84) !important;
}
/* Book Now — last top-level item in the mobile drawer — styled as a
   real button so it stands out from the plain Field Guide/Shop links
   above it, matching the treatment Book Now already gets in the
   desktop nav. Padding already matched Kadence's own default here;
   just adding the button border/centering and dropping the thin
   divider line every other drawer item gets underneath it. */
.mobile-menu-container > ul > li:last-child > a {
  text-align: center;
  border: 1px solid #fff !important;
  font-weight: 700;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
/* Real production footer has a transparent background (it just sits on
   the page's own light body color) with dark ink text throughout — NOT
   an inverted dark section. Confirmed via computed styles off the live
   site, Sep 12 2026. */
.jth-parity-footer {
  /* Corrected: the <footer> tag itself computes as transparent on
     production, but that's not where the real color lives — it's
     painted on a child div (.fw-footer-widgets) one level in. Sampled
     that element directly: rgb(162,126,74), a golden-tan, not the plain
     sand-light I'd used before. */
  background: var(--jth-gold);
  color: var(--jth-ink);
  padding: 56px 48px 24px;
  font-family: "Windsor", Georgia, serif;
}
/* Live's real structure (confirmed via computed layout at 1440px, Sep 22
   2026): the roadrunner sits centered on its OWN row above the columns —
   not as a 4th column alongside them, which is what this used to build.
   Below it: 3 columns, Stay In Touch / Locations / Info in that order
   (Locations before Info — also previously swapped). */
.jth-parity-footer__logo {
  text-align: center;
  margin-bottom: 40px;
}
.jth-parity-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(29,19,15,0.12);
  max-width: 1280px;
  margin: 0 auto;
}
.jth-parity-footer__roadrunner {
  width: 70px;
  max-width: 70px;
  /* Kadence's own base img rule sets display:block, which makes the
     parent's text-align:center do nothing (block elements need their own
     centering) — center the image directly instead. */
  display: block;
  margin: 0 auto;
}
.jth-parity-footer__col h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--jth-ink);
  margin: 0 0 18px;
}
.jth-parity-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jth-parity-footer__col a {
  color: var(--jth-ink);
  text-decoration: none;
  font-size: 14px;
  font-family: "Windsor", Georgia, serif;
}
.jth-parity-footer__col a:hover { opacity: 0.6; }
/* Live's "Info" column runs its 7 links as a 2-column grid (confirmed via
   computed layout — paired row by row: About/Our Book, Privacy/Terms,
   Contact/Careers, Wait List alone), not a single stacked column like
   the other two footer columns. Our link order already matches that
   pairing exactly. */
.jth-parity-footer__col--info ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.jth-parity-footer__signup {
  display: flex;
  border-bottom: 1px solid var(--jth-ink);
  padding-bottom: 8px;
}
.jth-parity-footer__signup input[type="email"] {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--jth-ink);
  font-size: 16.5px;
  padding: 0;
  margin: 0;
  font-family: inherit;
  min-width: 0;
}
.jth-parity-footer__signup input:focus {
  outline: none;
}
.jth-parity-footer__signup input::placeholder { color: rgba(29,19,15,0.45); }
.jth-parity-footer__signup button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--jth-ink);
  border-radius: 0;
  color: var(--jth-ink);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.jth-parity-footer__bottom {
  padding-top: 20px;
  text-align: center;
}
.jth-parity-footer__bottom p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(29,19,15,0.5);
}

@media (max-width: 900px) {
  .jth-parity-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* At phone widths, 2 columns squeezes "Stay In Touch" (its inline
   email-input + button form needs real room) enough to overflow the
   column and push "Locations" off the right edge of the screen entirely.
   Stack to a single column below tablet width. */
@media (max-width: 560px) {
  .jth-parity-footer__cols { grid-template-columns: 1fr; }
  .jth-parity-footer__signup { flex-direction: column; align-items: stretch; gap: 8px; border-bottom: 0; }
  .jth-parity-footer__signup input[type="email"] { border-bottom: 1px solid var(--jth-ink); padding-bottom: 8px; }
  .jth-parity-footer__signup button { align-self: flex-start; }
}

/* Live-site global traits: 1px tracking on body text, slate-blue in-content links. */
body { letter-spacing: 1px; }
.entry-content a:not(.button):not(.wp-element-button):not(.jl-btn):not(.jh-btn-o):not(.title-bar-text),
.entry-summary a { color: #4E5D7A; }

/* Kadence paints its own near-white on these wrappers; live is one sand body. */
#wrapper, #inner-wrap, .site, #primary, #main, .content-area, .site-main, .content-container, .site-container, .entry-content-wrap, .entry.content-bg, .content-bg, .archive-title-wrap, .entry-hero-container-inner, .page-hero-section, .entry-hero .hero-section-overlay { background: transparent !important; }

/* Header: live has a 1px ink rule under the header bar. */
.site-header { border-bottom: 1px solid var(--jth-ink); }

/* Blog archive AND post category/tag archives — live uses the identical
   magazine layout on both (confirmed against /category/lifestyle/, which
   renders exactly like /blog/, just filtered). Kadence gives category/tag
   archives body classes "archive category …" / "archive tag …" — NOT
   "blog" — so the old body.blog-only rules below missed them entirely;
   scoped narrowly to actual post archives, never product-category (which
   carries "tax-product_cat", not "category"/"tag"). Live keeps the plain
   category/tag title (e.g. "Lifestyle") centered above the posts, unlike
   the blog index which has no title at all — only hide it on body.blog. */
body.blog .archive-title-wrap, body.blog .entry-hero, body.blog .page-title { display: none !important; }
body.category .archive-title-wrap, body.tag .archive-title-wrap,
body.category .entry-hero, body.tag .entry-hero {
  background: transparent !important; padding: 40px 0 20px !important; min-height: 0 !important;
}
body.category h1.page-title, body.tag h1.page-title {
  font-family: "Windsor", Georgia, serif; font-weight: 400; text-align: center; margin: 0;
}
body.blog .site-container, body.blog #primary,
body.category .site-container, body.category #primary,
body.tag .site-container, body.tag #primary { max-width: 1024px; margin-left: auto; margin-right: auto; }
body.blog .loop-entry, body.blog .entry.loop-entry,
body.category .loop-entry, body.category .entry.loop-entry,
body.tag .loop-entry, body.tag .entry.loop-entry { max-width: 800px; margin: 40px auto 60px !important; }
body.blog .loop-entry .entry-title, body.category .loop-entry .entry-title, body.tag .loop-entry .entry-title { font-size: 48px; line-height: 1.2; font-weight: 400; margin: 12px 0 16px; padding-left: 60px; }
body.blog .loop-entry .entry-title a, body.category .loop-entry .entry-title a, body.tag .loop-entry .entry-title a { color: var(--jth-ink); }
body.blog .loop-entry .entry-meta, body.blog .loop-entry .entry-taxonomies,
body.category .loop-entry .entry-meta, body.category .loop-entry .entry-taxonomies,
body.tag .loop-entry .entry-meta, body.tag .loop-entry .entry-taxonomies { padding-left: 60px; }
body.blog .loop-entry .entry-meta, body.category .loop-entry .entry-meta, body.tag .loop-entry .entry-meta { font-size: 14px; text-transform: uppercase; color: #767260; }
body.blog .loop-entry .entry-summary, body.category .loop-entry .entry-summary, body.tag .loop-entry .entry-summary { font-size: 18px; padding-left: 60px; max-width: 740px; }
body.blog .loop-entry .entry-summary p, body.category .loop-entry .entry-summary p, body.tag .loop-entry .entry-summary p { font-size: 18px; line-height: 1.5; }
body.blog .loop-entry .post-more-link, body.category .loop-entry .post-more-link, body.tag .loop-entry .post-more-link { margin-left: 60px; }
/* Live "Read More": plain text, no arrow, with a 2px rust underline
   (border-bottom, not text-decoration) — not our arrow-icon button. */
body.blog .post-more-link, body.category .post-more-link, body.tag .post-more-link {
  display: inline-block; border: 0; border-bottom: 2px solid #A45E49; padding: 0 0 5px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--jth-ink); background: none;
}
body.blog .post-more-link .kadence-svg-iconset, body.category .post-more-link .kadence-svg-iconset, body.tag .post-more-link .kadence-svg-iconset { display: none; }

/* Single post — live: title/date left-aligned above a full-width image with
   NO overlap, no category badge above the title, no "By <author>" byline
   (just the date), body copy in a 680px column. Kadence's default single
   template pulls the featured image up under the title with a negative
   margin-bottom on .post-thumbnail (a "card" effect meant to pair with a
   contrasting content-bg) — since content-bg is transparent here (matches
   the rest of the site's single sand background) that overlap just reads
   as a layout bug, not a card. Zero it out. */
body.single-post .post-thumbnail { margin-bottom: 0 !important; }
/* Kadence's own default paints a fade-to-cream gradient over the bottom
   of the featured image via ::after (meant to blend into a card design
   below it) — live has no such effect on its image at all. */
body.single-post .post-thumbnail::after { content: none !important; }
/* Rich caught this: the date+title block sat much closer to the header
   above it than to the image below — the min-height:200px box Kadence
   gives this header, combined with justify-content:center, was centering
   [date, title] as a unit but the title's own 60px margin-bottom got
   folded into that unit's bottom edge, so nearly all the visible "gap"
   below the title was really that margin, not centering — while the
   actual centering slack above the date was only ~14px. Fixes worse on a
   2-line-wrapping title (taller content = even less centering slack)
   than on the short single-line title this was tuned against originally.
   Switched to explicit, equal top/bottom padding on the header instead
   of relying on centering a min-height box, so it stays symmetric
   regardless of title length; dropped the title's own margin-bottom
   since padding now does that job. */
body.single-post .entry-header.post-title {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 0 !important;
  /* Rich: even, but too much air below the title once symmetric — trimmed
     the bottom side down a bit while keeping the top as-is. */
  padding: 64px 0 40px !important;
}
body.single-post .entry-header.post-title .entry-taxonomies { display: none !important; }
/* Live's real DOM order is date-then-title (its own template puts the
   date block before the <h1>); Kadence's template does the opposite
   (title, then a meta block with the date) — reorder visually with flex
   `order` rather than fighting the template's markup. Title is also
   48px/60px line-height on live, not 36px — confirmed via computed
   styles, not a guess. */
body.single-post .entry-header.post-title .entry-title {
  text-align: left !important;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  margin-bottom: 0;
  order: 2;
}
body.single-post .entry-header.post-title .entry-meta {
  text-align: left !important;
  justify-content: flex-start !important;
  order: 1;
  margin-bottom: 24px;
}
body.single-post .entry-header.post-title .posted-by { display: none !important; }
/* Live has ~55px of air between the image and the first paragraph; ours
   had none, then not quite enough after a first pass — widened further. */
body.single-post .entry-content-wrap {
  max-width: 680px;
  margin-left: 0 !important;
  padding-left: 20px;
  padding-top: 80px !important;
}
/* WP core gallery captions ("Images by ...") center by default and carry
   a large bottom margin from the gallery grid's own spacing — left-align
   to match the rest of the article text and trim the gap before whatever
   comes next. */
body.single-post .entry-content .gallery-caption {
  text-align: left !important;
  margin: 8px 0 16px !important;
}
/* The real source of the remaining gap: .gallery is a CSS grid with
   align-items left at its default (stretch), and a fixed row height set
   to whichever item in that row is tallest — a shorter item (e.g. one
   with a caption under a portrait image, next to a taller landscape
   image) gets stretched to match, leaving dead space at the bottom of
   its own box, below the caption, inside the grid cell. Let each item
   size to its own content instead of stretching to fill the row. */
body.single-post .entry-content .gallery {
  align-items: start;
}
/* A captioned gallery-item also carries its own extra margin-bottom
   (32px vs 0 on an uncaptioned one right next to it in the same row) —
   not part of the stretch issue above, a separate WP-core default.
   Normalize so a caption doesn't add more gap than an uncaptioned item. */
body.single-post .entry-content .gallery-item {
  margin-bottom: 0 !important;
}

/* The current page's top-level menu item is terracotta on live (e.g. SHOP on the shop, FIELD GUIDE in the blog). */
.header-navigation .header-menu-container ul.menu > li.current-menu-item > a,
.header-navigation .header-menu-container ul.menu > li.current-menu-ancestor > a,
.header-navigation .header-menu-container ul.menu > li.current_page_parent > a,
body.post-type-archive-product .header-navigation .header-menu-container ul.menu > li > a[href$="/shop/"] { color: #A55E48 !important; }