/* ==========================================================================
   Terminal Journal Main Stylesheet
   ========================================================================== */

/* --- DESIGN TOKENS --- */
:root {
  --font-scale: 1;
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Space Mono', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs:   clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  --text-sm:   clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  --text-lg:   clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --text-xl:   clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
  --text-2xl:  clamp(1.8rem, 1.5rem + 1.5vw, 3rem);
  --text-hero: clamp(3rem, 1rem + 8vw, 7.5rem);

  --border-width: 2px;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --mobile-padding: 15px;
  --desktop-padding: 30px;
}

/* 1. ALABASTER PRINT (Default Light) */
:root, html[data-theme="light"] {
  --bg: #F5F3EE;
  --surface: #EADFD3;
  --surface-2: #DFD3C3;
  --fg: #0A0B10;
  --fg-muted: #3A3830;
  --fg-faint: #8E8D8A;
  --border: #0A0B10;
  --border-light: rgba(10, 11, 16, 0.15);
  --accent: #DE3B2B;
  --accent-hover: #B82F22;
  --inverse-bg: #0A0B10;
  --inverse-fg: #F5F3EE;
  --selection-color: rgba(222, 59, 43, 0.15);
}

/* 2. CARBON SYSTEM (Default Dark) */
html[data-theme="dark"] {
  --bg: #0A0B10;
  --surface: #12131C;
  --surface-2: #1B1D2B;
  --fg: #F0EDE6;
  --fg-muted: #B8B5B0;
  --fg-faint: #6A6D75;
  --border: #F0EDE6;
  --border-light: rgba(240, 237, 230, 0.15);
  --accent: #E8432A;
  --accent-hover: #F25840;
  --inverse-bg: #F0EDE6;
  --inverse-fg: #0A0B10;
  --selection-color: rgba(232, 67, 42, 0.2);
}

/* 3. SLATE WORKSPACE */
html[data-theme="slate"] {
  --bg: #1E1E1E;
  --surface: #262626;
  --surface-2: #303030;
  --fg: #E0E0E0;
  --fg-muted: #A0A0A0;
  --fg-faint: #626262;
  --border: #E0E0E0;
  --border-light: rgba(224, 224, 224, 0.15);
  --accent: #7C3AED;
  --accent-hover: #9061F9;
  --inverse-bg: #E0E0E0;
  --inverse-fg: #1E1E1E;
  --selection-color: rgba(124, 58, 237, 0.2);
}

/* 4. STEEL DIMMED */
html[data-theme="steel"] {
  --bg: #22272E;
  --surface: #2D333B;
  --surface-2: #3E444D;
  --fg: #ADBAC7;
  --fg-muted: #768390;
  --fg-faint: #545D68;
  --border: #ADBAC7;
  --border-light: rgba(173, 186, 199, 0.15);
  --accent: #316DCA;
  --accent-hover: #539BF5;
  --inverse-bg: #ADBAC7;
  --inverse-fg: #22272E;
  --selection-color: rgba(49, 109, 202, 0.25);
}

/* 5. ARCTIC FROST */
html[data-theme="arctic"] {
  --bg: #2E3440;
  --surface: #3B4252;
  --surface-2: #434C5E;
  --fg: #D8DEE9;
  --fg-muted: #8FBCBB;
  --fg-faint: #4C566A;
  --border: #D8DEE9;
  --border-light: rgba(216, 222, 233, 0.15);
  --accent: #88C0D0;
  --accent-hover: #81A1C1;
  --inverse-bg: #D8DEE9;
  --inverse-fg: #2E3440;
  --selection-color: rgba(136, 192, 208, 0.2);
}

