/* ==========================================================================
   MYBLOG — MASTER STYLESHEET
   Single file, no preprocessors.
   ========================================================================== */

/* ==========================================================================
   SWAP: Brand accent — only value that changes per site. Line 11.
   ========================================================================== */
:root {
  --accent: #F7BF39;
  --text-dark: #1a1a1a;
  --text-muted: #888888;
  --text-body: #444444;
  --border: #eeeeee;
  --bg-light: #f5f5f5;
  --bg-off: #f9f9f9;
  --bg-dark: #1a1a1a;
  --white: #ffffff;
  --max-width: 1140px;
  --radius: 4px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }
address { font-style: normal; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section { padding: 70px 0; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-dark);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.125rem, 3vw, 1.375rem); margin-bottom: 0.5rem; }
h3 { font-size: 1rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-bar {
  width: 100%;
  background: var(--bg-dark);
  border-top: 3px solid var(--accent);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
}

.top-bar-contact {
  display: flex;
  align-items: center;
  gap: 24px;
}

.top-bar-contact a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
}

.top-bar-contact a:hover { color: var(--white); }
.top-bar-contact svg { color: var(--accent); flex-shrink: 0; }

.top-bar-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-bar-social a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.55);
}

.top-bar-social a:hover { color: var(--accent); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav {
  width: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 130px;
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }

.logo-text {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-menu a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark);
}

.nav-menu a:hover { color: var(--accent); }

/* Hamburger — hidden desktop, shown ≤767px */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-dark);
}

/* ==========================================================================
   SECTION: Blog Hero
   Black bg (swap to image per site), centred headline,
   4 cards overlapping out of the bottom edge.
   ========================================================================== */
.blog-hero {
  position: relative;
  /* SWAP: add background-image inline on the element or here per site */
  background: #000000;
  /* SWAP: hero height — increase for more dramatic hero */
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* No extra bottom padding — cards live outside this element now */
  padding-bottom: 0;
  overflow: visible;
}

/* Home hero — desktop image */
.blog-hero--home {
  background-image: url('../images/home/wonderpaws-dogs-health.webp');
  background-size: cover;
  background-position: center;
  min-height: 680px;
}

/* Home hero — mobile image (≤767px) */
@media (max-width: 767px) {
  .blog-hero--home {
    background-image: url('../images/home/wonderpaws-dogs-health-mb.webp');
    min-height: 500px;
    aspect-ratio: 9 / 16;
  }
}

/* Hero cards wrapper — sits OUTSIDE .blog-hero in the HTML.
   Negative margin-top pulls the row up so the card images overlap
   into the dark hero above, while the white card body lands on the
   white page below. Half in, half out.
   SWAP: adjust margin-top to control depth of overlap. */
.hero-cards-wrap {
  margin-top: -90px;
  position: relative;
  z-index: 10;
  padding-bottom: 48px;
}

/* Dark overlay — always present; reduces opacity when bg image added */
.blog-hero-overlay {
  position: absolute;
  inset: 0;
  /* SWAP: adjust opacity 0.3–0.7 depending on how dark your hero image is */
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.blog-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 24px 40px;
  max-width: 700px;
}

.hero-eyebrow {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.blog-hero-content h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 24px;
  line-height: 1.15;
}

.hero-read-more {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.hero-read-more:hover { color: var(--accent); }

/* 4 cards row — pulled up out of the hero with negative margin */
.hero-cards-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  /* Negative margin lifts cards half into the hero */
  margin-top: -80px;
  margin-bottom: 0;
}

.hero-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  /* Cards sit above the hero overlay */
  position: relative;
  z-index: 4;
}

.hero-card:hover .hero-card-title { color: var(--accent); }

/* Active/highlighted card — accent border top */
.hero-card--active {
  border-top: 3px solid var(--accent);
}

.hero-card-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Placeholder — remove when real image added */
.hero-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  /* IMAGE PATH comment lives in index.php above each card */
}

.hero-card-body {
  padding: 14px 16px 18px;
}

.hero-card-cat {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}

.hero-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 8px;
}

.hero-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   BLOG LISTING LAYOUT — 2 col content + sidebar
   ========================================================================== */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.blog-main {
  min-width: 0; /* prevents grid blowout */
}

/* ==========================================================================
   POST CARDS — 2-column grid
   ========================================================================== */
.post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.post-card {
  display: flex;
  flex-direction: column;
}

