/* =============================================================================
   ZenSleepZone — Shared Utilities & Components
   File: css/zsz-shared.css
   Loaded: functions.php (all pages, after zsz-tokens.css)
   Purpose: Reusable patterns — buttons, hero bg, cards shell, pagination,
            sidebar shell, section headers. NO page-specific layout here.
   ============================================================================= */

/* ─── BASE RESET (Astra-safe) ─── */
.zsz-wrap { box-sizing:border-box; }
.zsz-wrap *, .zsz-wrap *::before, .zsz-wrap *::after { box-sizing:inherit; }

/* ─── CONTAINERS ─── */
.zsz-container {
  max-width: var(--zsz-max-w);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
.zsz-container--wide {
  max-width: var(--zsz-max-w-wide);
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── HERO BACKGROUND SHELL ─── */
/* Used by home, blog, category, single-post heroes */
.zsz-hero-bg {
  background: var(--zsz-grad-full);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.zsz-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="zp" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r=".5" fill="white" opacity=".3"/></pattern></defs><rect width="100" height="100" fill="url(%23zp)"/></svg>');
  opacity: .10;
  pointer-events: none;
  animation: zsz-star-drift 25s linear infinite;
}
/* Accent glow blob */
.zsz-hero-bg::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(240,147,251,.20) 0%, rgba(118,75,162,.07) 70%, transparent 100%);
  border-radius: 50%;
  top: -130px; right: -110px;
  pointer-events: none;
}
.zsz-hero-inner {
  position: relative;
  z-index: 2;
}
/* Top accent stripe on non-hero sections */
.zsz-top-stripe::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--zsz-grad-full);
}

/* ─── SECTION HEADER ─── */
.zsz-section-head { text-align:center; margin-bottom:3rem; }
.zsz-section-head__label {
  font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zsz-primary); margin-bottom:.4rem;
}
.zsz-section-head__title {
  font-family:var(--ast-heading-font-family,'Lora',serif);
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800;
  color:var(--zsz-t1); margin-bottom:.5rem;
}
.zsz-section-head__sub {
  font-size:.95rem; color:var(--zsz-t3); max-width:640px; margin:0 auto; line-height:1.65;
}

/* ─── BUTTONS ─── */
.zsz-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem 1.6rem; border-radius:50px;
  font-size:.875rem; font-weight:700; text-decoration:none;
  transition:all var(--zsz-ease); cursor:pointer; border:none;
  line-height:1;
}
.zsz-btn--primary {
  background:var(--zsz-grad);
  color:#fff;
  box-shadow:0 4px 14px rgba(102,126,234,.35);
}
.zsz-btn--primary:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(102,126,234,.50);
  color:#fff;
}
.zsz-btn--outline {
  background:transparent;
  border:2px solid rgba(255,255,255,.4);
  color:#fff;
}
.zsz-btn--outline:hover {
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.7);
  color:#fff;
}
.zsz-btn--ghost {
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:.8rem;
  padding:.5rem 1.2rem;
}
.zsz-btn--ghost:hover,
.zsz-btn--ghost.active {
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.65);
  transform:translateY(-2px);
  color:#fff;
}
.zsz-btn--pill {
  background:var(--zsz-grad);
  color:#fff;
  padding:.4rem 1rem;
  border-radius:30px;
  font-size:.75rem; font-weight:600;
}
.zsz-btn--pill:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(102,126,234,.45);
  color:#fff;
}
/* CTA sleep-gradient button (header / homepage) */
.zsz-btn--sleep {
  background:var(--zsz-grad-sleep);
  color:#fff;
  box-shadow:0 4px 14px rgba(74,144,226,.30);
}
.zsz-btn--sleep:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(74,144,226,.45);
  color:#fff;
}

/* ─── CARD SHELL ─── */
/* Minimal base — pages add image/content specifics */
.zsz-card {
  background:var(--zsz-bg-card);
  border:1.5px solid var(--zsz-border);
  border-radius:var(--zsz-r-lg);
  box-shadow:var(--zsz-sh);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--zsz-ease), box-shadow var(--zsz-ease), border-color var(--zsz-ease);
}
.zsz-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--zsz-sh-lg);
  border-color:rgba(102,126,234,.30);
}
/* Card image wrap */
.zsz-card__img {
  overflow:hidden; position:relative; flex-shrink:0;
  background:var(--zsz-grad);
}
.zsz-card__img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--zsz-ease);
  display:block;
}
.zsz-card:hover .zsz-card__img img { transform:scale(1.06); }
/* Card body */
.zsz-card__body { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
/* Card footer */
.zsz-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:.75rem; border-top:1px solid var(--zsz-border);
}

