/*
 * Gupy redesign v2 — light scheme. Loaded after the other v2 sheets (see
 * inc/redesign.php).
 *
 * The light colors themselves are tokens (gupy-v2.css, TOKENS): almost every
 * v2 rule reads var(--gv2-*), so the scheme switches with them. This file only
 * holds what tokens cannot express. Every rule is scoped under
 * body.gupy-v2:not([data-theme="dark"]) — the attribute the header's dark/light
 * switch drives — so the dark scheme is untouched.
 */

/* The "where to watch" card inside the dark gradient banner (Home v2, "Trouvez
   où regarder") is a light card in the light scheme: it takes the light
   tokens back on itself. */
body.gupy-v2:not([data-theme="dark"]) .gv2-banner--gradient .gv2-banner__card {
  --gv2-bg: #f4f5f8;
  --gv2-bg-rgb: 244, 245, 248;
  --gv2-fg-rgb: 18, 21, 28;
  --gv2-surface: #ffffff;
  --gv2-surface-alt: #e8eaef;
  --gv2-border: rgba(18, 21, 28, 0.1);
  --gv2-text: #12151c;
  --gv2-text-muted: #5b6170;
  --gv2-text-dim: #7a808d;
  color: var(--gv2-text);
}

/* Ratings / lists dialogs and widgets (ratings.css, user-lists.css): their
   light values only kick in with [data-theme="light"] or an OS preference,
   never set by the header switch. On v2 pages they follow the switch. The
   primary / star colors are left alone (the free landing turns them green). */
body.gupy-v2:not([data-theme="dark"]) {
  --vrd-rt-bg: #fff;
  --vrd-rt-surface: #f5f5f7;
  --vrd-rt-surface-hover: #eaeaef;
  --vrd-rt-border: #e0e0e6;
  --vrd-rt-text: var(--gv2-text);
  --vrd-rt-text-muted: var(--gv2-text-muted);
  --vrd-rt-star-empty: #d0d0d8;
  --vrd-rt-overlay: rgba(0, 0, 0, 0.4);
  --vrd-dl-bg: #fff;
  --vrd-dl-surface: #f5f5f7;
  --vrd-dl-surface-hover: #eaeaef;
  --vrd-dl-border: #e0e0e6;
  --vrd-dl-text: var(--gv2-text);
  --vrd-dl-text-muted: var(--gv2-text-muted);
  --vrd-dl-overlay: rgba(0, 0, 0, 0.4);
}

/* Dark islands (colored banners, labels over pictures): they keep the dark
   tokens (gupy-v2.css), their text color must follow. */
body.gupy-v2:not([data-theme="dark"]) .gv2-banner--gradient .gv2-banner__box,
body.gupy-v2:not([data-theme="dark"]) .gv2-split-banner__panel--premium,
body.gupy-v2:not([data-theme="dark"]) .gv2-newsletter__article-body,
body.gupy-v2:not([data-theme="dark"]) .gv2-episode-card__thumb {
  color: var(--gv2-text);
}

/* Shadows meant to lift light text off a dark backdrop: useless (and muddy)
   under dark text. */
body.gupy-v2:not([data-theme="dark"]) .gv2-detail-hero__title,
body.gupy-v2:not([data-theme="dark"]) .gv2-detail-hero__meta,
body.gupy-v2:not([data-theme="dark"]) .gv2-detail-hero__synopsis,
body.gupy-v2:not([data-theme="dark"]) .gv2-detail-hero__facts,
body.gupy-v2:not([data-theme="dark"]) .gv2-carousel__arrow,
body.gupy-v2:not([data-theme="dark"]) .gv2-carousel .tns-controls > button,
body.gupy-v2:not([data-theme="dark"]) .gv2-program .gv2-seasons__arrow {
  text-shadow: none;
}

/* Selected season: the white outline disappears on a white tab. */
body.gupy-v2:not([data-theme="dark"]) .gv2-tabs__item.is-active {
  color: var(--gv2-text);
  box-shadow: inset 0 0 0 2px var(--gv2-text);
}

body.gupy-v2:not([data-theme="dark"]) .gv2-tabs__item.is-complete.is-active {
  color: #fff;
}

/* Lighter drop shadows on a light page (lists banner stack, article slide). */
body.gupy-v2:not([data-theme="dark"]) .gv2-tile-stack__item.is-active {
  box-shadow: 0 20px 50px rgba(18, 21, 28, 0.25), 0 0 0 2px var(--vrd-primary);
}

