/* style */
/* Thisai design system (4 Oct 2026)
   One set of fonts, corners, shadows and spacing on top of all the other Thisai snippets.
   Loads last in the header. Set Inactive to undo; nothing else depends on it. */

:root {
  --t-ink: #141418;
  --t-muted: #6b6875;
  --t-line: #e7e5e0;
  --t-soft: #f4f3f0;
  --t-accent: #ff6b3d;
  --t-accent-ink: #b8431c;
  --t-r-sm: 10px;   /* small icon buttons */
  --t-r-md: 12px;   /* thumbnails */
  --t-r-btn: 14px;  /* big buttons and tabs */
  --t-r-lg: 16px;   /* panels and boxes */
  --t-sh-1: 0 1px 2px rgba(20,20,24,.05), 0 2px 8px rgba(20,20,24,.05);
  --t-sh-2: 0 2px 4px rgba(20,20,24,.06), 0 12px 28px rgba(20,20,24,.10);
  --t-font: 'Plus Jakarta Sans', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-gutter: clamp(16px, 3.5vw, 40px);
}

/* ---------- 1. One font family everywhere (admin bar left alone) ---------- */
html:root { --theme-font-family: var(--t-font); }
html body,
html body button, html body input, html body select, html body textarea,
html body small,
html body .bb-promo-card, html body .bb-promo-card *,
html body .thisai-ex-wa small, html body button.thisai-ex-report small,
html body .thisai-ex-report-note, html body .thisai-topbar-close,
html body .entry-content, html body .entry-excerpt, html body .page-description,
html body .ct-footer, html body .tbp-wrap, html body .tbp-pill {
  font-family: var(--t-font);
}
html body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Headings: same family, firm weight, tight spacing */
html body h1, html body h2, html body h3, html body .page-title, html body .entry-title {
  font-family: var(--t-font);
  letter-spacing: -0.01em;
}

/* ---------- 2. Side margins: homepage content no longer touches the screen edge ---------- */
body.home .ct-container-full .entry-content.is-layout-constrained {
  padding-left: var(--t-gutter);
  padding-right: var(--t-gutter);
}

/* ---------- 3. Thumbnails: one corner size, flat ---------- */
html body .thisai-row-thumb,
html body .thisai-promo-more-art,
html body .ct-media-container,
html body .wp-block-post-featured-image,
html body .wp-block-post-featured-image img {
  border-radius: var(--t-r-md) !important;
}
html body .thisai-row-thumb { box-shadow: none !important; }

/* ---------- 4. Panels and boxes: one corner, one border, one shadow ---------- */
html body .thisai-ex-newest,
html body .thisai-ex-next,
html body a.thisai-epnav-prev,
html body a.thisai-epnav-next,
html body .seo-info-box,
html body aside.thisai-wach,
html body ol.thisai-today-list,
html body a.bb-promo-card {
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-sh-1) !important;
}
html body .thisai-ex-newest,
html body a.thisai-epnav-prev,
html body a.thisai-epnav-next,
html body .seo-info-box,
html body aside.thisai-wach,
html body ol.thisai-today-list {
  border: 1px solid var(--t-line) !important;
}
html body a.thisai-epnav-prev:hover,
html body a.thisai-epnav-next:hover { box-shadow: var(--t-sh-2) !important; }
html body .bb-promo-card-inner { border-radius: calc(var(--t-r-lg) - 2px) !important; }

