/* Family Weather Master Controls
   Edit these variables for full global control. */
:root {
  --fw-page-bg: #071b33;
  --fw-page-text: #eaf3ff;
  --fw-muted-text: rgba(234, 243, 255, 0.78);
  --fw-page-overlay: rgba(7, 27, 51, 0.12);

  --fw-accent: #8cd7ff;
  --fw-link: #cceaff;

  --fw-card-bg: transparent;
  --fw-card-border: rgba(185, 230, 255, 0.2);
  --fw-card-text: #eaf3ff;
  --fw-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);

  --fw-nav-bg: rgba(7, 18, 38, 0.78);
  --fw-nav-border: rgba(255, 255, 255, 0.28);
  --fw-nav-text: #ffffff;
}

body {
  color: var(--fw-page-text);
  background: var(--fw-page-bg);
}

/* Layer stack: video(0) -> single overlay(1) -> UI(header/nav 2000+) */
#fw-bg-video {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0 !important;
  pointer-events: none !important;
}

#fw-bg-image {
  position: fixed !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: var(--fw-bg-image-url, none);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Disable template overlay layers; use one global controlled overlay */
.sw-overlay,
.overlay,
.site-overlay,
.bg-overlay,
.page-overlay {
  display: none !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--fw-page-overlay);
  pointer-events: none !important;
}

#wrapper,
main,
section,
footer {
  position: relative;
  z-index: 10;
}

header,
nav {
  position: relative;
  z-index: 2000 !important;
}

/* Mobile nav: always-visible, clickable hamburger */
@media (max-width: 1100px) {
  .menu_side_area {
    display: block !important;
    z-index: 2100 !important;
  }

  #menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    border-radius: 10px;
    border: 1px solid var(--fw-nav-border);
    background: var(--fw-nav-bg);
    color: var(--fw-nav-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    z-index: 2100 !important;
  }

  #menu-btn::before {
    content: "\2630" !important;
    font-family: inherit !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  header.menu-open #menu-btn::before,
  #menu-btn.menu-open::before,
  header.fw-nav-open #menu-btn::before {
    content: "\2715" !important;
    font-size: 18px !important;
  }

  #mainmenu {
    display: none !important;
  }

  header.menu-open #mainmenu,
  header.menu-open #mainmenu.nav-displayed,
  header.menu-open #mainmenu[data-visible="true"],
  header.fw-nav-open #mainmenu {
    position: absolute !important;
    top: calc(100% + 10px);
    left: 12px;
    right: 12px;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    z-index: 2100;
    border-radius: 14px;
    border: 1px solid var(--fw-nav-border);
    background: var(--fw-nav-bg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  }

  header.fw-nav-open #mainmenu > li > a.menu-item {
    width: 100%;
    padding: 10px 8px !important;
    white-space: nowrap;
    color: var(--fw-nav-text) !important;
  }
}

/* Desktop/tablet: hide hamburger, keep normal nav visible */
@media (min-width: 1101px) {
  #menu-btn,
  .menu_side_area {
    display: none !important;
  }

  #mainmenu {
    display: flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Bootstrap navbar fallback icon */
.navbar .navbar-toggler {
  z-index: 2100 !important;
}

#fw-account-slot,
#fw-account-slot .fw-account-icon,
.nav-actions {
  position: relative;
  z-index: 2100 !important;
}

.navbar .navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar .navbar-toggler-icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

:root[data-fw-nav-icon='dark'] .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Global card/box color system */
.bg-dark-2,
.bg-dark-2.rounded-1,
.bg-dark-1,
.bg-dark,
.bg-dark-3,
.card,
.hero-box,
.fw-card,
.fw-box,
.panel,
.widget,
.feature-card,
.my-events-card,
#fw-rightnow,
#fw-forecast,
#fw-forecast .fw-forecast-tile,
#fw-hourly-row .hour-chip,
#fw-favorites-strip .fw-fav-pill {
  background: var(--fw-card-bg) !important;
  border-color: var(--fw-card-border) !important;
  color: var(--fw-card-text) !important;
  box-shadow: var(--fw-card-shadow) !important;
}

/* Remove tint overlays that block true card color */
.bg-dark-2::before,
.bg-dark-2::after,
.bg-dark-2.rounded-1::before,
.bg-dark-2.rounded-1::after,
.bg-dark-1::before,
.bg-dark-1::after,
#fw-rightnow::before,
#fw-rightnow::after,
#fw-forecast::before,
#fw-forecast::after {
  content: none !important;
  display: none !important;
}

/* Remove subtitle bracket styling */
.subtitle::before,
.subtitle::after,
.section-title::before,
.section-title::after {
  content: none !important;
  display: none !important;
}

/* Keep text readable inside cards; user controls color values directly */
.bg-dark-2 *,
.bg-dark-2.rounded-1 *,
.bg-dark-1 *,
.card * {
  color: inherit !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bg-dark-2 .small,
.bg-dark-2.rounded-1 .small,
.bg-dark-1 .small,
.card .small,
.text-muted {
  color: var(--fw-muted-text) !important;
}

.bg-dark-2 a,
.bg-dark-2.rounded-1 a,
.bg-dark-1 a,
.card a {
  color: var(--fw-link) !important;
}

#fw-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}

#wrapper, header, nav, section, footer {
  position: relative;
  z-index: 10;
}

