.vidzy-showcase{padding:var(--space-xl) 0 var(--space-xxxl)}.vidzy-showcase>.section-inner>.showcase-header{margin-bottom:var(--space-lg)}.showcase-title{font-size:var(--text-heading-large);line-height:var(--text-heading-large-lh);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-xxs)}.showcase-subtitle{font-size:var(--text-body-medium);line-height:var(--text-body-medium-lh);color:var(--color-text-tertiary);margin:0}.showcase-tabs{display:flex;gap:var(--space-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm);margin-bottom:var(--space-lg)}.showcase-tabs::-webkit-scrollbar{display:none}.showcase-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--space-xxs);padding:var(--space-xs) var(--space-md);background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:999px;font-family:var(--font-family);font-size:var(--text-body-small);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap}.showcase-tab:hover{background:rgba(255,255,255,.1);color:var(--color-text-primary)}.showcase-tab.is-active{background:rgba(255,255,255,.12);border-color:var(--color-border);color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.tab-emoji{font-size:1em;line-height:1}.showcase-panel{display:none}.showcase-panel.is-active{display:block}.template-scroll{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--screen-padding));padding:0 var(--screen-padding);scrollbar-width:none;-ms-overflow-style:none;--fade-size:60px;mask-image:linear-gradient(to right,transparent 0px,black var(--fade-size),black calc(100% - var(--fade-size)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--fade-size),black calc(100% - var(--fade-size)),transparent 100%)}.template-scroll::-webkit-scrollbar{display:none}.template-row{display:flex;gap:var(--space-md);padding-bottom:var(--space-xs)}.template-card{flex:0 0 200px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s ease;cursor:pointer}.template-card:hover{transform:translateY(-4px)}.template-grid .template-card--featured{}.template-card-media{position:relative;width:100%;aspect-ratio:9/16;border-radius:var(--corner-radius-lg);overflow:hidden;background:var(--color-surface-elevated);flex-shrink:0}.template-card-thumb,.template-card-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.template-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);color:rgba(255,255,255,.9);opacity:0;transition:opacity .2s ease;pointer-events:none}.template-card:hover .template-card-play{opacity:1}.template-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-elevated) 50%,var(--color-surface) 100%);font-size:40px;opacity:.5}.template-card-info{padding:var(--space-sm) var(--space-xxs) 0}.template-card-name{font-size:var(--text-body-small);line-height:var(--text-body-small-lh);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.template-card-desc{font-size:var(--text-caption);line-height:var(--text-caption-lh);color:var(--color-text-tertiary);margin:var(--space-xxs) 0 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-md)}.vidzy-categories{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.vidzy-category-chip{display:inline-flex;align-items:center;gap:var(--space-xxs);padding:var(--space-xs) var(--space-md);background:rgba(255,255,255,.06);border-radius:999px;font-size:var(--text-body-small);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:background .2s ease,color .2s ease;cursor:default}.vidzy-category-chip:hover{background:rgba(255,255,255,.1);color:var(--color-text-primary)}.chip-emoji{font-size:1em}@media(min-width:768px){.template-card{flex:0 0 180px}.showcase-title{font-size:var(--text-heading-large)}.template-scroll{--fade-size:80px}}@media(min-width:1024px){.template-card{flex:0 0 200px}}.template-card-video[data-playing]+.template-card-play{opacity:0 !important}/*
Theme Name: Vidzy
Theme URI: https://vidzy.ai
Author: Vidzy
Author URI: https://vidzy.ai
Description: Dark, skeuomorphic landing theme for Vidzy — AI-powered short-form video creation. Features 3D keycap button design, Plus Jakarta Sans typography, and a comprehensive tool suite.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vidzy
Tags: one-column, custom-menu, featured-images, translation-ready, dark, portfolio
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul[role="list"],ol[role="list"]{list-style:none}a{color:inherit;text-decoration:none}button{background:none;border:none;cursor:pointer}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}:root{--color-bg:#0D0D0D;--color-surface:#1A1A1A;--color-surface-elevated:#262626;--color-text-primary:#FFFFFF;--color-text-secondary:#CCCCCC;--color-text-tertiary:#999999;--color-accent:#59D975;--color-purple:#9B7AE3;--color-purple-dim:#7B5CC3;--color-orange:#FF8C33;--color-gold:#FFD94D;--color-destructive:#F25959;--color-success:#59D975;--color-warning:#FFAA00;--color-border:#333333;--font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--text-display-large:40px;--text-display-large-lh:48px;--text-display-medium:32px;--text-display-medium-lh:40px;--text-heading-large:24px;--text-heading-large-lh:32px;--text-heading-medium:20px;--text-heading-medium-lh:28px;--text-body-large:17px;--text-body-large-lh:26px;--text-body-medium:15px;--text-body-medium-lh:22px;--text-body-small:13px;--text-body-small-lh:18px;--text-label:13px;--text-label-lh:16px;--text-caption:11px;--text-caption-lh:14px;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-xxxl:64px;--screen-padding:20px;--corner-radius:12px;--corner-radius-sm:8px;--corner-radius-lg:16px;--button-height:56px;--min-touch-target:44px;--max-content-width:1200px;--header-height:72px}body{background-color:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--text-body-medium);line-height:var(--text-body-medium-lh);font-weight:var(--font-weight-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.text-display-large{font-size:var(--text-display-large);line-height:var(--text-display-large-lh);font-weight:var(--font-weight-bold)}.text-display-medium{font-size:var(--text-display-medium);line-height:var(--text-display-medium-lh);font-weight:var(--font-weight-bold)}.text-heading-large{font-size:var(--text-heading-large);line-height:var(--text-heading-large-lh);font-weight:var(--font-weight-semibold)}.text-heading-medium{font-size:var(--text-heading-medium);line-height:var(--text-heading-medium-lh);font-weight:var(--font-weight-semibold)}.text-body-large{font-size:var(--text-body-large);line-height:var(--text-body-large-lh);font-weight:var(--font-weight-regular)}.text-body-medium{font-size:var(--text-body-medium);line-height:var(--text-body-medium-lh);font-weight:var(--font-weight-regular)}.text-body-small{font-size:var(--text-body-small);line-height:var(--text-body-small-lh);font-weight:var(--font-weight-regular)}.text-label{font-size:var(--text-label);line-height:var(--text-label-lh);font-weight:var(--font-weight-medium)}.text-caption{font-size:var(--text-caption);line-height:var(--text-caption-lh);font-weight:var(--font-weight-regular)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-accent{color:var(--color-accent)}.text-purple{color:var(--color-purple)}.keycap{--keycap-top:#FAFAFC;--keycap-bottom:#E0E3E8;--keycap-shadow:#8C9199;--keycap-text:#26262E;--keycap-depth:3px;position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:var(--font-family);font-weight:var(--font-weight-semibold);font-size:var(--text-body-medium);line-height:1;color:var(--keycap-text);background:var(--keycap-shadow);padding:0 24px;height:48px;border-radius:var(--corner-radius);padding-bottom:var(--keycap-depth);transition:transform .15s cubic-bezier(.34,1.56,.64,1);user-select:none;-webkit-user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.keycap::after{content:'';position:absolute;top:0;left:0;right:0;bottom:var(--keycap-depth);background:linear-gradient(to bottom,var(--keycap-top),var(--keycap-bottom));border-radius:inherit;transition:filter .15s ease}.keycap::before{content:'';position:absolute;top:0;left:0;right:0;height:calc((100% - var(--keycap-depth)) * .5);background:linear-gradient(to bottom,rgba(255,255,255,.20),transparent);border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;z-index:1;pointer-events:none}.keycap>span,.keycap>.keycap-label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;transform:translateY(calc(var(--keycap-depth) * -.5))}.keycap-primary{--keycap-top:#FAFAFC;--keycap-bottom:#E0E3E8;--keycap-shadow:#8C9199;--keycap-text:#26262E}.keycap-secondary{--keycap-top:#595E66;--keycap-bottom:#40454D;--keycap-shadow:#262B33;--keycap-text:#FFFFFF}.keycap-accent{--keycap-top:#4DD980;--keycap-bottom:#2E9459;--keycap-shadow:#1A5933;--keycap-text:#FFFFFF}.keycap-orange{--keycap-top:#FF8C33;--keycap-bottom:#E6661A;--keycap-shadow:#99400D;--keycap-text:#FFFFFF}.keycap-gold{--keycap-top:#FFD94D;--keycap-bottom:#E6A626;--keycap-shadow:#99730D;--keycap-text:#33260D}.keycap-destructive{--keycap-top:#F25959;--keycap-bottom:#BF3333;--keycap-shadow:#801A1A;--keycap-text:#FFFFFF}.keycap-sm{height:36px;font-size:13px;padding:0 16px;padding-bottom:2px;border-radius:var(--corner-radius-sm);--keycap-depth:2px}.keycap-md{height:48px;font-size:15px;padding:0 24px;padding-bottom:3px;border-radius:var(--corner-radius);--keycap-depth:3px}.keycap-lg{height:56px;font-size:17px;padding:0 32px;padding-bottom:4px;border-radius:14px;--keycap-depth:4px}.keycap-capsule{border-radius:999px}.keycap:hover:not(:disabled){transform:translateY(-1px)}.keycap:hover:not(:disabled)::after{filter:brightness(1.08)}.keycap:active:not(:disabled){transform:translateY(var(--keycap-depth)) scale(.98)}.keycap:active:not(:disabled)::after{bottom:0}.keycap:active:not(:disabled)::before{height:calc(100% * .5)}.keycap:active:not(:disabled)>span,.keycap:active:not(:disabled)>.keycap-label{transform:translateY(0)}.keycap:focus-visible{outline:2px solid var(--color-accent,#59D975);outline-offset:2px}.keycap:disabled,.keycap[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}@media(prefers-reduced-motion:reduce){.keycap{transition:none}.keycap::after{transition:none}}.keycap-badge{--keycap-depth:2px;position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family);font-weight:var(--font-weight-semibold);font-size:11px;line-height:1;color:var(--keycap-text,#FFFFFF);background:var(--keycap-shadow,#262B33);padding:0 12px;height:28px;padding-bottom:var(--keycap-depth);border-radius:999px;user-select:none;-webkit-user-select:none;pointer-events:none;cursor:default}.keycap-badge::after{content:'';position:absolute;top:0;left:0;right:0;bottom:var(--keycap-depth);background:linear-gradient(to bottom,var(--keycap-top,#595E66),var(--keycap-bottom,#40454D));border-radius:inherit}.keycap-badge::before{content:'';position:absolute;top:0;left:0;right:0;height:calc((100% - var(--keycap-depth)) * .5);background:linear-gradient(to bottom,rgba(255,255,255,.20),transparent);border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;z-index:1;pointer-events:none}.keycap-badge>span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:4px;transform:translateY(calc(var(--keycap-depth) * -.5));letter-spacing:.02em;text-transform:uppercase}.keycap-badge-pro{--keycap-top:#FFD94D;--keycap-bottom:#E6A626;--keycap-shadow:#99730D;--keycap-text:#33260D}.keycap-badge-free{--keycap-top:#595E66;--keycap-bottom:#40454D;--keycap-shadow:#262B33;--keycap-text:#FFFFFF}.keycap-chip{--keycap-depth:2px;--keycap-top:#3A3F47;--keycap-bottom:#2A2F37;--keycap-shadow:#1A1F27;--keycap-text:#CCCCCC;position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:13px;line-height:1;color:var(--keycap-text);background:var(--keycap-shadow);padding:0 16px;height:34px;padding-bottom:var(--keycap-depth);border-radius:999px;transition:transform .15s cubic-bezier(.34,1.56,.64,1);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.keycap-chip::after{content:'';position:absolute;top:0;left:0;right:0;bottom:var(--keycap-depth);background:linear-gradient(to bottom,var(--keycap-top),var(--keycap-bottom));border-radius:inherit;transition:filter .15s ease}.keycap-chip::before{content:'';position:absolute;top:0;left:0;right:0;height:calc((100% - var(--keycap-depth)) * .5);background:linear-gradient(to bottom,rgba(255,255,255,.15),transparent);border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;z-index:1;pointer-events:none}.keycap-chip>span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:4px;transform:translateY(calc(var(--keycap-depth) * -.5))}.keycap-chip:hover{transform:translateY(-1px)}.keycap-chip:hover::after{filter:brightness(1.1)}.keycap-chip:active{transform:translateY(var(--keycap-depth)) scale(.97)}.keycap-chip:active::after{bottom:0}.keycap-chip:focus-visible{outline:2px solid var(--color-accent,#59D975);outline-offset:2px}.keycap-chip--selected{--keycap-top:#4DD980;--keycap-bottom:#2E9459;--keycap-shadow:#1A5933;--keycap-text:#FFFFFF;font-weight:var(--font-weight-semibold,600)}@media(prefers-reduced-motion:reduce){.keycap-chip{transition:none}.keycap-chip::after{transition:none}}/* ==========================================================================
   Shared Components — Header, Footer, Sections, Cards
   Consumes design-system.css tokens. No hardcoded values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site Header — Sticky with backdrop-blur
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(13, 13, 13, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-content-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--screen-padding);
}

/* Logo */
.header-logo {
  font-size: var(--text-heading-medium);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.header-logo .logo-accent {
  color: var(--color-purple);
}

/* Desktop nav links */
.header-nav {
  display: none;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-medium);
  transition: color 0.15s ease;
}

.header-nav a:hover {
  color: var(--color-text-primary);
}

/* Header CTA — always visible */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Hamburger — mobile only */
.header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.header-hamburger .hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  position: relative;
}

