/* Voxread homepage + footer v2 (2026-10-23). Staged: every rule is scoped to html.vx-v2,
 * which vr1_preprocess_html() only adds for admins until state vr1.home_v2_public is TRUE.
 * Uses shadcn variables; the orange accent (--vx-accent, #e65100) is the deliberate brand exception. */

/* 1. Grey strip: Olivero's empty .social-bar (region "Social Bar", both blocks disabled) and its 90px
 * --content-left gutter. Removed from markup in page.html.twig; zero the gutter so content and header go full width. */
html.vx-v2{--content-left:0px}
.vx-v2 .social-bar{display:none}
@media (min-width:75rem){
  /* Header at desktop: Olivero slides the nav away on scroll and leaves an orange hamburger block
   * (.site-header__initial). Mid-slide the logo is clipped to "Read". Keep the header steady instead. */
  .vx-v2 .site-header__initial{display:none}
  .vx-v2 body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded){pointer-events:auto}
  .vx-v2 body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner{transform:none;opacity:1}
  .vx-v2 .site-header__fixable.is-fixed .site-header__inner{background:var(--background);box-shadow:0 1px 0 var(--border)}
}

/* 2. Hero media: still first, self-hosted video fades in once it is actually playing. */
.vx2-hero-block{background:#0a0a0a}
.vx2-hero-still,.vx2-hero-still img,.vx2-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx2-hero-still{z-index:-3}
.vx2-hero-video{z-index:-2;opacity:0;transition:opacity .6s ease}
.vx2-hero-video.is-playing{opacity:1}
@media (prefers-reduced-motion:reduce){.vx2-hero-video{display:none}}

/* 3 + 8. Free line and sleep link: quiet, below the button. */
.vx2-free{margin:.75rem 0 0;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.78)}
.vx2-hero .vx-hero-rotate{margin-top:1.5rem}
.vx2-sleep{margin:.75rem 0 0}
.vx2-sleep a{display:inline-flex;align-items:center;gap:.375rem;min-height:2.75rem;padding:0 1rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.875rem;font-weight:500;color:#fff;text-decoration:none;background:rgba(255,255,255,.06);touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.vx2-sleep a:hover{background:rgba(255,255,255,.14)}}
.vx2-sleep a:active{transform:scale(.97)}
.vx2-sleep a:focus-visible,.vx2-btn:focus-visible,.vx2-more:focus-visible,.vx2-foot a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* Sections: 8px rhythm, one width. */
.vx2-home{display:flex;flex-direction:column;gap:3rem;padding-block:2rem 3rem}
@media (min-width:768px){.vx2-home{gap:4rem;padding-block:3rem 4rem}}
.vx2-section{width:100%;max-width:72rem;margin-inline:auto}
.vx2-h2{margin:0;font-size:1.75rem;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--foreground);text-wrap:balance}
@media (min-width:768px){.vx2-h2{font-size:2.25rem}}
.vx2-center{text-align:center}
.vx2-lede{margin:.75rem auto 0;max-width:36rem;text-align:center;font-size:1.0625rem;line-height:1.6;color:var(--muted-foreground)}

/* 6. Book grid heading. */
.vx2-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1.5rem}
.vx2-more{display:inline-flex;align-items:center;gap:.25rem;min-height:2.75rem;font-size:.9375rem;font-weight:600;color:var(--foreground);text-decoration:none;touch-action:manipulation}
.vx2-more svg{transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.vx2-more:hover{text-decoration:underline;text-underline-offset:4px}.vx2-more:hover svg{transform:translateX(2px)}}
.vx2-books .views-element-container,.vx2-books .view{margin:0;padding:0}

/* 5. Comparison: neutral theme cards. */
.vx2-compare-grid,.vx2-why-grid{display:grid;gap:1.5rem;margin-top:2rem;text-align:left}
@media (min-width:640px){.vx2-compare-grid{grid-template-columns:1fr 1fr}}
@media (min-width:640px){.vx2-why-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.vx2-why-grid{grid-template-columns:repeat(3,1fr)}}
.vx2-quote{margin:0}
.vx2-quote blockquote{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--card-foreground)}
@media (min-width:640px){.vx2-quote blockquote{font-size:1.125rem}}
.vx2-q-orig{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--foreground)}
.vx2-q-new{font-weight:600}
/* Why VoxRead: plain list, no boxes (2026-10-23). */
.vx2-why-grid{list-style:none;padding:0;gap:1.5rem 2rem}
@media (min-width:640px){.vx2-why-grid{gap:2rem}}
.vx2-why-grid li{margin:0;padding:0}
.vx2-why-grid h3{margin:0 0 .5rem;font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--foreground)}
.vx2-why-grid p{margin:0;color:var(--muted-foreground);line-height:1.6}
/* Comparison: two simply labelled blocks, no ring. */
.vx2-quote,.vx2-quote blockquote{padding:0;background:transparent;border:0;box-shadow:none}
.vx2-quote header{margin-bottom:.5rem}
.vx2-quote blockquote{color:var(--foreground)}

/* 7. Footer. */
.vx2-footer{border-top:1px solid var(--border);background:var(--background);color:var(--foreground);padding-bottom:env(safe-area-inset-bottom,0px)}
.vx2-cta{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:4rem 1rem;text-align:center;border-bottom:1px solid var(--border)}
.vx2-btn{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 1.5rem;font-size:1rem;font-weight:600;color:#fff!important;text-decoration:none;background:var(--vx-accent,#e65100);border-radius:.625rem;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.vx2-btn:hover{background:var(--vx-accent-hover,#c94700)}}
.vx2-btn:active{transform:scale(.97)}
.vx2-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;max-width:72rem;margin:0 auto;padding:2rem 1rem}
.vx2-foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}
.vx2-foot-links a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.9375rem;font-weight:500;color:var(--foreground);text-decoration:none;touch-action:manipulation}
@media (hover:hover) and (pointer:fine){.vx2-foot-links a:hover{text-decoration:underline;text-underline-offset:4px}}
.vx2-copy{margin:0;font-size:.875rem;color:var(--muted-foreground)}
@media (max-width:639px){.vx2-foot{flex-direction:column;align-items:flex-start}}

