/* ═══════════════════════════════════════════════════════════

   CadnPDF Theme — Main Stylesheet

   Design System per Technical Specification §3

═══════════════════════════════════════════════════════════ */



/* ──────────────────────────────────────────────────────────

   1. DESIGN TOKENS

────────────────────────────────────────────────────────── */

:root {

  --color-bg:         #0D0F14;

  --color-surface:    #161B24;

  --color-surface-2:  #1C2333;

  --color-border:     #252D3A;

  --color-border-2:   #2E3A4E;

  --color-accent:     #00D4FF;

  --color-accent-dim: #008FAD;

  --color-accent-alt: #FF6B35;

  --color-text:       #E8EDF5;

  --color-muted:      #6B7A99;

  --color-muted-2:    #4A5568;

  --color-success:    #22C55E;

  --color-danger:     #EF4444;

  --color-warning:    #F59E0B;



  --font-display: 'Space Mono', monospace;

  --font-body:    'DM Sans', system-ui, sans-serif;

  --font-code:    'JetBrains Mono', 'Fira Code', monospace;



  --radius-sm:  4px;

  --radius-md:  8px;

  --radius-lg:  12px;

  --radius-xl:  20px;



  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);

  --shadow-md:  0 4px 16px rgba(0,0,0,.5);

  --shadow-lg:  0 8px 32px rgba(0,0,0,.6);

  --shadow-glow: 0 0 20px rgba(0,212,255,.15);



  --transition: 0.2s ease;

  --container:  1240px;

  --container-wide: 1600px;

  --header-h:   72px;

}



/* ──────────────────────────────────────────────────────────

   2. RESET & BASE

────────────────────────────────────────────────────────── */

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



html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
/* The desktop mega-menu panels (.sub-menu.mega-menu) are positioned
   absolute and sit near the right edge of the header; even while
   closed (opacity:0/visibility:hidden, not display:none, so the
   open->closed transition can animate) their box still counts toward
   the page's scrollable area, which was stretching the whole site
   ~400px wider than the viewport and adding a horizontal scrollbar.
   They already self-constrain to max-width: calc(100vw - 40px) when
   open, so clipping page-level horizontal overflow here doesn't cut
   anything off visually. */
body { overflow-x: hidden; }



body {

  background-color: var(--color-bg);

  color: var(--color-text);

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

}



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

a:hover { color: #fff; }



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



ul, ol { list-style: none; }



h1,h2,h3,h4,h5,h6 {

  font-family: var(--font-display);

  color: var(--color-text);

  line-height: 1.25;

  font-weight: 700;

}



p { margin-bottom: 1rem; }

p:last-child { margin-bottom: 0; }



code, pre {

  font-family: var(--font-code);

  background: var(--color-surface-2);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 0.15em 0.4em;

  font-size: 0.875em;

}



/* ──────────────────────────────────────────────────────────

   3. LAYOUT

────────────────────────────────────────────────────────── */

.container {

  width: 100%;

  max-width: var(--container);

  margin-inline: auto;

  padding-inline: 1.25rem;

}



/* Wide variant — used by the "Wide (Full Width)" page template

   for tool pages (report generators) that need the full viewport. */

.container-wide {

  width: 100%;

  max-width: var(--container-wide, 1600px);

  margin-inline: auto;

  padding-inline: 1.25rem;

}



.site { display: flex; flex-direction: column; min-height: 100vh; }

#content { flex: 1; }



/* ──────────────────────────────────────────────────────────

   4. HEADER

────────────────────────────────────────────────────────── */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(13,15,20,.95);

  border-bottom: 1px solid var(--color-border);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  height: var(--header-h);

}



.header-inner {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  height: 100%;

}



/* Logo */

.site-logo-text {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--color-text) !important;

  letter-spacing: -0.02em;

  white-space: nowrap;

}

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

.site-branding .custom-logo { height: 40px; width: auto; }



/* Search */

.header-search { flex: 1; max-width: 480px; position: relative; }

.search-wrap { position: relative; }



.header-search__input {

  width: 100%;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  padding: 0.5rem 1rem 0.5rem 2.6rem;

  color: var(--color-text);

  font-family: var(--font-body);

  font-size: 0.875rem;

  transition: border-color var(--transition), box-shadow var(--transition);

  outline: none;

}

.header-search__input::placeholder { color: var(--color-muted); }

.header-search__input:focus {

  border-color: var(--color-accent);

  box-shadow: 0 0 0 3px rgba(0,212,255,.15);

}



.header-search__icon {

  position: absolute;

  left: 0.75rem;

  top: 50%;

  transform: translateY(-50%);

  width: 16px;

  height: 16px;

  color: var(--color-muted);

  pointer-events: none;

}



/* Search dropdown */

.search-dropdown {

  position: absolute;

  top: calc(100% + 6px);

  left: 0; right: 0;

  background: var(--color-surface-2);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  max-height: 320px;

  overflow-y: auto;

  z-index: 200;

  display: none;

}

.search-dropdown.is-open { display: block; }

.search-result-item {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.65rem 1rem;

  border-bottom: 1px solid var(--color-border);

  transition: background var(--transition);

  color: var(--color-text);

}

.search-result-item:hover { background: var(--color-surface); }

.search-result-item:last-child { border-bottom: none; }

.sri-title { flex: 1; font-size: 0.875rem; }

.search-no-results { padding: 1rem; color: var(--color-muted); font-size: 0.875rem; }



/* Account dropdown */

