/*
Theme Name:   Twenty Twenty-One Child
Template:     twentytwentyone
Version:      1.1
*/

/* ========================================
   1) E. COLI METER
   ======================================== */




.meter-message {
  margin-top: -11px !important;
  margin-bottom: 100px !important;
}

#ecoli-meter-wrapper{
  --meter-h:100px;
  position:relative;
  width:100%;
  max-width:65%;
  height:var(--meter-h);
  margin:2rem auto;
  background:linear-gradient(to right,#21bfc2 0%,#3dd4ac 25%,#a8d85d 50%,#dbeb36 75%,#edfc31 100%);
  overflow:visible;
}

/* Hide badges (✓ / ✕) */
#ecoli-meter-wrapper .overlay-badge { display: none !important; }

/* Ticks */
#ecoli-meter-wrapper .tick{
  position:absolute; top:0; bottom:0; width:2px; background:#000; z-index:2;
}
#ecoli-meter-wrapper .tick-split-top,
#ecoli-meter-wrapper .tick-split-bottom{
  position:absolute; width:2px; background:#000; z-index:2;
}
/* More middle gap around 126/886 so stacked text has room */
#ecoli-meter-wrapper .tick-split-top{ top:0; height:28%; }
#ecoli-meter-wrapper .tick-split-bottom{ bottom:0; height:28%; }

#ecoli-meter-wrapper .tick-short{
  position:absolute; bottom:0; height:10%; width:2px; background:#000; z-index:2;
}

/* Scale labels under bar (0, 500, 750, 1000+) */
#ecoli-meter-wrapper .threshold-label{
  position:absolute; top:100%; margin-top:0; transform:translateX(-50%);
  white-space:nowrap; font-size:.9em; color:#444; z-index:3; /* above arrow */
}

/* ===== Stacked inline labels INSIDE bar for 126/886 ===== */
#ecoli-meter-wrapper .inline-stack{
  position:absolute; top:50%; left:0;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  line-height:1.15; z-index:3;
}
#ecoli-meter-wrapper .inline-stack .inline-number{
  font-weight:800; font-size:1rem; color:#000;
}
#ecoli-meter-wrapper .inline-stack .inline-word{
  font-weight:600; font-size:.9rem; color:#000;
}

/* Old helpers not in use */
#ecoli-meter-wrapper .safe-top-label{ display:none; }
#ecoli-meter-wrapper .safe-bottom-label{ display:none; }

/* Overlays (icons) */
#ecoli-meter-wrapper .overlay{
  position:absolute; top:0; height:100%; left:0; width:0;
  pointer-events:none; z-index:1;
}
#ecoli-meter-wrapper .overlay-figure{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:calc(var(--meter-h)*0.78);
  display:inline-block;
}
#ecoli-meter-wrapper .overlay-figure img{
  height:100%; width:auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Arrow — below labels so it can’t cover “1000+” etc. */
#ecoli-meter-wrapper svg#ecoli-arrow{
  position:absolute; top:100%; left:0%; transform:translateX(-50%);
  height:clamp(32px,calc(var(--meter-h)*0.6),60px);
  transition:left 8s ease; z-index:2;
  pointer-events:none;
}

/* Reading */
#ecoli-reading{
  text-align:center; font-weight:700; margin-top:1.2rem;
  transition:color .3s; position:relative; z-index:4;
}

/* ---------- Phones ≤476px (extra-tight) ---------- */
@media (max-width: 476px){
  #ecoli-meter-wrapper{ --meter-h:92px; max-width:90%; margin:1rem auto; }
  #ecoli-meter-wrapper .tick-split-top{ height:18%; }
  #ecoli-meter-wrapper .tick-split-bottom{ height:18%; }
  #ecoli-meter-wrapper .inline-stack{ top:51%; }
  #ecoli-meter-wrapper .overlay-figure{ height:calc(var(--meter-h)*0.54); }
  #ecoli-meter-wrapper .inline-stack .inline-number{ font-size: clamp(13px, 4.0vw, 16px); }
  #ecoli-meter-wrapper .inline-stack .inline-word{   font-size: clamp(11px, 3.5vw, 14px); }
  #ecoli-meter-wrapper .threshold-label{ font-size:.72em; }
  #ecoli-reading{ margin-top: calc(32px + .6rem); }

  .meter-message { margin-top: 0 !important; margin-bottom: 35px !important; font-size: 0.7em; }
  .entry-content p { font-size: 0.7em !important; }
  h2 { font-size: 1.1em; }
	 h1 { font-size: 1.1em; }
  .site-name-class { font-size: 0.7em; }
  #colophon { margin-top: 5px; }
  h1.entry-title { font-size: 1.0em !important; }
}


