/*
 * Newspaper Full-Window Responsive + Red Newspaper Header
 * Robust override layer for sites with TagDiv/Theme Panel inline CSS.
 */

:root {
  --td_theme_color: #c8102e !important;
  --td_mobile_menu_color: #b30d1b !important;
  --td_mobile_icons_color: #ffffff !important;
  --newspaper-red: #c8102e;
  --newspaper-red-dark: #970b17;
  --newspaper-red-deep: #760811;
  --newspaper-paper: #ffffff;
  --newspaper-ink: #161616;
}

html,
body {
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden;
}

/* Remove boxed/site-specific width caps before sizing inner grids. */
body #td-outer-wrap.td-theme-wrap,
body #td-outer-wrap .td-container-wrap,
body.td-boxed-layout #td-outer-wrap,
body.td-boxed-layout #td-outer-wrap .td-container-wrap,
body.td-boxed-layout .td-theme-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Desktop: near edge-to-edge window, while preserving Newspaper's 24px column gutter. */
@media (min-width: 1141px) {
  body #td-outer-wrap .td-container,
  body #td-outer-wrap .tdc-row,
  body #td-outer-wrap .tdc-row-composer {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body #td-outer-wrap .tdc-row[class*="stretch_row"],
  body #td-outer-wrap .tdc-row-composer[class*="stretch_row"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Landscape tablet / compact desktop. */
@media (min-width: 1019px) and (max-width: 1140px) {
  body #td-outer-wrap .td-container,
  body #td-outer-wrap .tdc-row,
  body #td-outer-wrap .tdc-row-composer {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body #td-outer-wrap .tdc-row[class*="stretch_row"],
  body #td-outer-wrap .tdc-row-composer[class*="stretch_row"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Portrait tablet. */
@media (min-width: 768px) and (max-width: 1018px) {
  body #td-outer-wrap .td-container,
  body #td-outer-wrap .tdc-row,
  body #td-outer-wrap .tdc-row-composer {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body #td-outer-wrap .tdc-row[class*="stretch_row"],
  body #td-outer-wrap .tdc-row-composer[class*="stretch_row"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Phones keep the theme's normal stacked layout, with safe side padding. */
@media (max-width: 767px) {
  body #td-outer-wrap .td-container,
  body #td-outer-wrap .tdc-row,
  body #td-outer-wrap .tdc-row-composer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* TagDiv page-builder inner wrappers must not reintroduce fixed 1068/1200/1400/1600/1800 caps. */
@media (min-width: 768px) {
  body #td-outer-wrap .vc_inner.absolute_inner,
  body #td-outer-wrap .vc_inner.absolute_inner_1068,
  body #td-outer-wrap .vc_inner.absolute_inner_1200,
  body #td-outer-wrap .vc_inner.absolute_inner_1400,
  body #td-outer-wrap .vc_inner.absolute_inner_1600,
  body #td-outer-wrap .vc_inner.absolute_inner_1800 {
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
  }
}

/* Do not make a Composer row embedded inside a single article escape its article column. */
.single.wpb-js-composer .td-post-content .tdc-row,
.single.wpb-js-composer .td-post-content .tdc-row-composer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Responsive media safety. */
body #td-outer-wrap img,
body #td-outer-wrap iframe,
body #td-outer-wrap video,
body #td-outer-wrap embed,
body #td-outer-wrap object,
body #td-outer-wrap svg {
  max-width: 100%;
}

body #td-outer-wrap iframe,
body #td-outer-wrap video,
body #td-outer-wrap embed,
body #td-outer-wrap object {
  height: auto;
}

/* --------------------------------------------------------------------------
   Classic red newspaper masthead / navigation
   -------------------------------------------------------------------------- */

body #td-outer-wrap .td-banner-wrap-full,
body #td-outer-wrap .td-logo-wrap-full {
  background: var(--newspaper-paper) !important;
  border-bottom: 4px solid var(--newspaper-red) !important;
}

body #td-outer-wrap .td-logo-text-container .td-logo-text {
  color: var(--newspaper-ink) !important;
  letter-spacing: -1.5px;
  text-shadow: none !important;
}