.header-account { position: relative; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.header-account__trigger {

  display: flex; align-items: center; justify-content: center;

  width: 36px; height: 36px;

  padding: 0; border: 1px solid var(--color-border); border-radius: 50%;

  background: var(--color-surface); cursor: pointer;

  transition: border-color var(--transition);

}

.header-account__trigger:hover, .header-account__trigger[aria-expanded="true"] { border-color: var(--color-accent); }

.header-account__avatar { display: block; width: 32px; height: 32px; border-radius: 50%; }



.header-account__dropdown {

  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;

  width: 230px;

  background: var(--color-surface-2);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  padding: 0.4rem;

  display: none;

}

.header-account__dropdown.is-open { display: block; }



.header-account__info {

  padding: 0.6rem 0.7rem;

  margin-bottom: 0.25rem;

  border-bottom: 1px solid var(--color-border);

  display: flex; flex-direction: column; gap: 0.15rem;

}

.header-account__name { font-family: var(--font-code); font-size: 0.82rem; font-weight: 700; color: var(--color-text); }

.header-account__email { font-size: 0.72rem; color: var(--color-muted); word-break: break-all; }



.header-account__link {

  display: block;

  padding: 0.55rem 0.7rem;

  border-radius: var(--radius-sm);

  font-size: 0.82rem;

  color: var(--color-text);

  transition: background var(--transition), color var(--transition);

}

.header-account__link:hover { background: var(--color-surface); color: var(--color-accent); }

.header-account__link--danger { color: var(--color-danger); }

.header-account__link--danger:hover { background: rgba(239,68,68,.1); color: var(--color-danger); }



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

@media (min-width: 769px) { .nav-item--account { display: none; } }



/* Navigation */

.main-navigation { margin-left: auto; }

.nav-menu { display: flex; align-items: center; gap: 0.25rem; }

.nav-link {

  display: inline-flex; align-items: center; gap: 0.35rem;

  padding: 0.45rem 0.75rem;

  color: var(--color-muted);

  font-size: 0.875rem;

  font-weight: 500;

  border-radius: var(--radius-md);

  transition: color var(--transition), background var(--transition);

}

.nav-link svg { width: 14px; height: 14px; }

.nav-link:hover, .nav-link.current { color: var(--color-text); background: var(--color-surface); }

.nav-link--muted { color: var(--color-muted-2); }



/* Mobile toggle */

.nav-toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 0.5rem;

  margin-left: auto;

}

.nav-toggle span {

  display: block;

  width: 22px;

  height: 2px;

  background: var(--color-text);

  border-radius: 2px;

  transition: transform var(--transition), opacity var(--transition);

}



/* ──────────────────────────────────────────────────────────

   5. BUTTONS

────────────────────────────────────────────────────────── */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.6rem 1.25rem;

  border-radius: var(--radius-md);

  font-family: var(--font-display);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.02em;

  cursor: pointer;

  border: 1px solid transparent;

  transition: all var(--transition);

  text-decoration: none !important;

  white-space: nowrap;

  line-height: 1;

}

.btn:disabled, .btn[disabled] {

  opacity: 0.45;

  cursor: not-allowed;

  pointer-events: none;

}