.site-title {
  height: 100px;
  background: #60bfdc;
  color: #fff !important;
  padding-top: 31px;
  text-transform: math-auto !important;
  font-size: 0.8em;
  width:100% !important;
}



/* ---------- 480–767px ---------- */
@media (min-width:480px) and (max-width:767px){
  #ecoli-meter-wrapper{ --meter-h:64px; max-width:92%; margin:1.25rem auto; }
  #ecoli-meter-wrapper .tick,
  #ecoli-meter-wrapper .tick-short,
  #ecoli-meter-wrapper .tick-split-top,
  #ecoli-meter-wrapper .tick-split-bottom{ width:1px; }
  #ecoli-meter-wrapper .tick-split-top{ height:22%; }
  #ecoli-meter-wrapper .tick-split-bottom{ height:22%; }
  #ecoli-meter-wrapper .inline-stack{ top:54%; }
  #ecoli-meter-wrapper .inline-stack .inline-number{ font-size:.95rem; }
  #ecoli-meter-wrapper .inline-stack .inline-word{   font-size:.85rem; }
  #ecoli-meter-wrapper .overlay-figure{ height:calc(var(--meter-h)*0.70); }
  #ecoli-meter-wrapper .threshold-label{ font-size:.8em; }
	
	

	
}

/* ---------- 768–1199px ---------- */
@media (min-width:768px) and (max-width:1199px){
  #ecoli-meter-wrapper{ --meter-h:80px; max-width:75%; margin:1.75rem auto; }
  #ecoli-meter-wrapper .tick-split-top{ height:25%; }
  #ecoli-meter-wrapper .tick-split-bottom{ height:25%; }
  #ecoli-meter-wrapper .inline-stack{ top:52%; }
  #ecoli-meter-wrapper .threshold-label{ font-size:.85em; }
}

/* ---------- ≥1200px ---------- */
@media (min-width:1200px){
  #ecoli-meter-wrapper{ --meter-h:100px; max-width:65%; }
}

/* ========================================
   2) MAP
   ======================================== */

#rqmap{width:65%;margin:0 auto;height:420px;max-width:65%;}
@media (max-width:767px){ #rqmap{width:95%;max-width:95%;height:320px;} }
@media (min-width:768px){ #rqmap{width:65%;max-width:65%;height:420px;} }

.rqm-legend{
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  box-shadow:none !important;
  font:14px/1.4 system-ui,sans-serif;
  max-width:65%;
  margin:0 auto;
}
.rqm-legend .row{ display:flex; gap:8px; align-items:center; margin:4px 0; }
.rqm-legend .sw{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.2); }

/* Floating labels below popups */
.rqm-label{
  position:absolute; transform:translate(-50%,-100%);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.2);
  border-radius:6px; padding:2px 6px;
  font:12px/1.35 system-ui,sans-serif;
  box-shadow:0 1px 6px rgba(0,0,0,.15);
  pointer-events:none; white-space:nowrap;
  z-index:1 !important;
}
.mapboxgl-popup{ z-index:5 !important; position:relative; }

body{ font-size:20px; line-height:1.6; }
.entry-content h1,.entry-content h2{ font-size:1.5em!important; line-height:1.2; }
.entry-content h3{ font-size:1.0em!important; line-height:1.2; }
.entry-content p{ font-size:20px; }

/* --- Widen MAIN page content (you already had this) --- */
@media (min-width:1024px){
  .page-id-6{
    --global--content-size:65%;
    --responsive--aligndefault-width:65%;
  }
}

/* --- Google Maps InfoWindow: keep it inside the viewport --- */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c {
  max-width: min(92vw, 620px) !important;
  width: auto !important;
  box-sizing: border-box;
}
.gm-style .gm-style-iw-d { overflow: visible !important; }

/* Phones: narrower than screen and scroll instead of clipping */
@media (max-width: 600px) {
  .gm-style .gm-style-iw,
  .gm-style .gm-style-iw-c {
    max-width: calc(100vw - 24px) !important;
  }
  .gm-style .gm-style-iw-d { overflow: auto !important; }
  .mapboxgl-popup { max-width: calc(100vw - 24px) !important; }
  .mapboxgl-popup-content { overflow: auto; }
}

