@charset "UTF-8";
/*
Theme Name: LaunchLemonade Theme
Theme URI: https://launchlemonade.app
Author: Jayvee Cabug | Launchlemonade Development
Author URI: 
Description: Fresh, zesty, and ready to launch — LaunchLemonade is a vibrant WordPress theme made for bold ideas and standout landing pages.
Version: 1.10.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: #
License URI: #
Text Domain: launchlemonade-v01
*/
/* =========================================
   ABSTRACTS
   ========================================= */
/* =========================================
   Global Colors
   ========================================= */
:root {
  /* ── Brand Colors ── */
  --color-brand-yellow: #f5c800;
  --color-brand-charcoal: #0e1117;
  --color-brand-white: #ffffff;
  --color-brand-coral: #ff4d4d;
  /* Backgrounds */
  --color-bg-light: white;
  --color-bg-white: var(--color-brand-white);
  --color-bg-dark: var(--color-brand-charcoal);
  --color-bg-dark-alt: #2a2a3a;
  /* Text */
  --color-text-dark: #1a1008;
  --color-text-primary: #1a1008;
  --color-text-secondary: #5a4f43;
  --color-text-muted: #9a9087;
  --color-text-light-gray: #c8c8c8;
  --color-text-white: var(--color-brand-white);
  /* Accents */
  --color-primary-orange: #f59e0b;
  --color-accent-amber: var(--color-brand-yellow);
  --color-accent-purple: #9370db;
  --color-accent-coral: var(--color-brand-coral);
  --color-category-orange: #c47c0c;
  --color-category-orange-hover: #a36209;
  /* Borders & UI */
  --color-border-light: #d5cec6;
  --color-border-lighter: #f0e9e0;
  --color-border-dark: rgba(255, 255, 255, 0.06);
  --color-border-hover: #8a7d70;
  /* Shadows & Overlays */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  /* Fonts */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================
   Dark Mode Overrides
   ========================================= */
[data-theme="dark"] {
  --color-bg-light: #08090d;
  --color-bg-white: #0d0e13;
  --color-bg-dark: #08090d;
  --color-bg-dark-alt: #0d0e13;
  --color-text-dark: #f9fafb;
  --color-text-primary: #e5e7eb;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-text-light-gray: #d1d5db;
  --color-border-light: #374151;
  --color-border-lighter: #2d3748;
  --color-border-dark: rgba(255, 255, 255, 0.08);
  --color-border-hover: #6b7280;
  --color-overlay-dark: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] body {
  background-color: #08090d;
  color: var(--color-text-primary);
}

/* =========================================
   Mixins
   ========================================= */
/* Shared card surface (post, related & saved cards). */
/* Hover lift shared by every card. */
/* Featured image inside a card. */
/* "No featured image" gradient placeholder box. */
/* Placeholder label text. */
/* Gradient initial avatar (+ image variant). */
/* Card meta row separated by a top border. */
/* Uppercase category / tag label. */
/* Base styling for rounded filter pills / tabs. */
/* Shimmering gold CTA background. Requires the `promo-shimmer` keyframes. */
/* =========================================
   Functions
   ========================================= */
/* =========================================
   BASE
   ========================================= */
/* =========================================
   Reset & Normalize
   ========================================= */
/* =========================================
   Global Typography
   ========================================= */
body {
  font-family: "Inter", sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

html {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Manrope", sans-serif;
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-dark);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

/* =========================================
   LAYOUT
   ========================================= */
/* =========================================
   Site Header
   ========================================= */
.site-header {
  background-color: var(--color-brand-charcoal);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Offset the sticky header so it clears the WordPress admin bar when logged in */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* Below 600px the admin bar is not fixed (it scrolls away), so no offset */
@media screen and (max-width: 600px) {
  body.admin-bar .site-header {
    top: 0;
  }
}

/* Glassy / translucent header once the page is scrolled */
.site-header.is-scrolled {
  background-color: rgba(14, 17, 23, 0.65);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* Reading-progress marker (single posts) — sits on the header's bottom border */
.site-header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #e0a800 0%, #f5c800 45%, #ffe580 100%);
  box-shadow: 0 0 8px rgba(245, 200, 0, 0.55);
  will-change: transform;
  pointer-events: none;
  z-index: 200;
}

.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__logo-name {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}

.site-header__logo-image {
  max-width: 120px;
  height: auto;
  display: block;
}

/* Nav */
.site-header__nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.site-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-header__menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 450;
  color: var(--color-text-light-gray);
  text-decoration: none;
  border-radius: 6px;
  transition:
    color 0.15s,
    background 0.15s;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}

.site-header__menu > li > a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.nav-chevron {
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* Dropdown */
.site-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--color-bg-dark-alt);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.5rem;
  list-style: none;
  min-width: 180px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.site-header__menu .menu-item-has-children {
  position: relative;
}

.site-header__menu .menu-item-has-children > a .nav-chevron {
  display: inline-block;
}

.site-header__menu .menu-item-has-children:hover > .sub-menu,
.site-header__menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.site-header__menu .menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: auto;
}

.site-header__menu .menu-item-has-children:hover > a .nav-chevron {
  transform: rotate(180deg);
}

.site-header__menu .sub-menu a {
  display: block;
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  color: #c8c8c8;
  text-decoration: none;
  border-radius: 6px;
  transition:
    color 0.15s,
    background 0.15s;
  font-family: "Inter", sans-serif;
}

.site-header__menu .sub-menu a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

/* =========================================
   Mega dropdowns (Services / Platform)
   Base panel styling is shared via .has-mega-menu; each menu adds a
   modifier. Position, list-style, fade and hover/focus reveal are already
   provided by the generic .sub-menu / .menu-item-has-children rules above.
   ========================================= */
.site-header__menu .has-mega-menu > .sub-menu {
  top: calc(100% + 14px);
  width: 270px;
  background: var(--color-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.7rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  margin-top: 0;
  pointer-events: auto;
}

/* Services: stacked content cards */
.site-header__menu .mega-menu--services > .sub-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Platform: simple link list */
.site-header__menu .mega-menu--platform > .sub-menu {
  display: block;
}

.site-header__menu .mega-menu--platform > .sub-menu a {
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
  border-radius: 8px;
  transition:
    color 0.15s,
    background 0.15s;
}

.site-header__menu .mega-menu--platform > .sub-menu a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.services-menu-item {
  display: list-item;
}

.services-menu-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.4rem;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.services-menu-link:hover {
  background: rgba(255, 255, 255, 0.08);
  padding-left: 0.7rem;
}

.services-menu-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.01em;
}

.services-menu-desc {
  display: block;
  font-size: 0.8rem;
  color: #a0a0a0;
  font-family: "Inter", sans-serif;
  line-height: 1.4;
  font-weight: 400;
}

/* Actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.site-header__account-btn {
  display: inline-flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--color-brand-yellow);
  color: #1a1008;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition:
    background 0.15s,
    box-shadow 0.2s;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}

.site-header__account-btn:hover {
  background: #ffd93d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Theme toggle */
.site-header__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-light-gray);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}

