/* =========================================================
   HERO MEDIA ALIGNMENT (v1.5.0.8)
   Keep homepage overlay and direct URL hero visuals consistent.
   ========================================================= */
:root {
  --hero-media-max-height: min(78vh, 900px);
  --single-hero-top-gap: clamp(0.85rem, 2vw, 1.35rem);
}

/**
 * Component Styles
 * Expanding Tiles Theme
 * 
 * @package Expanding_Tiles
 * @since 1.0.0
 */

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  background: var(--card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: var(--adminbar);
  z-index: var(--z-header);
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
  border-bottom: 1px solid var(--border);
}

.header-ticker-wrap {
  border-top: 1px solid var(--border);
  padding: 0.5rem 2rem 0.65rem;
}

.header-ticker-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.header-ticker-inner .spotify-live-ticker-container {
  background: color-mix(in srgb, var(--ink2) 82%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: #f5f8fb !important;
}

.header-ticker-inner .spotify-live-ticker-link,
.header-ticker-inner .spotify-live-ticker-text,
.header-ticker-inner .slt-marquee-item,
.header-ticker-inner .spotify-live-user {
  color: inherit !important;
  opacity: 1 !important;
}

[data-theme="dark"] .header-ticker-inner .spotify-live-ticker-container {
  background: color-mix(in srgb, #0b1116 76%, transparent);
  border-color: color-mix(in srgb, var(--accent) 62%, rgba(255, 255, 255, 0.2));
  color: #ecfdf8 !important;
}

.header-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.site-branding {
  flex-shrink: 0;
}

.site-branding .text-logo {
  display: inline-block;
  text-decoration: none;
  color: var(--heading);
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: uppercase;
  transition: color var(--transition-fast);
  line-height: 1;
}

.site-branding .text-logo:hover {
  color: var(--accent);
}

.logo-separator {
  margin: 0 0.3rem;
  opacity: 0.5;
}

.site-description {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Navigation */
.main-navigation {
  flex: 1;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  padding: 0.72rem 0.95rem;
  border-radius: var(--r-pill);
  display: block;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--heading);
}

/* Active menu underline */
.main-navigation .current-menu-item > a {
  position: relative;
}

.main-navigation .current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0.95;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--heading);
  padding: 0.5rem;
  transition: color var(--transition-fast);
}

.menu-toggle:hover {
  color: var(--accent);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  background: none;
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.dark-mode-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.dark-mode-toggle .icon-light,
.dark-mode-toggle .icon-dark {
  transition: opacity var(--transition-fast);
}

[data-theme="dark"] .dark-mode-toggle .icon-light {
  display: none;
}

[data-theme="light"] .dark-mode-toggle .icon-dark,
.dark-mode-toggle .icon-dark {
  display: none;
}

[data-theme="dark"] .dark-mode-toggle .icon-dark {
  display: inline;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.site-main {
  min-height: 60vh;
  padding: 2rem 0;
}

/* =========================================================
   POST GRID
   ========================================================= */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--grid-gap);
  margin: 3rem 0;
  transition: all 0.5s var(--easing);
}

.home-intro {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.35rem, 2vw, 2.1rem);
  border-radius: calc(var(--card-radius) + 6px);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent2) 14%, transparent) 0%, transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 96%, white) 0%, color-mix(in srgb, var(--card-bg) 92%, var(--accent)) 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.home-intro-kicker {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 68%, var(--muted));
}

.home-intro-title {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.08;
  text-wrap: balance;
}

.home-intro-copy {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}

.home-intro-copy p {
  margin: 0;
}

.home-intro-copy p + p {
  margin-top: 0.9rem;
}

.posts-grid.opening {
  filter: blur(3px);
  opacity: 0.3;
  transform: scale(0.95);
}

/* =========================================================
   POST CARD
   ========================================================= */

.post-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadowCard);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
  border: 1px solid var(--border);
  transform-origin: center;
  contain: paint;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadowCardHover);
  
  /* Glassmorphism/Glossy effect */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Elegant shimmer overlay on hover */
.post-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.4) 48%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 52%,
    transparent 55%,
    transparent 100%
  );
  transform: translateX(-100%) translateY(-100%) rotate(30deg);
  transition: transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.post-card:hover::before {
  opacity: 1;
  transform: translateX(100%) translateY(100%) rotate(30deg);
}

/* Subtle rainbow accent overlay */
.post-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(39, 182, 164, 0.08) 0%,
    rgba(41, 194, 155, 0.05) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(41, 194, 155, 0.05) 75%,
    rgba(39, 182, 164, 0.08) 100%
  );
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 2;
}

.post-card:hover::after {
  opacity: 1;
}

/* Dark mode glass effect */
body.dark-mode .post-card:hover,
[data-theme="dark"] .post-card:hover {
  background: rgba(44, 44, 44, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .post-card::before,
[data-theme="dark"] .post-card::before {
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.15) 48%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.15) 52%,
    transparent 55%,
    transparent 100%
  );
}

body.dark-mode .post-card::after,
[data-theme="dark"] .post-card::after {
  background: linear-gradient(
    135deg,
    rgba(39, 182, 164, 0.12) 0%,
    rgba(41, 194, 155, 0.08) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(41, 194, 155, 0.08) 75%,
    rgba(39, 182, 164, 0.12) 100%
  );
}

.post-card.expanding {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.post-card.hiding {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  pointer-events: none;
}

.post-card.returning {
  animation: returnToGrid 0.6s var(--easing);
}

@keyframes returnToGrid {
  from {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Post Image */
.post-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}

.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.post-card:hover .post-image {
  transform: scale(1.05) rotate(0.5deg);
}

/* Gradient overlay for better text readability */
.post-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.18) 100%
  );
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}

/* Subtle sparkle effect on image hover */
.post-image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 3%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 4%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 5%);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 1;
}

.post-card:hover .post-image-wrapper::before {
  opacity: 1;
  animation: sparkleGlow 3s ease-in-out infinite;
}

@keyframes sparkleGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Post Content */
.post-content {
  padding: 1.5rem;
  position: relative;
  z-index: 3;
}

/* Keep image/content layers above decorative hover overlays */
.post-image-wrapper {
  position: relative;
  z-index: 0;
}

/* Category badge (pill label)
   NOTE: we keep `.post-category` for JS hooks, but the actual styling is shared.
*/
.category-badge,
.post-category {
  --cat: var(--accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  line-height: 1;
  border: 1px solid var(--pillBorder);
  background: rgba(0, 0, 0, 0.04);
  color: var(--cat);
}

@supports (background: color-mix(in srgb, red 20%, transparent)) {
  .category-badge,
  .post-category {
    background: color-mix(in srgb, var(--cat) 14%, transparent);
    border-color: color-mix(in srgb, var(--cat) 35%, transparent);
  }
}

body.dark-mode .category-badge,
body.dark-mode .post-category {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--cat);
}

@supports (background: color-mix(in srgb, red 20%, transparent)) {
  body.dark-mode .category-badge,
  body.dark-mode .post-category {
    background: color-mix(in srgb, var(--cat) 22%, transparent);
    border-color: color-mix(in srgb, var(--cat) 55%, transparent);
  }
}

/* Category colors
   IMPORTANT: scope to badges only.
   WordPress adds `category-{slug}` classes to <body> on category archives and
   to post wrappers via post_class(). If we style `.category-{slug}` globally,
   it can unintentionally recolor the entire page.
*/
.category-badge.category-personal,
.post-category.category-personal { --cat: var(--cat-personal); }
.category-badge.category-scraps,
.post-category.category-scraps { --cat: var(--cat-scraps); }
.category-badge.category-flavors,
.post-category.category-flavors { --cat: var(--cat-flavors); }
.category-badge.category-archipelago,
.post-category.category-archipelago { --cat: var(--cat-archipelago); }
.category-badge.category-travel,
.post-category.category-travel { --cat: var(--cat-travel); }

