/*
====================================================================
Embracing Authenticity — Consolidated CSS (Part 1/5)
--------------------------------------------------------------------
Replace your entire PART 1/5 with this block.
====================================================================
*/

/* ==================================================================
PART 1/5 — Base, Variables, Resets, Layout, Typography
================================================================== */

/* Variables (site-wide palette + tokens) */
:root {
  /* Core palette */
  --color-bg: #F8F4EC;             /* paper background */
  --color-primary: #1A2D41;        /* body text + headings default */
  --color-accent: #B6753A;         /* warm accent for links/buttons */
  --color-highlight: #F4D3D8;      /* soft highlight (cards/chips) */
  --color-light: #FFFFFF;          /* white */
  --color-mid: #CCCCCC;            /* borders */
  --color-muted: #666666;          /* secondary text */
  --color-footer-bg: #1A2D41;      /* footer navy */
  --color-footer-text: #F8F4EC;    /* footer text */

  /* Header/Nav palette (unified) */
  --ea-navy: #0e2a3b;              /* header bg */
  --ea-accent: #ff9e66;            /* active/brand accent */
  --ea-text: #f4f6f8;              /* header text */
  --ea-link: #ffd2b3;              /* hover underline color */
  --ea-shadow: 0 6px 16px rgba(0,0,0,.12);

  /* Fonts */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Rounding, motion, elevation */
  --radius: 12px;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  --transition: 0.3s ease;

  /* Layout */
  --container-max: 1100px;

  /* Component sizing (centralized) */
  --logo-h-mobile: 48px;
  --logo-h-desktop: 72px;
  --footer-icon-size: 22px;

  /* Header padding (helps anchor offset/CLS) */
  --header-pad-mobile: 0.9rem;
  --header-pad-desktop: 1.15rem;
}

/* Reset & Box Model */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; }

/* Base */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  background-image: url('/assets/images/bg-texture.png');
  background-repeat: repeat;
  color: var(--color-primary);
  line-height: 1.6;
  text-align: left;
  margin: 0;
}

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

/* Links (general) */
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent); }
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Motion/accessibility helpers */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Print: drop paper texture to save ink/moire */
@media print {
  body { background-image: none !important; }
}

/* Global container (site content wrapper) */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Keep header (.shell) aligned with content (.container) */
.shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Safety: constrain single-post pages even if not wrapped in .container */
.site-content > .post {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Typography */
:where(p, ul, ol, blockquote) { margin-bottom: 1.6rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  margin: 2rem 0 1rem;
}

main h2 { color: var(--color-accent); }

/* Screen-reader only helper */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==================================================================
PART 2/5 — Header / Navigation (final: full-bleed, rect logo)
================================================================== */

/* No accent line */
.top-accent { display: none; }

/* Sticky header — full-bleed */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--ea-navy);
  color: var(--ea-text);
  box-shadow: var(--ea-shadow);
  width: 100%;
}

/* Inner container keeps content aligned to site width */
.site-header .shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--header-pad-mobile) 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---- Brand (logo only) ---- */
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit;
}
.brand:focus-visible {
  outline: 2px solid var(--ea-link);
  outline-offset: 2px; border-radius: 6px;
}
.brand-mark {
  height: var(--logo-h-mobile);
  width: auto;                 /* keep original aspect ratio */
  max-width: 100%;
  object-fit: contain;
}
.brand-text { display: none; } /* rely on aria-label on the link */

/* ---- Nav links ---- */
.site-nav { width: auto; }
.site-nav ul {
  display: flex; align-items: center; gap: 1.25rem;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap; /* avoid pushing past the logo on mid widths */
}
.site-nav a {
  color: var(--ea-text);
  text-decoration: none;
  padding: .45rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus-visible { border-bottom-color: var(--ea-link); }
.site-nav a.is-active { border-bottom-color: var(--ea-accent); }

/* ---- Hamburger (mobile) ---- */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent; color: var(--ea-text);
  border-radius: .6rem; padding: .55rem; cursor: pointer;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--ea-link);
  outline-offset: 2px;
}

