/****ROOTWORKS*/


/* Prevent any horizontal overflow everywhere 
html, body {
  overflow-x: hidden;
}*/



:root {
  /* ── Layout gaps & ad sizes ───────────────────────────── */
  --side-gap:       80px;
  --ad-width:       160px;
  --inner-gap:      10px;

  /* ── Header, navbar, ticker, carousel ────────────────── */
  --header-height:  90px;
  --navbar-height:  50px;
  --ticker-height:  40px;
  --ticker-padding: 1rem;
  --carousel-height:300px;
  --ad-square-width:300px;

  --banner-ratio:   728/90;
  --square-ratio:   300/250;
  --vertical-ratio: 160/600;

  /* ── YOUR “desktop design” width & zoom factor ───────── */
  --design-width:   1500px;   /* ← change to your mockup width */
  --page-scale:     1;        /* 1 = 100%, >1 = zoom in, <1 = zoom out */

  --bg-color:       #f9f9f9;
  --text-color:     #333;
  --link-color:     #00529B;
  --card-bg:        #fff;
  --card-border:    #ddd;
  --section-bg:     #fff;
  --section-border: #ccc;
  --accent-color:   #c01f2e;

  --pf-side-gap:    calc(var(--side-gap) + var(--ad-width));
  --pf-inner-gap:   var(--inner-gap);
  --pf-card-bg:     var(--card-bg);
  --pf-card-border: var(--card-border);
  --pf-text-color:  var(--text-color);
}
@media (max-width: 450px) {
  /* mobile mockup width (e.g. your Figma artboard) */
  :root {
    --design-width: 360px;  /* ← your mobile design width */
  --page-scale:     1; 
  }
}
/* —— TABLET —— */
@media (min-width: 451px) and (max-width: 550px) {
  :root { --design-width: 500px; 
    --page-scale:     1; 
  }
}
@media (min-width: 550px) and (max-width: 650px) {
  :root { --design-width: 600px; 
  --page-scale:     1; 
  
  }
}
@media (min-width: 651px) and (max-width: 768px) {
  :root { --design-width: 760px; 
  --page-scale:     1; 
  
  }
}
@media (min-width: 769px) and (max-width: 850px) {
  :root { --design-width: 1500px; 
  --page-scale:     1; 
  }
}
@media (min-width: 851px) and (max-width: 1024px) {
  :root { --design-width: 1500px; 
    --page-scale:     1; 
  }
}
/* Allow vertical scrolling again */
html, body {
  width: 100%;
  margin: 0;
  /* only hide horizontal overflow to prevent x-scrollbar */
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;       /* don’t pin them at 100% height */
}

/* Scale & center your wrapper exactly as before */
#zoom-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--design-width);
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--page-scale));
  box-sizing: border-box;
}

@media (max-width: var(--design-width)) {
  #zoom-wrapper {
    width:            100vw;
    transform-origin: top left;
    transform:        none;
  }
}

/* ── Responsive font sizing and box-sizing ───────────── */
html {
  font-size: clamp(14px, 1.2vw, 18px);
}


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* allow sticky to escape */
.wrapper,
.nav-scroller,    /* or whichever ancestor is clippping */
#main-content {
  overflow: visible !important;
}


/*
body {
  font-family:
    "Noto Sans Telugu",
    "Noto Sans", Arial,
    sans-serif;
  background: #f9f9f9;
  color: #333;
  line-height: 1.6;
  hyphens: none;
}*/

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ─── Fixed Side Ads (Desktop Only) ───────────────────────────────── */
.ad-vertical {
  position: fixed;
  top: 0;
  width: var(--ad-width);
  aspect-ratio: var(--vertical-ratio);
  background: #eaeaea;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: #666;
  z-index: 2;
}
.ad-vertical.left  { left: var(--side-gap); }
.ad-vertical.right { right: var(--side-gap); }

/* ─── Header ─────────────────────────────────────────────────────── */
.header-top {
  margin: 0 calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 20px;

  z-index: 1;
}
.header-top .logo img {
  width: 100%;
  height: auto;
}
.header-top .banner-ad {
  flex: 1 1 auto;
  background: #ececec;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: #666;
}


.wrapper,
.content-section {
  margin-left:  calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  margin-right: calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  transition: margin-top .2s ease;
}
.wrapper > * + * {
  margin-top: 20px;
}


.nav-item a,
.custom-nav-item a {
  transition: 
    box-shadow 0.2s ease,
    transform    0.2s ease;
}

.nav-item a:hover,
.custom-nav-item a:hover,
.nav-item.active > a {
  /* simulate a button lifting up */
  box-shadow:
    inset  0 2px 4px rgba(255,255,255,0.4),  /* light inner highlight */
    inset  0 -2px 4px rgba(0,0,0,0.1),        /* subtle inner shadow */
      0 4px 8px rgba(0,0,0,0.2),              /* main drop shadow */
      0 2px 4px rgba(0,0,0,0.1);              /* softer secondary shadow */
  transform: translateY(-2px);
}

/* Desktop styling */
.custom-navbar {


  margin: 0 calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  height: 0;
  background: linear-gradient(90deg, #00529B 0%, #003F7D 100%);
  z-index: 10000;
  overflow: visible;
}
.custom-nav-list {
  display: flex;
  gap: 4px;
  padding: 0 1rem;
  margin: 0;
  height: 100%;
  align-items: center;
  list-style: none;
}
.custom-nav-item {
  position: relative;
}
.custom-nav-item a {
  display: block;
  padding: 0 0.75rem;
  line-height: var(--navbar-height);
  color: #FFD400;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.custom-nav-item a:hover,
.custom-nav-item.active > a {
  background: linear-gradient(90deg, #FF9500, #E67C00);
  color: #003F7D;
  transform: translateY(-2px);
}

/* Dropdown arrow */
.has-custom-dropdown > a::after {
  content: "\25BE";
  margin-left: 0.3em;
  font-size: 0.7em;
  vertical-align: middle;
}

/* Desktop dropdown */
.custom-dropdown {
  position: absolute;
  top: calc(var(--navbar-height) + 4px);
  left: 0;
  min-width: 160px;
  background: #003F7D;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 10001;
}
.has-custom-dropdown:hover .custom-dropdown,
.has-custom-dropdown:focus-within .custom-dropdown,
.has-custom-dropdown.open .custom-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.custom-dropdown li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #FFD400;
  transition: background 0.2s, color 0.2s;
}
/* Desktop submenu orange hover */
.custom-dropdown li a:hover,
.custom-dropdown li a:focus {
  background: linear-gradient(90deg, #FF9500, #E67C00);
  color: #003F7D;
}

/*                       3D Lift Effect on Navbar Items                 */

.nav-item a,
.custom-nav-item a {
  transition:
    box-shadow 0.2s ease,
    transform    0.2s ease;
}
.nav-item a:hover,
.custom-nav-item a:hover,
.nav-item.active > a {
  /* simulate a button lifting up */
  box-shadow:
    inset  0 2px 4px rgba(255,255,255,0.4),  /* light inner highlight */
    inset  0 -2px 4px rgba(0,0,0,0.1),        /* subtle inner shadow */
      0 4px 8px rgba(0,0,0,0.2),              /* main drop shadow */
      0 2px 4px rgba(0,0,0,0.1);              /* softer secondary shadow */
  transform: translateY(-2px);
}



.custom-navbar {


  height: var(--navbar-height);
  background: linear-gradient(90deg, #00529B 0%, #003F7D 100%);
  z-index: 10000;
  overflow: visible;
}
.custom-nav-list {
  display: flex;
  gap: 4px;
  padding: 0 1rem;
  margin: 0;
  height: 100%;
  align-items: center;
  list-style: none;
}
.custom-nav-item {
  position: relative;
}
.custom-nav-item a {
  display: block;
  padding: 0 0.75rem;
  line-height: var(--navbar-height);
  color: #FFD400;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.custom-nav-item a:hover,
.custom-nav-item.active > a {
  background: linear-gradient(90deg, #FF9500, #E67C00);
  color: #003F7D;
  transform: translateY(-2px);
}

/* Dropdown arrow */
.has-custom-dropdown > a::after {
  content: "\25BE";
  margin-left: 0.3em;
  font-size: 0.7em;
  vertical-align: middle;
}

/* Desktop dropdown */
.custom-dropdown {
  position: absolute;
  top: calc(var(--navbar-height) + 4px);
  left: 0;
  min-width: 160px;
  background: #003F7D;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 10001;
}
.has-custom-dropdown:hover .custom-dropdown,
.has-custom-dropdown:focus-within .custom-dropdown,
.has-custom-dropdown.open .custom-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.custom-dropdown li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #FFD400;
  transition: background 0.2s, color 0.2s;
}
/* Desktop submenu orange hover */
.custom-dropdown li a:hover,
.custom-dropdown li a:focus {
  background: linear-gradient(90deg, #FF9500, #E67C00);
  color: #003F7D;
}
.custom-navbar {
  position: sticky;
  top: var(--header-height) !important;  /* locks it just below the 90px header */
  z-index: 3000;

}
nav.custom-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
.wrapper,
.nav-scroller,
#main-content {
  overflow: visible !important;
}



/****BREAKINGTICKER*/


#ticker {
  overflow: hidden;
}


.breaking {
  color: #fff;
  overflow: hidden;
  font-weight: bold;
  position: sticky;
  top: var(--navbar-height);
  height: var(--ticker-height);
  margin: 0 calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  background: #c01f2e;
  box-sizing: border-box;
  padding: 0 var(--ticker-padding);
  display: flex;
  align-items: center;
  z-index: 3;
}

/* Scroll track (two back-to-back copies for seamless loop) */
.breaking .scroll-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: scroll linear infinite;
  /* no hard-coded duration here! JS will set it */
}

.breaking .scroll-text {
  white-space: nowrap;
  animation: scroll 15s linear infinite;
  flex-shrink: 0;
  display: inline-block;
  padding: 0 1rem;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  animation: none !important;
}

/* Keyframes: slide left by half the overall width */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/****CAROUSEL*/
.row {
  display: flex;
  flex-wrap: wrap;
}
.carousel {
  flex: 2;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  height: var(--carousel-height);
}
.carousel .slides {
  display: flex;
  transition: transform .5s ease;
}
.carousel .slide {
  min-width: 100%;
  position: relative;
}
/*tempp
.carousel img {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}*/


.carousel .controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}
.carousel .controls button {
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 3px;
}
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  background: #ddd;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s;
}
.carousel-dots button.active {
  background: #c01f2e;
}

/* ─── 3D Orange Embossed Buttons for Image Carousel ─────────────── */
.carousel .controls button {
  /* size & positioning */
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* colors */
  background: #ff8c00;  /* same vivid orange */
  color: #fff;          /* white arrow */

  /* no inner border */
  border: none;
  border-radius: 50%;

  /* embossed shadows */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.2),
     0 4px 6px rgba(0,0,0,0.2),
     0 2px 4px rgba(0,0,0,0.1);

  /* arrow font-size */
  font-size: 1.2rem;
  cursor: pointer;
  transition: box-shadow .2s, background .2s;
}

