/*
Theme Name:        Wild Routes
Theme URI:         https://wildroutes.co.za
Description:       Premium editorial theme for Wild Routes — Curated Outdoor Escapes, Southern Africa. Built as a full-site editing (FSE) block theme.
Author:            Wild Routes
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       wild-routes
Tags:              full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, featured-images, wide-blocks
*/

/* ─────────────────────────────────────────────
   GOOGLE FONTS IMPORT
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Montserrat:wght@300;400;500&display=swap');

/* ─────────────────────────────────────────────
   CSS CUSTOM PROPERTIES (mirrors theme.json)
───────────────────────────────────────────── */
:root {
  --wr-forest:       #1A1F1C;
  --wr-ivory:        #F4F1EC;
  --wr-sand:         #EDE9E2;
  --wr-sage:         #6B7266;
  --wr-gold:         #B08A5B;
  --wr-warm-earth:   #A78E72;
  --wr-border:       rgba(26,31,28,0.10);
  --wr-border-mid:   rgba(26,31,28,0.18);
  --wr-ivory-muted:  rgba(244,241,236,0.50);
  --wr-font-serif:   'Playfair Display', Georgia, serif;
  --wr-font-sans:    'Montserrat', Helvetica, Arial, sans-serif;
}

/* ─────────────────────────────────────────────
   BASE RESET & BODY
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:    var(--wr-font-sans);
  font-size:      13px;
  font-weight:    400;
  line-height:    1.7;
  color:          var(--wr-forest);
  background:     var(--wr-ivory);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--wr-font-serif);
  font-weight:  400;
  line-height:  1.2;
  color:        var(--wr-forest);
  margin:       0 0 0.75em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.125rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.375rem, 2.5vw, 2rem);   }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1.2em; line-height: 1.9; color: var(--wr-sage); }
p:last-child { margin-bottom: 0; }

a { color: var(--wr-gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--wr-forest); }

strong { font-weight: 500; color: var(--wr-forest); }
em     { font-style: italic; }

/* ─────────────────────────────────────────────
   OVERLINE / EYEBROW UTILITY
───────────────────────────────────────────── */
.wr-overline {
  font-family:    var(--wr-font-sans);
  font-size:      0.5625rem;
  font-weight:    500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          var(--wr-gold);
  display:        block;
  margin-bottom:  0.75rem;
}

/* ─────────────────────────────────────────────
   GOLD RULE UTILITY
───────────────────────────────────────────── */
.wr-gold-rule {
  display:    block;
  width:      40px;
  height:     1px;
  background: var(--wr-gold);
  margin:     0 0 1.5rem;
  border:     none;
}

