/**
 * Eclecty Theme Styles
 * Native CSS with nesting. System preference default with manual overrides.
 */

/* ==========================================================================
   Design Tokens - Dark Mode (Default)
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Eclecty Brand Palette */
  --bg: #111313;
  --bg-alt: #0f0f0f;
  --text: #f5f5f5;
  --accent: #ffcc00;
  --border-color: var(--gray-7);

  /* Typography */
  --font-title: 'Sour Gummy', var(--font-handwritten);
  --font-body: 'Roboto Flex', var(--font-sans);

  /* Layout */
  --content-max: 1280px;
  --gutter: var(--size-3);
  --gutter-wide: var(--size-7);

  /* Borders */
  --border-muted: 1px dashed var(--gray-9);
  --border-element: 1px dashed var(--border-color);
  --border-section: 2px dashed var(--border-color);
  --radius: 4px;

  /* Surfaces */
  --surface-1: #121212;
  --surface-2: #2a2a2a;

  /* Shadows */
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.5);

  /* Z-Index Scale */
  --z-header: 900;
  --z-overlay: 999;
  --z-drawer: 1000;

  --mega-cols: 4;
  --drawer-width: 66%;
  --drawer-bg: var(--bg);
  --mega-gap: var(--size-2);
  --drawer-transition: transform 0.3s var(--ease-3);

  --text-muted: var(--gray-5);
  --text-muted-2: var(--gray-4);
  --card-bg: #1a1a1a;
  --code-bg: #1c1c1c;
}

/* ==========================================================================
   Light Mode - System Preference
   ========================================================================== */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #f5f5f5;
    --bg-alt: #e9e9e9;
    --text: #111313;
    --border-color: var(--gray-4);
    --accent: #d4a900;

    --surface-1: #ffffff;
    --surface-2: #f0f0f0;

    --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --text-muted: var(--gray-7);
    --text-muted-2: var(--gray-6);
    --card-bg: #efefef;
    --code-bg: #e8e8e8;

    --border-muted: 1px dashed var(--gray-4);
  }
}

/* ==========================================================================
   Manual Theme Overrides
   ========================================================================== */

[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f5f5;
  --bg-alt: #e9e9e9;
  --text: #111313;
  --border-color: var(--gray-4);
  --accent: #d4a900;

  --surface-1: #ffffff;
  --surface-2: #f0f0f0;

  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --text-muted: var(--gray-7);
  --text-muted-2: var(--gray-6);
  --card-bg: #efefef;
  --code-bg: #e8e8e8;

  --border-muted: 1px dashed var(--gray-4);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111313;
  --bg-alt: #0f0f0f;
  --text: #f5f5f5;
  --accent: #ffcc00;
  --border-color: var(--gray-7);

  --surface-1: #121212;
  --surface-2: #2a2a2a;

  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.5);

  --text-muted: var(--gray-5);
  --text-muted-2: var(--gray-4);
  --card-bg: #1a1a1a;
  --code-bg: #1c1c1c;

  --border-muted: 1px dashed var(--gray-9);
}

/* ==========================================================================
   Color Mix Enhancements
   ========================================================================== */

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --card-bg: color-mix(in srgb, var(--bg) 90%, var(--text) 10%);
    --code-bg: color-mix(in srgb, var(--bg) 85%, var(--text) 15%);
  }

  @media (prefers-color-scheme: light) {
    :root {
      --card-bg: color-mix(in srgb, var(--bg) 95%, var(--text) 5%);
      --code-bg: color-mix(in srgb, var(--bg) 90%, var(--text) 10%);
    }
  }

  [data-theme="light"] {
    --card-bg: color-mix(in srgb, var(--bg) 95%, var(--text) 5%);
    --code-bg: color-mix(in srgb, var(--bg) 90%, var(--text) 10%);
  }

  [data-theme="dark"] {
    --card-bg: color-mix(in srgb, var(--bg) 90%, var(--text) 10%);
    --code-bg: color-mix(in srgb, var(--bg) 85%, var(--text) 15%);
  }
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: var(--font-lineheight-3);
  color: var(--text);
  background-color: var(--bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  line-height: var(--font-lineheight-1);
  margin-block: 0 var(--size-3);
}

h1 {
  font-size: clamp(1.8rem, 1.7rem + 0.85vw, 2rem);
}

h2 {
  font-size: clamp(1.5rem, 1.33rem + 0.85vw, 1.8rem);
}

h3 {
  font-size: clamp(1.2rem, 1.14rem + 0.57vw, 1.5rem);
}

h4 {
  font-size: clamp(1.1rem, 1.07rem + 0.28vw, 1.2rem);
}

h5 {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1rem);
}

h6 {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
}

a {
  color: var(--accent);
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* Screen Reader Text - Accessibility */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

/* ==========================================================================
   Master Grid Skeleton
   ========================================================================== */

.container {
  display: grid;

  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr) [content-start] min(var(--content-max), 100% - var(--gutter-wide)) [content-end] minmax(var(--gutter), 1fr) [full-end];

  grid-template-areas:
    "top top top"
    ". feat ."
    ". hero ."
    ". extra ."
    ". primary ."
    "stream stream stream"
    "inter inter inter"
    ". secondary ."
    ". tertiary ."
    ". cta ."
    "bottom bottom bottom";

  grid-template-rows: auto;

  & .top { grid-area: top; }
  & .hero { grid-area: hero; }
  & .feat { grid-area: feat; }
  & .extra { grid-area: extra; }
  & .primary { grid-area: primary; }
  & .inter { grid-area: inter; }
  & .secondary { grid-area: secondary; }
  & .tertiary { grid-area: tertiary; }
  & .cta { grid-area: cta; }
  & .bottom { grid-area: bottom; }
  & .layout-full { grid-area: primary; }
  & .stream { grid-area: stream; }
}

/* ==========================================================================
   Full-Width Container Override
   When .container has .is-full-width, sections span edge-to-edge
   ========================================================================== */

