/* ===================================================================
   A Little Local Flavor — "Resort" theme
   Drop-in external stylesheet. Add to any migrated blog post with:
     <link rel="stylesheet" href="/css/resort.css">
   It layers over the post's existing styles and restyles the shared
   components. No markup changes required; nothing in the content,
   links, titles, or SEO is altered.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap');

:root{
  --maroon:#660000; --red:#B80C1B; --gold:#f0e020; --gold-light:#f7f06a;
  --buttercream:#F7EFDA; --charcoal:#1D2429; --pavement:#384042; --caramel:#EECA9E;
  --linen:#FAF4E5; --hairline:#e3d9c2;
}

body{ font-family:'Cormorant Garamond', serif !important; background:var(--linen); }

/* ---------- article typography ---------- */
.article-body{ max-width:760px; }
.article-body p, .article-body li, .article-body blockquote p{ font-family:'Cormorant Garamond', serif !important; font-size:22px; line-height:1.62; letter-spacing:0.003em; color:var(--pavement); font-weight:500; }
.article-body p{ margin-bottom:26px; }
.article-body li{ margin-bottom:10px; }
.article-body strong{ font-weight:700; }
/* inline bold labels in heavy sans so they pop for skimming (links + names stay serif) */
.article-body p > strong, .article-body li > strong{ font-family:'Source Sans 3', sans-serif; font-weight:800; color:var(--charcoal); letter-spacing:-0.005em; }
/* drop cap on the opening paragraph */
.article-body > p:first-of-type::first-letter{ font-family:'Cormorant Garamond', serif; font-weight:500; float:left; font-size:80px; line-height:0.7; padding:10px 14px 0 0; color:var(--maroon); }
.article-body h2{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(30px,4.2vw,48px); line-height:1.08; color:var(--maroon); letter-spacing:0; margin:58px 0 14px; clear:both; }
.article-body h2::after{ content:''; display:block; width:46px; height:1px; background:var(--gold); margin-top:18px; }
.article-body h3{ font-family:'Cormorant Garamond', serif; font-weight:700; font-size:30px; line-height:1.16; color:var(--charcoal); margin:54px 0 12px; border-top:1px solid var(--hairline); padding-top:40px; clear:both; }
.article-body h2 + h3{ border-top:none; padding-top:0; margin-top:30px; }
.article-body h4{ font-family:'Source Sans 3', sans-serif; font-weight:700; color:var(--charcoal); }
.article-body a{ color:var(--maroon); font-weight:700; text-decoration:none; border-bottom:1px solid var(--hairline); }
.article-body a:hover{ color:var(--red); border-color:var(--red); }
.article-body a strong{ color:var(--maroon); font-weight:700; }

/* ---------- nav (refined, charcoal kept) ---------- */
.nav{ background:var(--charcoal); }
.nav-links a{ font-family:'Source Sans 3', sans-serif; letter-spacing:0.14em; }
.nav-cta{ background:var(--gold) !important; color:var(--charcoal) !important; }
.nav-cta:hover{ background:var(--gold-light) !important; }

/* ---------- hero (restyle the existing .article-header) ---------- */
.article-header{ padding:128px 24px 88px; }
.article-header h1{ font-family:'Cormorant Garamond', serif !important; font-weight:300; font-size:clamp(40px,6vw,78px); line-height:1.05; letter-spacing:0.005em; }
.article-header .breadcrumb{ font-family:'Source Sans 3', sans-serif; letter-spacing:0.2em; }
.article-header .meta{ font-family:'Source Sans 3', sans-serif; letter-spacing:0.06em; }

/* ---------- read-next recommendation bands ---------- */
.read-next{ border-left:3px solid var(--maroon); background:rgba(102,0,0,0.05); padding:20px 26px; margin:34px 0; border-radius:0 4px 4px 0; clear:both; }
.read-next .read-next-eyebrow{ font-family:'Source Sans 3', sans-serif; color:var(--maroon); opacity:0.55; }
.article-body .read-next a{ font-family:'Cormorant Garamond', serif !important; font-weight:700; font-size:23px; line-height:1.28; color:var(--maroon) !important; border-bottom:none; }
.read-next .read-next-line{ font-family:'Cormorant Garamond', serif; font-size:23px; font-weight:700; line-height:1.28; color:var(--maroon); }
.read-next .read-next-line a{ color:var(--maroon) !important; border-bottom:none; }

