/* ==========================================================================
   Shardz — Main Stylesheet
   Brand: Markinuity  |  Navy #132937  Pink #D72685  Mint #8ECAB2  Sky #7ECBE8
   ========================================================================== */

/* ── Font faces ────────────────────────────────────────────────────────────────
   CORRECTION to an earlier fix in this same file's history: this block used
   to hand-declare @font-face for all 5 bundled fonts, on the (incomplete)
   diagnosis that nothing else declared them. That diagnosis only checked
   assets/*.css and never checked theme.json — which has declared the exact
   same 5 fonts (same files, same weights/styles, same font-display:swap)
   via its native `fontFamilies`/`fontFace` schema since long before this
   session, completely independently of this file. WordPress's core font
   library turns that theme.json data into real @font-face rules on every
   front-end page load, inlined as `<style class="wp-fonts-local">` —
   confirmed live via a real rendered page's actual output, not assumed.
   This hand-written block was therefore a genuine, byte-for-byte duplicate
   the whole time it existed, not a fix for a real gap. Removed; theme.json
   remains the single source of truth for font-face declarations. See
   theme.json's `styles.typography.fontFamilies` for the fonts themselves. */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /*
	 * Fallback tokens — overridden by Shardz Builder brand settings.
	 * If the Builder plugin is active these are replaced via inline <style>.
	 */
  --shz-navy: #132937;
  --shz-navy-rgb: 19, 41, 55;
  --shz-navy-hover: #1a3a4f;
  --shz-navy-deep: #0d1e29;
  --shz-pink: #d72685;
  --shz-pink-hover: #b81e70;
  --shz-mint: #8ecab2;
  --shz-sky: #7ecbe8;
  --shz-white: #ffffff;
  --shz-surface: #f8fafc;
  --shz-surface-alt: #eef2f6;
  --shz-contrast: #dda15e;
  --shz-text: #0f172a;
  --shz-muted: #64748b;
  --shz-bg: #ffffff;
  --shz-border: #e2e8f0;

  /* Gradients — reference token vars so they follow brand colors */
  --shz-grad-hero: linear-gradient(
    135deg,
    var(--shz-navy) 0%,
    var(--shz-navy-deep) 100%
  );
  --shz-grad-accent: linear-gradient(
    90deg,
    var(--shz-pink) 0%,
    var(--shz-sky) 100%
  );
  --shz-grad-subtle: linear-gradient(
    135deg,
    rgba(215, 38, 133, 0.06) 0%,
    rgba(126, 203, 232, 0.06) 100%
  );

  /* Typography */
  --shz-font-body: Inter, system-ui, -apple-system, sans-serif;
  --shz-font-heading: Montserrat, system-ui, -apple-system, sans-serif;
  --shz-font-display: "Black Ops One", system-ui, sans-serif;
  --shz-font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;

  /* Spacing */
  --shz-s1: 0.25rem;
  --shz-s2: 0.5rem;
  --shz-s3: 0.75rem;
  --shz-s4: 1rem;
  --shz-s5: 1.5rem;
  --shz-s6: 2rem;
  --shz-s7: 3rem;
  --shz-s8: 4rem;
  --shz-s9: 6rem;

  /* Container */
  --shz-container: 1200px;
  --shz-container-narrow: 720px;
  --shz-container-wide: 1400px;
  --shz-container-pad: clamp(1rem, 4vw, 2rem);

  /* Radius */
  --shz-r-sm: 0.25rem;
  --shz-r-md: 0.5rem;
  --shz-r-lg: 0.75rem;
  --shz-r-xl: 1rem;
  --shz-r-full: 9999px;

  /* Shadows */
  --shz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shz-shadow-md: 0 4px 6px rgba(19, 41, 55, 0.12);
  --shz-shadow-lg: 0 10px 25px rgba(19, 41, 55, 0.15);
  --shz-shadow-pink: 0 4px 20px rgba(215, 38, 133, 0.28);

  /* Transitions */
  --shz-t-fast: 150ms ease;
  --shz-t-base: 220ms ease;
  --shz-t-slow: 320ms ease;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}