/* 2026-10-23 drafts: core's .node--unpublished paints #fff4f4 (pale pink) behind white dark-mode text.
 * Only admins see unpublished nodes. Follow the theme instead, with a faint tint and a left rule as the draft cue. */
.node--unpublished{background-color:color-mix(in oklab,var(--destructive,#e7000b) 6%,var(--background));color:var(--foreground);border-inline-start:3px solid color-mix(in oklab,var(--destructive,#e7000b) 45%,transparent);padding-inline-start:1rem}

/* 5. Comparison (2026-10-23 compare): one quote, segmented switch with a sliding indicator, crossfade with light blur.
 * Both quotes share one grid cell so the taller one reserves the height (no layout shift). */
.vx-v2 .vx2-compare .vx2-lede a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.vx2-cmp{--vx2-ease:cubic-bezier(.23,1,.32,1);max-width:40rem;margin:2rem auto 0;text-align:left}
.vx2-cmp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem}
.vx2-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;background:var(--muted);border:1px solid var(--border);border-radius:calc(var(--radius,.625rem) + 2px)}
.vx2-seg-ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--background);border-radius:var(--radius,.625rem);box-shadow:0 1px 2px rgb(0 0 0 / .12);transition:transform 450ms var(--vx2-ease)}
.vx2-cmp[data-state="new"] .vx2-seg-ind{transform:translateX(100%)}
.vx2-seg-btn,.vx2-hear{position:relative;font:inherit;font-size:.875rem;font-weight:500;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.vx2-seg-btn{z-index:1;height:2rem;padding:0 .875rem;white-space:nowrap;color:var(--muted-foreground);background:transparent;border:0;border-radius:var(--radius,.625rem);transition:color 200ms ease}
.vx2-seg-btn[aria-pressed="true"]{color:var(--foreground)}
.vx2-hear{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .875rem;color:var(--foreground);background:transparent;border:1px solid var(--border);border-radius:var(--radius,.625rem);transition:background-color 200ms ease,transform 160ms var(--vx2-ease)}
.vx2-hear .vx2-i-pause,.vx2-hear.is-playing .vx2-i-play{display:none}
.vx2-hear.is-playing .vx2-i-pause{display:inline}
.vx2-hear:active,.vx2-seg-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.vx2-hear:hover{background:var(--accent,var(--muted))}.vx2-seg-btn:hover{color:var(--foreground)}}
.vx2-seg-btn:focus-visible,.vx2-hear:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.vx2-cmp-q{display:grid}
.vx2-cmp-q blockquote{grid-area:1/1;margin:0;padding:0;border:0;background:transparent;font-size:1.25rem;line-height:1.55;transition:opacity 450ms var(--vx2-ease),filter 450ms var(--vx2-ease),visibility 0s 450ms}
@media (min-width:640px){.vx2-cmp-q blockquote{font-size:1.5rem}}
.vx2-cmp-q .vx2-q-orig{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--foreground)}
.vx2-cmp-q .vx2-q-new{font-weight:600;color:var(--foreground)}
.vx2-cmp[data-state="orig"] .vx2-q-new,.vx2-cmp[data-state="new"] .vx2-q-orig{opacity:0;filter:blur(4px);visibility:hidden}
.vx2-cmp[data-state="orig"] .vx2-q-orig,.vx2-cmp[data-state="new"] .vx2-q-new{transition-delay:0s}
@media (max-width:399px){.vx2-cmp-bar{justify-content:center}}
@media (prefers-reduced-motion:reduce){.vx2-seg-ind,.vx2-cmp-q blockquote{transition:none}}
/* Bands (2026-10-26) */
html{overflow-x:clip}
.vx2-home>.vx2-why{width:100vw;max-width:none;margin-inline:calc(50% - 50vw);box-sizing:border-box;padding:clamp(3.5rem,8vw,6rem) max(1.25rem,calc((100vw - 72rem)/2));background:#f4f4f5}
html.dark .vx2-home>.vx2-why{background:#18181b}
.vx2-cta .vx2-h2{color:#e65100}

/* 20261026 compare simplify: inline play button + footnote */
.vx2-cmp{margin-top:1.5rem}
.vx2-cmp-row{display:flex;align-items:flex-start;gap:.875rem}
.vx2-cmp-row .vx2-cmp-q{flex:1;min-width:0}
.vx2-cmp-row .vx2-hear{flex:none;width:2.75rem;height:2.75rem;padding:0;justify-content:center;border:0;border-radius:999px;background:#e65100;color:#fff;margin-top:.15rem}
.vx2-cmp-row .vx2-hear:hover{background:#cc4800}
.vx2-cmp-row .vx2-hear svg{width:16px;height:16px}
.vx2-cmp-row .vx2-hear .vx2-i-play{margin-left:2px}
.vx2-cmp-row .vx2-hear-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vx2-cmp-note{margin:.875rem 0 0 3.625rem;font-size:.8125rem;line-height:1.4;color:var(--muted-foreground)}
.vx2-cmp-note a{color:var(--foreground);text-decoration:underline;text-underline-offset:3px}