.wp-block-separator.is-style-wr-gold {
  width:      40px;
  border:     none;
  border-top: 1.5px solid var(--wr-gold);
  margin:     0 0 1.5rem;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.wp-block-button__link,
.wr-btn {
  font-family:    var(--wr-font-sans) !important;
  font-size:      0.5625rem !important;
  font-weight:    500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius:  0 !important;
  padding:        13px 28px !important;
  transition:     background 0.2s, color 0.2s !important;
}

.wp-block-button.is-style-wr-gold .wp-block-button__link {
  background: var(--wr-gold) !important;
  color:      var(--wr-ivory) !important;
  border:     none !important;
}
.wp-block-button.is-style-wr-gold .wp-block-button__link:hover {
  background: #9a7a4e !important;
}

.wp-block-button.is-style-wr-outline .wp-block-button__link {
  background: transparent !important;
  color:      var(--wr-forest) !important;
  border:     0.5px solid rgba(26,31,28,0.25) !important;
}
.wp-block-button.is-style-wr-outline .wp-block-button__link:hover {
  border-color: var(--wr-gold) !important;
  color:        var(--wr-gold) !important;
}

.wp-block-button.is-style-wr-outline-light .wp-block-button__link {
  background: transparent !important;
  color:      var(--wr-ivory-muted) !important;
  border:     0.5px solid rgba(244,241,236,0.25) !important;
}
.wp-block-button.is-style-wr-outline-light .wp-block-button__link:hover {
  color:        var(--wr-ivory) !important;
  border-color: rgba(244,241,236,0.5) !important;
}

/* ─────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────── */
.wp-block-navigation {
  font-family:    var(--wr-font-sans);
  font-size:      0.625rem;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wp-block-navigation a {
  color: var(--wr-sage) !important;
}
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a {
  color: var(--wr-forest) !important;
}

/* ─────────────────────────────────────────────
   COVER / HERO BLOCKS
───────────────────────────────────────────── */
.wp-block-cover {
  min-height: 560px;
}
.wp-block-cover__inner-container {
  padding: 0 3.25rem 3.5rem;
}

/* ─────────────────────────────────────────────
   HERO META BAR (dark strip)
───────────────────────────────────────────── */
.wr-meta-bar {
  background:   var(--wr-forest);
  display:      grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 0.5px solid rgba(244,241,236,0.07);
}
.wr-meta-bar__item {
  padding:       20px 24px;
  border-right:  0.5px solid rgba(244,241,236,0.07);
  display:       flex;
  align-items:   center;
  gap:           12px;
}
.wr-meta-bar__item:last-child { border-right: none; }
.wr-meta-bar__label {
  font-size:      0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(220,205,182,0.35);
  margin-bottom:  3px;
}
.wr-meta-bar__value {
  font-family: var(--wr-font-serif);
  font-size:   0.8125rem;
  color:       rgba(220,205,182,0.7);
}

/* ─────────────────────────────────────────────
   TWO-COLUMN INTRO SECTION
───────────────────────────────────────────── */
.wr-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  border-bottom:         0.5px solid var(--wr-border);
}
.wr-two-col__left  { padding: 4rem 3.25rem; border-right: 0.5px solid var(--wr-border); }
.wr-two-col__right { padding: 4rem 3.25rem; }

/* ─────────────────────────────────────────────
   DESTINATION / CAMP CARDS
───────────────────────────────────────────── */
.wr-card {
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
}
.wr-card__img {
  display:     block;
  width:       100%;
  aspect-ratio: 3/4;
  object-fit:  cover;
}
.wr-card__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(12,15,10,0.7) 0%, transparent 55%);
}
.wr-card__body {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  padding:  1.5rem;
  z-index:  1;
}
.wr-card__region {
  font-size:      0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(244,241,236,0.45);
  margin-bottom:  4px;
}
.wr-card__name {
  font-family: var(--wr-font-serif);
  font-size:   1.25rem;
  font-weight: 400;
  color:       var(--wr-ivory);
  line-height: 1.25;
  margin:      0;
}
.wr-card__tag {
  display:        inline-block;
  font-size:      0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        3px 8px;
  border:         0.5px solid rgba(176,138,91,0.45);
  color:          var(--wr-gold);
  margin-bottom:  6px;
}
.wr-card__below {
  padding:       1.125rem 0;
  border-bottom: 0.5px solid var(--wr-border);
}
.wr-card__desc {
  font-size:   0.6875rem;
  color:       var(--wr-sage);
  line-height: 1.75;
  margin:      0 0 0.625rem;
}
.wr-card__link {
  font-size:      0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--wr-gold);
}

/* ─────────────────────────────────────────────
   CAMP QUICK FACTS BAR
───────────────────────────────────────────── */
.wr-facts-bar {
  background:            var(--wr-forest);
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
}
.wr-facts-bar__item {
  padding:      20px;
  border-right: 0.5px solid rgba(244,241,236,0.07);
  display:      flex;
  flex-direction: column;
  gap:          5px;
}
.wr-facts-bar__item:last-child { border-right: none; }
.wr-facts-bar__label {
  font-size:      0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(220,205,182,0.3);
}
.wr-facts-bar__value {
  font-family: var(--wr-font-serif);
  font-size:   0.8125rem;
  color:       rgba(220,205,182,0.7);
  line-height: 1.3;
}

/* ─────────────────────────────────────────────
   ARTICLE BODY (Journal)
───────────────────────────────────────────── */
.wr-article-body {
  font-size:   0.8125rem;
  line-height: 2;
  color:       #4a4a42;
  max-width:   680px;
}
.wr-article-body p:first-child::first-letter {
  font-family: var(--wr-font-serif);
  font-size:   3.25rem;
  font-weight: 400;
  float:       left;
  line-height: 0.82;
  margin-right: 8px;
  margin-top:   6px;
  color:        var(--wr-forest);
}
.wr-article-body .wp-block-pullquote {
  border-left:    2px solid var(--wr-gold);
  border-top:     0.5px solid rgba(26,31,28,0.12);
  border-bottom:  0.5px solid rgba(26,31,28,0.12);
  border-right:   none;
  padding:        1.75rem 2rem;
  margin:         2.25rem 0;
  text-align:     center;
}
.wr-article-body .wp-block-pullquote p {
  font-family: var(--wr-font-serif);
  font-size:   1.25rem;
  font-style:  italic;
  color:       var(--wr-forest);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────
   JOURNAL CARD (archive / sidebar)
───────────────────────────────────────────── */
.wr-journal-card { cursor: pointer; }
.wr-journal-card:hover .wr-journal-card__title { color: var(--wr-gold); }
.wr-journal-card__img   { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 1rem; }
.wr-journal-card__cat   {
  font-size:      0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--wr-gold);
  margin-bottom:  0.375rem;
  display:        flex;
  align-items:    center;
  gap:            7px;
}
.wr-journal-card__cat::before {
  content:    '';
  display:    block;
  width:      12px;
  height:     1px;
  background: var(--wr-gold);
}
.wr-journal-card__title {
  font-family:  var(--wr-font-serif);
  font-size:    0.9375rem;
  color:        var(--wr-forest);
  line-height:  1.4;
  margin:       0 0 0.375rem;
  transition:   color 0.2s;
}
.wr-journal-card__meta { font-size: 0.5625rem; color: rgba(26,31,28,0.3); }

