/* ============================================
   Cascade Travel Co. — Blog Post Stylesheet
   Extends the design tokens from /styles.css
   ============================================ */

:root{--navy:#0a2342;--blue:#1a6fa8;--sky:#e8f4fd;--gold:#c9a84c;--white:#fff;--gray:#f5f7fa;--text:#2c3e50;--light:#6b7c93;}

*{box-sizing:border-box;}
body{font-family:'Georgia',serif;color:var(--text);background:var(--white);margin:0;}
a{text-decoration:none;color:inherit;}

/* ---------- Blog nav (simplified) ---------- */
.blog-nav{position:sticky;top:0;z-index:100;background:rgba(10,35,66,.97);backdrop-filter:blur(8px);padding:0 2.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;}
.blog-nav .logo-img{height:42px;width:auto;filter:brightness(0) saturate(100%) invert(75%) sepia(40%) saturate(400%) hue-rotate(5deg) brightness(95%);}
.blog-nav-links{display:flex;gap:1.5rem;align-items:center;font-family:'Arial',sans-serif;font-size:.8rem;}
.blog-nav-links a{color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.5px;transition:color .2s;}
.blog-nav-links a:hover{color:#fff;}
.blog-nav-cta{background:#fff;color:var(--navy)!important;padding:.45rem 1.2rem;border-radius:25px;font-weight:700;}
.blog-nav-cta:hover{background:#a8d8f0!important;}

/* ---------- Hero ---------- */
.blog-hero{position:relative;height:46vh;min-height:340px;display:flex;align-items:flex-end;padding:0 2.5rem 2.75rem;}
.blog-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#0a2342;}
.blog-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,20,45,.88) 0%,rgba(5,20,45,.35) 60%,transparent 100%);}
.blog-hero-content{position:relative;z-index:2;max-width:900px;width:100%;margin:0 auto;}
.blog-hero-tag{font-family:'Arial',sans-serif;font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:#a8d8f0;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem;}
.blog-hero-tag::before{content:'';display:inline-block;width:24px;height:1.5px;background:var(--gold);}
.blog-hero h1{font-size:clamp(1.7rem,4vw,2.6rem);color:#fff;font-weight:700;line-height:1.2;letter-spacing:-.5px;max-width:820px;}
.blog-meta{font-family:'Arial',sans-serif;font-size:.82rem;color:rgba(255,255,255,.7);margin-top:.9rem;}

/* ---------- Layout ---------- */
.blog-wrap{max-width:1100px;margin:0 auto;padding:3.5rem 2rem 4rem;display:grid;grid-template-columns:250px 1fr;gap:3.5rem;align-items:start;}
.blog-sidebar{position:sticky;top:90px;}
.toc-box{background:var(--gray);border-radius:14px;padding:1.5rem 1.5rem;margin-bottom:1.5rem;}
.toc-label{font-family:'Arial',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--blue);margin-bottom:.9rem;}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.toc-list a{font-family:'Arial',sans-serif;font-size:.85rem;color:var(--text);line-height:1.4;display:block;padding-left:.8rem;border-left:2px solid #dce6f0;transition:border-color .2s,color .2s;}
.toc-list a:hover{border-color:var(--gold);color:var(--blue);}

.pin-save-box{background:var(--navy);border-radius:14px;padding:1.5rem;text-align:center;}
.pin-save-box p{font-family:'Arial',sans-serif;font-size:.82rem;color:rgba(255,255,255,.75);margin:0 0 .9rem;line-height:1.6;}
.pin-save-btn{display:inline-flex;align-items:center;gap:.5rem;background:#e60023;color:#fff;font-family:'Arial',sans-serif;font-weight:700;font-size:.85rem;padding:.65rem 1.3rem;border-radius:24px;cursor:pointer;border:none;}
.pin-save-btn:hover{background:#ad081b;}

/* Hidden tall pin image for Pinterest to pick up on save; not shown to visitors */
.hidden-pin-image{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ---------- Article body ---------- */
.blog-article{min-width:0;}
.blog-article h2{font-size:1.5rem;color:var(--navy);margin:2.5rem 0 1rem;line-height:1.3;scroll-margin-top:90px;}
.blog-article h2:first-child{margin-top:0;}
.blog-article p{font-family:'Arial',sans-serif;font-size:1.02rem;line-height:1.85;color:var(--text);margin-bottom:1.25rem;}
.blog-article ul,.blog-article ol{font-family:'Arial',sans-serif;font-size:1.02rem;line-height:1.85;color:var(--text);margin:0 0 1.25rem 1.25rem;}
.blog-article li{margin-bottom:.4rem;}
.blog-article strong{color:var(--navy);}
.blog-intro{font-family:'Arial',sans-serif;font-size:1.1rem;line-height:1.85;color:var(--light);margin-bottom:1.75rem;}

.pull-cta{background:var(--sky);border-left:4px solid var(--gold);border-radius:12px;padding:1.5rem 1.75rem;margin:2rem 0;}
.pull-cta p{font-family:'Arial',sans-serif;font-size:.98rem;color:var(--text);margin:0;line-height:1.75;}
.pull-cta a{color:var(--blue);font-weight:700;}

/* ---------- Author box ---------- */
.author-box{display:flex;align-items:center;gap:1.25rem;background:var(--gray);border-radius:16px;padding:1.75rem;margin:3rem 0 2.5rem;}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;}
.author-box h4{font-size:1rem;color:var(--navy);margin:0 0 .3rem;}
.author-box p{font-family:'Arial',sans-serif;font-size:.85rem;color:var(--light);margin:0;line-height:1.6;}

/* ---------- Related posts ---------- */
.related-heading{font-family:'Arial',sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--blue);margin:0 0 1.25rem;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1rem;}
.related-card{border-radius:14px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s;}
.related-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.12);}
.related-card img{width:100%;height:130px;object-fit:cover;display:block;}
.related-card-body{padding:1rem 1.1rem;background:#fff;}
.related-card-body h5{font-size:.92rem;color:var(--navy);margin:0;line-height:1.4;}

/* ---------- CTA banner ---------- */
.blog-cta-banner{background:linear-gradient(135deg,#0a2342,#1a3a6b);border-radius:20px;padding:2.75rem 2.5rem;text-align:center;margin:2.5rem 0;}
.blog-cta-banner .section-tag{color:#a8d8f0;font-family:'Arial',sans-serif;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:.6rem;}
.blog-cta-banner h3{color:#fff;font-size:1.5rem;margin-bottom:.75rem;}
.blog-cta-banner p{font-family:'Arial',sans-serif;color:rgba(255,255,255,.75);font-size:.95rem;max-width:480px;margin:0 auto 1.5rem;line-height:1.7;}
.blog-cta-banner a.btn{display:inline-block;background:#fff;color:var(--navy);padding:.8rem 2rem;border-radius:30px;font-family:'Arial',sans-serif;font-weight:700;font-size:.92rem;}
.blog-cta-banner a.btn:hover{background:#a8d8f0;}

/* ---------- Footer ---------- */
.blog-footer{background:var(--navy);color:rgba(255,255,255,.75);padding:3rem 2rem 1.5rem;margin-top:2rem;}
.blog-footer-inner{max-width:1100px;margin:auto;text-align:center;}
.blog-footer-inner img{height:52px;width:auto;margin-bottom:1rem;filter:brightness(0) saturate(100%) invert(75%) sepia(40%) saturate(400%) hue-rotate(5deg) brightness(95%);}
.blog-footer-inner p{font-family:'Arial',sans-serif;font-size:.82rem;opacity:.6;}
.blog-footer-links{display:flex;gap:1.5rem;justify-content:center;margin:1rem 0;font-family:'Arial',sans-serif;font-size:.85rem;}
.blog-footer-links a:hover{opacity:.8;}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .blog-wrap{grid-template-columns:1fr;}
  .blog-sidebar{position:static;order:2;}
  .related-grid{grid-template-columns:1fr;}
  .blog-nav-links{display:none;}
  .blog-hero{padding:0 1.5rem 2rem;}
}