.post-card-img-link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* Placeholder — grey box at correct ratio */
.post-card-img-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--bg-light);
}

.post-card-body { flex: 1; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.post-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.post-cat {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}

.post-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 10px;
}

.post-card-title a { color: var(--text-dark); }
.post-card-title a:hover { color: var(--accent); }

.post-excerpt {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 12px;
  line-height: 1.6;
}

.post-read-more {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dark);
}

.post-read-more:hover { color: var(--accent); }

/* ==========================================================================
   FEATURED FULL-WIDTH POST
   ========================================================================== */
.post-featured {
  margin-bottom: 40px;
}

.post-featured-img-link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

/* Placeholder */
.post-featured-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--bg-light);
}

.post-featured-body { padding: 0; }

.post-featured-title {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.3;
}

.post-featured-title a { color: var(--text-dark); }
.post-featured-title a:hover { color: var(--accent); }

/* ==========================================================================
   WIDE FULL-BLEED POST (large image, title below)
   ========================================================================== */
.post-wide { margin-bottom: 40px; }

.post-wide-img-link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.post-wide-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--bg-light);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 0 0;
  border-top: 1px solid var(--border);
}

.page-prev,
.page-next {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
}

.page-prev:hover,
.page-next:hover { color: var(--accent); }

.page-numbers { display: flex; gap: 6px; }

.page-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.page-num:hover,
.page-num--active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 36px;
  /* Sticks below the sticky header when scrolling */
  position: sticky;
  top: 130px; /* approx topbar + nav height */
}

.sidebar-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--white);
}

.widget-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dark);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* Author widget */
.widget-author {
  text-align: center;
}

.author-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

/* Placeholder circle — remove when real img added */
.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-light);
  /* IMAGE PATH: /images/author.jpg — 80x80px circular */
}

.author-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.author-bio {
  font-size: 0.875rem;
  color: var(--text-body);
  margin-bottom: 14px;
}

.author-social {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.author-social a {
  color: var(--text-muted);
}

.author-social a:hover { color: var(--accent); }

/* Recent posts widget */
.widget-post-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.widget-post-list li:last-child { border-bottom: none; padding-bottom: 0; }
.widget-post-list li:first-child { padding-top: 0; }

.widget-post-list a {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 5px;
}

.widget-post-list a:hover { color: var(--accent); }

.widget-post-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 8px;
}

.widget-post-cat {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}

/* Newsletter sidebar */
.widget-newsletter p {
  font-size: 0.875rem;
  color: var(--text-body);
  margin-bottom: 14px;
}

.newsletter-form-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-form-sidebar input[type="text"],
.newsletter-form-sidebar input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dark);
  background: var(--white);
}

.newsletter-form-sidebar input[type="text"]:focus,
.newsletter-form-sidebar input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-newsletter {
  width: 100%;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-newsletter:hover { opacity: 0.9; }

/* Ad placeholder */
.widget-ad {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border-style: dashed;
}

.ad-placeholder-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* Categories widget */
.widget-categories li {
  border-bottom: 1px solid var(--border);
}

.widget-categories li:last-child { border-bottom: none; }

.widget-categories a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 0.875rem;
  color: var(--text-dark);
}

.widget-categories a:hover { color: var(--accent); }

.widget-categories span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   SECTION: Instagram Strip
   ========================================================================== */
.insta-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

.insta-item {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
}

.insta-item:hover .insta-placeholder { opacity: 0.8; }

/* Placeholder — remove when real images added -->
/* IMAGE PATHS: /images/insta-1.jpg through insta-6.jpg — 300x300px */
.insta-placeholder {
  width: 100%;
  height: 100%;
  background: #2d2d2d;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-dark);
  color: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.75fr 1fr 1.25fr 1.5fr;
  gap: 48px;
  padding: 56px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 12px;
}

.footer-logo .logo-text { color: var(--white); }

.footer-tagline {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.5);
}

.footer-social a:hover { color: var(--accent); }

.footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-nav li { margin-bottom: 10px; }

.footer-nav a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

.footer-nav a:hover { color: var(--white); }

/* Popular posts in footer */
.footer-posts li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-posts li:first-child { padding-top: 0; }
.footer-posts li:last-child { border-bottom: none; }

.footer-posts a {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
  margin-bottom: 4px;
}

.footer-posts a:hover { color: var(--white); }

.footer-posts span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

/* Newsletter footer */
.footer-newsletter-text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}