.post-title {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.post-title a {
  color: var(--heading);
  transition: color var(--transition-fast);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease, color var(--transition-fast);
}

.post-title a:hover {
  color: var(--accent);
  background-size: 100% 2px;
}

.post-excerpt {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.post-meta {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.read-more {
  font-size: 0.85rem;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.read-more:hover {
  color: var(--accent);
}


/* Prevent dark-mode hover from washing out excerpt/meta on data-theme-based toggle */
[data-theme="dark"] .post-card:hover .post-content,
[data-theme="dark"] .post-card:hover .post-title,
[data-theme="dark"] .post-card:hover .post-title a,
[data-theme="dark"] .post-card:hover .post-excerpt,
[data-theme="dark"] .post-card:hover .post-meta,
[data-theme="dark"] .post-card:hover .read-more {
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="dark"] .post-card:hover .post-title a {
  background-image: none;
}

[data-theme="dark"] .post-card:hover::after {
  opacity: 0.42;
}

/* Mobile/touch: reduce sticky hover artifacts and keep cards readable */
@media (hover: none) and (pointer: coarse) {
  .post-card:hover {
    transform: none;
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: var(--shadowCard);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .post-card:hover::before,
  .post-card:hover::after {
    opacity: 0;
  }

  .post-card:hover .post-image {
    transform: none;
  }
}

/* =========================================================
   ARTICLE OVERLAY (Expanding Tiles)
   ========================================================= */

.article-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: var(--z-overlay);
  display: none;
  transition: background-color 0.4s var(--easing);
  overflow-y: auto;
  overflow-x: hidden;
  /* Ensure anchor/hash scrolling (tabs, headings) isn't covered by the sticky hero */
  scroll-padding-top: var(--overlay-sticky-offset, 140px);
  padding: 0; /* No padding */
  margin: 0; /* No margin */
}

/* When navigating to tab anchors inside the overlay, give them extra top margin
   so sticky hero header never covers the tab navigation */
.article-overlay .vc_tta-container,
.article-overlay .vc_tta-tabs-container,
.article-overlay .wpb_tabs,
.article-overlay .ultimate-tabs-wrapper,
.article-overlay [id^="tab-"],
.article-overlay [id^="ini-tab-"] {
  scroll-margin-top: var(--overlay-sticky-offset, 140px);
}

.article-overlay.active {
  display: block;
  background: var(--bg);
}

.article-overlay.closing {
  background: transparent;
}

/* Wrapper for centering content */
.article-overlay-wrapper {
  width: 100%;
  min-height: 100%;
}

.article-container {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
  transform: translateY(100px) scale(0.9);
  opacity: 0;
  transition: all 0.6s var(--easing);
  margin: 0; /* No margin */
  padding: 0; /* No padding on container itself */
}

/* Content Card (Featured image + body) */
.article-content-card {
  width: min(var(--article-max-width), calc(100% - 2.5rem));
  margin: 2rem auto 4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadowSoft);
}

@media (max-width: 768px) {
  .article-content-card {
    width: calc(100% - 1.5rem);
    margin: 1.25rem auto 3rem;
    border-radius: 18px;
  }
}

.article-overlay.active .article-container {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.article-overlay.closing .article-container {
  transform: translateY(100px) scale(0.9);
  opacity: 0;
}

/* =========================================================
   FIX: Overlay post hero should behave like page hero (non-sticky)
   Prevent the expanding-tiles hero from covering article text on scroll
   ========================================================= */
.article-overlay {
  /* No sticky hero now, so anchors/tabs should align naturally */
  scroll-padding-top: 1rem;
}

.article-hero-section {
  width: min(var(--article-max-width), calc(100% - 2.5rem));
  margin: 1rem auto 0;
  border-radius: 22px;
  border: 1px solid rgba(13, 148, 136, 0.28);
  box-shadow: 0 14px 38px rgba(15, 118, 110, 0.18);
  overflow: hidden;
}

/* Same spacing relationship as page hero -> content card */
.article-content-card {
  margin-top: 0.9rem;
}

/* Disable sticky/compact/hide mode to avoid overlap with content */
.article-hero-section.scrolled {
  position: relative;
  top: auto;
  padding: clamp(2.2rem, 6vw, 4rem) 2rem;
  box-shadow: 0 14px 38px rgba(15, 118, 110, 0.18);
}

.article-hero-section.scrolled .article-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.article-hero-section.scrolled .article-category,
.article-hero-section.scrolled .article-meta {
  display: block;
}

.article-hero-section.hidden {
  transform: none;
  opacity: 1;
}

@media (max-width: 768px) {
  .article-hero-section {
    width: calc(100% - 1.5rem);
    margin-top: 0.75rem;
    border-radius: 18px;
  }

  .article-content-card {
    margin-top: 0.75rem;
  }

  .article-hero-section.scrolled {
    padding: 2rem 1.25rem;
  }

  .article-hero-section.scrolled .article-title {
    font-size: 1.8rem;
  }
}

/* Hero Header Section - Parallax Design */
.article-hero-section {
  position: relative;
  width: 100%;
  /* Keep hero compact (like a title bar), not a giant split layout */
  min-height: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.2rem, 6vw, 4rem) 2rem;
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-hero-section.scrolled {
  position: sticky;
  top: 0;
  min-height: 0;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.article-hero-section.scrolled .article-title {
  font-size: 1.8rem;
  margin-bottom: 0;
}

.article-hero-section.scrolled .article-category,
.article-hero-section.scrolled .article-meta {
  display: none;
}

.article-hero-section.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.article-hero-content {
  text-align: center;
  color: var(--heading);
  max-width: 900px;
  width: 100%;
}

/* Featured Image Section - Full image (no crop), placed under the title bar */
.article-featured-image-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
  padding: 2rem 1.5rem 0;
  display: flex;
  justify-content: center;
}
/* Hide featured image section when post has no thumbnail */
.article-featured-image-section.no-image {
  display: none !important;
}


.article-featured-image-section .article-hero-image {
  width: min(100%, 1100px);
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  transform: none !important;
  transition: none;
  will-change: auto;
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

/* Inside the content card, the featured image is full width and never cropped */
.article-content-card .article-featured-image-section {
  padding: 0;
  justify-content: center;
}

.article-content-card .article-featured-image-section .article-hero-image {
  width: 100%;
  max-height: var(--hero-media-max-height);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
  object-position: center center;
}

/* Featured image overlay gradient */
.article-featured-image-overlay {
  display: none;
}

/* Scroll indicator (never overlaps the meta/date) */
.scroll-indicator {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.85;
  animation: scrollBounceY 2s infinite;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.article-hero-section.scrolled .scroll-indicator {
  opacity: 0;
  pointer-events: none;
}

.scroll-indicator svg {
  width: 20px;
  height: 20px;
  margin-top: 0.25rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@keyframes scrollBounceY {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* For portrait images on mobile */
@media (max-width: 768px) {
  .article-hero-section {
    min-height: 0;
    padding: 2rem 1.25rem;
  }

  .article-featured-image-section {
    padding: 1.25rem 1rem 0;
  }

  .article-featured-image-section .article-hero-image {
    max-height: 60vh;
    border-radius: 16px;
  }
}

.article-category {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s var(--easing);
}

.article-overlay.active .article-category {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.article-title {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 1rem;
  line-height: 1.2;
  max-width: 900px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s var(--easing);
}

.article-overlay.active .article-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.article-meta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s var(--easing);
}

.article-overlay.active .article-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* Close Button */
.close-article {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s var(--easing);
  z-index: 10;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  color: var(--text);
}

.article-overlay.active .close-article {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: 0.3s;
}

.close-article:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Article Body */
.article-body {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 3rem 2rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s var(--easing);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Body sits inside the same card as the featured image */
.article-content-card .article-body {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.75rem);
}

/* Prevent all children from overflowing */
.article-body > * {
  max-width: 100%;
}

/* Specific overflow handling for code blocks and wide content */
.article-body pre,
.article-body .wp-block-code,
.article-body table,
.article-body figure,
.article-body iframe,
.article-body img {
  max-width: 100%;
}

.article-overlay.active .article-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.article-body h2 {
  font-size: 1.8rem;
  margin: 2rem 0 1rem;
  color: var(--heading);
}

.article-body h3 {
  font-size: 1.5rem;
  margin: 1.5rem 0 1rem;
  color: var(--heading);
}

.article-body p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: 1.5rem 0;
}

.article-body img:hover {
  transform: scale(1.02);
}

.article-body a {
  color: var(--accent);
  text-decoration: underline;
}

.article-body a:hover {
  color: var(--accentDark);
}

/* Code blocks in article */
.article-body pre {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  line-height: 1.5;
  font-size: 0.875rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.article-body pre code {
  background: transparent;
  padding: 0;
  color: #333;
  display: block;
  white-space: pre !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  font-family: 'Courier New', Consolas, Monaco, monospace;
  max-width: none; /* Allow horizontal scroll */
}

.article-body code {
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: #e83e8c;
}

.article-body .wp-block-code {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.5rem 0;
}

.article-body .wp-block-code code {
  display: block;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
  max-width: 100%;
}

/* Ensure pre inside wp-block-code doesn't overflow */
.article-body .wp-block-code pre {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* WordPress code block specific */
.wp-block-code {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.wp-block-code code,
.wp-block-code pre {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: block !important;
  white-space: pre !important;
  word-wrap: normal !important;
}

/* Dark mode code in articles */
body.dark-mode .article-body pre {
  background: #1e1e1e;
  border-color: #404040;
}

body.dark-mode .article-body pre code {
  color: #d4d4d4;
}

body.dark-mode .article-body code {
  background: rgba(255, 255, 255, 0.1);
  color: #f8c555;
}

/* Scrollbar for article code blocks */
.article-body pre::-webkit-scrollbar {
  height: 8px;
}

.article-body pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.article-body pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.article-body pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .article-body pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .article-body pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .article-body pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Image Grid for consecutive images */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.image-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin: 0;
}

.image-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.image-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.image-grid.grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

/* Continue in next part... */

/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(10px);
  z-index: var(--z-lightbox);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 2rem;
}

.lightbox.active {
  display: flex;
  opacity: 1;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease, opacity 0.15s ease;
}

.lightbox.active img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
  color: #000;
}

.lightbox-close:hover {
  background: white;
  transform: rotate(90deg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  color: #000;
}

.lightbox.active .lightbox-nav {
  opacity: 1;
}

.lightbox-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.lightbox-nav.prev {
  left: 2rem;
}

.lightbox-nav.next {
  right: 2rem;
}

.lightbox-counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* =========================================================
   TABS COMPONENT
   ========================================================= */

.content-tabs {
  margin: 2rem 0;
}

.content-tabs h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.tab-buttons {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-button {
  flex: 1;
  padding: 1rem 1.5rem;
  background: #e8e8e8;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s var(--easing);
  position: relative;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tab-button:hover {
  background: #d8d8d8;
}

.tab-button.active {
  background: #5b9bd5;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3);
}

.tab-button .icon {
  font-size: 1.1rem;
}

.tab-content {
  padding: 2rem;
  background: var(--card-bg);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: none;
  animation: fadeInUp 0.4s var(--easing);
}

.tab-content.active {
  display: block;
}

.tab-content h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--heading);
}

.tab-content p {
  margin-bottom: 1rem;
  line-height: 1.8;
  color: var(--text);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   ACCORDION COMPONENT
   ========================================================= */

.accordion {
  margin: 2rem 0;
}

.accordion-item {
  margin-bottom: 1rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.accordion-header {
  padding: 1.25rem 1.5rem;
  background: #f8f8f8;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-weight: 500;
  color: var(--heading);
}

.accordion-header:hover {
  background: #efefef;
}

.accordion-header.active {
  background: #5b9bd5;
  color: white;
}

.accordion-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--easing);
  background: var(--card-bg);
}

.accordion-content.active {
  max-height: 500px;
}

.accordion-body {
  padding: 1.5rem;
  border-top: 1px solid #e8e8e8;
}

.accordion-body p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 3rem 0;
  list-style: none;
  padding: 0;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.pagination .page-numbers.dots {
  border: none;
  background: none;
}


/* Load More (Infinite Pagination) */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 3rem;
}

.load-more-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--heading);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  box-shadow: var(--shadowCard);
}

.load-more-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.load-more-status {
  text-align: center;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.load-more-sentinel {
  width: 100%;
  height: 1px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  transition: background-color var(--transition-normal);
}

.footer-widgets {
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
}

.footer-widgets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-widget-area .widget {
  margin-bottom: 2rem;
}

.footer-widget-area .widget-title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--heading);
}

.footer-widget-area ul {
  list-style: none;
  padding: 0;
}

.footer-widget-area li {
  margin-bottom: 0.5rem;
}

.footer-widget-area a {
  color: var(--muted);
  transition: color var(--transition-fast);
}

.footer-widget-area a:hover {
  color: var(--accent);
}

.footer-bottom {
  padding: 1.25rem 0;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-text {
  color: var(--muted);
  font-size: 0.875rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: all var(--transition-fast);
}

.social-links a:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.footer-navigation ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-navigation a {
  color: var(--muted);
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.footer-navigation a:hover {
  color: var(--accent);
}

/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 768px) {
  /* Mobile header layout: keep menu + dark toggle visible without zooming */
  .header-content {
    position: relative;
    padding: 0.85rem 1rem;
    gap: 0.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
  }

  .site-branding {
    min-width: 0;
  }

  /* Override inline logo sizing/spacing on small screens so header doesn't overflow */
  .site-branding .text-logo {
    font-size: clamp(24px, 7.6vw, 34px) !important;
    letter-spacing: clamp(2px, 0.9vw, 6px) !important;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: transparent;
    color: var(--heading);
  }

  .dark-mode-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  /* Keep nav in flow below header row (no off-canvas/absolute) */
  .main-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    width: 100%;
    margin-top: 0.25rem;
    border-radius: 16px;
  }

  .posts-grid {
    grid-template-columns: 1fr;
  }
  
  .menu-toggle {
    /* display handled above (flex button) */
    display: flex;
  }
  
  .main-navigation {
    background: var(--card-bg);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .main-navigation.active {
    max-height: 70vh;
  }
  
  .main-navigation ul {
    flex-direction: column;
    gap: 0;
  }
  
  .main-navigation li {
    border-bottom: 1px solid var(--border);
  }
  
  .main-navigation a {
    display: block;
    padding: 1rem 2rem;
  }

  .header-ticker-wrap {
    padding: 0.45rem 1rem 0.55rem;
  }
  
  /* header-content handled above */
  
  .article-overlay {
    padding: 1rem;
  }
  
  .article-container {
    margin: 1rem auto;
    border-radius: var(--r-sm);
  }
  
  .article-header {
    height: 300px;
  }
  
  .article-title {
    font-size: 1.8rem;
  }
  
  .article-body {
    padding: 2rem 1.5rem;
  }
  
  .close-article {
    top: 1rem;
    right: 1rem;
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }
  
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .lightbox-nav.prev {
    left: 1rem;
  }
  
  .lightbox-nav.next {
    right: 1rem;
  }
  
  .tab-buttons {
    flex-direction: column;
  }
  
  .tab-button {
    border-radius: 0;
  }
  
  .tab-button.active {
    transform: translateX(4px);
  }
  
  .tab-content,
  .accordion-body {
    padding: 1.25rem;
  }
  
  .footer-widgets-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  
  .image-grid {
    grid-template-columns: 1fr;
  }
  
  .image-grid img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0.8rem 0.9rem;
    gap: 0.5rem;
  }

  .site-branding .text-logo {
    font-size: clamp(22px, 7.2vw, 30px) !important;
    letter-spacing: clamp(1.5px, 0.8vw, 5px) !important;
  }

  .menu-toggle,
  .dark-mode-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .article-header {
    height: 250px;
  }
  
  .article-title {
    font-size: 1.5rem;
  }
}

/* =========================================================
   NO RESULTS / SEARCH
   ========================================================= */

.no-results {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.no-results h2 {
  margin-bottom: 1rem;
  color: var(--heading);
}

.no-results p {
  color: var(--muted);
  margin-bottom: 2rem;
}

/* =========================================================
   WIDGETS
   ========================================================= */

.before-content-widget-area,
.after-content-widget-area {
  padding: 2rem 0;
}

.widget {
  margin-bottom: 2rem;
}

.widget-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--heading);
}

.widget ul {
  list-style: none;
  padding: 0;
}

.widget li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.widget li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.widget a {
  color: var(--text);
  transition: color var(--transition-fast);
}

.widget a:hover {
  color: var(--accent);
}

/* Search form */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto;
}

.search-form .search-field {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 1rem;
}

.search-form .search-submit {
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-form .search-submit:hover {
  background: var(--accentDark);
}

/* =========================================================
   SINGLE POST STYLES
   ========================================================= */

.single-post-main {
  padding: 0;
}

.single-post-article {
  margin-bottom: 4rem;
}

.single-post-hero {
  position: relative;
  height: 500px;
  overflow: hidden;
  margin-top: var(--single-hero-top-gap);
  margin-bottom: 3rem;
}

.single-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 4rem 2rem 2rem;
}

.single-category {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
}

.single-title {
  font-size: 3rem;
  color: white;
  margin-bottom: 1rem;
  line-height: 1.2;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.single-meta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Content Card for direct URL single post view
   (matches the boxed overlay presentation) */
.single-content-card {
  max-width: var(--article-max-width);
  margin: 2rem auto 4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadowSoft);
}

/* Pull the card slightly upward so it visually connects to the hero */
.single-post-hero + .single-content-card {
  margin-top: 2rem;
}

.single-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

/* When inside the content card, the content should fill the card */
.single-content-card .single-content {
  max-width: none;
  margin: 0;
  padding: 2.75rem 2.75rem 1.25rem;
}

.single-content p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.single-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  margin: 2rem 0;
}

.single-tags {
  max-width: var(--content-max-width);
  margin: 2rem auto;
  padding: 0 2rem;
  font-size: 0.9rem;
}

.single-content-card .single-tags {
  max-width: none;
  margin: 0;
  padding: 0 2.75rem 2.25rem;
}

.single-tags .tags-label {
  font-weight: 600;
  margin-right: 0.5rem;
}

.single-tags a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  margin: 0.25rem;
  transition: all var(--transition-fast);
}

