/*
Theme Name: Four Meadows
Theme URI: https://fourmeadows.com/
Author: Xongolab
Author URI: https://www.xongolab.com/
Description: Dynamic Four Meadows hotel blog theme based on the supplied Journal listing and article design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fourmeadows
*/

/* ==========================================================================
   Four Meadows — Blog stylesheet
   Drop this in alongside blog-listing.html and blog-detail.html, or merge
   the variables/rules into your existing site stylesheet.
   Colors and fonts below are the confirmed tokens from fourmeadows.com:
   Sora (display) + Manrope (body), gold/forest/ivory palette.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  /* --- exact tokens from fourmeadows.com --- */
  --gold:         #c9a961;
  --forest:       #2d4a3e;
  --forest-deep:  #1a2f26;
  --ivory:        #f5f1e8;
  --background:   #ffffff;
  --foreground:   #1a1a1a;
  --accent:       #c9a961;
  --font-display: 'Sora', sans-serif;
  --font-body:    'Manrope', sans-serif;

  /* --- aliases used throughout this stylesheet (mapped to the tokens above) --- */
  --cream:        var(--ivory);
  --cream-2:      var(--background);
  --ink:          var(--foreground);
  --ink-soft:     #5C594F;
  --meadow:       var(--forest);
  --meadow-dark:  var(--forest-deep);
  --meadow-tint:  #E7ECE0;
  --line:         #E2DDCE;

  --container: 1180px;
  --measure: 700px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--meadow); outline-offset:3px; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Header (dark capsule nav, matches fourmeadows.com exactly) ---------- */
.site-header{
  background:linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  padding:20px 24px;
  position:sticky; top:0; z-index:50;
}
.nav-pill{
  width:fit-content;
  margin:0 auto;
  background:var(--forest-deep);
  border:1.5px solid var(--gold);
  border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(201,169,97,.08) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 40px;
}
.brand-mark{ flex-shrink:0; }
.brand-mark img{ height:36px; width:auto; filter:brightness(0) invert(1); opacity:.95; }

@media (max-width: 860px){
  .nav-pill{ padding:12px 28px; }
  .brand-mark img{ height:30px; }
}

/* ---------- Breadcrumb / page intro ---------- */
.page-intro{
  padding:56px 0 40px;
  border-bottom:1px solid var(--line);
}
.eyebrow-plain{
  font-size:14px;
  color:var(--ink-soft);
}
.eyebrow-plain a:hover{ color:var(--meadow-dark); }
.page-intro h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(32px, 4.4vw, 48px);
  margin:14px 0 10px;
  color:var(--ink);
}
.page-intro p{
  color:var(--ink-soft);
  font-size:17px;
  max-width:560px;
  margin:0;
}

/* ---------- Blog listing ---------- */
.post-list{
  padding:48px 0 80px;
  display:flex;
  flex-direction:column;
  gap:44px;
}
.post-card{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:32px;
  align-items:center;
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.post-card:last-child{ border-bottom:none; padding-bottom:0; }
.post-card__media{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:4/3;
}
.post-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.post-card:hover .post-card__media img{ transform:scale(1.045); }
.post-card__date{
  position:absolute; top:14px; left:14px;
  background:var(--cream-2);
  color:var(--ink);
  padding:8px 12px;
  border-radius:3px;
  text-align:center;
  line-height:1.15;
}
.post-card__date .d{ display:block; font-family:var(--font-display); font-size:19px; font-weight:600; }
.post-card__date .m{ display:block; font-size:11.5px; color:var(--ink-soft); letter-spacing:.03em; }

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.f-tag{
  font-size:12.5px;
  color:var(--meadow-dark);
  background:var(--meadow-tint);
  padding:5px 12px;
  border-radius:20px;
}
.post-card__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:25px;
  line-height:1.28;
  margin:0 0 12px;
}
.post-card__title a{ transition:color .15s ease; }
.post-card__title a:hover{ color:var(--meadow-dark); }
.post-card__excerpt{
  color:var(--ink-soft);
  font-size:15.5px;
  margin:0 0 16px;
  max-width:56ch;
}
.read-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14.5px;
  font-weight:500;
  color:var(--meadow-dark);
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
}
.read-more:hover{ color:var(--gold); }