/* No site-wide `scroll-behavior: smooth`. Applied to <html> it layers a CSS
   scroll animation over the browser's own wheel/trackpad scrolling, which is a
   known cause of trackpad overshoot and stutter (a flick travels too far and
   the page feels like it fights the gesture). Nothing here needs it: the
   back-to-top button asks for smooth scrolling itself (assets/index.js). */

body {
  font-family: var(--shz-font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--shz-text);
  background: var(--shz-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--shz-sky);
  text-decoration: none;
  transition: color var(--shz-t-fast);
}
a:hover {
  color: var(--shz-pink);
}

:focus-visible {
  outline: 2px solid var(--shz-pink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Container ──────────────────────────────────────────────────────────────── */
.shz-container {
  width: 100%;
  max-width: var(--shz-container);
  margin-inline: auto;
  padding-inline: var(--shz-container-pad);
}
.shz-container--narrow {
  max-width: var(--shz-container-narrow);
}
.shz-container--wide {
  max-width: var(--shz-container-wide);
}
.shz-container--full {
  max-width: 100%;
  padding-inline: 0;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--shz-font-heading);
  font-weight: var(--shz-font-weight-h, 700);
  line-height: 1.2;
  color: var(--shz-text);
  letter-spacing: var(--shz-letter-space, -0.02em);
}
h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}
h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
h3 {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
}
h4 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.shz-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.75em;
  border-radius: var(--shz-r-full);
  font-family: var(--shz-font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--shz-t-base);
}

.shz-btn--primary {
  /* --shz-btn-primary-bg lets Design → Brand set a button color separate
     from the accent/CTA color (--shz-pink) - useful when the accent color
     doesn't have enough contrast to work as a button background. Falls
     back to --shz-pink when unset, so this is a no-op for every existing
     site until someone explicitly sets it. */
  background: var(--shz-btn-primary-bg, var(--shz-pink));
  color: #fff;
  box-shadow: var(--shz-shadow-pink);
}
.shz-btn--primary:hover {
  background: var(--shz-btn-primary-bg-hover, var(--shz-pink-hover));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(215, 38, 133, 0.4);
}

.shz-btn--secondary {
  border-color: var(--shz-navy);
  color: var(--shz-navy);
  background: transparent;
}
.shz-btn--secondary:hover {
  background: var(--shz-navy);
  color: #fff;
  transform: translateY(-2px);
}

.shz-btn--outline {
  border-color: currentColor;
  color: #fff;
  background: transparent;
}
.shz-btn--outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-2px);
}

.shz-btn--ghost {
  color: var(--shz-text);
  border-color: var(--shz-border);
}
.shz-btn--ghost:hover {
  border-color: var(--shz-pink);
  color: var(--shz-pink);
}

/* Solid white pill - for a CTA sitting on a dark/photo background where
   --shz-btn-primary-bg's brand color doesn't read as a distinct "button"
   against a busy image (e.g. the hero's "split" style, index.js/sections.css). */
.shz-btn--light {
  background: #fff;
  color: var(--shz-navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.shz-btn--light:hover {
  background: var(--shz-surface);
  color: var(--shz-navy);
  transform: translateY(-2px);
}

.shz-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.shz-btn-group.shz-centered {
  justify-content: center;
}

/* ── Skip link ──────────────────────────────────────────────────────────────── */
.shz-skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--shz-pink);
  color: #fff;
  border-radius: var(--shz-r-md);
  font-weight: 600;
}
.shz-skip-link:focus {
  left: 0.5rem;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.shz-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--shz-navy);
  transition: box-shadow var(--shz-t-base), transform var(--shz-t-base);
}
.shz-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(var(--shz-navy-rgb), 0.5);
}

/* Scroll-behavior variants (Design → Brand → Header, Navigation & Footer). */
.shz-header[data-sticky="normal"] {
  position: static;
}
.shz-header[data-sticky="reveal"] {
  position: fixed;
  /* --shz-fixed-header-offset: set by assets/index.js only when a "Before
     Header" Custom Layout bar is present (0 otherwise) — see its own
     comment for why a fixed header needs this. */
  top: var(--shz-fixed-header-offset, 0);
  left: 0;
  right: 0;
}
.shz-header[data-sticky="reveal"].shz-header--hidden {
  transform: translateY(-100%);
}
.shz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shz-s5);
  padding-block: 0.875rem;
}
.shz-header__logo {
  flex-shrink: 0;
}
.shz-header__accent {
  height: 3px;
  background: var(--shz-grad-accent);
}