/* ---------- 5. Big buttons and tabs: one corner size, soft shadows instead of glows ---------- */
html body a.thisai-days-older,
html body a.thisai-ex-wa,
html body button.thisai-ex-report,
html body a.thisai-ex-newest-btn,
html body .thisai-ex-next,
html body .bb-promo-cta,
html body button.thisai-days-tab,
html body button.thisai-today-tab {
  border-radius: var(--t-r-btn) !important;
}
html body a.thisai-days-older { box-shadow: 0 6px 16px -6px rgba(255,107,61,.55) !important; }
html body a.thisai-wach-btn { box-shadow: 0 4px 12px -4px rgba(37,211,102,.55) !important; }
html body .bb-promo-cta { box-shadow: 0 4px 12px -4px rgba(214,40,74,.5) !important; }
html body .thisai-promo-more-art { box-shadow: var(--t-sh-1) !important; }
/* "Video not working?" matches "Send to family": filled, no hard outline */
html body button.thisai-ex-report {
  background: var(--t-soft) !important;
  border: 1px solid var(--t-line) !important;
  color: var(--t-ink) !important;
}
html body button.thisai-ex-report[disabled] { border-color: #1a7f37 !important; color: #1a7f37 !important; background: #e6f4ea !important; }

/* ---------- 6. Episode page: no author name, quieter hero line ---------- */
body.single-post .entry-meta .meta-author,
body.single-post .entry-meta li.meta-author,
body.single-post .hero-section .ct-author-avatar,
body.single-post .entry-meta .ct-meta-element-author {
  display: none !important;
}


/* ---------- 8. Keyboard focus that is easy to see ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible {
  outline: 3px solid var(--t-accent) !important;
  outline-offset: 2px !important;
}

/* ---------- 9. Category pill list on channel pages ---------- */
html body .tbp-heading { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--t-ink); }
html body .tbp-pill { padding: 8px 15px; font-size: 13.5px; border-color: var(--t-line); }

/* ---------- No Tamil labels (owner, 14 Oct 2026): every Tamil label is marked lang="ta". Show names, song titles and
   the pictures keep their Tamil. Delete this rule to bring the Tamil labels back. ---------- */