.header-hamburger .hamburger-line::before,
.header-hamburger .hamburger-line::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  position: absolute;
  left: 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.header-hamburger .hamburger-line::before {
  top: -7px;
}

.header-hamburger .hamburger-line::after {
  top: 7px;
}

/* Hamburger open state — X shape */
.header-hamburger[aria-expanded="true"] .hamburger-line {
  background: transparent;
}

.header-hamburger[aria-expanded="true"] .hamburger-line::before {
  top: 0;
  transform: rotate(45deg);
}

.header-hamburger[aria-expanded="true"] .hamburger-line::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile menu — slides down from header */
.header-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--screen-padding);
  gap: var(--space-md);
  z-index: 99;
}

.header-nav.is-open a {
  font-size: var(--text-body-large);
  padding: var(--space-sm) 0;
}

/* Desktop breakpoint (lg) */
@media (min-width: 1024px) {
  .header-nav {
    display: flex;
  }

  .header-hamburger {
    display: none;
  }

  /* Prevent mobile menu styles on desktop */
  .header-nav.is-open {
    position: static;
    flex-direction: row;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    padding: 0;
    gap: var(--space-lg);
  }

  .header-nav.is-open a {
    font-size: var(--text-body-medium);
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Site Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: transparent;
  border-top: 1px solid var(--color-border);
  padding: var(--space-xxxl) 0 var(--space-lg);
}

.footer-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--screen-padding);
}