.load-more-wrap{ text-align:center; margin-top:8px; }
.btn-outline{
  display:inline-block;
  border:1px solid var(--meadow);
  color:var(--meadow-dark);
  font-size:14.5px;
  font-weight:500;
  padding:13px 34px;
  border-radius:3px;
  transition:background .15s ease, color .15s ease;
  cursor: pointer;
}
.btn-outline:hover{ background:var(--meadow); color:#fff; }

@media (max-width: 720px){
  .post-card{ grid-template-columns:1fr; }
}

/* ---------- Blog detail ---------- */
.post-hero{ padding:44px 0 0; }
.post-hero__meta{
  display:flex; align-items:center; gap:14px;
  color:var(--ink-soft); font-size:14px; margin-bottom:18px;
}
.post-hero__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-soft); }
.post-hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px, 4.6vw, 46px);
  line-height:1.18;
  max-width:820px;
  margin:0 0 22px;
}
.post-hero__figure{
  border-radius:6px;
  overflow:hidden;
  margin-bottom:8px;
}
.post-hero__figure img{ width:100%; max-height:520px; object-fit:cover; }

.post-body-wrap{ padding:44px 0 80px; }
.post-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  align-items:start;
  gap:56px;
}
.post-body{
  max-width:var(--measure);
  font-size:17px;
  color:var(--ink);
}
.post-sidebar{
  position:sticky;
  top:24px;
}

@media (max-width: 980px){
  .post-layout{ grid-template-columns:1fr; gap:40px; }
  .post-body{ max-width:none; }
  .post-sidebar{ position:static; }
}
.post-body p{ margin:0 0 20px; }
.post-body h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:28px;
  color:var(--ink);
  margin:44px 0 16px;
}
.post-body h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:21px;
  color:var(--ink);
  margin:30px 0 12px;
}
.post-body ul{ margin:0 0 20px; padding-left:22px; }
.post-body li{ margin-bottom:8px; }
.post-body strong{ color:var(--ink); font-weight:600; }
.pull-note{
  background:var(--meadow-tint);
  border-left:3px solid var(--meadow);
  padding:18px 22px;
  border-radius:3px;
  margin:28px 0;
  font-size:15.5px;
  color:var(--meadow-dark);
}
.post-body blockquote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  line-height:1.5;
  color:var(--ink);
  border-left:3px solid var(--gold);
  margin:34px 0;
  padding:4px 0 4px 24px;
}