/* 6. VAMPIRE NIGHT */
html[data-theme="vampire"] {
  --bg: #282A36;
  --surface: #343746;
  --surface-2: #44475A;
  --fg: #F8F8F2;
  --fg-muted: #6272A4;
  --fg-faint: #44475A;
  --border: #F8F8F2;
  --border-light: rgba(248, 248, 242, 0.15);
  --accent: #FF79C6;
  --accent-hover: #BD93F9;
  --inverse-bg: #F8F8F2;
  --inverse-fg: #282A36;
  --selection-color: rgba(255, 121, 198, 0.2);
}

/* 7. ABYSSAL GOLD */
html[data-theme="abyssal"] {
  --bg: #002B36;
  --surface: #073642;
  --surface-2: #0B4A5A;
  --fg: #839496;
  --fg-muted: #93A1A1;
  --fg-faint: #586E75;
  --border: #93A1A1;
  --border-light: rgba(147, 161, 161, 0.15);
  --accent: #B58900;
  --accent-hover: #CB4B16;
  --inverse-bg: #93A1A1;
  --inverse-fg: #002B36;
  --selection-color: rgba(181, 137, 0, 0.25);
}

/* 8. RETRO CLAY */
html[data-theme="clay"] {
  --bg: #282828;
  --surface: #3D3836;
  --surface-2: #504945;
  --fg: #EBDBB2;
  --fg-muted: #A89984;
  --fg-faint: #665C54;
  --border: #EBDBB2;
  --border-light: rgba(235, 219, 178, 0.15);
  --accent: #FE8019;
  --accent-hover: #D65D0E;
  --inverse-bg: #EBDBB2;
  --inverse-fg: #282828;
  --selection-color: rgba(254, 128, 25, 0.2);
}

/* 9. DEVELOPER ECLIPSE */
html[data-theme="eclipse"] {
  --bg: #282C34;
  --surface: #21252B;
  --surface-2: #3E4452;
  --fg: #ABB2BF;
  --fg-muted: #5C6370;
  --fg-faint: #3E4452;
  --border: #ABB2BF;
  --border-light: rgba(171, 178, 191, 0.15);
  --accent: #61AFEF;
  --accent-hover: #528BFF;
  --inverse-bg: #ABB2BF;
  --inverse-fg: #282C34;
  --selection-color: rgba(97, 175, 239, 0.2);
}

/* 10. CHROMA SYNTH */
html[data-theme="chroma"] {
  --bg: #0F051D;
  --surface: #1C0B35;
  --surface-2: #3B0F5C;
  --fg: #00F0FF;
  --fg-muted: #A020F0;
  --fg-faint: #3B0F5C;
  --border: #FF007F;
  --border-light: rgba(255, 0, 127, 0.3);
  --accent: #FF007F;
  --accent-hover: #FF3399;
  --inverse-bg: #00F0FF;
  --inverse-fg: #0F051D;
  --selection-color: rgba(255, 0, 127, 0.3);
}

/* 11. EVERGREEN LOG */
html[data-theme="evergreen"] {
  --bg: #0E1B15;
  --surface: #172A20;
  --surface-2: #233F31;
  --fg: #CCE3D8;
  --fg-muted: #8EBCA4;
  --fg-faint: #335443;
  --border: #CCE3D8;
  --border-light: rgba(204, 227, 216, 0.15);
  --accent: #10B981;
  --accent-hover: #34D399;
  --inverse-bg: #CCE3D8;
  --inverse-fg: #0E1B15;
  --selection-color: rgba(16, 185, 129, 0.2);
}

/* 12. MATRIX BINARY */
html[data-theme="matrix"] {
  --bg: #000000;
  --surface: #111111;
  --surface-2: #222222;
  --fg: #FFFFFF;
  --fg-muted: #888888;
  --fg-faint: #444444;
  --border: #FFFFFF;
  --border-light: rgba(255, 255, 255, 0.2);
  --accent: #00FF00;
  --accent-hover: #33FF33;
  --inverse-bg: #FFFFFF;
  --inverse-fg: #000000;
  --selection-color: rgba(0, 255, 0, 0.3);
}