.btn--primary  { background: var(--color-accent); color: #0D0F14 !important; border-color: var(--color-accent); }

.btn--primary:hover { background: #00b8d9; border-color: #00b8d9; color: #0D0F14 !important; }



.btn--accent-alt { background: var(--color-accent-alt); color: #fff !important; border-color: var(--color-accent-alt); }

.btn--accent-alt:hover { background: #e55a25; border-color: #e55a25; }



.btn--ghost { background: transparent; color: var(--color-text) !important; border-color: var(--color-border); }

.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent) !important; }



.btn--danger { background: transparent; color: var(--color-danger) !important; border-color: var(--color-danger); }

.btn--danger:hover { background: var(--color-danger); color: #fff !important; }



.btn--sm  { padding: 0.4rem 0.85rem; font-size: 0.72rem; }

.btn--lg  { padding: 0.8rem 1.75rem; font-size: 0.9rem; }

.btn--block { width: 100%; }



/* ──────────────────────────────────────────────────────────

   6. BADGES

────────────────────────────────────────────────────────── */

.badge {

  display: inline-block;

  padding: 0.18rem 0.55rem;

  border-radius: var(--radius-sm);

  font-family: var(--font-code);

  font-size: 0.68rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  line-height: 1.4;

}

.badge--xs    { font-size: 0.62rem; padding: 0.12rem 0.4rem; }

.badge--fmt   { background: #1a2436; color: var(--color-accent); }

.badge--soft  { background: #1e1a30; color: #a78bfa; }

.badge--ind   { background: #1a2a1e; color: var(--color-success); }

.badge--ver   { background: #2a1e10; color: var(--color-accent-alt); }

.badge--premium { background: linear-gradient(135deg,#FF6B35,#ff8c1a); color: #fff; }

.badge--free    { background: var(--color-surface-2); color: var(--color-muted); }

.tag-link {

  display: inline-block;

  padding: 0.2rem 0.6rem;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  font-size: 0.8rem;

  color: var(--color-muted);

  margin: 0.2rem;

  transition: border-color var(--transition), color var(--transition);

}

.tag-link:hover { border-color: var(--color-accent); color: var(--color-accent); }



/* ──────────────────────────────────────────────────────────

   7. FILE CARD

────────────────────────────────────────────────────────── */

.file-grid {

  display: grid;

  gap: 1rem;

}

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

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



.file-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);

  display: flex;

  flex-direction: column;

}

.file-card:hover {

  border-color: var(--color-accent);

  box-shadow: var(--shadow-glow);

  transform: translateY(-2px);

}

.file-card--premium { border-color: var(--color-accent-alt); }

.file-card--premium:hover { box-shadow: 0 0 20px rgba(255,107,53,.2); }



.file-card__thumb {

  position: relative;

  aspect-ratio: 4/3;

  overflow: hidden;

  background: var(--color-surface-2);

  display: block;

}

.file-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

.file-card:hover .file-card__thumb img { transform: scale(1.04); }



.file-card__thumb-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--color-surface-2) 0%, #1a2030 100%);

}

.file-card__ext {

  font-family: var(--font-code);

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--color-accent);

  opacity: 0.7;

}

.file-card__thumb .badge--premium {

  position: absolute;

  top: 0.5rem; right: 0.5rem;

}



.file-card__body {

  padding: 0.85rem;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}

.file-card__title { font-size: 0.875rem; line-height: 1.35; }

.file-card__title a { color: var(--color-text); }

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

.file-card__meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.file-card__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

  padding-top: 0.5rem;

  border-top: 1px solid var(--color-border);

}

.file-card__downloads { font-size: 0.78rem; color: var(--color-muted); font-family: var(--font-code); }



/* ──────────────────────────────────────────────────────────

   8. HERO

────────────────────────────────────────────────────────── */

.hero {

  position: relative;

  overflow: hidden;

  padding: 6rem 0 5rem;

  background: var(--color-bg);

}



.hero__grid-lines {

  position: absolute; inset: 0;

  background-image:

    linear-gradient(var(--color-border) 1px, transparent 1px),

    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);

  background-size: 40px 40px;

  opacity: 0.35;

  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);

}



.hero__inner { position: relative; text-align: center; max-width: 800px; margin-inline: auto; }



.hero__badge {

  display: inline-block;

  padding: 0.3rem 0.9rem;

  background: rgba(0,212,255,.1);

  border: 1px solid rgba(0,212,255,.3);

  border-radius: var(--radius-xl);

  color: var(--color-accent);

  font-family: var(--font-code);

  font-size: 0.72rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-bottom: 1.5rem;

}



.hero__title {

  font-size: clamp(2rem, 5vw, 3.25rem);

  line-height: 1.1;

  margin-bottom: 1.25rem;

  color: var(--color-text);

}

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



.hero__sub {

  font-size: 1.05rem;

  color: var(--color-muted);

  margin-bottom: 2.5rem;

  font-family: var(--font-code);

  letter-spacing: 0.04em;

}



.hero__search {

  position: relative;

  display: flex;

  gap: 0.5rem;

  max-width: 560px;

  margin-inline: auto;

  margin-bottom: 2rem;

}

.hero__search-input {

  flex: 1;

  background: var(--color-surface);

  border: 1px solid var(--color-border-2);

  border-radius: var(--radius-md);

  padding: 0.75rem 1rem;

  color: var(--color-text);

  font-family: var(--font-body);

  font-size: 1rem;

  outline: none;

  transition: border-color var(--transition), box-shadow var(--transition);

}

.hero__search-input::placeholder { color: var(--color-muted); }

.hero__search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,212,255,.15); }

#hero-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200; }



.hero__stats {

  display: flex;

  justify-content: center;

  gap: 2.5rem;

  font-family: var(--font-code);

  font-size: 0.85rem;

  color: var(--color-muted);

}

.hero__stats strong { color: var(--color-accent); display: block; font-size: 1.2rem; }



/* ──────────────────────────────────────────────────────────

   9. CATEGORY NAV

────────────────────────────────────────────────────────── */

.category-nav {

  padding: 2rem 0;

  border-bottom: 1px solid var(--color-border);

}

.section-label {

  font-family: var(--font-code);

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--color-muted);

  margin-bottom: 0.75rem;

}

.cat-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.cat-pill {

  display: inline-flex; align-items: center; gap: 0.4rem;

  padding: 0.4rem 0.9rem;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  font-size: 0.82rem;

  color: var(--color-text);

  transition: border-color var(--transition), background var(--transition), color var(--transition);

}

.cat-pill:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(0,212,255,.05); }

.cat-pill span { font-size: 0.72rem; color: var(--color-muted); }

.cat-pill--all { color: var(--color-accent); border-color: var(--color-accent); background: rgba(0,212,255,.06); }



/* ──────────────────────────────────────────────────────────

   10. SECTION HEADERS

────────────────────────────────────────────────────────── */

.featured-section { padding: 3rem 0; }

.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; }

.section-title { font-size: 1.35rem; }

.section-link { font-size: 0.85rem; color: var(--color-accent); }



/* ──────────────────────────────────────────────────────────

   11. PREMIUM CTA BANNER

────────────────────────────────────────────────────────── */

.premium-cta {

  background: linear-gradient(135deg, #1a1225 0%, #0d1020 100%);

  border-top: 1px solid rgba(255,107,53,.2);

  border-bottom: 1px solid rgba(255,107,53,.2);

  padding: 3rem 0;

}

.premium-cta__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  flex-wrap: wrap;

}

.premium-cta__text h2 { font-size: 1.5rem; margin: 0.5rem 0; }

.premium-cta__text p { color: var(--color-muted); margin: 0; }