/* ---- Mobile slide-down ---- */
@media (max-width: 860px){
  .site-header .shell { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }

  .site-nav {
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }
  .site-header.is-open .site-nav { max-height: 260px; }

  .site-nav ul {
    flex-direction: column; align-items: flex-start;
    padding: .5rem 0 .75rem; gap: .75rem;
  }
}

/* ---- Desktop: thicker bar + larger logo ---- */
@media (min-width: 861px){
  .nav-toggle { display: none; }
  .site-nav { max-height: none !important; }
  .site-header .shell { padding: var(--header-pad-desktop) 1.5rem; } /* thicker bar */
  .brand-mark { height: var(--logo-h-desktop); }                     /* larger logo */
}

/* Hide any leftover huge masthead title */
.masthead, .site-title, header .site-title { display: none !important; }

/* ==================================================================
PART 3/5 — Cards, Hero, Quotes, Animations
================================================================== */

/* Blog cards (shared for home + lists) */
.blog-list, .latest-posts .blog-list { display: grid; gap: 2rem; }

.blog-card, .latest-posts .blog-card {
  background: var(--color-light);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover, .latest-posts .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(26, 45, 65, 0.15);
}

.blog-card-content h3 a { text-decoration: none; color: var(--color-primary); }
.blog-card-content h3 a:hover,
.blog-card-content h3 a:focus-visible { color: var(--color-accent); }

.read-more, .latest-posts .read-more {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.read-more:hover,
.read-more:focus-visible,
.latest-posts .read-more:hover,
.latest-posts .read-more:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* Ensure no rogue backgrounds in cards */
.blog-card :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,span,strong,em,small,code) {
  background: transparent !important;
  color: var(--color-primary);
}
.blog-card a { color: var(--color-primary); text-decoration: none; }
.blog-card a:hover,
.blog-card a:focus-visible { color: var(--color-accent); }
.blog-card mark { background: rgba(232,143,58,.15); color: inherit; }

/* Quote carousel */
.quote-carousel {
  margin: 4rem auto; max-width: 800px;
  background-color: var(--color-highlight);
  padding: 2rem; border-radius: var(--radius);
  position: relative;
}
.quote-carousel blockquote {
  font-size: 1.2rem; font-style: italic; margin-bottom: 1rem;
  border-left: 4px solid var(--color-accent);
  padding-left: 1rem; color: var(--color-primary);
  display: none; background-color: transparent;
}
.quote-carousel blockquote.active { display: block; }
.quote-dots { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.quote-dots .dot {
  width: 12px; height: 12px; background: #cfcfcf;
  border-radius: 50%; cursor: pointer;
  transition: background-color var(--transition), transform .2s ease;
}
.quote-dots .dot:hover,
.quote-dots .dot:focus-visible { transform: scale(1.1); }
.quote-dots .dot.active { background: var(--color-accent); }

/* Hero banner */
.hero-banner { position: relative; overflow: hidden; }
.hero-banner img { width: 100%; height: auto; display: block; border-radius: 0; }

/* Overlay uses gradient for legibility on all screens */
.hero-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  color: #fff; text-align: left; z-index: 10;
}
.hero-overlay .inner { max-width: 80%; }