.site-header__theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.theme-icon--sun {
  display: none;
}

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

[data-theme="dark"] .theme-icon--sun {
  display: block;
}

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

/* Mobile toggle */
.site-header__mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.site-header__mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-light-gray);
  border-radius: 2px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

/* Responsive */
@media (max-width: 768px) {
  .site-header__inner {
    height: 56px;
    padding: 0 1rem;
    gap: 1rem;
  }
  .site-header__branding {
    flex: 1;
    min-width: 0;
  }
  .site-header__logo {
    gap: 0.4rem;
  }
  .site-header__logo-icon svg {
    width: 24px;
    height: 24px;
  }
  .site-header__logo-name {
    font-size: 0.9rem;
    font-weight: 600;
  }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--color-brand-charcoal);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 1rem;
    max-height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .site-header__nav.is-open {
    display: flex;
  }
  .site-header__menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0.25rem;
  }
  .site-header__menu > li {
    width: 100%;
  }
  .site-header__menu > li > a {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    color: #e5e5e5;
    margin: 0;
  }
  .site-header__menu > li > a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  /* Submenus become inline accordions. Strip the desktop floating-card
     styling (fixed width, border, radius, shadow, grid gap) off the mega
     menus so every dropdown looks and behaves identically, and collapse
     to zero height when closed so items stay evenly spaced. Reveal is
     driven solely by JS (.is-open) — no :hover on touch. */
  .site-header__menu .sub-menu,
  .site-header__menu .has-mega-menu > .sub-menu,
  .site-header__menu .mega-menu--services > .sub-menu,
  .site-header__menu .mega-menu--platform > .sub-menu {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 1.25rem;
    margin: 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.25s ease,
      padding 0.2s ease,
      opacity 0.2s ease,
      visibility 0.2s ease;
  }
  .site-header__menu .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    padding-top: 0.25rem;
    padding-bottom: 0.4rem;
  }
  .site-header__menu .sub-menu a {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  .site-header__actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .site-header__account-btn {
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
  }
  .site-header__mobile-toggle {
    display: flex;
  }
  .site-header__inner {
    position: relative;
  }
}
@media (max-width: 480px) {
  .site-header__inner {
    padding: 0 0.75rem;
    height: 52px;
  }
  .site-header__logo-name {
    font-size: 0.85rem;
  }
  .site-header__account-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .site-header__mobile-toggle {
    gap: 4px;
    padding: 2px;
  }
  .site-header__mobile-toggle span {
    width: 20px;
    height: 1.5px;
  }
  .site-header__nav {
    top: 52px;
    padding: 0.5rem 0.75rem;
  }
  .site-header__menu > li > a {
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
  }
}
/* =========================================
   Site Footer
   ========================================= */
.site-footer {
  background-color: var(--color-brand-charcoal);
  padding: 3.5rem 2rem 0;
  font-family: "Inter", sans-serif;
}

.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  padding-bottom: 3rem;
}

.site-footer__col-heading {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin: 0 0 1.25rem;
}

.site-footer__col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.site-footer__col-links a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__col-links a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__brand-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}

.site-footer__brand-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.site-footer__copyright {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.32);
}

.site-footer__right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.15s;
  line-height: 0;
}

.site-footer__social-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__location {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 960px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .site-footer {
    padding: 2.5rem 1.25rem 0;
  }
}
/* =========================================
   Sidebar (for single post page)
   ========================================= */
.single-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Keep the breadcrumb and author/share blocks pinned at full size; only the
   TOC scrolls. This prevents the sticky sidebar from clipping the share icons
   at the bottom when the table of contents is long. */
.single-sidebar > *:not(.single-toc) {
  flex: 0 0 auto;
}

.single-toc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.single-toc::-webkit-scrollbar {
  display: none;
}

/* Author */
.single-author-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.single-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
}

.single-author__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
}

.single-author-wrap:hover .single-author__avatar {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2509803922);
}

.single-author__name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
}

.single-author__role {
  display: block;
  font-size: 0.76rem;
  color: #9ca3af;
  line-height: 1.35;
  margin-top: 2px;
}

@keyframes lemon-jiggle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-6px) rotate(-6deg);
  }
  70% {
    transform: translateY(-4px) rotate(4deg);
  }
}
.single-author__lemon {
  position: absolute;
  top: -5px;
  left: 14px;
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
  z-index: 0;
  transition: opacity 0.2s ease;
  animation: lemon-jiggle 0.9s ease-in-out infinite;
}

.single-author-wrap:hover .single-author__lemon {
  opacity: 1;
  animation: none;
}

/* Author hover tooltip card */
.single-author__tooltip {
  position: fixed;
  width: 260px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 9999;
}

.single-author__tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.single-author__tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.single-author__tooltip-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.single-author__tooltip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.single-author__tooltip-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-author__tooltip-role {
  display: block;
  font-size: 0.76rem;
  color: #6b7280;
  line-height: 1.3;
}

.single-author__tooltip-email {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: #6b7280;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.15s;
}

.single-author__tooltip-email:hover {
  color: #111827;
}

.single-author__tooltip-help {
  font-size: 0.75rem;
}

.single-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.1rem 0;
}

/* TOC */
.single-toc__heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 0.6rem;
}

.single-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  border-left: 2px solid #e5e7eb;
}

.single-toc__link {
  position: relative;
  display: block;
  font-size: 0.84rem;
  color: #6b7280;
  text-decoration: none;
  padding: 0.32rem 0.5rem 0.32rem 1rem;
  line-height: 1.5;
  transition: color 0.15s;
}

.single-toc__link::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  transition:
    background 0.15s,
    transform 0.15s;
}

.single-toc__link:hover {
  color: #111827;
}