.single-tags a:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.single-share {
  max-width: var(--content-max-width);
  margin: 2rem auto;
  padding: 2rem;
  background: var(--bg);
  border-radius: var(--r-sm);
  text-align: center;
}

.single-content-card .single-share {
  max-width: none;
  margin: 0;
  padding: 1rem 2.75rem 2.75rem;
  background: transparent;
  border-radius: 0;
}

@media (max-width: 768px) {
  .single-content-card {
    border-radius: 18px;
    margin: 1.5rem auto 3rem;
  }

  .single-post-hero + .single-content-card {
    margin-top: -1.75rem;
  }

  .single-content-card .single-content {
    padding: 1.75rem 1.4rem 0.9rem;
  }

  .single-content-card .single-tags {
    padding: 0 1.4rem 1.6rem;
  }

  .single-content-card .single-share {
    padding: 0.75rem 1.4rem 1.75rem;
  }
}

.share-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.share-label {
  font-weight: 600;
  margin-right: 0.5rem;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.share-button:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Post Navigation */
.post-navigation {
  max-width: var(--content-max-width);
  margin: 3rem auto;
  padding: 0 2rem;
}

.post-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.post-navigation a {
  display: block;
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: all var(--transition-fast);
}

.post-navigation a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadowCard);
}

.post-navigation .nav-subtitle {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.post-navigation .nav-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading);
}

.nav-next {
  text-align: right;
}

/* Related Posts */
.related-posts {
  max-width: var(--content-max-width);
  margin: 4rem auto;
  padding: 0 2rem;
}

.related-posts-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.related-post-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.related-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadowCard);
}

.related-post-image {
  display: block;
}

.related-post-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.related-post-content {
  padding: 1rem;
}

.related-post-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.related-post-title a {
  color: var(--heading);
}

.related-post-title a:hover {
  color: var(--accent);
}

.related-post-date {
  font-size: 0.85rem;
  color: var(--muted);
}

/* =========================================================
   PAGE STYLES
   ========================================================= */

.page-main {
  padding: 3rem 0;
}