/* hover state */
.carousel .controls button:hover {
  background: #ff9c2c;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.3),
     0 2px 4px rgba(0,0,0,0.3),
     0 1px 2px rgba(0,0,0,0.2);
}

/* ensure the arrows remain centered */
.carousel .controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: none; /* allow clicks only on buttons */
}
.carousel .controls button {
  pointer-events: auto;
}



/*       3D Orange Embossed Buttons for Image Carousel Controls         */

.carousel .controls button {
  /* size & positioning */
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* colors */
  background: #ff8c00;  /* same vivid orange */
  color: #fff;          /* white arrow */
  /* no inner border */
  border: none;
  border-radius: 50%;
  /* embossed shadows */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.2),
     0 4px 6px rgba(0,0,0,0.2),
     0 2px 4px rgba(0,0,0,0.1);
  /* arrow font-size */
  font-size: 1.2rem;
  cursor: pointer;
  transition: box-shadow .2s, background .2s;
}
.carousel .controls button:hover {
  background: #ff9c2c;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.3),
     0 2px 4px rgba(0,0,0,0.3),
     0 1px 2px rgba(0,0,0,0.2);
}
.carousel .controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: none; /* allow clicks only on buttons */
}
.carousel .controls button {
  pointer-events: auto;
}



.ad-square {
  width: var(--ad-square-width);
  height: var(--carousel-height);
  background: #ececec;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--inner-gap);
  font-size: .9rem;
  color: #666;
  flex-shrink: 0;
}



.carousel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
} 

/****NEWSSECTION*/

#news-section {
  display: grid;
  grid-template-columns:
    minmax(0, calc(100% - var(--ad-square-width) - var(--inner-gap)))
    var(--ad-square-width);
  column-gap: var(--inner-gap);
  row-gap: var(--inner-gap);
}



.news-mobile-ad {
  display: none;
}

#news-section .news-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--inner-gap);
  grid-column: 1 / 2;
}
.news-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  transition: box-shadow .2s;
}
.news-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.news-card img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  margin: 8px;
  flex-shrink: 0;
  display: block;
}
.news-card .text {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-card .text h4 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: bold;
  color: #003366;
}
.news-card .text p {
  margin: 0;
  font-size: .85rem;
  color: #555;
}


.news-card img {
  float: left;
  object-fit: cover;
  border-radius: 4px;
}
.news-card .text {
  padding: 8px 0 !important;
}
.news-card .text h4 {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
    font-weight: 600 !important;
}
.news-card .text p {
  display: none !important;
}





.news-card { height: calc(75px + 16px) !important; }






/* clamp the card title to 3 lines */



.news-card .text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  height: 100%;
  padding: 12px 16px;
}

.news-card .text h4 {
  display: -webkit-box;            /* enable the WebKit box model */
  -webkit-box-orient: vertical;    /* stack children vertically */
  -webkit-line-clamp: 3;           /* ← limit to 3 lines */
  overflow: hidden;                /* hide the rest */
  text-overflow: ellipsis;         /* show “…” at the end */
}


.news-card .text h4 {
  line-height: 1.7 !important;
}



.news-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  transition: box-shadow .2s;
}
.news-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.news-card img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  margin: 8px;
  flex-shrink: 0;
}
.news-card .text {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-card .text h4 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: bold;
  color: #003366;
}
.news-card .text p {
  margin: 0;
  font-size: .85rem;
  color: #555;
}



.news-card img {
  float: left;
  object-fit: cover;
  border-radius: 4px;
}
.news-card .text {
  padding: 8px 0 !important;
}
.news-card .text h4 {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
    font-weight: 600 !important;
}
.news-card .text p {
  display: none !important;
}

.news-card { height: calc(75px + 16px) !important; }




.news-card .text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  height: 100%;
  padding: 12px 16px;
}

.news-card .text h4 {
  display: -webkit-box;            /* enable the WebKit box model */
  -webkit-box-orient: vertical;    /* stack children vertically */
  -webkit-line-clamp: 3;           /* ← limit to 3 lines */
  overflow: hidden;                /* hide the rest */
  text-overflow: ellipsis;         /* show “…” at the end */
}


.news-card .text h4 {
  line-height: 1.7 !important;
}






#news-section .news-list {
  grid-column: 2 / 3;
  margin-top: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: hidden;
}

.news-list__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: bold;
  color: #003366;
}
.news-list__items {
  list-style: disc;
  padding-left: 1.2em;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.news-list__items li {
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}
.news-list__items li:last-child {
  border-bottom: none;
}
.news-list__items a {
  font-size: .9rem;
  color: #333;
}
.news-list__items a:hover {
  color: #c01f2e;
}

.news-list__items li a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}







/****SPOTLIGHT*/


#spotlight-section {
  padding: 20px 0;
  position: relative;
}
#spotlight-section .spotlight-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#spotlight-section .spotlight-header h2 {
  font-size: 1.5rem;
  color: #c0913d;
  margin: 0;
}
#spotlight-section .spotlight-subtitle {
  font-size: 1rem;
  color: #555;
}
#spotlight-section .spotlight-more {
  margin-left: auto;
  font-size: .9rem;
  color: #c0913d;
  font-weight: bold;
}
#spotlight-section .spotlight-cards {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
}
#spotlight-section .spotlight-cards::-webkit-scrollbar {
  height: 6px;
}
#spotlight-section .spotlight-cards::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
#spotlight-section .spotlight-card {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s;
  background: #fff;
}
#spotlight-section .spotlight-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#spotlight-section .spotlight-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
#spotlight-section .spotlight-card h3 {
  margin: 12px;
  font-size: .9rem;
  color: #333;
  line-height: 1.3;
}