/* Logo */
.shz-logo-text {
  font-family: var(--shz-font-heading);
  font-weight: 800;
  font-size: 1.375rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.025em;
}
.shz-logo-text:hover {
  color: var(--shz-mint);
}
.shz-logo-text--light {
  color: rgba(255, 255, 255, 0.7);
}
.shz-logo-text--light:hover {
  color: var(--shz-mint);
}
.shz-header .custom-logo {
  max-height: var(--shz-logo-height, 44px);
  width: auto;
}
.shz-footer .custom-logo,
.shz-footer__logo-link img {
  max-height: var(--shz-footer-logo-height, 40px);
  width: auto;
}

/* Desktop nav */
.shz-header__nav {
  display: flex;
  align-items: center;
}
.shz-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
}
.shz-nav-menu a {
  display: block;
  padding: 0.5rem 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all var(--shz-t-fast);
}
.shz-nav-menu a:hover,
.shz-nav-menu .current-menu-item > a {
  color: #fff;
}
.shz-nav-menu .current-menu-item > a {
  color: var(--shz-mint);
}

/* Header CTA */
.shz-header__cta {
  margin-left: var(--shz-s3);
}

/* Mobile toggle */
.shz-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--shz-r-md);
  cursor: pointer;
  transition: background var(--shz-t-fast);
  flex-shrink: 0;
}
.shz-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}
.shz-nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 1px;
  transition: all var(--shz-t-base);
  transform-origin: center;
}
/* Hamburger → X when open */
.shz-nav-open .shz-nav-toggle .shz-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.shz-nav-open .shz-nav-toggle .shz-nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.shz-nav-open .shz-nav-toggle .shz-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.shz-mobile-nav {
  display: none;
  background: var(--shz-navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.shz-mobile-nav.is-open {
  display: block;
}
.shz-mobile-nav__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--shz-s3);
}
.shz-mobile-nav__menu {
  list-style: none;
  padding-block: var(--shz-s3);
}
.shz-mobile-nav__menu a {
  display: block;
  padding: 0.8rem var(--shz-container-pad);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.0625rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--shz-t-fast);
}
.shz-mobile-nav__menu a:hover {
  color: var(--shz-mint);
  padding-left: calc(var(--shz-container-pad) + 0.5rem);
}

/* ── Main content ───────────────────────────────────────────────────────────── */
.shz-main {
  min-height: 60vh;
  padding-block: var(--shz-s7);
}
.shz-main--sections {
  padding-block: 0;
}
/* A "reveal" header is position:fixed (removed from flow) — plain "sticky"
   still occupies its own space in normal flow and pushes this down for
   free, but reveal mode needs an explicit stand-in or every page's content
   (most visibly a 100vh hero's heading/form) starts underneath the header
   instead of below it (assets/index.js sets --shz-header-height only when
   reveal mode is active, so this is a no-op otherwise). */
#shz-header[data-sticky="reveal"] ~ #shz-main {
  padding-top: var(--shz-header-height, 0px);
}