.container.is-full-width {

  /* Override grid areas to span all columns */
  & .hero,
  & .primary,
  & .layout-full,
  & .stream {
    grid-column: full-start / full-end;
  }

  /* Keep content constrained within full-width sections */
  & .primary .content,
  & .layout-full .content {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

/* ==========================================================================
   Content/Sidebar Split (2fr / 1fr)
   ========================================================================== */

.primary,
.secondary {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: var(--size-fluid-4);
  grid-column: content-start / content-end;
  min-width: 0;

  & > * {
    min-width: 0;
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.secondary .card__title {
  font-size: var(--font-size-fluid-0);
}

/* Sidebar - see "Sidebar & Widgets" section below */

/* ==========================================================================
   Full-Width Layout (No Sidebar)
   ========================================================================== */

.layout-full {
  display: block;

  & .content {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Full-width .primary (no sidebar) */
.container.is-full-width .primary {
  display: block;

  & .content {
    max-width: 900px;
    margin-inline: auto;
  }

  & .sidebar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Primary Grid Layout
   -------------------------------------------------------------------------- */

.primary__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-4);

  /* Grid layout: 2 columns on desktop */
  &.primary__grid--grid {
    grid-template-columns: repeat(2, 1fr);

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  /* List layout: 1 column (default) */
  &.primary__grid--list {
    grid-template-columns: 1fr;
  }

  /* Half + Square cards stay horizontal on mobile */
  & .card--half.card--square {
    flex-direction: row;

    & .card__media {
      width: 40%;
      min-width: 80px;
    }
  }

  /* Hide excerpts and read-more on mobile */
  @media (max-width: 480px) {

    & .card__excerpt,
    & .card__read-more {
      display: none;
    }
  }
}

/* ==========================================================================
   Section Separators
   ========================================================================== */

.feat,
.extra {
  padding-block: var(--size-fluid-1);
}

.hero,
.primary,
.stream,
.inter,
.secondary,
.tertiary,
.cta {
  padding-block: var(--size-fluid-2);
}

/* Section & Widget Titles with Dashed Line */
.primary__title,
.secondary__title,
.extra__title {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  width: 100%;
  white-space: nowrap;

  &::after {
    content: "";
    flex: 1;
    height: 0;
    border-bottom: var(--border-section);
  }
}

.tertiary__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-3);
  width: 100%;
  white-space: nowrap;

  &::before,
  &::after {
    content: "";
    flex: 1;
    height: 0;
    border-bottom: var(--border-section);
  }
}

/* ==========================================================================
   Featured Grid (Hero Section)
   ========================================================================== */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "Feat-1 Feat-1 Feat-2 Feat-4"
    "Feat-1 Feat-1 Feat-3 Feat-5";
  gap: var(--size-1);

  /* Title sizing */
  & .card__title {
    font-size: var(--font-size-1);
  }

  /* Responsive: tablet */
  @media (max-width: 768px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "Feat-1 Feat-1"
      "Feat-2 Feat-4"
      "Feat-3 Feat-5";
  }

  /* Responsive: mobile */
  @media (max-width: 480px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "Feat-1 Feat-1"
      "Feat-1 Feat-1"
      "Feat-2 Feat-3"
      "Feat-4 Feat-5";
  }
}

/* Grid item placement (explicit selectors required for grid-area) */
.feat-grid__item--1 {
  grid-area: Feat-1;
}

.feat-grid__item--2 {
  grid-area: Feat-2;
}

.feat-grid__item--3 {
  grid-area: Feat-3;
}

.feat-grid__item--4 {
  grid-area: Feat-4;
}

.feat-grid__item--5 {
  grid-area: Feat-5;
}

/* Large card has larger title */
.feat-grid__item--1 .card__title {
  font-size: var(--font-size-fluid-1);
}

.feat-grid .card--overlay .card__title,
.feat-grid .card--overlay .card__link,
.feat-grid .card--overlay .card__date {
  color: #fff;
  background: #000;
  padding: 0 5px;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   Overlay Card Base (.card--overlay)
   Shared styles for cards with content overlaid on image
   -------------------------------------------------------------------------- */

.card--overlay {
  position: relative;
  overflow: hidden;

  /* Image fills the entire card */
  & .card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Content overlays at the bottom */
  & .card__content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: var(--size-4);
    color: #fff;
    pointer-events: none;
  }

  /* Allow interactive elements to be clickable */
  & .card__link,
  & .card__read-more {
    pointer-events: auto;
  }

  /* White text for overlay */
  & .card__title,
  & .card__link,
  & .card__date {
    color: #fff;
    text-shadow: 0 0 10px black,
      0 0 10px black,
      0 0 20px black;
  }
}

/* --------------------------------------------------------------------------
   Featured Card (.card--feat)
   Extends overlay base - 1:1 aspect ratio for featured grid
   -------------------------------------------------------------------------- */

.card--feat {
  aspect-ratio: 1 / 1;

  & .card__content {
    align-items: flex-start;
    inset: auto 2px 2px 2px;
    gap: 0;
  }
}

/* ==========================================================================
   Components
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  transition: border-color 0.2s var(--ease-2);
}

/* --------------------------------------------------------------------------
   Layout Modifiers: Full (vertical) vs Half (horizontal)
   -------------------------------------------------------------------------- */

/* Full Layout: Image on top, content below (default) */
.card--full {
  flex-direction: column;
}

/* Half Layout: Image on left, content on right */
.card--half {
  flex-direction: row;
  align-items: center;

  & .card__media {
    flex: 0 0 auto;
    width: 40%;
  }

  & .card__content {
    flex: 1;
    justify-content: center;
  }

  @media (max-width: 480px) {
    flex-direction: row;

    & .card__media {
      width: 100%;
      max-width: none;
    }

    & .card__excerpt,
    & .card__read-more {
      display: none;
    }
  }
}

/* --------------------------------------------------------------------------
   Ratio Modifiers: Landscape (16:9) vs Square (1:1)
   -------------------------------------------------------------------------- */

/* Landscape Ratio: 16:9 aspect */
.card--landscape .card__media {
  aspect-ratio: 16 / 9;
}

/* Square Ratio: 1:1 aspect */
.card--square .card__media {
  aspect-ratio: 1 / 1;
}

/* Portrait Ratio: 3:4 aspect */
.card--portrait .card__media {
  aspect-ratio: 3 / 4;
}

/* Wide Ratio: 21:9 aspect */
.card--wide .card__media {
  aspect-ratio: 21 / 9;
}

/* --------------------------------------------------------------------------
   Combined Layout × Ratio Styles
   -------------------------------------------------------------------------- */

.card--half.card--landscape .card__media,
.card--half.card--square .card__media {
  width: 40%;
}

/* --------------------------------------------------------------------------
   Alternate Card (.card--alt)
   Overlay style with centered content
   -------------------------------------------------------------------------- */

.card--alt {
  /* Default aspect ratio (can be overridden by ratio modifiers) */
  aspect-ratio: 18 / 9;

  /* Centered content */
  & .card__content {
    inset: auto 4px 4px 4px;
    align-items: center;
    text-align: center;
    padding: var(--size-5);
  }

  /* Title comes first visually, category below */
  & .card__title {
    order: 1;
  }

  & .card__category {
    order: 2;
    margin-block-start: var(--size-2);
  }

  & .card__read-more {
    color: var(--accent);
  }
}

/* Alt card ratio overrides - apply to the card itself for overlay effect */
.card--alt.card--landscape {
  aspect-ratio: 16 / 9;
}

.card--alt.card--square {
  aspect-ratio: 1 / 1;
}

.card--alt.card--portrait {
  aspect-ratio: 3 / 4;
}

.card--alt.card--wide {
  aspect-ratio: 21 / 9;
}

/* --------------------------------------------------------------------------
   Media Element
   -------------------------------------------------------------------------- */

.card__media {
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  padding: var(--size-1);
  border: var(--border-muted);
  transition: border-color 0.3s var(--ease-2);

  .card:hover & {
    border-color: var(--border-color);
  }
}

.card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease-2);

  .card:hover & {
    transform: scale(1.03);
  }
}

/* Format Badge (Phosphor Icon) */
.card__badge {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: max-content;
  color: #fff;
  font-size: var(--font-size-6);
  pointer-events: none;

  & i {
    width: 1em;
    height: 1em;
    filter:
      drop-shadow(0 0 2px #fff);

    .card:hover & {
      filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff);
    }
  }
}

/* --------------------------------------------------------------------------
   Content Element
   -------------------------------------------------------------------------- */

.card__content {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-4);
}

/* Category Label */
.card__category {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-body);
  font-size: clamp(0.4rem, 1vw, 0.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.1em 0.3em;
}

/* Title Element */
.card__title {
  font-family: var(--font-title);
  font-size: var(--font-size-fluid-1);
  line-height: var(--font-lineheight-2);
  margin: 0;
}

.card__link {
  color: var(--text);
  transition: color 0.2s var(--ease-2);

  &:hover {
    color: var(--accent);
  }
}

/* Mini card: make entire card clickable via stretched link */
.card--mini {
  position: relative;

  .card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card__media {
    position: relative;
    z-index: 2;
  }
}

/* Date Element */
.card__date {
  font-size: var(--font-size-0);
  color: var(--text-muted);
}

.card__price {
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
}

/* Excerpt Element */
.card__excerpt {
  font-size: var(--font-size-1);
  color: var(--text-muted-2);
  line-height: var(--font-lineheight-3);
  margin: 0;

  /* Line clamp for excerpt */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read More Button */
.card__read-more {
  display: inline-block;
  font-family: var(--font-title);
  font-size: var(--font-size-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-decoration: none;
  margin-block-start: var(--size-2);
  transition: color 0.2s var(--ease-2);

  & i {
    display: inline-block;
    transition: transform 0.2s var(--ease-2);
  }

  &:hover {
    color: var(--text);

    & i {
      transform: translateX(4px);
    }
  }
}

/* --------------------------------------------------------------------------
   Mini Card Preset
   -------------------------------------------------------------------------- */

.card--mini {
  border: none;
  background: transparent;
  gap: 0;

  & .card__media {
    flex: 0 0 60px;
    max-width: 60px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
  }

  & .card__content {
    padding: var(--size-2) var(--size-3);
    justify-content: center;
    gap: var(--size-1);
  }

  & .card__title {
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-2);
  }

  &:hover {
    border-color: transparent;
  }

  & .card__badge {
    transform: scale(0.6);
  }
}

/* ==========================================================================
   Responsive Embeds (Videos, iframes)
   ========================================================================== */

.wp-block-embed,
.wp-block-video,
.wp-embed-responsive .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
}

/* Video embeds - base styles */
.wp-block-embed iframe,
.wp-block-embed video,
.wp-block-video video {
  width: 100%;
  display: block;
  border-radius: var(--radius);
}

/* 16:9 aspect ratio only for video providers: YouTube, Vimeo, Dailymotion */
.wp-block-embed-youtube iframe,
.wp-block-embed-vimeo iframe,
.wp-block-embed-dailymotion iframe,
.wp-block-video video {
  height: auto;
  aspect-ratio: 16 / 9;
}

.wp-block-embed-spotify iframe[src*="/embed/track/"] {
  height: 152px;
}

.wp-block-embed-mixcloud iframe[src*="mixcloud.com/widget/iframe"] {
  height: 120px;
}

/* Fallback for older browsers using padding-bottom trick */
@supports not (aspect-ratio: 16 / 9) {

  .wp-block-embed-youtube .wp-block-embed__wrapper,
  .wp-block-embed-vimeo .wp-block-embed__wrapper,
  .wp-block-embed-dailymotion .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
  }

  .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
  .wp-block-embed-vimeo .wp-block-embed__wrapper iframe,
  .wp-block-embed-dailymotion .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Caption styling */
.wp-block-embed figcaption,
.wp-block-video figcaption {
  color: var(--text-muted);
  font-size: var(--font-size-0);
  margin-block-start: var(--size-2);
  text-align: center;
}

/* ==========================================================================
   Site Header (Full-Bleed 3-Row Structure)
   ========================================================================== */

.top {
  background: var(--bg);
  border-block-end: var(--border-section);

  @media (max-width: 768px) {
    border-block-end: var(--border-element);
  }
}

/* --------------------------------------------------------------------------
   Topbar (Row 1)
   -------------------------------------------------------------------------- */

.topbar {
  border-block-end: 1px dashed var(--gray-9);
  padding-block: var(--size-1);
  background: #111313;
  color: #f5f5f5;

  & .topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  & .topbar__label {
    font-size: var(--font-size-0);
    font-weight: 700;
    color: var(--gray-5);
    cursor: pointer;
    transition: color 0.2s var(--ease-2);
    display: inline-flex;
    align-items: center;

    &:hover {
      color: var(--accent);
    }
  }

  & .topbar__social {
    display: flex;
    gap: var(--size-1);

    & .social-icons a {
      font-size: var(--font-size-3);
      color: var(--gray-5);

      &:hover {
        color: var(--icon-brand);
      }
    }
  }
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  padding-block: var(--size-fluid-2);

  & .masthead__inner {
    display: flex;
    justify-content: center;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  & .masthead__logo-link {
    display: inline-block;
    text-decoration: none;
  }

  & .masthead__logo {
    max-height: 80px;
    width: auto;
    filter: invert(0);
  }

  & .masthead__site-name {
    font-family: var(--font-title);
    font-size: var(--font-size-fluid-2);
    color: var(--accent);
  }
}

/* Light mode logo invert */
[data-theme="light"] .masthead__logo {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
  border-block-start: var(--border-muted);
  position: relative;

  @media (max-width: 768px) {
    padding-block: var(--size-3);
  }

  & .navbar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--size-6);
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
  }

  & .navbar__actions {
    display: flex;
    gap: var(--size-1);
    position: absolute;
    right: var(--gutter);

    font-size: var(--font-size-3);
  }

  /* Progress Bar */
  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(var(--scroll-progress, 0));
    transition: transform 0.05s linear;
    opacity: 0;
    pointer-events: none;
  }
}

