/* ============================================================
   STYLE.CSS — LearningLayerByLayer

   Global stylesheet for the entire blog.
   Organised into the following sections:

   1.  Reset & base
   2.  CSS variables (design tokens)
   3.  Base document styles
   4.  Navbar
   5.  Mobile hamburger menu
   6.  Hero section
   7.  Hero search bar
   8.  Article hero
   9.  Main container
   10. Section labels
   11. Featured card (homepage)
   12. Article cards grid
   13. Category badges
   14. Video grid
   15. Horizontal scroll grids (articles, categories, videos)
   16. Focus Mode
   17. Category pills
   18. Article body & TOC
   19. Related content sections
   20. Article navigation
   21. Footer
   22. Admin panel & forms
   23. Tags
   24. Pagination
   25. Sticky footer
   26. Empty state
   27. Disclaimer page
   28. Tabs (tag page)
   29. Responsive — mobile & tablet
   ============================================================ */


/* ── 1. Reset & base ──────────────────────────────────────────
   Removes default browser margins/padding so every browser
   renders the page identically. box-sizing: border-box makes
   width/height include padding and border — more intuitive.
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── 2. CSS Variables (design tokens) ─────────────────────────
   Central design tokens used throughout the file. Changing a
   value here updates every element that references it.

   Palette:
   - dark / dark-2   : background for navbar, hero, footer
   - accent           : primary blue — links, buttons, active states
   - accent-dim/bdr   : translucent accent for backgrounds/borders
   - white            : pure white
   - gray-1/2/3       : background grays and muted text
   - text/text-2/3    : text hierarchy (dark → light)
   - border           : very subtle card borders
   - radius-sm/md/lg  : consistent border-radius scale
   ──────────────────────────────────────────────────────────── */
:root {
  --dark:       #0f0f1a;
  --dark-2:     #1a1a2e;
  --accent:     #5b8dee;
  --accent-dim: rgba(91, 141, 238, 0.15);
  --accent-bdr: rgba(91, 141, 238, 0.3);
  --white:      #ffffff;
  --gray-1:     #f5f5f7;
  --gray-2:     #e8e8ed;
  --gray-3:     #6e6e73;
  --text:       #1c1c1e;
  --text-2:     #48484a;
  --text-3:     #8a8a8e;
  --border:     rgba(0, 0, 0, 0.08);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
}


/* ── 3. Base document styles ──────────────────────────────────
   System font stack loads instantly — no external font request.
   line-height: 1.6 improves readability. Links inherit their
   parent color instead of showing the browser default blue.
   ──────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--gray-1);
  color: var(--text);
  line-height: 1.6;
  /* Sticky footer: body fills full viewport height */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content expands to push footer to the bottom */
main { flex: 1; width: 100%; }

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


/* ── 4. Navbar ────────────────────────────────────────────────
   Sticky top bar rendered in base.html on every page.
   position: sticky + top: 0 keeps it visible while scrolling.
   z-index: 100 ensures it stays above all page content.
   flex + space-between: logo left, nav links right.
   ──────────────────────────────────────────────────────────── */