/* ──────────────────────────────────────────────────────────

   12. ARCHIVE PAGE

────────────────────────────────────────────────────────── */

.archive-layout { padding: 2rem 0 4rem; }

.archive-header { margin-bottom: 2rem; }

.archive-title { font-size: 2rem; margin: 0.5rem 0; }

.archive-desc  { color: var(--color-muted); }



.archive-body {

  display: grid;

  grid-template-columns: 240px 1fr;

  gap: 2rem;

  align-items: start;

}



/* Filter Panel */

.filter-panel {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 1.25rem;

  position: sticky;

  top: calc(var(--header-h) + 1rem);

}

.filter-form { display: flex; flex-direction: column; gap: 1.25rem; }

.filter-group { display: flex; flex-direction: column; gap: 0.4rem; }

.filter-label {

  font-family: var(--font-code);

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--color-muted);

}

.filter-select {

  background: var(--color-surface-2);

  border: 1px solid var(--color-border);

  color: var(--color-text);

  border-radius: var(--radius-sm);

  padding: 0.45rem 0.65rem;

  font-size: 0.875rem;

  font-family: var(--font-body);

  outline: none;

  cursor: pointer;

  transition: border-color var(--transition);

}

.filter-select:focus { border-color: var(--color-accent); }

.filter-reset { align-self: flex-start; }



.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

.results-count { font-family: var(--font-code); font-size: 0.8rem; color: var(--color-muted); }



.archive-pagination {

  margin-top: 2.5rem;

  display: flex;

  gap: 0.4rem;

  justify-content: center;

  flex-wrap: wrap;

}

.archive-pagination .page-numbers {

  display: inline-flex; align-items: center; justify-content: center;

  min-width: 36px; height: 36px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  font-size: 0.85rem;

  color: var(--color-text);

  background: var(--color-surface);

  transition: all var(--transition);

}

.archive-pagination .page-numbers:hover,

.archive-pagination .page-numbers.current {

  border-color: var(--color-accent); color: var(--color-accent); background: rgba(0,212,255,.08);

}



/* ──────────────────────────────────────────────────────────

   13. SINGLE FILE

────────────────────────────────────────────────────────── */

.single-layout {

  display: grid;

  grid-template-columns: 1fr 320px;

  gap: 2.5rem;

  padding: 2rem 0 4rem;

  align-items: start;

}



.single-header { margin: 0.75rem 0 1.5rem; }

.single-title { font-size: 1.75rem; margin-bottom: 0.75rem; }

.single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.single-meta-stat { font-family: var(--font-code); font-size: 0.75rem; color: var(--color-muted); }

.single-meta-stat::before { content: '·'; margin-right: 0.4rem; }



.single-preview {

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--color-border);

  margin-bottom: 2rem;

  background: var(--color-surface);

}

.single-preview__img { width: 100%; max-height: 420px; object-fit: contain; }



.single-file .entry-content { color: var(--color-text); line-height: 1.7; margin-bottom: 2rem; }



/* Download Section */

.download-section {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 1.5rem;

  margin-bottom: 2rem;

}

.download-section__title {

  font-family: var(--font-code);

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--color-muted);

  margin-bottom: 1rem;

  padding-bottom: 0.75rem;

  border-bottom: 1px solid var(--color-border);

}



.download-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 0.85rem 0;

  border-bottom: 1px solid var(--color-border);

  flex-wrap: wrap;

}

.download-item:last-child { border-bottom: none; }

.download-item__info { flex: 1; min-width: 160px; }

.download-item__name { display: block; font-family: var(--font-code); font-size: 0.85rem; margin-bottom: 0.3rem; }

.download-item__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }



/* Access Gate */

.access-gate {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1.25rem;

  background: rgba(0,212,255,.05);

  border: 1px solid rgba(0,212,255,.2);

  border-radius: var(--radius-md);

  flex-wrap: wrap;

}

.access-gate--premium {

  background: rgba(255,107,53,.06);

  border-color: rgba(255,107,53,.25);

}

.access-gate__icon { font-size: 1.75rem; }

.access-gate > div { flex: 1; }

.access-gate strong { display: block; margin-bottom: 0.25rem; }

.access-gate p { color: var(--color-muted); font-size: 0.875rem; }



/* Countdown */

.countdown-wrapper {

  padding: 0.75rem 1rem;

  background: rgba(0,212,255,.05);

  border-radius: var(--radius-sm);

  margin-bottom: 0.5rem;

}

.countdown-text { font-size: 0.85rem; color: var(--color-muted); }

.countdown-num { font-family: var(--font-code); font-weight: 700; color: var(--color-accent); }



/* Sidebar cards */

.info-card, .related-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 1.25rem;

  margin-bottom: 1.25rem;

}

.info-card__title {

  font-family: var(--font-code);

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--color-muted);

  margin-bottom: 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px solid var(--color-border);

}

.info-card__list dt { color: var(--color-muted); font-size: 0.8rem; margin-top: 0.6rem; }

.info-card__list dd { font-family: var(--font-code); font-size: 0.875rem; }



.related-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }

.related-list li:last-child { border-bottom: none; }



/* Single tags */

.single-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 1.5rem; }



/* ──────────────────────────────────────────────────────────

   14. BREADCRUMB

────────────────────────────────────────────────────────── */

.breadcrumb { margin-bottom: 1rem; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0; }

.breadcrumb li {

  font-size: 0.78rem;

  color: var(--color-muted);

}