/* Menu needs explicit selector for list styling */
.navbar__menu {
  & :where(ul) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--size-4);
  }

  & :where(a) {
    color: var(--text);
    font-weight: var(--font-weight-5);
    transition: color 0.2s var(--ease-2);

    &:hover {
      color: var(--accent);
    }
  }

  /* Match wrapper styles to standard links */
  & .menu-item-wrapper {
    display: flex;
    align-items: center;
    padding: var(--size-2) var(--size-3);
    height: 100%;
    color: var(--text);
    font-weight: var(--font-weight-5);
    transition: color 0.2s var(--ease-2);
    cursor: pointer;

    &:hover {
      color: var(--accent);
    }

    & a {
      padding: 0;
      color: inherit;
      height: 100%;
      display: flex;
      align-items: center;

      &:hover {
        color: inherit;
      }
    }

    & .toggle-sub {
      margin-inline-start: 4px;

      & i {
        transition: transform 0.3s var(--ease-2);
      }

      &[aria-expanded="true"] i {
        transform: rotate(135deg);
      }
    }

    @media (max-width: 768px) {
      padding: var(--size-1) 0;
    }

  }
}

/* ==========================================================================
   Icon Button Base (.btn-icon)
   Circular button with glow effect on hover. Works with both:
   - Stroke icons (.ph): single-layer with --ph-stroke
   - Duotone icons (.ph-duotone): two-layer with ::before (fill) and ::after (stroke)
   ========================================================================== */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.25em;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s var(--ease-2);
  --icon-brand: var(--accent);

  /* Glow pseudo-element */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--icon-brand);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  &:hover {
    color: var(--icon-brand);

    &::before {
      opacity: 0.15;
    }
  }

  /* Icon sizing (works for both .ph and .ph-duotone) */
  & i {
    position: relative;
    z-index: 1;
    width: 0.85em;
    height: 0.85em;
  }
}

/* Brand color variants */
.btn-icon[data-social="facebook"] { --icon-brand: #1877f2; }
.btn-icon[data-social="twitter"] { --icon-brand: #00a8ff; }
.btn-icon[data-social="instagram"] { --icon-brand: #d32dbf; }
.btn-icon[data-social="youtube"] { --icon-brand: #ff0000; }
.btn-icon[data-social="threads"] { --icon-brand: #e93365; }
.btn-icon[data-social="tiktok"] { --icon-brand: #25f4ee; }
.btn-icon[data-social="whatsapp"] { --icon-brand: #25d366; }
.btn-icon[data-social="telegram"] { --icon-brand: #0088cc; }
.btn-icon[data-social="messenger"] { --icon-brand: #0084ff; }
.btn-icon[data-social="email"] { --icon-brand: var(--accent); }
.drawer-close { --icon-brand: #ff0000; }

/* Theme Toggle */
.theme-toggle {
  --icon-brand: #ffffff;
  overflow: hidden;

  & .icon-sun,
  & .icon-moon {
    animation: var(--animation-slide-in-up) forwards;
  }

  & .icon-sun {
    display: block;
  }

  & .icon-moon {
    display: none;
  }
}

[data-theme="light"] .theme-toggle {
  --icon-brand: #8b5cf6;

  & .icon-sun {
    display: none;
  }

  & .icon-moon {
    display: block;
  }
}

/* User Icon */
.user-toggle {
  --icon-brand: var(--accent);
}

.user-toggle__avatar {
  position: relative;
  z-index: 1;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  object-fit: cover;
}

/* Search Icon */
.search-toggle {
  --icon-brand: var(--accent);
}

/* Cart Icon */
.cart-icon {
  --icon-brand: var(--accent);
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: var(--accent);
  color: var(--bg);
  border-radius: 9px;
  z-index: 2;
}

/* Menu Toggle - Always visible (opens side panel) */
.menu-toggle {
  --icon-brand: var(--accent);
}

/* --------------------------------------------------------------------------
   Navbar Sticky Behavior
   -------------------------------------------------------------------------- */

/* Sticky logo - hidden by default */
.navbar__logo-link {
  display: none;
}

.navbar__logo {
  height: 30px;
  width: auto;
  filter: invert(0);
}

.navbar__site-name {
  color: var(--accent);
  display: inline-block;
  font-family: var(--font-title);
  font-size: var(--font-size-2);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

[data-theme="light"] .navbar__logo {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   Slide-in Drawer (All Viewports)
   -------------------------------------------------------------------------- */

/* Drawer section base styles */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--size-4);
  margin-block-end: var(--size-4);
  border-block-end: var(--border-muted);
}

.drawer-header__logo-link {
  display: flex;
  align-items: center;
}

.drawer-header__logo {
  height: 32px;
  width: auto;
  filter: invert(0);
}

[data-theme="light"] .drawer-header__logo {
  filter: invert(1);
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;

  & i {
    font-size: var(--font-size-5);
  }
}

.drawer-search {
  padding-block-end: var(--size-4);
}

/* Drawer Search - WordPress Search Block overrides */
.drawer-search .wp-block-search__inside-wrapper {
  border: var(--border-muted);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.drawer-search .wp-block-search__input {
  padding: var(--size-2) var(--size-3);
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--font-size-1);

  &::placeholder {
    color: var(--text-muted);
  }
}

.drawer-search .wp-block-search__button {
  background: var(--accent);
  color: var(--bg);

  &:hover {
    opacity: 0.9;
  }
}

.drawer-footer {
  margin-block-start: auto;
  padding-block-start: var(--size-4);
  border-block-start: var(--border-muted);
}

.drawer-footer .social-icons {
  justify-content: center;
}

/* Desktop: Hide drawer sections by default, show when nav-open */
/* --------------------------------------------------------------------------
   Site Drawer (Unified for Mobile & Desktop)
   -------------------------------------------------------------------------- */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 70vw;
  max-width: 400px;
  height: 100vh;
  height: 100dvh;
  background: var(--drawer-bg);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;

}

.drawer-header {
  padding: var(--size-6) var(--size-4) var(--size-4);
  flex-shrink: 0;
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--size-4) var(--size-6);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .drawer {
    width: 20vw;
    max-width: none;
    min-width: 300px;
  }
}

/* Open States */
body.nav-open .site-drawer,
body.cart-open .cart-drawer {
  transform: translateX(0);
}

/* Toggle buttons always visible in drawer */
.site-drawer .toggle-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  min-width: 44px;
  height: auto;
  background: var(--surface-1);

  & i {
    font-size: var(--font-size-3);
  }
}

.site-drawer .toggle-sub[aria-expanded="true"] i {
  transform: rotate(45deg);
}


/* Drawer Navigation Layout - High Specificity to override global .primary-nav settings */
.site-drawer .drawer-nav {
  & .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: flex;
  }

  & .menu-item {
    border-bottom: var(--border-muted);

    &>a {
      padding: var(--size-3) 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      color: var(--text);
      width: 100%;

      &:hover {
        color: var(--accent);
      }
    }
  }

  & .menu-item-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;

    &>a {
      flex: 1 1 0%;
      padding: var(--size-3) 0;
      min-width: 0;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: var(--text);

      &:hover {
        color: var(--accent);
      }
    }
  }
}

/* Overlay backdrop */
body.nav-open::before,
body.cart-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  /* Higher than Navbar (900), Lower than Drawer (1000) */
  animation: fadeIn 0.3s ease;
}

/* Prevent body scroll & compensate scrollbar */
body.nav-open,
body.cart-open {
  overflow: hidden !important;
  /* !important used to prevent filters block body set to "auto" */
  padding-right: var(--scrollbar-width, 0px);
}


/* Clean up styling for drawer submenus */
.site-drawer .drawer-nav .sub-menu .menu-item>a {
  padding-left: var(--size-4);
  border-bottom: none;
  font-size: var(--font-size-0);
}

/* Desktop: Ensure Horizontal Menu is Visible */
@media (min-width: 769px) {
  .navbar__menu {
    display: block;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Sticky Navbar Styling
   ========================================================================== */

/* Desktop Logic */
@media (min-width: 769px) {

  /* Default: Hide Logo (only show when stuck) */
  .navbar:not(.is-stuck) .navbar__logo-link {
    display: none;
  }

  /* Stuck State (Triggered by JS) */
  .navbar.is-stuck {
    background-color: var(--bg);
    transition: padding 0.2s ease, background-color 0.2s ease;
  }

  /* Layout: Center Menu, Absolute Logo */
  .navbar.is-stuck .navbar__inner {
    position: relative;
    justify-content: center;
  }

  .navbar.is-stuck .navbar__logo-link {
    display: block;
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 10;
    animation: fadeIn 0.4s ease forwards;
  }

  .navbar.is-stuck .navbar__logo {
    height: 32px;
    width: auto;
  }

  /* Progress Bar - show only when stuck on desktop */
  .navbar.is-stuck::after {
    opacity: 1;
  }
}

/* Mobile Logic */
@media (max-width: 768px) {

  /* Ensure background exists on mobile as it sticks */
  .navbar {
    background-color: var(--bg);
    z-index: 900;
    /* Lower than overlay (999) */
  }

  /* Progress bar always visible on mobile (navbar is always stuck) */
  .navbar.is-stuck::after {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Responsive: Mobile Header
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .topbar {
    display: none;
  }

  .masthead {
    display: none;
  }

  .navbar {
    position: static;
    padding-block: var(--size-2);
  }

  .navbar__inner {
    justify-content: center;
  }

  /* Show sticky logo centered on mobile */
  .navbar__logo-link {
    display: flex;
    align-items: center;
    position: static;
  }

  .navbar__logo {
    height: 30px;
  }

  .navbar__menu {
    display: none;
  }

  .site-drawer .theme-toggle {
    display: none;
  }

  .navbar__actions .search-toggle {
    display: none;
  }

  .navbar__actions {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    justify-content: flex-end;
    pointer-events: none;
  }

  .navbar__actions > * {
    pointer-events: auto;
  }

  .navbar__actions .cart-toggle {
    order: -1;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Social Icons (shared between header and footer)
   -------------------------------------------------------------------------- */

.social-icons {
  display: flex;
  gap: var(--size-1);
  font-size: var(--font-size-4);
}

/* ==========================================================================
   Share Buttons
   ========================================================================== */


.share-buttons {
  display: flex;
  justify-content: center;
  margin-block: var(--size-5);
}

.share-buttons__content {
  display: flex;
  align-items: center;
  position: relative;
  /* Context for absolute label positioning */
}

.share-buttons__label {
  font-family: var(--font-title);
  font-size: var(--font-size-2);
  color: var(--border-color);

  /* Desktop: Positioned to the left without affecting centering of the icons */
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--size-4);
  white-space: nowrap;
}

.share-buttons__icons {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  font-size: var(--font-size-4);
}

/* Brand colors for share buttons */
.share-buttons__icons [data-social="facebook"] { --icon-brand: #0866ff; }
.share-buttons__icons [data-social="twitter"] { --icon-brand: #00a8ff; }
.share-buttons__icons [data-social="whatsapp"] { --icon-brand: #25d366; }
.share-buttons__icons [data-social="telegram"] { --icon-brand: #2aabee; }
.share-buttons__icons [data-social="messenger"] { --icon-brand: #006aff; }
.share-buttons__icons [data-social="email"] { --icon-brand: var(--text); }
.share-buttons__icons .share-copy-btn { --icon-brand: var(--accent); }

/* Pulse Animation for Copy Button */
@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.share-buttons__icons .share-copy-btn.is-copied {
  animation: buttonPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #00e676;
}

.share-buttons__icons .share-copy-btn.is-copied::before {
  background: #00e676;
  opacity: 0.2;
}

/* Mobile: Stack label on top of buttons */
@media (max-width: 768px) {
  .share-buttons__content {
    flex-direction: column;
    text-align: center;
  }

  .share-buttons__label {
    position: static;
    transform: none;
    margin-right: 0;
    margin-bottom: var(--size-2);
  }
}


/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-3), transform 0.6s var(--ease-3);
}

[data-reveal][data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

aside.sidebar[data-reveal] {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  padding-block: var(--size-fluid-1);
  text-align: center;
}

/* ==========================================================================
   Extra Section
   ========================================================================== */

.extra__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--size-4);

  /* Extra cards use same overlay pattern as .card--overlay */
  & .card--full.card--square {
    position: relative;
    aspect-ratio: 1 / 1;

    & .card__media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    & .card__content {
      position: absolute;
      inset: auto 0 0 0;
      z-index: 1;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
      background: linear-gradient(to top, oklch(0 0 0 / 0.85) 0%, oklch(0 0 0 / 0) 100%);
      padding: var(--size-4);
      pointer-events: none;
    }

    & .card__link {
      pointer-events: auto;
    }

    & .card__title {
      font-size: var(--font-size-3);
    }

    & .card__title,
    & .card__link,
    & .card__date,
    & .card__category {
      color: #fff;
    }
  }

  /* Mobile: Mini cards */
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
    gap: var(--size-2);

    & .card--full.card--square {
      aspect-ratio: unset;
      flex-direction: row;
      align-items: center;

      & .card__media {
        position: relative;
        width: 80px;
        height: 80px;
        flex-shrink: 0;
      }

      & .card__content {
        position: relative;
        inset: unset;
        background: none;
        padding: var(--size-2);
      }

      & .card__title {
        font-size: var(--font-size-1);
      }

      & .card__title,
      & .card__link,
      & .card__date,
      & .card__category {
        color: var(--text);
      }

      & .card__excerpt,
      & .card__read-more {
        display: none;
      }
    }
  }
}

.extra__title {
  margin-block-end: var(--size-4);
}


/* ==========================================================================
   Secondary Section
   ========================================================================== */

.secondary {
  & .secondary__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--size-4);

    /* Grid layout: 2 columns on desktop */
    &.secondary__grid--grid {
      grid-template-columns: repeat(2, 1fr);

      @media (max-width: 600px) {
        grid-template-columns: 1fr;
      }
    }

    /* List layout: 1 column */
    &.secondary__grid--list {
      grid-template-columns: 1fr;
    }

    /* Mobile: Mini cards */
    @media (max-width: 480px) {
      gap: var(--size-2);

      & .card {
        flex-direction: row;
        align-items: center;

        & .card__media {
          width: 80px;
          height: 80px;
          flex-shrink: 0;
        }

        & .card__content {
          padding: var(--size-2);
        }

        & .card__title {
          font-size: var(--font-size-1);
        }

        & .card__excerpt,
        & .card__read-more {
          display: none;
        }
      }
    }
  }

  & .secondary__title {
    margin-block-end: var(--size-4);
  }
}

/* ==========================================================================
   Tertiary Section
   ========================================================================== */

.tertiary {
  text-align: center;

  & .tertiary__title {
    margin-block-end: var(--size-5);
  }

  & .tertiary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--size-4);
  }
}

/* ==========================================================================
   CTA Section (Pre-Footer)
   ========================================================================== */

.cta {
  border-block-end: none;

  & .cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-5);
    padding: var(--size-fluid-4);
    border: var(--border-section);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg) 90%);

    @media (max-width: 768px) {
      flex-direction: column;
      text-align: center;
    }
  }

  & .cta__title {
    margin: 0;
    font-size: var(--font-size-4);
  }

  & .cta__text {
    margin: var(--size-2) 0 0;
    color: var(--gray-5);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-5);
  font-family: var(--font-title);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-6);
  color: var(--bg);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease-2), color 0.2s var(--ease-2);


  &:hover {
    background: transparent;
    color: var(--accent);
    text-decoration: none;
  }

}