.share-row{
  max-width:var(--measure); margin:36px auto 0;
  display:flex; align-items:center; gap:16px;
  padding-top:24px; border-top:1px solid var(--line);
}
.share-row span{ font-size:14px; color:var(--ink-soft); }
.share-row a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.share-row a:hover{ background:var(--meadow); border-color:var(--meadow); color:#fff; }

.post-nav{
  max-width:var(--container); margin:56px auto 0; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.post-nav__item{
  display:flex;
  flex-direction:column;
  gap:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--cream-2);
  padding:20px 22px;
  box-shadow:0 2px 8px rgba(38,36,32,.05);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.post-nav__item:hover{
  border-color:var(--gold);
  box-shadow:0 4px 14px rgba(38,36,32,.09);
}
.post-nav__label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.post-nav .next .post-nav__label{ justify-content:flex-end; }
.post-nav__content{
  display:flex;
  align-items:center;
  gap:16px;
}
.post-nav .next .post-nav__content{ justify-content:flex-end; }
.post-nav__content img{
  width:64px; height:64px;
  border-radius:8px;
  object-fit:cover;
  flex-shrink:0;
}
.post-nav__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
}
.post-nav .next .post-nav__title{ text-align:right; }

@media (max-width: 640px){
  .post-nav{ grid-template-columns:1fr; }
  .post-nav .next .post-nav__label,
  .post-nav .next .post-nav__content{ justify-content:flex-start; }
  .post-nav .next .post-nav__title{ text-align:left; }
}

/* ---------- Footer (copyright only, same bg as header) ---------- */
.site-footer{
  background:linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  padding:28px 0;
  margin-top:80px;
}
.footer-copy{
  margin:0;
  text-align:center;
  font-size:14px;
  color:#D9D6C9;
}

/* WordPress compatibility / precedence helpers */
body.fourmeadows-blog-listing,
body.fourmeadows-blog-detail{
  background:var(--cream) !important;
  color:var(--ink) !important;
}
body.fourmeadows-blog-listing .site,
body.fourmeadows-blog-detail .site{
  background:transparent;
}
.brand-mark .custom-logo-link{display:block;}
.brand-mark .custom-logo{height:36px;width:auto;max-width:260px;filter:brightness(0) invert(1);opacity:.95;}
.post-card__media img.wp-post-image{width:100%;height:100%;object-fit:cover;}
.post-hero__figure img.wp-post-image{width:100%;max-height:520px;object-fit:cover;}
.post-body img{height:auto;}
.post-body .wp-block-image{margin:28px 0;}
.post-body .wp-block-quote{margin-left:0;margin-right:0;}
.post-body a{color:var(--meadow-dark);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;}
.post-body a:hover{color:var(--gold);}
.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

/* ---------- Sidebar: Book your stay enquiry form ---------- */
.booking-card{
  background:linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  border:1.5px solid var(--gold);
  border-radius:12px;
  padding:28px 24px;
  box-shadow:0 16px 40px rgba(26,47,38,.18);
}
.booking-card__eyebrow{
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 6px;
}
.booking-card__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:24px;
  color:#fff;
  margin:0 0 20px;
}
.booking-card__notice{
  font-size:13.5px;
  line-height:1.5;
  padding:12px 14px;
  border-radius:6px;
  margin:0 0 18px;
}
.booking-card__notice--success{
  background:rgba(201,169,97,.16);
  border:1px solid var(--gold);
  color:#f5f1e8;
}
.booking-card__notice--error{
  background:rgba(201,80,80,.14);
  border:1px solid #c95050;
  color:#f9dede;
}

.booking-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.booking-form__group-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 10px;
}

.booking-form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}

.booking-form__field{ display:flex; flex-direction:column; }
.booking-form__field--full{ margin-bottom:14px; }

.booking-form__field label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(245,241,232,.65);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:5px;
}

.booking-form input[type="date"],
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form select,
.booking-form textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,169,97,.45);
  border-radius:6px;
  padding:11px 12px;
  font-family:var(--font-body);
  font-size:14px;
  color:#f5f1e8;
  transition:border-color .15s ease, background .15s ease;
}
.booking-form select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a961' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.booking-form select option{ background:var(--forest-deep); color:#f5f1e8; }
.booking-form textarea{ resize:vertical; min-height:78px; font-family:var(--font-body); }

.booking-form input::placeholder,
.booking-form textarea::placeholder{ color:rgba(245,241,232,.45); }

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.07);
}

/* Normalize the native date-picker icon so it sits in the gold palette */
.booking-form input[type="date"]{ color-scheme:dark; }
.booking-form input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(70%) sepia(28%) saturate(482%) hue-rotate(358deg) brightness(94%) contrast(90%);
  cursor:pointer;
}

.booking-form__submit{
  width:100%;
  background:var(--gold);
  color:var(--forest-deep);
  border:none;
  border-radius:6px;
  padding:14px 16px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:4px;
  transition:background .15s ease, transform .15s ease;
}
.booking-form__submit:hover{ background:#dabb75; transform:translateY(-1px); }

.booking-form__note{
  font-size:12px;
  text-align:center;
  color:rgba(245,241,232,.55);
  margin:12px 0 0;
}

@media (max-width: 480px){
  .booking-form__row{ grid-template-columns:1fr; }
}