/* ===== FW OVERLAY KILL SWITCH ===== */
:root {
  --fw-overlay-opacity: 0;
  --fw-site-stage-bg: none;
  --fw-nav-h: 72px;
  --fw-nav-h-m: 62px;
}

@media (max-width: 1100px){
  :root{
    --fw-nav-h: var(--fw-nav-h-m);
  }
}

.overlay,
.page-overlay,
.site-overlay,
.sw-overlay,
.bg-overlay,
.bg-tint,
.bg-layer,
#overlay,
#page-overlay {
  display: none !important;
}

html::before,
body::before,
#wrapper::before,
#main::before {
  opacity: var(--fw-overlay-opacity) !important;
  background: rgba(0, 0, 0, 1) !important;
  pointer-events: none !important;
}

.bg-dark-0::before, .bg-dark-1::before, .bg-dark-2::before, .bg-dark-3::before,
.bg-dark-0::after,  .bg-dark-1::after,  .bg-dark-2::after,  .bg-dark-3::after,
.bg-dark-2.rounded-1::before, .bg-dark-2.rounded-1::after,
#fw-rightnow::before, #fw-rightnow::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#fw-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#wrapper, header, nav, section, footer {
  position: relative;
  z-index: 10;
}

#menu-btn, .menu-btn, .nav-toggle, .profile-avatar, .avatar, .navbar, header * {
  position: relative;
  z-index: 20;
}

.overlay, .page-overlay, .site-overlay, body::before, #wrapper::before {
  pointer-events: none !important;
}

header, nav, .de-flex, .de-flex-col, #menu-btn, .menu-btn, .nav-toggle, .profile-avatar, .avatar {
  position: relative !important;
  z-index: 9999 !important;
}

body::before, #wrapper::before, .overlay, .page-overlay, .site-overlay {
  pointer-events: none !important;
  z-index: 1 !important;
}

#fw-stage{
  position: relative;
  background-color: transparent !important;
  background-image: var(--fw-stage-bg, none) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  overflow: hidden;
  margin-top: var(--fw-nav-h) !important;
}

#fw-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

#fw-stage > * {
  position: relative;
  z-index: 2;
}

#fw-stage > section {
  background: transparent !important;
}

body[data-fw-bg-active="1"] .section-dark.bg-dark,
body[data-fw-bg-active="1"] .bg-dark.section-dark {
  background: transparent !important;
}

body[data-fw-bg-active="1"] #section-hero {
  background-image: var(--fw-site-stage-bg, none) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}

body[data-fw-bg-active="1"] #section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

body[data-fw-bg-active="1"] #section-hero > * {
  z-index: 2;
}

body[data-fw-bg-active="1"] #section-hero .abs.abs-centered {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 3 !important;
}

body[data-fw-bg-active="1"] #section-hero .container,
body[data-fw-bg-active="1"] #section-hero .row,
body[data-fw-bg-active="1"] #section-hero .col-lg-12 {
  align-items: center;
}

#wrapper::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--fw-nav-h);
  bottom: 0;
  background-image: var(--fw-site-stage-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* === FINAL OVERLAY REMOVAL (SITEWIDE) === */
:root {
  --fw-nav-bg: rgba(0, 0, 0, 0.72);
  --fw-nav-text: #ffffff;
  --fw-nav-text-muted: rgba(255, 255, 255, 0.85);
}

body::before,
#wrapper::before,
#content::before,
.main::before,
.section::before,
.hero::before,
.bg-dark::before,
.bg-dark-1::before,
.bg-dark-2::before,
.bg-dark-3::before,
.bg-dark::after,
.bg-dark-1::after,
.bg-dark-2::after,
.bg-dark-3::after,
.overlay,
.site-overlay,
.page-overlay,
.bg-overlay,
.sw-overlay,
#fw-day-overlay {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* keep weather image visible with no extra blue wash */
#fw-stage,
#section-hero,
#wrapper::after,
#fw-bg {
  filter: none !important;
}

header,
.header,
.navbar,
nav,
#topbar,
.topbar {
  background: var(--fw-nav-bg) !important;
  color: var(--fw-nav-text) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

header a,
.navbar a,
nav a,
#topbar a,
.topbar a {
  color: var(--fw-nav-text-muted) !important;
}

header a:hover,
.navbar a:hover,
nav a:hover {
  color: var(--fw-nav-text) !important;
}

.hero h1,
.hero h2,
.hero p,
.hero .lead,
.hero .subtitle {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* suppress remaining template blue tint layers */
#section-hero::before,
#section-hero::after,
.gradient-edge-top,
.gradient-edge-bottom,
.gradient-edge-start,
.gradient-edge-end,
.de-gradient-edge-bottom,
.radial-gradient-color,
.color-overlay,
.color-overlay-2,
.overlay-bg,
.overlay-gradient,
.overlay-solid {
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
  pointer-events: none !important;
}