/* This forces the browser to include padding/borders INSIDE the width */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* CSS Document - Updated for Full Width */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  background: url('skycam/cam_1.jpg') no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: rgba(255,255,255, 0.8);
}

#wrapper {
  margin: 0 auto;
  width: 98%;
  max-width: 1600px;
  overflow-x: hidden;
  position: relative;
}

/* Header & Sidebar alignment */
#main_header {
  float: left;
  width: calc(100% - 370px); 
  height: 165px;
  background: url('images/clouds_header-small.jpg') repeat-x;
  font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#main_header h1 { margin: 20px 15px 0 30px; padding: 0; font-size: 175%; }
#main_header h2 { margin: 0 0 0 30px; padding: 10px 0 0 0; font-size: 100%; color: #666f73; font-weight: bold; }

#headerSkyCam {
  float: right;
  width: 350px;
}

#main_topmenu {
  float: left;
  width: calc(100% - 370px);
  margin: 0 0 0 0;
  font-size: 14px;
  border-top: 2px solid #cbcbcb;
  border-bottom: 1px solid #dfdfdf;
  background-color: rgba(255,255,255, 1);
}
#homelink {padding-left:22px !important; background:url('images/home_arrow.gif') no-repeat left center}
#homelink:hover {background:url('images/home_arrow.gif') no-repeat left center !important}

#dropmenu {
  width: 100%;
  font-weight: bold;
  list-style: none;
  margin: 0;
  padding: 0;
}
#dropmenu a {display:block; padding:3px 8px; color:#3a4656; text-decoration:none; } 
#dropmenu ul {margin:0; padding:0; list-style:none; line-height:20px; z-index:3;  font-weight:bold; background:#fff; position:absolute; display:none; top:28px; left:-1px;}
#dropmenu li {float:left; position:relative;  display:block} 
#dropmenu li ul {border-top:1px solid #595f68; border-bottom:1px solid #595f68; width:167px;} 
.mobileshow {
  display: none !important;
}

/* Transparent container so your background shows through */
.iframe-container {
    position: relative;
    background: transparent !important; 
    min-height: 150px; /* Gives the spinner a 'home' while loading */
    width: 100%;
}

/* The Spinner - No change needed here, but ensure z-index is lower than iframe */
.loader {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(255, 255, 255, 0.3); /* Semi-transparent ring */
    border-top: 4px solid #3498db; /* Solid blue spinning part */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    z-index: 1; 
}

/* Ensure the iframe sits ABOVE the spinner so it hides it naturally */
#main iframe, .wxdatabox iframe, #forecast iframe, #wxdatasummary iframe {
    position: relative;
    z-index: 2;
    background: transparent; /* Ensures the iframe itself doesn't have a white background */
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Main Content Area */
#main {
  float: left;
  width: calc(100% - 370px);
  background-color: rgba(0,0,0, 0.1);
  min-height: 800px;
}

#UpdateMsg {
	float: left;
	width: calc(100% - 154px);
	height: 28px;
	padding:4px 0 0 5px;
	background-color:rgba(255,255,255, 0.8);
	font-size:75%;
}
#RefreshButton {
    float: left;
    position: relative;
    z-index: 1000;
    text-align: right;
    width: 154px;
    height: 28px;
    background-color: rgba(255,255,255, 0.8);
    cursor: pointer;
}
#RefreshButton input {
    margin: 0;
}


/* Center all weather widgets/iframes */
iframe {
    display: block;
    vertical-align: bottom;
}

/* Center all weather widgets/iframes */
#main iframe, .wxdatabox iframe, #forecast iframe, #wxdatasummary iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

#side_bar {
  float: right;
  width: 350px;
  background-color: rgba(255,255,255, 0.7);
}

/* Enhanced Weather Alerts */
#alerts {
    padding: 0;
    border: 3px solid #FF0000; 
    font-size: 90%;
    min-height: 150px;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
}
#alerts h3 {
    margin: 0; 
    padding: 10px; 
    font-size: 110%; 
    background-color: #FF0000; 
    color: #FFFFFF; 
    text-align: center;
    text-transform: uppercase;
}
#alerts h3 a {
    color: #FFFFFF !important;
    text-decoration: none;
}
#alerts .alerttext {
    padding: 10px;
    line-height: 1.4;
}
#alerts .alerttext a {
    color: #FF0000;
    font-weight: bold;
}
/* This makes the Alert link look like a bold warning button */
#alerts a {
    text-decoration: none;
    color: #FF0000;
    font-weight: bold;
}
#alerts a:hover {
    text-decoration: underline;
}
#aurora > p {
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
}
#aurora > p > a {
  text-decoration: none;
  color: #FF0000;
  font-weight: bold;
}