/* Footer top — brand + social row */
.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-top-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.footer-divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: var(--space-xl);
}

/* Footer main grid — link columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1280px) {
  .footer-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-xl) var(--space-lg);
  }
}

/* Footer social links */
.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--corner-radius-sm);
  color: var(--color-text-tertiary);
  background: var(--color-surface-elevated);
  transition: color 0.2s ease, background 0.2s ease;
}

.footer-social a:hover {
  color: var(--color-accent);
  background: var(--color-surface);
}

/* Footer brand */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-brand .footer-logo {
  font-size: var(--text-heading-medium);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.footer-brand .footer-tagline {
  font-size: var(--text-body-medium);
  color: var(--color-text-secondary);
  line-height: var(--text-body-medium-lh);
  max-width: 380px;
  margin: 0;
}

/* Footer link columns */
.footer-links h3 {
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-md);
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-body-small);
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--color-text-primary);
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border-radius: var(--corner-radius-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-size: var(--text-body-large);
  transition: color 0.15s ease, background 0.15s ease;
}

.footer-social a:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-xxl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-md);
}

.footer-bottom-links a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-size: var(--text-body-small);
  transition: color 0.15s ease;
}

.footer-bottom-links a:hover {
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Sections — Layout patterns with alternating backgrounds
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-xxxl) 0;
}