body #td-outer-wrap .td-logo-text-container .td-tagline-text {
  color: #666666 !important;
}

body #td-outer-wrap .td-header-menu-wrap-full,
body #td-outer-wrap .td-header-menu-wrap,
body #td-outer-wrap .td-header-main-menu,
body #td-outer-wrap .td-affix {
  background: linear-gradient(180deg, #d71920 0%, var(--newspaper-red) 55%, #ad0c19 100%) !important;
  border: 0 !important;
}

body #td-outer-wrap .td-header-menu-wrap-full {
  box-shadow: inset 0 -3px 0 var(--newspaper-red-dark), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

body #td-outer-wrap .sf-menu > li > a,
body #td-outer-wrap .td-header-style-1 .header-search-wrap .td-icon-search,
body #td-outer-wrap #td-top-mobile-toggle a,
body #td-outer-wrap #td-top-mobile-toggle .td-icon-mobile {
  color: #ffffff !important;
}

body #td-outer-wrap .sf-menu > li > a {
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

body #td-outer-wrap .sf-menu > li:hover > a,
body #td-outer-wrap .sf-menu > .sfHover > a,
body #td-outer-wrap .sf-menu > .current-menu-item > a,
body #td-outer-wrap .sf-menu > .current-menu-ancestor > a,
body #td-outer-wrap .sf-menu > .current-category-ancestor > a {
  color: #ffffff !important;
  background: var(--newspaper-red-dark) !important;
}

body #td-outer-wrap .sf-menu > .current-menu-item > a:after,
body #td-outer-wrap .sf-menu > .current-menu-ancestor > a:after,
body #td-outer-wrap .sf-menu > .current-category-ancestor > a:after,
body #td-outer-wrap .sf-menu > li:hover > a:after,
body #td-outer-wrap .sf-menu > .sfHover > a:after {
  background-color: #ffffff !important;
}

/* Dropdowns: white paper with red highlights. */
body #td-outer-wrap .sf-menu .sub-menu,
body #td-outer-wrap .sf-menu li ul {
  border-top-color: var(--newspaper-red) !important;
}

body #td-outer-wrap .sf-menu .sub-menu a,
body #td-outer-wrap .sf-menu li ul a {
  color: #222222 !important;
  background: #ffffff !important;
}

body #td-outer-wrap .sf-menu .sub-menu a:hover,
body #td-outer-wrap .sf-menu li ul li:hover > a,
body #td-outer-wrap .sf-menu li ul .current-menu-item > a {
  color: var(--newspaper-red) !important;
  background: #fff5f6 !important;
}

/* Search dropdown matches the red masthead. */
body #td-outer-wrap .td-header-wrap .td-drop-down-search:after {
  background-color: var(--newspaper-red) !important;
}

body #td-outer-wrap .td-header-wrap .td-drop-down-search:before {
  border-color: transparent transparent var(--newspaper-red) transparent !important;
}

body #td-outer-wrap .td-header-wrap .td-drop-down-search .btn,
body #td-outer-wrap .td-header-wrap .td-drop-down-search .btn:hover {
  background-color: var(--newspaper-red) !important;
  color: #ffffff !important;
}

/* Mobile header + slide menu. */
@media (max-width: 767px) {
  body #td-outer-wrap .td-header-menu-wrap-full,
  body #td-outer-wrap .td-header-menu-wrap,
  body #td-outer-wrap .td-header-main-menu {
    background: linear-gradient(180deg, #d71920 0%, #ad0c19 100%) !important;
  }

  #td-mobile-nav,
  #td-mobile-nav .td-mobile-container,
  #td-mobile-nav .td-mobile-content {
    background: var(--newspaper-red-dark) !important;
  }

  #td-mobile-nav a,
  #td-mobile-nav i {
    color: #ffffff !important;
  }

  body #td-outer-wrap .td-logo-text-container .td-logo-text {
    letter-spacing: -0.5px;
  }
}

/* --------------------------------------------------------------------------
   TagDiv Composer / Cloud Template fallback
   Some sites render page/header templates through plugins rather than the
   classic header.php markup. These rules cover those alternate wrappers too.
   -------------------------------------------------------------------------- */