.breadcrumb li + li::before { content: ' / '; padding: 0 0.35rem; color: var(--color-muted-2); }

.breadcrumb a { color: var(--color-muted); }

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



/* ──────────────────────────────────────────────────────────

   15. DASHBOARD

────────────────────────────────────────────────────────── */

.dashboard-layout { padding: 2.5rem 0 5rem; }

.dashboard-header {

  display: flex; align-items: center; gap: 1.25rem;

  padding: 1.5rem;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  margin-bottom: 1.5rem;

}

.dashboard-avatar .avatar { border-radius: 50%; border: 2px solid var(--color-border); }

.dashboard-title { font-size: 1.5rem; margin-bottom: 0.4rem; }

.dashboard-plan { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.dashboard-upgrade-link { font-size: 0.85rem; color: var(--color-accent-alt); }



.dashboard-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 2rem;

}

.stat-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 1.25rem;

  text-align: center;

}

.stat-card__num {

  display: block;

  font-family: var(--font-display);

  font-size: 2rem;

  color: var(--color-accent);

  line-height: 1;

  margin-bottom: 0.4rem;

}

.stat-card__label { font-size: 0.8rem; color: var(--color-muted); }



.dashboard-section {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 1.5rem;

  margin-bottom: 1.5rem;

}

.dashboard-section-title { font-size: 1rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }



/* Table */

.table-wrap { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.data-table th { padding: 0.6rem 0.75rem; text-align: left; font-family: var(--font-code); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); border-bottom: 1px solid var(--color-border); }

.data-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--color-border); }

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td { background: rgba(255,255,255,.02); }



/* Subscription / Account */

.subscription-card { background: var(--color-surface-2); border-radius: var(--radius-md); padding: 1.25rem; }

.subscription-upgrade h3 { margin-bottom: 0.75rem; }

.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-bottom: 1.25rem; }

.feature-list li { font-size: 0.875rem; color: var(--color-muted); }

.feature-list li::before { content: none; }

.account-info { margin-bottom: 1rem; }

.account-info p { font-size: 0.9rem; margin-bottom: 0.3rem; }

.account-actions { display: flex; gap: 0.5rem; }



/* ──────────────────────────────────────────────────────────

   16. PRICING

────────────────────────────────────────────────────────── */

.pricing-layout { padding: 4rem 0; }

.pricing-header { text-align: center; margin-bottom: 3rem; }

.pricing-title { font-size: 2.5rem; margin-bottom: 0.75rem; }

.pricing-sub { font-size: 1.05rem; color: var(--color-muted); }



.pricing-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  align-items: start;

  margin-bottom: 4rem;

}

.pricing-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 2rem;

  position: relative;

  transition: border-color var(--transition), box-shadow var(--transition);

}

.pricing-card--featured {

  border-color: var(--color-accent);

  box-shadow: var(--shadow-glow);

  transform: scale(1.03);

}

.pricing-card--annual { border-color: var(--color-accent-alt); }



.pricing-card__badge {

  position: absolute;

  top: -0.75rem; left: 50%;

  transform: translateX(-50%);

  background: var(--color-accent);

  color: #0D0F14;

  padding: 0.2rem 0.9rem;

  border-radius: var(--radius-xl);

  font-family: var(--font-code);

  font-size: 0.68rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  white-space: nowrap;

}