.page-article {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.page-header {
  margin-bottom: 2rem;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.page-thumbnail {
  margin-bottom: 2rem;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.page-thumbnail img {
  width: 100%;
  height: auto;
}

.page-content {
  line-height: 1.8;
}

.page-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  margin: 2rem 0;
}

.page-links {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* =========================================================
   ARCHIVE STYLES
   ========================================================= */

.archive-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem 2rem;
  background: var(--card-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.archive-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.archive-description {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* =========================================================
   SEARCH STYLES
   ========================================================= */

.search-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem 2rem;
  background: var(--card-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.search-title {
  font-size: 2rem;
}

.search-title span {
  color: var(--accent);
}

/* =========================================================
   404 ERROR PAGE
   ========================================================= */

.error-404-main {
  padding: 6rem 2rem;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.error-404-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.error-404-title {
  font-size: 8rem;
  color: var(--accent);
  margin-bottom: 1rem;
  line-height: 1;
}

.error-404-subtitle {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.error-404-text {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.error-404-search {
  margin-bottom: 2rem;
}

.error-404-actions .button {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--accent);
  color: white;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.error-404-actions .button:hover {
  background: var(--accentDark);
  transform: translateY(-2px);
}

/* =========================================================
   COMMENTS (BASIC STYLING)
   ========================================================= */

.comments-area {
  max-width: var(--content-max-width);
  margin: 3rem auto;
  padding: 0 2rem;
}

.comments-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: var(--r-sm);
}

.comment-author {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.comment-metadata {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.comment-content p {
  margin-bottom: 1rem;
}

.reply {
  margin-top: 1rem;
}

.reply a {
  font-size: 0.85rem;
  color: var(--accent);
}

.comment-respond {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.comment-reply-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.comment-form {
  display: grid;
  gap: 1rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  color: var(--text);
}

.comment-form textarea {
  min-height: 150px;
  resize: vertical;
}

.comment-form input[type="submit"] {
  padding: 0.75rem 2rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.comment-form input[type="submit"]:hover {
  background: var(--accentDark);
}

/* =========================================================
   RESPONSIVE - SINGLE POST
   ========================================================= */

@media (max-width: 768px) {
  .single-post-hero {
    height: 350px;
  }
  
  .single-title {
    font-size: 2rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .error-404-title {
    font-size: 5rem;
  }
  
  .error-404-subtitle {
    font-size: 1.5rem;
  }
  
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
  
  .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }
  
  .nav-next {
    text-align: left;
  }
}

/* =========================================================
   WPBAKERY PAGE BUILDER COMPATIBILITY
   ========================================================= */

/* Hide shortcode text that might appear */
.vc_row[class*="vc_column"],
.wpb_content_element .wpb_wrapper > [class*="vc_"] {
  /* Ensure Visual Composer elements are visible */
}

/* Ensure VC shortcodes don't show as text */
.article-body .vc_row:before,
.single-content .vc_row:before,
.entry-content .vc_row:before,
.post-content .vc_row:before {
  content: none !important;
}

/* WPBakery row styling */
.vc_row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.vc_column_container {
  padding-left: 0;
  padding-right: 0;
}

.wpb_column {
  margin-bottom: 1.5rem;
}

.wpb_wrapper {
  position: relative;
}

/* Text columns */
.wpb_text_column {
  line-height: 1.8;
}

.wpb_text_column p {
  margin-bottom: 1rem;
}

/* Images in VC */
.wpb_single_image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* AJAX-loaded overlay content needs the same alignment helpers as direct URLs. */
.article-body .wpb_single_image,
.article-body .wp-block-image,
.article-body figure,
.article-body .wp-caption {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.article-body .vc_align_center,
.article-body .wp-block-image.aligncenter,
.article-body figure.aligncenter,
.article-body .wp-caption.aligncenter,
.article-body .has-text-align-center {
  text-align: center;
}

.article-body .wpb_single_image .vc_single_image-wrapper {
  display: inline-block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.article-body .wpb_single_image.vc_align_left {
  text-align: left;
}

.article-body .wpb_single_image.vc_align_right {
  text-align: right;
}

.article-body .wpb_single_image.vc_align_left .vc_single_image-wrapper {
  margin-left: 0;
  margin-right: auto;
}

.article-body .wpb_single_image.vc_align_right .vc_single_image-wrapper {
  margin-left: auto;
  margin-right: 0;
}

/* VC column gap */
.vc_column-gap-1 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.vc_column-gap-2 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.vc_column-gap-3 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

/* Dark mode for WPBakery */
[data-theme="dark"] .vc_row {
  color: var(--text);
}

[data-theme="dark"] .wpb_text_column {
  color: var(--text);
}

[data-theme="dark"] .wpb_text_column h1,
[data-theme="dark"] .wpb_text_column h2,
[data-theme="dark"] .wpb_text_column h3,
[data-theme="dark"] .wpb_text_column h4,
[data-theme="dark"] .wpb_text_column h5,
[data-theme="dark"] .wpb_text_column h6 {
  color: var(--heading);
}


/* =========================================================
   TYPOGRAPHY
   Titles: Noto Sans
   Body: Open Sans
   ========================================================= */

/* Titles / headings */
h1, h2, h3, h4, h5, h6,
.post-title,
.single-title,
.article-title,
.page-title,
.archive-title,
.widget-title {
  font-family: var(--font-title);
}

/* Main body text */
.entry-content,
.single-content,
.article-body,
.post-excerpt,
.post-meta,
.comment-content,
.site-description {
  font-family: var(--font-body);
}

/* ================================================================
   PAGE BOXED LAYOUT STYLES
   Similar to single post boxed layout for About & Contact pages
   ================================================================ */

/* Featured Image Section Inside Card */
.page-featured-image-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1.35rem 1.35rem 0;
  background: var(--card-bg);
}

.page-featured-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* Page Header Inside Card */
/* Page Hero (title above featured image, like single post structure) */
.page-hero {
  max-width: var(--article-max-width);
  margin: 0 auto 0;
}

.page-hero-inner {
  text-align: center;
  padding: 2.15rem 2rem 3rem;
  border-radius: 22px;
  border: 1px solid rgba(13, 148, 136, 0.28);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(13, 148, 136, 0.9) 55%, rgba(20, 184, 166, 0.86));
  box-shadow: 0 14px 38px rgba(15, 118, 110, 0.18);
  position: relative;
  overflow: hidden;
}

.page-hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.28), transparent 58%),
    radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.12), transparent 45%);
}

.page-hero-inner > * {
  position: relative;
  z-index: 1;
}

.page-hero-inner .page-title-inner {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.18);
}

.page-hero-inner .page-subtitle-inner {
  color: rgba(248, 250, 252, 0.92);
  opacity: 1;
}

.page-hero-inner .page-label-inner {
  color: #ecfeff;
  background: rgba(15, 23, 42, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Avoid visual overlap between page hero and featured-image card */
.page-hero + .page-content-card.has-featured-image {
  margin-top: 0.9rem;
}

.page-hero + .page-content-card:not(.has-featured-image) {
  margin-top: 0.85rem;
}

.page-header-inner {
  text-align: center;
  padding: 1.25rem 2rem 1rem;
  background: var(--card-bg);
}

.page-label-inner {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.6px;
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.page-title-inner {
  font-size: 3rem;
  color: var(--heading);
  margin: 0 0 0.75rem;
  line-height: 1.15;
  font-weight: 700;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.page-subtitle-inner {
  color: var(--text);
  opacity: 0.8;
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Content Card for pages (matches single-content-card) */
.page-content-card {
  max-width: var(--article-max-width);
  margin: 1.25rem auto 4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadowSoft);
}

.page-content {
  max-width: none;
  margin: 0;
  padding: 2rem 2.75rem 2.75rem;
  background: var(--card-bg);
}


/* Agenda page banner block — align plugin output with boxed page content */
.agenda-event-banner-block {
  margin-top: 1rem;
}

.page-content .agenda-event-banner-block .seb-event-wrapper {
  max-width: 100%;
  padding: 0;
}

.page-content .agenda-event-banner-block .seb-event-header {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.page-content p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  color: var(--text);
}

.page-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: var(--text);
  font-weight: 600;
}

.page-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  color: var(--text);
  font-weight: 600;
}

.page-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 600;
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  margin: 2rem 0;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

.page-content blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background: var(--bg);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  font-style: italic;
}

.page-content a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-content a:hover {
  color: var(--accent-hover, #2563eb);
  text-decoration: underline;
}

/* Page links (pagination for multi-page content) */
.page-content .page-links {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.page-content .page-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: all var(--transition-fast);
}

.page-content .page-links a:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  text-decoration: none;
}

[data-theme="dark"] .page-hero-inner {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.78), rgba(13, 148, 136, 0.74) 55%, rgba(20, 184, 166, 0.68));
  border-color: rgba(94, 234, 212, 0.18);
  box-shadow: 0 16px 38px rgba(6, 95, 70, 0.22);
}

[data-theme="dark"] .page-label-inner {
  background: rgba(2, 6, 23, 0.24);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Responsive adjustments for page hero */
@media (max-width: 768px) {
  .page-hero-inner {
    padding: 1.5rem 1rem 2.25rem;
    border-radius: 18px;
  }

  .page-hero + .page-content-card.has-featured-image {
    margin-top: 0.7rem;
  }
}

@media (max-width: 480px) {
  .page-hero-inner {
    padding: 1rem 0.75rem 1.65rem;
    border-radius: 16px;
  }

  .page-hero + .page-content-card.has-featured-image {
    margin-top: 0.55rem;
  }
}

/* Responsive adjustments for page boxed layout */
@media (max-width: 768px) {
  .page-featured-image-section {
    padding: 1.5rem 1.5rem 0;
  }

  .page-featured-image {
    max-height: 400px;
    border-radius: 10px;
  }

  .page-header-inner {
    padding: 1.5rem 1.5rem 1rem;
  }

  .page-title-inner {
    font-size: 2.25rem;
  }

  .page-subtitle-inner {
    font-size: 1rem;
  }

  .page-label-inner {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .page-content-card {
    border-radius: 18px;
    margin: 1.5rem auto 3rem;
  }

  .page-content {
    padding: 1.5rem 1.75rem 1.75rem;
  }

  .page-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }

  .page-content h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .page-featured-image-section {
    padding: 1rem 1rem 0;
  }

  .page-featured-image {
    max-height: 300px;
    border-radius: 8px;
  }

  .page-header-inner {
    padding: 1rem 1rem 0.75rem;
  }

  .page-title-inner {
    font-size: 1.95rem;
  }

  .page-label-inner {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }

  .page-content {
    padding: 1rem 1.25rem 1.5rem;
  }
}


/* ================================================================
   PAGE OVERLAY STYLES
   For opening About/Contact pages in overlay instead of new page
   ================================================================ */

#pageOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(10px);
  z-index: var(--z-overlay);
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#pageOverlay.active {
  opacity: 1;
}

#pageOverlay.closing {
  opacity: 0;
}

.page-overlay-container {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  position: relative;
}

#pageOverlayContent {
  max-width: var(--article-max-width);
  width: 100%;
  margin: 0 auto;
  position: relative;
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#pageOverlay.active #pageOverlayContent {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.2s;
}

/* Close button for page overlay */
#closePageOverlay {
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--heading);
  font-size: 24px;
  line-height: 1;
}

#closePageOverlay:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: rotate(90deg);
}