/* ── Entry / page content ───────────────────────────────────────────────────── */
.shz-entry-header {
  margin-bottom: var(--shz-s6);
}
.shz-entry-title {
  font-size: clamp(2rem, 4vw, 3rem);
}
.shz-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--shz-s3);
  margin-top: var(--shz-s3);
  font-size: 0.875rem;
  color: var(--shz-muted);
}
.shz-cat-badge {
  padding: 0.25em 0.75em;
  background: rgba(215, 38, 133, 0.1);
  color: var(--shz-pink);
  border-radius: var(--shz-r-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shz-featured-image {
  margin-top: var(--shz-s5);
  border-radius: var(--shz-r-xl);
  overflow: hidden;
}
.shz-featured-image img {
  width: 100%;
}

.shz-content > * + * {
  margin-top: 1.3em;
}
.shz-content p {
  line-height: 1.75;
}
.shz-content ul,
.shz-content ol {
  padding-left: 1.5rem;
}
.shz-content li + li {
  margin-top: 0.3em;
}
.shz-content blockquote {
  border-left: 4px solid var(--shz-pink);
  padding-left: 1.25rem;
  padding-block: 0.5rem;
  font-style: italic;
  color: var(--shz-muted);
}
.shz-content a {
  color: var(--shz-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* A real .shz-btn dropped into rich-text content (e.g. the About page's
   "Why Aaron Outdoor Lifestyle" CTA) inherited the generic link treatment
   above instead of looking like a button — confirmed live: white button
   text rendered as an underlined accent-colored link instead. */
.shz-content a.shz-btn {
  color: #fff;
  text-decoration: none;
}
.shz-content code {
  background: var(--shz-surface);
  padding: 0.1em 0.35em;
  border-radius: var(--shz-r-sm);
  font-family: var(--shz-font-mono);
  font-size: 0.875em;
}
.shz-content pre {
  background: var(--shz-navy);
  color: #e2e8f0;
  padding: 1.25rem;
  border-radius: var(--shz-r-lg);
  overflow-x: auto;
}
.shz-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.shz-content hr {
  border: none;
  border-top: 1px solid var(--shz-border);
  margin-block: 2rem;
}

.shz-entry-footer {
  margin-top: var(--shz-s7);
  padding-top: var(--shz-s5);
  border-top: 1px solid var(--shz-border);
}
.shz-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--shz-s5);
}
.shz-post-tags a {
  padding: 0.3em 0.8em;
  border: 1px solid var(--shz-border);
  border-radius: var(--shz-r-full);
  font-size: 0.8125rem;
  color: var(--shz-muted);
  transition: all var(--shz-t-fast);
}
.shz-post-tags a:hover {
  border-color: var(--shz-pink);
  color: var(--shz-pink);
}
.shz-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--shz-s4);
  font-size: 0.9375rem;
}
.shz-post-nav a {
  color: var(--shz-sky);
}
.shz-post-nav a:hover {
  color: var(--shz-pink);
}

/* ── Archive header ─────────────────────────────────────────────────────────── */
.shz-archive-header {
  margin-bottom: var(--shz-s7);
  padding-bottom: var(--shz-s5);
  border-bottom: 1px solid var(--shz-border);
}
.shz-archive-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.shz-archive-description {
  margin-top: var(--shz-s3);
  color: var(--shz-muted);
}
.shz-search-term {
  color: var(--shz-pink);
}

/* ── Post grid ──────────────────────────────────────────────────────────────── */
.shz-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--shz-s6);
}
.shz-post-card {
  display: flex;
  flex-direction: column;
}
.shz-post-card__image {
  border-radius: var(--shz-r-lg) var(--shz-r-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.shz-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--shz-t-slow);
}
.shz-post-card:hover .shz-post-card__image img {
  transform: scale(1.04);
}
.shz-post-card__body {
  flex: 1;
  padding: var(--shz-s5);
  border: 1px solid var(--shz-border);
  border-top: none;
  border-radius: 0 0 var(--shz-r-lg) var(--shz-r-lg);
  transition: box-shadow var(--shz-t-base);
}
.shz-post-card:hover .shz-post-card__body {
  box-shadow: var(--shz-shadow-lg);
  border-color: transparent;
}
.shz-post-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.shz-post-card__cat {
  padding: 0.2em 0.65em;
  background: rgba(215, 38, 133, 0.1);
  color: var(--shz-pink);
  border-radius: var(--shz-r-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shz-post-card__title {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.shz-post-card__title a {
  color: var(--shz-text);
}
.shz-post-card__title a:hover {
  color: var(--shz-pink);
}
.shz-post-card__excerpt {
  font-size: 0.9375rem;
  color: var(--shz-muted);
  line-height: 1.65;
}
.shz-post-card__meta {
  margin-top: var(--shz-s4);
  padding-top: var(--shz-s3);
  border-top: 1px solid var(--shz-border);
  font-size: 0.8125rem;
  color: var(--shz-muted);
  display: flex;
  align-items: center;
  gap: var(--shz-s3);
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.shz-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--shz-s8);
}
.shz-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 0.5rem;
  border: 1px solid var(--shz-border);
  border-radius: var(--shz-r-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--shz-text);
  transition: all var(--shz-t-fast);
}
.shz-pagination .page-numbers:hover {
  border-color: var(--shz-pink);
  color: var(--shz-pink);
}
.shz-pagination .page-numbers.current {
  background: var(--shz-pink);
  border-color: var(--shz-pink);
  color: #fff;
}

/* ── 404 / Not found ────────────────────────────────────────────────────────── */
.shz-not-found {
  text-align: center;
  padding-block: var(--shz-s9);
}
.shz-not-found__code {
  font-size: clamp(5rem, 15vw, 9rem);
  font-family: var(--shz-font-display);
  color: var(--shz-pink);
  line-height: 1;
}
.shz-not-found h1 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: var(--shz-s4);
}
.shz-not-found p {
  color: var(--shz-muted);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--shz-s6);
}