.btn--large {
  padding: var(--size-3) var(--size-7);
  font-size: var(--font-size-2);
}

.btn--outline {
  background: transparent;
  color: var(--accent);

  &:hover {
    background: var(--accent);
    color: var(--bg);
  }
}

.btn.is-loading {
  opacity: 0.8;
  pointer-events: none;
}

/* ==========================================================================
   Single Post Hero Variants
   ========================================================================== */

/* Stream posts container */
.stream {
  grid-area: stream;
  display: flex;
  flex-direction: column;
  gap: var(--size-fluid-1);
}

/* Single post article - now a grid container for full-width capability */
article.single-post {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] min(var(--content-max), 100% - var(--gutter-wide)) [content-end] minmax(var(--gutter), 1fr) [full-end];

  /* Edge-to-Edge Separator */
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--size-fluid-4);
}

/* Ensure Hero spans full width */
article.single-post>header.hero {
  grid-column: full-start / full-end;
  grid-row: 1;
  position: relative;
  width: 100%;
}

/* Medium Hero: Constrained to content width */
article.single-post.single-post--hero-medium>header.hero {
  grid-column: content-start / content-end;
}

/* Primary content stays centered */
article.single-post>.single-post__body {
  grid-column: content-start / content-end;
  position: relative;
}

/* Enforce stacking for Medium/Large (where header is sibling) */
article.single-post:not(.single-post--hero-small)>.single-post__body {
  grid-row: 2;
}

/* Allow full-width override on body if needed */
article.single-post>.single-post__body.layout-full {
  grid-column: full-start / full-end;
}

/* --------------------------------------------------------------------------
   Single Post Hero Header (for Medium/Large variants)
   -------------------------------------------------------------------------- */

header.hero.single-hero {
  border-radius: var(--radius);
}

/* Large hero spans full width with no border radius */
.single-post--hero-large header.hero.single-hero {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Single Post Body Section
   -------------------------------------------------------------------------- */

.single-post__body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "content sidebar";
  column-gap: var(--size-fluid-4);
  row-gap: var(--size-fluid-1);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "sidebar";
  }
}

.single-post__body .entry-content {
  grid-area: content;
  min-width: 0;
  /* Prevent grid blowout from wide content */
}

.single-post__body .sidebar {
  grid-area: sidebar;
}

