/* style */
/* Thisai polish 2026 (2026-10-17)
   Owner asked for item 5 of the 17 Oct review: lower homepage parts and the footer in the TV night style,
   on every page. Footer: teak, links in one centred line, nothing hidden behind the back-to-top button.
   Also Most watched today, the WhatsApp box, the "All promos" card, the comment form and the sticky Watch bar.
   Colours follow the TV night pages (--tvn-* from 9577 / 9673) with fixed fallbacks for other pages.
   Undo: set Inactive. Settings: CSS Snippet, Site Wide Header. */

/* Footer */
html:root body #footer, html:root body #footer [data-row] { background: #2A1D17 !important; border: 0 !important; }
html:root body #footer [data-row="bottom"] > .ct-container {
  display: flex !important; flex-direction: column-reverse; align-items: center; gap: 12px;
  padding: 30px 16px 96px !important; text-align: center; min-height: 0 !important;
}
html:root body #footer [data-column] { justify-content: center !important; width: 100%; }
html:root body #footer .thisai-footer-links {
  display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 20px !important; margin: 0 !important; max-width: 760px;
}
html:root body #footer .thisai-footer-links a {
  display: inline-block !important; padding: 6px 2px !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  color: #FFF6EA !important; font-size: 16px !important; font-weight: 600 !important; text-decoration: none !important; min-height: 0 !important; box-shadow: none !important;
}
html:root body #footer .thisai-footer-links a:hover { color: #F4B400 !important; }
html:root body #footer .ct-footer-copyright, html:root body #footer .ct-footer-copyright p { color: #D9C6B4 !important; font-size: 14px !important; margin: 0 !important; }
html:root body a.ct-back-to-top {
  background: #F4B400 !important; color: #2A1D17 !important; border: 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
  --theme-icon-color: #2A1D17; width: 48px !important; height: 48px !important;
}
html:root body a.ct-back-to-top svg { fill: #2A1D17 !important; }

/* Sticky Watch bar on episode pages */
html:root body .thisai-watchbar { background: #2A1D17 !important; border: 0 !important; box-shadow: 0 -6px 18px rgba(0,0,0,.18) !important; }
html:root body .thisai-watchbar-title { color: #FFF6EA !important; font-weight: 700 !important; }
html:root body a.thisai-watchbar-btn {
  background: #F4B400 !important; color: #2A1D17 !important; border-radius: 30px !important; font-weight: 800 !important; box-shadow: none !important; min-height: 44px;
  display: inline-flex !important; align-items: center;
}
html:root body a.thisai-watchbar-btn::before { border-left-color: #2A1D17 !important; color: #2A1D17 !important; }

/* Most watched today */
html:root body section.ct-trending-block { background: var(--tvn-card, #F5EFE9) !important; border: 0 !important; }
html.thisai-dark:root body section.ct-trending-block { background: #20150F !important; }
html:root body section.ct-trending-block .ct-module-title { font-size: 26px !important; font-weight: 800 !important; color: var(--tvn-ink, #2A1D17) !important; }
html.thisai-dark:root body section.ct-trending-block .ct-module-title { color: #FFF6EA !important; }
html:root body section.ct-trending-block .ct-slider-arrows > span {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 1.5px solid var(--tvn-line, #E2D7CC) !important;
  background: transparent !important; display: inline-flex !important; align-items: center; justify-content: center;
}
html:root body section.ct-trending-block .ct-slider-arrows svg { width: 12px !important; height: 12px !important; }
html:root body section.ct-trending-block .ct-trending-block-item .ct-media-container,
html:root body section.ct-trending-block .ct-trending-block-item img { border-radius: 12px !important; }
html:root body section.ct-trending-block .ct-post-title { font-size: 17px !important; font-weight: 700 !important; color: var(--tvn-ink, #2A1D17) !important; line-height: 1.25 !important; }
html.thisai-dark:root body section.ct-trending-block .ct-post-title { color: #FFF6EA !important; }

/* WhatsApp channel box */
html:root body aside.thisai-wach { background: var(--tvn-card, #F5EFE9) !important; border: 0 !important; border-radius: 20px !important; box-shadow: none !important; }
html.thisai-dark:root body aside.thisai-wach { background: #3A2A21 !important; }
html:root body a.thisai-wach-btn { min-height: 48px; border-radius: 30px !important; }

/* "All promos" card on the homepage: a row like the other promos, turmeric arrow */
html:root body .thisai-home-promos a:has(.thisai-promo-more-text) {
  display: grid !important; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 12px;
  padding: 10px !important; border-radius: 18px !important; border: 0 !important; box-shadow: none !important;
  background: var(--tvn-sel-bg, #2A1D17) !important; min-height: 0 !important; height: auto !important;
}
html:root body .thisai-home-promos a.thisai-promo-more .thisai-promo-more-pill { display: none !important; }
html:root body .thisai-home-promos a.thisai-promo-more .thisai-promo-more-art {
  position: relative; width: 112px !important; height: 63px !important; aspect-ratio: auto !important; border-radius: 10px !important; overflow: hidden; margin: 0 !important;
}
html:root body .thisai-home-promos a.thisai-promo-more .thisai-promo-more-text { padding: 0 !important; margin: 0 !important; }
html:root body .thisai-home-promos a.thisai-promo-more .thisai-promo-more-arrow svg { fill: #2A1D17 !important; }
html:root body .thisai-home-promos .thisai-promo-more-arrow {
  width: 36px !important; height: 36px !important; background: #F4B400 !important; color: #2A1D17 !important; box-shadow: none !important;
}
html:root body .thisai-home-promos .thisai-promo-more-arrow::before, html:root body .thisai-home-promos .thisai-promo-more-arrow::after { border-color: #2A1D17 !important; color: #2A1D17 !important; }
html:root body .thisai-home-promos .thisai-promo-more-en { color: var(--tvn-sel-ink, #FFFFFF) !important; font-size: 19px !important; font-weight: 700 !important; }
html:root body .thisai-home-promos .thisai-promo-more-n { color: var(--tvn-sel-ink, #FFFFFF) !important; opacity: .85; font-size: 15px !important; }
html:root body .thisai-home-promos a:has(.thisai-promo-more-text)::before,
html:root body .thisai-home-promos a:has(.thisai-promo-more-text)::after { display: none !important; }

/* Comment form on episode pages */
html:root body .comment-respond .comment-reply-title { font-size: 22px !important; font-weight: 800 !important; }
html:root body .comment-respond :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  border: 1.5px solid var(--tvn-line, #E2D7CC) !important; border-radius: 14px !important; background: var(--tvn-card, #FFFFFF) !important; box-shadow: none !important;
}
html:root body .comment-respond :is(input, textarea):focus { border-color: #F4B400 !important; outline: none !important; }
html:root body .comment-respond button#submit {
  min-height: 48px; padding: 0 26px !important; border-radius: 30px !important; border: 0 !important;
  background: var(--tvn-sel-bg, #2A1D17) !important; color: var(--tvn-sel-ink, #FFFFFF) !important; font-weight: 700 !important; font-size: 16px !important;
}
html:root body .comment-respond input[type="checkbox"] { accent-color: #F4B400; }

/* v2 after screenshots: centre the footer links on desktop, less empty space under them; heading on phones */
html:root body #footer [data-column] { margin: 0 !important; display: flex !important; align-items: center; }
html:root body #footer .ct-widget { width: 100%; display: flex !important; justify-content: center; margin: 0 !important; }
@media (min-width: 761px) { html:root body #footer [data-row="bottom"] > .ct-container { padding-bottom: 36px !important; } }
@media (max-width: 760px) {
  html:root body section.ct-trending-block .ct-module-title { font-size: 22px !important; flex-wrap: nowrap; }
  html:root body section.ct-trending-block .ct-slider-arrows > span { width: 36px !important; height: 36px !important; }
}
html:root body section.ct-trending-block h3.ct-module-title.ct-module-title { white-space: nowrap; }
@media (max-width: 760px) {
  html:root body section.ct-trending-block h3.ct-module-title.ct-module-title { font-size: 22px !important; }
}
/* style */
/* Thisai logo 2026 (2026-10-17)
   New logo picked by the owner (option A, TV screen mark): yellow TV with antennas + "ThisaiTV" in Baloo 2.
   Site logo = media 9668 (light), dark version 9669, site icon 9670. Old: custom_logo 3387, site_icon 3576.
   The dark mode snippet (9398) inverted the old black-letter logo with a filter; the new logo has its own dark file.
   Undo: theme mod custom_logo back to 3387, option site_icon back to 3576, and set this snippet Inactive.
   Settings: CSS Snippet, Site Wide Header. */
html.thisai-dark:root body :is(#header, #offcanvas) .site-logo-container img {
  filter: none !important;
  content: url(/wp-content/uploads/2026/10/thisaitv-logo-2026-dark.png);
}
html:root body #header [data-device="desktop"] .site-branding img { max-height: 54px !important; width: auto !important; }
@media (max-width: 999px) {
  html:root body #header [data-device="mobile"] .site-logo-container img { width: auto !important; height: auto !important; max-width: 140px !important; max-height: 34px !important; }
}
@media (max-width: 370px) {
  html:root body #header [data-device="mobile"] .site-logo-container img { max-width: 118px !important; }
}
/* Desktop: the new logo is shorter than the old one, so centre it on the line with search, A+ and ThisaiPlay */
@media (min-width: 1000px) {
  html:root body #header [data-device="desktop"] [data-row="middle"] [data-column="start"] { align-self: center !important; display: flex; align-items: center; }
  html:root body #header [data-device="desktop"] .site-branding,
  html:root body #header [data-device="desktop"] .site-logo-container { display: flex !important; align-items: center; margin: 0 !important; }
  html:root body #header [data-device="desktop"] .site-branding img { display: block; }
}
/* Phones: the logo box is taller than the picture (61 vs 31 px) and the picture sat at its top; centre it */
@media (max-width: 999px) {
  html:root body #header [data-device="mobile"] .site-logo-container { display: flex !important; align-items: center; height: 100%; }
  html:root body #header [data-device="mobile"] .site-logo-container img { display: block; }
}
/* style */
/* Thisai header fit (2026-10-04)
   Desktop (1000 px and up): the 9 menu items need ~800–930 px but only ~480 px was left between the logo and
   ThisaiPlay, so the menu wrapped onto 3 lines and overlapped (or the theme folded half of it into "More").
   Here logo, A+ and ThisaiPlay share the top line and the menu gets its own full-width line underneath, on one
   row. Phones are unchanged. Goes with "Thisai header menu: show all items" (footer script that turns off
   Blocksy's fold-into-More).
   The search button moves from the blue top strip into the header line (next to A+) and the strip is hidden,
   on desktop and (v3) on phones and tablets.
   Also: the current menu item (e.g. Home) was white text on a pale pink pill (two older rules fighting);
   it is now coral text on a soft coral pill, at every width.
   Settings: CSS Snippet · Auto Insert · Site Wide Header · Active. Undo: set Inactive. */
@media (min-width: 1000px) {
  html body #header [data-device="desktop"] [data-row="middle"] > .ct-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto auto !important;
    grid-template-areas: "logo . search aplus cta" "nav nav nav nav nav";
    column-gap: 14px; row-gap: 6px; align-items: center;
    min-height: 0 !important; height: auto !important; padding-block: 10px 8px;
  }
  html body #header [data-device="desktop"] [data-row="middle"] { height: auto !important; min-height: 0 !important; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-column="start"] { grid-area: logo; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-column="end"],
  html body #header [data-device="desktop"] [data-row="middle"] [data-column="end"] > div { display: contents !important; }
  html body #header [data-device="desktop"] button.thisai-textsize { grid-area: aplus; margin: 0 !important; }
  html body #header [data-device="desktop"] .ct-header-cta { grid-area: cta; }
  /* Search: moved into the header line by the footer script; the top strip that only held it is hidden */
  html.thisai-search-moved body #header [data-device="desktop"] [data-row="top"] { display: none !important; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-id="search"] {
    grid-area: search; display: inline-flex; align-items: center; justify-content: center;
    width: 44px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
    border: 1.5px solid rgba(20,20,24,.2) !important; border-radius: 10px !important; background: #fff !important; color: #141418;
    --theme-icon-color: #141418; --theme-icon-size: 18px;
  }
  html body #header [data-device="desktop"] [data-row="middle"] [data-id="search"] svg { width: 18px; height: 18px; fill: #141418 !important; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-id="search"]:hover { border-color: #141418 !important; }
  html body #header [data-device="desktop"] nav#header-menu-1 {
    grid-area: nav; justify-content: center; width: 100%; height: auto !important;
    border-top: 1px solid rgba(20,20,24,.08); padding-top: 8px;
  }
  html body #header [data-device="desktop"] nav#header-menu-1 > ul { flex-wrap: nowrap !important; justify-content: center; gap: 2px; }
  html body #header [data-device="desktop"] nav#header-menu-1 .ct-menu-link { padding: 8px 10px !important; white-space: nowrap; }
  html body #header [data-device="desktop"] .site-branding img { max-height: 72px; width: auto; }
}
html body #header #menu-main-menu > .menu-item.current-menu-item > .ct-menu-link,
html body #header #menu-main-menu-1 > .menu-item.current-menu-item > .ct-menu-link {
  background: rgba(255,107,61,.14) !important; border-color: transparent !important; color: #B8431C !important;
}

/* Phones and tablets (mobile header, under 1000 px): search moved next to A+ and the menu button by the footer
   script; the blue top strip that only held it is hidden */
html.thisai-msearch-moved body #header [data-device="mobile"] [data-row="top"] { display: none !important; }
html body #header [data-device="mobile"] [data-row="middle"] [data-id="search"] {
  order: -1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px !important; height: 40px !important; margin: 0 8px 0 0 !important; padding: 0 !important;
  border: 1.5px solid rgba(20,20,24,.2) !important; border-radius: 10px !important; background: #fff !important; color: #141418;
  --theme-icon-color: #141418; --theme-icon-size: 18px;
}
html body #header [data-device="mobile"] [data-row="middle"] [data-id="search"] svg { width: 18px; height: 18px; fill: #141418 !important; }


/* v4 (2026-10-16): phones. Logo (about 170 px wide) plus search, A+, moon and menu (about 200 px) did not fit
   at 390 px, so the search button sat on the logo's "TV". The logo is capped so everything fits down to 340 px. */
@media (max-width: 999px) {
  html body #header [data-device="mobile"] [data-row="middle"] [data-column="start"] { min-width: 0; flex: 0 1 auto; }
  html body #header [data-device="mobile"] .site-logo-container img { width: auto !important; height: auto !important; max-width: 126px !important; max-height: 48px !important; }
}
@media (max-width: 370px) {
  html body #header [data-device="mobile"] .site-logo-container img { max-width: 104px !important; }
}