/* =========================================================
   BOOK PORN — Redesign component overlay
   Loads AFTER style.css, navigation.css, dark-mode.css.
   Targets EXISTING markup classes/IDs only — no PHP required.
   Page-scoped CSS (archives, single, 404) lives in:
     - loop-card-design.css (archives + home + 404 + search)
     - review-layout.css (single)
   ========================================================= */

/* ---------------------------------------------------------
   Site container — kill horizontal scroll, set max width.
   The existing .main-head/.container already uses Bootstrap
   .container; we just normalise the inner gutters.
   --------------------------------------------------------- */
.container {
  max-width: 1280px;
}

/* =========================================================
   HEADER  —  #top-header  +  .main-head  +  .logo  +  search
   V4: Claude-style single-row layout. Logo (capped 180px) | search
   (flex-grow) | dark-mode toggle | UPDATED-ON label on the right.
   Tagline removed in V4 (markup deleted + CSS hidden as backup).
   ========================================================= */

#top-header {
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Only vertical padding here — the wrapper is `.container.main-head` and
   Bootstrap's `.container` already handles horizontal gutters. Adding 24px
   left/right would push the header inside the cards' edges below. */
#top-header .main-head {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Re-map the Bootstrap col-md-4 / col-md-8 split (desktop only).
   The logo column reserves a fixed 33% even though the logo is ~180px,
   which pushed the search toward the middle and left dead space on the
   right. Here the logo shrinks to its content width and the search column
   grows to fill ALL remaining width — so the header spans the exact same
   surface as the 4-card grid below (logo left edge ↔ date right edge line
   up with the cards). Margins/padding zeroed so the edges sit flush with
   the .container gutter, matching the grid. */
@media (min-width: 992px) {
  #top-header .main-head .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    margin: 0;
  }
  #top-header .main-head .col-md-4 {
    flex: 0 0 auto;
    width: auto;
    max-width: 200px;
    padding: 0;
    margin-bottom: 0;
  }
  #top-header .main-head .col-md-8 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    /* style.css's desktop rule makes this a column flex with
       align-items:flex-start, which left-packs .header-search-row to its
       content width (the bar never grew). Force the child to stretch to
       the full column width instead. (style.css uses !important on
       align-items:flex-start, so this needs !important to win.) */
    align-items: stretch !important;
  }
  /* Belt + braces: make the search row itself span the full column so the
     flex:1 search-block has room to grow regardless of col-md-8's flow. */
  #top-header .main-head .header-search-row {
    width: 100%;
  }
}

/* Backup hide for the tagline — already removed from markup, but keep
   the rule so any future re-introduction stays out of view. */
#top-header .header-tagline {
  display: none !important;
}

/* Logo — shrink to 180px on desktop so the single-row layout fits.
   Mobile crit-CSS already caps at 160px; this is the desktop ceiling. */
#top-header .logo .custom-logo,
#top-header .logo img,
#top-header .logo picture img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

/* Header search row — now holds search-block + dark-mode-toggle + updated-date.
   Date is pushed to the right edge via margin-left:auto on .updated-date. */
#top-header .header-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#top-header .header-search-row .search-block {
  /* `flex: 1 1 0` (= just `flex: 1`) = grow from 0 basis to fill all
     remaining row width after logo/toggle/date are placed. On desktop the
     search becomes the dominant element naturally; on phone it shrinks to
     fit whatever space col-md-8 gives it (no overflow).
     max-width:none cancels the legacy `.search-block{max-width:650px}` cap
     in style.css that was stopping the bar from filling the row. */
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* Updated-on label — top-right position, mono-uppercase like Claude's
   "Top 10 Sites" pill slot but as plain text (no chip). */
#top-header .updated-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  font-style: normal;
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
}

#top-header .updated-date small {
  color: inherit;
  font-size: inherit;
}

/* Search form — restyle pre-existing #searchform + .search-input + .search-button.
   !important is required: the inline critical-CSS in header.php still wins on
   property-level cascade in some browsers/edge cases. Belt + braces. */