.single-post__body.layout-full {
  display: block;

  & .entry-content {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Variant 1: Small - Hero inside body section with sidebar
   -------------------------------------------------------------------------- */

.single-post--hero-small .single-post__body.primary {
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "hero sidebar"
    "content sidebar";

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "content"
      "sidebar";
  }
}

.single-post--hero-small .single-post__hero {
  grid-area: hero;
}

/* Fixed-height audio embeds need the small-hero grid row locked to the iframe height on desktop. */
.single-post--hero-small .single-post__body.primary:has(.single-post__hero .wp-block-embed-spotify iframe[src*="/embed/track/"]) {
  --small-hero-embed-height: 152px;
  grid-template-rows: var(--small-hero-embed-height) auto;
}

.single-post--hero-small .single-post__body.primary:has(.single-post__hero .wp-block-embed-mixcloud iframe[src*="mixcloud.com/widget/iframe"]) {
  --small-hero-embed-height: 120px;
  grid-template-rows: var(--small-hero-embed-height) auto;
}

/* Hide empty hero container */
.single-post__hero:empty {
  display: none;
}

/* When hero is hidden, use simpler grid without hero row */
.single-post--hero-small .single-post__body.primary:not(:has(.single-post__hero:not(:empty))) {
  grid-template-areas: "content sidebar";

  @media (max-width: 768px) {
    grid-template-areas:
      "content"
      "sidebar";
  }
}

/* --------------------------------------------------------------------------
   Variant 2: Medium - Contained hero as grid child
   -------------------------------------------------------------------------- */

/* Shared styles for Medium & Large hero body layouts */
.single-post--hero-medium .single-post__body,
.single-post--hero-large .single-post__body {
  grid-template-columns: 2fr 1fr;
  gap: var(--size-fluid-4);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.single-post--hero-medium .entry-content,
.single-post--hero-large .entry-content {
  grid-column: 1;
}

.single-post--hero-medium .sidebar,
.single-post--hero-large .sidebar {
  grid-column: 2;
  grid-row: 1 / -1;

  @media (max-width: 768px) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   Hero Height Cropping (Medium & Large)
   When --hero-height is set, crop the hero to that viewport height
   -------------------------------------------------------------------------- */

.single-hero[style*="--hero-height"] {
  height: var(--hero-height);
  overflow: hidden;

  & .single-hero__inner {
    height: 100%;
  }

  & .single-hero__image {
    height: 100%;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* --------------------------------------------------------------------------
   Variant 3: Large - Full-bleed hero
   -------------------------------------------------------------------------- */

/* Image fills the hero width */
.single-hero--large .single-hero__image {
  width: 100%;
}

/* Inner wrapper - no constraints for Large hero by default */
.single-hero--large .single-hero__inner {
  width: 100%;
}

/* Image fills full width */
.single-hero--large .single-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Post Cards & Meta
   ========================================================================== */

.post-thumbnail {
  margin-block-end: var(--size-3);
  border-radius: var(--radius);
  overflow: hidden;

  & img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s var(--ease-3);
  }

  &:hover img {
    transform: scale(1.05);
  }
}

.post-title {
  margin-block-end: var(--size-2);
}



.post-excerpt {
  color: var(--text-muted-2);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  justify-content: center;
  margin-block-start: var(--size-5);

  & a,
  & span:not(.current):not(.dots) {
    padding: var(--size-2) var(--size-4);
    border: var(--border-muted);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--text);
    transition: background 0.2s var(--ease-2),
      border-color 0.2s var(--ease-2),
      color 0.2s var(--ease-2);
    text-decoration: none;

    &:hover {
      background: var(--bg);
      border-color: var(--border-color);
      color: var(--text);
    }
  }

  & .current {
    padding: var(--size-2) var(--size-4);
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-weight: var(--font-weight-6);
  }

  & .prev,
  & .next {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
  }

  & .dots {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: var(--size-2) var(--size-1);
  }

  [data-theme="light"] & {

    & a,
    & span:not(.current):not(.dots) {
      background: var(--gray-1);
      border-color: var(--gray-3);

      &:hover {
        background: var(--gray-2);
        border-color: var(--gray-5);
      }
    }
  }
}

/* AJAX Pagination Container */
.pagination-ajax {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  margin-block-start: var(--size-5);
}

/* Load More Button */
.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-3) var(--size-6);
  background: var(--bg-alt);
  border: var(--border-muted);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: var(--font-weight-5);
  height: 4em;
  cursor: pointer;
  transition: background 0.2s var(--ease-2), border-color 0.2s var(--ease-2);

  &:hover {
    background: var(--bg);
    border-color: var(--border-color);
  }

  &__spinner {
    animation: spin 1s linear infinite;
  }

  &.is-loading {
    pointer-events: none;
    opacity: 0.8;
  }

  [data-theme="light"] & {
    background: var(--gray-1);
    border-color: var(--gray-3);

    &:hover {
      background: var(--gray-2);
      border-color: var(--gray-5);
    }
  }
}

/* Infinite Scroll Loader */
.infinite-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
  padding: var(--size-4);
  color: var(--text-muted);

  & .loader-spin {
    font-size: calc(var(--font-size-4) * 1.5);
    animation: spin 1s linear infinite;
    color: var(--accent);
  }

  & span {
    font-size: var(--font-size-1);
  }
}

.infinite-loader--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.infinite-loader--dim {
  background: rgba(0, 0, 0, 0.2);
}

/* Infinite Scroll Sentinel (invisible trigger) */
.infinite-sentinel {
  height: 1px;
  width: 100%;
}

/* Page Marker for history state tracking (invisible but trackable) */
.page-marker {
  border: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

/* End Message */
.infinite-end {
  text-align: center;
  padding: var(--size-4);
  color: var(--text-muted);
  font-size: var(--font-size-0);
}

/* Error State */
.infinite-error {
  text-align: center;
  padding: var(--size-4);
  margin-block-start: var(--size-4);

  & p {
    margin-block-end: var(--size-2);
    color: var(--text-muted);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Sidebar & Widgets
   ========================================================================== */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  align-self: start;
  background: oklch(0 0 0 / 0.05);
  position: sticky;
  top: calc(50px + var(--size-4));
  /* Navbar height + spacing */

  & .widget {
    padding: var(--size-4);
  }

  & .card {
    border: none;
    background: transparent;
    border-radius: var(--radius);
  }

  @media (max-width: 768px) {
    margin-block-start: var(--size-6);
    position: static;
  }
}

/* Widget Base */
.widget {
  & .widget-title {
    font-size: var(--font-size-2);
    margin-block-end: var(--size-3);
    padding-block-end: var(--size-2);
    color: var(--text);
    text-align: center;
  }

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  & li {
    padding-block: var(--size-2);
    border-block-end: var(--border-element);

    &:last-child {
      border-block-end: none;
    }
  }

  & a {
    color: var(--text);

    &:hover {
      color: var(--accent);
    }
  }
}

/* Search Widget */
.widget_search {
  & .search-form {
    display: flex;
    gap: var(--size-2);
  }

  & .search-field {
    flex: 1;
    padding: var(--size-2) var(--size-3);
    border: var(--border-element);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-size-1);

    &:focus {
      outline: none;
      border-color: var(--accent);
    }
  }

  & .search-submit {
    padding: var(--size-2) var(--size-4);
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-title);
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition: opacity 0.2s var(--ease-2);

    &:hover {
      opacity: 0.9;
    }
  }
}

/* Categories & Archives Widget */
.widget_categories,
.widget_archive {
  & li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & .count,
  & .post-count {
    font-size: var(--font-size-0);
    color: var(--text-muted);
  }
}

/* Recent Posts Widget */
.widget_recent_entries {
  & .post-date {
    display: block;
    font-size: var(--font-size-0);
    color: var(--text-muted);
    margin-block-start: var(--size-1);
  }
}

/* Text Widget */
.widget_text {
  & p {
    color: var(--text-muted);
    line-height: var(--font-lineheight-3);

    &:last-child {
      margin-block-end: 0;
    }
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bottom {
  padding-block: var(--size-fluid-2);
  margin-block-start: var(--size-8);
  border-block-start: var(--border-section);
  background: var(--bg-alt);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--gutter);

  & h4 {
    font-size: var(--font-size-1);
    margin-block-end: var(--size-3);
    color: var(--text);
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--size-4);
  }
}

.footer__col {
  min-width: 0;
  padding: var(--size-7);

  /* Border only on desktop */
  @media (min-width: 769px) {
    border-right: var(--border-muted);

    &:last-child {
      border-right: none;
    }
  }

  & .widget {
    margin-block-end: var(--size-4);

    &:last-child {
      margin-block-end: 0;
    }
  }

  & .widget-title {
    font-size: var(--font-size-1);
    margin-block-end: var(--size-3);
    color: var(--text);
  }

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  & li {
    padding-block: var(--size-1);
  }

  & a {
    color: var(--text-muted);
    transition: color 0.2s var(--ease-2);

    &:hover {
      color: var(--accent);
    }
  }
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-4);
  padding-block-start: var(--size-6);
  border-block-start: var(--border-muted);
  text-align: center;
}

.footer__logo {
  max-height: 60px;
  width: auto;
  filter: invert(0);
}

[data-theme="light"] .footer__logo {
  filter: invert(1);
}

.footer__copyright {
  font-size: var(--font-size-0);
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404 {
  text-align: center;
  padding-block: var(--size-fluid-6);
}

.error-code {
  font-family: var(--font-title);
  font-size: clamp(6rem, 5rem + 5vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
  margin-block-end: var(--size-4);
}

.error-title {
  margin-block-end: var(--size-4);
}

.error-message {
  max-width: 500px;
  margin-inline: auto;
  margin-block-end: var(--size-6);
  color: var(--text-muted);
}

.error-actions {
  margin-block-end: var(--size-8);
}

.error-search {
  max-width: 400px;
  margin-inline: auto;
  margin-block-end: var(--size-6);
  text-align: left;
}

.error-suggestions {
  max-width: 400px;
  margin-inline: auto;
  text-align: left;

  & ul {
    list-style: none;
    padding: 0;
    margin: var(--size-3) 0 0;
  }

  & li {
    padding-block: var(--size-2);
    border-block-end: var(--border-element);
  }
}

/* ==========================================================================
   Search Page
   ========================================================================== */

.search-header {
  margin-block-end: var(--size-5);
}

.search-title {
  margin-block-end: var(--size-4);

  & span {
    color: var(--accent);
  }
}

.search-form-wrap {
  max-width: 500px;
}

.search-count {
  color: var(--text-muted);
  margin-block-end: var(--size-4);
}

.post-type-badge {
  display: inline-block;
  font-size: var(--font-size-00);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-block-end: var(--size-2);
}

/* ==========================================================================
   Archive Page
   ========================================================================== */

.archive-header {
  margin-block-end: var(--size-5);
}

.archive-title {
  margin-block-end: var(--size-2);
}

.archive-description {
  color: var(--text-muted);
  max-width: 600px;
}

/* ==========================================================================
   Single Post & Page
   ========================================================================== */

article.single-post,
.page-content {
  border: none;
  background: transparent;
  padding: 0;
}

.featured-image {
  margin-block-end: var(--size-5);
  border-radius: var(--radius);
  overflow: hidden;

  & img {
    width: 100%;
    height: auto;
  }
}

.entry-header {
  padding-block-end: var(--size-2);
}

.entry-title {
margin-block: var(--size-2);
}

.entry-content {
  line-height: var(--font-lineheight-4);
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;

  & p {
    margin-block-end: var(--size-4);
  }

  & h2,
  & h3,
  & h4 {
    margin-block: var(--size-6) var(--size-3);
  }

  & ul,
  & ol {
    margin-block-end: var(--size-4);
    padding-inline-start: var(--size-5);
  }

  & blockquote {
    margin: var(--size-5) 0;
    padding: var(--size-4);
    border-inline-start: 4px solid var(--accent);
    background: var(--card-bg);
    font-style: italic;
  }

  & pre {
    margin-block-end: var(--size-4);
    padding: var(--size-4);
    background: var(--code-bg);
    border-radius: var(--radius);
    overflow-x: auto;
  }

  & img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
  }
}

.entry-footer {
  margin-block-start: var(--size-3);
  padding-block-start: var(--size-2);
  border-block-start: var(--border-element);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1);
  align-items: center;
  justify-content: center;

  & .tags-label {
    color: var(--text);
    font-size: var(--font-size-0);
  }

  & a {
    display: inline-block;
    padding: 1px 5px;
    background: var(--bg-alt);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--font-size-0);
    transition: background 0.2s var(--ease-2);

    &:hover {
      background: var(--surface-2);
      color: var(--text);
    }
  }
}