/* 13. PHOSPHOR AMBER */
html[data-theme="amber"] {
  --bg: #0C0B0A;
  --surface: #161412;
  --surface-2: #2B2622;
  --fg: #FFE3CC;
  --fg-muted: #D9A07E;
  --fg-faint: #543A2A;
  --border: #FFE3CC;
  --border-light: rgba(255, 227, 204, 0.15);
  --accent: #FF9F1C;
  --accent-hover: #FFAE42;
  --inverse-bg: #FFE3CC;
  --inverse-fg: #0C0B0A;
  --selection-color: rgba(255, 159, 28, 0.25);
}

/* 14. SUBMARINE BLUE */
html[data-theme="submarine"] {
  --bg: #0B132B;
  --surface: #1C2541;
  --surface-2: #3A506B;
  --fg: #E0F2FE;
  --fg-muted: #8EA8C3;
  --fg-faint: #2C3E50;
  --border: #E0F2FE;
  --border-light: rgba(224, 242, 254, 0.15);
  --accent: #38BDF8;
  --accent-hover: #7DD3FC;
  --inverse-bg: #E0F2FE;
  --inverse-fg: #0B132B;
  --selection-color: rgba(56, 189, 248, 0.2);
}

/* 15. INDUSTRIAL COPPER */
html[data-theme="copper"] {
  --bg: #1C1615;
  --surface: #2B2220;
  --surface-2: #40322E;
  --fg: #F5EBE6;
  --fg-muted: #D9A496;
  --fg-faint: #5C433E;
  --border: #F5EBE6;
  --border-light: rgba(245, 235, 230, 0.15);
  --accent: #D97706;
  --accent-hover: #F59E0B;
  --inverse-bg: #F5EBE6;
  --inverse-fg: #1C1615;
  --selection-color: rgba(217, 119, 6, 0.25);
}

/* 16. DESERT ROSE */
html[data-theme="desert"] {
  --bg: #F4E9E8;
  --surface: #EADAD9;
  --surface-2: #DEC3C1;
  --fg: #2A2020;
  --fg-muted: #665050;
  --fg-faint: #997D7D;
  --border: #2A2020;
  --border-light: rgba(42, 32, 32, 0.15);
  --accent: #881337;
  --accent-hover: #9F1239;
  --inverse-bg: #2A2020;
  --inverse-fg: #F4E9E8;
  --selection-color: rgba(136, 19, 55, 0.15);
}

/* 17. COSMIC VOID */
html[data-theme="cosmic"] {
  --bg: #090514;
  --surface: #160C2E;
  --surface-2: #2B1857;
  --fg: #EBD9FC;
  --fg-muted: #B78DF2;
  --fg-faint: #44237F;
  --border: #EBD9FC;
  --border-light: rgba(235, 217, 252, 0.15);
  --accent: #D946EF;
  --accent-hover: #E879F9;
  --inverse-bg: #EBD9FC;
  --inverse-fg: #090514;
  --selection-color: rgba(217, 70, 239, 0.2);
}

/* 18. MONOCHROME SLATE */
html[data-theme="graphite"] {
  --bg: #2D3130;
  --surface: #3E4342;
  --surface-2: #525958;
  --fg: #F3F4F6;
  --fg-muted: #9CA3AF;
  --fg-faint: #4B5563;
  --border: #F3F4F6;
  --border-light: rgba(243, 244, 246, 0.15);
  --accent: #14B8A6;
  --accent-hover: #2DD4BF;
  --inverse-bg: #F3F4F6;
  --inverse-fg: #2D3130;
  --selection-color: rgba(20, 184, 166, 0.2);
}

/* 19. CRIMSON VELVET */
html[data-theme="bordeaux"] {
  --bg: #1F0A0E;
  --surface: #2D1217;
  --surface-2: #451A22;
  --fg: #FAE8EB;
  --fg-muted: #D9A0AB;
  --fg-faint: #5C2530;
  --border: #FAE8EB;
  --border-light: rgba(250, 232, 235, 0.15);
  --accent: #E11D48;
  --accent-hover: #F43F5E;
  --inverse-bg: #FAE8EB;
  --inverse-fg: #1F0A0E;
  --selection-color: rgba(225, 29, 72, 0.2);
}

