/* ============================================================================
   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   (am-card-*)
     • section heading style   (am-home-*)
     • badge + thumbnail feel  (am-ft-*)
     • spacing / title size    (am-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.am-d-compact  { --amx-gap: 14px; --amx-pad: 30px; --amx-title: .92rem; }
body.am-d-normal   { --amx-gap: 18px; --amx-pad: 40px; --amx-title: .96rem; }
body.am-d-spacious { --amx-gap: 24px; --amx-pad: 52px; --amx-title: 1rem; }
.amsec  { margin-bottom: var(--amx-pad, 40px); }
.amgrid { gap: calc(var(--amx-gap,18px) + 4px) var(--amx-gap,18px); }
.amc-title { font-size: var(--amx-title, .96rem); }

/* baseline polish for every site: title turns accent on hover */
.amc-title a { transition: color .15s ease; }
.amc:hover .amc-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 (.amc) — theme baseline (avatar-left + full sub). */

/* overlay: caption is a child of the thumb anchor → sits over the image. */
.amc-v-overlay .amc-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);
}
.amc-v-overlay .amc-over .amc-title { margin: 0 0 3px; }
.amc-v-overlay .amc-title a, .amc-v-overlay:hover .amc-title a { color: #fff; }
.amc-v-overlay .amc-sub { color: rgba(255,255,255,.82); }

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

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

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

/* grid — plain (default). */
body.am-home-hero    .amsec-head h2 { border-left: 4px solid var(--c-accent,#e60000); padding-left: 11px; font-weight: 800; }
body.am-home-rows    .amsec-head h2 { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--c-accent,#e60000); }
body.am-home-masonry .amsec-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.am-home-sidebar .amsec-head h2 { text-transform: uppercase; letter-spacing: .07em; }
body.am-home-list    .amsec-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.am-ft-slim    .amc-thumb { border-radius: 6px; }
body.am-ft-slim    .amc-q     { background: var(--c-accent,#e60000); color: #fff; }
body.am-ft-columns .amc-thumb { border-radius: 16px; }
body.am-ft-columns .amc-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. */
.amh-v-search .amhead-search { flex: 1; }

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

/* split: logo left, everything else grouped to the right. */
.amh-v-split .amhead-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. */
.amh-v-stack .amhead-in { flex-direction: column; align-items: stretch; gap: 8px; }
.amh-v-stack .amhead-row { display: flex; align-items: center; gap: 14px; }
.amh-v-stack .amhead-r1 { justify-content: space-between; }
.amh-v-stack .amhead-grp { display: flex; align-items: center; gap: 12px; }
.amh-v-stack .amhead-r1 .amhead-search { flex: 1; max-width: 440px; }
.amh-v-stack .amhead-r2 { border-top: 1px solid var(--c-line,#272727); padding-top: 6px; overflow-x: auto; }

/* mobile: unified, robust header for EVERY variant — [burger][logo][actions] on one
   row, full-width search below, nav in the burger dropdown. Uses !important because the
   desktop per-variant rules (.amh-v-* .amhead-r2 .amhead-search, specificity 0,3,0) are
   MORE specific than these overrides and would otherwise leak into mobile and hide the
   burger + actions (Upload/avatar/dark-mode). Keeping this predictable > a fancy
   per-variant mobile layout that silently drops the menu. */
@media (max-width: 900px) {
  .amhead-in { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; }
  .amhead-row, .amhead-grp { display: contents !important; }
  .amhead-burger { display: grid !important; order: 1 !important; }
  .amhead-logo   { order: 2 !important; flex: 0 1 auto !important; justify-content: flex-start !important; }
  .amhead-actions{ order: 3 !important; margin-left: auto !important; }
  .amhead-search { order: 4 !important; flex: 1 1 100% !important; margin: 0 !important; max-width: none !important; }

  /* Mobile burger menu = clean floating dropdown panel (was rendering in-flow,
     unstyled). Anchor to the header + force the absolute panel. */
  .amhead { position: relative; }
  body.amnav-open .amhead-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.amnav-open .amhead-nav ul, body.amnav-open .amhead-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  body.amnav-open .amhead-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).         */
.am-card-overlay .amwl { left: 8px; right: auto; }                 /* top-left */
.am-card-minimal .amwl { top: auto; bottom: 8px; }                 /* bottom-right */
.am-card-accent  .amwl { left: 8px; right: auto; top: auto; bottom: 8px; } /* bottom-left */
.am-ft-slim    .amwl { border-radius: 7px; }                       /* rounded-square */
.am-ft-columns .amwl { width: 34px; height: 34px; }               /* larger circle */
/* centered play circle (always visible, like the references) */
.amc-play { opacity: .92; background: transparent; }
.amc-thumb:hover .amc-play { opacity: 1; }
.amc-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; }
.amc-thumb:hover .amc-play svg { background: var(--c-accent, #e60000); }
.am-card-minimal .amc-play svg { width: 40px; height: 40px; }
.am-card-accent  .amc-play svg { width: 52px; height: 52px; }
.am-card-overlay .amc-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 */
.amhead-search input { background: rgba(127,127,127,.1); }
.amhead-search button { background: rgba(127,127,127,.16); }

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

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

/* mobile bottom tab bar */
.amtab { display: none; }
@media (max-width: 900px) {
  .amtab { 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; }
  .amtab-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%; }
  .amtab-i.on { color: var(--c-accent, #e60000); }
  .amtab-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. */
  .amtab-fab { gap: 0; }
  .amtab-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; }
  /* clear the fixed 58px tab bar PLUS the iOS home-indicator safe area (the bar itself
     grows by safe-area) — otherwise the last content sits hidden under the bar and the
     page appears to "not scroll to the bottom". */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================ 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).              */
.amside { display: none; }
@media (min-width: 1000px) {
  body.am-home-sidebar .amside { 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.am-home-sidebar .ammain, body.am-home-sidebar #footer, body.am-home-sidebar #colophon { margin-left: 224px; }
  body.am-home-sidebar .amhead-nav { display: none; } /* nav lives in the sidebar */
  body.am-home-sidebar .amhead { z-index: 70; } /* header bar above the sidebar */
  .amside-nav { display: flex; flex-direction: column; gap: 2px; }
  .amside-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; }
  .amside-i svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .amside-i:hover { background: rgba(127,127,127,.12); }
  .amside-i.on { background: var(--c-accent, #e60000); color: #fff; }
  .amside-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). */
.amhero { display: none; }
body.am-home-sidebar .amhero, body.am-home-hero .amhero { display: block; position: relative; margin: 0 0 22px; }
.amhero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.amhero-track::-webkit-scrollbar { display: none; }
.amhero-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 */
.amhero-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; }
.amhero-cap { position: relative; z-index: 1; padding: 22px 26px 38px; max-width: 620px; }
.amhero-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; }
.amhero-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; }
.amhero-btn { display: inline-block; background: #fff; color: #111; font-weight: 800; padding: 9px 18px; border-radius: 999px; }
.amhero-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.amhero-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; padding: 0; cursor: pointer; transition: .2s; }
.amhero-dots button.on { background: #fff; width: 22px; border-radius: 5px; }
@media (max-width: 700px) { .amhero-slide { min-height: 200px; } .amhero-cap { padding: 22px 22px 34px; } .amhero-cap h2 { font-size: 1.3rem; } }

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

/* ============================ GLASS STYLE (am-style-glass) =================
   Glassmorphism — frosted translucent cards/header/pills over a soft color glow.  */
body.am-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); }
.am-style-glass .amsec .amgrid .amc { 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); }
.am-style-glass .amc-thumb { border-radius: 13px; }
.am-style-glass .amc-body { padding: 9px 6px 5px; }
.am-style-glass .ampill { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.am-style-glass .ampill.active { background: rgba(255,255,255,.22); }
.am-style-glass .amhead { background: rgba(20,16,8,.55); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.am-style-glass .amhead-search input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.am-style-glass .amside { background: rgba(20,16,8,.45); backdrop-filter: blur(16px); }
.am-style-glass .amtab { background: rgba(20,16,8,.6); backdrop-filter: blur(16px); }
.am-style-glass .amhero-slide { border-radius: 20px; }

/* ============================ TABS STYLE (am-style-tabs) ===================
   Filter pills → underline text-tabs; bottom bar → flat 5-icon (no raised FAB). */
.am-style-tabs .ampills { gap: 2px; border-bottom: 1px solid var(--c-line, #272727); }
.am-style-tabs .ampill { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--c-muted, #aaa); padding: 11px 14px; border-bottom: 2px solid transparent !important; }
.am-style-tabs .ampill.active { color: var(--c-accent, #e60000); border-bottom-color: var(--c-accent, #e60000) !important; background: transparent !important; }
.am-style-tabs .ampill-i { display: none; }
@media (max-width: 900px) {
  .am-style-tabs .amtab-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) */