.page-links {
  margin-block-start: var(--size-5);
  display: flex;
  gap: var(--size-2);
  align-items: center;
}

/* Post Navigation */
.post-nav {
  padding-block: var(--size-2);
  margin-block: var(--size-2);
  border-block-start: var(--border-section);
}

.post-nav__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-2);  
}

.post-nav__link {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  padding: var(--size-2);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--surface-1);
  color: var(--text);
  transition: background 0.2s var(--ease-2);

  &:hover {
    background: var(--bg-alt);
  }

  &--empty {
    pointer-events: none;
  }

  &--next {
    flex-direction: row-reverse;
  }

  @media (max-width: 600px) {
    gap: var(--size-2);
    padding: var(--size-1);
  }
}

.post-nav__thumbnail {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--radius);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 600px) {
    width: 40px;
    height: 40px;
  }
}

.post-nav__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;

  .post-nav__link--next & {
    align-items: flex-end;
    text-align: right;
  }
}

.post-nav__header {
  display: flex;
  align-items: center;
  gap: var(--size-1);
  color: var(--text-muted);
  font-size: var(--font-size-2);
  transition: color 0.2s var(--ease-2);

  .post-nav__link:hover & {
    color: var(--accent);
  }
}

.post-nav__label {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-nav__title {
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-1);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

  @media (max-width: 600px) {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: var(--font-size-0);
  }
}

/* ==========================================================================
   Posts Grid
   ========================================================================== */

.posts-grid {
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
}

/* List View (Half + Square cards) */
.posts-grid.posts-grid--list {
  gap: var(--size-4);
}

/* Grid View (2-column responsive) */
.posts-grid.posts-grid--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-4);

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Gutenberg Block Support
   ========================================================================== */

/* Block: Image - Alignment */
.wp-block-image {
  margin-block-end: var(--size-4);
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.wp-block-image figcaption {
  color: var(--text-muted);
  font-size: var(--font-size-0);
  margin-block-start: var(--size-2);
  text-align: center;
}

/* Centered image */
.wp-block-image.is-style-default,
.wp-block-image.aligncenter,
.wp-block-image .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.wp-block-image.aligncenter img,
.wp-block-image .aligncenter img {
  margin-inline: auto;
}

/* Left aligned image */
.wp-block-image.alignleft,
.wp-block-image .alignleft {
  float: left;
  margin-right: var(--size-4);
  margin-bottom: var(--size-3);
  max-width: 50%;
}

/* Right aligned image */
.wp-block-image.alignright,
.wp-block-image .alignright {
  float: right;
  margin-left: var(--size-4);
  margin-bottom: var(--size-3);
  max-width: 50%;
}

/* Wide and Full-width images */
.wp-block-image.alignwide {
  max-width: var(--content-max);
  margin-inline: auto;
}

.wp-block-image.alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

/* Clear floats after aligned images */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Figure element base */
figure {
  margin: 0;
}

figure.aligncenter {
  margin-inline: auto;
  text-align: center;
}

figure.aligncenter img {
  margin-inline: auto;
}

/* Block: Gallery */
.wp-block-gallery {
  margin-block-end: var(--size-4);
}

.wp-block-gallery img {
  border-radius: var(--radius);
}

.wp-block-gallery figcaption {
  color: var(--text-muted);
  font-size: var(--font-size-0);
}

/* Block: Button */
.wp-block-button {
  margin-block-end: var(--size-4);
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-5);
  font-family: var(--font-title);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-6);
  color: var(--bg);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s var(--ease-2), color 0.2s var(--ease-2);
}

.wp-block-button__link:hover {
  background: transparent;
  color: var(--accent);
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--accent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Block: Quote */
.wp-block-quote {
  margin: var(--size-5) 0;
  padding: var(--size-4);
  border: none;
  border-inline-start: 4px solid var(--accent);
  background: var(--card-bg);
  font-style: italic;
}

.wp-block-quote cite,
.wp-block-quote footer {
  color: var(--text-muted);
  font-size: var(--font-size-0);
  margin-block-start: var(--size-3);
  display: block;
  font-style: normal;
}

/* Block: Pullquote */
.wp-block-pullquote {
  border: none;
  border-top: var(--border-section);
  border-bottom: var(--border-section);
  padding: var(--size-5);
  margin: var(--size-6) 0;
  text-align: center;
}

.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.wp-block-pullquote p {
  font-size: var(--font-size-4);
  font-family: var(--font-title);
  line-height: var(--font-lineheight-2);
}

.wp-block-pullquote cite {
  color: var(--text-muted);
  font-size: var(--font-size-1);
  font-style: normal;
}

/* Block: Code & Preformatted */
.wp-block-code,
.wp-block-preformatted {
  margin-block-end: var(--size-4);
  padding: var(--size-4);
  background: var(--code-bg);
  border-radius: var(--radius);
  border: var(--border-element);
  overflow-x: auto;
  font-size: var(--font-size-0);
}

/* Block: Table */
.wp-block-table {
  margin-block-end: var(--size-4);
  overflow-x: auto;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
  padding: var(--size-3);
  border: var(--border-element);
}

.wp-block-table th {
  background: var(--card-bg);
  font-weight: var(--font-weight-6);
  text-align: left;
}

.wp-block-table tr:nth-child(even) td {
  background: var(--card-bg);
}

/* Block: Separator */
.wp-block-separator {
  border: none;
  border-top: var(--border-section);
  margin-block: var(--size-6);
  max-width: 100%;
}

.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  color: var(--text-muted);
  font-size: var(--font-size-4);
  letter-spacing: 1em;
  padding-left: 1em;
}

/* Block: Cover */
.wp-block-cover {
  margin-block-end: var(--size-4);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Block: Group */
.wp-block-group {
  margin-block-end: var(--size-4);
}

.wp-block-group.has-background {
  padding: var(--size-4);
  border-radius: var(--radius);
  background: var(--card-bg);
}

/* Block: Columns */
.wp-block-columns {
  gap: var(--size-4);
  margin-block-end: var(--size-4);

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

/* Block: List */
.wp-block-list {
  margin-block-end: var(--size-4);
  padding-inline-start: var(--size-5);
}

/* Dropcap */
.has-drop-cap:not(:focus)::first-letter {
  font-family: var(--font-title);
  font-size: 5em;
  line-height: 0.8;
  float: left;
  margin: 0 0.15em 0 0;
  color: var(--accent);
}

/* ==========================================================================
   Search Forms (Widget & Block)
   ========================================================================== */

.search-form,
.wp-block-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);

  /* Input fields */
  & .search-field,
  & .wp-block-search__input {
    flex: 1;
    padding: var(--size-2) var(--size-3);
    border: var(--border-muted);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-size-1);
    transition: border-color 0.2s var(--ease-2);

    &:hover {
      border: var(--border-element);
    }

    &:focus {
      outline: none;
      border-color: var(--accent);
    }

    &::placeholder {
      color: var(--text-muted);
    }
  }

  /* Buttons */
  & .search-submit,
  & .wp-block-search__button {
    padding: var(--size-2) var(--size-4);
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-title);
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition: color 0.2s var(--ease-2), background 0.2s var(--ease-2);

    &:hover {
      color: var(--accent);
    }

    &:focus {
      outline: none;
      color: var(--accent);
    }

    & svg {
      fill: currentColor;

      &:hover {
        fill: var(--accent);
      }
    }

    &.has-icon {
      padding: var(--size-2);

      & svg {
        width: 1.25em;
        height: 1.25em;
      }
    }
  }

  /* Button-inside variant */
  &.wp-block-search__button-inside {
    & .wp-block-search__inside-wrapper {
      display: flex;
      border: var(--border-muted);
      border-radius: var(--radius);
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.2s var(--ease-2);

      &:hover {
        border: var(--border-element);
      }

      &:focus-within {
        border-color: var(--accent);
      }
    }

    & .wp-block-search__input {
      border: none;
      border-radius: 0;
      background: transparent;

      &:hover {
        border: none;
      }
    }

    & .wp-block-search__button {
      border-radius: 0;
      padding-inline: var(--size-1);
    }
  }

  /* Light mode override */
  [data-theme="light"] & {

    & .search-submit svg,
    & .wp-block-search__button svg {
      fill: var(--gray-7);

      &:hover {
        fill: var(--accent);
      }
    }
  }
}

/* --------------------------------------------------------------------------
   Mega Menu Container
   -------------------------------------------------------------------------- */

.navbar {
  position: relative;
}

.navbar .menu-item.has-mega {
  position: static !important;

  &:hover .mega-menu-container,
  &:focus-within .mega-menu-container {
    display: block;
  }
}

.mega-menu-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--surface-1);
  border-block-start: 1px solid var(--border-color);
  padding-block: var(--size-4);
  z-index: 100;
  box-shadow: var(--shadow-3);
  display: none;
}

.mega-menu-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mega-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--size-2);
  padding-block-end: var(--size-2);
  border-block-end: 1px dashed var(--border-color);
}

.mega-menu-header-main {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  min-width: 0;
  flex: 1;
}

.mega-menu-title {
  font-size: var(--font-size-4);
  margin: 0;
  color: var(--text);
}

.mega-menu-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mega-menu-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-0);
  line-height: 1;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.mega-menu-tabs a:hover,
.mega-menu-tabs a.is-active {
  background: var(--bg-alt);
  color: var(--accent);
}

.mega-menu-nav {
  display: flex;
  gap: var(--size-1);
}