.section-dark {
  background: var(--color-bg);
}

.section-alt {
  background: rgba(255, 255, 255, 0.02);
}

.section-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--screen-padding);
}

/* Section header — centered heading + subtitle */
.section-header {
  text-align: center;
  margin-bottom: var(--space-xxl);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-size: var(--text-display-medium);
  line-height: var(--text-display-medium-lh);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
}

.section-header .text-accent-purple {
  color: var(--color-purple);
}

.section-header p {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-lh);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* Responsive section header typography */
.section-header h2 {
  font-size: 24px;
  line-height: 32px;
}

@media (min-width: 768px) {
  .section-header h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (min-width: 1024px) {
  .section-header h2 {
    font-size: var(--text-display-medium);
    line-height: var(--text-display-medium-lh);
  }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: transparent;
  border-radius: var(--corner-radius-lg);
  border: none;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

/* Card image area — placeholder with shimmer gradient */
.card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--corner-radius) var(--corner-radius) 0 0;
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-surface-elevated) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-body-small);
  position: relative;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Card body */
.card-body {
  padding: var(--space-lg);
}

.card-body h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.card-body p {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
}

/* Card grid — responsive */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Feature Card — Centered icon + text, no image
   -------------------------------------------------------------------------- */

.feature-card {
  background: transparent;
  border-radius: var(--corner-radius-lg);
  border: none;
  padding: var(--space-xl);
  text-align: center;
  transition: transform 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
}

.feature-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--corner-radius);
  background: var(--color-surface-elevated);
  font-size: var(--text-heading-large);
}

.feature-card h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.feature-card p {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Stat Card — Large number + label for social proof
   -------------------------------------------------------------------------- */

.stat-card {
  background: transparent;
  border-radius: var(--corner-radius-lg);
  border: none;
  padding: var(--space-xl);
  text-align: center;
}

.stat-card .stat-number {
  font-size: var(--text-display-large);
  line-height: var(--text-display-large-lh);
  font-weight: var(--font-weight-bold);
  color: var(--color-purple);
  margin: 0 0 var(--space-xs);
}

.stat-card .stat-label {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Stat card responsive number size */
.stat-card .stat-number {
  font-size: 28px;
  line-height: 36px;
}

@media (min-width: 768px) {
  .stat-card .stat-number {
    font-size: 34px;
    line-height: 42px;
  }
}

@media (min-width: 1024px) {
  .stat-card .stat-number {
    font-size: var(--text-display-large);
    line-height: var(--text-display-large-lh);
  }
}
/* ==========================================================================
   Responsive Utilities — Mobile-First Breakpoints
   Base: 375px (mobile), md: 768px (tablet), lg: 1024px (desktop), xl: 1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
}

/* --------------------------------------------------------------------------
   Visibility Utilities
   -------------------------------------------------------------------------- */

.hide-mobile {
  display: none;
}

.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

/* Inline variants for flex/inline contexts */
.hide-mobile-inline {
  display: none;
}

.hide-desktop-inline {
  display: inline;
}

@media (min-width: 768px) {
  .hide-mobile-inline {
    display: inline;
  }

  .hide-desktop-inline {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive Grid System
   -------------------------------------------------------------------------- */

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-lg);
}

/* Mobile: single column */
.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

/* Tablet (768px): 2 columns */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Desktop (1024px): 3 columns for grid-3 */
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Responsive Typography Scale
   -------------------------------------------------------------------------- */

/* Mobile base — slightly smaller display sizes */
.text-display-large {
  font-size: 28px;
  line-height: 36px;
}

.text-display-medium {
  font-size: 24px;
  line-height: 32px;
}

/* Tablet */
@media (min-width: 768px) {
  .text-display-large {
    font-size: 34px;
    line-height: 42px;
  }

  .text-display-medium {
    font-size: 28px;
    line-height: 36px;
  }
}

/* Desktop — full size */
@media (min-width: 1024px) {
  .text-display-large {
    font-size: var(--text-display-large);
    line-height: var(--text-display-large-lh);
  }

  .text-display-medium {
    font-size: var(--text-display-medium);
    line-height: var(--text-display-medium-lh);
  }
}

/* --------------------------------------------------------------------------
   Responsive Spacing Helpers
   -------------------------------------------------------------------------- */

.section-padding {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* --------------------------------------------------------------------------
   Responsive Flex Utilities
   -------------------------------------------------------------------------- */

.flex-col-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .flex-col-row {
    flex-direction: row;
    align-items: center;
  }
}

/* Text alignment */
.text-center-mobile {
  text-align: center;
}

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}
/* ==========================================================================
   Vidzy Theme — Shared Styles
   Consolidated patterns used across blog, pages, and tools templates.
   Imported once in the global enqueue; page-specific files extend these.
   ========================================================================== */

/* ==========================================================================
   Section 1: Breadcrumbs
   Canonical version — previously duplicated in blog.css, pages.css, tools.css.
   ========================================================================== */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  margin-bottom: var(--space-lg);
}

.breadcrumbs a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.breadcrumbs .breadcrumb-separator {
  color: var(--color-text-tertiary);
}

.breadcrumbs .breadcrumb-separator::after {
  content: '›';
}

.breadcrumbs .breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Section 2: CTA Banner
   Canonical version — previously duplicated in pages.css, tools.css, and
   the index.html inline <style>.
   ========================================================================== */

.cta-banner {
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding: var(--space-xxxl) 0;
}

