/* 
* CSS for the weewx Standard skin
* 
*/
 
@keyframes blinker {
	0% { opacity: 1; }
	16% { opacity: 0.2; }	/* 1st blink */
	33% { opacity: 1; }
	50% { opacity: 0.2; }	/* 2nd blink */
	66% { opacity: 1; }
	83% { opacity: 0.2; }	/* 3rd blink */
	100% { opacity: 1; } 	/* Stay solid */
} 

/* Define color variables for dark and light themes */
:root {
    --text-color: hsl(200, 46%, 42%);      				/* default text				no name,	#3d6c87,  hsl(200, 46%, 42%)  */
    --bg-color: hsl(240, 100%, 99%);       				/* Background 				no name,	#fafaff,  hsl(240, 100%, 99%) */
    --header-color: hsl(210, 23%, 72%);      			/* Header text				no name,	#a8b8c8,  hsl(210, 23%, 72%)  */
    --header-bg-color: hsl(0, 0%, 0%);					/* Header background 		black,		#000000,  hsl(0, 0%, 0%)      */
    --border-color:	hsl(0, 0%, 0%);						/* Border					black,		#000000,  hsl(0, 0%, 0%)      */
    --masthead-text-color: hsl(200, 46%, 42%);  		/* Masthead text			no name,	#3d6c87,  hsl(202, 38%, 38%)  */
    --masthead-h1-bg-color: hsl(200, 46%, 42%);  		/* Masthead h1 background	no name,	#3d6c87,  hsl(202, 38%, 38%)  */
    --masthead-h3-bg-color: hsl(200, 46%, 42%));  		/* Masthead h3 background 	no name,	#5f8ea9,  hsl(202, 30%, 52%)  */
    --stats-label-color: hsl(124, 78%, 29%);			/* Stats label text			green,		#008000,  hsl(120, 100%, 25%) */
    --stats-data-color: hsl(207, 44%, 49%);				/* Stats label text			steelblue,	#4682b4,  hsl(207, 44%, 49%)  */
    --stats-current-color: hsl(0, 0%, 0%);				/* Stats text				black,		#000000,  hsl(0, 0%, 0%)      */
    --stats-current-border-color: hsl(0, 0%, 0%);		/* Current Stats border		palegreen,	#98fb98,  hsl(120, 93%, 79%)  */
    --stats-current-bkg-color: hsl(120, 93%, 79%);		/* Stats background			palegreen,	#98fb98,  hsl(120, 93%, 79%)  */
    --warning-color: hsl(0, 100%, 50%);					/* Warning	text			red,		#ff0000,  hsl(0, 100%, 50%)   */
    --forecast-day-color: hsl(0, 0%, 0%);      			/* Forecast text			black,		#000000,  hsl(0, 0%, 0%)      */    
    --forecast-forecast-color: hsl(0, 0%, 0%);      	/* Forecast text			black,		#000000,  hsl(0, 0%, 0%)      */    
    --cb-label-color: hsl(0, 0%, 0%);					/* Celestial body labels	black,		#000000,  hsl(0, 0%, 0%)      */
    --cb-data-color: hsl(207, 44%, 49%);				/* Celestial body data		steelblue,	#4682b4,  hsl(207, 44%, 49%)  */
    --button-color: hsl(0, 0%, 83%);					/* Button text				lightgray,	#d3d3d3,  hsl(0, 0%, 83%)     */
    --button-bg-color: hsl(0, 0%, 50%);					/* Button background        gray, 		#808080,  hsl(0, 0%, 50%)     */   
    color-scheme: light dark;   						/* Signal support to the browser */
	}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: hsl(200, 46%, 42%);      				/* default text				no name,	#3d6c87,  hsl(202, 38%, 38%)  */
		--bg-color: hsl(0, 0%, 0%);       					/* Background 				black,		#000000,  hsl(0, 0%, 0%)      */
		--header-color: hsl(210, 23%, 72%);      			/* Header text				no name,	#a8b8c8,  hsl(210, 23%, 72%)  */
		--header-bg-color: hsl(0, 0%, 33%);					/* Header background 		black,		#000000,  hsl(0, 0%, 0%)      */
		--border-color:	hsl(0, 0%, 33%);					/* Border					black,		#000000,  hsl(0, 0%, 0%)      */
		--masthead-text-color: hsl(200, 46%, 42%);  		/* Masthead text			no name,	#3d6c87,  hsl(202, 38%, 38%)  */
		--masthead-h1-bg-color: hsl(200, 46%, 42%);  		/* Masthead h1 background	no name,	#3d6c87,  hsl(202, 38%, 38%)  */
		--masthead-h3-bg-color: hsl(200, 46%, 42%);  		/* Masthead h3 background 	no name,	#5f8ea9,  hsl(202, 30%, 52%)  */
		--stats-label-color: hsl(124, 78%, 29%);			/* Stats label text			green,		#008000,  hsl(120, 100%, 25%) */
		--stats-data-color: hsl(207, 44%, 49%);				/* Stats label text			steelblue,	#4682b4,  hsl(207, 44%, 49%)  */
		--stats-current-color: hsl(0, 0%, 78%);				/* Stats text				black,		#000000,  hsl(0, 0%, 0%)      */
		--stats-current-border-color: hsl(120, 93%, 79%);	/* Current Stats border			palegreen,	#98fb98,  hsl(120, 93%, 79%)  */
		--stats-current-bkg-color: hsl(113, 22%, 29%);		/* Stats background			palegreen,	#98fb98,  hsl(120, 93%, 79%)  */
		--warning-color: hsl(0, 100%, 50%);					/* Warning	text			red,		#ff0000,  hsl(0, 100%, 50%)   */
		--forecast-day-color: hsl(0, 0%, 63%);      		/* Forecast text			black,		#000000,  hsl(0, 0%, 0%)      */    
		--forecast-forecast-color: hsl(0, 0%, 63%);     	/* Forecast text			black,		#000000,  hsl(0, 0%, 0%)      */    
		--cb-label-color: hsl(0, 0%, 63%);					/* Celestial body labels	black,		#000000,  hsl(0, 0%, 0%)      */
		--cb-data-color: hsl(207, 44%, 49%);				/* Celestial body data		steelblue,	#4682b4,  hsl(207, 44%, 49%)  */
		--button-color: hsl(0, 0%, 83%);					/* Button text				lightgray,	#d3d3d3,  hsl(0, 0%, 83%)     */
		--button-bg-color: hsl(0, 0%, 50%);					/* Button background        gray, 		#808080,  hsl(0, 0%, 50%)     */   
	}
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: var(--text-color);
    background-color: var(--bg-color);
}	