/* Mega menu navigation buttons (follows .btn-icon pattern) */
.mega-nav-btn {
  background: transparent;
  border: none;
  color: var(--text);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s var(--ease-2);
  position: relative;
  --icon-brand: var(--accent);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--icon-brand);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  & i {
    font-size: var(--font-size-2);
    line-height: 1;
    display: block;
    position: relative;
    z-index: 1;
  }

  &:hover:not(:disabled) {
    color: var(--icon-brand);

    &::before {
      opacity: 0.3;
    }
  }

  &:disabled {
    opacity: 0.2;
  }

  &.is-loading {
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   Mega Menu Grids
   -------------------------------------------------------------------------- */

.mega-grid__posts {
  display: grid;
  gap: var(--size-4);
  width: 100%;
}

.mega-grid--3-col-standard {
  & .mega-grid__posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 1024px) {
    & .mega-grid__posts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

.mega-grid--3-col-featured {
  & .mega-grid__posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-2);
    grid-auto-flow: column;

    &>.card:first-child {
      grid-column: 1 / span 1;
      grid-row: 1 / span 3;
      justify-self: center;
      align-self: center;
      width: 100%;
      max-width: 300px;
      position: relative;
      aspect-ratio: 1 / 1;

      & .card__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      & .card__content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        pointer-events: none;
        text-align: center;
        text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
        padding: var(--size-4);
      }

      & .card__link {
        pointer-events: auto;
      }

      & .card__title {
        font-size: var(--font-size-3);
      }

      & .card__title,
      & .card__link,
      & .card__date,
      & .card__category {
        color: #fff;
      }
    }
  }

  @media (max-width: 1024px) {
    & .mega-grid__posts {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      &>.card:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
      }
    }
  }
}

.mega-grid--4-col-square {
  & .mega-grid__posts {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    & .card__content {
      padding: var(--size-2);
    }

    & .card__title {
      font-size: var(--font-size-1);
      line-height: var(--font-lineheight-1);
    }
  }

  @media (max-width: 1024px) {
    & .mega-grid__posts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* --------------------------------------------------------------------------
   Primary Navigation Container
   -------------------------------------------------------------------------- */

.primary-nav {
  display: contents;

  &>.menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Menu Items (Desktop)
   -------------------------------------------------------------------------- */

.primary-nav .menu-item {
  position: relative;

  &>a {
    display: block;
    padding: var(--size-2) var(--size-3);
    color: var(--text);
    font-weight: var(--font-weight-5);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--ease-2);

    &:hover {
      color: var(--accent);
    }
  }
}

/* Split button wrapper (for items with children) */
.menu-item-wrapper {
  display: flex;
  align-items: center;
}

/* Toggle button (hidden on desktop by default) */
.toggle-sub {
  display: none;
  padding: var(--size-2);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease-2), transform 0.2s var(--ease-2);

  &:hover {
    color: var(--accent);
  }

  & i {
    transition: transform 0.2s var(--ease-2);
  }

  &[aria-expanded="true"] i {
    transform: rotate(180deg);
  }
}




@keyframes pulse {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Desktop Hover States
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Standard submenus (dropdown) */
  .navbar__menu .primary-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: var(--size-2) 0;
    background: var(--card-bg);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    list-style: none;
    z-index: 100;

    & .menu-item {
      &>a {
        padding: var(--size-2) var(--size-4);
      }
    }
  }

  .navbar__menu .primary-nav .menu-item:hover>.sub-menu,
  .navbar__menu .primary-nav .menu-item:focus-within>.sub-menu {
    display: block;
  }

  /* Prevent double menus: Hide standard sub-menu if mega menu is present */
  .navbar__menu .primary-nav .menu-item.has-mega>.sub-menu {
    display: none;
  }

  /* Ensure mega grid is visible on desktop */
  .mega-grid {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Mobile Drawer
   -------------------------------------------------------------------------- */


.drawer-nav .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-2);
  list-style: none;
  padding: 0;
  margin: 0;

  &.is-open {
    max-height: 500px;
  }

  & .menu-item {
    border-bottom: none;

    &>a {
      padding: var(--size-2) var(--size-4);
      font-size: var(--font-size-0);
      color: var(--text-muted);

      &:hover {
        color: var(--accent);
      }
    }
  }
}

/* ==========================================================================
   Posts Grid Widget Block
   ========================================================================== */

.wp-block-eclecty-posts-grid,
.posts-grid-widget {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.posts-grid-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block-end: 1px dashed var(--border-color);
}

/* Header alignment modifiers */
.posts-grid-widget__header--center {
  justify-content: center;
  text-align: center;

  .widget-title {
    flex: 1;
  }
}

.posts-grid-widget__header--right {
  flex-direction: row-reverse;
}

.posts-grid-widget__posts {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

.posts-grid-widget__empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--size-4);
}

/* Round thumbnail modifier */
.card--mini-round .card__media {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.card--mini-round .card__media img {
  border-radius: 50%;
}

/* ==========================================================================
   Reduced Motion (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-drawer {
    transition: none;
  }

  .navbar.is-stuck .navbar__logo-link {
    animation: none;
  }

  body.nav-open::before {
    animation: none;
  }

  .toggle-sub i {
    transition: none;
  }
}

/* ==========================================================================
   Secondary Top Widgets
   ========================================================================== */

.secondary-top-widgets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-4);
  margin-block-end: var(--size-4);

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Post Meta (Single Post Header)
   ========================================================================== */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-2) var(--size-4);
  font-size: var(--font-size-0);
  color: var(--text-muted);

  & time,
  & .read-time,
  & .author,
  & .categories {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
  }

  & .categories a {
    color: var(--accent);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* ==========================================================================
   Scroll to Top Button
   ========================================================================== */

.scroll-to-top {
  position: fixed;
  bottom: var(--size-6);
  right: var(--size-6);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-3);
  transition: opacity 0.3s ease, visibility 0.3s ease, color 0.2s ease;
  --icon-brand: var(--accent);



  /* Circular glow effect on hover (like navigation arrows) */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--icon-brand);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  &:hover {
    color: var(--icon-brand);
  }

  &:hover::after {
    opacity: 0.15;
  }

  &[hidden] {
    display: none;
  }

  &.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  & i {
    font-size: var(--font-size-4);
  }

  @media (max-width: 768px) {
    bottom: calc(var(--size-4) + env(safe-area-inset-bottom, 0px));
    right: var(--size-3);
    width: 36px;
    height: 36px;

    & i {
      font-size: var(--font-size-3);
    }
  }
}

/* ==========================================================================
   Interstitial Section (Full-Bleed)
   ========================================================================== */

.inter {
  position: relative;
  width: 100%;
  /* Padding handled inline via Customizer */
  background-color: var(--bg-alt);
  color: #fff;
  text-align: left;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  grid-column: full-start / full-end;
  isolation: isolate;
  z-index: 1;
}



.inter__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--size-4);
}

/* Typography */
.inter__label {
  font-family: var(--font-body);
  font-size: var(--font-size-0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: calc(var(--size-2) * -1);
}

.inter__title {
  font-size: var(--font-size-fluid-2);
  line-height: 1.1;
  margin: 0;
  color: #fff;
}

.inter__text {
  font-size: var(--font-size-2);
  max-width: 60ch;
  margin-inline: 0;
  color: rgba(255, 255, 255, 0.9);

  & p {
    margin-block: 0;
  }
}

/* Actions / Buttons */
.inter__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--size-3);
  margin-top: var(--size-4);
}

.inter__cta {
  justify-content: center;
  text-shadow: none;
}

/* Outline/Secondary Button Style */
.inter__cta--secondary {
  --btn-bg: transparent;
  --btn-text: #fff;
  --btn-border: #fff;

  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid var(--btn-border);

  &:hover {
    background-color: #fff;
    color: #000;
    border-color: #fff;
  }
}

/* Responsive */
@media (max-width: 600px) {
  .inter {
    padding-block: var(--size-8);
  }

  .inter__actions {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: var(--size-2);
  }

}

/* ==========================================================================
   Mini Cart & Drawer 
   ========================================================================== */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70vw;
  max-width: 400px;
  height: 100vh;
  height: 100dvh;
  background: var(--drawer-bg, var(--bg));
  z-index: var(--z-drawer, 1000);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .cart-drawer {
    width: 20vw;
    max-width: none;
    min-width: 300px;
  }
}

body.cart-open .cart-drawer {
  transform: translateX(0);
}

/* Content */
.cart-drawer .drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--size-4) var(--size-4);
}

/* ==========================================================================
   Mini Cart Widget
   ========================================================================== */

.widget_shopping_cart_content ul.cart_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget_shopping_cart_content ul.cart_list li {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  margin-bottom: var(--size-4);
  padding-bottom: var(--size-4);
  border-bottom: var(--border-muted);
}

.widget_shopping_cart_content ul.cart_list li img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-left: 0;
}

.widget_shopping_cart_content ul.cart_list li a {
  font-weight: 500;
  text-decoration: none;
  color: var(--gray-6);
}

.widget_shopping_cart_content ul.cart_list li .quantity {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-0);
}

.widget_shopping_cart_content .total {
  border-top: var(--border-section);
  padding-top: var(--size-3);
  margin-top: var(--size-3);
  font-size: var(--font-size-2);
  display: flex;
  justify-content: space-between;
}

.widget_shopping_cart_content .buttons {
  display: grid;
  gap: var(--size-2);
  margin-top: var(--size-4);
}

.widget_shopping_cart_content .buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--size-3);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-0);
  transition: all 0.2s ease;
}

.widget_shopping_cart_content .buttons .button:not(.checkout) {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text);
}

.widget_shopping_cart_content .buttons .button.checkout {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
}

.widget_shopping_cart_content .buttons .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

.woocommerce-mini-cart__empty-state {
  min-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--size-3);
  padding: clamp(2.5rem, 8vw, 4.5rem) var(--size-2);
}

.woocommerce-mini-cart__empty-title {
  margin: 0;
  max-width: 14ch;
  color: var(--text);
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 5.5vw, 1.8rem);
  line-height: 1.15;
}

.woocommerce-mini-cart__empty-message {
  margin: 0;
  max-width: 28ch;
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.woocommerce-mini-cart__empty-link {
  color: var(--accent);
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.woocommerce-mini-cart__empty-link:hover,
.woocommerce-mini-cart__empty-link:focus-visible {
  color: color-mix(in srgb, var(--accent) 84%, var(--text) 16%);
  transform: translateY(-1px);
  outline: none;
}

.woocommerce-mini-cart__empty-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--size-1);
}