/* 20. AGED PARCHMENT */
html[data-theme="parchment"] {
  --bg: #ECDCB9;
  --surface: #DFCCA0;
  --surface-2: #CFB887;
  --fg: #382912;
  --fg-muted: #6B5435;
  --fg-faint: #947E5E;
  --border: #382912;
  --border-light: rgba(56, 41, 18, 0.15);
  --accent: #B45309;
  --accent-hover: #D97706;
  --inverse-bg: #382912;
  --inverse-fg: #ECDCB9;
  --selection-color: rgba(180, 83, 9, 0.15);
}

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  height: 100%;
  font-size: calc(100% * var(--font-scale, 1));
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.1;
  font-family: var(--font-display);
  text-transform: uppercase;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--selection-color);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- LAYOUT WRAPPER --- */
.container {
  width: 100%;
  max-width: 1200px;
  padding: var(--mobile-padding);
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
}

.page-border {
  border: var(--border-width) solid var(--border);
  position: relative;
  padding: var(--mobile-padding);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - (var(--mobile-padding) * 2));
  transition: border-color var(--transition);
}

.corner {
  position: absolute;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--border);
  z-index: 10;
  transition: color var(--transition);
}
.corner-tl { top: -2px; left: -2px; transform: translate(-50%, -50%); }
.corner-tr { top: -2px; right: -2px; transform: translate(50%, -50%); }
.corner-bl { bottom: -2px; left: -2px; transform: translate(-50%, 50%); }
.corner-br { bottom: -2px; right: -2px; transform: translate(50%, 50%); }

/* --- SITE TOP BAR & HEADER --- */
.top-header {
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  text-transform: uppercase;
  border-bottom: var(--border-width) solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 20px;
  gap: 10px;
  transition: border-color var(--transition);
}

.sys-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-weight: 700;
  color: var(--fg);
}

.header-decor {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.dotted-line {
  flex-grow: 1;
  border-bottom: 2px dotted var(--border);
  height: 2px;
  opacity: 0.5;
  transition: border-color var(--transition);
}

.stripes-h {
  width: 40px;
  height: 10px;
  background: repeating-linear-gradient(
    45deg,
    var(--border),
    var(--border) 2px,
    transparent 2px,
    transparent 6px
  );
  transition: background var(--transition);
}

/* Site Navbar */
.site-navbar {
  border-bottom: var(--border-width) solid var(--border);
  margin-bottom: 20px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  transition: border-color var(--transition);
}

.logo-link {
  display: flex;
  flex-direction: column;
  padding: 10px 15px 10px 0;
  border-right: var(--border-width) solid var(--border);
  transition: border-color var(--transition);
}

.logo-primary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--fg);
}

.logo-secondary {
  font-size: 0.6rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.header-nav {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
  overflow-x: auto;
}

.header-nav ul.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.header-nav ul.nav li {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-nav a,
.header-nav ul.nav li a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 15px 20px;
  color: var(--fg-muted);
  border-right: 1px solid var(--border-light);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav ul.nav li a:hover {
  color: var(--fg);
  background: var(--surface);
}

.header-nav a.active,
.header-nav a[current="true"],
.header-nav ul.nav li.nav-current a {
  color: var(--accent);
  font-weight: bold;
}

/* --- THEME & FONT CONTROLLER WIDGET --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-left: 15px;
  flex-wrap: wrap;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  background: var(--surface);
  color: var(--fg);
  border: var(--border-width) solid var(--border);
  padding: 8px 16px;
  cursor: pointer;
  outline: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
  user-select: none;
}

.dropdown-btn:hover,
.custom-dropdown.active .dropdown-btn {
  background: var(--surface-2);
  border-color: var(--accent);
}

.btn-arrow {
  font-size: 0.65rem;
  transition: transform var(--transition);
}

.custom-dropdown.active .btn-arrow {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 260px;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  box-shadow: 4px 4px 0 var(--border);
  z-index: 100;
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.custom-dropdown.active .dropdown-content {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-list {
  max-height: 250px;
  overflow-y: auto;
  list-style: none;
  padding: 5px 0;
  margin: 0;
}

/* Custom Scrollbar for list */
.dropdown-list::-webkit-scrollbar {
  width: 6px;
}
.dropdown-list::-webkit-scrollbar-track {
  background: var(--surface);
}
.dropdown-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 1px solid var(--surface);
}

.dropdown-item {
  padding: 8px 16px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-muted);
  transition: all var(--transition);
}

