@charset "UTF-8";
/* CSS Document */
	/* =========================================
		 THEME TOKENS
		 ========================================= */
	:root, :root.light {
		/* Light mode defaults */
		--bg: #FFFFFF;
		--surface: #F5F5F7;
		--text: #1A1A1A;
		--text-muted: #555555;
		--border: #E6E7E8;

		--brand: #2f4660;          /* primary */
		--brand-hover: #4f6d91;
		--brand-disabled: #a8c4dd;
		--brand-text: #FFFFFF;
		--brand-text-disabled: #555555;

		--accent: #2b918d;         /* secondary */ 
		--accent-hover: #39a199;
		--accent-disabled: #73c0b6; 
		--accent-text: #1A1A1A;
		--accent-text-disabled: #555555;

		--link: #2f4660;
		--link-hover: #4f6d91;
		--link-disabled: #a8c4dd;

		--menu-text: #2f4660;
		--menu-text-hover: #4f6d91;

		/* Focus ring uses current brand */
		--focus-ring: var(--brand);

		/* Misc */
		--radius: 12px;
		--shadow: 0 6px 20px rgba(0,0,0,0.08);
		--transition: 160ms ease;

		--Image-Logo: url('../img/Logo_HMC.png');
	}

	/* Auto-switch to dark if user prefers */
	@media (prefers-color-scheme: dark) {
		:root {
			--bg: #121212;
			--surface: #1E1E20;
			--text: #FFFFFF;
			--text-muted: #AAAAAA;
			--border: #2E2E40;

			--brand: #435c75;
			--brand-hover: #66829e;
			--brand-disabled: #244156;
			--brand-text: #FFFFFF;
			--brand-text-disabled: #777;

			--accent: #5f8c7c;
			--accent-hover: #6db2a6;
			--accent-disabled: #174441; 
			--accent-text: #1A1A1A;
			--accent-text-disabled: #666;

			--link: #5f8c7c;
			--link-hover: #6db2a6;
			--link-disabled: #174441;

			--menu-text: #5f8c7c;
			--menu-text-hover: #6db2a6;

			--focus-ring: var(--brand);
			--shadow: 0 8px 24px rgba(0,0,0,0.35);

			--Image-Logo: url('../img/Logo_HMC_reverse.png');

		}
	}

	:root.dark {
		--bg: #121212;
		--surface: #1E1E20;
		--text: #FFFFFF;
		--text-muted: #AAAAAA;
		--border: #2E2E40;

		--brand: #435c75;
		--brand-hover: #66829e;
		--brand-disabled: #244156;
		--brand-text: #FFFFFF;
		--brand-text-disabled: #777;

		--accent: #5f8c7c;
		--accent-hover: #6db2a6;
		--accent-disabled: #174441; 
		--accent-text: #1A1A1A;
		--accent-text-disabled: #666;

		--link: #5f8c7c;
		--link-hover: #6db2a6;
		--link-disabled: #174441;

		--menu-text: #5f8c7c;
		--menu-text-hover: #6db2a6;

		--focus-ring: var(--brand);
		--shadow: 0 8px 24px rgba(0,0,0,0.35);

		--Image-Logo: url('../img/Logo_HMC_reverse.png')

	}

	/* =========================================
		 BASE ELEMENTS
		 ========================================= */
	* { box-sizing: border-box; }
	html, body {
		background: var(--bg);
		color: var(--text);
		font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
		font-size: 16px;
		line-height: 1.5;
		margin: 0;
	}

	h1, h2, h3 { margin: 0 0 .5rem 0; }
	p { margin: 0 0 1rem 0; }

	a {
		color: var(--link);
		text-decoration: none;
		transition: color var(--transition);
	}
	a:hover { color: var(--link-hover); }
	a[aria-disabled="true"], a.disabled {
		color: var(--link-disabled);
		pointer-events: none;
	}

	/* Cards / Surfaces */
	.card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 1rem;
		margin-top: 1rem;
	}

	/* Utility border */
	.hr, .divider {
		height: 1px;
		background: var(--border);
		border: 0;
		margin: 1rem 0;
	}

	/* =========================================
		 FOCUS STYLES (accessible & visible)
		 ========================================= */
	:where(button, a, input, select, textarea, [tabindex]):focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
		box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus-ring) 25%, transparent);
	}

	/* =========================================
		 BUTTONS
		 ========================================= */
	button {
		font: inherit;
		cursor: pointer;
		border-radius: var(--radius);
		border: 1px solid transparent;
		padding: 0.6rem 2rem;
		margin: 0.25rem;
		transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition);
	}
	button:active { transform: translateY(1px); }

	/* Primary (brand) */
	.btn-primary {
		background: var(--brand);
		color: var(--brand-text);
		border-color: var(--brand);
	}
	.btn-primary:hover {
		background: var(--brand-hover);
		border-color: var(--brand);
	}
	.btn-primary:disabled,
	.btn-primary[aria-disabled="true"] {
		background: var(--brand-disabled);
		border-color: var(--brand-disabled);
		color: var(--brand-text-disabled);
		cursor: not-allowed;
		transform: none;
		opacity: 0.8;
	}

	/* Secondary (accent) */
	.btn-secondary {
		background: var(--accent);
		color: var(--accent-text);
		border-color: var(--accent);
	}
	.btn-secondary:hover {
		background: var(--accent-hover);
		border-color: var(--accent);
	}
	.btn-secondary:disabled,
	.btn-secondary[aria-disabled="true"] {
		background: var(--accent-disabled);
		border-color: var(--accent-disabled);
		color: var(--accent-text-disabled);
		cursor: not-allowed;
		transform: none;
		opacity: 0.85;
	}

	/* Ghost / link-style button using brand color */
	.btn-ghost {
		background: transparent;
		color: var(--brand);
		border-color: transparent;
	}
	.btn-ghost:hover {
		background: color-mix(in oklab, var(--brand) 12%, transparent);
		color: var(--brand-hover);
	}

	/* Outlined */
	.btn-outline {
		background: transparent;
		color: var(--brand);
		border-color: var(--brand);
	}
	.btn-outline:hover {
		background: color-mix(in oklab, var(--brand) 10%, transparent);
		border-color: var(--brand-hover);
		color: var(--brand-hover);
	}
	.btn-outline:disabled {
		color: var(--brand-disabled);
		border-color: var(--brand-disabled);
	}

	/* Button group */
	.btn-row { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }

	/* =========================================
		 FORM BASICS
		 ========================================= */
	.input, .select, .textarea {
		background: var(--surface);
		color: var(--text);
		border: 1px solid var(--border);
		border-radius: calc(var(--radius) - 4px);
		padding: 0.6rem 0.8rem;
		transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
		width: 100%;
		max-width: 420px;
	}
	.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
	.input:hover, .select:hover, .textarea:hover {
		border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
	}
	.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
		border-color: var(--brand);
		box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent);
	}

	footer {
		font-size: 0.9rem;
		text-align: center;
		padding: 2rem;
		background: var(--bg);
		color: var(--text);
		position: absolute;
		width: 100%;
		bottom: 0;
	}

	.Div_Logo {
		width: 160px;
		height: 36px;
		display: block;
		margin: 0 auto;
		position: relative;
		background: var(--Image-Logo);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	/* =========================================
		 Navigation - menu
		 ========================================= */
	/* Add a background color to the top navigation */
	.topnav {
		background-color: var(--bg);
		overflow: hidden;
	}

	/* Style the links inside the navigation bar */
	.topnav a {
		float: left;
		display: block;
		color: var(--menu-text);
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px;
		transition-duration: 0.4s;
	}

	/* Add an active class to highlight the current page */
	.active {
		background-color: var(--bg);
		color: var(--menu-text-hover);
	}

	/* Hide the link that should open and close the topnav on small screens */
	.topnav .icon {
		display: none;
	}

	/* Dropdown container - needed to position the dropdown content */
	.dropdown {
		float: left;
		overflow: hidden;
	}

	/* Style the dropdown button to fit inside the topnav */
	.dropdown .dropbtn {
		font-size: 17px;
		border: none;
		outline: none;
		color: var(--menu-text);
		padding: 14px 16px;
		background-color: inherit;
		font-family: inherit;
		margin: 0;
		transition-duration: 0.4s;
	}

	/* Style the dropdown content (hidden by default) */
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: var(--surface);
		min-width: 160px;
		box-shadow: var(--shadow);
		z-index: 1;
	}

	/* Style the links inside the dropdown */
	.dropdown-content a {
		float: none;
		color: var(--menu-text);
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
	}

	/* Add a background on topnav links and the dropdown button on hover */
	.topnav a:hover, .dropdown:hover .dropbtn {
		color: var(--menu-text-hover);
	}

	/* Add a background to dropdown links on hover */
	.dropdown-content a:hover {
		background-color: var(--surface);
		color: var(--menu-text-hover);
	}

	/* Show the dropdown menu when the user moves the mouse over the dropdown button */
	.dropdown:hover .dropdown-content {
		display: block;
	}

	/* */
	.content {
		width: 1000px;
		margin: 0 auto;
	}

	.content h2 {
		margin: 0;
		padding: 25px 0;
		font-size: 20px;
		border-bottom: 1px solid var(--border);
		color: var(--link);
	}

	.content .block {
		box-shadow: var(--shadow);
		margin: 25px 0;
		padding: 25px;
		background-color: var(--bg);
	}

	.content .block p {
		padding: 5px;
		margin: 0 0 10px 0;
	}

	/* When the screen is less than 1000 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
	@media screen and (max-width: 1000px) {
		.topnav a:not(:first-child), .dropdown .dropbtn {
			display: none;
		}
		.topnav a.icon {
			float: right;
			display: block;
		}
	}

	/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
	@media screen and (max-width: 1000px) {
		.topnav.responsive {position: relative;}
		.topnav.responsive a.icon {
			position: absolute;
			right: 0;
			top: 0;
		}
		.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		}
		.topnav.responsive .dropdown {float: none;}
		.topnav.responsive .dropdown-content {position: relative;}
		.topnav.responsive .dropdown .dropbtn {
			display: block;
			width: 100%;
			text-align: left;
		}
		@media screen and (max-width: 1000px) {
		 .content {
			padding: 5px 10px;
			width: 100%;
		}
	}