.woocommerce-mini-cart__empty-dots span {
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 72%, transparent);
}

/* ==========================================================================
   Global Form Inputs (Checkout, Cart, etc)
   ========================================================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.cart .quantity input.qty,
.woocommerce-input-wrapper select,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-textarea textarea {
  width: 100%;
  padding: var(--size-2) var(--size-3);
  background: var(--bg-alt) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius);
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: var(--font-size-1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.cart .quantity input.qty:focus,
.woocommerce-input-wrapper select:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.wc-block-components-textarea textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* Labels */
.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--size-1);
  font-size: var(--font-size-0);
  color: var(--text-muted);
}

/* ==========================================================================
   Mini Cart Grid Layout (3-Column)
   ========================================================================== */

.widget_shopping_cart_content .woocommerce-mini-cart-item {
  display: grid !important;
  grid-template-columns: 60px 1fr auto !important;
  gap: var(--size-2);
  align-items: center;
  padding: var(--size-2) 0;
  border-bottom: 1px solid var(--border-color);
}

.widget_shopping_cart_content .woocommerce-mini-cart-item:last-child {
  border-bottom: none;
}

.mini-cart-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-1);
}

.mini-cart-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.mini-cart-title {
  font-weight: 500;
  line-height: 1.2;
  display: block;
  font-size: var(--font-size-1);
}

.mini-cart-title>a {
  color: var(--text);
  display: block;
  text-decoration: none;
}

.mini-cart-title>a:hover {
  color: var(--accent);
}

.mini-cart-title .variation {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--size-2);
  margin: var(--size-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-0);
  font-weight: 400;
}

.mini-cart-title .variation dt,
.mini-cart-title .variation dd {
  margin: 0;
}

.mini-cart-title .variation dt {
  font-weight: 600;
}

.mini-cart-title .variation dd {
  min-width: 0;
}

.mini-cart-title .variation dd p {
  margin: 0;
}


.mini-cart-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  text-align: right;
  align-self: center;
  align-items: center;  
}

.mini-cart-price {
  font-weight: 500;
  color: var(--text);
  font-size: var(--font-size-1);
  line-height: 1;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;

  
}

.mini-cart-qty {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.eclecty-quantity-stepper {
  display: grid;
  align-items: center;
  background: transparent;
  grid-template-columns: 2.4rem minmax(2ch, auto) 2.4rem;
  overflow: visible;
  justify-items: center;
}

.eclecty-quantity-stepper__button,
.eclecty-quantity-stepper__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
}

.eclecty-quantity-stepper__button {
  background: var(--bg-alt);
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  height: 2.4rem;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease;
  width: 2.4rem;
}

.eclecty-quantity-stepper__button:hover,
.eclecty-quantity-stepper__button:focus-visible {
  background: color-mix(in srgb, var(--bg-alt) 72%, var(--accent) 12%);
  color: var(--accent);
  outline: none;
}

.eclecty-quantity-stepper__button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.eclecty-quantity-stepper__value {
  border-inline: 0;
  color: var(--text);
  font-size: var(--font-size-0);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 2rem;
  padding-inline: 0.25rem;
}

.widget_shopping_cart_content .eclecty-mini-cart-stepper {
  border: 0;
  grid-template-columns: 1.9rem minmax(2ch, auto) 1.9rem;
  border-radius: var(--radius-1);
}

.widget_shopping_cart_content .eclecty-mini-cart-stepper .eclecty-quantity-stepper__button,
.widget_shopping_cart_content .eclecty-mini-cart-stepper .eclecty-quantity-stepper__value {
  min-height: 1.9rem;
  min-width: 1.9rem;
}

.widget_shopping_cart_content .eclecty-mini-cart-stepper .eclecty-quantity-stepper__button {
  height: 1.9rem;
  width: 1.9rem;
}

.widget_shopping_cart_content .eclecty-mini-cart-stepper .eclecty-quantity-stepper__value {
  font-size: 0.95rem;
  min-width: 1.75rem;
}

.widget_shopping_cart_content .eclecty-mini-cart-stepper.is-updating {
  opacity: 0.6;
}

/* Drawer Title */
.drawer-title {
  font-weight: 600;
  font-size: var(--font-size-2);
  color: var(--text);
}

/* ==========================================================================
   Mini Cart Buttons
   ========================================================================== */

.woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-3);
  margin: 0;
}

.woocommerce-mini-cart__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--size-3) var(--size-3);
  width: 100%;
  margin: 0;
  border-radius: var(--radius-1);
  font-weight: 600;
  font-size: var(--font-size-1);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  line-height: 1;
}

/* View Cart ("Subtle" / Load More style) */
.woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text);
}

.woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Checkout ("Accent" style) */
.woocommerce-mini-cart__buttons .button.checkout {
  background: var(--accent);
  color: var(--bg);
  /* Contrast text */
  border: 1px solid var(--accent);
}

.woocommerce-mini-cart__buttons .button.checkout:hover {
  filter: brightness(1.1);
  opacity: 1;
}

/* ==========================================================================
   Single Post Stream (Infinite Scroll)
   ========================================================================== */

/* Stream controls (load more button and sentinel) */
.single-stream-controls {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Hidden sentinel for IntersectionObserver */
.single-stream__sentinel {
  height: 1px;
  width: 100%;
}

.single-stream__pagination {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
}

/* Shared Load More Home Link - hidden by default */
.load-more-home-link {
  display: none;
  align-items: center;
  gap: var(--size-1);
  font-size: var(--font-size-0);
  text-decoration: none;
  transition: color 0.2s ease;

  i {
    transition: transform 0.15s ease;
  }

  &:hover {
    color: var(--link);

    i {
      transform: translateX(-0.2em);
    }
  }

  &.is-visible {
    display: inline-flex;
  }
}

/* End state for load more button */
.load-more-btn.is-end {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pagination end state (archive & single stream) */
.pagination-ajax.is-end,
.single-stream-controls.is-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
}

/* Post Separator */
.post-separator {
  width: 100%;
  height: 3rem;
  border: none;
  background: url('../img/separator.png');

}

[data-theme="light"] .post-separator {
  opacity: 0.2;
}

/* Stream post article styling */
.single-post--stream {
  margin-block-start: 0;

  & .single-post__body {
    padding-inline: 0;
  }
}

/* Load More Button Icon States */
.load-more-btn__spinner {
  display: none;
  width: 2em;
  height: 2em;
}

.load-more-btn.is-loading {
  pointer-events: none;

  & .load-more-btn__icon {
    display: none;
  }

  & .load-more-btn__spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    color: var(--accent);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Single Post Stream Mobile Sidebar
   ========================================================================== */

@media (max-width: 768px) {

  /* Hide sidebars for stream posts by default on mobile */
  .single-post--stream .sidebar {
    display: none;
  }

  /* Show sidebar only for the last post in a batch */
  .single-post--stream.stream-batch-end .sidebar {
    display: block;
    margin-top: var(--size-4);
    padding-top: var(--size-4);
    border-top: var(--border-muted);
  }
}

/* ==========================================================================
   Mega Menu: Sub-menu + Content (2 Col)
   ========================================================================== */

/* Structure: 20% Sidebar, 80% Content (Dynamic Grid) */
.mega-grid--2-col-split {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--size-5);
}

/* Left Column: Vertical Menu List */
.mega-sub-menu-list {
  border-right: var(--border-muted);
  padding-right: var(--size-4);
}

.mega-sub-menu-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mega-sub-menu-list li {
  margin-bottom: var(--size-1);
}

.mega-sub-menu-list a {
  display: block;
  padding: var(--size-2) var(--size-3);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: var(--font-size-1);
  border: 1px solid transparent;
}


.mega-sub-menu-list a:hover,
.mega-sub-menu-list a.is-active {
  background: var(--bg-alt);
  color: var(--accent);
}

/* Right Column: Dynamic Content Grid */
.mega-content-preview {
  position: relative;
}

.mega-content-preview .mega-grid__posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-4);
  align-content: start;
  position: relative;
padding: var(--size-4);
}

/* Hide Native Sub-menu for this layout */
.navbar .menu-item.mega-2-col-split>.sub-menu {
  display: none;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
  .mega-grid--2-col-split {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: var(--size-3);
  }

  .mega-sub-menu-list {
    border-right: none;
    padding-right: 0;
    margin-bottom: var(--size-3);
    border-bottom: var(--border-muted);
    padding-bottom: var(--size-3);
  }

  .mega-content-preview {
    display: none;
  }

  .mega-menu-header-main {
    flex-wrap: wrap;
  }
}

.primary-nav .menu-item.has-mega {
  &:hover>.menu-item-wrapper,
  &:focus-within>.menu-item-wrapper {
    color: var(--accent);
  }
}

/* ==========================================================================
   Inline Post Block - "See Also" Related Post
   ========================================================================== */

.inline-post-block {
    position: relative;
    margin: var(--size-2) 0;
    padding: var(--size-3);
    border: var(--border-element);
    background: transparent;
}

.inline-post-block__label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--size-1);
  background: var(--text);
  color: var(--bg-alt);
  font-size: 10px;
}

/* Card inside the block */
.inline-post-block .card {
  border: none;
  background: transparent;
  margin: 0;
  gap: var(--size-4);
}

.inline-post-block .card--mini .card__media {
  flex: 0 0 100px;
  max-width: 100px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius);
  overflow: hidden;
}

.inline-post-block .card__content {
  padding: 0;
}

.inline-post-block .card__title {
  font-size: var(--font-size-2);
  line-height: 1.3;
  margin: 0;
}

.inline-post-block .card__category {
  margin-bottom: var(--size-1);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .inline-post-block {
    padding: var(--size-4) var(--size-3);
  }

  .inline-post-block .card--mini .card__media {
    flex: 0 0 80px;
    max-width: 80px;
    width: 80px;
    height: 80px;
  }

  .inline-post-block .card__title {
    font-size: var(--font-size-1);
  }
}

/* Editor block preview styling */
.wp-block-eclecty-inline-post {
  margin: var(--size-6) 0;
}

.wp-block-eclecty-inline-post .components-placeholder {
  min-height: 100px;
}