/* ─────────────────────────────────────────────
   PHILOSOPHY / DARK SECTION
───────────────────────────────────────────── */
.wr-philosophy {
  background:            var(--wr-forest);
  padding:               4.5rem 3.25rem;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   5rem;
  align-items:           center;
}
.wr-philosophy__quote {
  font-family: var(--wr-font-serif);
  font-size:   1.375rem;
  font-style:  italic;
  color:       #DCCDB6;
  line-height: 1.6;
}
.wr-philosophy__body p { color: rgba(220,205,182,0.45); font-size: 0.75rem; }

/* ─────────────────────────────────────────────
   NEWSLETTER BAND
───────────────────────────────────────────── */
.wr-newsletter {
  padding:    3.25rem;
  text-align: center;
  border-top: 0.5px solid var(--wr-border);
}
.wr-newsletter__form {
  display:    flex;
  max-width:  360px;
  margin:     0 auto;
}
.wr-newsletter__input {
  flex:        1;
  padding:     12px 16px;
  font-size:   0.6875rem;
  background:  transparent;
  border:      0.5px solid var(--wr-border-mid);
  color:       var(--wr-forest);
  font-family: var(--wr-font-sans);
  outline:     none;
}
.wr-newsletter__input::placeholder { color: rgba(26,31,28,0.3); }
.wr-newsletter__btn {
  padding:        12px 20px;
  font-size:      0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background:     var(--wr-forest);
  color:          var(--wr-ivory);
  border:         none;
  cursor:         pointer;
  font-family:    var(--wr-font-sans);
}