.dropdown-item:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.dropdown-item.active {
  color: var(--accent);
  background: var(--surface-2);
}

/* Color Preview Badge inside dropdown */
.theme-preview-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot-bg);
  border: 2px solid var(--dot-border);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-preview-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-accent);
}

/* Divider inside typography dropdown */
.dropdown-divider {
  height: var(--border-width);
  background: var(--border-light);
  margin: 4px 0;
}

/* Font Size Slider inside typography dropdown */
.font-size-slider-box {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
}

.slider-icon {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-muted);
  user-select: none;
}

.slider-value {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
}

/* Range input styling */
#fontSizeRange {
  flex-grow: 1;
  appearance: none;
  background: var(--surface);
  height: 6px;
  border: 1px solid var(--border);
  outline: none;
  cursor: pointer;
}

#fontSizeRange::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

#fontSizeRange::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
}

/* --- HERO BANNER --- */
.hero {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.85;
  letter-spacing: 1px;
  text-transform: uppercase;
  word-wrap: break-word;
  color: var(--fg);
}

.sub-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
  border-bottom: var(--border-width) solid var(--border);
  padding-bottom: 15px;
  transition: border-color var(--transition);
}

.sub-title {
  font-size: var(--text-lg);
  letter-spacing: -0.5px;
  font-weight: 700;
  color: var(--fg);
}

.sub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
}

.barcode {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  border: 1px solid var(--border);
  padding: 5px 10px;
  letter-spacing: 4px;
  font-size: var(--text-sm);
  background: var(--surface);
  color: var(--fg);
}

.meta-details {
  font-size: 0.7rem;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: right;
  color: var(--fg-muted);
}

/* --- TICKER STRIP --- */
.ticker-strip {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  padding: 8px 0;
  overflow: hidden;
  border-bottom: var(--border-width) solid var(--border);
  margin-bottom: 20px;
  width: 100%;
}

.ticker-inner {
  display: flex;
  gap: 40px;
  animation: ticker 35s linear infinite;
  width: max-content;
}

.ticker-item {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 15px;
}

.ticker-item::after {
  content: '///';
  color: var(--accent);
}

@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* --- GRID SYSTEM --- */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  background: none;
  border: none;
  flex-grow: 1;
}

.box {
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  padding: var(--mobile-padding);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.box:hover {
  box-shadow: 4px 4px 0 var(--border);
}

/* Featured Card */
.box-featured {
  background: var(--bg);
  border: var(--border-width) solid var(--accent);
  color: var(--fg);
  z-index: 2;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.box-featured:hover {
  box-shadow: 4px 4px 0 var(--accent);
}

.box-featured .box-title {
  color: var(--accent);
}

.box-head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 15px;
  position: relative;
  flex-wrap: wrap;
}

.num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.8;
  margin-right: 10px;
  color: var(--fg-faint);
  transition: color var(--transition);
}

.box-featured .num {
  color: var(--accent);
}

.title-wrap {
  display: flex;
  align-items: flex-end;
  flex-grow: 1;
  margin-bottom: 2px;
  min-width: 150px;
}