.single-toc__link:hover::before {
  background: #9ca3af;
}

.single-toc__link.is-active {
  color: var(--color-text-dark);
  font-weight: 500;
}

.single-toc__link.is-active::before {
  background: var(--color-brand-yellow);
  transform: translateY(-50%) scale(1.25);
}

/* Share */
.single-share {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.single-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f3f4f6;
  border: none;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 0;
}

.single-share__btn:hover {
  background: #e5e7eb;
  color: #111827;
}

.single-share__btn.is-copied {
  background: #d1fae5;
  color: #065f46;
}

/* Hide TOC on mobile */
@media (max-width: 768px) {
  .single-toc {
    display: none;
  }
  .single-toc + .single-divider {
    display: none;
  }
  [data-theme="dark"] .single-toc__link {
    background: #141520;
  }
}
@media (max-width: 960px) {
  .single-toc__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-left: none;
  }
  .single-toc__link {
    background: #f3f4f6;
    font-size: 0.8rem;
    padding: 0.28rem 0.65rem;
    border-radius: 50px;
  }
  .single-toc__link::before {
    display: none;
  }
  .single-toc__link.is-active {
    background: rgba(245, 200, 0, 0.15);
  }
}
/* Dark Mode Overrides */
[data-theme="dark"] .single-author__name {
  color: #f3f4f6;
}

[data-theme="dark"] .single-author__tooltip {
  background: #1f2937;
  border-color: #374151;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .single-author__tooltip-name {
  color: #f3f4f6;
}

[data-theme="dark"] .single-author__tooltip-role {
  color: #9ca3af;
}

[data-theme="dark"] .single-author__tooltip-email {
  color: #9ca3af;
}

[data-theme="dark"] .single-author__tooltip-email:hover {
  color: #f3f4f6;
}

[data-theme="dark"] .single-divider {
  border-top-color: #374151;
}

[data-theme="dark"] .single-toc__nav {
  border-left-color: #374151;
}

[data-theme="dark"] .single-toc__link {
  color: #9ca3af;
}

[data-theme="dark"] .single-toc__link::before {
  background: #4b5563;
}

[data-theme="dark"] .single-toc__link:hover {
  color: #f3f4f6;
}

[data-theme="dark"] .single-toc__link:hover::before {
  background: #6b7280;
}

[data-theme="dark"] .single-share__btn {
  background: #141520;
  color: #9ca3af;
}

[data-theme="dark"] .single-share__btn:hover {
  background: #1c1e2a;
  color: #f3f4f6;
}

/* =========================================
   COMPONENTS
   ========================================= */
/* =========================================
   Buttons
   ========================================= */
.ll-button {
  display: inline-block;
  padding: 0.65rem 1.75rem;
  background: var(--color-brand-yellow);
  color: var(--color-brand-charcoal);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  box-shadow: 0 2px 8px rgba(245, 200, 0, 0.2);
}

.ll-button:hover {
  background: #ffd93d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 200, 0, 0.3);
}

/* Save/Bookmark buttons */
/* Wrapper holding the Save toggle + the hover "Unsave post?" tooltip. */
.ll-save-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

/* Transparent hover bridge above the button (saved state only) so the mouse
   can travel up to the clickable "Unsave post?" tooltip without it hiding. */
.ll-save-control.is-saved::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

.ll-save-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 50px;
  color: #374151;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
  font-family: inherit;
}

/* Saved-post count shown inside the button when saved. */
.ll-save-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  background: var(--color-brand-coral);
  color: #fff;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.ll-save-count[hidden] {
  display: none;
}

/* Clickable "Unsave post?" tooltip — appears above the button on hover when
   the post is saved; clicking it unsaves. */
.ll-unsave-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1f2937;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
  z-index: 10;
}

.ll-unsave-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}

.ll-save-control.is-saved:hover .ll-unsave-tip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.ll-unsave-tip:hover {
  background: var(--color-brand-coral);
}

.ll-unsave-tip:hover::after {
  border-top-color: var(--color-brand-coral);
}

.ll-save-button:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.ll-save-button.is-saved {
  background: rgba(255, 77, 77, 0.1);
  border-color: rgba(255, 77, 77, 0.35);
  color: var(--color-brand-coral);
}

.ll-save-button.is-saved .ll-bookmark-icon {
  fill: var(--color-brand-coral);
  stroke: var(--color-brand-coral);
}

.ll-bookmark-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.single-saved-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  font-family: inherit;
  line-height: 1;
}

.single-saved-btn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.single-saved-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-coral);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

/* Dark theme */
[data-theme="dark"] .ll-save-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e5e7eb;
}

[data-theme="dark"] .ll-save-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .ll-save-button.is-saved {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.4);
  color: var(--color-brand-coral);
}

/* Tablet / iPad — keep the Save + Saved pair anchored to the right edge */
@media (max-width: 1024px) {
  .ll-save-control {
    margin-left: auto;
  }
}

/* Mobile — let the Save + Saved pair wrap inline with the rest, left-aligned */
@media (max-width: 640px) {
  .single-hero__meta {
    gap: 0.65rem 0.85rem;
  }
  .ll-save-control {
    margin-left: 0;
  }
  .ll-save-button {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
  }
}

.single-bookmark-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: color 0.15s;
}

.single-bookmark-btn:hover {
  color: var(--color-brand-coral);
}

.single-bookmark-btn.is-bookmarked {
  color: var(--color-brand-coral);
}

.single-bookmark-btn.is-bookmarked svg {
  fill: var(--color-brand-coral);
}

/* Unsave buttons */
.ll-saved-post-unsave-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.ll-saved-post-unsave-btn:hover {
  background: rgba(220, 38, 38, 0.7);
  border-color: rgba(220, 38, 38, 0.3);
}

.ll-saved-post-unsave-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* =========================================
   Cards
   ========================================= */
/* Generic post card */
.post-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-lighter);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.post-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-card-body {
  padding: 1rem;
}

.post-card-image-link {
  display: block;
  overflow: hidden;
  position: relative;
  background: var(--color-brand-yellow);
}

.sticky-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background-color: var(--color-brand-coral);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 77, 77, 0.2);
  z-index: 10;
}

.sticky-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sticky-text {
  display: inline;
}

.post-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.post-card-image-link:hover .post-card-img {
  transform: scale(1.03);
}