.cta-banner-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--screen-padding);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.cta-banner h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.cta-banner p {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-lh);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0;
}

@media (min-width: 768px) {
  .cta-banner h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (min-width: 1024px) {
  .cta-banner h2 {
    font-size: var(--text-display-medium);
    line-height: var(--text-display-medium-lh);
  }
}

/* ==========================================================================
   Section 3: Form Inputs
   Canonical dark-background form controls — previously duplicated across
   pages.css (contact form) and tools.css (tool inputs).
   Generic class names; page-specific selectors in their own files can
   extend or override these.
   ========================================================================== */

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius-sm);
  font-family: inherit;
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px var(--color-purple-dim);
}

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

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999999' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-xl);
  cursor: pointer;
}

.form-label {
  display: block;
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.form-label-hint {
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
  margin-left: var(--space-xs);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Section 4: Page Hero Section — Splash Background
   Shared splash-bg hero used across all page types (blog, tools, static, 404).
   ========================================================================== */

.page-hero-section {
  position: relative;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.35;
}

/* Gradient overlay */
.page-hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(13, 13, 13, 0.4) 0%,
      rgba(13, 13, 13, 0.6) 50%,
      var(--color-bg) 100%
    );
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  z-index: 2;
}

/* Light variants for text on splash bg */
.page-header--light h1 {
  color: #FFFFFF;
}

.page-header--light .page-meta {
  color: rgba(255, 255, 255, 0.7);
}

.page-header-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-md);
}

/* Compact variant — thinner padding for breadcrumb-only or shorter headers */
.page-hero-section--compact {
  padding-top: calc(var(--space-xxl) + var(--space-lg));
}

/* Tool hub light variant */
.tool-hub-hero--light h1 {
  color: #FFFFFF;
}

.tool-hub-hero--light p {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Section 4b: Splash Background Section (reusable)
   For mid-page sections with splash bg + glass cards (e.g., "How It Works").
   ========================================================================== */

.section-splash {
  position: relative;
  overflow: hidden;
}

.section-splash > .section-inner {
  position: relative;
  z-index: 2;
}

.section-splash-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-splash-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.35;
}

.section-splash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(13, 13, 13, 0.55);
  pointer-events: none;
}

/* Light text for sections on splash bg */
.section-header--light h2 {
  color: #FFFFFF;
}

.section-header--light p {
  color: rgba(255, 255, 255, 0.7);
}

/* Glass-morphism cards for use on splash sections */
.step--glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--corner-radius-lg);
  padding: var(--space-xl) var(--space-lg);
}

.step--glass h3 {
  color: #FFFFFF;
}

.step--glass p {
  color: rgba(255, 255, 255, 0.7);
}

/* Steps row (3 columns) */
.steps-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .steps-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

.step {
  text-align: center;
  position: relative;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dim));
  color: #FFFFFF;
  font-size: var(--text-heading-medium);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  box-shadow: 0 4px 16px rgba(155, 122, 227, 0.3);
}

.step h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.step p {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Section 4c: CTA Banner — Splash Variant
   ========================================================================== */

.cta-banner--splash {
  position: relative;
  overflow: hidden;
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.4;
}

.cta-banner--splash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      var(--color-bg) 0%,
      rgba(13, 13, 13, 0.6) 30%,
      rgba(13, 13, 13, 0.6) 70%,
      var(--color-bg) 100%
    );
  pointer-events: none;
}

.cta-banner--splash .cta-banner-inner {
  position: relative;
  z-index: 2;
}

.cta-banner-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(155, 122, 227, 0.25);
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   Section 4d: 404 Error Page — Splash Variant
   ========================================================================== */

.error-page.page-hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
}

.error-page-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
}

.error-page-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Section 4e: Footer Logo Icon
   ========================================================================== */

.footer-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: var(--space-xs);
}

/* ==========================================================================
   Section 4f: About Page — Elevated Value Cards
   ========================================================================== */

.about-value-card--elevated {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--corner-radius-lg);
  transition: border-color 0.2s ease;
}

.about-value-card--elevated:hover {
  border-color: rgba(155, 122, 227, 0.2);
}

/* ==========================================================================
   Section 5: Rich Content Base
   Shared typography for long-form content areas. Both .post-content (blog)
   and .legal-content (legal pages) extend this base via their own selectors.
   Applied via .rich-content — the canonical class for prose blocks.
   ========================================================================== */

.rich-content {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-lh);
  color: var(--color-text-secondary);
}

/* Links */
.rich-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: var(--space-xxs);
  transition: color 0.2s ease;
}

.rich-content a:hover {
  color: var(--color-purple);
}

/* Headings */
.rich-content h2 {
  font-size: var(--text-heading-large);
  line-height: var(--text-heading-large-lh);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-md);
}

.rich-content h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.rich-content h4 {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.rich-content h5 {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.rich-content h6 {
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

/* Paragraphs */
.rich-content p {
  margin-bottom: var(--space-md);
}

/* Lists */
.rich-content ul,
.rich-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.rich-content ul {
  list-style-type: disc;
}

.rich-content ol {
  list-style-type: decimal;
}

.rich-content li {
  margin-bottom: var(--space-xs);
  line-height: var(--text-body-large-lh);
}

.rich-content li::marker {
  color: var(--color-accent);
}

.rich-content li ul,
.rich-content li ol {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

/* Blockquote */
.rich-content blockquote {
  border-left: var(--space-xxs) solid var(--color-purple);
  padding-left: var(--space-lg);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  font-style: italic;
  color: var(--color-text-secondary);
}

.rich-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Code blocks */
.rich-content pre {
  background: var(--color-surface-elevated);
  border-radius: var(--corner-radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rich-content pre code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: var(--text-body-small);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-primary);
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Inline code */
.rich-content code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.9em;
  background: var(--color-surface-elevated);
  color: var(--color-purple);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--corner-radius-sm);
}

/* Tables */
.rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
}

.rich-content th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--color-border);
}