/* ========================================
   3) REGULAR PAGES WIDTH (FINAL, WORKING OVERRIDE)
   ======================================== */

@media (min-width:1024px){
  body.page:not(.home){
    --wp--style--global--content-size: 65vw !important;
    --wp--style--global--wide-size:    65vw !important;
    --global--content-size:            65%;
    --responsive--aligndefault-width:  65%;
    --responsive--alignwide-width:     65%;
  }
  body.page:not(.home) .entry-content .is-layout-constrained{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.page:not(.home) .entry-content .is-layout-constrained > *{
    max-width: 65vw !important;
    width: 65vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.page:not(.home) .entry-header.alignwide,
  body.page:not(.home) .entry-content,
  body.page:not(.home) .entry-content > *,
  body.page:not(.home) .entry-footer{
    max-width: 65vw !important;
    width: 65vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ========================================
   4) DYGRAPHS (cleaned)
   ======================================== */

/* Wrapper + chart basics */
.ecoli-graph-wrap { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.ecoli-graph      { position: relative; touch-action: pan-x; overscroll-behavior-y: contain; }
.ecoli-graph canvas { pointer-events: auto !important; }  /* keep canvases interactive */

/* Rollover legend (created in JS) */
.ecoli-graph .dg-legend{
  position:absolute; right:12px; top:8px; z-index:3; white-space:nowrap;
  pointer-events:none; font:700 13px/1.2 system-ui,sans-serif; color:#da772c;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* Axis labels */
.ecoli-graph-wrap .dygraph-ylabel{ transform: rotate(-90deg) !important; text-align:center; }
.ecoli-graph-wrap .dygraph-axis-label{ color:#333 !important; }

/* Put the key INSIDE the graph (even if it’s a sibling of the graph) */
.ecoli-graph-wrap > .ecoli-key,
.ecoli-graph .ecoli-key,
.ecoli-graph .inside-graph-key{
  position:absolute !important;
  top:23px !important;
  left:calc(var(--yaxis-w, 56px) + 8px) !important;
  width:clamp(150px, 28vw, 210px) !important;
  max-width:210px !important;
  padding:6px !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:none !important;
  z-index:3 !important;
  flex:none !important; /* ignore flex layout */
}
.ecoli-graph-wrap > .ecoli-key img,
.ecoli-graph .ecoli-key img,
.ecoli-graph .inside-graph-key img{ display:block !important; width:100% !important; height:auto !important; }

/* Ensure any older absolute rules don’t fight this */
#ecoli-wrap-1 .ecoli-key{ left:auto; top:auto; }

/* Reserve space below the graph at ALL widths so the absolute key
   never overlaps the next section (scales with viewport). */
.ecoli-graph-wrap{ margin-bottom: clamp(140px, 20vw, 240px) !important; }

/* Small-screen tune-ups */
@media (max-width: 600px){
  .ecoli-graph .dg-legend{ right:8px; top:6px; font:700 12px/1.2 system-ui,sans-serif; }
}

/* ========================================
   5) HEADINGS & MISC
   ======================================== */

h1{
  background:#60bfdc !important;
  height: 125px !important;
  line-height: 4em !important;
  color:#fff !important;
  text-align:center !important;
  padding-top:5px !important;
}


h1.entry-title { font-size: 1.8em !important; }





h2{
  background:#60bfdc !important;
  height:50px !important;
  color:#fff !important;
  text-align:center !important;
  padding-top:5px !important;
}



.site-video { width:100%; height:500px; }
.topmain   { height:100px; background:#60bfdc; padding-top:25px; }


.site-title {
  height: 100px!important;
  background: #60bfdc;
  color: #fff !important;
  padding-top: 31px!important;
  text-transform: math-auto !important;
  font-size: 1.5em;
}

#masthead  { height:162px; }



/* Make the site title bar as wide as content titles on mobile */
@media (max-width: 600px){
  /* give the header the same side padding as content so widths match */
  #masthead,
  #masthead .site-branding{
    padding: 0 12px !important;
    margin: 0 !important;
    height: auto !important;
  }

  .site-title{
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* matches H2 width inside the padded container */
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px 0 !important;

    height: auto !important;
    min-height: 68px !important;
    padding: 10px 16px !important;

    background: #60bfdc !important;
    color: #fff !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    font-size: clamp(1.05rem, 4.6vw, 1.35rem) !important;
  }

  .site-title a{
    display:block !important;
    width:100% !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  /* small breathing room below */
  #masthead{ padding-bottom: 8px !important; }
}

/* Mobile-only video height */
@media (max-width: 600px){
  .site-video{
    height: 246px !important; /* overrides desktop height only on small screens */
  }
  .site-video iframe,
  .site-video video{
    width: 100%;
    height: 100%;
    display: block;
  }
}


.site-title{
   
	  display:none !important;
}


#ecoli-wrap-1 {
  margin-bottom: 91px !important;
}
	
#site-navigation {
  margin: 0 auto !important;
}



#left-logo{
  width: 200px;
  height: 200px;
  display: block; /* needed if #left-logo is an <a> */
  background-image: url('https://2025.frenchbroadwaterquality.com/wp-content/uploads/2025/08/Division-of-Water-Resources-Logo-300x123-1.png');
  background-size: contain;     /* or 'cover' if you want it to fill */
  background-repeat: no-repeat;
  background-position: center;
	background-color:#fff;
}



#right-logo{
  width: 200px;
  height: 200px;
  display: block; /* keep if #right-logo is an <a> */
  background-image: url('https://2025.frenchbroadwaterquality.com/wp-content/uploads/2025/08/mtlogo40yrs.png');
  background-size: contain;   /* use 'cover' if you want it to fully fill */
  background-repeat: no-repeat;
  background-position: center;
	background-color:#fff;
}


#center-logo{
  width: 200px;
  height: 200px;
  display: block; /* keep if it's an <a> */
  background-image: url('https://2025.frenchbroadwaterquality.com/wp-content/uploads/2025/08/WNC-Recreational-Monitoring-Program-Logo_FINAL1-e1715615371295.jpg');
  background-size: contain;   /* use 'cover' if you want it to fully fill */
  background-repeat: no-repeat;
  background-position: center;
	background-color:#fff;
}


.header-logos{
  display: flex;
  align-items: center;
  justify-content: center; /* center the group */
  gap: 16px;               /* space between logos */
}




/* ~30% more space between the three logos */
.header-logos{
  gap: 100px !important; /* was 16px → 16 * 1.3 ≈ 21 */
}

/* (optional) also increase spacing a bit on mobile */
@media (max-width: 600px){
  .header-logos{ gap: 50px !important; }
}



/* Make the TT1 mobile menu modal sit on top of all content */
.menu-modal,
body.showing-menu-modal .menu-modal,
body.has-modal-open .menu-modal {
  position: fixed !important;
  inset: 0 !important;               /* top/right/bottom/left: 0 */
  z-index: 10000 !important;         /* above any graph/meter layers */
  background: #fff !important;       /* ensure a solid backdrop */
}

/* Safety: when the menu is open, ensure meter/graph UI can't float above it */
body.has-modal-open #ecoli-meter-wrapper,
body.has-modal-open #ecoli-meter-wrapper *,
body.showing-menu-modal #ecoli-meter-wrapper,
body.showing-menu-modal #ecoli-meter-wrapper * {
  z-index: 0 !important;
}


/* Mobile: shrink h1/h2 inside post/page content */
@media (max-width: 600px){

	
  .entry-content h1 {
    font-size: 1.2em !important;
    line-height: 4.5 !important;
  }

	
  .entry-content h2{
    font-size: 0.9em !important;
    line-height: 2.0 !important;
  }
}

/* Hide JUST the meter + graph while the mobile menu is open (TT1 adds these body classes) */
@media (max-width: 782px){
  body.showing-menu-modal #ecoli-meter-wrapper,
  body.has-modal-open     #ecoli-meter-wrapper,
  body.showing-menu-modal .ecoli-graph-wrap,
  body.has-modal-open     .ecoli-graph-wrap{
    display: none !important;
  }

  /* Make sure the modal itself is on top and full-viewport */
  body.showing-menu-modal .menu-modal,
  body.has-modal-open .menu-modal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: #fff !important;
  }
}



.bottom-menu { display:flex; justify-content:center; margin-top: 24px; }
.bottom-menu__list { display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.bottom-menu__list a { text-decoration:none; }



#colophon {
  margin-top: 0px;
}





.bottom-menu {
  margin-top: 102px!important;
}