body .tdc_zone,
body .tdc-zone,
body .tdc_zone_inner,
body .tdc-zone-inner,
body .td-main-content-wrap,
body .td-header-template-wrap,
body .tdc-header-wrap {
  max-width: none !important;
}

@media (min-width: 1141px) {
  body .tdc_zone > .tdc-row,
  body .tdc-zone > .tdc-row,
  body .td-header-template-wrap .tdc-row,
  body .tdc-header-wrap .tdc-row {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1019px) and (max-width: 1140px) {
  body .tdc_zone > .tdc-row,
  body .tdc-zone > .tdc-row,
  body .td-header-template-wrap .tdc-row,
  body .tdc-header-wrap .tdc-row {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1018px) {
  body .tdc_zone > .tdc-row,
  body .tdc-zone > .tdc-row,
  body .td-header-template-wrap .tdc-row,
  body .tdc-header-wrap .tdc-row {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Common tagDiv Builder header-menu fallback. */
body .td-header-template-wrap .tdb_header_menu,
body .tdc-header-wrap .tdb_header_menu {
  --td_theme_color: var(--newspaper-red) !important;
}

body .td-header-template-wrap .tdb_header_menu .tdb-menu > li > a,
body .tdc-header-wrap .tdb_header_menu .tdb-menu > li > a {
  color: #ffffff !important;
}

/* ========================================================================== 
   V3 HEADER FIX - TRUE FULL-WINDOW HEADER + MENU
   Covers both the classic Newspaper header and TagDiv Cloud/Header Builder.
   ========================================================================== */

/* ----- Classic Newspaper header ----- */
body #td-outer-wrap .td-header-wrap,
body #td-outer-wrap .td-header-wrap > .td-banner-wrap-full,
body #td-outer-wrap .td-header-wrap > .td-logo-wrap-full,
body #td-outer-wrap .td-header-wrap > .td-header-menu-wrap-full,
body #td-outer-wrap .td-header-wrap .td-header-menu-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The classic navigation is itself a .td-container. Override the global
   content gutter here so the menu row really spans the browser width. */
@media (min-width: 768px) {
  body #td-outer-wrap .td-header-wrap .td-header-main-menu.td-container,
  body #td-outer-wrap .td-header-wrap .td-header-main-menu {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 72px !important;
  }

  body #td-outer-wrap .td-header-menu-no-search .td-header-main-menu.td-container,
  body #td-outer-wrap .td-header-menu-no-search .td-header-main-menu {
    padding-right: 24px !important;
  }
}

/* Make the masthead/logo wrapper itself full width as well. */
body #td-outer-wrap .td-header-wrap .td-header-sp-logo,
body #td-outer-wrap .td-header-wrap .td-logo-text-wrap {
  width: 100% !important;
  max-width: none !important;
}

/* ----- TagDiv Cloud / Header Builder ----- */
body .td-header-template-wrap,
body .tdb-header-template-wrap,
body .tdc-header-wrap,
body .tdc-header-template,
body .td-header-desktop-wrap,
body .td-header-mobile-sticky-wrap {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  right: auto !important;
}

/* Header-builder zones and rows must not inherit the regular page content
   width.  Full viewport width, with small safe padding instead. */
body .td-header-template-wrap .tdc_zone,
body .td-header-template-wrap .tdc-zone,
body .td-header-template-wrap .tdc_zone_inner,
body .td-header-template-wrap .tdc-zone-inner,
body .tdb-header-template-wrap .tdc_zone,
body .tdb-header-template-wrap .tdc-zone,
body .tdc-header-wrap .tdc_zone,
body .tdc-header-wrap .tdc-zone,
body .tdc-header-template .tdc_zone,
body .tdc-header-template .tdc-zone {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 768px) {
  body .td-header-template-wrap .tdc-row,
  body .td-header-template-wrap .tdc-row-composer,
  body .tdb-header-template-wrap .tdc-row,
  body .tdb-header-template-wrap .tdc-row-composer,
  body .tdc-header-wrap .tdc-row,
  body .tdc-header-wrap .tdc-row-composer,
  body .tdc-header-template .tdc-row,
  body .tdc-header-template .tdc-row-composer,
  body .td-header-desktop-wrap .tdc-row,
  body .td-header-desktop-wrap .tdc-row-composer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Remove fixed inner limits specifically inside a Header Builder template. */
@media (min-width: 768px) {
  body .td-header-template-wrap .vc_inner,
  body .td-header-template-wrap [class*="absolute_inner"],
  body .tdb-header-template-wrap .vc_inner,
  body .tdb-header-template-wrap [class*="absolute_inner"],
  body .tdc-header-wrap .vc_inner,
  body .tdc-header-wrap [class*="absolute_inner"] {
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
  }
}

/* Cloud header menu block: use the newspaper red and paint it edge-to-edge
   even when the saved Cloud Template placed the block inside a narrow column. */
body .td-header-template-wrap .tdb_header_menu,
body .tdb-header-template-wrap .tdb_header_menu,
body .tdc-header-wrap .tdb_header_menu,
body .td-header-desktop-wrap .tdb_header_menu,
body .td-header-mobile-sticky-wrap .tdb_header_menu {
  --td_theme_color: var(--newspaper-red) !important;
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, #d71920 0%, var(--newspaper-red) 55%, #ad0c19 100%) !important;
  box-shadow: 0 0 0 100vmax var(--newspaper-red), inset 0 -3px 0 var(--newspaper-red-dark) !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Some Cloud templates place the red background on the row/column rather than
   the menu block. Modern browsers can identify that row directly. */
body .td-header-template-wrap .tdc-row:has(.tdb_header_menu),
body .tdb-header-template-wrap .tdc-row:has(.tdb_header_menu),
body .tdc-header-wrap .tdc-row:has(.tdb_header_menu),
body .td-header-desktop-wrap .tdc-row:has(.tdb_header_menu) {
  background: linear-gradient(180deg, #d71920 0%, var(--newspaper-red) 55%, #ad0c19 100%) !important;
}

/* Ensure Header Builder menu text is readable on red. */
body .tdb_header_menu .tdb-menu > li > a,
body .tdb_header_menu .tdb-menu > li > a .tdb-menu-item-text,
body .tdb_header_menu .tdb-menu > li > a .tdb-sub-menu-icon,
body .tdb_header_menu .tdb-menu > li > a .tdb-menu-more-subicon {
  color: #ffffff !important;
}

body .tdb_header_menu .tdb-menu > li:hover > a,
body .tdb_header_menu .tdb-menu > li.current-menu-item > a,
body .tdb_header_menu .tdb-menu > li.current-menu-ancestor > a,
body .tdb_header_menu .tdb-menu > li.tdb-hover > a {
  background-color: var(--newspaper-red-dark) !important;
  color: #ffffff !important;
}

/* Give the Cloud masthead/logo row a clean newspaper-paper background across
   the complete viewport. */
body .td-header-template-wrap .tdb_header_logo,
body .tdb-header-template-wrap .tdb_header_logo,
body .tdc-header-wrap .tdb_header_logo,
body .td-header-desktop-wrap .tdb_header_logo {
  position: relative !important;
  z-index: 1 !important;
}

body .td-header-template-wrap .tdb_header_logo:before,
body .tdb-header-template-wrap .tdb_header_logo:before,
body .tdc-header-wrap .tdb_header_logo:before,
body .td-header-desktop-wrap .tdb_header_logo:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

/* Sticky/affix headers need the same viewport treatment. */
body .td-affix,
body .td-header-wrap .td-affix,
body .td-header-template-wrap .tdc-zone-sticky,
body .tdb-header-template-wrap .tdc-zone-sticky,
body .tdc-header-wrap .tdc-zone-sticky {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(180deg, #d71920 0%, #ad0c19 100%) !important;
}

@media (max-width: 767px) {
  body .td-header-template-wrap,
  body .tdb-header-template-wrap,
  body .tdc-header-wrap,
  body .tdc-header-template,
  body .td-header-mobile-sticky-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .td-header-template-wrap .tdc-row,
  body .td-header-template-wrap .tdc-row-composer,
  body .tdb-header-template-wrap .tdc-row,
  body .tdb-header-template-wrap .tdc-row-composer,
  body .tdc-header-wrap .tdc-row,
  body .tdc-header-wrap .tdc-row-composer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