/* Placeholder when no featured image */
.post-card-placeholder {
  width: 100%;
  height: 180px;
  background: var(--color-brand-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

.post-card-placeholder span {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3a2a14;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

/* Card body */
.blog-posts-section .post-card-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card-category {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  background: linear-gradient(
    90deg,
    var(--color-brand-yellow) 0%,
    var(--color-primary-orange) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.post-card-category:hover {
  background: linear-gradient(
    90deg,
    var(--color-primary-orange) 0%,
    var(--color-brand-yellow) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.blog-posts-section .post-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 auto;
  padding-bottom: 1rem;
}

.blog-posts-section .post-card-title a {
  color: var(--color-text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-posts-section .post-card-title a:hover {
  color: #4a4a4a;
}

[data-theme="dark"] .blog-posts-section .post-card-title a {
  color: var(--color-text-primary);
}

[data-theme="dark"] .blog-posts-section .post-card-title a:hover {
  color: var(--color-primary-orange);
}

/* Meta row */
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-lighter);
}

.post-card-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4a87a 0%, #e8845c 100%);
  color: var(--color-text-white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.post-card-avatar-img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: block;
}

.post-card-meta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.post-card-date {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.post-card-author {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-dark);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-card-reading-time {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Related blog cards */
.single-related-blog-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  height: 100%;
  text-decoration: none;
}

.single-related-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.single-related-blog-card__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

.single-related-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.single-related-blog-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
  background: linear-gradient(140deg, #fce8d0 0%, #f9dfc0 100%);
}

.single-related-blog-card__placeholder span {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3a2a14;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.single-related-blog-card:hover .single-related-blog-card__img {
  transform: scale(1.03);
}

.single-related-blog-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.single-related-blog-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-dark);
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* always reserve 2 lines so short and long titles take the same vertical
     space, keeping the meta row aligned across cards */
  min-height: calc(1.05rem * 1.5 * 2);
}

.single-related-blog-card:hover .single-related-blog-card__title {
  color: var(--color-category-orange);
}

.single-related-blog-card__category {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-category-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.single-related-blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.single-related-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* push to the bottom of the (equal-height) card so the meta row lines up
     across all cards regardless of title/category length */
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.single-related-blog-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.single-related-blog-card__meta-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  /* allow this column to shrink so the date/author truncate instead of
     overflowing and getting clipped by the card's rounded corners */
  min-width: 0;
}

.single-related-blog-card__date {
  color: var(--color-text-muted);
  line-height: 1.2;
  font-size: 0.76rem;
}

.single-related-blog-card__author {
  font-weight: 500;
  color: var(--color-text-dark);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.76rem;
}

.single-related-blog-card__reading-time {
  color: var(--color-text-muted);
  line-height: 1.3;
  font-size: 0.76rem;
  flex-shrink: 0;
}

/* =========================================
   Saved content cards
   Post cards and element cards are visually identical, so their shared
   rules are grouped; only the differences (the post card's relative
   positioning and the element card's badge / image-link variants) are
   declared separately.
   ========================================= */
.ll-saved-post-card,
.ll-saved-element-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  border-top: 3px solid var(--color-brand-yellow);
}

.ll-saved-post-card {
  position: relative;
}

.ll-saved-post-card:hover,
.ll-saved-element-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  border-top-color: var(--color-brand-coral);
}

.ll-saved-post-image-link-wrapper,
.ll-saved-post-image-link,
.ll-saved-element-image-link {
  position: relative;
  overflow: hidden;
  display: block;
}

.ll-saved-post-image-link,
.ll-saved-element-image-link {
  text-decoration: none;
}

.ll-saved-post-image-link {
  height: 100%;
}

.ll-saved-post-img,
.ll-saved-element-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ll-saved-post-card:hover .ll-saved-post-img,
.ll-saved-element-card:hover .ll-saved-element-img {
  transform: scale(1.03);
}

.ll-saved-post-placeholder,
.ll-saved-element-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(140deg, #fce8d0 0%, #f9dfc0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

.ll-saved-post-placeholder span,
.ll-saved-element-placeholder span {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3a2a14;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.ll-saved-post-body,
.ll-saved-element-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ll-saved-post-title,
.ll-saved-element-title {
  margin: 0 0 auto;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.45;
  padding-bottom: 1rem;
}

.ll-saved-post-title a,
.ll-saved-element-title a {
  color: var(--color-text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ll-saved-post-title a:hover,
.ll-saved-element-title a:hover {
  color: var(--color-category-orange);
}

.ll-saved-post-tags,
.ll-saved-element-tags {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--color-category-orange);
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.ll-saved-post-tag,
.ll-saved-element-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-category-orange);
  text-decoration: none;
  transition: all 0.2s ease;
  text-transform: none;
  font-weight: normal;
  letter-spacing: normal;
}

.ll-saved-post-tag:hover,
.ll-saved-element-tag:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-category-orange-hover);
}

.ll-saved-post-meta,
.ll-saved-element-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-lighter);
}

.ll-saved-post-date,
.ll-saved-post-reading-time,
.ll-saved-element-date,
.ll-saved-element-reading-time {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.ll-saved-post-avatar,
.ll-saved-element-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4a87a 0%, #e8845c 100%);
  color: var(--color-text-white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ll-saved-post-avatar-img,
.ll-saved-element-avatar-img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: block;
}

.ll-saved-post-meta-text,
.ll-saved-element-meta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ll-saved-post-author,
.ll-saved-element-author {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-dark);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Element-only: category badge over the image */
.ll-saved-element-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-category-orange);
}

/* Read more links */
.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: bold;
}

/* =========================================
   Forms
   ========================================= */
/* Search bar */
.blog-search-form {
  margin: 0;
}

.blog-search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 50px;
  padding: 0.6rem 0.6rem 0.6rem 1.2rem;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  min-height: 50px;
  transition: border-color 0.2s;
}

.blog-search-wrapper:hover {
  border-color: var(--color-border-hover);
}

.blog-search-icon {
  width: 18px;
  height: 18px;
  color: #b0a89e;
  flex-shrink: 0;
}

.blog-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--color-text-dark);
  background: transparent;
  min-width: 0;
}

.blog-search-input::placeholder {
  color: #b0a89e;
}

