/****************************
  BLOG.CSS  (load after /style.css)
****************************/

/* --- Vars (fallbacks only; your site vars still win) --- */
:root{
  --primary: var(--primary, #ff9bb3);
  --secondary: var(--secondary, #d8a7b1);
  --light: var(--light, #fff5f7);
  --dark: var(--dark, #8a4f5e);
  --text: var(--text, #4a4a4a);
  --accent: var(--accent, #f8e1e7);
  --max: 880px;
}

/* --- Page/base fixes (kill dark void) --- */
html, body { background:#fff !important; }
body { color: var(--text); padding-bottom:0 !important; }

/* --- Layout for the blog article --- */
.container.article{
  max-width: var(--max);
  margin-inline: auto;
  background:#fff;
}

/* --- Neutralise global “full-screen hidden sections” rules just in the article --- */
.container.article header,
.container.article section,
.container.article .cta{
  display:block !important;
  min-height:auto !important;
  padding:0 !important;
  margin:0 0 1.25rem !important;
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
  overflow:visible !important;
  text-align:left !important;
}
.container.article .hidden{display:block !important; opacity:1 !important;}

/* --- Typography --- */
.container.article h1,
.container.article h2,
.container.article h3{line-height:1.25; margin:0 0 .5em; color:#111;}
.container.article h1{font-size:clamp(28px,4.2vw,40px); letter-spacing:-.01em;}
.container.article h2{font-size:clamp(20px,3vw,26px); margin-top:1.4em;}
.container.article p,
.container.article ul,
.container.article ol{margin:0 0 1em; color:#333;}
.container.article ul,
.container.article ol{padding-left:1.2em;}
.container.article .article__dek{color:#555; margin:.25rem 0 1.2rem;}

/* --- Images --- */
.container.article img{display:block; max-width:100%; height:auto; border-radius:10px;}

/* --- Links & buttons (respect house style) --- */

.container.article a.btn{text-decoration:none;}

/* --- CTA box (light, no glow) --- */
.container.article .cta{
  margin-top:20px !important;
  padding:18px 20px !important;
  background:#fff !important;
  border:1px solid var(--accent) !important;
  text-align:center !important;
}
.container.article .cta .btn{ box-shadow:none !important; }


/* --- Contact section (light) --- */
.contact{
  background: var(--light);
  padding: 40px 24px;
  margin-top: 40px;
}
.contact .content{max-width: var(--max); margin: 0 auto;}
.contact h2{margin-top:0; color: var(--dark);}
.contact-info{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; justify-content:center;
}
.contact-link{
  padding:10px 14px; border-radius:10px; background:#fff; color:#333;
  border:1px solid var(--accent); display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
}
.contact-link:hover{text-decoration:underline;}


/* --- Misc utilities --- */
.spacer, .push, .page-spacer { display:none !important; }

/* Small screens paddings */
@media (max-width:640px){
  .container.article{ padding:100px 18px 24px; }
  .contact{ padding:28px 18px; }
}
/* ===== Useful Links Section ===== */
.work {
  background: var(--light); /* Soft background to match Blueberry theme */
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 4rem;
}

.work h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary); /* Blueberry pink */
  margin-bottom: 40px;
  position: relative;
}

.work h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary);
  margin: 12px auto 0;
  border-radius: 2px;
}

.work-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px; /* optional: to keep them from stretching too wide */
  margin: 0 auto;
}


.work-item {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.work-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.work-thumb {
  height: 180px;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.work-item h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 16px;
  color: var(--dark);
}

.work-item p {
  font-size: 0.95rem;
  margin: 0 16px 20px;
  color: var(--text);
  flex-grow: 1;
}

@media (max-width: 768px) {
  .work {
    padding: 40px 15px;
  }
  .work h2 {
    font-size: 1.7rem;
  }
  .work-thumb {
    height: 160px;
  }
}
/* Kill global reveal-on-scroll for the blog */
body, section, header, footer, .work, .cta {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* === FIX: header overlap on blog pages === */
:root { --header-h: 72px; } /* adjust if your header is taller */

.site-header { 
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

/* No global top padding needed with a sticky header */
body, main { padding-top: 0 !important; }

/* Remove the big top gap meant for a fixed header */
.container.article { 
  padding: 32px 24px 32px !important; 
}

/* Anchor jumps don't hide behind the header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
/* === FINAL: ensure content starts below the header === */
:root { --header-h: 72px; } /* temporary fallback; JS below will auto-measure */

#shared-header { display:block; }

/* Always reserve space equal to header height.
   If the header is sticky (in-flow), JS will zero this out. */
body { padding-top: var(--header-h) !important; }

/* Keep article padding tidy; no extra top padding needed here */
.container.article { padding: 32px 24px 32px !important; }

/* Anchor jumps land below the header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Force CTA links to be white text across all blog styles */
.container.article .cta a,
.container.article .cta .cta-inline {
  color: #fff !important;
  background: var(--primary, #ff9bb3); /* keep background consistent */
  text-decoration: none;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  display: inline-block;
  font-weight: 600;
}
/* === Standardise all CTA buttons across blog pages === */

/* In-article CTAs */
.container.article .cta a,
.container.article .cta .cta-inline {
  color: #fff !important;
  background: var(--primary, #8a4f5e);
  text-decoration: none;
  border-radius: 8px;
  padding: 0.75rem 1.2rem;
  display: inline-block;
  font-weight: 700;
  transition: background 0.2s ease;
}

.container.article .cta a:hover,
.container.article .cta .cta-inline:hover {
  background: #6f3e4a; /* slightly darker on hover */
}

/* === Unified in-article CTA button (both blogs) === */
.container.article .cta a,
.container.article .cta .cta-inline {
  background: var(--dark, #8a4f5e) !important; /* darker shade */
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 8px;
  padding: 0.75rem 1.2rem;
  display: inline-block;
  font-weight: 700;
}
/* Underline links in the "Jump to" sections */
.container.article .jump-nav a,
.container.article .toc a {
  text-decoration: underline !important;
}
/* Blog footer: match index footer */
.container.article footer {
  background: var(--dark, #8a4f5e);
  color: #fff;
  padding: 20px;
  border-radius: 12px;
}
.container.article footer a {
  color: #fff !important;
  text-decoration: none !important;
}
.container.article footer .footer-links span {
  color: rgba(255,255,255,0.65);
}
/* in style.css (global footer) */
footer, footer p, footer a {
  color: #fff !important;
}

/* Footer links: allow underline on hover, even on blog pages */
.container.article footer a:hover,
.container.article footer a:focus,
footer a:hover,
footer a:focus {
  text-decoration: underline !important;
}

/* Eyebrow label style */
.eyebrow{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  color: var(--dark, #8a4f5e);
  margin-bottom: .25rem;
}
/* Back-to-top link: force black (avoid purple visited colour) */
.container.article .back-top a:link,
.container.article .back-top a:visited {
  color: #1b1b1b !important;
}

/* Match Blog1 note container */
.container.article .note {
  background: #f7f4ff;
  border: 1px solid var(--border, #eee);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 2rem 0;
}
/* Match Blog1 style CTA inside note */
.container.article .note .cta-inline {
  display: inline-block;
  width: 100%;
  color: #000000 !important;
  text-decoration: underline !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.1rem;
  border-radius: 8px;
  border: none;
  text-align: center;
  box-sizing: border-box;
}

section#firstweek ol li {
  margin-bottom: 1.2rem;
  line-height: 1.65;
}

/* Blog text link with arrow */
.blog-link {
  color: #360142;                 /* pink */
  font-weight: 300;
  text-underline-offset: 5px;     /* nicer underline spacing */
  cursor: pointer;
  transition: color 0.3s ease;
}

.blog-link:hover {
  color: #2c0038;                 /* darker pink on hover */
}

.blog-link:hover::after {
  transform: translateX(4px);     /* arrow slides right */
}

/* Page-local helpers for article pages */
.jump-nav {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fafafa;
  margin: 1rem 0 2rem;
}
.jump-nav a {
  text-decoration: none;
  color: var(--text, #222);
  font-weight: 600;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--dark, #8a4f5e);
  margin-bottom: 0.25rem;
}
.note {
  background: #f7f5ff;
  border: 1px solid #e9e4ff;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0 2rem;
  font-size: 0.95rem;
}
.cta-inline {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}
html, body {
  background: #fff; /* prevent dark void on article pages */
}