/* Container */

	.container {
	    text-align: center;
		margin: 0 auto;
		max-width: 100%;
		width: 64em;
	}
		@media screen and (max-width: 1680px) {
			.container {
				width: 60em;
			}
		}
		@media screen and (max-width: 1280px) {
			.container {
				width: calc(100% - 150px);
			}
		}
		@media screen and (max-width: 980px) {
			.container {
				width: calc(100% - 100px);
			}

		}
		@media screen and (max-width: 736px) {
			.container {
				width: calc(100% - 70px);
			}
		}
		@media screen and (max-width: 480px) {
			.container {
				width: calc(100% - 20px);
			}

		}


/* Page Wrapper */

	#page-wrapper > section {
		margin-bottom: 0;
	}

/* Header */

    #header {
        text-align: center;
        font-size: 1.7em;
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        padding: 20px 0;
        background: var(--bg-white);
        margin: 0 auto;
    }
    
    #header .logo {
        position: relative;
        text-align: center;
    }
    
    #header .logo div {
        background: var(--bg-white);
        position: relative;
        display: inline-flex; /* Change to flexbox for alignment */
        align-items: center;  /* Vertically center items */
        justify-content: center; /* Horizontally center items */
        padding: 0 1.5em;
        top: -0.75em;
        gap: 10px; 
    }
    
    #header h1,h2 {
        line-height: 1;
    }
    
    #header .logo img {
        max-height: 100px; /* Size the logo */
        width: auto; /* Maintain aspect ratio */
    }
    
    .logo-mark {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
    }

    .wordmark {
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        font-size: 2.05rem;
        line-height: 1;
        white-space: nowrap;
        letter-spacing: 0.5px;
    }

    .wordmark-ha { color: var(--blue-darker); }
    .wordmark-data { color: var(--gold-dark); }

    #header .logo p {
        display: inline; /* Ensure text is inline with the logo */
        margin: 0; /* Reset margin for alignment */
        color: var(--gray-500);
        font-size: 1em; /* Adjust font size as needed */
        line-height: 1; /* Ensure no extra spacing */
    }

    /* Ensure the logo-container uses Flexbox */
    .logo-container {
        display: flex; /* Arrange items in a horizontal row */
        align-items: center; /* Vertically center the logo mark */
        justify-content: center; /* Center the content horizontally */
        gap: 10px; /* Add spacing between the logo and the text */
    }
    
    /* Styling for the logo link and image */
    .logo img {
        max-height: 100px; /* Set a max width for the logo image */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Ensure it respects box alignment rules */
    }
    
    /* Header contains only the logo mark; page context comes from each
       page's own in-page title and breadcrumbs (user decision 2026-08-16). */