/****CATEGORY*/


#category-sections {
  padding: 40px 0;
  min-height: 450px;
}
#category-sections .category-row {
  display: flex;
  gap: var(--inner-gap);
}
#category-sections .category-board {
  flex: 1;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 350px;
  overflow: hidden;
}
#category-sections .category-board .cat-header {
  background: #f7e;
  padding: 8px 12px;
  font-weight: bold;
  font-size: 1rem;
}
#category-sections .category-board .cat-list {
  padding: 12px;
  flex: 1;
  overflow-y: auto;
}
#category-sections .category-board .cat-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
#category-sections .category-board .cat-list li:last-child {
  margin-bottom: 0;
}
#category-sections .category-board .cat-list img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 3px;
}
#category-sections .category-board .cat-list a {
  font-size: .9rem;
  color: #333;
  line-height: 1.2;
}



/* 1) Let the board auto-size to its content */
#category-sections .category-board {
  height: auto !important;
  max-height: none !important;
}

/* 2) Make the cards container flex-grow so it fills available space,
      but still scroll if you ever push past the viewport */
#category-sections .category-board {
  display: flex;
  flex-direction: column;
}
#category-sections .category-cards {
  flex: 1 1 auto;
  overflow-y: auto;
}






/****PREFOOTER*/

#pre-footer-news.wrapper {
  margin-left:  calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  margin-right: calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  margin-bottom: 40px;
}
#pre-footer-news .pre-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--inner-gap);
}
#pre-footer-news .news-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  transition: box-shadow .2s;
}
#pre-footer-news .news-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#pre-footer-news .news-card img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  margin: 8px;
  flex-shrink: 0;
}
#pre-footer-news .news-card .text {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#pre-footer-news .news-card .text h4 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: bold;
  color: #003366;
}
#pre-footer-news .news-card .text p {
  margin: 0;
  font-size: .85rem;
  color: #555;
}

.pre-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--inner-gap);
}




/****FOOTER*/

#footer {
  width: 100%;
  background: #222;
  color: #eee;
  font-size: 0.9rem;
}
#footer .footer-content {
  display: flex;
  align-items: flex-start;
  gap: var(--inner-gap);
  padding: 40px 0;
}
#footer .footer-content > * + * {
  margin-top: 0 !important;
}
#footer .footer-column {
  flex: 1 1 200px;
}
#footer .footer-column h4 {
  margin: 0 0 12px !important;
  line-height: 1.2;
}


#footer .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-column ul li {
  margin-bottom: 8px;
}
#footer a {
  color: #eee;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}


#footer .footer-column.social ul {
  display: block;
}

#footer .footer-column.social ul li {
  margin-bottom: 8px;
}

#footer .footer-column.social ul li:last-child {
  margin-bottom: 0;
}

.footer-divider {
  border: none;
  border-top: 1px solid #444;
  margin: 0;
  padding: 0;
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}











@media (max-width: 768px) {

 /****ROOTWORKS*/ 
  body { font-size: 1.1rem; }
  .ad-vertical { display: none; }

  .header-top {
    flex-direction: column;
    padding: 0px ;
    margin: 0;
  }
  .header-top .logo {
    width: 150px;
    margin: 0 auto;
	margin-bottom : -24px ;
    flex: none ;      /* cancel the desktop flex rule */
    width: 100% ;     /* full-width on mobile */
	    margin-bottom: 0 ;	

	
  }
  .header-top .banner-ad {
    width: 100%;
    aspect-ratio: 728/90;
    /*margin-top: var(--inner-gap);*/
  }
  /* remove any bottom padding on the header container */

  /* kill any extra margin under the logo */
  /* lift the banner right up under the logo */
  .header-top .banner-ad,
  .banner-ad-mobile {
    position: relative ;
    /*top: -80px !important; */   /* adjust this value until it perfectly meets your logo’s bottom edge */
    margin-top: 0 ;
  }
  


  .wrapper {
    margin: var(--inner-gap);
  }

  .row {
    flex-direction: column;
  }
  .carousel {
    height: 180px;
  }
  .carousel .slide {
    height: 180px;
  }
  
  
  
  /* 1) Reset gutters & hide desktop side-ads */
  body,
  .wrapper,
  .content-section,
  nav,
  section,
  #ticker,
  #main-content,
  #footer {
    margin: 0 !important;
    padding: 0 !important;
  }
  .ad-vertical { display: none !important; }



  .header-top {
    flex-direction: column;    /* stack logo above banner */
    height: auto ;   /* don’t constrain to a fixed --header-height */
    align-items: center;       /* center logo & banner horizontally */
    padding-bottom: 0;         /* kill any extra bottom padding */
  }

  /* 2) Reset banner positioning and respect its ratio */
  .header-top .banner-ad {
    position: static ;        /* remove any relative/top overrides */
    width: 100% ;             /* full-width */
    aspect-ratio: var(--banner-ratio) ; /* keep 728:90 aspect */
    height: auto ;            /* height driven by aspect-ratio */
    
  }

  /* 2) Header: logo full-width, banner ratio-driven */
  .header-top {
    display: flex ;
    flex-direction: column ;
    align-items: center ;
   
    height: auto ;
  }

  .header-top .logo img {
    width: 100% ;
    height: auto ;
  }
  .header-top .banner-ad,
  .banner-ad-mobile {
    display: block ;
    width: 100% ;
    height: auto ;
    aspect-ratio: var(--banner-ratio) ;
    position: static ;
    top: auto ;

  }
    /* 5) Hide side-ads on mobile (just in case) */
  .ad-vertical { display: none !important; }  
 


  /* 2) Scroller for horizontal swipe */
  .nav-scroller {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-scroller::-webkit-scrollbar {
    display: none;
  }

  /* 3) Inline-flex list, no wrapping */
  .custom-nav-list {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 var(--inner-gap) !important;
  }
  .custom-nav-item {
    flex: 0 0 auto !important;
  }

  /* 4) Full-width, fixed dropdown */
  .custom-dropdown {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    width: 100vw !important;
    background: #003F7D !important;
    box-sizing: border-box !important;
    display: none !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
    transform: none !important;
  }
  .has-custom-dropdown.open .custom-dropdown {
    display: block ;
    opacity: 1 !important;
  }

  /* 5) Dropdown item styling */
  .custom-dropdown li {
    width: 100% !important;
  }
  .custom-dropdown a {
    display: block ;
    padding: .75rem 1rem !important;
    background: #003F7D !important;
    color: #FFD400 !important;
    transition: background .2s, color .2s;
  }
  .custom-dropdown a:hover,
  .custom-dropdown li.hover > a {
    background: #FF9500 !important;
    color: #003F7D !important;
  }

  body { font-size: 1.1rem; }
  .ad-vertical { display: none; }

  .header-top {
    flex-direction: column;
    padding: 0px ;
    margin: 0;
  }
  .header-top .logo {
    width: 150px;
    margin: 0 auto;
    margin-bottom : -24px ;
    flex: none ;      /* cancel the desktop flex rule */
    width: 100% ;     /* full-width on mobile */
    margin-bottom: 0 ;
  }
  .header-top .banner-ad {
    width: 100%;
    aspect-ratio: 728/90;
    /*margin-top: var(--inner-gap);*/
  }
  /* remove any bottom padding on the header container */
  /* kill any extra margin under the logo */
  /* lift the banner right up under the logo */
  .header-top .banner-ad,
  .banner-ad-mobile {
    position: relative ;
    /*top: -80px !important; */   /* adjust this value until it perfectly meets your logo’s bottom edge */
    margin-top: 0 !important;
  }



  .wrapper {
    margin: var(--inner-gap);
  }

  .row {
    flex-direction: column;
  } 
  


  /* 1) Reset gutters & hide desktop side-ads */
  body,
  .wrapper,
  .content-section,
  nav,
  section,
  #ticker,
  #main-content,
  #footer {
    margin: 0 !important;
    padding: 0 !important;
  }
  .ad-vertical { display: none !important; }

  /* 2) Header: logo full-width, banner ratio-driven */
  .header-top {
    display: flex ;
    flex-direction: column ;
    align-items: center ;
    height: auto ;
  }
  .header-top .logo img {
    width: 100% ;
    height: auto ;
  }
  .header-top .banner-ad,
  .banner-ad-mobile {
    display: block ;
    width: 100% ;
    height: auto ;
    aspect-ratio: var(--banner-ratio) ;
    position: static !important;
    top: auto !important;
  }


  /* 5) Collapse all grid/columns into single-column stacks */
  .row,
  .news-cards,
  .spotlight-cards,
  .pre-news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  
  .header-top {
    flex-direction: column;    /* stack logo above banner */
    height: auto ;   /* don’t constrain to a fixed --header-height */
    align-items: center;       /* center logo & banner horizontally */
    padding-bottom: 0;         /* kill any extra bottom padding */
	
	
  }
  /* 2) Reset banner positioning and respect its ratio */
  .header-top .banner-ad {
    position: static !important;        /* remove any relative/top overrides */
    width: 100% !important;             /* full-width */
    aspect-ratio: var(--banner-ratio) ; /* keep 728:90 aspect */
    height: auto !important;            /* height driven by aspect-ratio */
  }
  /* 1) Navbar allows overflow for dropdowns */
  .custom-navbar {
    overflow: visible !important;
  }
  /* 2) Scroller for horizontal swipe */
  .nav-scroller {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-scroller::-webkit-scrollbar {
    display: none;
  }
  /* 3) Inline-flex list, no wrapping */
  .custom-nav-list {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 var(--inner-gap) !important;
  }
  .custom-nav-item {
    flex: 0 0 auto !important;
  }
  /* 4) Full-width, fixed dropdown */
  .custom-dropdown {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    width: 100vw !important;
    background: #003F7D !important;
    box-sizing: border-box !important;
    display: none !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
    transform: none !important;
  }
  .has-custom-dropdown.open .custom-dropdown {
    display: block ;
    opacity: 1 !important;
  }
  /* 5) Dropdown item styling */
  .custom-dropdown li {
    width: 100% !important;
  }
  .custom-dropdown a {
    display: block ;
    padding: .75rem 1rem !important;
    background: #003F7D !important;
    color: #FFD400 !important;
    transition: background .2s, color .2s;
  }
  .custom-dropdown a:hover,
  .custom-dropdown li.hover > a {
    background: #FF9500 !important;
    color: #003F7D !important;
  }

    .breaking {
    position: sticky !important;
    top: var(--navbar-height) !important;
    margin: 0 !important;
    font-size: .85rem !important;
    z-index: 9 !important;
  }  
  
 /****CAROUSEL*/ 
  /* 6) Carousel full-width 16:9 for mobile */
  .carousel {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    margin: 0 !important;
  }
  .carousel .slide {
    height: auto !important;
  }

  /* 7) Square ads maintain ratio under carousel */
  .ad-square,
  .ad-square-mobile {
    display: block ;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--square-ratio) !important;
    margin: var(--inner-gap) 0 !important;
  }

  /* 6) Carousel full-width 16:9 for mobile */
  .carousel {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    margin: 0 !important;
  }
  .carousel .slide {
    height: auto !important;
  }

  /* 7) Square ads maintain ratio under carousel */
  .ad-square,
  .ad-square-mobile {
    display: block ;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--square-ratio) !important;
    margin: var(--inner-gap) 0 !important;
  }



  .carousel {
    height: 180px;
  }
  .carousel .slide {
    height: 180px;
  }
  .ad-square,
  .news-list {
    display: none;
  }
  
