/* ============================================================================
   Subtle Skin Engine (v2 — safe). Keeps the ORIGINAL header + grid 100% intact.
   Varies ONLY cosmetic details per site so sites don't look identical:
     • card title treatment   (hu-card-*)
     • section heading style   (hu-home-*)
     • badge + thumbnail feel  (hu-ft-*)
     • spacing / title size    (hu-d-*)
   NOTHING here changes header structure, grid display, or element positions
   (except the self-contained "overlay" title, which stays inside the card box).
   ============================================================================ */

/* ---- density: gentle spacing + title size (grid columns unchanged) --------- */
body.hu-d-compact  { --hux-gap: 14px; --hux-pad: 30px; --hux-title: .92rem; }
body.hu-d-normal   { --hux-gap: 18px; --hux-pad: 40px; --hux-title: .96rem; }
body.hu-d-spacious { --hux-gap: 24px; --hux-pad: 52px; --hux-title: 1rem; }
.husec  { margin-bottom: var(--hux-pad, 40px); }
.hugrid { gap: calc(var(--hux-gap,18px) + 4px) var(--hux-gap,18px); }
.huc-title { font-size: var(--hux-title, .96rem); }

/* baseline polish for every site: title turns accent on hover */
.huc-title a { transition: color .15s ease; }
.huc:hover .huc-title a { color: var(--c-accent, #e60000); }

/* ============================ CARD STRUCTURAL VARIANTS =====================
   These match the per-site DOM emitted by vbase_card() (different markup, not
   just CSS). Each renders cleanly inside the standard grid.                     */

/* default (.huc) — theme baseline (avatar-left + full sub). */

/* overlay: caption is a child of the thumb anchor → sits over the image. */
.huc-v-overlay .huc-over {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 12px; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.9) 18%, rgba(0,0,0,.35) 62%, transparent);
}
.huc-v-overlay .huc-over .huc-title { margin: 0 0 3px; }
.huc-v-overlay .huc-title a, .huc-v-overlay:hover .huc-title a { color: #fff; }
.huc-v-overlay .huc-sub { color: rgba(255,255,255,.82); }

/* minimal: no avatar node at all; clean title + stats. */
.huc-v-min .huc-meta { width: 100%; }

/* accent: a channel chip row above the title, accent left-bar on the meta. */
.huc-v-accent .huc-meta { border-left: 3px solid var(--c-accent,#e60000); padding-left: 10px; }
.huc-v-accent .huc-title { font-weight: 800; }
.huc-v-accent .huc-chip { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: .76rem; color: var(--c-muted,#aaa); font-weight: 600; }
.huc-v-accent .huc-chip .huc-av { width: 22px; height: 22px; font-size: .72rem; }

/* ============================ SECTION HEADINGS ============================
   Restyle only the section <h2>. Grid is untouched.                            */

/* grid — plain (default). */
body.hu-home-hero    .husec-head h2 { border-left: 4px solid var(--c-accent,#e60000); padding-left: 11px; font-weight: 800; }
body.hu-home-rows    .husec-head h2 { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--c-accent,#e60000); }
body.hu-home-masonry .husec-head h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent,#e60000); margin-right: 9px; vertical-align: middle; }
body.hu-home-sidebar .husec-head h2 { text-transform: uppercase; letter-spacing: .07em; }
body.hu-home-list    .husec-head h2 { color: var(--c-accent,#e60000); }

/* ============================ BADGE / THUMBNAIL FEEL ======================
   Tie thumbnail corners + duration/quality badge to the footer axis.           */

/* rich — default rounded thumb + dark badge. */
body.hu-ft-slim    .huc-thumb { border-radius: 6px; }
body.hu-ft-slim    .huc-q     { background: var(--c-accent,#e60000); color: #fff; }
body.hu-ft-columns .huc-thumb { border-radius: 16px; }
body.hu-ft-columns .huc-dur   { background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.45); }

/* ============================ HEADER STRUCTURAL VARIANTS ===================
   Match the per-site header DOM from header.php (different element order +
   grouping wrappers). All keep a clean single/two-row bar. Mobile falls back to
   the theme's stacked behavior so the nav drawer keeps working.                 */

/* classic — theme default (no override). */

/* search: search field grows in the middle. */
.huh-v-search .huhead-search { flex: 1; }

/* centered: two rows — brand+actions, then centered nav+search. */
.huh-v-centered .huhead-in { flex-direction: column; align-items: stretch; gap: 10px; }
.huh-v-centered .huhead-row { display: flex; align-items: center; gap: 14px; width: 100%; }
.huh-v-centered .huhead-r1 { justify-content: space-between; }
.huh-v-centered .huhead-r2 { justify-content: center; }
.huh-v-centered .huhead-r2 .huhead-search { flex: 0 1 480px; }

/* split: logo left, everything else grouped to the right. */
.huh-v-split .huhead-grp { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* stack: brand group + tools group on row 1, full-width nav on row 2. */
.huh-v-stack .huhead-in { flex-direction: column; align-items: stretch; gap: 8px; }
.huh-v-stack .huhead-row { display: flex; align-items: center; gap: 14px; }
.huh-v-stack .huhead-r1 { justify-content: space-between; }
.huh-v-stack .huhead-grp { display: flex; align-items: center; gap: 12px; }
.huh-v-stack .huhead-r1 .huhead-search { flex: 1; max-width: 440px; }
.huh-v-stack .huhead-r2 { border-top: 1px solid var(--c-line,#272727); padding-top: 6px; overflow-x: auto; }

/* mobile: flatten the row/group wrappers (so the burger + nav drawer behave like the
   default theme), THEN reorder per variant so headers still look DIFFERENT on phones. */
@media (max-width: 900px) {
  .huh-v-centered .huhead-in, .huh-v-stack .huhead-in { flex-direction: row; flex-wrap: wrap; }
  .huhead-row, .huhead-grp { display: contents; }
  .huh-v-search .huhead-search   { order: -1; flex-basis: 100%; }          /* search on top */
  .huh-v-centered .huhead-logo   { order: -1; flex-basis: 100%; display: flex; justify-content: center; } /* logo centered top */
  .huh-v-stack .huhead-search    { order: 2; flex: 1 1 55%; }              /* search inline w/ logo */
  .huh-v-split .huhead-search    { order: 6; flex-basis: 100%; }           /* search full row at bottom */

  /* Mobile burger menu = clean floating dropdown panel (was rendering in-flow,
     unstyled). Anchor to the header + force the absolute panel. */
  .huhead { position: relative; }
  body.hunav-open .huhead-nav {
    position: absolute !important; left: 10px; right: 10px; top: calc(100% + 6px);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--c-surface, #1a1a1a); border: 1px solid var(--c-line, #272727); border-radius: 14px;
    padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 1100; max-height: 72vh; overflow-y: auto;
  }
  body.hunav-open .huhead-nav ul, body.hunav-open .huhead-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  body.hunav-open .huhead-nav a { padding: 11px 14px; border-radius: 9px; }
}

/* ============================ PER-CARD CHROME (watch-later + play) ==========
   The watch-later button + play overlay repeat on every card → vary them per site
   so they're not identical. Position by card variant, shape/size by footer axis;
   the WL ICON itself also varies (set in vbase_card by the footer axis).         */
.hu-card-overlay .huwl { left: 8px; right: auto; }                 /* top-left */
.hu-card-minimal .huwl { top: auto; bottom: 8px; }                 /* bottom-right */
.hu-card-accent  .huwl { left: 8px; right: auto; top: auto; bottom: 8px; } /* bottom-left */
.hu-ft-slim    .huwl { border-radius: 7px; }                       /* rounded-square */
.hu-ft-columns .huwl { width: 34px; height: 34px; }               /* larger circle */
/* centered play circle (always visible, like the references) */
.huc-play { opacity: .92; background: transparent; }
.huc-thumb:hover .huc-play { opacity: 1; }
.huc-play svg { width: 46px; height: 46px; fill: #fff; background: rgba(0,0,0,.5); border-radius: 50%; padding: 13px; box-sizing: border-box; filter: none; }
.huc-thumb:hover .huc-play svg { background: var(--c-accent, #e60000); }
.hu-card-minimal .huc-play svg { width: 40px; height: 40px; }
.hu-card-accent  .huc-play svg { width: 52px; height: 52px; }
.hu-card-overlay .huc-play { background: transparent; }

/* ============================ APP POLISH (reference-grade) =================
   Mobile bottom tab bar + icon pills + verified badge — app-style, like the
   user's reference designs.                                                     */

/* search bar — subtle neutral pill that reads well on BOTH light + dark themes */
.huhead-search input { background: rgba(127,127,127,.1); }
.huhead-search button { background: rgba(127,127,127,.16); }

/* pill icons */
.hupill-i { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.hupill-i svg { width: 14px; height: 14px; }

/* verified check next to channel names */
.huverified { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--c-accent, #e60000); }
.huverified svg { width: 13px; height: 13px; }

/* mobile bottom tab bar */
.hutab { display: none; }
@media (max-width: 900px) {
  .hutab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 58px;
    background: var(--c-surface, #1a1a1a); border-top: 1px solid var(--c-line, #272727);
    padding: 0 4px calc(0px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .hutab-i { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--c-muted, #aaa); font-size: .62rem; font-weight: 600; text-decoration: none; height: 100%; }
  .hutab-i.on { color: var(--c-accent, #e60000); }
  .hutab-i svg { width: 22px; height: 22px; }
  /* center FAB: same flex slot as the others (so 2 left / 2 right stay symmetric),
     a centered raised red circle, no label. */
  .hutab-fab { gap: 0; }
  .hutab-fab svg { width: 26px; height: 26px; color: #fff;
    background: var(--c-accent, #e60000); width: 50px; height: 50px; padding: 12px; border-radius: 50%;
    margin-top: -18px; box-shadow: 0 4px 14px rgba(0,0,0,.35); box-sizing: border-box; }
  body { padding-bottom: 62px; }
}

/* ============================ YOUTUBE-STYLE LEFT SIDEBAR SHELL =============
   home=sidebar → a fixed left nav rail (desktop) + content shifted right, like
   the reference. Hidden on mobile (the bottom tab bar takes over).              */
.huside { display: none; }
@media (min-width: 1000px) {
  body.hu-home-sidebar .huside { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 224px; z-index: 60;
    background: var(--c-surface, #1a1a1a); border-right: 1px solid var(--c-line, #272727); padding: 72px 10px 24px; overflow-y: auto; }
  body.hu-home-sidebar .humain, body.hu-home-sidebar #footer, body.hu-home-sidebar #colophon { margin-left: 224px; }
  body.hu-home-sidebar .huhead-nav { display: none; } /* nav lives in the sidebar */
  body.hu-home-sidebar .huhead { z-index: 70; } /* header bar above the sidebar */
  .huside-nav { display: flex; flex-direction: column; gap: 2px; }
  .huside-i { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 10px; color: var(--c-text, #f1f1f1); text-decoration: none; font-size: .88rem; font-weight: 600; }
  .huside-i svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .huside-i:hover { background: rgba(127,127,127,.12); }
  .huside-i.on { background: var(--c-accent, #e60000); color: #fff; }
  .huside-sec { color: var(--c-muted, #aaa); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 16px 12px 6px; border-top: 1px solid var(--c-line, #272727); margin-top: 10px; }
}

/* hero = swipeable featured carousel (shown for sidebar + hero homes). */
.huhero { display: none; }
body.hu-home-sidebar .huhero, body.hu-home-hero .huhero { display: block; position: relative; margin: 0 0 22px; }
.huhero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.huhero-track::-webkit-scrollbar { display: none; }
.huhero-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; min-height: 320px; display: flex; align-items: flex-end;
  background: var(--c-surface, #1a1a1a) center/cover no-repeat; border-radius: 16px; text-decoration: none; color: #fff; }
/* lighter gradient — image is the star; only the bottom darkens for text legibility */
.huhero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15) 42%, transparent 70%); border-radius: 16px; }
.huhero-cap { position: relative; z-index: 1; padding: 22px 26px 38px; max-width: 620px; }
.huhero-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--c-accent, #e60000); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.huhero-cap h2 { margin: 0 0 14px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: #fff; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.huhero-btn { display: inline-block; background: #fff; color: #111; font-weight: 800; padding: 9px 18px; border-radius: 999px; }
.huhero-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.huhero-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; padding: 0; cursor: pointer; transition: .2s; }
.huhero-dots button.on { background: #fff; width: 22px; border-radius: 5px; }
@media (max-width: 700px) { .huhero-slide { min-height: 200px; } .huhero-cap { padding: 22px 22px 34px; } .huhero-cap h2 { font-size: 1.3rem; } }

/* ============================ NEON STYLE (hu-style-neon) ===================
   Futuristic gradient treatment (logo/FAB/pills/play/hero glow) — like the
   neon reference designs. Triggered by the 'neon' color palette.               */
.hu-style-neon { --vb-grad: linear-gradient(120deg, #a855f7, #22d3ee 58%, #ec4899); }
.hu-style-neon .huhead-name { background: var(--vb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.hu-style-neon .huhead-logo .mark { background: var(--vb-grad); }
.hu-style-neon .hupill.active { background: var(--vb-grad); border-color: transparent; color: #fff; }
.hu-style-neon .huhead-search button { background: var(--vb-grad); color: #fff; }
.hu-style-neon .hutab-fab svg { background: var(--vb-grad) !important; }
.hu-style-neon .huc:hover .huc-play svg { background: var(--vb-grad) !important; }
.hu-style-neon .huhero { background: linear-gradient(120deg, #a855f7, #6d28d9 48%, #0b0f1e 100%); }
.hu-style-neon .huside-i.on { background: var(--vb-grad); }
.hu-style-neon .huc-thumb { box-shadow: 0 0 0 1px rgba(168,85,247,.28); }
.hu-style-neon .husec-head h2 { background: var(--vb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================ GLASS STYLE (hu-style-glass) =================
   Glassmorphism — frosted translucent cards/header/pills over a soft color glow.  */
body.hu-style-glass { background:
  radial-gradient(900px 480px at 82% -8%, rgba(245,158,11,.32), transparent 60%),
  radial-gradient(700px 500px at -10% 30%, rgba(168,85,247,.18), transparent 60%),
  var(--c-bg, #181206); }
.hu-style-glass .husec .hugrid .huc { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 8px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hu-style-glass .huc-thumb { border-radius: 13px; }
.hu-style-glass .huc-body { padding: 9px 6px 5px; }
.hu-style-glass .hupill { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.hu-style-glass .hupill.active { background: rgba(255,255,255,.22); }
.hu-style-glass .huhead { background: rgba(20,16,8,.55); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hu-style-glass .huhead-search input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.hu-style-glass .huside { background: rgba(20,16,8,.45); backdrop-filter: blur(16px); }
.hu-style-glass .hutab { background: rgba(20,16,8,.6); backdrop-filter: blur(16px); }
.hu-style-glass .huhero-slide { border-radius: 20px; }

/* ============================ TABS STYLE (hu-style-tabs) ===================
   Filter pills → underline text-tabs; bottom bar → flat 5-icon (no raised FAB). */
.hu-style-tabs .hupills { gap: 2px; border-bottom: 1px solid var(--c-line, #272727); }
.hu-style-tabs .hupill { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--c-muted, #aaa); padding: 11px 14px; border-bottom: 2px solid transparent !important; }
.hu-style-tabs .hupill.active { color: var(--c-accent, #e60000); border-bottom-color: var(--c-accent, #e60000) !important; background: transparent !important; }
.hu-style-tabs .hupill-i { display: none; }
@media (max-width: 900px) {
  .hu-style-tabs .hutab-fab svg { margin-top: 0; background: transparent !important; width: 24px; height: 24px; padding: 0; color: var(--c-muted, #aaa); border-radius: 0; box-shadow: none; }
}

/* (watch + footer widgets: keep the theme's original layout — no overrides) */