/* ChannelNews TV layout (front-page) */
.cn-tv{
  min-height: 100vh;
  /* Reference-style: edge-to-edge broadcast frame */
  padding: 0;
  box-sizing: border-box;
}

.cn-tv__grid{
  max-width: 1920px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  outline: 2px solid #000;
}

/* When logged in, WP admin bar adds a top offset. Reduce the 100vh frame so
   the bottom time + tickers remain visible without scrolling. */
body.admin-bar .cn-tv__grid{
  height: calc(100vh - 32px);
}
@media (max-width: 782px){
  body.admin-bar .cn-tv__grid{ height: calc(100vh - 46px); }
}

.cn-tv__main{
  position: relative;
  display: grid;
  /* 2-row broadcast grid: main stage + bottom tickers */
  grid-template-columns: 1fr 420px;
  /* Allow first row to shrink so the underbar is always visible */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.cn-left{
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-height: 0;
  height: 100%;
  background: #000;
}

.cn-stage{
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  border: 0;
  box-shadow: none;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cn-logo-box{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  max-width: 320px;
  border-radius: 0;
  background: transparent;
  border: 0;
  padding: 0;
  backdrop-filter: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.cn-logo-box img{
  display:block;
  max-width: 220px;
  max-height: 52px;
  width: auto;
  height: auto;
}

.cn-logo-text{ color: #fff; }
.cn-logo-title{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.cn-logo-tagline{
  margin-top: 4px;
  font-size: 12px;
  opacity: .85;
  line-height: 1.25;
}

.cn-video{
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: stretch;
  background: #000;
  position: relative;
}

.cn-video iframe,
.cn-video video{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

/* Disable hover UI overlays on embedded players (YouTube Watch later/Share, branding) */
.cn-video iframe{
  pointer-events: none;
}

/* YouTube API player container (fills the stage) */
.cn-yt-wrap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#cn-yt-player{
  width: 100%;
  height: 100%;
}
.cn-yt-wrap iframe{
  width: 100% !important;
  height: 100% !important;
}

/* Note: YouTube branding/overlays cannot be completely removed.
   We disable pointer events to prevent user interaction and keep a TV-like stage. */


.cn-video__empty{
  padding: 16px;
  max-width: 520px;
  text-align: center;
  opacity: .85;
}

.cn-side{
  grid-column: 2;
  grid-row: 1;
  /* Reference: single broadcast side panel */
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  /* Background is configurable from Theme Options → News */
  background: linear-gradient(
    var(--cn-news-panel-bg-dir, 180deg),
    var(--cn-news-panel-bg-start, rgba(10,40,110,.98)),
    var(--cn-news-panel-bg-end, rgba(6,18,52,.98))
  );
  border-left: 2px solid rgba(0,0,0,.35);
  min-height: 0;
  overflow: hidden;
}

/* Solid fallback when selected */
.cn-side[data-cn-news-bg="solid"]{
  background: var(--cn-news-panel-bg-color, rgba(10,40,110,.98));
}

/* Transparent: use the Design background behind the layout */
.cn-side[data-cn-news-bg="transparent"]{
  background: transparent;
}

/* Remove generic box titles on the broadcast sidebar (reference has none) */
.cn-side .cn-box-title{ display:none; }

.cn-side__box{
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 18px 18px;
  overflow: hidden;
  backdrop-filter: none;
  min-height: 0;
}

/* Section separators like the reference column */
.cn-side__box{ border-bottom: 1px solid rgba(255,255,255,0.10); }
.cn-side__box:last-child{ border-bottom: 0; }

/* Weather header style (reference-like) */
.cn-side__weather{
  padding: 0;
}
.cn-side__weather .cn-weather{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 18px 12px;
  color: #fff;
}

/* ICON CITY TEMP on one line */
.cn-side__weather .cn-weather__icon{
  font-size: 26px;
  line-height: 1;
}
.cn-side__weather .cn-weather__body{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.cn-side__weather .cn-weather__city{
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-side__weather .cn-weather__temps{
  font-size: 16px;
  font-weight: 900;
  opacity: .95;
  white-space: nowrap;
}
.cn-side__weather::before{
  content: 'WEATHER TODAY.';
  display: block;
  padding: 14px 18px 8px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  font-size: 18px;
}
.cn-side__weather::after{
  content: '';
  display:block;
  height: 6px;
  background: #ff9b1a;
}

.cn-weather{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.cn-weather__icon{
  font-size: 28px;
  line-height: 1;
}

.cn-weather__city{
  font-weight: 800;
}

.cn-weather__temps{
  opacity: .9;
  font-size: 13px;
}

.cn-weather__day{
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .95;
}
.cn-weather__sep{
  opacity: .8;
}

.cn-news-list{
  display: grid;
  gap: 0;
  min-height: 0;
}

.cn-news-empty{
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  border-radius: 14px;
  margin: 18px;
  border: 1px dashed rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.18);
  color: var(--cn-news-text, #fff);
}
.cn-news-empty__icon{
  font-size: 34px;
  line-height: 1;
  opacity: .95;
}
.cn-news-empty__title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
}
.cn-news-empty__sub{
  font-size: 13px;
  opacity: .85;
}

/* News box should be edge-to-edge inside the sidebar */
.cn-side__news{ padding: 0; }

.cn-news-item{
  /* Base: make items flat (we'll feature the first one) */
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.cn-news-item:hover{
  background: transparent;
}

.cn-news-thumb{
  width: 140px;
  height: 92px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.25);
}

 .cn-news-title{
  color: var(--cn-news-text, #fff);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

.cn-news-sub{
  margin-top: 4px;
  font-size: 13px;
  opacity: .9;
  line-height: 1.25;
}

.cn-news-excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Reference-like featured story: show a single large card.
   If JS rotation is enabled, we swap the active item with fade. */
.cn-side__news .cn-news-item{ display:none; }
.cn-side__news .cn-news-item:first-child{ display:grid; }
.cn-side__news .cn-news-item:first-child{
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px 18px 14px;
}
.cn-side__news .cn-news-item:first-child .cn-news-thumb{
  width: 100%;
  height: 240px;
  border-radius: 14px;
}
.cn-side__news .cn-news-item:first-child .cn-news-title{ font-size: 26px; line-height: 1.12; }
.cn-side__news .cn-news-item:first-child .cn-news-sub{ font-size: 15px; }
.cn-side__news .cn-news-item:first-child .cn-news-sub::after{
  content: '  Read More >>';
  display: inline;
  font-weight: 900;
  opacity: 1;
}

/* News rotation: when enabled, stack items and fade between them */
.cn-side__news.cn-news-rotating .cn-news-list{
  position: relative;
  min-height: 420px;
}
.cn-side__news.cn-news-rotating .cn-news-item{
  display: grid;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.cn-side__news.cn-news-rotating .cn-news-item.is-active{
  opacity: 1;
  pointer-events: auto;
}
.cn-side__news.cn-news-rotating .cn-news-item{
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px 18px 14px;
}
.cn-side__news.cn-news-rotating .cn-news-item .cn-news-thumb{
  width: 100%;
  height: 240px;
  border-radius: 14px;
}
.cn-side__news.cn-news-rotating .cn-news-item .cn-news-title{ font-size: 26px; line-height: 1.12; }
.cn-side__news.cn-news-rotating .cn-news-item .cn-news-sub{ font-size: 15px; }
.cn-side__news.cn-news-rotating .cn-news-item .cn-news-sub::after{
  content: '  Read More >>';
  display: inline;
  font-weight: 900;
  opacity: 1;
}

.cn-news-time{ margin-right: 8px; }



/* Bottom time + tickers live in the grid (not overlay) */
.cn-underbar{
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 5;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 0;
  align-items: stretch;
}

.cn-tv__bottom{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items: stretch;
}

.cn-time{
  border-radius: 0;
  background: rgba(0,0,0,0.70);
  border: 0;
  box-shadow: none;
  padding: 14px 18px;
  display: grid;
  align-content: center;
  gap: 6px;
  color: #fff;
  text-align: left;
}

.cn-date{
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .9;
  text-transform: uppercase;
  font-size: 12px;
}

.cn-clock{
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
}

.cn-tickers{
  width:100%;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
}

.cn-ticker-bar{
  border-radius: 0;
  /* Background is normally set by inline styles from Theme Options; keep it. */
  background: rgba(0,0,0,0.55);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  width: 100%;
  display: grid;
  /* Use content-based label column so it collapses when label is empty */
  grid-template-columns: max-content 1fr;
  align-items: stretch;
  height: 50px;
  min-height: 50px;
}

/* Second bar smaller (reference) */
.cn-ticker-bar[data-cn-ticker-index="1"]{
  height: 34px;
  min-height: 34px;
}

.cn-ticker-breaking{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  background: rgba(0,0,0,0.25);
  border-right: 1px solid rgba(0,0,0,0.28);
}

/* If label is empty, remove the label column (reference-like full text bar). */
.cn-ticker-breaking:empty{ display:none; }

.cn-ticker-track{
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  height: 100%;
}

.cn-ticker-inner{
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  display: inline-flex;
  gap: 28px;
  padding-left: 20px;
  white-space: nowrap;
  will-change: transform;
}

.cn-ticker-text{
  font-weight: 900;
  font-size: 22px;
}

/* Second bar typography smaller */
.cn-ticker-bar[data-cn-ticker-index="1"] .cn-ticker-text{ font-size: 16px; font-weight: 800; }

/* When only one ticker is enabled, make it look like a full-width single strip */
.cn-tickers[data-cn-bars="1"] .cn-ticker-bar{ height: 50px; }
.cn-tickers[data-cn-bars="1"] .cn-ticker-bar .cn-ticker-text{ font-size: 20px; }

@media (max-width: 1200px){
  .cn-tv__main{ grid-template-columns: 1fr 380px; }
  .cn-underbar{ grid-template-columns: 220px 1fr; }
}

@media (max-width: 900px){
  /* keep desktop layout; scaled via JS */
}


/* Banner (Lower Third) */
.cn-banner{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background: var(--cn-banner-bg, rgba(11,15,34,.92));
  color: var(--cn-banner-text, #fff);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 4;
}
.cn-banner--top{ top:14px; bottom:auto; }
.cn-banner__label{
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:12px;
  background: var(--cn-banner-accent, #ff2d2d);
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
}
.cn-banner__title{
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cn-banner__time{
  font-weight:900;
  font-size:12px;
  opacity:.95;
  padding:6px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.10);
  white-space:nowrap;
}

/* 6 preset variations (closer to broadcast lower-thirds) */

/* Style 1: white bar + left accent stripe */
.cn-banner--style1{
  background: rgba(255,255,255,.94);
  color: #0b1022;
  border-radius: 10px;
}
.cn-banner--style1:before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:10px;
  background: var(--cn-banner-accent,#ff2d2d);
  border-radius: 10px 0 0 10px;
}
.cn-banner--style1 .cn-banner__label{ border-radius: 6px; }
.cn-banner--style1 .cn-banner__time{ background: rgba(11,16,34,.10); }

/* Style 2: angled ribbon */
.cn-banner--style2{
  border-radius: 12px;
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
}
.cn-banner--style2 .cn-banner__label{ border-radius: 6px; }

/* Style 3: HD badge + strong label */
.cn-banner--style3{
  background: rgba(255,255,255,.92);
  color: #0b1022;
  border-radius: 10px;
}
.cn-banner--style3:before{
  content:'HD';
  font-weight:900;
  font-style:italic;
  padding:6px 10px;
  border-radius:10px;
  background: rgba(11,16,34,.08);
  color:#0b1022;
}
.cn-banner--style3 .cn-banner__label{ background: var(--cn-banner-accent,#ff2d2d); }
.cn-banner--style3 .cn-banner__time{ background: rgba(11,16,34,.08); }

/* Style 4: square badge block */
.cn-banner--style4{
  border-radius: 10px;
}
.cn-banner--style4 .cn-banner__label{
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Style 5: pill + circular label */
.cn-banner--style5{ border-radius: 999px; }
.cn-banner--style5 .cn-banner__label{
  border-radius: 999px;
  padding: 8px 12px;
}
.cn-banner--style5 .cn-banner__time{ border-radius: 999px; }

/* Style 6: minimal glass */
.cn-banner--style6{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border-radius: 12px;
}