.carousel .slide {
  width: 100%;
  height: 50%;
}
 
  

 /****NEWSWORKS*/ 
   /* 5) Collapse all grid/columns into single-column stacks */
  .row,
  .news-cards,
  .spotlight-cards,
  .pre-news-grid,
  .category-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }
  

  .ad-square,
  .news-list {
    display: none;
  }

  #news-section .news-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .news-card {
    margin-bottom: 20px;
  }



  /* 8) News section: cards then headlines */
  #news-section {
    display: flex !important;
    flex-direction: column !important;
    margin: var(--inner-gap) 0 !important;
  }
  #news-section .news-cards,
  #news-section .news-list {
    width: 100% !important;
    margin: 0 !important;
  }
  
 
  /* Reduce the flex‐column gap */
  #news-section .news-cards {
    gap: 0.5rem !important;    /* halves the space (default was ~1rem) */
  }

  /* Also trim any bottom margin on each card */
  #news-section .news-card {
    margin-bottom: 0 !important;
    /* if you still need a little space, use margin-bottom: 0.5rem; */
  }


  /* 1) make the news-section stack in column-mode */
  #news-section {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2) show ad between cards and list */
  .news-mobile-ad {
    display: block ;
    width: 100% !important;
    text-align: center;
    margin: var(--inner-gap) 0 !important;
  }
  .news-mobile-ad .ad-mobile {
    display: inline-block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: var(--square-ratio);
    background: #ececec;
    border: 1px solid #ccc;
    line-height: calc(250 / 300 * 1em); /* approximate vertical centering */
    color: #666;
    font-size: .9rem;
  }

  /* 3) ensure cards & list retain their mobile layout */
  #news-section .news-cards,
  #news-section .news-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 1. Show the interstitial ad block between cards and list */
  .news-mobile-ad {
    display: block ;
    width: 100% !important;                /* fill the wrapper width */
    margin: var(--inner-gap) 0 !important; /* vertical spacing          */
    box-sizing: border-box;
  }

  /* 2. Make the ad itself fluid, ratio-locked */
  .news-mobile-ad .ad-mobile {
    width: 100%;                            /* match its parent width   */
    aspect-ratio: var(--square-ratio);      /* uses 300/250 from :root   */
    height: auto !important;               /* auto-adjust height        */
    max-width: none !important;             /* no desktop max-width here */
    background: #ececec;
    border: 1px solid #ccc;
    display: grid;
    place-items: center;
    font-size: .9rem;
    color: #666;
  }

  #news-section .news-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .news-card {
    margin-bottom: 20px;
  }


  /* 8) News section: cards then headlines */
  #news-section {
    display: flex !important;
    flex-direction: column !important;
    margin: var(--inner-gap) 0 !important;
  }
  #news-section .news-cards,
  #news-section .news-list {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Reduce the flex‐column gap */
  #news-section .news-cards {
    gap: 0.5rem !important;    /* halves the space (default was ~1rem) */
  }
  /* Also trim any bottom margin on each card */
  #news-section .news-card {
    margin-bottom: 0 !important;
    /* if you still need a little space, use margin-bottom: 0.5rem; */
  }
 
 /****SPORTLIGHT*/   
  #spotlight-section .spotlight-cards {
    flex-wrap: wrap;
    overflow: visible;
  }
  #spotlight-section .spotlight-card {
    flex: 1 0 auto;
    width: auto;
  }
  
  /* 9) Spotlight stacked flush */
  #spotlight-section {
    margin: var(--inner-gap) 0 !important;
    padding: 0 !important;
  }
  #spotlight-section .spotlight-cards {
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    margin: 0 !important;
  }
  