#closePageOverlay::before {
  content: '×';
  font-size: 32px;
  font-weight: 300;
}

/* Loading state */
.page-overlay-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text);
}

.page-overlay-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--heading);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.page-overlay-loading p {
  font-size: 1rem;
  opacity: 0.7;
}

/* Error state */
.page-overlay-error {
  text-align: center;
  padding: 3rem;
  color: var(--text);
}

.page-overlay-error p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.page-overlay-error .button {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--accent);
  color: white;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: all 0.3s ease;
}

.page-overlay-error .button:hover {
  background: var(--accent2);
  transform: translateY(-2px);
}

/* Body state when overlay is open */
body.page-overlay-open {
  overflow: hidden;
}

[data-theme="dark"] #pageOverlay {
  background: rgba(2, 6, 23, 0.88);
}

[data-theme="dark"] #closePageOverlay {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

[data-theme="dark"] #closePageOverlay:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Adjust page content in overlay */
/* Keep overlay presentation visually consistent with post/card pages */
#pageOverlay {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.94));
}

[data-theme="dark"] #pageOverlay {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.78), rgba(15, 23, 42, 0.74));
}

#pageOverlay .page-article-boxed {
  margin: 0;
  padding-top: 0.5rem;
}

#pageOverlay .page-hero {
  margin-bottom: 0;
}

#pageOverlay .page-content-card {
  box-shadow: var(--shadowSoft);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .page-overlay-container {
    padding: 1rem;
  }
  
  #closePageOverlay {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
  
  #closePageOverlay::before {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .page-overlay-container {
    padding: 0.5rem;
  }
  
  #closePageOverlay {
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
  }
}

/* =========================================================
   PATCH (2026-02-23): Expanding Tiles overlay hero should not cover text
   Make overlay post hero behave like page hero (boxed + non-sticky)
   ========================================================= */
.article-overlay {
  scroll-padding-top: 1rem;
}

.article-overlay .article-hero-section {
  width: min(var(--article-max-width), calc(100% - 2.5rem)) !important;
  margin: 1rem auto 0 !important;
  border-radius: 22px;
  border: 1px solid rgba(13, 148, 136, 0.28);
  box-shadow: 0 14px 38px rgba(15, 118, 110, 0.18);
  overflow: hidden;
}

.article-overlay .article-content-card {
  margin-top: 0.9rem;
}

.article-overlay .article-content-card .article-featured-image-section {
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.article-overlay .article-content-card .article-body {
  padding-top: clamp(1.4rem, 3vw, 2.25rem);
}

.article-overlay .article-hero-section.scrolled {
  position: relative !important;
  top: auto !important;
  min-height: 0;
  padding: clamp(2.2rem, 6vw, 4rem) 2rem !important;
  box-shadow: 0 14px 38px rgba(15, 118, 110, 0.18) !important;
}

.article-overlay .article-hero-section.scrolled .article-title {
  font-size: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.article-overlay .article-hero-section.scrolled .article-category,
.article-overlay .article-hero-section.scrolled .article-meta {
  display: block !important;
}

.article-overlay .article-hero-section.hidden {
  transform: none !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .article-overlay .article-hero-section {
    width: calc(100% - 1.5rem) !important;
    margin-top: 0.75rem !important;
    border-radius: 18px;
  }

  .article-overlay .article-content-card {
    margin-top: 0.75rem;
  }

  .article-overlay .article-hero-section.scrolled {
    padding: 2rem 1.25rem !important;
  }

  .article-overlay .article-hero-section.scrolled .article-title {
    font-size: 1.8rem !important;
  }
}

/* =========================================================
   PATCH (2026-02-23): Desktop close button alignment + light-mode accent tuning
   - Move overlay close button to top-right corner of featured image/card (desktop)
   - Improve light-mode accent/glass styles for overlay elements
   ========================================================= */

/* Light mode overlay background + accent (default/base) */
.article-overlay.active {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
}

.article-overlay .article-hero-section {
  border-color: rgba(39, 182, 164, 0.22) !important;
  box-shadow: 0 14px 38px rgba(15, 118, 110, 0.14) !important;
}

.article-overlay .article-content-card {
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

/* Close button visually attached to the featured image/card corner */
.article-overlay .close-article {
  top: 1.45rem;
  right: calc((100% - min(var(--article-max-width), calc(100% - 2.5rem))) / 2 + 0.65rem);
  width: 46px;
  height: 46px;
  font-size: 1.65rem;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(39, 182, 164, 0.26);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.article-overlay .close-article:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(39, 182, 164, 0.42);
  color: var(--accentDark);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18), 0 0 0 4px rgba(39, 182, 164, 0.10);
}

/* Dark mode: keep deeper contrast while preserving position fix */
[data-theme="dark"] .article-overlay.active {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.80), rgba(15, 23, 42, 0.76));
}

[data-theme="dark"] .article-overlay .article-hero-section {
  border-color: rgba(45, 212, 191, 0.20) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38) !important;
}

[data-theme="dark"] .article-overlay .article-content-card {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .article-overlay .close-article {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .article-overlay .close-article:hover {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(45, 212, 191, 0.28);
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(45, 212, 191, 0.10);
}

/* Tablet/mobile: keep close button comfortably reachable and aligned */
@media (max-width: 1024px) {
  .article-overlay .close-article {
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
  }
}

/* =========================================================
   PATCH (2026-02-23): Page overlay close button docking
   - About/Contact: place close button at top-right of the content card (featured-image box)
   - Agenda: place close button at top-right of the agenda content card
   ========================================================= */

/* Ensure the card can host an absolute-positioned close button */
#pageOverlayContent .page-content-card,
#pageOverlayContent .agenda-content-card {
  position: relative;
}

/* When JS docks the button into the card, switch to absolute positioning */
#pageOverlay #closePageOverlay.in-card {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(39, 182, 164, 0.22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

#pageOverlay #closePageOverlay.in-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(39, 182, 164, 0.38);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18), 0 0 0 4px rgba(39, 182, 164, 0.10);
}

/* Dark mode variant */
[data-theme="dark"] #pageOverlay #closePageOverlay.in-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  color: #fff;
}

[data-theme="dark"] #pageOverlay #closePageOverlay.in-card:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(45, 212, 191, 0.28);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(45, 212, 191, 0.10);
}