.navbar {
  background: var(--dark);
  height: 56px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo { color: var(--white); font-size: 15px; font-weight: 500; letter-spacing: -0.3px; }
.logo span { color: var(--accent); }

.nav-links { display: flex; gap: 28px; }
.nav-links a { color: rgba(255,255,255,0.55); font-size: 13px; transition: color 0.15s; }
.nav-links a:hover,
.nav-links a.active { color: var(--white); }


/* ── 5. Mobile hamburger menu ─────────────────────────────────
   Three-bar button visible only on mobile (shown via media query
   at the bottom of this file). Clicking it opens a slide-in
   drawer from the right. The overlay darkens the background and
   closes the drawer when tapped.

   .ham-btn        : the three-bar button (hidden on desktop)
   .ham-bar        : each bar of the hamburger icon
   .ham-bar-short  : shorter third bar for visual style
   .ham-overlay    : full-screen dark overlay behind the drawer
   .ham-drawer     : slide-in navigation panel
   .ham-open       : applied by JS — slides drawer into view
   .ham-overlay-open: applied by JS — shows the overlay
   .ham-item       : individual nav link inside the drawer
   .ham-dot        : colored indicator dot next to each link
   ──────────────────────────────────────────────────────────── */
.ham-btn {
  display: none; /* shown via @media (max-width: 768px) */
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.ham-bar { width: 22px; height: 2px; border-radius: 2px; background: #5b8dee; }
.ham-bar-short { width: 14px; }

.ham-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
}
.ham-overlay-open { display: block; }

.ham-drawer {
  position: fixed;
  top: 0;
  right: -260px; /* hidden off-screen by default */
  width: 260px;
  height: 100vh;
  background: #0f0f1a;
  z-index: 300;
  transition: right 0.25s ease;
  padding: 80px 16px 32px;
}
.ham-open { right: 0; } /* slides into view */

.ham-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 4px;
}
.ham-item-active { background: rgba(91,141,238,0.15); color: #5b8dee; }
.ham-item:hover { background: rgba(255,255,255,0.05); }

.ham-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.ham-dot-active { background: #5b8dee; }


/* ── 6. Hero section ──────────────────────────────────────────
   Dark header block used on most pages. Uses flex to place
   text content on the left and optional elements (search bar)
   on the right. align-items: flex-end aligns both to the
   bottom edge of the hero.
   ──────────────────────────────────────────────────────────── */
.hero {
  background: var(--dark);
  padding: 47px 32px 39px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.hero-left { flex: 1; }

/* Small pill label above the hero title ("Technology blog", etc) */
.hero-tag {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: 20px;
  border: 0.5px solid var(--accent-bdr);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.hero h1 { color: var(--white); font-size: 28px; font-weight: 500; line-height: 1.28; letter-spacing: -0.6px; margin-bottom: 8px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { color: rgba(255,255,255,0.48); font-size: 14px; line-height: 1.7; max-width: 500px; }


/* ── 7. Hero search bar ───────────────────────────────────────
   Search input + button shown on the homepage hero (top right).
   flex-shrink: 0 prevents it from shrinking when the title
   needs more horizontal space.
   ──────────────────────────────────────────────────────────── */
.hero-search { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.hero-search input {
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  width: 200px;
  font-family: inherit;
}
.hero-search input::placeholder { color: rgba(255,255,255,0.35); }
.hero-search input:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.hero-search button {
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.hero-search button:hover { opacity: 0.85; }


/* ── 8. Article hero ──────────────────────────────────────────
   Dark header shown at the top of individual article pages.
   Contains: breadcrumb (Home > Category), title, metadata
   (category badge, publication date, reading time).
   ──────────────────────────────────────────────────────────── */
.article-hero {
  background: var(--dark);
  padding: 36px 0 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.article-hero .breadcrumb { font-size: 12px; color: rgba(255,255,255,0.38); margin-bottom: 14px; }
.article-hero .breadcrumb a { color: rgba(255,255,255,0.55); transition: color 0.15s; }
.article-hero .breadcrumb a:hover { color: var(--white); }
.article-hero h1 { color: var(--white); font-size: 24px; font-weight: 500; 
                  line-height: 1.35; letter-spacing: -0.4px; margin-bottom: 14px; max-width: 680px; }
.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-info { font-size: 13px; color: rgba(255,255,255,0.75); }
.meta-dot { color: rgba(255,255,255,0.5); font-size: 20px; }


/* ── 9. Main container ────────────────────────────────────────
   Constrains content to 1260px and centers it horizontally.
   Prevents text from stretching too wide on large screens.
   ──────────────────────────────────────────────────────────── */
.container { max-width: 1260px; margin: 0 auto; padding: 32px; width: 100%; }


/* ── 10. Section labels ───────────────────────────────────────
   Small uppercase headings used before content groups:
   "RECENT ARTICLES", "FEATURED VIDEOS", "CONTAINERS", etc.
   ──────────────────────────────────────────────────────────── */
.section-header { margin-bottom: 16px; }
.section-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; }


/* ── 11. Featured card (homepage) ────────────────────────────
   Larger card highlighting the most recent article.
   Centered at 50% width on desktop. float: right on
   .badge-latest pushes the "Latest article" badge to the
   right edge of the card.
   ──────────────────────────────────────────────────────────── */
.featured-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 32px;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.featured-card .badge-latest { float: right; }
.featured-card h2 { font-size: 17px; font-weight: 400; color: var(--text); line-height: 1.4; margin: 10px 0 8px; }
.featured-card p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 14px; }
.read-more { font-size: 13px; color: var(--accent); font-weight: 500; }
.read-more:hover { text-decoration: underline; }


/* ── 12. Article cards grid ───────────────────────────────────
   Responsive grid using auto-fill + minmax(240px): fits as many
   240px+ columns as possible — 4 on desktop, fewer on smaller
   screens. Responsive breakpoints override this via media queries
   at the bottom of this file.
   On hover: border darkens, card lifts 2px, shadow appears.
   ──────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
  scrollbar-width: thin;
  scrollbar-color: #1a4a7a transparent;
}
.cards-grid::-webkit-scrollbar { height: 6px; }
.cards-grid::-webkit-scrollbar-track { background: transparent; }
.cards-grid::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
.cards-grid::-webkit-scrollbar-thumb:hover { background: #1a4a7a; }

.card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.card:hover { border: 2.5px solid #a0a0a8; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.card h3 { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.45; margin-bottom: 6px; }
.card p { font-size: 12px; color: var(--text-2); line-height: 1.65; }
.card-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: var(--text-3); }

/* Order number shown in the bottom-right corner of each card */
.card-order { position: absolute; bottom: 8px; right: 10px; font-size: 11px; color: #c0c0c8; font-weight: 500; }

/* Dot separator between date and reading time in card metadata */
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-3); }


/* ── 13. Category badges ──────────────────────────────────────
   Color pills showing the category of each article or video.
   Colors are applied dynamically via inline styles using
   cat_colors injected from app.py via inject_globals().

   .card-cat  : small pill inside each card
   .badge     : shared base styles with card-cat
   .badge-latest : green "Latest article" badge on featured card
   .cat-divider  : gradient divider between category sections
   .cat-section  : scroll offset to avoid navbar overlap when
                   navigating via anchor links
   ──────────────────────────────────────────────────────────── */
.card-cat, .badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 9px;
  letter-spacing: 0.2px;
}
.badge-latest { background: #07b58f; color: #fff; font-size: 11px; padding: 4px 12px; border-radius: 20px; }

.cat-divider { border: none; height: 1px; background: linear-gradient(to right, transparent, #e9e9ec, transparent); margin: 2rem 0; }
.cat-section { scroll-margin-top: 80px; }


/* ── 14. Video grid ───────────────────────────────────────────
   Same auto-fill responsive structure as .cards-grid.
   overflow: hidden on .video-card clips the thumbnail image
   to respect the card's border-radius.
   The play button triangle is built entirely with CSS borders —
   no image or SVG icon needed.
   ──────────────────────────────────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
  scrollbar-width: thin;
  scrollbar-color: #1a4a7a transparent;
}
.video-grid::-webkit-scrollbar { height: 6px; }
.video-grid::-webkit-scrollbar-track { background: transparent; }
.video-grid::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
.video-grid::-webkit-scrollbar-thumb:hover { background: #1a4a7a; }
.video-grid .video-card { scroll-snap-align: start; }

/* 2-row horizontal scroll grid — used on the Videos page */
.video-scroll-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 36px;
  scroll-snap-type: x mandatory;
  max-width: 1002px;
  margin-left: auto;
  margin-right: auto;
  scrollbar-width: thin;
  scrollbar-color: #113c68 transparent;
}
.video-scroll-grid::-webkit-scrollbar { height: 6px; }
.video-scroll-grid::-webkit-scrollbar-track { background: transparent; }
.video-scroll-grid::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
.video-scroll-grid::-webkit-scrollbar-thumb:hover { background: #1a6aaa; }
.video-scroll-grid .video-card { scroll-snap-align: start; }

.video-card {
  background: var(--white);
  border: 1.5px solid #d1d1d6;
  border-radius: var(--radius-lg);
  overflow: hidden; /* clips thumbnail to border-radius */
  display: block;
  transition: border-color 0.15s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.video-card:hover { border-color: rgba(0,0,0,0.2); transform: translateY(-2px); }

.video-thumb {
  background: var(--dark-2);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Circular play button */
.play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Triangle shape built with CSS borders — no image needed */
.play-triangle {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid rgba(255,255,255,0.75);
  margin-left: 3px;
}

/* Red "YT" badge in the top-right corner of each thumbnail */
.yt-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff0000;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.video-info { padding: 12px 14px; }
.video-info h4 { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.45; margin-bottom: 4px; }
.video-meta { font-size: 11px; color: var(--text-3); }


/* ── 15. Horizontal scroll grids ─────────────────────────────
   Single-row horizontal scroll grids used on Articles,
   Categories, and Videos pages. Each card snaps to position
   when scrolling. Scrollbar is styled to match the design.

   .article-scroll-grid     : articles page, per category
   .cat-scroll-grid         : categories page, articles per category
   .video-scroll-grid-single: categories page, videos per category
   ──────────────────────────────────────────────────────────── */

/* Articles page — 1-row horizontal scroll per category */
.article-scroll-grid {
  display: grid;
  padding-top: 4px;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 36px;
  scroll-snap-type: x mandatory;
  max-width: 1082px;
  margin-left: auto;
  margin-right: auto;
  scrollbar-width: thin;
  scrollbar-color: #1a4a7a transparent;
  align-items: stretch;
}
.article-scroll-grid::-webkit-scrollbar { height: 6px; }
.article-scroll-grid::-webkit-scrollbar-track { background: transparent; }
.article-scroll-grid::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
.article-scroll-grid::-webkit-scrollbar-thumb:hover { background: #1a4a7a; }
.article-scroll-grid .card { scroll-snap-align: start; }

/* Categories page — articles per category */
.cat-scroll-grid {
  display: grid;
  padding-top: 4px;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 36px;
  scroll-snap-type: x mandatory;
  max-width: 1082px;
  margin-left: auto;
  margin-right: auto;
  scrollbar-width: thin;
  scrollbar-color: #1a4a7a transparent;
  align-items: stretch;
}
.cat-scroll-grid::-webkit-scrollbar { height: 6px; }
.cat-scroll-grid::-webkit-scrollbar-track { background: transparent; }
.cat-scroll-grid::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
.cat-scroll-grid::-webkit-scrollbar-thumb:hover { background: #1a4a7a; }
.cat-scroll-grid .card { scroll-snap-align: start; }

/* Categories page — videos per category */
.video-scroll-grid-single {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 14px;
  overflow-x: auto;
  padding-top: 4px;
  padding-bottom: 12px;
  margin-bottom: 36px;
  scroll-snap-type: x mandatory;
  max-width: 1002px;
  margin-left: auto;
  margin-right: auto;
  scrollbar-width: thin;
  scrollbar-color: #1a4a7a transparent;
  align-items: stretch;
}
.video-scroll-grid-single .video-card { scroll-snap-align: start; }
.video-scroll-grid-single::-webkit-scrollbar { height: 6px; }
.video-scroll-grid-single::-webkit-scrollbar-track { background: transparent; }
.video-scroll-grid-single::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
.video-scroll-grid-single::-webkit-scrollbar-thumb:hover { background: #1a4a7a; }


/* ── 16. Focus Mode ───────────────────────────────────────────
   Discovery page where visitors filter by category and tags.

   .focus-panel       : white card wrapping the filter controls
   .focus-group       : label + pill row for category or tags
   .focus-pills       : flex row of selectable pill buttons
   .focus-pill        : individual selectable pill
   .focus-pill-active : selected state — dark purple background
   .focus-pill-tag    : tag variant (slightly smaller)
   .focus-divider     : thin line between category and tag rows
   .focus-group-hidden/visible: toggled by JS when a category
                        is selected to show/hide the tag row
   .focus-results     : wrapper for the results grid below
   ──────────────────────────────────────────────────────────── */
.focus-panel { background: var(--white); border: 0.5px solid var(--border); 
            border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 2rem; }
.focus-group { margin-bottom: 1.2rem; }
.focus-group .section-label { display: block; margin-bottom: 10px; }
.focus-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.focus-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  user-select: none;
}
.focus-pill:hover { border-color: rgba(0,0,0,0.25); color: var(--text-2); }
/* !important overrides specificity issues on high-DPR mobile screens */
.focus-pill-active { background: #4a4a6a; color: #ffffff !important; border-color: #363650; }
.focus-pill-tag { font-size: 12px; }
.focus-results { margin-bottom: 3rem; }
.focus-divider { border: none; border-top: 0.5px solid var(--border); margin: 16px 0; }
.focus-group-hidden { display: none; }
.focus-group-visible { display: block; }


/* ── 17. Category pills ───────────────────────────────────────
   Round navigation buttons on the Articles, Videos and
   Categories pages. Each pill links to its section anchor.
   A colored dot on the left matches the category color.
   ──────────────────────────────────────────────────────────── */
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cat-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.15s;
}
.cat-pill:hover { border-color: rgba(0,0,0,0.2); }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pill-count { font-size: 11px; color: var(--text-3); font-weight: 400; }


/* ── 18. Article body & Table of Contents (TOC) ───────────────
   .article-body    : top padding for the article content area
   .article-content : max-width 680px limits line length for
                      optimal readability (~70 chars per line)
   .article-layout  : flex row — content left, TOC right
   .article-toc     : sticky sidebar; hidden on mobile via media
                      query. JS assigns IDs to h2s and builds
                      clickable TOC links. IntersectionObserver
                      highlights the active section with a yellow
                      line indicator as the user scrolls.
   ──────────────────────────────────────────────────────────── */
.article-body { padding-top: 32px; }

.article-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 680px;
  margin: 0 auto;
  margin-bottom: 36px;
}
.article-content p { margin-bottom: 16px; }
.article-content h2 { font-size: 18px; font-weight: 500; color: var(--text); margin: 28px 0 12px; scroll-margin-top: 72px; }
.article-content h3 { font-size: 16px; font-weight: 500; color: var(--text); margin: 22px 0 10px; }
.article-content code { font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace; 
                     font-size: 13px; background: var(--gray-2); padding: 2px 6px; border-radius: 4px; color: var(--dark-2); }
.article-content pre { background: var(--dark); border-radius: var(--radius-md); padding: 16px 20px; overflow-x: auto; margin: 16px 0; }
.article-content pre code { background: none; padding: 0; font-size: 13px; color: #a8c4ff; line-height: 1.7; }

.article-layout { display: flex; gap: 98px; align-items: flex-start; }
.article-main { flex: 1; min-width: 0; max-width: 680px; margin: 0 auto 0 0; }
.article-toc { width: 200px; flex-shrink: 0; position: sticky; top: 80px; padding-top: 8px; }

/* TOC items — each is a clickable anchor with a vertical line indicator */
.toc-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; text-decoration: none; }
.toc-item-line { width: 2px; height: 20px; border-radius: 2px; background: var(--border); transition: all 0.2s; flex-shrink: 0; }
/* Active section: yellow line grows and label becomes bold */
.toc-item.active .toc-item-line { background: #f5c842; height: 24px; }
.toc-item.active .toc-item-label { color: var(--text); font-weight: 500; }
.toc-item-label { font-size: 13px; color: var(--text-3); transition: color 0.2s; line-height: 1.5; }
.toc-item:hover .toc-item-label { color: var(--text-2); }

/* Show/hide toggle for related videos beyond the first 3 */
.rv-hidden { display: none; }
.btn-rv-toggle { background: none; border: none; font-size: 12px; color: var(--text-3); 
                  cursor: pointer; padding: 6px 0; margin-top: 4px; transition: color 0.15s; }
.btn-rv-toggle:hover { color: var(--accent); }


/* ── 19. Related content sections ────────────────────────────
   "Related articles" and "Related videos" blocks at the bottom
   of each article. Videos use a horizontal flex layout
   (thumbnail left, info right) unlike the vertical card layout.
   ──────────────────────────────────────────────────────────── */
.related-section { margin-bottom: 32px; margin-top: 68px; }
.related-videos { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.related-video {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gray-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.related-video:hover { border-color: rgba(0,0,0,0.2); }
.rv-thumb { width: 80px; height: 50px; background: var(--dark-2); 
            border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-info { display: flex; flex-direction: column; gap: 4px; }
.rv-label { font-size: 11px; color: var(--text-3); }
.rv-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }


/* ── 20. Article navigation ───────────────────────────────────
   "← Back to all articles" link at the bottom of each article.
   ──────────────────────────────────────────────────────────── */
.article-nav { padding: 16px 0 8px; }
.back-link { font-size: 13px; color: var(--accent); }
.back-link:hover { text-decoration: underline; }


/* ── 21. Footer ───────────────────────────────────────────────
   Bottom bar present on every page (rendered in base.html).
   margin-top: 48px separates it from the last content block.
   ──────────────────────────────────────────────────────────── */
.footer { background: var(--dark); padding: 24px 32px; text-align: center; margin-top: 48px; }
.footer p { font-size: 12px; color: rgba(255,255,255,0.3); }


/* ── 22. Admin panel & forms ──────────────────────────────────
   Styles for admin-only pages: login, article/video forms,
   and the admin dashboard table.

   .login-card    : centered form card for the login page
   .login-error   : red error banner shown on failed login
   .form-group    : stacks a label above its input vertically
   .btn-primary   : main action button (save, publish, sign in)
   .btn-cancel    : secondary cancel button
   .form-actions  : right-aligned row of form buttons
   .admin-header  : row with section label + action button
   .admin-table   : styled table for listing articles/videos
   .btn-edit      : blue outline edit button
   .btn-delete    : red outline delete button
   .btn-logout    : muted sign out button
   .admin-footer  : right-aligned footer row (sign out)
   ──────────────────────────────────────────────────────────── */
.login-card { max-width: 420px; margin: 0 auto; 
               background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.login-error { background: #fcebeb; color: #a32d2d; border: 0.5px solid #f09595; 
               border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 20px; }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input,
.form-group select,
.form-group textarea { padding: 10px 14px; border: 0.5px solid var(--border); 
                        border-radius: var(--radius-md); font-size: 14px; color: var(--text); 
                        background: var(--white); font-family: inherit; transition: border-color 0.15s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--accent); }
.form-group textarea { resize: vertical; line-height: 1.6; }

.btn-primary { display: inline-block; background: var(--accent); color: var(--white); 
               font-size: 13px; font-weight: 500; padding: 10px 20px; border-radius: var(--radius-md); 
               border: none; cursor: pointer; transition: opacity 0.15s; }
.btn-primary:hover { opacity: 0.85; }
.btn-cancel { display: inline-block; font-size: 13px; color: var(--text-3); 
               padding: 10px 20px; border-radius: var(--radius-md); border: 0.5px solid var(--border); transition: border-color 0.15s; }
.btn-cancel:hover { border-color: var(--gray-3); }
.form-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 8px; }

.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-table { background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; }
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table th { font-size: 11px; font-weight: 600; color: var(--text-3); 
                  text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 16px; 
                  text-align: left; background: var(--gray-1); border-bottom: 0.5px solid var(--border); }
.admin-table td { font-size: 13px; color: var(--text); padding: 12px 16px; border-bottom: 0.5px solid var(--border); }
.admin-table tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: 8px; }
.btn-edit { font-size: 12px; color: var(--accent); padding: 4px 10px; border: 0.5px solid var(--accent); 
            border-radius: var(--radius-sm); transition: background 0.15s; }
.btn-edit:hover { background: var(--accent-dim); }
.btn-delete { font-size: 12px; color: #a32d2d; padding: 4px 10px; border: 0.5px solid #f09595; 
               border-radius: var(--radius-sm); transition: background 0.15s; }
.btn-delete:hover { background: #fcebeb; }
.btn-logout { font-size: 13px; color: var(--text-3); padding: 8px 16px; border: 0.5px solid var(--border); 
               border-radius: var(--radius-md); transition: border-color 0.15s; }
.btn-logout:hover { border-color: var(--gray-3); }
.admin-footer { display: flex; justify-content: flex-end; }


/* ── 23. Tags ─────────────────────────────────────────────────
   Tags are topic labels attached to articles and videos,
   more granular than categories.

   .article-tags  : flex row of tag pills in the article header
   .tag-pill      : amber/gold style pill linking to the tag page
   .tags-grid     : flex wrap of tag checkboxes in admin forms
   .tag-checkbox  : pill-styled label wrapping a checkbox input
                    accent-color changes the native checkbox tint
   ──────────────────────────────────────────────────────────── */
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag-pill {
  display: inline-block;
  font-size: 12px;
  color: #d08504;
  background: rgba(245,200,66,0.12);
  border: 0.5px solid rgba(245,200,66,0.35);
  padding: 4px 12px;
  border-radius: 20px;
  transition: background 0.15s;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.tag-pill:hover { background: rgba(255,255,255,0.2); }
.tags-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-checkbox { display: flex; align-items: center; gap: 5px; font-size: 13px; 
               color: var(--text-2); cursor: pointer; padding: 5px 10px; border: 0.5px solid var(--border); 
               border-radius: 20px; transition: border-color 0.15s; }
.tag-checkbox:hover { border-color: var(--accent); }
.tag-checkbox input { accent-color: var(--accent); }


/* ── 24. Pagination ───────────────────────────────────────────
   Page navigation shown on the homepage when there are more
   articles than fit on one page. .page-active highlights the
   current page with a solid accent background.
   ──────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 8px 0 32px; }
.page-btn { font-size: 13px; color: var(--text-2); padding: 7px 12px; border: 0.5px solid var(--border); 
               border-radius: var(--radius-md); background: var(--white); transition: border-color 0.15s; }
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-active { background: var(--accent); color: var(--white); border-color: var(--accent); }
.page-active:hover { color: var(--white); }


/* ── 25. Empty state ──────────────────────────────────────────
   Shown when a search or filter returns no results.
   Centers content vertically and horizontally using flex.
   ──────────────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; 
               padding: 48px 24px; text-align: center; gap: 16px; color: var(--text-3); }
.empty-state svg { opacity: 0.35; }
.empty-state h3 { font-size: 16px; font-weight: 500; color: var(--text); }
.empty-state p { font-size: 13px; color: var(--text-2); line-height: 1.6; max-width: 300px; }
.empty-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.empty-link { font-size: 13px; color: var(--accent); font-weight: 500; }
.empty-link:hover { text-decoration: underline; }


/* ── 26. Disclaimer page ──────────────────────────────────────
   Each disclaimer section is a white card with a subtle border.
   The colored dot before each title is created with CSS only.
   ──────────────────────────────────────────────────────────── */
.disclaimer-section { background: var(--white); border: 0.5px solid var(--border); 
                        border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 14px; }
.disclaimer-section h2 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.disclaimer-section p { font-size: 14px; color: var(--text-2); line-height: 1.75; }
.section-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; display: inline-block; }


/* ── 27. Tabs (tag page) ──────────────────────────────────────
   Used on the tag page to switch between Articles and Videos.
   The active tab has a colored bottom border that overlaps the
   gray separator line (margin-bottom: -1px trick), giving the
   appearance of a tab connected to its content panel.
   .tab-count shows the number of results next to each tab name.
   JavaScript in tag.html handles switching between panels.
   ──────────────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--gray-2); padding-bottom: 0; }
.tab-btn { font-size: 13px; font-weight: 500; color: var(--text-3); background: none; border: none; 
            padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; 
            transition: color 0.15s, border-color 0.15s; font-family: inherit; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { font-size: 11px; background: var(--gray-2); color: var(--text-3); padding: 1px 6px; border-radius: 20px; margin-left: 4px; }


/* ── 28. Responsive — mobile & tablet ────────────────────────
   All media queries are grouped here for clarity.
   Breakpoints used:
     480px  : mobile portrait
     768px  : mobile landscape / small tablet
     900px  : tablet portrait (non-specific)
     1024px : tablet landscape / large tablet

   Orientation qualifiers (portrait/landscape) are used where
   the layout differs between orientations on the same device.
   ──────────────────────────────────────────────────────────── */

/* Show hamburger, hide desktop nav links on mobile */
@media (max-width: 768px) {
  .ham-btn { display: flex; }
  .nav-links { display: none; }
}

/* Hero: stack vertically on mobile; search bar moves to the right */
@media (max-width: 768px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; }
  .hero-search { align-self: flex-end; gap: 8px; }
  .hero-search input { width: 120px; }
  .hero p { margin-top: 0; }
}

/* Hide TOC and center article content on mobile and tablet portrait */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
  .article-toc { display: none; }
  .article-layout { justify-content: center; }
  .article-main { margin: 0 auto; }
}

/* Cards grid: 2 columns on small screens, 3 on tablet portrait */
@media (max-width: 900px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-card { max-width: 100%; }
}
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-card { max-width: 75%; }
}

/* Cards grid: 1 column on mobile portrait */
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; }
  .container { padding: 16px; }
}

/* Scroll grids: 4 visible items on tablet landscape */
@media (max-width: 1024px) and (orientation: landscape) {
  .video-grid { grid-auto-columns: calc(25% - 11px); grid-template-columns: unset; 
                  grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; }
  .article-scroll-grid { grid-auto-columns: calc(25% - 11px); grid-template-columns: unset; 
                           grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .cat-scroll-grid { grid-auto-columns: calc(25% - 11px); grid-template-columns: unset; 
                     grid-template-rows: unset; grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .video-scroll-grid-single { grid-auto-columns: calc(25% - 11px); grid-template-columns: unset; 
                     grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
}

/* Scroll grids: 3 visible items on tablet portrait (481px–1024px) */
/* min-width: 481px excludes mobile phones in portrait orientation */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
  .article-scroll-grid { grid-auto-columns: calc(33.33% - 10px); grid-template-columns: unset; 
                           grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .cat-scroll-grid { grid-auto-columns: calc(33.33% - 10px); grid-template-columns: unset; 
                           grid-template-rows: unset; grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .video-scroll-grid-single { grid-auto-columns: calc(33.33% - 10px); grid-template-columns: unset; 
                           grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  /* Focus Mode uses separate classes to avoid affecting homepage grids */
  .focus-video-grid { grid-auto-columns: calc(33.33% - 10px); grid-template-columns: unset; 
                           grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; }
  .focus-cards-grid { grid-auto-columns: calc(33.33% - 10px); grid-template-columns: unset; 
                           grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; 
                           scrollbar-color: #1a4a7a transparent; }
  /* Ensure last category section is reachable via pill anchor on tablet */
  .cat-section { scroll-margin-top: 80px; }
}

/* Scroll grids: 2 visible items on mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .video-grid { grid-auto-columns: calc(50% - 7px); grid-template-columns: unset; 
                  grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; }
  .article-scroll-grid { grid-auto-columns: calc(50% - 7px); grid-template-columns: unset; 
                  grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .cat-scroll-grid { grid-auto-columns: calc(50% - 7px); grid-template-columns: unset; 
                     grid-template-rows: unset; grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .video-scroll-grid-single { grid-auto-columns: calc(50% - 7px); grid-template-columns: unset; 
                     grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
}

/* Scroll grids: 1 visible item on mobile portrait */
@media (max-width: 480px) {
  .video-grid { grid-auto-columns: calc(100% - 14px); grid-template-columns: unset; 
               grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; }
  .article-scroll-grid { grid-auto-columns: calc(100% - 14px); grid-template-columns: unset; 
               grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .cat-scroll-grid { grid-auto-columns: calc(100% - 14px); grid-template-columns: unset; 
               grid-template-rows: unset; grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
  .video-scroll-grid-single { grid-auto-columns: calc(100% - 14px); 
               grid-template-columns: unset; grid-auto-flow: column; overflow-x: auto; max-width: 100%; }
}