/* even stronger override */
/* Remove the inner-gap padding for Spotlight so it hugs the ads */
#spotlight-section {
  margin-left: calc(var(--ad-width) + var(--side-gap));
  margin-right: calc(var(--ad-width) + var(--side-gap));
  padding: 20px 0; /* preserve your vertical padding */
}

  #spotlight-section .spotlight-cards {
    flex-wrap: wrap;
    overflow: visible;
  }
  #spotlight-section .spotlight-card {
    flex: 1 0 auto;
    width: auto;
  }
  /* even stronger override */
  /* Remove the inner-gap padding for Spotlight so it hugs the ads */
  #spotlight-section {
    margin-left: calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
    margin-right: calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
    padding: 20px 0; /* preserve your vertical padding */
  }

  /* 9) Spotlight stacked flush */
  #spotlight-section {
    margin: var(--inner-gap) 0 !important;
    padding: 0 !important;
  }
  #spotlight-section .spotlight-cards {
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    margin: 0 !important;
  }
 /* ─── SPOTLIGHT: FORCE HORIZONTAL REEL ───────────────────────── */
  #spotlight-section .spotlight-container {
    position: relative; /* ensure arrows sit on top */
    padding: 0;         /* reset any extra padding */
  }

  #spotlight-section .spotlight-cards {
    display: flex !important;
    flex-direction: row !important;     /* undo any column reset */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 0 48px !important;         /* room for arrows */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  /* hide native scrollbar */
  #spotlight-section .spotlight-cards::-webkit-scrollbar {
    display: none;
  }

  #spotlight-section .spotlight-card {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    scroll-snap-align: center;
  }

  /* ─── ARROWS ────────────────────────────────────────────────── */
  .spotlight-btn {
    display: flex !important;           /* make sure they’re visible */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 10002;
    background: #ff8c00;
    border-radius: 50%;
    box-shadow:
      inset 0 2px 4px rgba(255,255,255,0.6),
      inset 0 -2px 4px rgba(0,0,0,0.2),
       0 4px 6px rgba(0,0,0,0.2),
       0 2px 4px rgba(0,0,0,0.1);
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
  .spotlight-prev { left: 8px; }
  .spotlight-next { right: 8px; }  
  
 /****CATEGORY*/ 
  
  #category-sections .category-row {
    flex-direction: column;
  }

  /* stack boards and ads one under the other */
  #category-sections .category-row {
    flex-direction: column;
    gap: var(--inner-gap);
  }

  /* constrain each board’s height, let its list scroll */
  #category-sections .category-board {
    width: 100%;
    /* keep same visual height but be flexible if you want */
    max-height: 350px;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--inner-gap);
  }

  /* list takes all remaining space and scrolls */
  #category-sections .category-board .cat-list {
    flex: 1 1 auto;
    /* account for header height (~40px) if you want precise control:
       max-height: calc(350px - 40px);
    */
    overflow-y: auto;
    /* optional: add a little right padding so the scrollbar doesn’t overlap text */
    padding-right: 8px;
  }

  #category-sections .category-row {
    flex-direction: column;
  }
 
  /* 10) Category blocks + interstitial ad */
  #category-sections {
    margin: var(--inner-gap) 0 !important;
    padding: 0 !important;
  }
  #category-sections .category-row {
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
  }
  .category-ad-mobile {
    display: block ;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--square-ratio) !important;
    margin: var(--inner-gap) 0 !important;
  }
  

  
/****PREFOOTER*/
  /* 11) Pre-footer news as one-card rows 
  #pre-footer-news {
    display: flex !important;
    flex-direction: column !important;
    margin: var(--inner-gap) 0 !important;
  }
  #pre-footer-news .pre-news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    margin: 0 !important;
  } 

  #pre-footer-news {
    display: flex !important;
    flex-direction: column !important;
    margin: var(--inner-gap) 0 !important;
  }
  #pre-footer-news .pre-news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    margin: 0 !important;
  }*/
/*───────────────────────────────────────────────────────────
  PRE-FOOTER GRID (5-col desktop, 2-col mobile)
───────────────────────────────────────────────────────────*/
#pre-footer-news .pre-news-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--inner-gap);
}

/*───────────────────────────────────────────────────────────
  CARD STYLES
───────────────────────────────────────────────────────────*/
#pre-footer-news .pre-news-grid .news-card {
  background:        #fff;
  border:            1px solid #ddd;
  border-radius:     8px;
  overflow:          hidden;
  display:           flex;
  flex-direction:    column;
  transition:        box-shadow .2s;
}

/* hover shadow */
#pre-footer-news .pre-news-grid .news-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/*───────────────────────────────────────────────────────────
  IMAGE (with 8px padding on top/left/right,
  flush to title block at bottom)
───────────────────────────────────────────────────────────*/
#pre-footer-news .pre-news-grid .news-card img {
  width:             calc(100% - 16px);
  margin:            8px;
  margin-bottom:     0;
  border-radius:     4px;
  object-fit:        cover;
  display:           block;
}

/*───────────────────────────────────────────────────────────
  TITLE BLOCK (exactly under the image)
───────────────────────────────────────────────────────────*/


/****FOOTER*/


}






@media (min-width: 768px) {
	
	
/****ROOTWORKS*/	
  .header-top .banner-ad {
    height: var(--header-height);
  }
  .header-top .logo {
    flex: 0 0 200px;
  }
 
  .header-top .banner-ad {
    height: var(--header-height);
  }
  .header-top .logo {
    flex: 0 0 200px;
  } 
  
/****SPOTLIGHT*/
  /* 1) Section margins back between the ads */
  #spotlight-section {
    margin-left:  calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
    margin-right: calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  }

  /* 2) Container fills that span, no extra padding */
  .spotlight-container {
    position: relative;
    margin: 0;           /* width inherited from section */
  }

  /* 3) Cards take 100% of container, with slight side‐padding */
  .spotlight-cards {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 0 20px;     /* just enough so cards don’t hide under buttons */
    width: 100%;
  }

/* ─── Enhanced 3D Orange Embossed Buttons ───────────────────────── */
.spotlight-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #ff8c00; /* vivid orange */
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;        /* white arrow */
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10001;

  /* deep 3D emboss */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.2),
     0 4px 6px rgba(0,0,0,0.2),
     0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow .2s, background .2s;
}

.spotlight-btn:hover {
  background: #ff9c2c; /* slightly lighter on hover */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.3),
     0 2px 4px rgba(0,0,0,0.3),
     0 1px 2px rgba(0,0,0,0.2);
}

.spotlight-prev {
  left: -20px;    /* pull the left button 20px outside the container */
  margin-left: 0; /* remove any extra inset */
}

.spotlight-next {
  right: -20px;   /* pull the right button 20px outside the container */
  margin-right: 0;
}  
  #spotlight-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 1) Section margins back between the ads */
  #spotlight-section {
    margin-left:  calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
    margin-right: calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  }
  /* 2) Container fills that span, no extra padding */
  .spotlight-container {
    position: relative;
    margin: 0;           /* width inherited from section */
  }
  /* 3) Cards take 100% of container, with slight side‐padding */
  .spotlight-cards {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 0 20px;     /* just enough so cards don’t hide under buttons */
    width: 100%;
  }
  /* Enhanced 3D Orange Embossed Buttons */
  .spotlight-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #ff8c00; /* vivid orange */
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;        /* white arrow */
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10001;
    /* deep 3D emboss */
    box-shadow:
      inset 0 2px 4px rgba(255,255,255,0.6),
      inset 0 -2px 4px rgba(0,0,0,0.2),
       0 4px 6px rgba(0,0,0,0.2),
       0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow .2s, background .2s;
  }
  .spotlight-btn:hover {
    background: #ff9c2c; /* slightly lighter on hover */
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.4),
      inset 0 -1px 2px rgba(0,0,0,0.3),
       0 2px 4px rgba(0,0,0,0.3),
       0 1px 2px rgba(0,0,0,0.2);
  }
  .spotlight-prev {
    left: -20px;    /* pull the left button 20px outside the container */
    margin-left: 0; /* remove any extra inset */
  }
  .spotlight-next {
    right: -20px;   /* pull the right button 20px outside the container */
    margin-right: 0;
  }  
  
/****CATEGORY*/  
  #spotlight-section,
  #category-sections {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
/****FOOTER*/  



}










nav.custom-navbar {
  /* apply !important to the entire declaration, not each shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 3px 6px rgba(0,0,0,0.3)
  !important;
}

nav.custom-navbar {
  /* Rounded bottom corners */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  /* Embossed 3D effect */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),   /* light highlight at top */
    inset 0 -2px 4px rgba(0,0,0,0.4),        /* inner shadow at bottom */
    0 4px 8px rgba(0,0,0,0.2),               /* soft outer drop shadow */
    0 2px 4px rgba(0,0,0,0.1);               /* subtle secondary shadow */
}


/* 3D-embossed ticker */


#ticker .breaking {
  /* inner emboss for the red bar */
  border-radius: 3px 3px 0 0; /* round the top corners of the red bar */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),  /* light highlight at top */
    inset 0 -2px 4px rgba(0,0,0,0.3);        /* inner shadow at bottom */
  margin: 0 calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
}



/* 3D‐embossed effect for news cards */
.news-card {
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.3),   /* inner highlight */
    inset 0 -1px 2px rgba(0,0,0,0.2),        /* inner shadow */
    0 2px 3px rgba(0,0,0,0.15),              /* outer drop shadow */
    0 1px 2px rgba(0,0,0,0.1);               /* subtle secondary shadow */
  border-radius: 4px;                        /* optional rounding */
}