.rich-content td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.rich-content tr:nth-child(even) td {
  background: var(--color-surface);
}

/* Images & figures */
.rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--corner-radius);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.rich-content figure {
  margin: var(--space-lg) 0;
}

.rich-content figure img {
  margin-bottom: var(--space-xs);
}

.rich-content figcaption {
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  color: var(--color-text-tertiary);
  text-align: center;
}

/* Horizontal rule */
.rich-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Strong / emphasis */
.rich-content strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Section 6: SEO Content Grid
   Used on front page, prompt archive, tools hub, and about page for
   keyword-rich content sections that support on-page SEO.
   ========================================================================== */

.seo-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.seo-content-block {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--corner-radius);
  padding: var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.seo-content-block h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.seo-content-block p {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

.seo-content-bottom {
  max-width: 720px;
}

.seo-content-bottom h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.seo-content-bottom p {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
}

.seo-content-bottom strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) {
  .seo-content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Section 7: FAQ Accordion (details/summary)
   Used on front page, prompt archive, tools hub, and about page.
   Moved from front-page.css for cross-page reuse.
   ========================================================================== */

details.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  transition: background 0.2s ease;
}

details.faq-item[open] {
  background: rgba(155, 122, 227, 0.04);
}

details.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-body-large);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease;
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

details.faq-item summary::marker {
  display: none;
  content: '';
}

details.faq-item summary:hover {
  background: var(--color-surface-elevated);
}

details.faq-item summary::after {
  content: '+';
  font-size: var(--text-heading-medium);
  font-weight: var(--font-weight-regular);
  color: var(--color-purple);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

details.faq-item[open] summary::after {
  content: '\2212';
}

.faq-answer {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
}

.faq-answer p {
  margin: 0;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Taxonomy description text below page title */
.taxonomy-desc {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
  max-width: 600px;
}

/* ==========================================================================
   Section 8: Related Resources Box
   Appended at the bottom of single blog posts by the internal-links filter.
   Also used in single-prompt sidebar.
   ========================================================================== */

.related-resources-box {
  margin-top: var(--space-xxl);
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--corner-radius-lg);
}

.related-resources-title {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.related-resources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .related-resources-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.related-resources-column {
  min-width: 0;
}

.related-resources-heading {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.related-resources-heading svg {
  color: var(--color-purple);
  flex-shrink: 0;
}

.related-resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.related-resources-list li {
  margin: 0;
}

.related-resources-list a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--corner-radius-sm);
  transition: color 0.2s ease, background 0.2s ease;
}

.related-resources-list a:hover {
  color: var(--color-accent);
  background: rgba(89, 217, 117, 0.06);
}

/* Prompt sidebar — related resources list */
.prompt-related-resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.prompt-related-resources-list li {
  margin: 0;
}

.prompt-related-resources-list a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  font-size: var(--text-body-small);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.prompt-related-resources-list a:hover {
  color: var(--color-accent);
}
/* ==========================================================================
   Vidzy Theme — Front Page Styles
   Visual-rich layout with splash bg hero, 3D logo, glass cards,
   and splash CTA banner.
   ========================================================================== */

/* =====================================================================
   Hero — Splash background with centered content
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-xxxl) + var(--space-lg)) 0 var(--space-xxl);
  overflow: hidden;
  min-height: 85vh;
}

/* Splash background image */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.45;
}

/* Gradient overlay to ensure text readability */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(13, 13, 13, 0.3) 0%,
      rgba(13, 13, 13, 0.5) 40%,
      rgba(13, 13, 13, 0.85) 80%,
      var(--color-bg) 100%
    );
  pointer-events: none;
}

.hero-inner--centered {
  position: relative;
  z-index: 2;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--screen-padding);
  width: 100%;
}

.hero-content--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto;
}

/* App icon + proof badge row */
.hero-badge {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.hero-app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .hero-app-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
}

/* Social proof */
.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: center;
}

.hero-proof-stars {
  color: #FFAA00;
  font-size: var(--text-body-small);
  letter-spacing: 1px;
}

.hero-proof-text {
  font-size: var(--text-body-small);
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--font-weight-medium);
}

/* 3D Logo image */
.hero-logo-img {
  width: 220px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(155, 122, 227, 0.3));
  margin: var(--space-sm) 0;
}

@media (min-width: 768px) {
  .hero-logo-img {
    width: 300px;
  }
}

/* Headline */
.hero-headline--lg {
  font-size: 28px;
  line-height: 36px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .hero-headline--lg {
    font-size: 40px;
    line-height: 48px;
  }
}

@media (min-width: 1024px) {
  .hero-headline--lg {
    font-size: 48px;
    line-height: 56px;
  }
}

/* Subheadline */
.hero-sub {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-lh);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 540px;
}

/* CTA group */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.hero-cta-note {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--font-weight-medium);
}

/* =====================================================================
   Section CTA — repeated after sections
   ===================================================================== */
.section-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* =====================================================================
   Benefits — Horizontal cards with icon + text
   ===================================================================== */
.benefits-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .benefits-grid {
    gap: var(--space-md);
  }
}