/* ── Search form ────────────────────────────────────────────────────────────── */
.shz-search-form {
  display: flex;
  gap: 0.75rem;
  max-width: 520px;
  margin-inline: auto;
  margin-top: var(--shz-s5);
}
.shz-search-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--shz-border);
  border-radius: var(--shz-r-full);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--shz-t-fast);
  background: var(--shz-white);
  color: var(--shz-text);
}
.shz-search-form input:focus {
  border-color: var(--shz-pink);
}
.shz-search-form button {
  padding: 0.75rem 1.5rem;
  background: var(--shz-pink);
  color: #fff;
  border: none;
  border-radius: var(--shz-r-full);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--shz-t-fast);
}
.shz-search-form button:hover {
  background: var(--shz-pink-hover);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.shz-footer {
  background: var(--shz-navy);
  color: rgba(255, 255, 255, 0.8);
}
.shz-footer__inner {
  display: grid;
  /* --shz-footer-cols is set inline per-site (footer.php) — either the
     admin's explicit "Columns per row" choice, or auto-derived from how
     many Footer Columns (Advanced) entries actually exist. Without this,
     a fixed 2-track template made a 3rd+ configured column silently wrap
     into a new row instead of sharing the same one. */
  grid-template-columns: minmax(220px, 1.5fr) repeat(var(--shz-footer-cols, 2), 1fr);
  align-items: start;
  gap: var(--shz-s7) var(--shz-s8);
  padding-top: var(--shz-s8);
  padding-bottom: var(--shz-s6);
}
@media (max-width: 880px) {
  .shz-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .shz-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .shz-footer__inner {
    grid-template-columns: 1fr;
  }
}
.shz-footer__tagline {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 300px;
}
.shz-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.9375rem;
}
.shz-footer__menu a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--shz-t-fast);
}
.shz-footer__menu a:hover {
  color: var(--shz-mint);
}
.shz-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.shz-footer__copy {
  padding-block: var(--shz-s4);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
.shz-footer__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.5rem;
}
.shz-footer__bottom-row .shz-footer__copy {
  padding-block: var(--shz-s4);
}
.shz-footer__legal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.shz-footer__legal a {
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--shz-t-fast);
}
.shz-footer__legal a:hover {
  color: var(--shz-mint);
}
.shz-footer__legal-sep {
  color: rgba(255, 255, 255, 0.25);
}
.shz-footer__credit {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}
.shz-footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color var(--shz-t-fast);
}
.shz-footer__credit a:hover {
  color: var(--shz-mint);
}

/* Footer brand column — constrained so link columns sit beside it */
.shz-footer__brand {
  max-width: 280px;
  flex-shrink: 0;
}

/* Footer link columns */
.shz-footer__col {
  min-width: 140px;
}
.shz-footer__col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--shz-s4);
}

