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

/* ==========================================================================
   SWAP: Brand accent — only value that changes per site. Line 11.
   ========================================================================== */
:root {
  --accent: #e63946;
  --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: 90px;
}

.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: 580px;
  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;
}

/* 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 120px;
  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.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--accent);
  border: 2px solid var(--accent);
  padding: 12px 28px;
  border-radius: var(--radius);
  margin-top: 8px;
  transition: background 0.2s, color 0.2s;
}

.hero-read-more:hover {
  background: transparent;
  color: var(--white);
}

.hero-subtext {
  color: rgba(255,255,255,0.82);
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* 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="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="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;
  gap: 0;
}

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

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

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

.newsletter-input-row button {
  padding: 10px 16px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  display: flex;
  align-items: 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;
  }

}

/* ==========================================================================
   ZUKO.IE — OVERRIDES & ADDITIONS
   Append to base stylesheet
   ========================================================================== */

/* Brand accent — Zuko red */
:root {
  --accent: #d62828;
}

/* Section label dividers on homepage feed */
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.625rem;
  margin: 2.5rem 0 1.5rem;
}

.section-label:first-child { margin-top: 0; }

/* Post hero author span */
.post-hero-author {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}

.post-hero-author strong { color: var(--white); }

/* ==========================================================================
   BREADCRUMB NAV
   ========================================================================== */

.breadcrumb-nav {
  background: var(--surface, #f5f5f5);
  border-bottom: 1px solid var(--border, #e5e5e5);
  padding: 10px 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li + li::before {
  content: '›';
  color: var(--text-muted, #aaa);
  font-size: 0.875rem;
}

.breadcrumb a {
  color: var(--text-muted, #888);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb a:hover {
  color: var(--accent, #d62828);
}

.breadcrumb [aria-current="page"] {
  color: var(--text, #222);
  font-weight: 600;
}

/* ==========================================================================
   NEWSLETTER NAME FIELD
   ========================================================================== */

.newsletter-input-name {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius, 4px);
  background: rgba(255,255,255,0.1);
  color: var(--white, #fff);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}

.newsletter-input-name::placeholder {
  color: rgba(255,255,255,0.55);
}

.newsletter-input-name:focus {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
}

/* Sidebar version — sits on light background */
.newsletter-form-sidebar .newsletter-input-name {
  background: var(--surface, #f5f5f5);
  border: 1px solid var(--border, #e5e5e5);
  color: var(--text, #222);
  margin-bottom: 8px;
}

.newsletter-form-sidebar .newsletter-input-name::placeholder {
  color: var(--text-muted, #888);
}

.newsletter-form-sidebar .newsletter-input-name:focus {
  border-color: var(--accent, #d62828);
  background: var(--white, #fff);
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq-section {
  margin: 2.5rem 0;
}

.faq-section > h2 {
  margin-bottom: 1.25rem;
}

.faq-item {
  border-bottom: 1px solid var(--border, #e5e5e5);
}

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

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #222);
  cursor: pointer;
  gap: 12px;
  line-height: 1.4;
}

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

.faq-icon {
  flex-shrink: 0;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent, #d62828);
  transition: transform 0.2s;
  min-width: 20px;
  text-align: center;
}

/* Answer hidden by default */
.faq-answer {
  display: none;
  padding: 0 0 1.25rem;
  color: var(--text-light, #444);
  line-height: 1.7;
}

.faq-answer p {
  margin: 0;
}

/* Answer visible when parent has .open */
.faq-item.open .faq-answer {
  display: block;
}



/* ==========================================================================
   CONTACT PAGE
   Append to the bottom of css/style.css
   ========================================================================== */

/* ── Layout ─────────────────────────────────────────────────────────────── */
.contact-section { background: var(--white); }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

/* ── Heading & intro ────────────────────────────────────────────────────── */
.contact-heading {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.contact-intro {
  color: var(--text-body);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

/* ── Status alerts ──────────────────────────────────────────────────────── */
.contact-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.contact-alert svg { flex-shrink: 0; margin-top: 2px; }

.contact-alert--success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.contact-alert--error {
  background: #fff1f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* ── Form structure ─────────────────────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* Two-column row for name + email */
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.contact-field { display: flex; flex-direction: column; gap: 6px; }

.contact-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
}

.required { color: var(--accent); margin-left: 2px; }

/* ── Inputs, select, textarea ───────────────────────────────────────────── */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.6;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.1);
}

/* Error state */
.contact-form input.is-invalid,
.contact-form select.is-invalid,
.contact-form textarea.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Field-level error text */
.field-error {
  font-size: 0.8125rem;
  color: #dc2626;
  min-height: 1.2em;
  display: none;
}

.field-error.visible { display: block; }

/* ── Consent checkbox ───────────────────────────────────────────────────── */
.contact-consent { margin-top: 0.25rem; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox-label a { color: var(--accent); text-decoration: underline; }
.checkbox-label a:hover { color: #a01f1f; }

/* ── Submit button ──────────────────────────────────────────────────────── */
.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 32px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  align-self: flex-start;
}

.contact-submit:hover {
  background: transparent;
  color: var(--accent);
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Honeypot — visually hidden from real users ─────────────────────────── */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* ── Info panel (right column) ──────────────────────────────────────────── */
.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-info-card {
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.contact-info-card--accent {
  background: #fff5f5;
  border-color: #fca5a5;
}

.contact-info-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.625rem;
}

.contact-info-card p {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-body);
}

.contact-info-list svg { color: var(--accent); flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-info-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .contact-row { grid-template-columns: 1fr; }

  .contact-info-col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FORM VALIDATION — shared styles used by both contact and newsletter forms
   ========================================================================== */

/* Newsletter inline error messages */
.newsletter-error {
  display: none;
  font-size: 0.8rem;
  color: #dc2626;
  margin-top: 4px;
}

.newsletter-error.visible { display: block; }

/* Invalid state on newsletter inputs */
.newsletter-form-sidebar input.is-invalid,
.footer-newsletter-form input.is-invalid {
  border-color: #dc2626 !important;
}

/* Newsletter success message */
.newsletter-success {
  display: none;
  font-size: 0.875rem;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 8px;
}

.newsletter-success.visible { display: block; }