.blog-search-btn {
  background: #ece6dc;
  border: none;
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  font-size: 1rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.blog-search-btn:hover {
  background: #ddd5c8;
}

/* Filter pills/tabs — `.filter-pill` (blog) and `.ll-saved-filter-tab`
   (saved content) share a base; only their default colour and active
   state differ. */
.filter-pill,
.ll-saved-filter-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--color-border-light);
  border-radius: 50px;
  font-size: 0.85rem;
  text-decoration: none;
  background: var(--color-bg-white);
  white-space: nowrap;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
  cursor: pointer;
  font-weight: inherit;
  outline: none;
  color: var(--color-text-secondary);
  font-family: inherit;
}

.filter-pill:focus,
.filter-pill:focus-visible,
.ll-saved-filter-tab:focus,
.ll-saved-filter-tab:focus-visible {
  outline: none;
}

.filter-pill:hover,
.ll-saved-filter-tab:hover {
  border-color: var(--color-border-hover);
  background: #f5efe6;
  color: var(--color-text-dark);
}

[data-theme="dark"] .filter-pill:hover,
[data-theme="dark"] .ll-saved-filter-tab:hover {
  background: #2a2a3a;
  color: #f9fafb;
}

.filter-pill.active,
.ll-saved-filter-tab.active {
  background: var(--color-brand-yellow);
  color: var(--color-text-dark);
  border-color: var(--color-brand-yellow);
}

/* Popular badge */
.popular-badge {
  position: absolute;
  top: -9px;
  right: 6px;
  background: var(--color-primary-orange);
  color: var(--color-text-white);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
}

/* Dark mode overrides */
[data-theme="dark"] .blog-search-btn {
  background: #141520;
  color: #9ca3af;
}

[data-theme="dark"] .blog-search-btn:hover {
  background: #1c1e2a;
  color: #f3f4f6;
}

/* =========================================
   PAGES
   ========================================= */
/* =========================================
   Blog Page Template (page-blog.php)
   ========================================= */
/* Base */
.blog-page {
  background-color: var(--color-bg-light);
  min-height: 100vh;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Hero ── */
.blog-hero {
  background-color: var(--color-bg-light);
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
}

.blog-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.blog-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

.blog-hero-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 auto 2rem;
  max-width: 520px;
}

/* ── Category Filters ── */
.blog-filters {
  background: var(--color-bg-light);
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border-lighter);
}

.blog-filters-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  justify-content: flex-start;
  /* Single horizontal row that scrolls/swipes left–right instead of wrapping. */
  overflow-x: auto;
  overflow-y: hidden;
  /* Vertical breathing room so the "Popular" badge (top: -9px) isn't clipped. */
  padding: 10px 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  cursor: grab;
}

.blog-filters-inner::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.blog-filters-inner.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Don't let pills shrink — they keep their natural width and overflow to scroll. */
.blog-filters-inner .filter-pill {
  flex: 0 0 auto;
}

/* ── Posts Section ── */
.blog-posts-section {
  padding: 2rem 1.5rem 4rem;
}

.blog-posts-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.posts-count {
  text-align: right;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

/* Generic post grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* Grid — 3 columns for blog */
.blog-posts-section .posts-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 960px) {
  .blog-posts-section .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .blog-posts-section .posts-grid {
    grid-template-columns: 1fr;
  }
}
/* No posts / empty state */
.no-posts-found {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem 1rem;
  color: #7a7068;
  font-size: 1rem;
}

/* ── Pagination ── */
.blog-pagination {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.ll-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.ll-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.18s,
    color 0.18s,
    opacity 0.18s;
  -webkit-font-smoothing: antialiased;
}

/* Pill-shaped navigation buttons (First, Back, Next, Last) */
.ll-page-edge {
  border-radius: 999px;
  padding: 0 20px;
}

/* Circular number buttons */
.ll-page-num {
  width: 46px;
  border-radius: 8px;
  background: transparent;
  color: #666;
  border: 1.5px solid #ddd;
}

/* Current / active page number */
.ll-page-num.current {
  background: var(--color-brand-yellow);
  color: #1a1008;
  border: 1.5px solid var(--color-brand-yellow);
  cursor: default;
}

/* Disabled edge buttons (e.g. First/Back on page 1) */
.ll-page-edge.disabled {
  background: #fce8c3;
  color: #c8b8a8;
  cursor: default;
  pointer-events: none;
}

/* Enabled edge buttons */
.ll-page-edge:not(.disabled) {
  background: var(--color-brand-yellow);
  color: #1a1008;
}

/* Chevron arrows */
.ll-chevron {
  font-size: 1.15rem;
  line-height: 1;
}

/* Hover states */
.ll-page-num:not(.current):hover {
  background: #faf8f3;
  color: #333;
  border-color: #ccc;
}

.ll-page-edge:not(.disabled):hover {
  background: #f9b90d;
}

/* ── Mobile tweaks ── */
@media (max-width: 580px) {
  .blog-hero {
    padding: 3.5rem 1.25rem 2.5rem;
  }
  .blog-filters-inner {
    gap: 0.5rem;
  }
  .filter-pill {
    padding: 0.5rem 0.9rem;
    font-size: 0.75rem;
  }
  .popular-badge {
    display: none;
  }
}
/* Dark mode overrides */
[data-theme="dark"] .ll-page-num {
  color: #9ca3af;
  border-color: #374151;
}

[data-theme="dark"] .ll-page-num:not(.current):hover {
  background: #141520;
  color: #f3f4f6;
}

[data-theme="dark"] .ll-page-edge.disabled {
  background: #0d0e13;
  color: #4b5563;
}

/* =========================================
   Single Post Page
   ========================================= */
/* ── Hero ── */
.single-hero {
  background: linear-gradient(
    150deg,
    var(--color-bg-light) 0%,
    #f5f0e8 35%,
    #faf8f3 60%,
    var(--color-bg-white) 100%
  );
  padding: 2rem 2rem 3.5rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.single-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* Topbar */
.single-hero__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.25rem;
}

.single-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: #6b7280;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.single-breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}

.single-breadcrumb a:hover {
  color: #374151;
}

.single-breadcrumb__sep {
  color: #d1d5db;
  flex-shrink: 0;
}

/* Hero content: title left, image right */
.single-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.single-hero__text {
  flex: 1;
  min-width: 0;
}

.single-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 50px;
  color: var(--color-text-dark);
  margin: 0 0 1.25rem;
  letter-spacing: -0.025em;
  font-family: "Manrope", sans-serif;
}

.single-hero__meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.single-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: #6b7280;
}