.newsletter-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-input-row input[type="text"],
.newsletter-input-row input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  box-sizing: border-box;
}

.newsletter-input-row input[type="text"]::placeholder,
.newsletter-input-row input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }

.newsletter-input-row input[type="text"]:focus,
.newsletter-input-row input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

.newsletter-input-row button {
  width: 100%;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--text-dark);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-input-row button:hover { opacity: 0.9; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 24px;
}

.footer-copy {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   SINGLE POST PAGE
   ========================================================================== */
.post-hero {
  position: relative;
  background: #000000;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  /* SWAP: add background-image inline on the element */
  background-size: cover;
  background-position: center;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.post-hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.post-hero-content .hero-eyebrow { margin-bottom: 16px; }

.post-hero-content h1 {
  color: var(--white);
  margin-bottom: 16px;
}

.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
}

.post-hero-meta a { color: var(--accent); }

/* Post body typography */
.post-content { max-width: 100%; }

.post-lead {
  font-size: 1.125rem;
  color: var(--text-dark);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.post-content h2 {
  font-size: 1.375rem;
  margin: 2rem 0 1rem;
}

.post-content p {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.post-figure {
  margin: 2rem 0;
}

.post-inline-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 8;
  background: var(--bg-light);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

figcaption {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

.post-blockquote {
  border-left: 4px solid var(--accent);
  margin: 2rem 0;
  padding: 16px 24px;
  background: var(--bg-off);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--text-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Tags */
.post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.tags-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tag {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-dark);
}

.tag:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* Author bio strip below post */
.post-author-bio {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 2rem 0;
}

.avatar-placeholder-sm {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-light);
  flex-shrink: 0;
}

.post-author-bio-text strong {
  display: block;
  font-size: 0.9375rem;
  margin-bottom: 6px;
}

.post-author-bio-text p {
  font-size: 0.875rem;
  color: var(--text-body);
  margin: 0;
}

/* Related posts */
.related-posts { margin-top: 2rem; }

.related-posts-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

/* ==========================================================================
   RESPONSIVE — 767px (matches Elementor breakpoint)
   ========================================================================== */
@media (max-width: 767px) {

  /* Section padding */
  .section { padding: 40px 0; }

  /* Top bar — hide contact, centre social */
  .top-bar-contact { display: none; }
  .top-bar-inner { justify-content: center; }

  /* Nav hamburger */
  .nav-hamburger { display: flex; }

  .nav-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    z-index: 99;
  }

  .nav-menu.is-open { display: flex; }

  .nav-menu li { width: 100%; }

  .nav-menu a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
  }

  .nav-menu li:last-child a { border-bottom: none; }

  /* Hero */
  .blog-hero { min-height: 320px; }

  /* On mobile cards stack 2-col and reduce overlap */
  .hero-cards-wrap {
    margin-top: -60px;
    padding-bottom: 32px;
  }

  .hero-cards-row {
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
    gap: 12px;
  }

  /* Blog layout — stack sidebar below content */
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Sidebar no longer sticky on mobile */
  .sidebar { position: static; }

  /* Post grid — single column */
  .post-grid { grid-template-columns: 1fr; gap: 24px; }

  /* Instagram strip — 3 cols on mobile */
  .insta-strip { grid-template-columns: repeat(3, 1fr); }

  /* Footer — 2 cols then 1 */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 24px;
  }

  /* Post hero */
  .post-hero { min-height: 300px; }
  .post-hero-content { padding: 40px 24px; }

  .post-hero-meta { gap: 12px; }

}

@media (max-width: 480px) {

  /* Hero cards — single column on very small screens */
  .hero-cards-row { grid-template-columns: 1fr; }

  /* Instagram strip — 2 col */
  .insta-strip { grid-template-columns: repeat(2, 1fr); }

  /* Footer — single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 24px;
  }

}

/* ==========================================================================
   FAQ ACCORDION
   JS in main.js toggles .open on .faq-item.
   ========================================================================== */
.faq-section { margin-top: 2.5rem; }

.faq-section h2 {
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-of-type { border-top: 1px solid var(--border); }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  gap: 16px;
  line-height: 1.4;
}

.faq-question:hover { color: var(--accent); }

.faq-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}

.faq-answer {
  display: none;
  padding: 0 4px 18px;
}

.faq-answer p {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.75;
  margin: 0;
}

.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question { color: var(--accent); }