.pricing-card__badge--save { background: var(--color-accent-alt); color: #fff; }

.pricing-card__header { margin-bottom: 1.75rem; }

.pricing-card__name { font-family: var(--font-code); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }

.pricing-card__price { margin: 0.5rem 0; }

.price-amount { font-family: var(--font-display); font-size: 2.75rem; color: var(--color-text); }

.price-period { font-size: 0.9rem; color: var(--color-muted); }

.pricing-card__tagline { font-size: 0.875rem; color: var(--color-muted); }



.pricing-card__features { margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: 0.55rem; }

.feat { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; }

.feat::before { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; margin-top: 0.1rem; }

.feat--yes::before { content: '✓'; background: rgba(34,197,94,.15); color: var(--color-success); }

.feat--no::before  { content: '×'; background: rgba(255,255,255,.05); color: var(--color-muted-2); }

.feat--no { color: var(--color-muted-2); }

.pricing-card__note { text-align: center; font-size: 0.78rem; color: var(--color-muted); margin-top: 0.75rem; }



/* FAQ */

.pricing-faq { padding-top: 2rem; border-top: 1px solid var(--color-border); }

.pricing-faq .section-title { margin-bottom: 2rem; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.faq-item { padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

.faq-item h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }

.faq-item p  { font-size: 0.875rem; color: var(--color-muted); }



/* ──────────────────────────────────────────────────────────

   17. FOOTER

────────────────────────────────────────────────────────── */

.site-footer {

  background: var(--color-surface);

  border-top: 1px solid var(--color-border);

  margin-top: auto;

}

.footer-main {

  display: grid;

  grid-template-columns: 2fr 1fr 1.5fr;

  gap: 3rem;

  padding: 3.5rem 0;

}

.footer-heading { font-family: var(--font-code); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: 1rem; }

.footer-about { font-size: 0.875rem; color: var(--color-muted); margin: 0.75rem 0 1rem; line-height: 1.6; }

.footer-logo .site-logo-text { font-size: 1rem; }

.footer-logo .custom-logo { height: 36px; }



.footer-social { display: flex; gap: 0.5rem; }

.social-link {

  width: 32px; height: 32px;

  display: flex; align-items: center; justify-content: center;

  background: var(--color-surface-2);

  border: 1px solid var(--color-border);

  border-radius: 50%;

  font-size: 0.75rem;

  color: var(--color-muted);

  font-family: var(--font-code);

  transition: all var(--transition);

}

.social-link:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(0,212,255,.08); }



.footer-links { display: flex; flex-direction: column; gap: 0.45rem; }

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

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

.footer-links .count { color: var(--color-muted-2); font-size: 0.78rem; }



.newsletter-form { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }

.newsletter-input {

  flex: 1;

  background: var(--color-surface-2);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 0.5rem 0.75rem;

  color: var(--color-text);

  font-size: 0.875rem;

  outline: none;

}

.newsletter-input::placeholder { color: var(--color-muted); }

.newsletter-input:focus { border-color: var(--color-accent); }

.footer-newsletter-desc { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0.75rem; }

.footer-legal-note { font-size: 0.75rem; color: var(--color-muted-2); }



.footer-bottom {

  border-top: 1px solid var(--color-border);

  padding: 1rem 0;

}

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

.footer-copy { font-size: 0.8rem; color: var(--color-muted); }

.footer-legal-nav { display: flex; gap: 1rem; }

.footer-legal-nav a { font-size: 0.8rem; color: var(--color-muted); }

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



/* ──────────────────────────────────────────────────────────

   18. AD ZONES

────────────────────────────────────────────────────────── */

.ad-zone { text-align: center; overflow: hidden; }

.ad-zone--header { padding: 0.5rem 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

.ad-zone--footer-banner { padding: 1.25rem 0; border-top: 1px solid var(--color-border); }

.ad-zone--in-content { margin: 1.5rem 0; }

.ad-zone--sidebar { margin-top: 1.25rem; }



/* ──────────────────────────────────────────────────────────

   19. SEARCH PAGE

────────────────────────────────────────────────────────── */

.search-page { padding: 2.5rem 0 5rem; }

.search-page-header { margin-bottom: 2rem; }

.search-page .file-grid--3col { }

.no-results-msg {

  padding: 3rem;

  text-align: center;

  color: var(--color-muted);

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  border: 1px solid var(--color-border);

}



/* ──────────────────────────────────────────────────────────

   20. 404

────────────────────────────────────────────────────────── */

.error-404 {

  display: flex; align-items: center; justify-content: center;

  min-height: 60vh; text-align: center; flex-direction: column; gap: 1.5rem;

}

.error-404__code { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--color-accent); opacity: 0.3; }

.error-404__title { font-size: 1.75rem; }

.error-404__sub { color: var(--color-muted); }



/* ──────────────────────────────────────────────────────────

   21. UTILITY

────────────────────────────────────────────────────────── */

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

.empty-state { color: var(--color-muted); font-size: 0.9rem; }

.empty-state a { color: var(--color-accent); }

.text-center { text-align: center; }

.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }

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



/* ──────────────────────────────────────────────────────────

   22. RESPONSIVE

────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

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

  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

  .pricing-card--featured { transform: none; }

  .footer-main { grid-template-columns: 1fr 1fr; }

  .footer-col--newsletter { grid-column: 1 / -1; }

}



@media (max-width: 768px) {

  :root { --header-h: 60px; }

  .header-search { display: none; }

  .nav-toggle { display: flex; }

  .nav-menu {

    display: none; position: fixed; inset: var(--header-h) 0 0 0;

    flex-direction: column; align-items: flex-start;

    background: var(--color-surface); padding: 1.5rem;

    border-top: 1px solid var(--color-border);

    overflow-y: auto; z-index: 99;

    gap: 0.25rem;

  }

  .nav-menu.is-open { display: flex; }

  .nav-menu .nav-link { width: 100%; padding: 0.75rem; font-size: 1rem; }



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

  .hero { padding: 3.5rem 0 3rem; }

  .hero__search { flex-direction: column; }

  .hero__stats { gap: 1.5rem; }

  .archive-body { grid-template-columns: 1fr; }

  .filter-panel { position: static; }

  .single-layout { grid-template-columns: 1fr; }

  .dashboard-stats { grid-template-columns: 1fr 1fr; }

  .feature-list { grid-template-columns: 1fr; }

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

  .footer-main { grid-template-columns: 1fr; gap: 2rem; }

  .footer-col--newsletter { grid-column: auto; }

  .footer-bottom-inner { flex-direction: column; text-align: center; }

}



@media (max-width: 480px) {

  .file-grid--4col, .file-grid--3col { grid-template-columns: 1fr; }

  .premium-cta__inner { flex-direction: column; text-align: center; }

  .dashboard-stats { grid-template-columns: 1fr; }

  .pricing-grid { max-width: 100%; }

  .hero__title { font-size: 1.75rem; }

  .newsletter-form { flex-direction: column; }

}

/* ──────────────────────────────────────────────────────────
   MEGAMENU + MOBILE NAV (v4)
   Click-driven dropdown/mega-panel for nav items, built by the
   wp_footer script in functions.php. Pairs with .nav-item.has-dropdown
   / .is-open (small menus) and .mnav-drilled / .mnav-section-li
   (big menus like Civil, which drill into their own full-screen
   panel with a back button instead of expanding inline).
────────────────────────────────────────────────────────── */

.nav-item.has-dropdown { position: relative; }