/* View count — visible label stays abbreviated (e.g. "1.3K views"); hovering the
   eye icon darkens it (to signal it's interactive) and reveals a custom tooltip
   above it with the exact total, shown instantly (no native title-attr delay). */
.single-hero__views-eye {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  cursor: help;
  transition: color 0.12s ease;
}

.single-hero__views-eye:hover,
.single-hero__views-eye:focus-visible {
  color: #111827;
  outline: none;
}

.single-hero__views-eye::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1f2937;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
  z-index: 10;
}

.single-hero__views-eye::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 10;
}

.single-hero__views-eye:hover::after,
.single-hero__views-eye:hover::before,
.single-hero__views-eye:focus-visible::after,
.single-hero__views-eye:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.single-hero__views-eye:hover::after,
.single-hero__views-eye:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

[data-theme="dark"] .single-hero__views-eye:hover,
[data-theme="dark"] .single-hero__views-eye:focus-visible {
  color: #f9fafb;
}

/* Featured image card */
.single-hero__image {
  width: 100%;
  aspect-ratio: 16/7;
  min-height: 400px;
  max-height: 300px;
  background: linear-gradient(
    145deg,
    var(--color-brand-charcoal) 0%,
    var(--color-bg-dark-alt) 100%
  );
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.single-hero__image-title {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  max-width: 65%;
  line-height: 1.45;
  z-index: 1;
}

.single-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Body (sidebar + content) ── */
.single-body {
  background: var(--color-bg-white);
  padding: 3rem 2rem 5rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.single-body__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 248px 1fr 280px;
  gap: 4rem;
  align-items: start;
}

/* ── Main Content ── */
.single-content {
  min-width: 0;
}

/* ── Promotion Box ── */
.single-promotion {
  align-self: stretch;
}

.single-promotion__content {
  position: sticky;
  top: 80px;
  background: linear-gradient(
    135deg,
    var(--color-brand-charcoal) 0%,
    var(--color-bg-dark-alt) 100%
  );
  border-radius: 20px;
  padding: 2rem 1.5rem;
  color: white;
  text-align: center;
  box-shadow: 0 10px 30px rgba(61, 61, 82, 0.3);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Keep the full-bleed bottom image inside the rounded corners. */
  overflow: hidden;
}

.single-promotion__badge {
  display: inline-block;
  /* Flex column stretches children full-width; pull the pill back to
     its content width and center it. */
  align-self: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.single-promotion__heading {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.75rem;
  color: white;
}

.single-promotion__description {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

@keyframes promo-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.single-promotion__button {
  background: linear-gradient(
    90deg,
    var(--color-brand-yellow) 0%,
    var(--color-brand-yellow) 40%,
    #fff8c0 50%,
    var(--color-brand-yellow) 60%,
    var(--color-brand-yellow) 100%
  );
  background-size: 200% auto;
  animation: promo-shimmer 2.2s linear infinite;
  display: inline-block;
  color: var(--color-text-dark);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  margin-bottom: 1.5rem;
  width: 100%;
}

.single-promotion__button:hover {
  animation-play-state: paused;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(245, 200, 0, 0.3);
}

.single-promotion__image {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-bottom: -2rem;
  margin-top: 1.5rem;
  opacity: 0.9;
  max-height: 180px;
  /* Flex items default to min-height:auto (= intrinsic image height),
     which overrides max-height. Reset it so the image is actually capped. */
  min-height: 0;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-promotion__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

/* Quick Answer */
.quick-answer {
  background: rgba(245, 200, 0, 0.06);
  border: 1px solid rgba(245, 200, 0, 0.3);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  font-family: "Inter", sans-serif;
}

/* key-takeaways: no background, bullet list */
#key-takeaways {
  background: none;
  border: none;
  padding: 0;
}

/* FAQ Accordion */
#LL__FAQs .single-faqs {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 2.75rem;
  margin-bottom: 2.5rem;
  background: transparent;
  font-family: "Inter", sans-serif;
}

#LL__FAQs .single-faqs__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  color: var(--color-text-dark);
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}

#LL__FAQs .single-faqs__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#LL__FAQs .single-faqs__item {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#LL__FAQs .single-faqs__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-dark);
  cursor: pointer;
  gap: 1rem;
  line-height: 28px;
  letter-spacing: 0;
  font-family: inherit;
}

#LL__FAQs .single-faqs__question:hover {
  color: #202124;
}

#LL__FAQs .single-faqs__chevron {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: #565656;
  transition: transform 0.2s ease;
}

#LL__FAQs .single-faqs__question[aria-expanded="true"] .single-faqs__chevron {
  transform: rotate(180deg);
}

#LL__FAQs .single-faqs__answer {
  overflow: hidden;
}

#LL__FAQs .single-faqs__answer[hidden] {
  display: none;
}

#LL__FAQs .single-faqs__answer-inner {
  max-width: 100%;
  font-size: 18px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  padding: 0 1.5rem 1.25rem;
  letter-spacing: 0;
}

#LL__FAQs .single-faqs__answer-inner p {
  margin: 0 0 1rem;
}

#LL__FAQs .single-faqs__answer-inner p:last-child {
  margin-bottom: 0;
}

/* Related Blogs Section */
.single-related-blogs-wrapper {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 2rem;
}

.single-related-blogs {
  margin-top: 3.5rem;
  margin-bottom: 2.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid #e5e7eb;
}

.single-related-blogs__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  color: var(--color-text-dark);
  margin: 0 0 2rem;
  letter-spacing: -0.02em;
}

/* Manual-swipe carousel at all widths (no autoplay). Holds many cards so the
   reader can swipe/drag through plenty of related blogs. */
.single-related-blogs__grid {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 2rem;
  /* first card stays aligned under the title; only the right edge runs
     full-bleed to the viewport so the peeking card reaches the screen edge */
  margin-left: -2rem;
  margin-right: calc(50% - 50vw);
  padding: 0 calc(50vw - 50%) 0.5rem 2rem;
  scrollbar-width: none;
  cursor: grab;
}
.single-related-blogs__grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* prevent the card link from navigating while a drag is in progress */
.single-related-blogs__grid.is-dragging .single-related-blog-card {
  pointer-events: none;
}
.single-related-blogs__grid::-webkit-scrollbar {
  display: none;
}
.single-related-blogs__grid > .single-related-blog-card {
  /* ~3 cards in view on desktop with a peek of the next to signal swipe */
  flex: 0 0 30%;
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .single-related-blogs__grid {
    gap: 1rem;
  }
  .single-related-blogs__grid > .single-related-blog-card {
    /* two-up with a peek of the next card */
    flex: 0 0 46%;
  }
  .single-related-blog-card__image,
  .single-related-blog-card__placeholder {
    height: 170px;
  }
}
@media (max-width: 640px) {
  /* One card per view with a peek of the next on mobile */
  .single-related-blogs__grid > .single-related-blog-card {
    flex: 0 0 82%;
  }
}