#masthead, #forecast, #stats, #almanac, #charts {
    margin: 1% 1% 0 1%;
    padding: 5px;
    text-align: center;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    background-color: var(--bg-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

#about {
	position: relative; /* Crucial: sets the boundary */
	width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}

#about table {
    border:thin;
	margin-left: auto;
    margin-right: auto;
}

.current-image {
	position: absolute;
	top: 10px;
	right: 10px;
	height: auto;
	width: 160px;
	overflow: hidden; /* Hides any part of the image that extends beyond the div */
}

.current-image img {
  width: 160px;
  height: auto;
  object-fit: contain;
}

/* Style the modal container */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Style the image and caption */
.modal-content, #caption {
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 95%;
    height: auto;
    color: #ccc;
    text-align: center; 
    object-fit: contain;
}

/* Close button styling */
.close {
    position: absolute;
    top: 15px; right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    cursor: pointer;
}

.warning {
	color: var(--warning-color);
    border: 1px solid var(--border-color);    
	padding: 5px;
    animation: blinker 12s ease-in-out forwards; /* cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards */
}

#forecast table {
    border: 1px solid var(--border-color);    
    border-collapse: collapse;
	width: 100%;
}

.forecast-day {
	width:8.5%;
    text-align: left;
	vertical-align: middle;
    padding: 2px;
	color: var(--forecast-day-color);
}

.forecast-conditions {
	width:35%;
    text-align: left;
	vertical-align: middle;
    padding: 2px;
	color: var(--forecast-forecast-color);
}

.forecast-icon {
    text-align: left;
	vertical-align: middle;
    padding: 4px;
	width: 5%;
}

.forecast-icon img {
	border: 1px solid var(--border-color);
	max-width: 66.7%;	/* Ensures the image doesn't exceed the container's width */
	height: auto;		/* Automatically adjusts height to maintain aspect ratio */
	display: block;	/* Optional: helps with centering or margin issues */
}