/* --- Air Quality Section --- */
#airquality {
  border: 3px solid #0000FF;
  font-size: 90%;
  min-height: 100px;
  text-align: center;
  background-color: rgba(255,255,255, 0.7);
  overflow: hidden;
  margin-top: 15px;
}
#airquality > h3 {
  margin: 0;
  padding: 10px;
  font-size: 110%;
  background-color: #0000FF;
  text-transform: uppercase;
  color: #FFFFFF;
}
#airquality > h3 a {
  color: #FFFFFF !important;
  text-decoration: none;
}
#airquality > p {
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
}
/* Style only the links you wrote, not links inside the widget */
#airquality > p > a {
  text-decoration: none;
  color: #0000FF;
  font-weight: bold;
}
/* Centering the Widget Container without breaking its insides */
#PurpleAirWidget_4327_module_AQI_conversion_C0_average_10_layer_standard {
  margin: 10px auto !important;
  display: table !important; /* This centers it perfectly without affecting children */
  text-align: left; /* Restores internal widget alignment */
}
/* Centering the Widget Container safely */
#airquality {
  display: flex;
  flex-direction: column; /* Stack header, text, and widget vertically */
  align-items: center;    /* This is the magic line that centers everything horizontally */
}
/* Ensure the header and paragraphs still stretch correctly */
#airquality > h3, #airquality > p {
  width: 100%;
}
/* Let the widget be its own size, but centered by the flexbox above */
#PurpleAirWidget_4327_module_AQI_conversion_C0_average_10_layer_standard {
  margin: 10px 0 !important;
  text-align: left;
}

/* --- Aurora Section --- */
#aurora {
  border: 3px solid #17611a;
  font-size: 90%;
  min-height: 100px;
  text-align: center;
  background-color: rgba(255,255,255, 0.7);
  overflow: hidden;
  margin-top: 15px;
}
#aurora > h3 {
  margin: 0;
  padding: 10px;
  font-size: 110%;
  background-color: #17611a;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none;
}
#aurora > h3 a {
  color: #FFFFFF !important;
  text-decoration: none;
}
#aurora > p {
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
}
#aurora > p > a {
  text-decoration: none;
  color: #17611a;
  font-weight: bold;
}
/* --- Radar Map Section --- */
#radarmap {
  border: 3px solid #94731f;
  font-size: 90%;
  min-height: 100px;
  text-align: center;
  background-color: rgba(255,255,255, 0.7);
  overflow: hidden;
  margin-top: 15px;
}
#radarmap > h3 {
  margin: 0;
  padding: 10px;
  font-size: 110%;
  background-color: #94731f;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none;
}
#radarmap > h3 a {
  color: #FFFFFF !important;
  text-decoration: none;
}
#radarmap > p {
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
}
#radarmap > p > a {
  text-decoration: none;
  color: #94731f;
  font-weight: bold;
}



.phoneshow {
      display: none !important;
}
#wxdatasummary, #SkyCam, #main_footer {
  clear: both;
  width: 100% !important;
  float: none !important;
  display: block;
}

/* Make images and iframes responsive */
#wxdata, #forecast {
  width: 100%;
}

#wxdata {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

#wxdata .iframe-container {
    min-height: 100px; /* Reduced from 150px or 200px */
    margin-bottom: 0px;
}

#wxdata iframe {
    /* Set the maximum bounds */
  max-width: 1050px;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: none;
}
.wxdatabox {
  width: 100% !important;
  max-width: 100%;
}

#wxdatasummary iframe {
    display: block;
    max-width: 1035px;
    margin-top: 0px;
    border-top: 1px solid #cbcbcb;
}
#wxdatasummary h3 {
    margin-bottom: 0 !important;
    padding-bottom: 10px;
}

.SkyCamPic {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.SkyCamPic img {
  width: auto;
  max-width: 100%; 
  
  /* MATH: 100vh (full screen) minus ~150px for the header/menu/titles */
  max-height: calc(100vh - 100px); 
  
  display: block;
  margin: 0 auto; /* Keeps it centered */
  object-fit: contain; /* Ensures the image isn't distorted */
}

.headerCamContainer img {
  width: 100%;
  height: auto;
}

#main_footer {
  clear: both;
  width: 100%;
  background-color: rgba(255,255,255, 0.7);
}

/* Addtional Weather Links */
.boxgroup {
  width: 100%; 
  height: auto; 
  min-height: 115px; 
  display: flex; 
  justify-content: flex-start; /* 'flex-start' is more standard than 'left' */
  flex-wrap: wrap;
}

.boxlinks {
  width: 114px; 
  height: 114px; 
  padding: 1px;
}

.boxlinks img {
  width: 100%; 
  height: auto;
  display: block;
}

/* Reset margins for all headings and paragraphs to prevent "layout drift" */
h1, h2, h3, h4, p { 
  margin: 0; 
}

.SectionTitle {
  background-color: rgba(255,255,255, 0.7);
  padding: 10px 0 0 5px;
  margin-top: 15px;
}
.SectionTitle h1, .SectionTitle h2, .SectionTitle h3 {
  font-size: 130%;
  padding: 0;
  margin: 0;
}
.SectionTitle p {
  font-size: 80%;
  padding: 0 0 15px 0;
  margin: 0;
}

/* SubTitle Styling */
.SubTitle {
  background-color: rgba(255,255,255, 0.7);
  font-size: 100%;
  padding: 0 0 0 5px;
  font-weight: bolder;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
        width: fit-content; /* Shrinks the white box to the image size */
        max-width: 95%;
		position: relative;
		margin: 2% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}
	.modalDialog > div img {
        max-width: 100%;
        max-height: 90vh; /* Fits 90% of the screen height */
        width: auto;
        height: auto;
    }
	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }

.modalDialogr {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity: 0;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    display: flex; /* Centers the child div */
    align-items: center;
    justify-content: center;
}

.modalDialogr:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialogr > div {
    width: fit-content; /* Shrinks to image width */
    max-width: 90%;    /* Leaves a small gap on sides */
    position: relative;
    padding: 15px 20px;
    border-radius: 10px;
    background: #fff;
    background: linear-gradient(#fff, #999);
    text-align: center;
}

/* This is the magic fix for the large radar image */
.modalDialogr > div img {
    display: block;
    margin: 10px auto;
    max-width: 100%;   /* Won't go wider than the modal */
    max-height: 80vh;  /* Won't go taller than 80% of screen height */
    height: auto;      /* Keeps aspect ratio */
    width: auto;
}

.back-to-top {
  position: fixed; 
  bottom: 25px;      
  right: 25px;       
  z-index: 999;      
  
  /* Styling */
  background-color: rgba(0, 0, 255, 0.7); /* Matching your Air Quality blue */
  color: white;
  width: 45px;
  height: 45px;
  line-height: 42px; /* Centers the arrow vertically */
  text-align: center;
  border-radius: 50%; /* Circular button */
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  
  /* Smooth transitions */
  display: none;    
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background-color: rgba(0, 0, 139, 0.9); /* Darker blue on hover */
  transform: translateY(-5px); /* Subtle "lift" effect */
  color: white;
}


/* Container that allows the side-swipe */
.summary-scroll-wrapper {
    width: 100%;
    overflow-x: auto; /* The magic line for scrolling */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iPhones */
    border-top: 1px solid #cbcbcb;
    background-color: rgba(255,255,255, 0.5);
}

/* Ensure the iframe stays at a readable desktop width inside the scroller */
.summary-scroll-wrapper iframe {
    max-width: none !important; /* Overrides your global 'max-width: 100%' */
    display: block;
}

@media (max-width: 1024px) {
    /* Top Hint: Now attached to the scroller so it sits below the H3 title */
    .summary-scroll-wrapper::before,
    #wxdatasummary::after {
        display: block;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        color: #007BFF;
        padding: 12px 0;
        background-color: rgba(255, 255, 255, 0.85) !important;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Formatting for the Top Hint (attached to wrapper) */
    .summary-scroll-wrapper::before {
        content: "\2190  Swipe left/right for full records  \2192";
        border-bottom: 1px solid #cbcbcb;
    }

    /* Formatting for the Bottom Hint (attached to main box) */
    #wxdatasummary::after {
        content: "\2190  Swipe left/right for full records  \2192";
        border-top: 1px solid #cbcbcb;
    }

    /* Ensure the wrapper doesn't have a double background */
    .summary-scroll-wrapper {
        background-color: rgba(255, 255, 255, 0.7);
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* --- Tablet & Large Phone Fix (Under 1000px) --- */
@media screen and (max-width: 1000px) {
  #main, #side_bar, #main_header, #main_topmenu, #headerSkyCam {
    width: 100% !important;
    float: none !important;
  }

  #headerSkyCam {
    display: none !important; /* This completely removes it from the layout */
  }
  
  #UpdateMsg {
    height: auto;
    width: 100%;
  }

  #UpdateMsg {
    padding-bottom: 5px;
  }
  
  .mobileshow {
      display: list-item !important;
  }
  .phoneshow {
      display: none !important;
  }
  #RefreshButton {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
}

/* --- Smartphone Specific Adjustments (Under 768px) --- */
@media (max-width: 480px) {
  #headerSkyCam {
    display: none !important; /* This completely removes it from the layout */
  }
  body {
    font-size: 16px; /* Making it "a bit larger" as requested */
  }
  h1 { font-size: 22px; }
  h2 { font-size: 16px; }
  h3 { font-size: 16px; }

  #main_header h1 { margin: 5px 15px 0 30px; padding: 0; font-size: 175%; }
  #main_header h2 { margin: 0 0 0 30px; padding: 10px 0 0 0; font-size: 100%; color: #666f73; font-weight: bold; }


  /* Center all weather widgets/iframes */
  #main iframe, .wxdatabox iframe, #forecast iframe, #wxdatasummary iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  #wxdata iframe {
    max-width: 340px;
    width: 100%;
    height: 560px;
    border: none;
  }
  .wxdatabox {
    width: 100% !important;
    max-width: 100%;
  }

  .mobileshow, .phoneshow {
      display: list-item !important;
  }
  .phonehide {
    display: none !important;
  }

  #forecastiframe {
    zoom: 0.8; /* Makes everything 25% smaller */
  }
  #forecastiframe {
    transform: scale(0.8); /* 20% smaller text */
    transform-origin: 0 0;
    width: 124%; /* Math: 100% divided by 0.8 */
    height: 425px; /* Adjust height as needed */
  }
  #forecast .SectionTitle {
    margin-top: 0px !important;
  }
  
}