#news-section .news-list {
  /* Rounded corners */
  border-radius: 8px;

  /* Embossed 3D effect */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.3),   /* light highlight at top */
    inset 0 -1px 2px rgba(0,0,0,0.2),        /* inner shadow at bottom */
    0 1px 3px rgba(0,0,0,0.15),              /* subtle outer shadow */
    0 1px 2px rgba(0,0,0,0.1);               /* secondary shadow */

  /* Optional: match your existing background */
  background: #fff;
}
.news-list__items {
  border-radius: 4px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.2);
}

/* 3D‐embossed effect for Spotlight cards */
.spotlight-card {
  border-radius: 8px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -1px 2px rgba(0,0,0,0.2),
    0 2px 3px rgba(0,0,0,0.15),
    0 1px 2px rgba(0,0,0,0.1);
}








.custom-navbar .custom-nav-list .custom-nav-item > a {
  /* disable uppercase */
  text-transform: none !important;
}






/* ─── Theme Toggle Button ──────────────────────────────────────────── */
#theme-toggle {
  position:        fixed;
  top:             3rem;
  right:           1rem;
  width:           3rem;
  height:          3rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--card-bg);
  color:           var(--text-color);
  border:          none;
  border-radius:   50%;
  cursor:          pointer;
  box-shadow:
    inset  2px  2px  4px rgba(255,255,255,0.6),
    inset -2px -2px  4px rgba(0,0,0,0.2),
       4px  4px  8px rgba(0,0,0,0.2),
       2px  2px  4px rgba(0,0,0,0.1);
  transition:      background .3s, color .3s, box-shadow .2s, transform .1s;
  z-index:         10001;
}

#theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow:
    inset  1px  1px  2px rgba(255,255,255,0.4),
    inset -1px -1px  2px rgba(0,0,0,0.3),
       2px  2px  4px rgba(0,0,0,0.3),
       1px  1px  2px rgba(0,0,0,0.2);
  color: var(--accent-color);
}

/* ─── Dark Mode Overrides ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-color:       #121212;
  --text-color:     #e0e0e0;
  --link-color:     #64b5f6;
  --card-bg:        #1e1e1e;
  --card-border:    #333;
  --section-bg:     #252525;
  --section-border: #3a3a3a;
  --accent-color:   #ff9500;
}

[data-theme="dark"] body {
  background: var(--bg-color);
  color:      var(--text-color);
}

[data-theme="dark"] a {
  color: var(--link-color);
}

[data-theme="dark"] .news-card,
[data-theme="dark"] .ad-vertical,
[data-theme="dark"] .ad-square,
[data-theme="dark"] .custom-dropdown {
  background: var(--card-bg) !important;
  border:     1px solid var(--card-border) !important;
}

[data-theme="dark"] #footer {
  background: var(--card-bg) !important;
  color:      var(--text-color);
}

/* Inverted emboss on toggle in dark mode */
[data-theme="dark"] #theme-toggle {
  box-shadow:
    inset  2px  2px  4px rgba(0,0,0,0.7),
    inset -2px -2px  4px rgba(255,255,255,0.1),
       4px  4px  8px rgba(0,0,0,0.8),
       2px  2px  4px rgba(0,0,0,0.5);
}











[data-theme="dark"] {
  --bg: #121212;
  --text: #eee;
  --card-bg: #1e1e1e;
  --accent: #ff8c00;
}

/* Dark theme variables */
[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #eee;
  --link-color: #64b5f6;
  --nav-bg: #2c2c2c;

  /* New for cards & sections */
  --card-bg: #2a2a2a;
  --card-border: #444;
  --section-bg: #252525;
  --section-border: #3a3a3a;
  --accent-color: #64b5f6;
}

/* Apply global background & text */
[data-theme="dark"] body {
  background: var(--bg-color);
  color: var(--text-color);
}
[data-theme="dark"] a {
  color: var(--link-color);
}

/* Navbar */
[data-theme="dark"] .custom-navbar {
  background: var(--nav-bg) !important;
}

/* News cards grid */
[data-theme="dark"] .news-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .news-card .text h4 {
  color: var(--text-color);
}

/* Headlines list */
[data-theme="dark"] .news-list {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .news-list__items a {
  color: var(--text-color);
}

/* Carousel square ad */
[data-theme="dark"] .ad-square {
  background: var(--section-bg);
  border-color: var(--section-border);
}


/* Category boards */
[data-theme="dark"] .category-board {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .category-board .cat-header {
  background: var(--section-bg);
  color: var(--text-color);
  border-bottom: 1px solid var(--section-border);
}
[data-theme="dark"] .category-cards .news-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .category-cards .text h4 {
  color: var(--text-color);
}

/* Pre-footer grid */
[data-theme="dark"] #pre-footer-news .news-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

/* Footer adjustments */
[data-theme="dark"] #footer {
  background: #111;
  color: #ccc;
}
[data-theme="dark"] #footer a {
  color: var(--link-color);
}

/* Optional accent hover for cards */
[data-theme="dark"] .news-card:hover,
[data-theme="dark"] .spotlight-card:hover,
[data-theme="dark"] .ads-card:hover {
  box-shadow: 0 4px 12px rgba(100,181,246,0.3);
}

/* ─── Pre-Footer Cards in Dark Mode ─────────────────────────────────── */
[data-theme="dark"] #pre-footer-news .pre-news-grid {

}

[data-theme="dark"] #pre-footer-news .news-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  height: calc(75px + 16px) !important;   /* same fixed height */
  display: flex;
  overflow: hidden;
  transition: box-shadow .2s;
}

[data-theme="dark"] #pre-footer-news .news-card:hover {
  box-shadow: 0 4px 12px rgba(100,181,246,0.3);
}

[data-theme="dark"] #pre-footer-news .news-card img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  margin: 8px;
  flex-shrink: 0;
}

[data-theme="dark"] #pre-footer-news .news-card .text {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-theme="dark"] #pre-footer-news .news-card .text h4 {
  color: var(--text-color);
  margin: 0 0 4px;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: bold;
}
/* ─── Headlines Container Dark Mode ───────────────────────────────────── */
[data-theme="dark"] #news-section .news-list {
  background: var(--card-bg) !important;       /* card-bg from your variables */
  border: 1px solid var(--card-border) !important;
}

/* Title */
[data-theme="dark"] .news-list__title {
  color: var(--text-color) !important;
  background: transparent !important;          /* in case it inherited white */
}

/* Headlines list UL */
[data-theme="dark"] .news-list__items {
  background: transparent !important;          /* let the container show through */
  padding-left: 1.2em;                         /* keep your indent */
}

/* Individual items */
[data-theme="dark"] .news-list__items li {
  border-bottom: 1px solid var(--card-border);
}
[data-theme="dark"] .news-list__items li:last-child {
  border-bottom: none;
}

/* Links */
[data-theme="dark"] .news-list__items a {
  color: var(--text-color) !important;
}
[data-theme="dark"] .news-list__items a:hover {
  color: var(--accent-color) !important;
}

/* Bullet markers */
[data-theme="dark"] .news-list__items li::marker {
  color: var(--text-color);
}
/* ─── Breaking News Ticker Dark Mode ─────────────────────────────────── */
[data-theme="dark"] #ticker {
  background: var(--section-bg) !important;        /* dark container bg */
}

[data-theme="dark"] .breaking {
  background: var(--card-bg) !important;           /* match card bg */
  border: 1px solid var(--card-border) !important;
}

[data-theme="dark"] .breaking .scroll-track {
  /* no change — purely structural */
}

[data-theme="dark"] .breaking .scroll-text {
  color: var(--text-color) !important;
}

[data-theme="dark"] .breaking .scroll-text a {
  color: var(--text-color) !important;
  text-decoration: none;
}

[data-theme="dark"] .breaking .scroll-text a:hover {
  color: var(--accent-color) !important;
}

/* Optional: change the keyframe dot colors if you styled them */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* If you want a subtle border at the bottom of the ticker: */
[data-theme="dark"] .breaking {
  box-shadow: inset 0 -1px 0 var(--section-border);
}
/* restore 3-column pre-footer in dark mode */
html[data-theme] #pre-footer-news .pre-news-grid {

}
html[data-theme] #pre-footer-news .pre-news-grid .news-card {
  /* make sure each card spans exactly 1 column */

}
/* force 3-col pre-footer grid in dark mode on homepage */
html[data-theme="dark"] #pre-footer-news .pre-news-grid {

}
html[data-theme="dark"] #pre-footer-news .pre-news-grid .news-card {

}