/* ---------- experience banners ---------- */
.exp-banner, .exp-banner-multi{ background:#ffffff; border:1px solid var(--hairline); border-top:3px solid var(--maroon); box-shadow:none; }
.exp-banner .exp-banner-eyebrow, .exp-banner-multi .exp-banner-eyebrow{ color:var(--maroon); letter-spacing:0.26em; }
.exp-banner .exp-banner-headline, .exp-banner-multi .exp-banner-headline{ font-family:'Cormorant Garamond', serif; font-weight:700; font-size:26px; color:var(--charcoal); }
.exp-banner .exp-banner-desc, .exp-banner-multi .exp-banner-desc{ color:var(--pavement); }
.exp-banner .exp-banner-cta, .exp-banner-multi .exp-banner-cta{ background:var(--maroon); border:1px solid var(--maroon); color:var(--buttercream) !important; }
.exp-banner .exp-banner-cta:hover, .exp-banner-multi .exp-banner-cta:hover{ background:var(--red); border-color:var(--red); }

/* ---------- affiliate / guide cards (hotels + recommendations) ----------
   forced (!important) so the Resort look reliably wins over the post's own card CSS */
.guide-card, .cards-grid .guide-card{ background:#FCFAF2 !important; border:1px solid var(--hairline) !important; border-radius:6px !important; box-shadow:0 1px 4px rgba(0,0,0,0.05) !important; }
.guide-card .card-img, .cards-grid .card-img{ border-radius:0 !important; height:180px !important; }
.guide-card .guide-card-body, .cards-grid .guide-card-body{ padding:18px 20px 20px !important; }
.article-body .guide-card .guide-card-tag, .article-body .cards-grid .guide-card-tag{ font-family:'Source Sans 3', sans-serif !important; color:var(--maroon) !important; letter-spacing:0.22em !important; font-weight:700 !important; font-size:11px !important; }
.article-body .guide-card .guide-card-title, .article-body .cards-grid .guide-card-title{ font-family:'Cormorant Garamond', serif !important; font-weight:700 !important; font-size:22px !important; color:var(--charcoal) !important; line-height:1.14 !important; margin-bottom:8px !important; }
.article-body .guide-card .guide-card-desc, .article-body .cards-grid .guide-card-desc{ font-family:'Source Sans 3', sans-serif !important; color:var(--pavement) !important; font-size:14px !important; line-height:1.6 !important; }
.article-body .guide-card .card-btn, .article-body .cards-grid .hotel-btn-primary{ background:var(--red) !important; color:var(--buttercream) !important; border-radius:4px !important; font-family:'Source Sans 3', sans-serif !important; letter-spacing:0.12em !important; }
.article-body .guide-card .card-btn:hover, .article-body .cards-grid .hotel-btn-primary:hover{ background:var(--maroon) !important; }
.article-body .cards-grid .hotel-btn-booking{ background-color:#003580 !important; color:#fff !important; border-radius:999px !important; }
.article-body .cards-grid .hotel-btn-expedia{ background-color:#f0e020 !important; color:#1a1100 !important; border-radius:999px !important; }
.guide-card.guide-card-featured{ background:var(--maroon) !important; border:2px solid var(--gold) !important; }
.article-body .guide-card.guide-card-featured .guide-card-title{ color:var(--buttercream) !important; }
.article-body .guide-card.guide-card-featured .guide-card-desc{ color:rgba(247,239,218,0.85) !important; }
.article-body .guide-card.guide-card-featured .card-btn-gold{ background:var(--gold) !important; color:var(--maroon) !important; }

/* ---------- inline figures ---------- */
.article-body figure.image-inline img{ border-radius:0 !important; }

/* ---------- bottom CTA ---------- */
.article-cta{ background:var(--charcoal); border-radius:0; }
.article-cta h2, .article-cta h3{ font-family:'Cormorant Garamond', serif; }
.article-cta a{ background:var(--gold); color:var(--maroon) !important; border-radius:2px; }
.article-cta a:hover{ background:var(--gold-light); color:var(--maroon) !important; }

/* ---------- footer ---------- */
.footer h5{ font-family:'Cormorant Garamond', serif; }

/* ---------- optional resort components (used by transformed posts; harmless if absent) ---------- */
.pullquote{ float:right; width:42%; max-width:330px; margin:6px 0 20px 38px; padding:6px 0 6px 22px; border-left:3px solid var(--gold); }
.pullquote.pq-left{ float:left; margin:6px 38px 20px 0; padding:6px 22px 6px 0; border-left:none; border-right:3px solid var(--gold); }
.pullquote p{ font-family:'Cormorant Garamond', serif !important; font-style:italic; font-weight:500; font-size:24px !important; line-height:1.32 !important; color:var(--maroon) !important; margin:0 !important; }

@media (max-width:820px){
  .article-header{ padding:92px 20px 52px; }
}

/* ---------- motion (subtle) ---------- */
.guide-card, .cards-grid .guide-card{ transition:transform .35s ease, box-shadow .35s ease; }
.nav-cta, .article-cta a, .exp-banner .exp-banner-cta, .exp-banner-multi .exp-banner-cta,
.cards-grid .hotel-btn-primary, .guide-card .card-btn{ transition:background .25s ease, transform .2s ease, opacity .2s ease; }
.nav-cta:hover, .article-cta a:hover{ transform:translateY(-2px); }
.exp-banner .exp-banner-cta:hover, .cards-grid .hotel-btn-primary:hover, .guide-card .card-btn:hover{ transform:translateY(-1px); }

/* gentle "fade up on scroll" reveal — resort.js adds .r-reveal to below-the-fold
   elements only (so nothing above the fold flashes), and .r-in when they enter view.
   If JS is off or reduced-motion is on, everything just shows normally. */
.r-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.r-reveal.r-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .r-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}