.hero-text {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700; margin-bottom: .6rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.hero-buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-button {
  background: rgba(255,255,255,.88);
  color: var(--color-primary);
  padding: .55rem 1.1rem; border-radius: 8px;
  font-weight: 600; text-decoration: none;
  transition: background-color var(--transition), transform .2s ease;
}
.hero-button:hover,
.hero-button:focus-visible { background: #fff; transform: translateY(-1px); }

/* Simple fade-in utility */
@keyframes fadeIn { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.fade-in.in-view { opacity: 1; transform: translateY(0); }

/* ==================================================================
PART 4/5 — Music Therapy Grid, LEGO Animation, Tags/Emotions
================================================================== */

/* Music Therapy */
.music-therapy-main { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.music-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.post { background: var(--color-light); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform var(--transition); }
.post:hover { transform: translateY(-4px); }
.post-thumbnail { width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; }
.post-date { font-size: .9rem; color: var(--color-muted); margin-bottom: .5rem; }
.post-description { font-size: 1rem; }

/* LEGO Animation section */
.lego-animation-section { text-align: center; margin: 4rem auto; padding: 2rem; background: #fdfdfd; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.08); max-width: 600px; }
.lego-animation-section h3 { font-size: 1.5rem; margin-bottom: .5rem; color: var(--color-primary); }
.lego-animation-section p { font-size: 1rem; color: #444; margin-bottom: 2rem; }
.lego-silhouette { position: relative; width: 180px; height: 400px; margin: 0 auto; background: url('/assets/images/lego-silhouette-outline.png') no-repeat center/contain; }
.block { position: absolute; width: 30px; height: 20px; background: var(--color-accent); border-radius: 4px; opacity: 0; animation: riseIn 1s ease-out forwards; }
@keyframes riseIn { 0% { transform: translateY(20px) scale(.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@media (max-width: 480px) { .lego-silhouette { width: 120px; height: 280px; } .block { width: 20px; height: 14px; } }

/* Tags & Emotion Filters */
.tag-filter { text-align: center; margin: 2rem 0; }

.post-tag, .emotion-button {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .45rem 1rem; border-radius: 6px; margin: .3rem;
  text-transform: uppercase; letter-spacing: .5px; cursor: pointer; text-decoration: none;
  background: var(--color-highlight); color: #5a3a24; /* darker for contrast */
  transition: background-color var(--transition), color var(--transition), transform .2s ease;
}
.post-tag:hover, .post-tag.active,
.emotion-button.active {
  background: var(--color-accent); color: #fff; transform: translateY(-1px);
}
.emotion-button { background: #dbe5ea; color: var(--color-primary); }
.emotion-button:hover { transform: translateY(-1px); }

.post-tag:focus-visible, .emotion-button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

.clear-tag-filter, .clear-emotion-filter {
  background: #EDEDED; color: var(--color-primary);
  font-size: .95rem; padding: .4rem 1rem; border-radius: 6px;
  margin: .5rem; display: inline-block;
  transition: background-color var(--transition), color var(--transition), transform .2s ease;
}
.clear-tag-filter:hover, .clear-emotion-filter:hover {
  background: var(--color-accent); color: #fff; transform: translateY(-1px);
}

/* ==================================================================
PART 5/5 — Accent Band + Global Footer (Centered Layout, Clean Icons)
================================================================== */

/* Accent band (optional, under hero) */
.accent-band {
  background: var(--ea-navy);
  color: var(--ea-text);
  padding: 22px 0;
  margin-top: -8px;
  box-shadow: var(--ea-shadow);
}
.accent-band .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accent-band .btn,
.accent-band .btn.btn-light {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--color-light);
  color: var(--ea-navy);
  text-decoration: none;
  font-weight: 600;
  border: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.accent-band .btn:hover,
.accent-band .btn.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* -----------------------------
   Global footer
------------------------------ */

.site-footer {
  background: var(--ea-navy);
  color: var(--ea-text);
  margin-top: 48px;
  padding: 36px 16px;
  text-align: center;
}

.site-footer .footer-center {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Brand */
.footer-brand strong { color: var(--ea-text); }
.footer-brand .muted {
  color: rgba(255,255,255,.9);
  font-size: 0.95rem;
  margin-top: 4px;
}

/* Nav */
.footer-nav {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--ea-text);
  text-decoration: none;
  opacity: 0.95;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  transition: opacity var(--transition), border-color var(--transition);
}
.footer-nav a:hover,
.footer-nav a:focus-visible { opacity: 1; border-bottom-color: var(--ea-link); }

/* Social */
.footer-social {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-social .social {
  color: #fff;
  opacity: 0.9;
  transition: opacity var(--transition), transform var(--transition);
}
.footer-social .social:hover,
.footer-social .social:focus-visible { opacity: 1; transform: translateY(-1px); }
.footer-social .icon {
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  display: block;
}

/* Note */
.footer-note {
  font-size: 0.95rem;
  color: rgba(255,255,255,.9);
  max-width: 500px;
}
.footer-note a {
  color: var(--ea-text);
  text-decoration: none;
  transition: opacity var(--transition);
}
.footer-note a:hover,
.footer-note a:focus-visible { opacity: 1; }

/* Print */
@media print {
  .site-footer, .accent-band {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .footer-nav a, .footer-note a { color: #000 !important; border: 0 !important; }
}