/* ─── CATEGORY PILL (inside card) ─── */
.zsz-cat-pill {
  display:inline-block;
  padding:.28rem .8rem;
  border-radius:100px;
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  color:#fff; background:var(--zsz-grad);
  text-decoration:none;
  transition:opacity var(--zsz-ease-fast);
}
.zsz-cat-pill:hover { opacity:.85; color:#fff; }

/* ─── TYPE BADGE (absolute, on image) ─── */
.zsz-type-badge {
  position:absolute; top:10px; left:10px; z-index:10;
  padding:.28rem .75rem; border-radius:100px;
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  color:#fff; backdrop-filter:blur(8px);
  background:rgba(0,0,0,.55);
}

/* ─── STAT BADGE ─── */
.zsz-stat-badge {
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  padding:.2rem .6rem; border-radius:20px;
  font-size:.65rem; font-weight:600; color:#fff;
  display:inline-flex; align-items:center; gap:.2rem;
}

/* ─── DATE / META TEXT ─── */
.zsz-meta-text { font-size:.72rem; color:var(--zsz-t3); }

/* ─── PAGINATION ─── */
.zsz-pagination {
  display:flex; justify-content:center; gap:.5rem;
  margin-top:2.5rem; flex-wrap:wrap;
}
.zsz-pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 .75rem;
  border-radius:12px; font-size:.875rem; font-weight:600;
  color:var(--zsz-t2); background:var(--zsz-bg-card);
  border:1.5px solid var(--zsz-border); text-decoration:none;
  transition:all var(--zsz-ease);
}
.zsz-pagination .page-numbers.current {
  background:var(--zsz-grad); color:#fff; border-color:transparent;
}
.zsz-pagination .page-numbers:hover {
  border-color:var(--zsz-primary); color:var(--zsz-primary);
}

/* ─── SIDEBAR SHELL ─── */
.zsz-sidebar {
  display:flex; flex-direction:column; gap:1.5rem;
  position:sticky; top:2rem;
}
.zsz-sb-widget {
  background:var(--zsz-bg-card);
  border:1.5px solid var(--zsz-border);
  border-radius:var(--zsz-r-lg); overflow:hidden;
}
.zsz-sb-widget__head {
  font-size:.73rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
  background:var(--zsz-grad); padding:.85rem 1.25rem;
}
.zsz-sb-widget__body { padding:1rem 1.2rem; }