#top-header #searchform {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  height: 44px;
  padding: 4px 6px 4px 16px;
  transition: border-color 0.15s, background 0.15s;
}

#top-header #searchform:focus-within {
  border-color: var(--orange) !important;
  background: var(--surface-2) !important;
}

#top-header .search-input {
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font-ui);
  font-size: 14px;
  /* `<input type="search">` ships with browser-default decorations on
     WebKit: a leading magnifying-glass + a trailing X clear button.
     Strip both so the only visible icon is our orange .search-button. */
  -webkit-appearance: none;
  appearance: none;
}

#top-header .search-input::-webkit-search-decoration,
#top-header .search-input::-webkit-search-cancel-button,
#top-header .search-input::-webkit-search-results-button,
#top-header .search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#top-header .search-input::placeholder {
  color: var(--text-3) !important;
  opacity: 1;
}

#top-header .search-button {
  background: var(--orange);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}

#top-header .search-button:hover {
  background: var(--orange-hot);
  transform: scale(1.04);
}

#top-header .search-button i {
  color: var(--ink);
  font-size: 14px;
}

/* Dark-mode toggle pill — visible on every breakpoint (V4 drops `d-lg-none`).
   The `.nav-dark-mode-toggle` in the nav bar still exists but is now redundant;
   we keep its styling so any user with a stale cache doesn't see a broken icon. */
#top-header .dark-mode-toggle,
#top-header .nav-dark-mode-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

#top-header .dark-mode-toggle:hover,
#top-header .nav-dark-mode-toggle:hover {
  color: var(--orange);
  border-color: var(--orange);
  transform: translateY(-1px);
}

/* Responsive: keep the row but allow it to wrap on narrow tablets.
   On phones (≤600px) the date drops below the search+toggle row so the
   search bar gets a full line. */
@media (max-width: 600px) {
  #top-header .header-search-row {
    gap: 8px;
  }
  #top-header .updated-date {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
    font-size: 10px;
    margin-top: 4px;
  }
}

/* =========================================================
   MAIN NAVIGATION — .main-navigation (existing JS hook for sticky)
   The navigation walker outputs a UL; we restyle the LI items.
   ========================================================= */

.main-navigation {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.main-navigation .container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
}

.main-navigation .main-nav-menu,
.main-navigation > .container > ul {
  display: flex;
  gap: 4px;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-navigation .main-nav-menu::-webkit-scrollbar,
.main-navigation > .container > ul::-webkit-scrollbar {
  display: none;
}

.main-navigation .main-nav-menu > li > a,
.main-navigation > .container > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.main-navigation .main-nav-menu > li > a:hover,
.main-navigation > .container > ul > li > a:hover {
  color: var(--text);
  background: var(--surface);
}

.main-navigation .main-nav-menu > li.current-menu-item > a,
.main-navigation .main-nav-menu > li.current_page_item > a,
.main-navigation > .container > ul > li.current-menu-item > a,
.main-navigation > .container > ul > li.current_page_item > a {
  background: var(--orange);
  color: var(--ink);
}

/* =========================================================
   MOBILE NAV PANEL — slides in from left
   IDs / classes JS depends on are preserved
   ========================================================= */

#mobile-nav-menu.mobile-nav-panel {
  background: var(--bg-2);
  color: var(--text);
  border-right: 1px solid var(--border);
}

#mobile-nav-menu .mobile-nav-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#mobile-nav-menu .mobile-nav-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

#mobile-nav-menu .mobile-nav-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

#mobile-nav-menu .mobile-nav-close:hover {
  color: var(--orange);
  border-color: var(--orange);
}

#mobile-nav-menu .mobile-nav-categories {
  list-style: none;
  margin: 0;
  padding: 8px;
}

#mobile-nav-menu .mobile-nav-categories li a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-2);
  transition: all 0.15s;
}

#mobile-nav-menu .mobile-nav-categories li a:hover {
  background: var(--surface-2);
  color: var(--text);
}