@media (max-width: 768px) {
  #pageOverlay #closePageOverlay.in-card {
    top: 0.85rem;
    right: 0.85rem;
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   UI POLISH OVERRIDES (v1.3)
   ========================================================= */

html {
  scroll-behavior: smooth;
}

.site-header {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header.is-scrolled .header-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.main-navigation a {
  border-radius: var(--r-pill);
  padding: 0.52rem 0.85rem;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.main-navigation .current-menu-item > a::after {
  bottom: -3px;
}

.post-card {
  transition: transform 0.35s var(--easing), box-shadow 0.35s var(--easing), border-color 0.35s var(--easing), background-color 0.35s var(--easing);
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.post-title span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}

.post-card:hover .post-title span {
  background-size: 100% 1px;
}

.post-card.reveal-ready {
  opacity: 0;
  transform: translateY(22px);
}

.post-card.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

button,
.load-more-btn,
input[type="submit"],
.wp-element-button {
  border-radius: var(--r-pill);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

button:hover,
.load-more-btn:hover,
input[type="submit"]:hover,
.wp-element-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  border-radius: var(--r-sm);
  padding: 0.68rem 0.82rem;
  background: var(--card-bg);
  color: var(--text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: calc(var(--z-header) + 1);
  box-shadow: 0 12px 26px rgba(39, 182, 164, 0.38);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  box-shadow: 0 16px 30px rgba(39, 182, 164, 0.48);
}

@media (max-width: 768px) {
  .header-content {
    padding: 1rem;
  }

  .main-navigation a {
    padding: 0.75rem 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .back-to-top,
  .post-card,
  .site-header {
    transition: none !important;
  }
}

/* =========================================================
   VISUAL PREMIUM EXTENSION (v1.3.1)
   ========================================================= */

body {
  background-image:
    radial-gradient(circle at 8% 12%, rgba(39, 182, 164, 0.08) 0%, transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(41, 194, 155, 0.07) 0%, transparent 28%);
  background-attachment: fixed;
}

[data-theme="dark"] body,
body.dark-mode {
  background-image:
    radial-gradient(circle at 10% 18%, rgba(45, 212, 191, 0.12) 0%, transparent 26%),
    radial-gradient(circle at 90% 82%, rgba(20, 184, 166, 0.1) 0%, transparent 30%);
}

.site-main > .container {
  position: relative;
}

.site-main > .container::before {
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: 28px;
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  z-index: 0;
  pointer-events: none;
}

.site-main > .container > * {
  position: relative;
  z-index: 1;
}

.post-content {
  padding: 1.4rem 1.35rem 1.2rem;
}

.post-title {
  letter-spacing: 0.01em;
}

.post-excerpt {
  font-size: 0.96rem;
  line-height: 1.72;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.read-more::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.post-card:hover .read-more::after {
  transform: translateX(3px);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: calc(var(--z-header) + 2);
  box-shadow: 0 0 12px rgba(39, 182, 164, 0.65);
}

@media (max-width: 768px) {
  .site-main > .container::before {
    inset: -0.45rem;
    border-radius: 18px;
  }

  .post-content {
    padding: 1.15rem 1rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .read-more::after {
    transition: none !important;
  }
}

/* =========================================================
   CATEGORY MOOD SYSTEM (v1.3.2)
   ========================================================= */

/* Defaults for category archive pages */
body.archive.category {
  --mood-a: var(--accent);
  --mood-b: var(--accent2);
  --mood-glow: rgba(39, 182, 164, 0.22);
  --mood-icon: "✦";
}

/* Per-category mood palettes */
body.archive.category-personal {
  --mood-a: #ff6b81;
  --mood-b: #ff8cc6;
  --mood-glow: rgba(255, 107, 129, 0.28);
  --mood-icon: "✿";
}

body.archive.category-archipelago {
  --mood-a: #1abc9c;
  --mood-b: #2dd4bf;
  --mood-glow: rgba(26, 188, 156, 0.28);
  --mood-icon: "◈";
}

body.archive.category-travel {
  --mood-a: #3b82f6;
  --mood-b: #7dd3fc;
  --mood-glow: rgba(59, 130, 246, 0.28);
  --mood-icon: "✈";
}

body.archive.category-scraps {
  --mood-a: #8b5cf6;
  --mood-b: #c084fc;
  --mood-glow: rgba(139, 92, 246, 0.28);
  --mood-icon: "✎";
}

body.archive.category-flavors {
  --mood-a: #f59e0b;
  --mood-b: #fb7185;
  --mood-glow: rgba(245, 158, 11, 0.28);
  --mood-icon: "✹";
}

/* Mood-aware archive hero */
body.archive.category .archive-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mood-a) 10%, var(--card-bg)), color-mix(in srgb, var(--mood-b) 8%, var(--card-bg))),
    var(--card-bg);
  border-color: color-mix(in srgb, var(--mood-a) 34%, var(--border));
  box-shadow: 0 12px 28px var(--mood-glow);
}

body.archive.category .archive-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 14%, color-mix(in srgb, var(--mood-b) 24%, transparent) 0%, transparent 26%),
    radial-gradient(circle at 10% 82%, color-mix(in srgb, var(--mood-a) 22%, transparent) 0%, transparent 30%);
}

body.archive.category .archive-title {
  position: relative;
  display: inline-block;
  color: var(--heading);
  letter-spacing: 0.01em;
}

body.archive.category .archive-title::before {
  content: var(--mood-icon);
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--mood-a);
}

body.archive.category .archive-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mood-a), var(--mood-b));
}

body.archive.category .archive-description {
  color: color-mix(in srgb, var(--text) 78%, var(--mood-a));
}

/* Mood edge on post cards in category archives */
body.archive.category .post-card {
  border-top: 2px solid color-mix(in srgb, var(--mood-a) 52%, transparent);
}

body.archive.category .post-card:hover {
  box-shadow: 0 18px 42px var(--mood-glow);
}

/* Make active nav item reflect current category mood */
body.archive.category .main-navigation .current-menu-item > a,
body.archive.category .main-navigation .current-menu-ancestor > a {
  background: color-mix(in srgb, var(--mood-a) 16%, transparent);
}

body.archive.category .main-navigation .current-menu-item > a::after,
body.archive.category .main-navigation .current-menu-ancestor > a::after {
  background: linear-gradient(90deg, var(--mood-a), var(--mood-b));
}

[data-theme="dark"] body.archive.category .archive-header,
body.dark-mode.archive.category .archive-header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mood-a) 20%, var(--card-bg)), color-mix(in srgb, var(--mood-b) 14%, var(--card-bg))),
    var(--card-bg);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--mood-glow) 86%, rgba(0, 0, 0, 0.4));
}

/* =========================================================
   CINEMATIC CARD FOCUS (v1.3.5)
   ========================================================= */

.posts-grid {
  --focus-x: 50%;
  --focus-y: 20%;
  position: relative;
}

.posts-grid::before {
  content: "";
  position: absolute;
  inset: -0.35rem;
  pointer-events: none;
  border-radius: 22px;
  opacity: 0;
  background: radial-gradient(
    520px circle at var(--focus-x) var(--focus-y),
    color-mix(in srgb, var(--accent) 16%, transparent) 0%,
    transparent 62%
  );
  transition: opacity 0.26s ease;
}

.posts-grid.has-active-card::before {
  opacity: 1;
}

.posts-grid.has-active-card .post-card {
  opacity: 0.68;
  filter: saturate(0.90) brightness(0.96);
  transform: translateY(4px) scale(0.985);
}

.posts-grid.has-active-card .post-card.is-active {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(-8px) scale(1.014) !important;
  z-index: 3;
  background: var(--ambient-card-focus-bg);
  border-color: var(--ambient-card-focus-border);
  box-shadow:
    var(--ambient-card-focus-shadow),
    0 0 0 1px var(--ambient-card-focus-border),
    0 0 0 7px color-mix(in srgb, var(--ambient-card-focus-ring) 40%, transparent);
}

.posts-grid.has-active-card .post-card.is-active .post-image {
  transform: scale(1.04) !important;
  filter: none !important;
}

.posts-grid.has-active-card .post-card.is-active .post-content,
.posts-grid.has-active-card .post-card.is-active .post-title,
.posts-grid.has-active-card .post-card.is-active .post-excerpt,
.posts-grid.has-active-card .post-card.is-active .post-meta,
.posts-grid.has-active-card .post-card.is-active .read-more {
  filter: none !important;
  opacity: 1 !important;
}

[data-theme="dark"] .posts-grid.has-active-card .post-card,
body.dark-mode .posts-grid.has-active-card .post-card {
  opacity: 0.5;
  filter: saturate(0.74) brightness(0.86) blur(0.9px);
  transform: translateY(6px) scale(0.978);
}

[data-theme="dark"] .posts-grid.has-active-card .post-card.is-active,
body.dark-mode .posts-grid.has-active-card .post-card.is-active {
  transform: translateY(-10px) scale(1.02) !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .posts-grid::before {
    display: none;
  }

  .posts-grid.has-active-card .post-card,
  .posts-grid.has-active-card .post-card.is-active {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow: var(--shadowCard);
  }
}

/* =========================================================
   AMBIENT TIME THEME + CATEGORY GLYPH SYSTEM (v1.4.0)
   ========================================================= */

/* Time-based ambience: subtle only, no heavy animation */
html[data-day-phase="morning"] body {
  --ambient-a: rgba(255, 209, 102, 0.18);
  --ambient-b: rgba(96, 165, 250, 0.13);
}

html[data-day-phase="afternoon"] body {
  --ambient-a: rgba(56, 189, 248, 0.14);
  --ambient-b: rgba(52, 211, 153, 0.12);
}

html[data-day-phase="evening"] body {
  --ambient-a: rgba(251, 146, 60, 0.17);
  --ambient-b: rgba(248, 113, 113, 0.13);
}

html[data-day-phase="night"] body {
  --ambient-a: rgba(129, 140, 248, 0.16);
  --ambient-b: rgba(45, 212, 191, 0.11);
}

body {
  --ambient-a: rgba(39, 182, 164, 0.08);
  --ambient-b: rgba(41, 194, 155, 0.07);
  background-image:
    radial-gradient(circle at 8% 12%, var(--ambient-a) 0%, transparent 24%),
    radial-gradient(circle at 92% 88%, var(--ambient-b) 0%, transparent 28%);
}

[data-theme="dark"] body,
body.dark-mode {
  --ambient-a: color-mix(in srgb, var(--ambient-a) 120%, rgba(0, 0, 0, 0.0));
  --ambient-b: color-mix(in srgb, var(--ambient-b) 120%, rgba(0, 0, 0, 0.0));
}