html body [lang="ta"] { display: none !important; }
/* thisai-dark-css */
/* Toggle button, same shape as A+ */
button.thisai-darkbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; margin: 0 6px 0 0; padding: 0 10px;
  border: 1.5px solid rgba(20,20,24,.2); border-radius: 10px;
  background: #fff; color: #141418; font-size: 19px; line-height: 1; cursor: pointer;
}
button.thisai-darkbtn:focus-visible { outline: 2px solid var(--thisai-accent, #FF6B3D); outline-offset: 2px; }
/* Desktop: its own cell in the two-line header grid of "Thisai header fit" (8807) */
@media (min-width: 1000px) {
  html body #header [data-device="desktop"] [data-row="middle"] > .ct-container {
    grid-template-columns: auto 1fr auto auto auto auto !important;
    grid-template-areas: "logo . search aplus dark cta" "nav nav nav nav nav nav" !important;
  }
  html body #header [data-device="desktop"] button.thisai-darkbtn { grid-area: dark; margin: 0 !important; }
}
/* Phones: a little narrower so logo, search, A+, moon and the menu button fit at 360 px */
@media (max-width: 999px) {
  html body #header [data-device="mobile"] button.thisai-darkbtn { min-width: 40px; padding: 0 8px; }
}

html.thisai-dark {
  color-scheme: dark;
  --dk-page: #121216;
  --dk-head: #17171c;
  --dk-card: #1d1d24;
  --dk-card-2: #26262f;
  --dk-line: #34343f;
  --dk-ink: #f2f1f5;
  --dk-text: #d4d2dc;
  --dk-muted: #a3a1ae;
  --theme-palette-color-3: #d4d2dc;
  --theme-palette-color-4: #f2f1f5;
  --theme-palette-color-5: #34343f;
  --theme-palette-color-6: #1d1d24;
  --theme-palette-color-7: #17171c;
  --theme-palette-color-8: #121216;
  --theme-text-color: #d4d2dc;
  --theme-headings-color: #f2f1f5;
  --theme-link-initial-color: #f2f1f5;
  --theme-border-color: #34343f;
  --theme-form-field-background-initial-color: #1d1d24;
  --theme-form-field-background-focus-color: #26262f;
  --theme-form-field-border-initial-color: #34343f;
  --theme-form-text-initial-color: #f2f1f5;
  --theme-form-text-focus-color: #f2f1f5;
  --t-ink: #f2f1f5;
  --t-muted: #a3a1ae;
  --t-line: #34343f;
  --t-soft: #1d1d24;
  --t-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --t-sh-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
}
html.thisai-dark body,
html.thisai-dark body #main-container,
html.thisai-dark body .site-main { background: var(--dk-page) !important; color: var(--dk-text); }

/* Header */
html.thisai-dark body #header [data-row="middle"],
html.thisai-dark body #header [data-row="bottom"],
html.thisai-dark body #header [data-row="middle"] > .ct-container,
html.thisai-dark body .ct-sticky-container [data-row] { background: var(--dk-head) !important; }
html.thisai-dark body #header [data-row="middle"] { border-bottom: 1px solid var(--dk-line) !important; }
html.thisai-dark body #header .ct-menu-link { color: var(--dk-ink) !important; }
html.thisai-dark body #header .ct-menu-link:hover { color: #ff8a63 !important; }
html.thisai-dark body #header .current-menu-item > .ct-menu-link { color: #ff8a63 !important; background: rgba(255,107,61,.16) !important; }
html.thisai-dark body #header .ct-toggle svg,
html.thisai-dark body #header .ct-header-trigger svg,
html.thisai-dark body #header .ct-header-search svg { fill: var(--dk-ink) !important; color: var(--dk-ink) !important; }
html.thisai-dark body #offcanvas .ct-panel-inner { background: var(--dk-head) !important; }
html.thisai-dark body #offcanvas .ct-menu-link { color: var(--dk-ink) !important; }
/* Logo: black THISAI letters turn white, the gold TV keeps its colour */
html.thisai-dark body :is(#header, #offcanvas) .site-logo-container img { filter: invert(1) hue-rotate(180deg) saturate(1.3); }

/* Header buttons: A+, search, moon */
html.thisai-dark body button.thisai-textsize,
html.thisai-dark body button.thisai-darkbtn,
html.thisai-dark body button.ct-header-search.ct-toggle {
  background: var(--dk-card) !important; color: var(--dk-ink) !important; border-color: var(--dk-line) !important;
}
html.thisai-dark body button.thisai-textsize[aria-pressed="true"] { background: var(--dk-ink) !important; color: #121216 !important; }
html.thisai-dark body #header [data-row="middle"] [data-id="search"] {
  background: var(--dk-card) !important; border-color: var(--dk-line) !important; color: var(--dk-ink) !important; --theme-icon-color: #f2f1f5;
}
html.thisai-dark body #header [data-row="middle"] [data-id="search"] svg { fill: var(--dk-ink) !important; }
html.thisai-dark body #header #menu-main-menu > .menu-item.current-menu-item > .ct-menu-link,
html.thisai-dark body #header #menu-main-menu-1 > .menu-item.current-menu-item > .ct-menu-link {
  background: rgba(255,107,61,.18) !important; color: #ff8a63 !important;
}
html.thisai-dark body #header [data-device="desktop"] nav#header-menu-1 { border-top-color: var(--dk-line) !important; }

/* Surfaces that were white or off-white */
html.thisai-dark body :is(
  a.thisai-chip, button.thisai-days-tab, aside.thisai-wach, a.thisai-wach-btn, section.ct-trending-block,
  div.hero-section, a.thisai-ex-wa, button.thisai-ex-report, button.thisai-follow, a.thisai-epnav-prev, a.thisai-epnav-next,
  div.seo-info-box, a.seo-pill-button, div.thisai-ep-thumb, button.tv-reaction-btn, span.tv-reaction-count,
  a.tbp-pill, a.page-numbers, span.page-numbers, span.thisai-show-promo-play, div.thisai-shows-search,
  button.ts-tab, li.ts-song, button.ts-hide, div.modern-cards, a.thisai-look-old, .thisai-ex-newest, a.thisai-show-promo,
  div.thisai-latest-episodes, .thisai-today, .entry-card, .thisai-myshows-hint, .ct-search-results, .thisai-ss-box
) {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-line) !important;
  color: var(--dk-text);
}
html.thisai-dark body figure:not(.wp-block-image):not(.ct-media-container) { background-color: transparent !important; }
html.thisai-dark body :is(span.thisai-row-thumb, span.thisai-more-thumb, span.ts-thumb, .ct-media-container) { background-color: var(--dk-card-2) !important; }
html.thisai-dark body div.hero-section { background-color: var(--dk-head) !important; }
html.thisai-dark body .modern-cards article.wp-block-post,
html.thisai-dark body article.entry-card { background-color: transparent !important; }