.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--corner-radius-lg);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.benefit-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(155, 122, 227, 0.2);
}

.benefit-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(155, 122, 227, 0.1);
  border-radius: var(--corner-radius-md);
  border: 1px solid rgba(155, 122, 227, 0.15);
}

.benefit-text h3 {
  font-size: var(--text-heading-medium);
  line-height: var(--text-heading-medium-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.benefit-text p {
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

/* =====================================================================
   How It Works — Uses shared .section-splash, .step--glass, .steps-row
   from shared.css. Only front-page-specific overrides here.
   ===================================================================== */

/* =====================================================================
   Social Proof — Testimonials + Stats bar
   ===================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--corner-radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color 0.2s ease;
}

.testimonial-card:hover {
  border-color: rgba(155, 122, 227, 0.2);
}

.testimonial-stars {
  color: #FFAA00;
  font-size: var(--text-body-small);
  letter-spacing: 2px;
}

.testimonial-card blockquote {
  margin: 0;
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-bold);
  color: #FFFFFF;
  flex-shrink: 0;
}

.testimonial-name {
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.testimonial-role {
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
}

/* Stats bar */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xxl);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxs);
}

.stat-item .stat-number {
  font-size: var(--text-heading-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.stat-item .stat-label {
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
}

@media (max-width: 480px) {
  .stat-divider {
    display: none;
  }
  .stats-bar {
    gap: var(--space-xl);
  }
}

/* =====================================================================
   FAQ Accordion
   ===================================================================== */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  transition: background 0.2s ease;
}

.faq-item[open] {
  background: rgba(155, 122, 227, 0.04);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-body-large);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
  content: '';
}

.faq-item summary:hover {
  background: var(--color-surface-elevated);
}

.faq-item summary::after {
  content: '+';
  font-size: var(--text-heading-medium);
  font-weight: var(--font-weight-regular);
  color: var(--color-purple);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-answer {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-lh);
  color: var(--color-text-secondary);
}

.faq-answer p {
  margin: 0;
}

/* ==========================================================================
   Explore Section — Tabs, Blog, Tools, Prompts
   ========================================================================== */

.explore-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-surface);
  border-radius: var(--corner-radius);
  padding: 4px;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
  width: fit-content;
}

.explore-tab {
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border: none;
  border-radius: var(--corner-radius-sm);
  color: var(--color-text-tertiary);
  font-family: var(--font-family);
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.explore-tab:hover {
  color: var(--color-text-primary);
}

.explore-tab.active {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: var(--font-weight-semibold);
}

.explore-panel {
  display: none;
}

.explore-panel.active {
  display: block;
}

.explore-panel-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.card-grid--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .card-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-grid--3col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .card-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tools mini cards */
.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tool-card-mini {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.tool-card-mini:hover {
  border-color: var(--color-accent);
}

.tool-card-mini-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.tool-card-mini h3 {
  font-size: var(--text-body-large);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xxs);
}

.tool-card-mini p {
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Prompt mini cards */
.prompt-card-mini {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.prompt-card-mini:hover {
  border-color: var(--color-accent);
}

.prompt-card-mini-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-elevated);
}

.prompt-card-mini-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prompt-card-mini-body {
  padding: var(--space-sm) var(--space-md);
}

.prompt-card-mini-body h3 {
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: var(--space-xxs) 0 0;
}

/* ==========================================================================
   AI Models Grid
   ========================================================================== */

.models-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .models-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .models-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.model-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  text-align: center;
}

.model-card h3 {
  font-size: var(--text-heading-medium);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.model-card p {
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-sm);
}

.model-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  background: rgba(89, 217, 117, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
}

/* CTA Banner — Uses shared .cta-banner--splash from shared.css */
/**
 * WordPress Runtime Overrides
 *
 * Styles for WordPress-generated markup that differs from the static HTML
 * templates. Covers: default widgets, block widgets, admin bar offset,
 * breadcrumb separator, author box, share links, App Store badge, and
 * navbar button fix.
 *
 * Loaded after all other stylesheets to ensure specificity.
 *
 * @package Vidzy
 * @since   1.0.0
 */

/* ==========================================================================
   1. HEADER / NAVBAR FIX
   ========================================================================== */

/* Header logo icon */
.header-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Fix keycap button in header overflowing — constrain the 3D depth effect */
.site-header .header-actions .keycap {
  --keycap-depth: 2px;
  height: 36px;
  font-size: 13px;
  vertical-align: middle;
}

/* Ensure header-actions stays vertically centered */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ==========================================================================
   2. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: var(--text-body-small);
  line-height: var(--text-body-small-lh);
  padding: var(--space-md) 0;
}

.breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--space-xs);
  color: var(--color-text-tertiary);
  font-size: 11px;
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   3. SIDEBAR WIDGETS (WordPress Block Widgets)
   ========================================================================== */

/* Base widget styling — open/borderless */
.sidebar-widget {
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 0 0 var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Widget headings */
.sidebar-widget .wp-block-heading,
.sidebar-widget h2,
.sidebar-widget h3 {
  font-size: var(--text-heading-small);
  line-height: 1.3;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

/* --- Search widget --- */
.sidebar-widget .wp-block-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-widget .wp-block-search__label {
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.sidebar-widget .wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--space-xs);
}

.sidebar-widget .wp-block-search__input {
  flex: 1;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--text-body-medium);
  outline: none;
  transition: border-color 0.2s ease;
}

.sidebar-widget .wp-block-search__input::placeholder {
  color: var(--color-text-tertiary);
}