/* Category glyph system */
.category-badge,
.post-category,
.single-category,
.article-category {
  --cat-glyph: "✦";
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.category-badge::before,
.post-category::before,
.single-category::before,
.article-category::before {
  content: var(--cat-glyph);
  font-size: 0.86em;
  line-height: 1;
  opacity: 0.9;
}

.category-badge.category-personal,
.post-category.category-personal,
.single-category.category-personal,
.article-category.category-personal {
  --cat-glyph: "✿";
}

.category-badge.category-scraps,
.post-category.category-scraps,
.single-category.category-scraps,
.article-category.category-scraps {
  --cat-glyph: "✎";
}

.category-badge.category-flavors,
.post-category.category-flavors,
.single-category.category-flavors,
.article-category.category-flavors {
  --cat-glyph: "✹";
}

.category-badge.category-archipelago,
.post-category.category-archipelago,
.single-category.category-archipelago,
.article-category.category-archipelago {
  --cat-glyph: "◈";
}

.category-badge.category-travel,
.post-category.category-travel,
.single-category.category-travel,
.article-category.category-travel {
  --cat-glyph: "✈";
}

@media (max-width: 768px) {
  .category-badge,
  .post-category,
  .single-category,
  .article-category {
    gap: 0.28rem;
  }
}

/* =========================================================
   SMART EMPTY SPACE (v1.4.1)
   CSS-first rhythm system: no runtime JS needed.
   ========================================================= */

:root {
  --space-2xs: clamp(0.35rem, 0.5vw, 0.55rem);
  --space-xs: clamp(0.6rem, 0.9vw, 0.85rem);
  --space-sm: clamp(0.9rem, 1.2vw, 1.2rem);
  --space-md: clamp(1.2rem, 1.8vw, 1.8rem);
  --space-lg: clamp(1.7rem, 2.6vw, 2.8rem);
  --space-xl: clamp(2.3rem, 4vw, 4rem);
}

/* Base vertical rhythm by context */
body.home,
body.blog,
body.archive,
body.search {
  --space-flow: var(--space-lg);
}

body.single-post,
body.page {
  --space-flow: var(--space-xl);
}

.site-main {
  padding-block: var(--space-md);
}

/* Keep content blocks breathing consistently */
.site-main > .container > * + * {
  margin-top: var(--space-flow);
}

/* Widgets before/after grid should feel intentional, not glued */
.before-content-widget-area,
.after-content-widget-area {
  margin-block: var(--space-md);
}

.before-content-widget-area:empty,
.after-content-widget-area:empty {
  display: none;
}

/* Header-like cards keep stronger separation from grid */
.archive-header,
.search-header,
.no-results {
  margin-bottom: var(--space-lg);
}

.posts-grid {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.load-more-wrap {
  margin-top: var(--space-md);
}

.load-more-status {
  margin-top: var(--space-xs);
}

/* Single-post flow tuning */
.single-post-article {
  margin-bottom: var(--space-xl);
}

.single-content-card {
  margin-bottom: var(--space-xl);
}

.single-content-card .single-content > * + * {
  margin-top: var(--space-sm);
}

.related-posts {
  margin-top: var(--space-xl);
}

.comments-area {
  margin-top: var(--space-xl);
}

/* Overlay article readability rhythm */
.article-content-card .article-body > * + * {
  margin-top: var(--space-sm);
}

@media (max-width: 768px) {
  .site-main {
    padding-block: var(--space-sm);
  }

  .site-main > .container > * + * {
    margin-top: var(--space-md);
  }

  .archive-header,
  .search-header,
  .no-results {
    padding: 1.5rem 1rem;
  }

  .single-content-card .single-content {
    padding: 1.25rem 1rem 0.85rem;
  }

  .single-content-card .single-share {
    padding: 0.75rem 1rem 1.25rem;
  }
}

/* =========================================================
   SINGLE HERO IMAGE - NO CROP (v1.4.2)
   Match direct URL behavior with expanding-tiles presentation.
   ========================================================= */

.single-post-hero {
  height: auto;
  min-height: 0;
  max-width: var(--article-max-width);
  margin-left: auto;
  margin-right: auto;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  overflow: hidden;
}

.single-hero-image {
  width: 100%;
  height: auto;
  max-height: var(--hero-media-max-height);
  object-fit: contain;
  object-position: center center;
  background: var(--card-bg);
}

/* Keep text legible while preserving full image */
.single-hero-overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}

@media (max-width: 768px) {
  .single-post-hero {
    border-radius: 16px;
    margin-top: 0.75rem;
  }

  .single-hero-image {
    max-height: min(62vh, 680px);
  }
}

/* =========================================================
   SIGNATURE PULL QUOTE + IMAGE CAPTION CARD (v1.4.3)
   ========================================================= */

/* Signature pull quote */
body.dramatic-quote-enabled .article-body blockquote,
body.dramatic-quote-enabled .single-content blockquote,
body.dramatic-quote-enabled .page-content blockquote,
body.dramatic-quote-enabled .wp-block-quote {
  position: relative;
  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
  padding: clamp(1rem, 2.4vw, 1.7rem) clamp(1rem, 2.6vw, 1.9rem);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--card-bg)), color-mix(in srgb, var(--accent2) 6%, var(--card-bg))),
    var(--card-bg);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  font-style: normal;
}

body.dramatic-quote-enabled .article-body blockquote::before,
body.dramatic-quote-enabled .single-content blockquote::before,
body.dramatic-quote-enabled .page-content blockquote::before,
body.dramatic-quote-enabled .wp-block-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.22em;
  left: 0.35em;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-family: Georgia, 'Times New Roman', serif;
  color: color-mix(in srgb, var(--accent) 58%, transparent);
  line-height: 1;
  pointer-events: none;
}

body.dramatic-quote-enabled .article-body blockquote p,
body.dramatic-quote-enabled .single-content blockquote p,
body.dramatic-quote-enabled .page-content blockquote p,
body.dramatic-quote-enabled .wp-block-quote p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 92%, var(--accentDark));
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.7;
}

body.dramatic-quote-enabled .article-body blockquote cite,
body.dramatic-quote-enabled .single-content blockquote cite,
body.dramatic-quote-enabled .page-content blockquote cite,
body.dramatic-quote-enabled .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Image caption card */
.article-body figure,
.single-content figure,
.page-content figure,
.wp-caption {
  margin: clamp(1rem, 2.8vw, 2rem) 0;
}

.article-body figcaption,
.single-content figcaption,
.page-content figcaption,
.wp-caption-text,
.gallery-caption {
  margin-top: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--card-bg) 86%, var(--accent) 5%);
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: left;
}

/* Spotify embeds: disable WordPress aspect-ratio wrappers that create blank space. */
.article-body .wp-block-embed.is-provider-spotify,
.single-content .wp-block-embed.is-provider-spotify,
.page-content .wp-block-embed.is-provider-spotify,
.article-body .wp-block-embed-spotify,
.single-content .wp-block-embed-spotify,
.page-content .wp-block-embed-spotify {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.article-body .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
.single-content .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
.page-content .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
.article-body .wp-block-embed-spotify .wp-block-embed__wrapper,
.single-content .wp-block-embed-spotify .wp-block-embed__wrapper,
.page-content .wp-block-embed-spotify .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 0 !important;
  min-height: var(--spotify-embed-height, 152px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card-bg);
}

.article-body .wp-block-embed.is-provider-spotify.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.single-content .wp-block-embed.is-provider-spotify.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.page-content .wp-block-embed.is-provider-spotify.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.article-body .wp-block-embed-spotify.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.single-content .wp-block-embed-spotify.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.page-content .wp-block-embed-spotify.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
  display: none !important;
  content: none !important;
}

.article-body .wp-block-embed.is-provider-spotify iframe,
.single-content .wp-block-embed.is-provider-spotify iframe,
.page-content .wp-block-embed.is-provider-spotify iframe,
.article-body .wp-block-embed-spotify iframe,
.single-content .wp-block-embed-spotify iframe,
.page-content .wp-block-embed-spotify iframe,
.article-body iframe[src*="open.spotify.com/embed"],
.single-content iframe[src*="open.spotify.com/embed"],
.page-content iframe[src*="open.spotify.com/embed"] {
  position: static !important;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--spotify-embed-height, 152px);
  margin-left: auto;
  margin-right: auto;
  border: 0;
  border-radius: inherit;
  background: var(--card-bg);
}

[data-theme="dark"] .article-body .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
[data-theme="dark"] .single-content .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
[data-theme="dark"] .page-content .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
[data-theme="dark"] .article-body .wp-block-embed-spotify .wp-block-embed__wrapper,
[data-theme="dark"] .single-content .wp-block-embed-spotify .wp-block-embed__wrapper,
[data-theme="dark"] .page-content .wp-block-embed-spotify .wp-block-embed__wrapper,
[data-theme="dark"] .article-body iframe[src*="open.spotify.com/embed"],
[data-theme="dark"] .single-content iframe[src*="open.spotify.com/embed"],
[data-theme="dark"] .page-content iframe[src*="open.spotify.com/embed"],
body.dark-mode .article-body .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
body.dark-mode .single-content .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
body.dark-mode .page-content .wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
body.dark-mode .article-body .wp-block-embed-spotify .wp-block-embed__wrapper,
body.dark-mode .single-content .wp-block-embed-spotify .wp-block-embed__wrapper,
body.dark-mode .page-content .wp-block-embed-spotify .wp-block-embed__wrapper,
body.dark-mode .article-body iframe[src*="open.spotify.com/embed"],
body.dark-mode .single-content iframe[src*="open.spotify.com/embed"],
body.dark-mode .page-content iframe[src*="open.spotify.com/embed"] {
  background: #121212;
}