.box-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 0.95;
  letter-spacing: 1px;
  word-wrap: break-word;
  color: var(--fg);
  transition: color var(--transition);
}

.box-divider {
  margin: 0 10px;
  margin-bottom: -2px;
  flex-shrink: 0;
  height: 25px;
  width: auto;
  color: var(--border);
}

.target-icon {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.8;
  width: 20px;
  height: 20px;
  color: var(--fg-muted);
}

.box-body {
  font-size: var(--text-sm);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 15px;
  color: var(--fg-muted);
  transition: color var(--transition);
}

.box-body p {
  margin-bottom: 12px;
}

.code-block {
  font-family: var(--font-body);
  background-color: var(--surface);
  padding: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 700;
  margin-top: 10px;
  word-break: break-all;
  border-left: 3px solid var(--accent);
  color: var(--fg);
}

.bordered-text {
  border: 1px solid var(--border);
  padding: 8px 12px;
  margin-top: 10px;
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--fg);
  transition: border-color var(--transition);
}

.box-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-faint);
  display: flex;
  justify-content: space-between;
  transition: border-color var(--transition);
}

.exec-widget {
  position: absolute;
  top: -2px;
  right: -2px;
  border-left: var(--border-width) solid var(--accent);
  border-bottom: var(--border-width) solid var(--accent);
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  z-index: 5;
}

.exec-widget .stripes-h {
  background: repeating-linear-gradient(
    45deg,
    var(--accent),
    var(--accent) 2px,
    transparent 2px,
    transparent 6px
  );
  width: 20px;
  height: 6px;
  margin: 3px 0 0 0;
}

/* --- DYNAMIC POST FEED SECTION (Homepage) --- */
.feed-heading {
  margin-top: 40px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.feed-heading h2 {
  font-size: var(--text-xl);
  color: var(--fg);
}

.feed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.post-card {
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.post-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--border);
}

.post-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.post-card-tags {
  display: flex;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
}

.post-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: 10px;
  line-height: 1.1;
  color: var(--fg);
}

.post-card-excerpt {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: 1.5;
  margin-bottom: 15px;
  flex-grow: 1;
}

.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-faint);
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
}

.read-more-btn {
  color: var(--accent);
  text-decoration: underline;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-top: var(--border-width) solid var(--border);
  margin-top: 20px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg);
}

.pagination a {
  border: var(--border-width) solid var(--border);
  padding: 6px 12px;
  background: var(--surface);
  transition: all var(--transition);
}

.pagination a:hover {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}

.page-number {
  color: var(--fg-muted);
}

/* --- POST DETAILS LAYOUT --- */
.post-hero {
  border-bottom: var(--border-width) solid var(--border);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color var(--transition);
}

.post-hero-inner {
  padding: 20px 0 var(--desktop-padding) 0;
  display: flex;
  flex-direction: column;
}

.hero-corner-tag {
  display: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  text-align: right;
  line-height: 1.8;
}

.hero-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.hero-label {
  font-family: var(--font-body);
  color: var(--fg-muted);
}

.hero-label.accent {
  color: var(--accent);
  font-weight: 700;
}

.hero-divider {
  color: var(--border-light);
}

.hero-heading {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  letter-spacing: 0.01em;
  line-height: 0.95;
  padding: 15px 0;
  color: var(--fg);
}

.hero-heading em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 20px;
  border-top: 1px solid var(--border-light);
  padding-top: 15px;
}

.hero-summary {
  font-size: var(--text-lg);
  color: var(--fg-muted);
  max-width: 55ch;
  line-height: 1.5;
}

.hero-meta-block {
  text-align: left;
  flex-shrink: 0;
}

.hero-meta-block p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  line-height: 2;
}

.hero-meta-block strong {
  color: var(--fg-muted);
  font-weight: 700;
}

/* Article Sidebar & Post Grid Layout */
.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* Post Contents */
.post-content {
  padding: 10px 0;
}