.sidebar-widget .wp-block-search__input:focus {
  border-color: var(--color-accent);
}

.sidebar-widget .wp-block-search__button {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--text-body-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.sidebar-widget .wp-block-search__button:hover {
  background: var(--color-border);
  border-color: var(--color-text-tertiary);
}

/* --- Recent Posts widget --- */
.sidebar-widget .wp-block-latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-widget .wp-block-latest-posts li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-widget .wp-block-latest-posts li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-widget .wp-block-latest-posts li:first-child {
  padding-top: 0;
}

.sidebar-widget .wp-block-latest-posts__post-title {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-body-small);
  line-height: 1.5;
  transition: color 0.2s ease;
  display: block;
}

.sidebar-widget .wp-block-latest-posts__post-title:hover {
  color: var(--color-accent);
}

/* --- Recent Comments widget --- */
.sidebar-widget .wp-block-latest-comments {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-widget .wp-block-latest-comments__comment {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-small);
  line-height: 1.5;
}

.sidebar-widget .wp-block-latest-comments__comment:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-widget .wp-block-latest-comments__comment:first-child {
  padding-top: 0;
}

.sidebar-widget .wp-block-latest-comments__comment-author,
.sidebar-widget .wp-block-latest-comments__comment-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sidebar-widget .wp-block-latest-comments__comment-author:hover,
.sidebar-widget .wp-block-latest-comments__comment-link:hover {
  color: var(--color-accent);
}

.sidebar-widget .wp-block-latest-comments__comment-meta {
  color: var(--color-text-tertiary);
  font-size: var(--text-body-small);
}

/* --- Categories widget --- */
.sidebar-widget .wp-block-categories-list,
.sidebar-widget .widget_categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-widget .wp-block-categories-list li,
.sidebar-widget .widget_categories li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-widget .wp-block-categories-list li:last-child,
.sidebar-widget .widget_categories li:last-child {
  border-bottom: none;
}

.sidebar-widget .wp-block-categories-list a,
.sidebar-widget .widget_categories a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-body-small);
  transition: color 0.2s ease;
}

.sidebar-widget .wp-block-categories-list a:hover,
.sidebar-widget .widget_categories a:hover {
  color: var(--color-accent);
}

/* --- Tag Cloud widget --- */
.sidebar-widget .wp-block-tag-cloud,
.sidebar-widget .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.sidebar-widget .wp-block-tag-cloud a,
.sidebar-widget .tagcloud a {
  display: inline-block;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius-sm);
  padding: 4px 12px;
  color: var(--color-text-secondary) !important;
  font-size: var(--text-caption) !important;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar-widget .wp-block-tag-cloud a:hover,
.sidebar-widget .tagcloud a:hover {
  background: var(--color-border);
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary) !important;
}

/* --- Generic block group reset inside widgets --- */
.sidebar-widget .wp-block-group__inner-container > *:first-child {
  margin-top: 0;
}

.sidebar-widget .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   4. AUTHOR BOX (single post)
   ========================================================================== */

.post-author-box {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-lg) 0;
  margin: var(--space-xl) 0 0;
}

.post-author-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.post-author-info {
  flex: 1;
  min-width: 0;
}

.post-author-name {
  font-size: var(--text-body-large);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 4px;
}

.post-author-name a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-author-name a:hover {
  color: var(--color-accent);
}

.post-author-bio {
  font-size: var(--text-body-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==========================================================================
   5. SHARE LINKS (single post)
   ========================================================================== */

.share-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.share-links-label {
  font-size: var(--text-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-right: var(--space-xs);
}

.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius-sm);
  padding: 6px 14px;
  color: var(--color-text-secondary);
  font-size: var(--text-body-small);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.share-link:hover {
  background: var(--color-border);
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}

.share-link span {
  line-height: 1;
}

/* ==========================================================================
   6. POST TAGS (single post)
   ========================================================================== */

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   7. RELATED POSTS (single post — de-boxed cards)
   ========================================================================== */

.related-posts {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.related-posts h2 {
  font-size: var(--text-heading-small);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-lg);
}

/* Remove card box: no border-radius, no overflow clip, no hover lift */
.related-posts .post-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.related-posts .post-card:hover {
  transform: none;
}

/* Image keeps its own rounded corners */
.related-posts .post-card .card-image {
  border-radius: var(--corner-radius-md);
  overflow: hidden;
}

/* Remove body padding — no box to pad inside */
.related-posts .post-card .card-body {
  padding: var(--space-md) 0 0;
}

/* Smaller title for related cards */
.related-posts .post-card .card-body h3 {
  font-size: var(--text-body-large);
  line-height: 1.35;
}

/* ==========================================================================
   8. APP STORE BADGE (replaces keycap text CTAs)
   ========================================================================== */

.app-store-badge {
  display: inline-block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-store-badge:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

.app-store-badge img {
  display: block;
  height: 40px;
  width: auto;
}

/* Larger badge variant for hero/CTA sections */
.app-store-badge--lg img {
  height: 54px;
}

/* Header badge — smaller */
.site-header .app-store-badge img {
  height: 32px;
}

/* CTA banner badge */
.cta-banner .app-store-badge img {
  height: 48px;
}

/* Footer badge */
.site-footer .app-store-badge img {
  height: 36px;
}

/* ==========================================================================
   9. ADMIN BAR OFFSET
   ========================================================================== */

body.admin-bar .site-header {
  top: 32px;
}

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

/* ==========================================================================
   10. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

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

  .share-links {
    justify-content: center;
  }
}