/* Footer Columns (Advanced) — Text / Contact / CTA / Promo / Custom HTML */
.shz-footer__col-text {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  line-height: 1.6;
}
.shz-footer__contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  line-height: 1.5;
}
.shz-footer__contact a {
  color: inherit;
  text-decoration: none;
}
.shz-footer__contact a:hover {
  color: #fff;
}
.shz-footer__col--cta .shz-btn {
  margin-top: 0.5rem;
}
.shz-footer__promo {
  background: var(--shz-contrast, var(--shz-pink));
  border-radius: var(--shz-r-md);
  padding: var(--shz-s4);
  color: #fff;
}
.shz-footer__promo .shz-footer__col-title,
.shz-footer__promo .shz-footer__col-text {
  color: #fff;
}
.shz-footer__promo-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--shz-r-full);
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.5rem;
}

/* Footer social icons */
.shz-footer__social {
  display: flex;
  gap: var(--shz-s3);
  margin-top: var(--shz-s4);
}
.shz-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--shz-r-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--shz-t-fast);
}
.shz-footer__social-link:hover {
  border-color: var(--shz-mint);
  color: var(--shz-mint);
  background: rgba(142, 202, 178, 0.08);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.shz-card {
  background: var(--shz-white);
  border: 1px solid var(--shz-border);
  border-radius: var(--shz-r-lg);
  padding: var(--shz-s6);
  transition: all var(--shz-t-base);
}
.shz-card:hover {
  box-shadow: var(--shz-shadow-lg);
  border-color: transparent;
  transform: translateY(-3px);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .shz-header__nav {
    display: none;
  }
  .shz-nav-toggle {
    display: flex;
  }
  /* The CTA moves into the mobile drawer (.shz-mobile-nav__cta) instead of
     fighting the logo and phone tap-target for space in the header row. */
  .shz-header__cta {
    display: none;
  }
}
@media (max-width: 640px) {
  /* Safety ceiling: a large custom Header Logo Height (Design → Brand can go
     up to 160px) would otherwise blow out the row now that it shares space
     with the phone tap-target and hamburger on small phones. */
  .shz-header .custom-logo {
    max-height: min(var(--shz-logo-height, 44px), 36px);
  }
  .shz-footer__inner {
    flex-direction: column;
  }
  .shz-post-grid {
    grid-template-columns: 1fr;
  }
  .shz-btn-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .shz-btn-group.shz-centered {
    align-items: center;
  }
  /* Lighten the GPU-expensive header blur on phones for smoother scrolling. */
  .shz-header[data-style="frosted"] {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ── Performance: honour reduced-motion (also a mobile battery/paint win) ────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-shz-anim],
  .shz-anim--fade,
  .shz-anim--slide,
  .shz-anim--zoom {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Header style presets ───────────────────────────────────────────────────── */
.shz-header[data-style="transparent"] {
  background: transparent;
  box-shadow: none;
}
.shz-header[data-style="transparent"].is-scrolled {
  background: var(--shz-navy);
}
.shz-header[data-style="frosted"] {
  background: rgba(var(--shz-navy-rgb), 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.shz-header[data-style="frosted"].is-scrolled {
  background: rgba(var(--shz-navy-rgb), 0.92);
}

/* ── Nav link style presets ─────────────────────────────────────────────────── */
/* "Default" is intentionally plain text — no box, just the color transition
   from the base rule above. "Pill" is the only style with a rounded highlight
   box on hover/current, so the two read as genuinely distinct. */
.shz-nav-menu[data-style="pill"] a {
  border-radius: var(--shz-r-full);
  padding-inline: 1.125rem;
}
.shz-nav-menu[data-style="pill"] a:hover,
.shz-nav-menu[data-style="pill"] .current-menu-item > a {
  background: rgba(255, 255, 255, 0.1);
}
.shz-nav-menu[data-style="underline"] a {
  border-radius: 0;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid transparent;
  background: transparent !important;
}
.shz-nav-menu[data-style="underline"] a:hover,
.shz-nav-menu[data-style="underline"] .current-menu-item > a {
  color: #fff;
  background: transparent !important;
  border-bottom-color: var(--shz-mint);
}

/* ── Footer style presets ───────────────────────────────────────────────────── */
.shz-footer[data-style="light"] {
  background: var(--shz-surface);
  color: var(--shz-text);
}
.shz-footer[data-style="light"] .shz-footer__tagline {
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__menu a {
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__menu a:hover {
  color: var(--shz-pink);
}
.shz-footer[data-style="light"] .shz-footer__bottom {
  border-top-color: var(--shz-border);
}
.shz-footer[data-style="light"] .shz-footer__copy {
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__legal a,
.shz-footer[data-style="light"] .shz-footer__legal-sep {
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__legal a:hover {
  color: var(--shz-pink);
}
.shz-footer[data-style="light"] .shz-footer__credit {
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__credit a:hover {
  color: var(--shz-pink);
}
.shz-footer[data-style="light"] .shz-logo-text {
  color: var(--shz-navy);
}
.shz-footer[data-style="light"] .shz-logo-text:hover {
  color: var(--shz-pink);
}
.shz-footer[data-style="light"] .shz-footer__col-title {
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__social-link {
  border-color: var(--shz-border);
  color: var(--shz-muted);
}
.shz-footer[data-style="light"] .shz-footer__social-link:hover {
  border-color: var(--shz-pink);
  color: var(--shz-pink);
}

.shz-footer[data-style="minimal"] {
  background: transparent;
  border-top: 1px solid var(--shz-border);
  color: var(--shz-text);
}
.shz-footer[data-style="minimal"] .shz-footer__inner {
  padding-block: var(--shz-s5);
  align-items: center;
}
.shz-footer[data-style="minimal"] .shz-footer__tagline {
  color: var(--shz-muted);
}
.shz-footer[data-style="minimal"] .shz-footer__menu a {
  color: var(--shz-muted);
}
.shz-footer[data-style="minimal"] .shz-footer__menu a:hover {
  color: var(--shz-pink);
}
.shz-footer[data-style="minimal"] .shz-footer__bottom {
  display: none;
}
.shz-footer[data-style="minimal"] .shz-logo-text {
  color: var(--shz-text);
}
.shz-footer[data-style="minimal"] .shz-footer__col-title {
  color: var(--shz-muted);
}
.shz-footer[data-style="minimal"] .shz-footer__social-link {
  border-color: var(--shz-border);
  color: var(--shz-muted);
}
.shz-footer[data-style="minimal"] .shz-footer__social-link:hover {
  border-color: var(--shz-pink);
  color: var(--shz-pink);
}

/* ── Primary nav dropdowns (multi-level menus) ──────────────────────────────── */
.shz-nav-menu .menu-item-has-children {
  position: relative;
}
.shz-nav-menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
}
.shz-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border-radius: var(--shz-r-md);
  box-shadow: var(--shz-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--shz-t-fast), transform var(--shz-t-fast),
    visibility var(--shz-t-fast);
  z-index: 200;
}
.shz-nav-menu .menu-item-has-children:hover > .sub-menu,
.shz-nav-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.shz-nav-menu .sub-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--shz-r-sm);
  color: var(--shz-text);
  font-size: 0.9375rem;
  white-space: nowrap;
}
.shz-nav-menu .sub-menu a:hover {
  background: var(--shz-surface);
  color: var(--shz-pink);
}

/* Mobile drawer: show sub-menus inline, indented */
.shz-mobile-nav__menu .sub-menu {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

/* ── Blog: bylines, author box, related, comments ───────────────────────────── */
.shz-byline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.shz-byline__avatar {
  border-radius: var(--shz-r-full);
}
.shz-byline__name {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.shz-byline__name:hover {
  color: var(--shz-pink);
}
.shz-reading-time {
  color: var(--shz-muted);
}
.shz-post-card__meta a {
  color: inherit;
  text-decoration: none;
}
.shz-post-card__meta a:hover {
  color: var(--shz-pink);
}

.shz-author-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--shz-surface);
  border-radius: var(--shz-r-lg);
}
.shz-author-box__avatar {
  flex-shrink: 0;
  border-radius: var(--shz-r-full);
}
.shz-author-box__name {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--shz-text);
  font-weight: 700;
  text-decoration: none;
}
.shz-author-box__name:hover {
  color: var(--shz-pink);
}
.shz-author-box__bio {
  color: var(--shz-muted);
  font-size: 0.925rem;
  line-height: 1.6;
}

.shz-related {
  margin: 2.5rem 0;
}
.shz-related__heading {
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
}
.shz-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.shz-related-card__image {
  display: block;
  margin-bottom: 0.75rem;
  border-radius: var(--shz-r-md);
  overflow: hidden;
}
.shz-related-card__image img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  transition: transform var(--shz-t-base);
}
.shz-related-card:hover .shz-related-card__image img {
  transform: scale(1.04);
}
.shz-related-card__title {
  font-size: 1rem;
  line-height: 1.4;
}
.shz-related-card__title a {
  color: var(--shz-text);
  text-decoration: none;
}
.shz-related-card__title a:hover {
  color: var(--shz-pink);
}
.shz-related-card__meta {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.4rem;
  color: var(--shz-muted);
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .shz-related__grid {
    grid-template-columns: 1fr;
  }
  .shz-author-box {
    flex-direction: column;
  }
}

.shz-comments {
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--shz-border);
}
.shz-comments .comment-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.shz-comments .comment {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--shz-surface);
  border-radius: var(--shz-r-md);
}
.shz-comments .children {
  list-style: none;
  margin: 1rem 0 0 1.5rem;
  padding: 0;
}
.shz-comments .comment-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.shz-comments .comment-author .avatar {
  border-radius: var(--shz-r-full);
}
.shz-comments .comment-metadata {
  font-size: 0.8rem;
}
.shz-comments .comment-metadata a {
  color: var(--shz-muted);
  text-decoration: none;
}
.shz-comments .comment-content {
  margin-top: 0.5rem;
  line-height: 1.6;
}
.shz-comments .reply a {
  font-size: 0.85rem;
  color: var(--shz-pink);
  text-decoration: none;
}
.shz-comments .comment-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.shz-comments .comment-form input[type="text"],
.shz-comments .comment-form input[type="email"],
.shz-comments .comment-form input[type="url"],
.shz-comments .comment-form textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--shz-border);
  border-radius: var(--shz-r-sm);
  background: var(--shz-white);
  color: var(--shz-text);
  font: inherit;
}
.shz-comments .comment-form input:focus,
.shz-comments .comment-form textarea:focus {
  outline: 2px solid var(--shz-pink);
  outline-offset: 1px;
}
.shz-comments .submit {
  padding: 0.65rem 1.5rem;
  background: var(--shz-pink);
  color: #fff;
  border: none;
  border-radius: var(--shz-r-md);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--shz-t-fast);
}
.shz-comments .submit:hover {
  opacity: 0.9;
}