/* Selected tab / chip stay strong */
html.thisai-dark body button.thisai-days-tab[aria-selected="true"],
html.thisai-dark body button.ts-tab[aria-selected="true"],
html.thisai-dark body a.thisai-chip.is-active,
html.thisai-dark body span.page-numbers.current {
  background-color: var(--dk-ink) !important; color: #121216 !important; border-color: var(--dk-ink) !important;
}
html.thisai-dark body button.thisai-days-tab[aria-selected="true"] *,
html.thisai-dark body a.thisai-chip.is-active * { color: #121216 !important; }

/* Text that was near-black */
html.thisai-dark body :is(
  h1, h2, h3, h4, h5, .page-title, .entry-title, .ct-post-title, .thisai-row-heading, .thisai-row-title, .thisai-more-title,
  .thisai-more-heading, .thisai-ep-title, .thisai-latest-title, .thisai-shows-heading, .ts-name, .tbp-heading,
  .thisai-days-label, .thisai-days-count, .thisai-wach-title, .thisai-ex-next-title, .thisai-epnav-title,
  .modern-cat-name, .thisai-chip, .thisai-wach-btn, .thisai-look-bar-text, .thisai-row-all, .thisai-more-all,
  .seo-pill-button, .tbp-pill, .page-numbers, .thisai-textsize, label, strong, b
) { color: var(--dk-ink) !important; }
html.thisai-dark body :is(
  p, li, .video-frame-caption, .seo-footer-note, .thisai-epnav-label, .thisai-show-latest, .ts-sub, small, time,
  .ct-meta-element-date, .thisai-ep-date, .thisai-more-date, .thisai-days-date, .thisai-day-date, .modern-cat-eyebrow,
  .seo-tag-pill, .logged-in-as, .thisai-myshows-hint, .entry-excerpt, .page-description
) { color: var(--dk-text) !important; }
html.thisai-dark body .thisai-row-date { color: var(--dk-text) !important; }
html.thisai-dark body .entry-content a:not([class]) { color: #ff8a63 !important; }

/* Coloured buttons keep white text */
html.thisai-dark body :is(a.thisai-days-older, a.thisai-ex-next, a.thisai-look-new, .thisai-ex-wa-green, a.thisai-watch-btn, .thisai-new-dot, .thisai-cw-next, .thisai-wd-badge) ,
html.thisai-dark body :is(a.thisai-days-older, a.thisai-ex-next, a.thisai-look-new) * { color: #fff !important; }

/* Channel tints: soft backgrounds become dark tints */
html.thisai-dark [data-ch]           { --ch-soft: #2a211e; }
html.thisai-dark [data-ch="sun"]     { --ch-soft: #2e2119; }
html.thisai-dark [data-ch="vijay"]   { --ch-soft: #2d1b23; }
html.thisai-dark [data-ch="zee"]     { --ch-soft: #221d33; }
html.thisai-dark [data-ch="weekend"] { --ch-soft: #15281f; }

html.thisai-dark body a.thisai-look-old, html.thisai-dark body a.thisai-look-old * { color: var(--dk-ink) !important; }
html.thisai-dark body a.thisai-ex-wa { background-color: #10291c !important; border-color: #1f6b43 !important; }
html.thisai-dark body a.thisai-ex-wa svg, html.thisai-dark body a.thisai-ex-wa img { filter: brightness(1.6); }
/* Old-look bar */
html.thisai-dark body .thisai-look-bar { background: #2a1d18 !important; border-color: #4a2c22 !important; }

/* Forms and search */
html.thisai-dark body :is(input, textarea, select) {
  background-color: var(--dk-card) !important; color: var(--dk-ink) !important; border-color: var(--dk-line) !important;
}
html.thisai-dark body ::placeholder { color: var(--dk-muted) !important; }
html.thisai-dark body #search-modal { background: rgba(10,10,14,.97) !important; }

/* Lines */
html.thisai-dark body :is(hr, .wp-block-separator) { border-color: var(--dk-line) !important; background: var(--dk-line) !important; }
/* thisai-pe-css */
.thisai-pe{margin:0 0 18px;font-family:'Baloo 2',system-ui,sans-serif;text-align:center}
.tpe-note{margin:0 0 6px;font-size:17px;font-weight:700}
a.tpe-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;max-width:520px;margin:0 auto;padding:8px 22px;border-radius:999px;background:#F4B400;color:#2A1D17 !important;font-size:20px;font-weight:800;text-decoration:none !important}
a.tpe-btn:focus-visible{outline:3px solid #2A1D17;outline-offset:3px}
html.thisai-dark a.tpe-btn:focus-visible{outline-color:#FFF6EA}
/* style */
#menu-main-menu,
        #menu-main-menu-1 {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        #menu-main-menu > .menu-item,
        #menu-main-menu-1 > .menu-item {
            display: flex;
            align-items: center;
            height: auto !important;
        }
        #menu-main-menu > .menu-item > .ct-menu-link,
        #menu-main-menu-1 > .menu-item > .ct-menu-link {
            display: inline-flex !important;
            align-items: center;
            align-self: center !important;
            height: auto !important;
            padding: 6px 14px !important;
            border-radius: 10px !important;
            background: #f4f5f7;
            border: 1px solid #e8e9ec;
            font-weight: 600 !important;
            font-size: 13px !important;
            line-height: normal !important;
            color: #16181d !important;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }
        #menu-main-menu > .menu-item > .ct-menu-link:hover,
        #menu-main-menu-1 > .menu-item > .ct-menu-link:hover {
            background: #fdeceb;
            border-color: #E23744;
            color: #E23744 !important;
        }
        #menu-main-menu > .menu-item.current-menu-item > .ct-menu-link,
        #menu-main-menu-1 > .menu-item.current-menu-item > .ct-menu-link {
            background: #E23744;
            border-color: #E23744;
            color: #ffffff !important;
        }
/* wp-custom-css */
/* =========================================================
   THISAI TV — Additional CSS (consolidated)
   Paste this whole file into:
   Appearance → Customize → Additional CSS
   (replace everything currently there)
   ========================================================= */


/* ---------------------------------------------------------
   1. EPISODE GRID CARDS (wp-block-cover based)
   Real markup confirmed via DevTools:
   <article class="wp-block-post ... category-poongodi ...">
     <div class="wp-block-cover ...">
       <img class="wp-block-cover__image-background">
     </div>
     <div class="wp-block-cover__inner-container">
       <h2><a>Title</a></h2>
       <div><time>date</time></div>
     </div>
   </article>
   --------------------------------------------------------- */

.modern-cards article.wp-block-post {
    position: relative; /* needed for the NEW badge ::after below */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    background: #fff;
}

.modern-cards article.wp-block-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

/* Thumbnail sizing + zoom-on-hover */
.modern-cards .wp-block-cover {
    min-height: 220px !important;
    border-radius: 12px;
    overflow: hidden;
}

.modern-cards .wp-block-cover__background {
    opacity: 0 !important; /* remove default dark tint overlay */
}

.modern-cards .wp-block-cover__image-background {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.4s ease;
}

.modern-cards article.wp-block-post:hover .wp-block-cover__image-background {
    transform: scale(1.06);
}

/* Title + date, below the image */
.modern-cards .wp-block-cover__inner-container {
    position: static !important;
    padding: 14px 16px 16px !important;
    text-align: center;
}

.modern-cards .wp-block-cover__inner-container h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.modern-cards .wp-block-cover__inner-container h2 a {
    color: #1a1a2e !important;
    transition: color 0.2s ease;
}

.modern-cards article.wp-block-post:hover h2 a {
    color: #e63946 !important;
}

.modern-cards .wp-block-cover__inner-container time {
    font-size: 11.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #999;
}

/* "NEW" badge — assign the category "new-episode" to a post to trigger it */
.modern-cards article.wp-block-post.category-new-episode::after {
    content: "NEW";
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e63946;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 20px;
    z-index: 2;
}

/* Mobile: full width single column */
@media (max-width: 689px) {
    .modern-cards .ct-query-template-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .modern-cards article.wp-block-post {
        width: 100% !important;
    }
    .modern-cards {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ---------------------------------------------------------
   2. CATEGORY BADGE PILLS (used on single post pages)
   --------------------------------------------------------- */

.meta-categories a {
    display: inline-block;
    background-color: #e63946;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 9px 20px;
    border-radius: 20px;
    text-decoration: none !important;
    margin: 4px 4px 4px 0;
}

.meta-categories a:hover {
    background-color: #c1121f;
    color: #ffffff !important;
}

.entry-content .meta-categories {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
}


/* ---------------------------------------------------------
   3. VIDEO THUMBNAIL "FRAME" (used inside post content)
   --------------------------------------------------------- */

.video-frame {
    position: relative;
    display: block;
    background: #ffffff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    max-width: 100%;
    margin: 20px auto;
    text-decoration: none;
}

.video-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.video-frame-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    z-index: 2;
    text-transform: none;
}

.video-frame-caption {
    text-align: center;
    background: #f5f5f5;
    padding: 14px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 15px;
    color: #333333;
}


/* ---------------------------------------------------------
   4. SEO CONTENT BLOCK (shortcode/pattern used at bottom of posts)
   --------------------------------------------------------- */

.seo-content-block {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 10px;
}

.seo-content-block h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
    line-height: 1.3;
}

.seo-content-block > p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 24px;
}

.seo-info-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 700px) {
    .seo-info-boxes {
        grid-template-columns: 1fr;
    }
}

.seo-info-box {
    background: #fdf3e7;
    border: 1px solid #f0dfc4;
    border-radius: 12px;
    padding: 22px;
}

.seo-info-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.seo-info-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
}

.seo-info-box ul {
    margin: 0;
    padding-left: 18px;
}

.seo-info-box li {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}

.seo-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.seo-quick-links a.seo-pill-button {
    display: inline-block;
    background: #ffffff;
    border: 1.5px solid #ddd;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.seo-quick-links a.seo-pill-button:hover {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #ffffff !important;
}

.seo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.seo-tags .seo-tag-pill {
    display: inline-block;
    background: #f5f5f5;
    color: #666;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
}

.seo-footer-note {
    font-size: 13.5px;
    color: #888;
    font-style: italic;
    line-height: 1.6;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a2e;
}


/* ---------------------------------------------------------
   5. HERO SLIDER
   --------------------------------------------------------- */

.tv-hero-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    height: 500px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tv-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.tv-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    text-decoration: none !important;
    display: block;
}

.tv-hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.tv-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tv-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

.tv-hero-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
}

.tv-hero-caption h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.tv-hero-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tv-hero-prev { left: 20px; }
.tv-hero-next { right: 20px; }

.tv-hero-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.tv-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease;
}

.tv-hero-dot.active {
    background: #ffffff;
}

@media (max-width: 700px) {
    .tv-hero-slider {
        height: 220px !important;
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 10px !important;
    }
    .tv-hero-caption {
        bottom: 16px;
        left: 16px;
        right: 16px;
    }
    .tv-hero-caption h2 {
        font-size: 15px;
    }
    .tv-hero-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .tv-hero-prev { left: 10px; }
    .tv-hero-next { right: 10px; }
    .tv-hero-dots { bottom: 8px; }
    .tv-hero-dot { width: 7px; height: 7px; }
}

/* Hero title/meta text-shadow (no background box) */
.hero-section .page-title {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 16px rgba(0, 0, 0, 0.7);
}

.hero-section .page-description p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.hero-section .entry-meta,
.hero-section .entry-meta a,
.hero-section .entry-meta span,
.hero-section .entry-meta time {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

@media (max-width: 700px) {
    .hero-section .page-title {
        font-size: 20px !important;
    }
}


/* ---------------------------------------------------------
   6. WPFORMS — dark "request" form styling
   --------------------------------------------------------- */

.wpforms-container.wpforms-render-modern {
    background: #14141f !important;
    border-radius: 16px !important;
    padding: 32px 28px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
}

.wpforms-container.wpforms-render-modern::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #ff4d6d, #7b2ff7) !important;
}

.wpforms-container.wpforms-render-modern .wpforms-field-label,
.wpforms-container.wpforms-render-modern legend.wpforms-field-label {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.wpforms-container.wpforms-render-modern .wpforms-field-sublabel {
    color: #cfcfcf !important;
}

.wpforms-container.wpforms-render-modern .wpforms-field {
    margin-bottom: 20px !important;
}

.wpforms-container.wpforms-render-modern input[type="text"],
.wpforms-container.wpforms-render-modern input[type="email"],
.wpforms-container.wpforms-render-modern select,
.wpforms-container.wpforms-render-modern textarea {
    background: #f2f2f2 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    width: 100% !important;
}

.wpforms-container.wpforms-render-modern textarea {
    min-height: 90px !important;
}

.wpforms-container.wpforms-render-modern .wpforms-submit-container {
    margin-top: 10px !important;
}

.wpforms-container.wpforms-render-modern .wpforms-submit {
    background: linear-gradient(90deg, #ff4d6d, #7b2ff7) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 14px 0 !important;
    width: 100% !important;
    cursor: pointer !important;
}

.request-intro-box {
    background: #cfeaf5 !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    text-align: center !important;
    color: #1a1a2e !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   7. EMOJI REACTIONS
   --------------------------------------------------------- */

.tv-reactions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 30px auto !important;
    width: 100% !important;
    max-width: 900px !important;
    text-align: center !important;
}

.tv-reaction-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 50px !important;
    padding: 12px 22px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.tv-reaction-btn:hover {
    transform: translateY(-4px) scale(1.06) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16) !important;
    background: #f8f8f8 !important;
}

.tv-reaction-btn.tv-pop {
    animation: tvPop 0.3s ease !important;
}

@keyframes tvPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.tv-reaction-btn.tv-clicked {
    background: #fff0f3 !important;
    border-color: #ff9ab0 !important;
}

.tv-reaction-emoji {
    font-size: 26px !important;
    line-height: 1 !important;
}

.tv-reaction-count {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #666666 !important;
    background: #f0f0f0 !important;
    border-radius: 20px !important;
    padding: 4px 11px !important;
    min-width: 16px !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

@media (max-width: 700px) {
    .tv-reaction-btn { font-size: 20px !important; padding: 9px 16px !important; }
    .tv-reaction-emoji { font-size: 20px !important; }
}


/* ---------------------------------------------------------
   8. PAGINATION
   --------------------------------------------------------- */

.ct-pagination,
.pagination,
nav.navigation.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
}

@media (max-width: 700px) {
    .ct-pagination,
    .pagination,
    nav.navigation.pagination {
        gap: 4px !important;
    }
    .ct-pagination a,
    .ct-pagination span,
    .pagination a,
    .pagination span {
        font-size: 13px !important;
        padding: 6px 10px !important;
        min-width: 32px !important;
    }
}

/* Force numbered pagination on mobile, overriding Blocksy's ct-hidden-sm */
@media (max-width: 700px) {
    .ct-pagination .ct-hidden-sm {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    .ct-pagination .page-numbers {
        font-size: 13px !important;
        padding: 6px 10px !important;
        min-width: 30px !important;
        text-align: center !important;
    }
}


/* ---------------------------------------------------------
   9. TV-PREFIXED SECTION THEME (festival page, wishes wall, etc.)
   TFL-COMPACT-FORMS v1
   --------------------------------------------------------- */

#tv .tv-title { color: #FFD37A; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
#tv .tv-h2, #tv .tv-h3 { color: #16202B; }
#tv .tv-sec-slider .tv-h2 { color: #FFFFFF; }

#tv .tv-part,
#tv .tv-wishes { padding-block: clamp(14px, 3vw, 20px) !important; }
#tv .tv-sechead { margin-bottom: 10px !important; }
#tv .tv-part-grid,
#tv .tv-wish-wall { gap: 10px !important; }

#tv .tv-form {
    padding: 12px 12px 14px !important;
    border-radius: 12px !important;
}
#tv .tv-form-t { font-size: 15px !important; margin-bottom: 4px !important; }
#tv .tv-form-note { font-size: 12px !important; margin-bottom: 8px !important; }
#tv .tv-f { margin-bottom: 8px !important; }
#tv .tv-f > span { font-size: 11.5px !important; margin-bottom: 3px !important; }

#tv .tv-f input[type=text],
#tv .tv-f input[type=email],
#tv .tv-f select,
#tv .tv-f textarea {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
}

/* theme forces every textarea to a fixed 170px via --theme-form-field-height; override explicitly */
#tv .tv-f textarea { height: 64px !important; min-height: 56px !important; }
#tv .tv-f input[type=file] { padding: 9px !important; font-size: 12.5px !important; }
#tv .tv-f-row { gap: 8px !important; }
#tv .tv-form-go { min-height: 40px !important; font-size: 14px !important; margin-top: 2px !important; }
#tv .tv-form-fine { font-size: 10.5px !important; margin-top: 6px !important; }
#tv .tv-form-msg { margin-top: 6px !important; }

#tv .tv-wish-form { max-width: 480px !important; margin: 0 auto 14px !important; }
#tv .tv-wish { padding: 11px 13px 10px !important; }
#tv .tv-wish-msg { font-size: 13.5px !important; }
#tv .tv-wish-name { margin-top: 6px !important; font-size: 12px !important; }

/* ---------------------------------------------------------
   1. EPISODE GRID CARDS (wp-block-cover based)
   Real wrapper confirmed via curl: .ct-query-template-grid
   --------------------------------------------------------- */

.ct-query-template-grid article.wp-block-post {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    background: #fff;
}

.ct-query-template-grid article.wp-block-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.ct-query-template-grid .wp-block-cover {
    min-height: 220px !important;
    border-radius: 12px;
    overflow: hidden;
}

.ct-query-template-grid .wp-block-cover__background {
    opacity: 0 !important;
}

.ct-query-template-grid .wp-block-cover__image-background {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.4s ease;
}

.ct-query-template-grid article.wp-block-post:hover .wp-block-cover__image-background {
    transform: scale(1.06);
}

.ct-query-template-grid .wp-block-cover__inner-container {
    position: static !important;
    padding: 14px 16px 16px !important;
    text-align: center;
}

.ct-query-template-grid .wp-block-cover__inner-container h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.ct-query-template-grid .wp-block-cover__inner-container h2 a {
    color: #1a1a2e !important;
    transition: color 0.2s ease;
}

.ct-query-template-grid article.wp-block-post:hover h2 a {
    color: #e63946 !important;
}

.ct-query-template-grid .wp-block-cover__inner-container time {
    font-size: 11.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #999;
}

.ct-query-template-grid article.wp-block-post.category-new-episode::after {
    content: "NEW";
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e63946;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 20px;
    z-index: 2;
}

@media (max-width: 689px) {
    .ct-query-template-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .ct-query-template-grid article.wp-block-post {
        width: 100% !important;
    }
}