/* CTA Section */
.single-cta-section {
  max-width: 1380px;
  margin: 4rem auto 0;
  padding: 0 2rem;
}

.single-cta__inner {
  background: #10131a;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 3rem;
  border-radius: 16px;
}

.single-cta__badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.single-cta__heading {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
  max-width: 600px;
}

.single-cta__description {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 550px;
}

.single-cta__features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.single-cta__feature {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.single-cta__button {
  background: linear-gradient(
    90deg,
    var(--color-brand-yellow) 0%,
    var(--color-brand-yellow) 40%,
    #fff8c0 50%,
    var(--color-brand-yellow) 60%,
    var(--color-brand-yellow) 100%
  );
  background-size: 200% auto;
  animation: promo-shimmer 2.2s linear infinite;
  padding: 0.875rem 2rem;
  color: var(--color-text-dark);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(245, 200, 0, 0.25);
}

.single-cta__button:hover {
  animation-play-state: paused;
  box-shadow: 0 8px 12px rgba(245, 200, 0, 0.35);
  transform: translateY(-2px);
}

/* Post Content Typography */
.single-post-content {
  font-size: 18px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-top: 2.5rem;
}

.single-post-content h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  color: var(--color-text-dark);
  margin: 2.75rem 0 1rem;
  letter-spacing: -0.02em;
  scroll-margin-top: 90px;
}

.single-post-content h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-text-dark);
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: 90px;
}

.single-post-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin: 1.75rem 0 0.5rem;
}

.single-post-content p {
  margin: 0 0 1.5rem;
}

.single-post-content p:first-child {
  font-size: 1.08rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-dark);
}

.single-post-content a {
  color: var(--color-brand-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.single-post-content a:hover {
  color: var(--color-text-dark);
}

.single-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 2rem auto;
}

.single-post-content figure {
  margin: 2rem 0;
}

.single-post-content figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: #9ca3af;
  margin-top: 0.5rem;
  font-style: italic;
}

.single-post-content blockquote {
  border-left: 3px solid var(--color-brand-yellow);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: var(--color-text-secondary);
}

.single-post-content ul,
.single-post-content ol {
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.single-post-content li {
  line-height: 1.7;
}

.single-post-content code {
  background: var(--color-bg-light);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: "SF Mono", "Fira Code", "Courier New", monospace;
  color: var(--color-text-secondary);
}

.single-post-content pre {
  background: var(--color-bg-dark-alt);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
}

.single-post-content pre code {
  background: none;
  padding: 0;
  color: #e2e8f0;
  font-size: 0.9rem;
}

/* ── Post tags ── */
.single-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e5e7eb;
}

.single-tags__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-right: 0.25rem;
}

.single-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-tags__link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: #4b5563;
  background: var(--color-bg-light);
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.single-tags__link:hover {
  color: var(--color-brand-charcoal);
  background: #fde68a;
  border-color: #fcd34d;
}

[data-theme="dark"] .single-tags {
  border-top-color: #374151;
}

[data-theme="dark"] .single-tags__link {
  color: #d1d5db;
  background: #0d0e13;
  border-color: #374151;
}

[data-theme="dark"] .single-tags__link:hover {
  color: #0d0e13;
  background: #f5c800;
  border-color: #f5c800;
}

/* ── Notification ── */
.ll-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #c8c8c8;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.ll-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.ll-notification-success {
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.ll-notification-error {
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .single-hero__image {
    aspect-ratio: 16/6;
    max-height: 350px;
  }
  .single-body__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .single-sidebar {
    position: static;
    max-height: none;
    display: block;
    overflow: visible;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
  }
  /* TOC flows naturally once the sidebar is no longer height-constrained. */
  .single-toc {
    overflow-y: visible;
  }
  /* Author + share block relocated below the tags on mobile */
  .single-sidebar > .single-divider {
    display: none;
  }
  .single-author-share.is-relocated {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
  }
  .single-promotion {
    position: static;
    max-height: none;
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
    margin-top: 2.5rem;
  }
  /* Box was sized for a 280px sidebar; keep it from stretching full-width
     on tablet/mobile and drop the sticky offset + tall min-height. */
  .single-promotion__content {
    position: static;
    top: auto;
    min-height: auto;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Stop the CTA button from stretching the full box width on tablet/mobile. */
  .single-promotion__content a {
    display: block;
  }
  .single-promotion__button {
    width: auto;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .single-related-blog-card__image,
  .single-related-blog-card__placeholder {
    height: 170px;
  }
  .single-post-content img {
    max-height: 400px;
  }
}
@media (max-width: 768px) {
  .single-cta-section {
    padding: 3rem 2rem;
  }
  .single-cta__heading {
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }
  .single-cta__description {
    font-size: 1rem;
  }
  .single-cta__features {
    gap: 1rem;
  }
}
@media (max-width: 640px) {
  .single-hero {
    padding: 1.5rem 1.25rem 2.5rem;
  }
  .single-body {
    padding: 2rem 1.25rem 3rem;
  }
  .single-hero__topbar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .single-post-content p:first-child {
    font-size: 1rem;
  }
  #LL__FAQs .single-faqs {
    margin-top: 2.25rem;
    margin-bottom: 2.5rem;
  }
  #LL__FAQs .single-faqs__title {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 1.25rem;
  }
  #LL__FAQs .single-faqs__list {
    gap: 0.85rem;
  }
  #LL__FAQs .single-faqs__item {
    border-radius: 12px;
  }
  #LL__FAQs .single-faqs__question {
    padding: 1.1rem 1.25rem;
    font-size: 18px;
    line-height: 26px;
    gap: 0.85rem;
  }
  #LL__FAQs .single-faqs__chevron {
    width: 1rem;
    height: 1rem;
  }
  #LL__FAQs .single-faqs__answer-inner {
    font-size: 18px;
    padding: 0 1.25rem 1.1rem;
  }
  .single-related-blogs {
    margin-top: 2.5rem;
    padding: 2rem 0;
  }
  .single-related-blogs__title {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 580px) {
  .ll-notification {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
}
/* Dark mode overrides */
[data-theme="dark"] .single-cta__inner {
  background: linear-gradient(135deg, #08090d 0%, #0e0f16 100%);
  box-shadow:
    0 0 60px 20px rgba(245, 200, 0, 0.18),
    0 0 120px 40px rgba(245, 200, 0, 0.08);
}

[data-theme="dark"] .single-cta__badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: #374151;
  color: #9ca3af;
}

[data-theme="dark"] .single-post-content a {
  color: #f5c800;
}

[data-theme="dark"] .single-post-content a:hover {
  color: #ffd93d;
}

[data-theme="dark"] .single-hero__meta-item {
  color: #9ca3af;
}

[data-theme="dark"] #LL__FAQs .single-faqs__item {
  background: #0d0e13;
  border-color: #374151;
}