/* ── Header phone (per-page number) ─────────────────────────────────────────── */
.shz-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--shz-mint);
  font-family: var(--shz-font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--shz-r-full);
  padding: 0.5rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  transition: color var(--shz-t-fast), background var(--shz-t-fast), border-color var(--shz-t-fast);
  /* Push the phone (and the CTA after it) flush against the right edge as
     one tight group, instead of .shz-header__inner's space-between spacing
     it evenly between the nav and the CTA — same fix as the mobile pill
     below, just for the desktop row. */
  margin-left: auto;
}
.shz-header__phone:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.shz-header__phone-icon {
  display: inline-flex;
  color: var(--shz-mint);
  font-size: 1.15em;
  line-height: 0;
}
.shz-header__phone-icon svg {
  display: block;
}
.shz-header[data-style="transparent"]:not(.is-scrolled) .shz-header__phone,
.shz-header[data-style="frosted"]:not(.is-scrolled) .shz-header__phone {
  color: #fff;
}
@media (max-width: 900px) {
  .shz-header__phone-number {
    display: none;
  }
  .shz-header__phone {
    font-size: 1.3rem;
    padding: 0.55rem;
    /* margin-left: auto is already set on the base rule above (desktop fix)
       and does the same job here: snaps the phone pill against the
       hamburger toggle on the right instead of landing wherever
       .shz-header__inner's space-between puts it as the lone middle item
       once nav/CTA are hidden. */
  }
}

/* Inline content phone links from [shz_phone] */
.shz-phone {
  color: var(--shz-pink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.shz-phone:hover {
  text-decoration: underline;
}