/* Sidebar post list */
.zsz-sb-posts { display:flex; flex-direction:column; }
.zsz-sb-post {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem .15rem; border-bottom:1px solid var(--zsz-border);
  text-decoration:none;
}
.zsz-sb-post:last-child { border-bottom:none; }
.zsz-sb-post:hover .zsz-sb-post__title { color:var(--zsz-primary); }
.zsz-sb-post__num {
  min-width:24px; height:24px; border-radius:6px;
  background:var(--zsz-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700;
}
.zsz-sb-post__title {
  font-family:var(--ast-heading-font-family,'Lora',serif);
  font-size:.845rem; font-weight:600; color:var(--zsz-t1);
  line-height:1.4; transition:color var(--zsz-ease-fast);
}
.zsz-sb-post__meta { font-size:.71rem; color:var(--zsz-t3); margin-top:.18rem; }

/* Sidebar tags cloud */
.zsz-sb-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.zsz-sb-tag {
  display:inline-block; padding:.28rem .75rem;
  font-size:.73rem; font-weight:500; border-radius:100px;
  text-decoration:none; background:#f1f5f9; color:#475569;
  transition:all .2s ease;
}
.zsz-sb-tag:hover { background:#e2e8f0; transform:translateY(-1px); }

/* Sidebar category list */
.zsz-sb-cats { list-style:none; margin:0; padding:0; }
.zsz-sb-cats li { border-bottom:1px solid var(--zsz-border); }
.zsz-sb-cats li:last-child { border-bottom:none; }
.zsz-sb-cats a {
  display:flex; justify-content:space-between;
  padding:.6rem .1rem; text-decoration:none; color:var(--zsz-t2);
  transition:color var(--zsz-ease-fast);
}
.zsz-sb-cats a:hover { color:var(--zsz-primary); }
.zsz-sb-cat-count {
  background:rgba(102,126,234,.10); color:var(--zsz-primary);
  border-radius:100px; font-size:.68rem; font-weight:700;
  padding:.1rem .5rem;
}

/* Sidebar search */
.zsz-sb-search {
  width:100%; padding:.65rem 1rem;
  border:1.5px solid var(--zsz-border); border-radius:10px;
  font-size:.875rem; font-family:inherit;
  transition:border-color var(--zsz-ease-fast);
}
.zsz-sb-search:focus { border-color:var(--zsz-primary); outline:none; }

/* Sidebar CTA box */
.zsz-sb-cta {
  background:var(--zsz-grad-full);
  border-radius:var(--zsz-r-lg); padding:1.5rem; color:#fff; text-align:center;
}
.zsz-sb-cta__icon  { font-size:2.2rem; display:block; margin-bottom:.6rem; }
.zsz-sb-cta h4     { font-size:1rem; font-weight:700; margin-bottom:.45rem; color:#fff; }
.zsz-sb-cta p      { font-size:.81rem; opacity:.88; margin-bottom:1.1rem; color:#fff; }
.zsz-sb-cta__btn {
  display:inline-block; padding:.6rem 1.4rem;
  background:#fff; color:var(--zsz-secondary);
  border-radius:50px; font-size:.83rem; font-weight:700;
  text-decoration:none; transition:all var(--zsz-ease);
}
.zsz-sb-cta__btn:hover { transform:translateY(-2px); box-shadow:var(--zsz-sh-md); color:var(--zsz-secondary); }

/* ─── NEWSLETTER STRIP ─── */
.zsz-newsletter {
  background:rgba(255,255,255,.05);
  padding:1.5rem; border-radius:12px; margin-top:2rem;
}
.zsz-newsletter h4 { color:#fff; font-size:1.1rem; margin-bottom:.8rem; }
.zsz-newsletter__form { display:flex; gap:.5rem; }
.zsz-newsletter__input {
  flex:1; padding:.8rem 1rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius:8px; color:#fff; font-size:.9rem;
}
.zsz-newsletter__input::placeholder { color:var(--zsz-t4); }
.zsz-newsletter__btn {
  padding:.8rem 1.5rem;
  background:var(--zsz-grad); color:#fff;
  border:none; border-radius:8px; font-weight:600;
  cursor:pointer; transition:all var(--zsz-ease); white-space:nowrap;
}
.zsz-newsletter__btn:hover { transform:translateY(-2px); box-shadow:0 5px 15px rgba(102,126,234,.40); }
@media (max-width:480px) {
  .zsz-newsletter__form { flex-direction:column; }
}

/* ─── EMPTY / NO-RESULTS STATE ─── */
.zsz-empty {
  text-align:center; padding:4rem 2rem;
  background:var(--zsz-bg-card);
  border-radius:var(--zsz-r-lg);
  border:1.5px dashed var(--zsz-border);
}
.zsz-empty__icon  { font-size:3rem; margin-bottom:1rem; }
.zsz-empty__title { font-size:1.25rem; color:var(--zsz-t1); margin-bottom:.5rem; }
.zsz-empty__text  { color:var(--zsz-t3); margin-bottom:1.5rem; }

/* ─── ANIMATION UTILITY ─── */
.zsz-fade-up { animation:zsz-fade-up .5s ease both; }
.zsz-fade-up:nth-child(1){animation-delay:.0s}
.zsz-fade-up:nth-child(2){animation-delay:.1s}
.zsz-fade-up:nth-child(3){animation-delay:.2s}
.zsz-fade-up:nth-child(4){animation-delay:.3s}
.zsz-fade-up:nth-child(5){animation-delay:.4s}
.zsz-fade-up:nth-child(6){animation-delay:.5s}