/* Nav */

	body {
		padding-top: 3.25em;
	}

	#nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: var(--gray-200);
		background-image: url("images/overlay.png");;
		width: 100%;
		height: 3.25em;
		line-height: 3.25em;
		text-align: center;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		cursor: default;
	}

		#nav ul {
			position: relative;
			z-index: 1001;
		}

		#nav li {
			display: inline-block;
			margin: 0 0.3em 0 0.3em;
			top: 0;
			position: relative;
			-moz-transition: top .15s ease-in-out;
			-webkit-transition: top .15s ease-in-out;
			-o-transition: top .15s ease-in-out;
			-ms-transition: top .15s ease-in-out;
			transition: top .15s ease-in-out;
		}

			#nav li > ul {
				display: none;
			}

			#nav li a, #nav li span {
				-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				transition: background-color .075s ease-in-out, color .075s ease-in-out;
				position: relative;
				display: block;
				text-decoration: none;
				color: var(--text-secondary);
				top: -6px;
				padding: 6px 1.5em 0.25em 1.5em;
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
				outline: 0;
			}

			#nav li:hover, #nav li.active {
				top: 3px;
			}

			#nav li:hover a, #nav li:hover span {
				background: var(--green-dark);
				color: var(--text-white);
			}

			#nav li.active a, #nav li.active span {
				background: var(--green-dark);
				color: var(--text-white);
			}

			#nav li.current a {
				background: var(--green);
				color: var(--text-white);
			}

	.dropotron {
		list-style: none;
		background: var(--bg-dark);
		color: var(--text-white);
		border-radius: 6px;
		line-height: 2.75em;
		text-align: center;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		padding: 1em 0;
		text-align: left;
		min-width: 14em;
		margin-top: -1em;
		box-shadow: var(--shadow-medium)
	}

		.dropotron li {
			padding-left: 0;
		}

			.dropotron li > a, .dropotron li > span {
				display: block;
				color: var(--gray-200);
				text-decoration: none;
				padding: 0 1.25em;
			}

			.dropotron li:hover > a, .dropotron li:hover > span {
				color: var(--text-white);
				background: var(--green-dark);
			}

			.dropotron li.active > a, .dropotron li.active > span {
				color: var(--text-white);
				background: var(--green-dark);
			}

			.dropotron li:first-child {
				border-top: 0;
			}

		.dropotron.level-0 {
			margin-top: 1em;
			font-size: 0.9em;
		}

			.dropotron.level-0:before {
				content: '';
				position: absolute;
				left: 50%;
				margin-left: -1em;
				top: -0.65em;
				border-bottom: solid 1em var(--bg-dark);
				border-left: solid 1em transparent;
				border-right: solid 1em transparent;
			}


/* Main */

	#main {
		background: var(--bg-white);
		border-top: solid 5px var(--green);
		border-bottom: solid 5px var(--bg-gray);
		border-top-width: 12px;
		border-bottom-width: 10px;
		padding: 1em 0 3em 0;
	}


/* Footer */

	#footer {
		text-align: center;
		padding: 2em 0 2em 0;
	}

		#footer a {
			color: inherit;
		}

		#footer h2.major {
			margin: 0 0 1.5em 0;
		}

			#footer h2.major span {
				background: var(--bg-main);
			}

/* Copyright */

	#copyright {
		display: inline-block;
		background: var(--border);
		padding: 0.75em 2em 0.75em 2em;
		border-radius: var(--radius-lg);
		color: var(--bg-dark);
		margin: 4em 0 0 0;
	}

		#copyright .menu {
			margin: 0;
		}

			#copyright .menu li {
				border-color: var(--text-muted);
				border-width: 2px;
				line-height: 1em;
			}