body.gupy-v2:not([data-theme="dark"]) .gv2-landing-slide__article-visual {
  box-shadow: 0 30px 70px rgba(18, 21, 28, 0.25);
}

/* Footer: the legacy light scheme (style.css, "body:not([data-theme=dark])
   footer ...") forces its own greys with !important; the v2 tokens win back. */
body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div,
body.gupy-v2:not([data-theme="dark"]) footer .footer-info.dark-div {
  background-color: var(--gv2-bg) !important;
  color: var(--gv2-text-muted) !important;
}

body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div a,
body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div a:focus,
body.gupy-v2:not([data-theme="dark"]) footer .footer-info.dark-div a,
body.gupy-v2:not([data-theme="dark"]) footer .footer-info .copyright {
  color: var(--gv2-text-muted) !important;
}

body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div a:hover,
body.gupy-v2:not([data-theme="dark"]) footer .footer-info.dark-div a:hover {
  color: var(--vrd-primary) !important;
}

body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div h1,
body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div h2,
body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div h3,
body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div h4,
body.gupy-v2:not([data-theme="dark"]) footer .footer-inner.dark-div .widget-title {
  color: var(--gv2-text) !important;
}

body.gupy-v2:not([data-theme="dark"]) footer .footer-info .copyright small {
  color: var(--gv2-text-dim) !important;
}

body.gupy-v2:not([data-theme="dark"]) footer a.tus_footer_social_link {
  background: var(--gv2-surface-alt) !important;
  color: var(--gv2-text) !important;
}

body.gupy-v2:not([data-theme="dark"]) footer a.tus_footer_social_link:hover {
  background: var(--vrd-primary) !important;
  color: #fff !important;
}

body.gupy-v2:not([data-theme="dark"]) footer a.tus_footer_social_link i {
  background: none !important;
  color: inherit !important;
}

/* Header: same story, the legacy light header (style.css, "HEADER — Light
   mode overrides") paints its own greys with !important. */
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div {
  color: var(--gv2-text-muted) !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div a,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div a:focus,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-main-menu > ul > li > a {
  color: var(--gv2-text) !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div a:hover,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-main-menu > ul > li > a:hover,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-main-menu > ul > li.current-menu-item > a,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-main-menu > ul > li.current-menu-ancestor > a,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-main-menu > ul > li.current-menu-parent > a {
  color: var(--vrd-primary) !important;
}

/* The sign-in button keeps its white label (the rules above would darken it). */
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div a.vrd_user_menu_button.is_primary,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div a.vrd_user_menu_button.is_primary:hover,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-user-login > ul > li > a:not(.user-info),
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-user-login > ul > li > a:not(.user-info):hover {
  color: #fff !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div li.vrd_top_menu_icon > a i,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div li.vrd_top_menu_icon > a svg {
  color: var(--gv2-text-muted) !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div li.vrd_top_menu_icon:hover > a i,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div li.vrd_top_menu_icon:hover > a svg {
  color: var(--gv2-text) !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-header-search-form input[type="text"],
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-header-search-form input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--gv2-text) !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-header-search-form input::placeholder {
  color: var(--gv2-text-muted) !important;
}

body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-header-search-form i,
body.gupy-v2:not([data-theme="dark"]) #header-navigation .cactus-nav-main.dark-div .cactus-header-search-form svg {
  color: var(--gv2-text-muted) !important;
}

/* Sticky bar of the v2 templates: translucent + blurred, like the dark one. */
body.gupy-v2.gv2-template:not([data-theme="dark"]) #header-navigation.sticky-menu .cactus-nav-main.dark-div.dark-bg-color-1 {
  background-color: rgba(var(--gv2-bg-rgb), 0.85) !important;
  box-shadow: none;
}

/* Home hero, one column (<= 1024px): the text runs over the picture; a light
   wash needs more opacity than the dark one for dark text to stay readable. */
@media (max-width: 1024px) {
  body.gupy-v2:not([data-theme="dark"]) .gv2-hero__bg::after {
    background: linear-gradient(180deg, rgba(var(--gv2-bg-rgb), 0.94) 0%, rgba(var(--gv2-bg-rgb), 0.82) 28%, rgba(var(--gv2-bg-rgb), 0.86) 48%, var(--gv2-bg) 80%, var(--gv2-bg) 100%);
  }
}