[data-theme="dark"] .article-body blockquote,
[data-theme="dark"] .single-content blockquote,
[data-theme="dark"] .page-content blockquote,
[data-theme="dark"] .wp-block-quote,
body.dark-mode .article-body blockquote,
body.dark-mode .single-content blockquote,
body.dark-mode .page-content blockquote,
body.dark-mode .wp-block-quote {
  border-color: color-mix(in srgb, var(--accent2) 42%, rgba(255, 255, 255, 0.2));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .article-body blockquote p,
[data-theme="dark"] .single-content blockquote p,
[data-theme="dark"] .page-content blockquote p,
[data-theme="dark"] .wp-block-quote p,
body.dark-mode .article-body blockquote p,
body.dark-mode .single-content blockquote p,
body.dark-mode .page-content blockquote p,
body.dark-mode .wp-block-quote p {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .article-body figcaption,
[data-theme="dark"] .single-content figcaption,
[data-theme="dark"] .page-content figcaption,
[data-theme="dark"] .wp-caption-text,
[data-theme="dark"] .gallery-caption,
body.dark-mode .article-body figcaption,
body.dark-mode .single-content figcaption,
body.dark-mode .page-content figcaption,
body.dark-mode .wp-caption-text,
body.dark-mode .gallery-caption {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
}

/* =========================================================
   DRAMATIC QUOTE STYLE TUNING (v1.4.4)
   ========================================================= */

.article-body blockquote,
.single-content blockquote,
.page-content blockquote,
.wp-block-quote {
  border-left: 4px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.article-body blockquote::before,
.single-content blockquote::before,
.page-content blockquote::before,
.wp-block-quote::before {
  top: -0.28em;
  left: 0.25em;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  color: color-mix(in srgb, var(--accent) 78%, transparent);
  text-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}

.article-body blockquote p,
.single-content blockquote p,
.page-content blockquote p,
.wp-block-quote p {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.article-body blockquote cite,
.single-content blockquote cite,
.page-content blockquote cite,
.wp-block-quote cite {
  position: relative;
  padding-left: 1.05rem;
}

body.dramatic-quote-enabled .article-body blockquote cite::before,
body.dramatic-quote-enabled .single-content blockquote cite::before,
body.dramatic-quote-enabled .page-content blockquote cite::before,
body.dramatic-quote-enabled .wp-block-quote cite::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.72rem;
  height: 1px;
  background: color-mix(in srgb, var(--accent2) 65%, transparent);
}

[data-theme="dark"] body.dramatic-quote-enabled .article-body blockquote,
[data-theme="dark"] body.dramatic-quote-enabled .single-content blockquote,
[data-theme="dark"] body.dramatic-quote-enabled .page-content blockquote,
[data-theme="dark"] body.dramatic-quote-enabled .wp-block-quote,
body.dark-mode.dramatic-quote-enabled .article-body blockquote,
body.dark-mode.dramatic-quote-enabled .single-content blockquote,
body.dark-mode.dramatic-quote-enabled .page-content blockquote,
body.dark-mode.dramatic-quote-enabled .wp-block-quote {
  border-left-color: color-mix(in srgb, var(--accent2) 80%, transparent);
}

/* =========================================================
   GRID TOP CLEARANCE (v1.4.6)
   Keep first-row cards safely below sticky header on hover.
   ========================================================= */

body.grid-view .site-main {
  padding-top: clamp(1.2rem, 2.2vw, 2.1rem);
}

body.grid-view .site-main > .container {
  padding-top: clamp(0.25rem, 0.8vw, 0.7rem);
}

body.grid-view .posts-grid {
  margin-top: clamp(1.1rem, 2vw, 1.9rem);
}

@media (max-width: 768px) {
  body.grid-view .site-main {
    padding-top: 1rem;
  }

  body.grid-view .posts-grid {
    margin-top: 0.95rem;
  }
}

/* =========================================================
   ELEGANT HEADER-TO-TILES SEPARATION (v1.4.7)
   ========================================================= */

body.grid-view .site-main {
  padding-top: clamp(1.6rem, 2.8vw, 2.7rem);
}

body.grid-view .site-main > .container {
  position: relative;
  padding-top: clamp(0.9rem, 1.6vw, 1.35rem);
}

/* subtle breathing divider between sticky header and tile holder */
body.grid-view .site-main > .container::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(0.9rem, 2vw, 2rem);
  right: clamp(0.9rem, 2vw, 2rem);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 34%, var(--border)) 22%,
    color-mix(in srgb, var(--accent2) 32%, var(--border)) 78%,
    transparent 100%
  );
  opacity: 0.75;
  pointer-events: none;
}

body.grid-view .posts-grid {
  margin-top: clamp(1.35rem, 2.4vw, 2.2rem);
}

@media (max-width: 768px) {
  body.grid-view .site-main {
    padding-top: 1.15rem;
  }

  body.grid-view .site-main > .container {
    padding-top: 0.75rem;
  }

  body.grid-view .site-main > .container::after {
    left: 0.7rem;
    right: 0.7rem;
    opacity: 0.62;
  }

  body.grid-view .posts-grid {
    margin-top: 1.05rem;
  }
}

/* =========================================================
   HEADER / TILE HOLDER TRUE SEPARATION (v1.4.8)
   Ensure the holder itself does not creep upward into the header.
   ========================================================= */

body.grid-view .site-main > .container {
  margin-top: clamp(0.8rem, 1.8vw, 1.6rem);
}

/* Override the global negative inset on holder frame for grid pages */
body.grid-view .site-main > .container::before {
  inset: 0 -1rem -1rem;
}

@media (max-width: 768px) {
  body.grid-view .site-main > .container {
    margin-top: 0.7rem;
  }

  body.grid-view .site-main > .container::before {
    inset: 0 -0.45rem -0.45rem;
  }
}

/* =========================================================
   HOTFIX (2026-03-13): Homepage overlay should show a real
   visual gap between featured image and article body.
   Keep direct URL styling untouched.
   ========================================================= */
.article-overlay .article-content-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.article-overlay .article-content-card .article-featured-image-section {
  padding: 0;
}

.article-overlay .article-content-card .article-featured-image-section .article-hero-image {
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadowSoft);
  background: var(--card-bg);
}

.article-overlay .article-content-card .article-body {
  width: 100%;
  max-width: none;
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.4rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadowSoft);
}

@media (max-width: 768px) {
  .article-overlay .article-content-card .article-featured-image-section .article-hero-image,
  .article-overlay .article-content-card .article-body {
    border-radius: 16px;
  }

  .article-overlay .article-content-card .article-body {
    width: 100%;
    max-width: none;
    margin-top: 0.9rem;
  }
}


/* =========================================================
   AMBIENT READING ROOM OVERRIDES (v1.5.0.11)
   ========================================================= */
.site-header {
  background: var(--ambient-header-bg);
  border-bottom: 1px solid var(--ambient-header-border);
  box-shadow: var(--ambient-header-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
}

.site-header.is-scrolled,
.site-header.is-scrolled .header-content {
  background: var(--ambient-header-bg-scrolled);
}

.site-branding .text-logo,
.main-navigation .current-menu-item > a,
.main-navigation a:hover {
  color: var(--ambient-nav-strong);
}

.main-navigation a,
.site-description {
  color: var(--ambient-nav-muted);
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
  background: var(--ambient-nav-hover-bg);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 12%, transparent);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  background: var(--ambient-nav-active-bg);
  border: 1px solid var(--ambient-nav-active-border);
  box-shadow: var(--ambient-nav-active-shadow);
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
  background: var(--ambient-nav-active-line);
}

.dark-mode-toggle,
.menu-toggle {
  background: var(--ambient-control-bg);
  border: 1px solid var(--ambient-control-border);
  border-radius: 999px;
  color: var(--ambient-nav-strong);
  box-shadow: var(--ambient-control-shadow);
}

.dark-mode-toggle:hover,
.menu-toggle:hover,
.dark-mode-toggle:focus-visible,
.menu-toggle:focus-visible {
  background: var(--ambient-control-hover-bg);
  box-shadow: var(--ambient-control-shadow-hover);
}

.post-card,
.single-content-card,
.article-content-card,
#pageOverlayContent,
.page-content-card,
.archive-header,
.search-header,
.no-results,
.related-post-card {
  background: color-mix(in srgb, var(--ambient-card-strong) 92%, transparent);
  border-color: var(--ambient-border);
  box-shadow: var(--ambient-surface-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  backdrop-filter: blur(10px) saturate(1.02);
}

.site-main > .container::before,
.posts-grid::before {
  background: var(--ambient-shell-bg);
  border-color: var(--ambient-shell-border);
  box-shadow: var(--ambient-shell-shadow);
}

.post-card::after {
  background: linear-gradient(135deg, transparent 0%, rgba(247, 190, 112, 0.14) 100%);
}

.article-overlay,
#pageOverlay {
  background: var(--ambient-overlay-surface);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
}

.article-content-card,
#pageOverlayContent {
  overflow: hidden;
}

.article-content-card .article-body,
.single-content-card .single-content,
#pageOverlayContent .page-content {
  position: relative;
}

.article-content-card .article-body::before,
.single-content-card .single-content::before,
#pageOverlayContent .page-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 190, 112, 0.18), transparent);
  pointer-events: none;
}

.article-body,
.single-content,
.page-content,
.post-content {
  color: var(--ambient-body-text);
}

.post-excerpt,
.single-meta,
.article-meta,
.related-post-date,
.post-meta {
  color: var(--ambient-meta-text);
}

.single-post-hero,
.article-featured-image-section,
.page-hero {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.single-hero-overlay,
.article-featured-image-overlay,
.page-hero-overlay {
  background: linear-gradient(180deg, rgba(7, 10, 15, 0.03), rgba(7, 10, 15, 0.78));
}

.single-title,
.article-title,
.page-title {
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.38);
}

.single-content a,
.article-body a,
.page-content a,
.read-more {
  color: var(--ambient-link);
}

.single-content a:hover,
.article-body a:hover,
.page-content a:hover,
.read-more:hover {
  color: var(--ambient-link-hover);
}

@media (max-width: 768px) {
  body::before {
    filter: var(--ambient-image-filter-mobile);
    transform: scale(1.03);
  }

  .site-header {
    -webkit-backdrop-filter: blur(10px) saturate(1.02);
    backdrop-filter: blur(10px) saturate(1.02);
  }

  .post-card,
  .single-content-card,
  .article-content-card,
  #pageOverlayContent {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--ambient-mobile-card);
  }
}