/* ─────────────────────────────────────────────
   CAROUSEL (destination / camp carousels)
───────────────────────────────────────────── */
.wr-carousel-wrap { overflow: hidden; padding: 0 3.25rem; }
.wr-carousel-track { display: flex; gap: 1rem; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.wr-carousel-slide { flex: 0 0 calc(33.333% - 0.667rem); }
.wr-carousel-dots  { display: flex; gap: 6px; padding: 1.5rem 3.25rem 0; }
.wr-carousel-dot {
  width:      20px;
  height:     1.5px;
  background: rgba(26,31,28,0.15);
  cursor:     pointer;
  transition: background 0.3s;
  border:     none;
  padding:    0;
}
.wr-carousel-dot.active { background: var(--wr-gold); }

/* ─────────────────────────────────────────────
   CONTACT FORM OVERRIDES
───────────────────────────────────────────── */
.wr-form input[type="text"],
.wr-form input[type="email"],
.wr-form select,
.wr-form textarea {
  width:       100%;
  padding:     12px 14px;
  font-size:   0.75rem;
  background:  transparent;
  border:      0.5px solid var(--wr-border-mid);
  color:       var(--wr-forest);
  font-family: var(--wr-font-sans);
  outline:     none;
  transition:  border-color 0.2s;
  margin-bottom: 1rem;
}
.wr-form input:focus,
.wr-form select:focus,
.wr-form textarea:focus { border-color: var(--wr-gold); }
.wr-form select { background: var(--wr-ivory); appearance: none; }
.wr-form textarea { resize: vertical; min-height: 120px; line-height: 1.7; }

/* ─────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────── */
.wr-breadcrumb {
  padding:       14px 3.25rem;
  display:       flex;
  align-items:   center;
  gap:           8px;
  border-bottom: 0.5px solid var(--wr-border);
  font-size:     0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wr-breadcrumb a  { color: var(--wr-sage); }
.wr-breadcrumb span.sep { color: rgba(26,31,28,0.2); }
.wr-breadcrumb span.current { color: var(--wr-gold); }

/* ─────────────────────────────────────────────
   CAMP SIDEBAR INFO TABLE
───────────────────────────────────────────── */
.wr-info-table { width: 100%; }
.wr-info-table td {
  padding:       10px 0;
  border-bottom: 0.5px solid rgba(26,31,28,0.06);
  vertical-align: top;
  font-size:     0.625rem;
}
.wr-info-table td:last-child { border-bottom: none; }
.wr-info-table .wr-info-table__key { color: var(--wr-sage); }
.wr-info-table .wr-info-table__val { font-family: var(--wr-font-serif); font-size: 0.75rem; color: var(--wr-forest); text-align: right; }

/* ─────────────────────────────────────────────
   AMENITY GRID (camp sidebar)
───────────────────────────────────────────── */
.wr-amenity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wr-amenity-item { display: flex; align-items: center; gap: 8px; font-size: 0.625rem; color: var(--wr-sage); }

/* ─────────────────────────────────────────────
   NEED-TO-KNOW CARDS
───────────────────────────────────────────── */
.wr-ntk-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.wr-ntk-card  { background: var(--wr-ivory); padding: 1.5rem; border-bottom: 2px solid var(--wr-gold); }
.wr-ntk-title { font-family: var(--wr-font-serif); font-size: 0.9375rem; color: var(--wr-forest); margin: 0.75rem 0 0.5rem; }
.wr-ntk-body  { font-size: 0.6875rem; color: var(--wr-sage); line-height: 1.75; margin: 0; }

/* ─────────────────────────────────────────────
   REGION BAR (destinations index)
───────────────────────────────────────────── */
.wr-region-bar { display: grid; grid-template-columns: repeat(5,1fr); border-top: 0.5px solid var(--wr-border); }
.wr-region-item {
  padding:      28px 20px;
  border-right: 0.5px solid var(--wr-border);
  cursor:       pointer;
}
.wr-region-item:last-child { border-right: none; }
.wr-region-item:hover .wr-region-item__name { color: var(--wr-forest); }
.wr-region-item__num  { font-family: var(--wr-font-serif); font-size: 0.6875rem; color: var(--wr-gold); margin-bottom: 8px; letter-spacing: 0.1em; }
.wr-region-item__name { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-sage); transition: color 0.2s; margin-bottom: 3px; }
.wr-region-item__sub  { font-size: 0.625rem; color: var(--wr-gold); }

/* ─────────────────────────────────────────────
   404 PAGE
───────────────────────────────────────────── */
.wr-404 { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.wr-404__left  { background: var(--wr-forest); padding: 4.5rem 4rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.wr-404__num   { font-family: var(--wr-font-serif); font-size: 12.5rem; font-weight: 400; color: rgba(244,241,236,0.04); line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); letter-spacing: -8px; pointer-events: none; white-space: nowrap; }
.wr-404__right { background: var(--wr-sand); padding: 3.5rem 3.25rem; display: flex; flex-direction: column; justify-content: center; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .wr-two-col,
  .wr-philosophy,
  .wr-404 { grid-template-columns: 1fr; }
  .wr-two-col__left { border-right: none; border-bottom: 0.5px solid var(--wr-border); }
  .wr-carousel-slide { flex: 0 0 calc(100% - 1rem); }
  .wr-meta-bar,
  .wr-facts-bar { grid-template-columns: 1fr 1fr; }
  .wr-ntk-grid  { grid-template-columns: 1fr; }
  .wr-region-bar{ grid-template-columns: 1fr 1fr; }
  .wr-404__num  { font-size: 7rem; }
	
	/* ── CARD GRID FIX for Query Loop output ── */
.wr-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.wr-card .wp-block-post-featured-image {
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.wr-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wr-card__below {
  padding: 18px 0;
  border-bottom: 0.5px solid rgba(26,31,28,0.10);
}
/* Destination/journal cards: text sits BELOW image, not overlaid */
.wr-card__region,
.wr-card__type {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B08A5B;
  margin: 10px 0 4px;
}
.wr-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #1A1F1C;
  line-height: 1.3;
  margin: 0 0 8px;
}
.wr-card__desc {
  font-size: 12px;
  color: #6B7266;
  line-height: 1.7;
  margin: 0 0 10px;
}

/* The 3-column grids need even spacing + alignment */
.wp-block-post-template.is-layout-grid {
  gap: 24px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Journal cards */
.wr-journal-card .wp-block-post-featured-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 14px;
}
.wr-journal-card .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover;
}
}