[data-theme="dark"] #LL__FAQs .single-faqs__question:hover {
  color: #f3f4f6;
}

[data-theme="dark"] #LL__FAQs .single-faqs__chevron {
  color: #9ca3af;
}

[data-theme="dark"] .single-related-blogs {
  border-top-color: #374151;
}

/* =========================================
   Saved Content Page
   ========================================= */
.ll-saved-content-page {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
  min-height: 100vh;
  font-family: var(--font-family-base);
}

.ll-saved-hero {
  background: linear-gradient(
    135deg,
    var(--color-brand-charcoal) 0%,
    #4a4a62 50%,
    var(--color-brand-charcoal) 100%
  );
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ll-saved-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(245, 200, 0, 0.15) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

.ll-saved-hero::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(255, 77, 77, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

.ll-saved-hero-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ll-saved-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--color-brand-white);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}

.ll-saved-hero-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--color-brand-yellow);
  border-radius: 2px;
}

.ll-saved-content-section {
  padding: 2rem 1.5rem 4rem;
}

.ll-saved-content-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Empty state */
.ll-saved-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(
    135deg,
    rgba(245, 200, 0, 0.05) 0%,
    rgba(255, 77, 77, 0.03) 100%
  );
  border-radius: 16px;
  border: 1px solid rgba(245, 200, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.ll-saved-empty h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.ll-saved-empty p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  margin: 0 0 2rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Filter tabs — mirrors the blog homepage filter strip (.blog-filters). */
.ll-saved-filters {
  background: var(--color-bg-light);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-lighter);
}

.ll-saved-filters-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  justify-content: flex-start;
  /* Single horizontal row that scrolls/swipes left–right instead of wrapping. */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  cursor: grab;
}

.ll-saved-filters-inner::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.ll-saved-filters-inner.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Don't let pills shrink — they keep their natural width and overflow to scroll. */
.ll-saved-filters-inner .ll-saved-filter-tab {
  flex: 0 0 auto;
}

/* Posts grid — 3 columns */
.ll-saved-posts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
  transition: opacity 0.2s ease;
}

@media (max-width: 960px) {
  .ll-saved-posts-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .ll-saved-posts-container {
    grid-template-columns: 1fr;
  }
}
/* Elements grid (same as posts grid) */
.ll-saved-elements-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
  transition: opacity 0.2s ease;
}

@media (max-width: 960px) {
  .ll-saved-elements-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .ll-saved-elements-container {
    grid-template-columns: 1fr;
  }
}
/* Pagination */
.ll-saved-pagination {
  display: flex;
  justify-content: center;
}

/* ── Mobile tweaks ── */
@media (max-width: 580px) {
  .ll-saved-hero {
    padding: 3.5rem 1.25rem 2.5rem;
  }
  .ll-saved-filters-inner {
    gap: 0.5rem;
  }
  .ll-saved-filter-tab {
    padding: 0.5rem 0.9rem;
    font-size: 0.75rem;
  }
  .ll-notification {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
}
@media (max-width: 480px) {
  .ll-saved-content-section {
    padding: 2.5rem 1.25rem 0;
  }
}

/* =========================================
   FAQ Accordion (native <details>)
   ========================================= */
/* Theming is driven by these local custom properties so light/dark live in one
   place — the dark override below only remaps the variables, no selectors are
   duplicated. The chevron uses currentColor, so it follows the summary color. */
.faq-accordion {
  --faq-bg: #f5f5f5;
  --faq-bg-open: #f0f0f0;
  --faq-border: transparent;
  --faq-summary: var(--color-text-primary);
  --faq-answer: var(--color-text-secondary);
  max-width: 900px;
  margin: 2rem auto;
}

[data-theme="dark"] .faq-accordion {
  --faq-bg: #0d0e13;
  --faq-bg-open: #141520;
  --faq-border: #374151;
  --faq-summary: #f3f4f6;
  --faq-answer: #d1d5db;
}

.faq-accordion details {
  background: var(--faq-bg);
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 20px 24px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.faq-accordion details[open] {
  background: var(--faq-bg-open);
}

.faq-accordion summary {
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
  color: var(--faq-summary);
}

/* The summary wraps an <h3> for SEO/semantics. Strip its default block styling
   so it renders inline and inherits the summary's own typography unchanged. */
.faq-accordion summary h3 {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Hide the default disclosure triangle (Chrome/Safari + standards property). */
.faq-accordion summary::-webkit-details-marker {
  display: none;
}
.faq-accordion summary::marker {
  content: "";
}

/* Custom chevron. */
.faq-accordion summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-accordion details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq-answer {
  margin-top: 12px;
  color: var(--faq-answer);
  line-height: 1.6;
}

/* Reset the .single-post-content p:first-child lede styling that otherwise
   leaks in (each answer's <p> is the first child of its .faq-answer wrapper).
   The .single-post-content prefix is needed to match that rule's specificity
   (0,2,1) so this override actually wins. */
.single-post-content .faq-answer p {
  margin: 0;
  font-style: normal;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* "Suggested visual:" placeholder notes flagged via the editor's "Hide visuals"
   button. Hidden on the public site only — they remain visible inside the
   WordPress editor (the editor stylesheet does not load this rule) so authors
   can still see which posts are waiting on their real images. */
.ll-suggested-visual-hidden {
  display: none !important;
}