/* Dark-mode style */
[data-theme="dark"] .btn-toggle {
  background: linear-gradient(145deg, #3a3a3a, #222);
  border-color: #444;
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,0.7),
    inset -4px -4px 8px rgba(255,255,255,0.1),
    4px 4px 8px rgba(0,0,0,0.8);
}

[data-theme="dark"] .btn-toggle i {
  color: #ffd740;
}



/* Light mode: button black */
[data-theme="dark"]#theme-toggle {
  background: #000 !important;
  color: #fff !important;
}


/* keep it tappable/hoverable */
#theme-toggle:hover {
  transform: translateY(-2px) !important;
}


/* Light mode: show toggle in “dark” (black) to indicate you can switch to dark */
html:not([data-theme="dark"]) #theme-toggle {
  background: #000 !important;
  color:      #fff !important;
}
html:not([data-theme="dark"]) #theme-toggle i {
  color: #fff !important;
}

/* Dark mode: show toggle in “light” (white) to indicate you can switch to light */
html[data-theme="dark"] #theme-toggle {
  background: #fff !important;
  color:      #000 !important;
}
html[data-theme="dark"] #theme-toggle i {
  color: #000 !important;
}



/* ─── Dark-mode: Tags & Spotlight tweaks ─────────────────────────── */
[data-theme="dark"] .tags-bar__pill {
  /* white text on pill */
  color: #fff !important;
  /* if you want to keep the red pill background, omit/change this */
  /* background: #c01f2e !important; */
}

[data-theme="dark"] .spotlight-card {
  /* black background */
  background: #000 !important;
  /* white text throughout */
  color: #fff !important;
}
/* make sure headings & links inside also turn white */
[data-theme="dark"] .spotlight-card h3,
[data-theme="dark"] .spotlight-card a {
  color: #fff !important;
}
/* if there are any paragraphs or meta text inside the card: */
[data-theme="dark"] .spotlight-card p,
[data-theme="dark"] .spotlight-card .meta {
  color: #fff !important;
}

/* ─── Dark-Mode: Sub-Links & Callouts ─────────────────────────── */
[data-theme="dark"] .inserted-sublink,
[data-theme="dark"] .sub-article-callout {
  /* dark background */
  background: #111 !important;
  /* maintain the left accent, but in lighter tone */
  border-left-color: #64b5f6 !important; 
  /* white text for body */
  color: #eee !important;
}

[data-theme="dark"] .inserted-sublink a,
[data-theme="dark"] .sub-article-callout a {
  /* brighten link text */
  color: #80deea !important;
  /* ensure underline on hover */
  text-decoration: underline !important;
}

[data-theme="dark"] .inserted-sublink a:hover,
[data-theme="dark"] .sub-article-callout a:hover {
  /* stronger accent on hover */
  color: #4eaaff !important;
}

/* if you have any p or small text inside: */
[data-theme="dark"] .inserted-sublink p,
[data-theme="dark"] .sub-article-callout p {
  color: #ccc !important;
}



/* ─── Dark Mode: Category Tab Headers ────────────────────────── */
[data-theme="dark"] .category-board {
  background:    #1e1e1e;     /* dark card background */
  border-color:  #333;        /* subtle border */
}

[data-theme="dark"] .category-board .cat-header {
  background:    #2c2c2c !important;  /* even darker header bar */
  border-bottom: 1px solid #444;      /* crisp separation */
  color:         #fff !important;     /* white text */
}

[data-theme="dark"] .category-board .cat-title {
  color:         #ffca28 !important;  /* golden accent for titles */
}

[data-theme="dark"] .category-board .cat-readmore {
  color:         #64b5f6 !important;  /* bright cyan “Read More” */
}

[data-theme="dark"] .category-board .cat-readmore:hover {
  color:         #90caf9 !important;  /* lighter cyan on hover */
  text-decoration: underline;
}



/* ─── Dark-Mode: Disclaimer Styling ─────────────────────────── */
[data-theme="dark"] .footer-disclaimer {
  background:    #1a1a1a !important;   /* very dark gray */
  color:         #ddd    !important;   /* light gray text */
  border-left:   4px solid #64b5f6 !important;   /* cyan accent */
  padding:       1.5rem 1rem !important; 
  font-size:     0.9rem   !important;
  line-height:   1.6     !important;
}

[data-theme="dark"] .footer-disclaimer strong {
  color:       #fff    !important;  /* brighter for headings */
  margin-bottom: 0.5rem !important;
  display:      block   !important;
}

[data-theme="dark"] .footer-disclaimer a {
  color:       #80deea !important;  /* pale cyan links */
  text-decoration: underline !important;
}

[data-theme="dark"] .footer-disclaimer a:hover {
  color:       #4eaaff !important;  /* stronger hover color */
}


/*───────────────────────────────────────────────────────────
  Footer — full layout & insets between fixed side-ads
───────────────────────────────────────────────────────────*/
#footer {
  background:    var(--card-bg);
  color:         var(--text-color);
  font-size:     0.9rem;
  line-height:   1.5;
  overflow-x:    hidden;
}

/* Wrapper inset so everything sits between the two 160×600 ads */
.footer-container {
  margin:           0 calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  max-width:        calc(100% - 2 * (var(--side-gap) + var(--ad-width)));
  padding:          2rem 0;
  display:          flex;
  flex-direction:   column;
}

/* Remove any automatic gaps so sections stack flush */
.footer-container > * {
  margin:           0;
}

/*───────────────────────────────────────────────────────────
  1) Top Links Section (dark background)
───────────────────────────────────────────────────────────*/
.footer-links {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:                   2rem;
  background:            #222;
  padding:               2rem 1rem;
}
.footer-column h4 {
  color:               #fff;
  font-size:           1rem;
  margin-bottom:       1rem;
  text-transform:      uppercase;
  letter-spacing:      0.5px;
  position:            relative;
}
.footer-column h4::after {
  content:             "";
  position:            absolute;
  bottom:              -0.3rem;
  left:                0;
  width:               3rem;
  height:              2px;
  background:          #555;
}
.footer-column ul {
  list-style:          none;
  padding:             0;
  margin:              0;
}
.footer-column li {
  border-bottom:       1px solid #444;
  padding:             0.5rem 0;
}
.footer-column li:last-child {
  border-bottom:       none;
}
.footer-column a {
  color:               #ccc;
  text-decoration:     none;
  transition:          color 0.2s;
}
.footer-column a:hover,
.footer-column a:focus {
  color:               #fff;
}

/*───────────────────────────────────────────────────────────
  2) Red Copyright Bar
───────────────────────────────────────────────────────────*/
.footer-copy {
  background:          #c01f2e;
  color:               #fff;
  text-align:          center;
  padding:             1rem 0;
  font-weight:         600;
  width:               100%;
  box-sizing:          border-box;
}
.footer-copy a {
  color:               #fff;
  text-decoration:     underline;
}
.footer-copy a:hover {
  color:               #000;
}

/*───────────────────────────────────────────────────────────
  3) Disclaimer (light grey)
───────────────────────────────────────────────────────────*/
.footer-disclaimer {
  background:          #f1f1f1;
  color:               #333;
  padding:             1rem;
  font-size:           0.85rem;
  line-height:         1.4;
  width:               100%;
  box-sizing:          border-box;
}

/*───────────────────────────────────────────────────────────
  4) Site-verify + SSL Badge
───────────────────────────────────────────────────────────*/
.footer-verify {
  display:             flex;
  align-items:         center;
  justify-content:     space-between;
  gap:                 1rem;
  font-size:           0.8rem;
  padding:             1rem;
  width:               100%;
  box-sizing:          border-box;
}
.footer-verify img {
  height:              24px;
  width:               auto;
}

/*───────────────────────────────────────────────────────────
  5) Responsive: collapse on mobile
───────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .footer-container {
    margin:         0;
    max-width:      100%;
    padding:        1rem 0;
    gap:            1.5rem;
  }
  .footer-links {
    grid-template-columns: 1fr;
    padding:              1rem;
    gap:                  1rem;
  }
  .footer-copy,
  .footer-disclaimer,
  .footer-verify {
    padding:       1rem;
    text-align:    center;
  }
  .footer-verify {
    flex-direction: column;
    gap:            0.5rem;
  }
  .footer-links {
    /* original padding was 1rem top/bottom */
    padding: 2rem 1rem 1rem; /* 2rem top, 1rem right/left, 1rem bottom */
  }
}
/* Make all text in the 4th footer column white */
.footer-links .footer-column:nth-child(4) {
  color: #fff;
}