.nav-link--has-dropdown { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-link--has-dropdown::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition, 180ms ease);
}
.nav-item.has-dropdown.is-open .nav-link--has-dropdown::after { transform: rotate(225deg); }
/* "Drill" triggers (Civil, on mobile) get a right-pointing chevron that
   doesn't rotate — it navigates to a screen, it doesn't expand in place. */
.nav-link--drill::after { transform: rotate(-45deg) !important; }
.nav-item.has-dropdown.is-open .nav-link--drill::after { transform: rotate(-45deg) !important; }

.sub-menu.mega-menu { list-style: none; margin: 0; padding: 0; }
.mega-col, .mega-col > ul { list-style: none; margin: 0; padding: 0; }
/* The mobile drill-in panel (.mnav-section-li) is a sibling <li> appended
   to the nav <ul> for big menus. It's only meant to exist below the
   768px breakpoint (where the mobile media query below gives it
   position:absolute + display:block); hide it by default so it doesn't
   render as a raw, unstyled list item inline in the desktop header. */
.mnav-section-li { display: none; }
.mega-col-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--color-text, #e7edf3);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.mega-col-head svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--color-accent, #22d3ee); }
.mega-col ul li a {
  display: block; border-radius: var(--radius-sm, 6px);
  color: var(--color-muted, #8b98a5); text-decoration: none;
  font-size: 0.85rem; line-height: 1.4;
  transition: color var(--transition, 180ms ease), background var(--transition, 180ms ease);
}
.mega-col ul li a:hover, .mega-col ul li a:focus-visible {
  color: var(--color-text, #e7edf3); background: var(--color-surface, rgba(255,255,255,.05));
}

/* ── Desktop: wide multi-column mega panel (unchanged from v1) ── */
@media (min-width: 769px) {
  .sub-menu.mega-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    display: grid; grid-template-columns: repeat(var(--cols, 3), 220px); gap: 28px;
    width: max-content; max-width: calc(100vw - 40px);
    background: var(--color-surface-2, #161c25);
    border: 1px solid var(--color-border, #232b36);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-lg, 0 20px 45px -10px rgba(0,0,0,.55));
    padding: 22px 24px; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--transition, 180ms ease), transform var(--transition, 180ms ease), visibility 0s linear 180ms;
  }
  .nav-item.has-dropdown.is-open .sub-menu.mega-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity var(--transition, 180ms ease), transform var(--transition, 180ms ease), visibility 0s linear 0s;
  }
  .mega-col ul li a { padding: 7px 8px; margin: 0 -8px; }

  /* Wide grouped panels (Civil-style, 4 columns) don't fit anchored
     under their own trigger — Civil sits near the right edge of the
     header, so left:0 (relative to the trigger) ran the panel off the
     right side of the screen (confirmed live). Center these specifically
     within the page's actual content width instead, the same width the
     hero/container content uses, regardless of which nav item opened it.
     position:fixed here is deliberate, not a mistake: #masthead has
     backdrop-filter, which (per spec) makes it the containing block for
     fixed descendants too, so this still tracks the sticky header
     without needing JS to compute an offset. */
  .sub-menu.mega-menu.mega-menu--drill {
    position: fixed;
    top: 100%;
    left: 50%;
    width: max-content;
    max-width: min(var(--container, 1240px), calc(100vw - 40px));
    transform: translateX(-50%) translateY(-6px);
  }
  .nav-item.has-dropdown.is-open .sub-menu.mega-menu.mega-menu--drill {
    transform: translateX(-50%) translateY(0);
  }
}

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

  /* BUG FIX 1 (confirmed live): #masthead has backdrop-filter, which
     makes it the containing block for position:fixed descendants
     instead of the screen. top+bottom stretch then resolves against
     the ~60px header instead of the viewport and collapses to ~0.
     Anchor with top:100% (now correctly "right after the header",
     since the header IS the containing block) and an explicit
     viewport-unit height instead. */
  .nav-menu.is-open {
    top: 100% !important;
    bottom: auto !important;
    height: calc(100vh - var(--header-h, 60px)) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* BUG FIX 2 (confirmed live): a stray unguarded rule elsewhere in
     main.css sets `.nav-menu .sub-menu { position: absolute; }`,
     which floats any dropdown over its siblings instead of pushing
     them down. Overrides it for the small-menu inline accordion
     (Architecture, MEP). Civil no longer uses inline expansion at
     all (see the drill panel below), so this doesn't apply to it. */
  .sub-menu.mega-menu { position: static !important; }

  /* Small menus (<=6 items): simple in-place accordion */
  .sub-menu.mega-menu {
    display: block; max-height: 0; overflow: hidden;
    padding-left: 0.75rem; margin-left: 0.75rem;
    border-left: 1px solid var(--color-border, #232b36);
    transition: max-height 260ms ease;
  }
  .nav-item.has-dropdown.is-open .sub-menu.mega-menu {
    max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .mega-col { display: block; margin-top: 14px; }
  .mega-col:first-child { margin-top: 6px; }
  .mega-col ul li a { padding: 0.55rem 0.7rem; }

  /* Big menus (Civil): never expand inline — the drill panel below
     handles them instead. */
  .sub-menu.mega-menu.mega-menu--drill { display: none !important; }

  /* Drill-in section panel — slides in from the right, full size of
     the (now correctly-sized) mobile nav shell. Sibling <li> of the
     regular menu items, inside the same <ul class="nav-menu">. */
  .nav-menu.mnav-drilled > li:not(.mnav-section-li) { display: none; }

  .mnav-section-li {
    list-style: none;
    position: absolute; inset: 0;
    display: block;
    background: var(--color-surface, #11161d);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0; margin: 0;
  }
  .nav-menu.mnav-drilled .mnav-section-li.active { transform: translateX(0); }

  .mnav-section-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--color-surface, #11161d);
    border-bottom: 1px solid var(--color-border, #232b36);
  }
  .mnav-back {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none;
    color: var(--color-accent, #22d3ee);
    font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer;
    padding: 8px 4px; margin: -8px 0 -8px -4px;
  }
  .mnav-back .chev-left {
    width: 7px; height: 7px;
    border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .mnav-section-title { color: var(--color-text, #e7edf3); font-size: 0.9rem; font-weight: 700; }

  .mnav-grp { padding: 16px 18px 4px; }
  .mnav-grp-head {
    display: flex; align-items: center; gap: 8px;
    color: var(--color-muted, #8b98a5);
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  .mnav-grp-head svg { width: 13px; height: 13px; color: var(--color-accent, #22d3ee); flex: 0 0 13px; }
  .mnav-grp a {
    display: block; padding: 11px 8px; margin: 0 -8px;
    border-radius: var(--radius-sm, 6px);
    color: var(--color-muted, #8b98a5); text-decoration: none; font-size: 0.85rem;
  }
  .mnav-grp a:active, .mnav-grp a:hover {
    background: var(--color-surface-2, #161c25); color: var(--color-text, #e7edf3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-menu.mega-menu, .mnav-section-li, .nav-link--has-dropdown::after {
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────
   BLOG (page-blog.php, single.php)
────────────────────────────────────────────────────────── */
.blog-layout { padding: 2.5rem 0 4.5rem; }
.blog-header { margin-bottom: 2rem; }
.blog-header .hero__badge { margin-bottom: 1rem; }
.blog-title { font-size: 2.25rem; margin: 0 0 0.75rem; }
.blog-desc { color: var(--color-muted); max-width: 640px; }

.category-nav--blog { padding: 0 0 2rem; border-bottom: none; }

/* Post grid & cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.post-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.post-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-surface-2);
  display: block;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-surface-2) 0%, #1a2030 100%);
  font-family: var(--font-code);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  opacity: 0.65;
}
.post-card__body {
  padding: 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.post-card__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.post-card__title { font-size: 1rem; line-height: 1.4; }
.post-card__title a { color: var(--color-text); }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt {
  font-size: 0.85rem;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.post-card__meta {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* Featured card */
.blog-featured { margin-bottom: 2.5rem; }
.post-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; }
.post-card--featured .post-card__thumb { aspect-ratio: auto; min-height: 280px; height: 100%; }
.post-card--featured .post-card__body { padding: 1.75rem; gap: 0.75rem; }
.post-card__title--lg { font-size: 1.5rem; }
.post-card__excerpt--lg { -webkit-line-clamp: 4; font-size: 0.95rem; }

/* Single post */
.single-post-layout { padding: 2.5rem 0 4.5rem; }
.single-post-article { max-width: 800px; margin-inline: auto; }
.single-post-header { margin-bottom: 1.5rem; }
.single-post-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.single-post-title {
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  line-height: 1.25;
  margin: 0 0 1.1rem;
}
.single-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-code);
  font-size: 0.78rem;
  color: var(--color-muted);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.single-post-thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin: 2rem 0;
}
.single-post-thumb img { width: 100%; }

/* Article typography */
.post-content { margin-top: 2rem; font-size: 1.02rem; line-height: 1.75; }
.post-content > * + * { margin-top: 1.1rem; }
.post-content h2 {
  font-size: 1.45rem;
  margin: 2.4rem 0 0.9rem;
}
.post-content h2::before { content: '// '; color: var(--color-accent); }
.post-content h3 { font-size: 1.15rem; margin: 1.9rem 0 0.7rem; }
.post-content h4 { font-size: 1rem; margin: 1.5rem 0 0.6rem; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin: 0 0 1.25rem; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: 0.45rem; }
.post-content li::marker { color: var(--color-accent); }
.post-content a { border-bottom: 1px dashed rgba(0,212,255,.45); }
.post-content a:hover { border-bottom-style: solid; }
.post-content blockquote {
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-muted);
  margin: 1.5rem 0;
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  line-height: 1.6;
}
.post-content pre code { background: none; border: none; padding: 0; }
.post-content img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 1.5rem auto;
}
.post-content figure { margin: 1.5rem 0; }
.post-content figcaption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
  font-family: var(--font-code);
  margin-top: 0.5rem;
}
.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1.5rem 0;
}
.post-content th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: var(--font-code);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-2);
}
.post-content td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-border); }
.post-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2.25rem 0; }

/* Prev / next navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.5rem 0 0;
}
.post-nav__link {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.post-nav__link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-glow); }
.post-nav__link--next { text-align: right; }
.post-nav__label {
  display: block;
  font-family: var(--font-code);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
}
.post-nav__title { color: var(--color-text); font-size: 0.9rem; line-height: 1.4; }
.post-nav__link:hover .post-nav__title { color: var(--color-accent); }

/* Related articles */
.related-posts {
  max-width: var(--container);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

/* Blog responsive */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .post-card--featured { grid-template-columns: 1fr; }
  .post-card--featured .post-card__thumb { min-height: 0; aspect-ratio: 16/9; height: auto; }
  .post-nav { grid-template-columns: 1fr; }
  .blog-title { font-size: 1.85rem; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
}