/* --- CLEAN READABLE POST CONTENT --- */
.post-content-body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--fg);
  max-width: 72ch; /* Capped reading width for perfect focus */
  margin: 0 auto;
}

.post-content-body p {
  margin-bottom: 1.5rem;
}

.post-content-body h2,
.post-content-body h3,
.post-content-body h4 {
  color: var(--fg);
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.post-content-body h2 {
  font-size: var(--text-xl);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}

.post-content-body h3 {
  font-size: var(--text-lg);
}

.post-content-body blockquote,
.post-content-body .pull-quote {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 18px 24px;
  margin: 2.2rem 0;
  color: var(--fg);
}

.post-content-body blockquote p,
.post-content-body .pull-quote p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.post-content-body ul,
.post-content-body ol {
  margin: 1.2rem 0;
  padding-left: 0;
  list-style: none;
}

.post-content-body ul li,
.post-content-body ol li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.6rem;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.post-content-body ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
}

.post-content-body ol {
  counter-reset: ol-counter;
}

.post-content-body ol li {
  padding-left: 25px;
}

.post-content-body ol li::before {
  counter-increment: ol-counter;
  content: counter(ol-counter) ".";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
}

.post-content-body img,
.post-content-body figure {
  margin: 2.5rem 0;
  border: 1px solid var(--border-light);
  padding: 8px;
  background: var(--surface);
}

.post-content-body figure figcaption {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  margin-top: 8px;
  text-align: center;
  text-transform: uppercase;
}

/* Code Snippets & Syntax Styling */
.cmd-block, pre {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.7;
  position: relative;
  overflow-x: auto;
  border: var(--border-width) solid var(--accent);
  margin: 15px 0;
}

.cmd-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px;
}

/* --- ARTICLE SIDEBAR --- */
.post-sidebar {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sidebar-widget {
  border: 1px solid var(--border-light);
  padding: 20px;
  background: var(--bg);
}

.sidebar-widget-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.sidebar-barcode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.barcode-svg {
  flex-shrink: 0;
  color: var(--fg);
}

.sidebar-id-block {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 2;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-id-block strong {
  color: var(--fg-muted);
  font-weight: 700;
}

.tag-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  color: var(--fg-muted);
  transition: all var(--transition);
}

.tag:hover {
  border-color: var(--border);
  color: var(--fg);
  background: var(--surface);
}

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

.tag.accent-tag:hover {
  background: var(--accent);
  color: var(--inverse-fg);
}

.related-post {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  transition: color var(--transition);
}

.related-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.related-post:first-of-type {
  padding-top: 0;
}

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

.related-num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-faint);
  text-transform: uppercase;
}

.related-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--fg);
  transition: color var(--transition);
}

.related-date {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--fg-faint);
  text-transform: uppercase;
}

/* --- FOOTER --- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  margin-top: 40px;
  text-transform: uppercase;
  gap: 15px;
  text-align: center;
  border-top: var(--border-width) solid var(--border);
  padding-top: 20px;
  color: var(--fg-muted);
  transition: border-color var(--transition);
}

.footer .stripes-h {
  width: 80px;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (min-width: 768px) {
  .container {
    padding: var(--desktop-padding);
  }

  .page-border {
    padding: var(--desktop-padding);
    min-height: calc(100vh - (var(--desktop-padding) * 2));
  }

  .top-header {
    flex-direction: row;
    align-items: center;
  }

  .header-decor {
    width: auto;
    flex-grow: 1;
  }

  .sub-bar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .sub-meta {
    justify-content: flex-end;
  }

  .hero-corner-tag {
    display: block;
    position: absolute;
    top: var(--desktop-padding);
    right: var(--desktop-padding);
  }

  .hero-sub-row {
    grid-template-columns: 1fr auto;
    padding-top: 20px;
  }

  .hero-meta-block {
    text-align: right;
  }

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

  .box-featured {
    grid-column: 1 / span 2;
  }

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

  .box {
    padding: 25px;
  }

  .footer {
    flex-direction: row;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .post-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }

  .post-content {
    border-right: 1px solid var(--border-light);
    padding-right: 25px;
  }
}

/* Hide screen reader accessibility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Koenig Editor Specific Styles */
.kg-width-wide {
  max-width: 110%;
  margin: 2em -5% !important;
  width: auto;
}
.kg-width-full {
  max-width: 120%;
  margin: 2em -10% !important;
  width: auto;
}
@media (max-width: 768px) {
  .kg-width-wide, .kg-width-full {
    max-width: 100%;
    margin: 1.5em 0 !important;
  }
}