/* And re-apply for any links or paragraphs inside */
.footer-links .footer-column:nth-child(4) *,
.footer-links .footer-column:nth-child(4) a {
  color: #fff !important;
}

@media (max-width: 768px) {
  /* Remove any container padding or gap */
  .footer-container {
    margin:     0;
    max-width:  100%;
    padding:    0;
    gap:        0;
  }

  /* Collapse padding on each section so they sit flush */
  .footer-links {
    padding:   0 1rem 0;  /* keep only horizontal padding */
    margin:    0;
    gap:       0.5rem;    /* small gap between columns if stacked */
  }

  .footer-copy,
  .footer-disclaimer,
  .footer-verify {
    padding:     0.75rem 1rem;  /* minimal vertical padding */
    margin:      0;
    text-align:  center;
  }

  /* Stack the verify row cleanly */
  .footer-verify {
    flex-direction: column;
    gap:            0.25rem;
  }
}


/*───────────────────────────────────────────────────────────
  Ensure disclaimer spans the full inset width
───────────────────────────────────────────────────────────*/
.footer-disclaimer {
  background:   #f1f1f1;
  color:        #333;
  padding:      1.5rem 1rem;    /* vertical + small horizontal padding */
  width:        100%;           /* full width of its parent (.footer-container) */
  box-sizing:   border-box;
  font-size:    0.9rem;
  line-height:  1.6;
}

/* Bold heading on its own line */
/* Less gap between Disclaimer heading and text */
.footer-disclaimer strong {
  display:       block;
  margin-bottom: 0rem; /* was 0.75rem, now tighter */
  font-size:     1rem;
}


/* Mobile: full viewport */
@media (max-width: 768px) {
  .footer-disclaimer {
    padding:   1rem;
    text-align: left;
  }
}

@media (max-width: 768px) {
  /* push the Select Country block down by adding black space above */
  .footer-links {
    /* original padding was 1rem top/bottom */
    padding: 2rem 1rem 1rem; /* 2rem top, 1rem right/left, 1rem bottom */
  }
}



/* ─── Scroll-to-Top Button ───────────────────────────────────────── */
#scroll-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--card-bg);
  color:      var(--text-color);
  border:     none;
  border-radius: 50%;
  font-size:  1.5rem;
  line-height:1;
  display:    flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset  1px  1px  2px rgba(255,255,255,0.6),
    inset -1px -1px  2px rgba(0,0,0,0.2),
       2px  2px  4px rgba(0,0,0,0.2),
       1px  1px  2px rgba(0,0,0,0.1);
  cursor: pointer;
  opacity:    0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index:    100000;
}

#scroll-to-top.show {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

#scroll-to-top.hide {
  opacity:    0;
  visibility: hidden;
  transform:  translateY(1rem);
}

#scroll-to-top:hover {
  transform: translateY(-0.25rem);
}
/* ─── Scroll-to-Top Button — Pink & Stylish ───────────────────────────────────────── */
#scroll-to-top {
  background: #e91e63;            /* vibrant pink */
  color:      #fff;               /* white icon */
}

#scroll-to-top i {
  font-size: 1.25rem;             /* a bit bigger */
  line-height: 1;
  transition: transform 0.2s ease;
}

#scroll-to-top:hover i {
  transform: translateY(-2px);    /* subtle lift */
}

#scroll-to-top:hover {
  background: #d81b60;            /* slightly darker on hover */
}



@media (max-width: 768px) {
  /* Shrink the flex/grid gap between stacked category cards */
  #category-sections .category-cards {
    gap: 0.5rem !important; /* was larger—now only 8px between cards */
  }

  /* Remove any per-card margins so they butt up exactly to each other */
  #category-sections .category-cards .news-card {
    margin: 0 !important;
  }
}





/*───────────────────────────────────────────────────────────
  Pre-Footer Container (inset between side-ads)
───────────────────────────────────────────────────────────*/
#pf-section {
  margin:      0 calc(var(--ad-width) + var(--side-gap) + var(--inner-gap));
  max-width:   calc(100% - 2 * var(--pf-side-gap));
  padding:     var(--pf-inner-gap) 0;
  box-sizing:  border-box;
}

/*───────────────────────────────────────────────────────────
  Grid: 5 columns desktop → 2 columns mobile
───────────────────────────────────────────────────────────*/
.pf-grid {
  display:                grid;
  grid-template-columns:  repeat(5, 1fr);
  gap:                    var(--pf-inner-gap);
}
@media (max-width: 768px) {
  #pf-section {
    margin:      var(--pf-inner-gap);
    max-width:   100%;
    padding:     var(--pf-inner-gap) 0;
  }
  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*───────────────────────────────────────────────────────────
  Card
───────────────────────────────────────────────────────────*/
.pf-card {
  background:        var(--pf-card-bg);
  border:            1px solid var(--pf-card-border);
  border-radius:     8px;
  overflow:          hidden;
  display:           flex;
  flex-direction:    column;
  transition:        box-shadow .2s;
  height:            220px;             /* total card height */
}
.pf-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/*───────────────────────────────────────────────────────────
  Image (top, rounded corners)
───────────────────────────────────────────────────────────*/
.pf-image-link {
  display:           block;
  flex:              0 0 auto;
  text-decoration:   none;
}
.pf-image {
  display:           block;
  width:             calc(100% - 16px); /* 8px side padding */
  height:            140px;             /* portion of 220px total */
  margin:            8px;
  object-fit:        cover;
  border-radius:     4px 4px 0 0;       /* round top corners */
}

/*───────────────────────────────────────────────────────────
  Title (immediately below image)
───────────────────────────────────────────────────────────*/
.pf-title {
  padding:           8px 12px;
  background:        var(--pf-card-bg);
  flex:              0 0 auto;
  margin-top:        0;  /* no extra gap above */
}
.pf-title h4 {
  margin:            0;
  font-size:         0.95rem;
  line-height:       1.3;
  font-weight:       600;
  color:             var(--pf-text-color);
  display:           -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:          hidden;
  text-overflow:     ellipsis;
}
.pf-title a {
  color:            inherit;
  text-decoration:  none;
  transition:       color .2s;
}
.pf-title a:hover {
  color:            #c01f2e;
}





.cat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.cat-header .cat-title {
  font-size: 1rem;
  font-weight: bold;
  color: #003366;
}

.cat-header .cat-readmore {
  font-size: 0.875rem;
  color: #00529B;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid #00529B;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
}
.cat-header .cat-readmore:hover {
  background: #00529B;
  color: #fff;
}



@media (max-width: 768px) {
  /* kill the carousel square ad on mobile */
  #carousel-section .ad-square {
    display: block ;
  }
}



@media (min-width: 768px) {
  .header-top {
    /* inset the header exactly like the wrapper/content */
    margin-left:  calc(var(--ad-width)  + var(--side-gap));
    margin-right: calc(var(--ad-width) + var(--side-gap));
width: calc(var(--ad-width) + var(--inner-gap));
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
  }

  .header-top .logo {
    flex: 0 0 auto;
	width: 310px;
    height: var(--header-height);
    margin-left: -30px; /* flush with its own container */
  }
  .header-top .logo img {
    height: 100%;
    width: auto;
    display: block;
  }

  .header-top .banner-ad {
    flex: 1 1 auto;
    height: var(--header-height);
    max-height: var(--header-height);
    aspect-ratio: var(--banner-ratio);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
  }
}


@media (max-width: 450px) {

  /* 1) Pin your header wrapper at the very top */
  #header {
    position: sticky !important;
    top:      0       !important;
    left:     0       !important;
    right:    0       !important;
    z-index: 1000    !important;
    background: #fff; /* cover whatever scrolls underneath */
  }

  /* 2) Push the navbar down by your header’s height */
  nav.custom-navbar {
    position: sticky   !important;
    top:      95px     !important; /* <-- set this to the exact px-height of #header on mobile */
    left:     0         !important;
    right:    0         !important;
    z-index:  999      !important;
  }

  /* 3) Prevent your page content from sliding under them */
  /*    (Optional: if you notice your first section jumping up) */


}





ins.adsbygoogle{display:block}
.banner-ad,.ad-square,.news-mobile-ad,.category-ad{width:100%}
.ad-vertical{width:160px} /* only output this slot when the rail is visible */