#mobile-nav-menu .mobile-nav-categories .cat-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.mobile-nav-backdrop {
  background: rgba(14, 13, 12, 0.6);
}

/* =========================================================
   FOOTER  —  #main-footer  +  #footer-copyright  +  #gototop
   ========================================================= */

#main-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border-soft);
  padding: 48px 0 32px;
  color: var(--text-2);
}

#main-footer .layout-wrap {
  max-width: 1280px;
}

/* Footer widgets — Bootstrap col-md-3 layout from sidebar registration */
#main-footer .widget,
#main-footer .widget_text,
#main-footer aside {
  background: transparent;
  padding: 0;
  border: 0;
}

#main-footer .widget-title,
#main-footer h2.widget-title,
#main-footer h3.widget-title,
#main-footer h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 14px;
}

#main-footer a {
  color: var(--text-3);
  font-size: 13px;
  transition: color 0.15s;
}

#main-footer a:hover {
  color: var(--orange);
}

#footer-copyright {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  padding: 18px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

#footer-copyright .footer-menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

#footer-copyright .footer-menu a {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#footer-copyright .footer-menu a:hover {
  color: var(--orange);
}

#gototop {
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s, background 0.15s;
}

#gototop:hover {
  background: var(--orange-hot);
  transform: translateY(-2px);
}

[data-theme="light"] #gototop {
  border-color: #1a1714;
  box-shadow: 3px 3px 0 #1a1714;
}

/* =========================================================
   SIDEBAR WIDGET — .custom-category-list (widget-category.php)
   PHP-computed color on .category-count is preserved — we only
   restyle padding, typography and hover.
   ========================================================= */

.category-sidebar .widget,
#secondary .widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

.category-sidebar .widget-title,
#secondary .widget-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-sidebar .widget-title::before,
#secondary .widget-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
}

.custom-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-category-list .cat-item {
  margin: 0;
  padding: 0;
}

.custom-category-list .category-link-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  transition: all 0.15s;
}

.custom-category-list .category-link-container:hover {
  background: var(--surface-2);
  color: var(--text);
}

.custom-category-list .favicons-container {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Count badge: inline background-color set by PHP stays intact; we only
   override typography + shape. Inline style wins for color/background. */
.custom-category-list .category-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 6px;
  color: var(--ink);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.custom-category-list .favicons-container img,
.custom-category-list .favicons-container .default-favicon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--cream);
  border: 1px solid var(--border);
  object-fit: cover;
  display: inline-block;
}

.custom-category-list .category-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-weight: 600;
}

/* Current-category highlight */
body.category .custom-category-list .cat-item.current-cat > .category-link-container,
body.category .custom-category-list .current-cat-parent > .category-link-container {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--orange);
}

/* =========================================================
   COMMENTS  —  #comments  +  .comments-area
   ========================================================= */

#comments,
.comments-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 32px;
  color: var(--text);
}

.comments-area .comments-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--text);
}

.comments-area .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comments-area .comment-body {
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
}

.comments-area .comment-metadata {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comments-area .comment-content {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 8px;
}

/* =========================================================
   SHARED — chips (used on category page for sort, etc.)
   ========================================================= */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.chip {
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  color: var(--text);
  border-color: var(--text-3);
}

.chip.is-on {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
  font-weight: 700;
}

/* =========================================================
   SHARED — buttons (.btn / .btn.ghost)
   These extend, never override, Bootstrap .btn so existing
   .btn-primary etc. are unaffected.
   ========================================================= */

.btn-redesign,
.btn.ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: all 0.15s;
}

.btn.ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-1px);
}

/* =========================================================
   SHARED — section eyebrow (mono uppercase label)
   ========================================================= */

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--orange);
}

/* =========================================================
   LIGHT-MODE shadow recolour for hard-shadow elements
   ========================================================= */

[data-theme="light"] #top-header {
  background: color-mix(in oklab, var(--bg) 94%, transparent);
}