/* ======================================= SCREEN SIZE ADJUSTMENTS/* ======================================= */

    /* XLarge */
    
    	@media screen and (max-width: 1680px) {
    		body, input, textarea, select {
    			font-size: 12pt;
    			line-height: 1.75em;
    		}
    	}
    
    /* Large */
    
    	@media screen and (max-width: 1280px) {
    		body, input, textarea, select {
    			font-size: 11pt;
    		}
    		ul.special li a:before {
    			font-size: 60px;
    		}
    		.box.post h3 {
    			font-size: 2.5em;
    		}
    
    		#header {
    			font-size: 1.5em;
    		}
    		#main {
    			border-top-width: 20px;
    			border-bottom-width: 10px;
    		}
    		#footer {
    			padding: 6em 0 6em 0;
    		}
    	}
    
    /* Medium */
    
    	#navPanel, #titleBar {
    		display: none;
    	}
    
    	@media screen and (max-width: 1080px) {
    		html, body {
    			overflow-x: hidden;
    		}
    		.box br {
    			display: none;
    		}
    		#header {
    			display: none;
    		}
    		#banner {
    			padding: calc(14em + var(--titlebar-height)) 0 14em 0;
    		}
    		#nav {
    			display: none;
    		}
    		#main {
    			border-top-width: 0;
    		}
    		.sidebar {
    			border-top: solid 2px var(--bg-main);
    			padding-top: 50px;
    		}
    		body {
    			padding-top: var(--titlebar-height);
    		}
    			body.homepage {
    				padding-top: 0;
    			}
    		#page-wrapper {
    			-moz-backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    			backface-visibility: hidden;
    			-moz-transition: -moz-transform 0.5s ease;
    			-webkit-transition: -webkit-transform 0.5s ease;
    			-ms-transition: -ms-transform 0.5s ease;
    			transition: transform 0.5s ease;
    			padding-bottom: 1px;
    		}
    
    		#titleBar {
    			-moz-backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    			backface-visibility: hidden;
    			-moz-transition: -moz-transform 0.5s ease;
    			-webkit-transition: -webkit-transform 0.5s ease;
    			-ms-transition: -ms-transform 0.5s ease;
    			transition: transform 0.5s ease;
    			display: block;
    			height: var(--titlebar-height);
    			left: 0;
    			position: fixed;
    			top: 0;
    			width: 100%;
    			z-index: 10001;
			background-color: var(--gray-200);
    			background-image: url("images/overlay.png");
    		}
    
    			#titleBar .title {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    position: relative;
                    font-family: 'Open Sans Condensed', sans-serif;
                    font-weight: 700;
                    text-transform: uppercase;
                    font-size: 1.25em;
                    line-height: 1;
                    color: var(--text-white);
                    z-index: 1000;
                    text-align: center;
                }
                
                /* Ensure the logo fits properly */
                #titleBar .title img {
                    max-height: 48px; /* Adjust logo height */
                    width: auto; /* Maintain aspect ratio */
                    display: inline-block; /* Ensure it's inline with text */
                    margin-top: 4px;
                }
                #titleBar .title .logo-mark { gap: 0.5rem; }
                #titleBar .title .wordmark { font-size: 1.2rem; letter-spacing: 0.3px; }
                
                /* Page title styling */
                #titleBar .nav-title {
                    font-size: 1em;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: var(--gray-200);
                    line-height: 1;
                }
    
    			#titleBar .toggle {
    				display: block;
    				position: absolute;
    				left: 0;
    				top: 0;
    				width: var(--titlebar-height);
    				height: var(--titlebar-height);
    				z-index: 1001;
    				background: var(--green);
    			}
    
    				#titleBar .toggle:before {
    					position: absolute;
    					left: 50%;
    					top: 50%;
    					transform: translate(-50%, -50%);
    					width: 22px;
    					height: 2px;
    					background: var(--text-white);
    					content: '';
    					box-shadow:
    						0 -7px 0 var(--text-white),
    						0 7px 0 var(--text-white);
    				}
    
    				#titleBar .toggle:active,
    				#titleBar .toggle:hover {
    					background-color: var(--green-dark);
    				}
    
    		#navPanel {
    			-moz-backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    			backface-visibility: hidden;
    			-moz-transform: translateX(-275px);
    			-webkit-transform: translateX(-275px);
    			-ms-transform: translateX(-275px);
    			transform: translateX(-275px);
    			-moz-transition: -moz-transform 0.5s ease;
    			-webkit-transition: -webkit-transform 0.5s ease;
    			-ms-transition: -ms-transform 0.5s ease;
    			transition: transform 0.5s ease;
    			display: block;
    			height: 100%;
    			left: 0;
    			overflow-y: auto;
    			position: fixed;
    			top: 0;
    			width: 275px;
    			z-index: 10002;
    			background-color: var(--bg-ultradark);
    			background-image: url("images/overlay.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-image: url("images/overlay.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-image: url("images/overlay.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-image: url("images/overlay.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-repeat: repeat, no-repeat;
    			background-size: auto, 100% 100%;
    			font-family: 'Open Sans Condensed', sans-serif;
    			font-weight: 700;
    			text-transform: uppercase;
    			font-size: 1.25em;
    			box-shadow: inset -3px 0px 10px 0px rgba(0, 0, 0, 0.25);
    		}
    
    			#navPanel nav {
    				position: relative;
    				z-index: 1000;
    			}
    
    			#navPanel .link {
    				display: block;
    				color: inherit;
    				text-decoration: none;
    				height: var(--navbar-itemheight);
    				line-height: var(--navbar-itemheight);
    				padding: 0 1em 0 1em;
    				color: rgba(255, 255, 255, 0.75);
    				border-top: solid 2px rgba(87, 93, 89, 0.15);
    				font-size: 0.8em;
    			}
    
    				#navPanel .link:first-child {
    					border-top: 0;
    				}
    
    			#navPanel .indent-1 {
    				display: inline-block;
    				width: 1em;
    			}
    
    			#navPanel .indent-2 {
    				display: inline-block;
    				width: 2em;
    			}
    
    			#navPanel .indent-3 {
    				display: inline-block;
    				width: 3em;
    			}
    
    			#navPanel .indent-4 {
    				display: inline-block;
    				width: 4em;
    			}
    
    			#navPanel .indent-5 {
    				display: inline-block;
    				width: 5em;
    			}
    
    			#navPanel .depth-0 {
    				color: var(--text-white);
    			}
    
    		body.navPanel-visible #page-wrapper {
    			-moz-transform: translateX(275px);
    			-webkit-transform: translateX(275px);
    			-ms-transform: translateX(275px);
    			transform: translateX(275px);
    		}
    
    		body.navPanel-visible #titleBar {
    			-moz-transform: translateX(275px);
    			-webkit-transform: translateX(275px);
    			-ms-transform: translateX(275px);
    			transform: translateX(275px);
    		}
    
    		body.navPanel-visible #navPanel {
    			-moz-transform: translateX(0);
    			-webkit-transform: translateX(0);
    			-ms-transform: translateX(0);
    			transform: translateX(0);
    		}
    
    	}
    
    /* Small */
    
    	@media screen and (max-width: 736px) {
    		body, input, textarea, select {
    			font-size: 11pt;
    		}
    		h2 {
    			font-size: 1.4em;
    		}
    			h2.major {
    				font-size: 1.4em;
    				margin: 0 0 2em 0;
    			}
    
    				h2.major span {
    					padding: 0 1em;
    				}
			h3 {
			    font-size: 1.3em;
			}
    		section, article {
    			margin-bottom: 2em;
    		}
    
    		input[type="button"],
    		input[type="submit"],
    		input[type="reset"],
    		button,
    		.button {
    			display: block;
    			width: 100%;
    			font-size: 1.1em;
    		}
    
    			input[type="button"].large,
    			input[type="submit"].large,
    			input[type="reset"].large,
    			button.large,
    			.button.large {
    				font-size: 1.25em;
    			}
    
    		ul.actions li {
    			display: block;
    			margin: 1em 0 0 0;
    		}
    			ul.actions li:first-child {
    				margin-top: 0;
    			}
    
    		ul.special {
    			margin: -0.75em 0 2em -0.75em;
    		}
    			ul.special li {
    				padding: 0.75em 0 0 0.75em;
    			}
    				ul.special li a:before {
    					font-size: 28px;
    				}
    
    		.box.highlight header > p {
    			font-size: 1.25em;
    		}
    		.box.post h3 {
    			font-size: 2em;
    		}
    		.box.post header > p {
    			font-size: 1.25em;
    		}
    		.box.page-content h2 {
    			font-size: 2em;
    		}
    		.box.page-content header > p {
    			font-size: 1.25em;
    		}
    
    		#main {
    			padding: 0.5rem 0 0;
    		}
    		.sidebar {
    			border-top: solid 2px var(--bg-main);
    			padding-top: 50px;
    			margin-top: 30px;
    		}
    
    		#footer {
    			padding: 3em 0;
    		}
    
    		#copyright .menu li {
    			display: block;
    			border-left: 0;
    			padding-left: 0;
    			line-height: 1.75em;
    		}
    
    	}
    
    	@media screen and (max-width: 480px) {
    		body, input, textarea, select {
    			font-size: 10pt;
    		}
    	}
    	

    /* RESPONSIVE DESIGN */

        @media screen and (max-width: 736px) {
            body {
                font-size: 14px; /* Slightly smaller font for mobile */
            }

            table {
                font-size: 12px; /* Adjust table font size for small screens */
            }
            

            /* Adjust table width to be responsive on smaller screens */
            th, td {
                word-wrap: break-word;
                white-space: nowrap; /* Prevent text from wrapping in the table */
            }
            th:first-child,
            td:first-child {
                max-width: 30%; /* Limit the width of the first column */
                word-wrap: break-word; /* Allow wrapping at word boundaries */
                white-space: normal; /* Allow text to wrap to the next line */
            }
        }

        /* Center align text in specific columns */
        td.center, th.center {
            text-align: center;
        }
        
        th {
            cursor: pointer;
            position: relative;
            padding-right: 20px;
        }



    /* --- Container --- */
    .filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 1.5rem auto 1rem auto;
        padding: 1.25rem .2rem;
        background-color: var(--bg-main);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-dark);
        border: 2px solid var(--border-input);
        max-width: 750px;
    }
    
    /* 🔥 MOBILE OPTIMIZATION */
    @media (max-width: 736px) {
        .filters {
            margin: 0.5rem 0.5rem;          /* Add side margin on phones */
            font-size: 0.9rem;            /* Slightly smaller font */
            line-height: 1.6;
        }
    }
    
    /* --- Each item (label + select or label + toggle) --- */
    .filter-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 200px;
    }
    
    /* Label */
    .filter-item label {
        font-size: 1.1em;
        font-weight: 600;
        margin-bottom: 5px;
        font-family: 'Open Sans Condensed', sans-serif;
        color: var(--text-secondary);
    }
    
    /* --- Selects --- */
    .filter-item select {
        width: 100%;
        min-width: 150px;
        padding: 10px;
        font-size: 16px;
        color: var(--text-secondary);
        border: 2px solid var(--border-input);
        border-radius: var(--radius-sm);
        background: white;
        appearance: none;
    }
    
    .filter-item select:hover {
        border-color: var(--border-hover);
        cursor: pointer;
    }
    
    /* --- Toggle switch --- */
    .toggle-item {
        justify-content: center; /* vertically center */
    }
    
    /* Hide checkbox */
    .toggle-checkbox {
        display: none;
    }
    
    /* Slider */
    .toggle-slider {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
        background: var(--gray-400);
        border-radius: 25px;
        cursor: pointer;
        transition: background 0.3s;
        margin-top: 4px;
    }
    
    /* Knob */
    .toggle-slider::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }
    
    /* Checked */
    .toggle-checkbox:checked + .toggle-slider {
        background: var(--green);
    }
    
    .toggle-checkbox:checked + .toggle-slider::before {
        transform: translateX(25px);
    }
    
    /* --- Responsive for small screens --- */
    @media (max-width: 500px) {
        .filter-item {
            width: 100%;
        }
    }
    
    /* Container */
    .switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 0.85em;
        color: var(--gray-400);
    }
    
    /* Hide the native checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }
    
    /* Slider background */
    .switch .slider {
        position: relative;
        width: 32px;
        height: 18px;
        background-color: var(--gray-300);
        border-radius: 18px;
        transition: 0.25s;
    }
    
    /* Slider knob */
    .switch .slider::before {
        content: "";
        position: absolute;
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: 0.25s;
    }
    
    /* When checked */
    .switch input:checked + .slider {
        background-color: var(--green);
    }
    
    /* Move knob */
    .switch input:checked + .slider::before {
        transform: translateX(14px);
    }
    
    .toggle-label {
        font-size: 1em;
        color: var(--text-secondary);
    }