.stats table {
    border: 1px solid var(--border-color);    
    border-collapse: collapse;
	width: 100%;
}

.stats td {
    border: 1px solid var(--border-color);
    /*border-collapse: collapse;*/
    padding: 2px;
}

.header  {
    text-align:center;
	background-color: var(--header-bg-color);
    color: var(--header-color);
    font-size: 14pt;
    font-weight: bolder;
}

.stats-label {
    color: var(--stats-label-color);
}

.stats-data {
    color: var(--stats-data-color);
}

.stats-current {
	color: var(--stats-current-color);
	border-color: var(--stats-current-border-color);    
	background-color: var(--stats-current-bkg-color);
}

.cb-label {
	color: var(--cb-label-color);	
}

.cb-data {
	color: var(--cb-data-color);	
}

.cb-caption {
	color: var(--cb-label-color);
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
}

.celestial {
    display: grid;									/* Activates CSS Grid */
    grid-template-columns: 2fr 3fr 3fr 2fr;		/* Creates 4 columns of equal width (1 fraction each) */
    grid-template-rows: auto auto;					/* Two rows with fixed heights */
    gap: 10px;										/* Adds space between items */
}

.celestial_header {
	grid-column: span 4;							/* Make the first item span all 4 columns */
	text-align:center;
	background-color: var(--header-bg-color);
    color: var(--header-color);
    font-size: 14pt;
    font-weight: bolder;
}

.radar, .aurora {
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    place-items: center;
    font-style: italic;
    font-size: smaller;
    text-align: center;
    margin-top: 0;
}

.radar img, .aurora img {
	margin: 0 1% 1% 1%;
    border: 1px solid var(--border-color);
	max-width:100%;
    /* width: 250px; */
	height: auto;
	display: block;
    margin: 3px;
    padding: 3px;
}

.sun, .moon {
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    text-align: left;
}

#plots {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
#plots img {
    border: 1px solid var(--border-color);
    margin: 3px;
    padding: 3px;
}

/* Navigation bar (week, month, etc.) at the bottom */
.navbar {
    /* box-sizing: border-box; */
    display: flex;				/* Enables flexbox layout for children */
	justify-content: center;	/* Centers the buttons horizontally along the main axis */
    gap: 10px;					/* Adds space between the buttons (optional, adjust as needed) */
    margin: 5px;
    width: auto;
    padding: 5px 0px 5px 0px;
    text-align: center;
    /* clear: both; */
   /* border: 1px 0px 1px 0px solid var(--border-color); */    
}

.my-button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: base-select;
	color: var(--button-color); 				/* Button text color */
	height: 24px;
	text-align: center;
	display: flex;         					/* Enables Flexbox */
	justify-content: center;					/* Centers content horizontally */
	align-items: center;						/* Centers content vertically */
	background-color: var(--button-bg-color); /* Button background color */
	border-radius: 4px;						/* Rounded corners */
	cursor: pointer;
}

.my-option {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: base-select;
	color: var(--button-color); 				/* Button text color */
	height: 24px;
	text-align: center;
	display: flex;         					/* Enables Flexbox */
	justify-content: center;					/* Centers content horizontally */
	align-items: center;						/* Centers content vertically */
	background-color: var(--button-bg-color); /* Button background color */
	border-radius: 4px; 						/* Rounded corners */
	cursor: pointer;
}

.my-option option {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--button-color); 				/* Button text color */
	height: 24px;
	text-align: center;
	display: flex;         					/* Enables Flexbox */
	justify-content: center;					/* Centers content horizontally */
	align-items: center;						/* Centers content vertically */
	background-color: var(--button-bg-color); /* Button background color */
	border-radius: 4px; 						/* Rounded corners */
	cursor: pointer;
}

.my-option::picker(select) {
	appearance: base-select;
	text-align: center;
	display: flex;         					/* Enables Flexbox */
	justify-content: center;					/* Centers content horizontally */
	align-items: center;						/* Centers content vertically */
}

.my-option option:checked {
	background-color: #4CAF50; /* Example background color */
	color: white; /* Example text color */
}

.my-option option::checkmark {
	display: none;
}