/* --- RIGHT-TO-LEFT (RTL) AND FARSI OVERRIDES --- */
:root {
  --font-farsi-body: 'Vazirmatn', sans-serif;
  --font-farsi-display: 'Estedad', sans-serif;
}

[dir="rtl"], .rtl-content, .rtl-layout {
  direction: rtl;
  text-align: right;
}

/* Farsi typography fallback */
[dir="rtl"], .rtl-content, .rtl-layout,
[dir="rtl"] p, .rtl-content p, .rtl-layout p,
[dir="rtl"] li, .rtl-content li, .rtl-layout li,
[dir="rtl"] .box-body, .rtl-content .box-body,
[dir="rtl"] .post-card-excerpt, .rtl-content .post-card-excerpt,
[dir="rtl"] .hero-summary, .rtl-layout .hero-summary {
  font-family: var(--font-farsi-body), sans-serif !important;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
.rtl-content h1, .rtl-content h2, .rtl-content h3, .rtl-content h4, .rtl-content h5, .rtl-content h6,
.rtl-layout h1, .rtl-layout h2, .rtl-layout h3, .rtl-layout h4, .rtl-layout h5, .rtl-layout h6,
[dir="rtl"] .box-title, .rtl-content .box-title,
[dir="rtl"] .hero-heading, .rtl-layout .hero-heading,
[dir="rtl"] .post-card-title, .rtl-content .post-card-title,
[dir="rtl"] .related-title, .rtl-content .related-title {
  font-family: var(--font-farsi-display), sans-serif !important;
  letter-spacing: 0 !important;
}

/* Swap box layout details on homepage in RTL */
.box[dir="rtl"] .num, .box.rtl-content .num {
  margin-right: 0;
  margin-left: 10px;
}
.box[dir="rtl"] .target-icon, .box.rtl-content .target-icon {
  right: auto;
  left: 0;
}

/* Swap post card list bullets in RTL */
[dir="rtl"] ul li, .rtl-content ul li, .rtl-layout .post-content-body ul li {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] ul li::before, .rtl-content ul li::before, .rtl-layout .post-content-body ul li::before {
  left: auto;
  right: 0;
  content: "←";
}

.rtl-layout .post-content-body ol li {
  padding-left: 0;
  padding-right: 25px;
}
.rtl-layout .post-content-body ol li::before {
  left: auto;
  right: 0;
}

/* Swap blockquote / pull-quote borders in RTL */
[dir="rtl"] blockquote, [dir="rtl"] .pull-quote,
.rtl-content blockquote, .rtl-content .pull-quote,
.rtl-layout blockquote, .rtl-layout .pull-quote {
  border-left: none;
  border-right: 4px solid var(--accent);
}

/* Swap barcode letter-spacing in RTL */
[dir="rtl"] .barcode, .rtl-content .barcode, .rtl-layout .barcode {
  letter-spacing: 0;
}

/* Swap post record ID layout details on desktop */
@media (min-width: 768px) {
  .rtl-layout .hero-corner-tag {
    text-align: left;
    left: var(--desktop-padding);
    right: auto;
  }
  .rtl-layout .hero-meta-block {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .post-layout[dir="rtl"] .post-content {
    border-right: none;
    border-left: 1px solid var(--border-light);
    padding-right: 0;
    padding-left: 25px;
  }
}