/* ARMOR Radar: shared styles for index.html and viewer.html
   Matches the 2026 NSSTC homepage: Red Hat Text, UAH Blue to Navy
   sidebar gradient, small-caps section labels with a UAH Yellow underline.

   UAH web palette:
     UAH Blue   #0058A4   UAH Navy   #002D72   UAH Yellow #FDDA24 (accents only)
     UAH Black  #2C2A29   Gray       #63666A   Light Blue #7BA4DB
     Light Gray #E5E5E5

   Layout: sidebar only. UAH logo, NSSTC Home / UAH Home links and the
   ownership/contact block live in the sidebar, so the map keeps the full
   window height. */

@font-face {
	font-family: "Red Hat Text";
	src: url("../fonts/RedHatText-VF.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--uah-blue: #0058A4;
	--uah-navy: #002D72;
	--uah-yellow: #FDDA24;
	--uah-black: #2C2A29;
	--uah-gray: #63666A;
	--uah-light-blue: #7BA4DB;
	--uah-light-gray: #E5E5E5;
	--sidebar-w: 240px;
	--brand-h: 121px;      /* logo 69px + 26px clear space above and below */
	--font: "Red Hat Text", Arial, Helvetica, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--uah-black);
	background: var(--uah-navy);
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--uah-yellow);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 100;
	padding: 8px 14px;
	background: #FFFFFF;
	color: var(--uah-blue);
	font-weight: 600;
}

.skip-link:focus {
	top: 8px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   APP SHELL: sidebar + main area
   ------------------------------------------------------------------ */

.app {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.sidebar {
	margin-top: var(--brand-h);   /* starts below the fixed UAH logo card */
	display: flex;
	flex: 0 0 var(--sidebar-w);
	flex-direction: column;
	width: var(--sidebar-w);
	overflow-y: auto;
	color: #FFFFFF;
	/* background-color is the fallback that contrast checkers measure */
	background-color: var(--uah-navy);
	background-image: linear-gradient(180deg, var(--uah-blue) 0%, var(--uah-navy) 100%);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.sidebar a {
	color: #FFFFFF;
	text-decoration: none;
}

.sidebar a:hover {
	text-decoration: underline;
}

body.sidebar-closed .sidebar {
	display: none;
}

/* UAH logo on a white card, fixed in the top-left corner of the window.
   It stays put while the sidebar scrolls, and stays on top of the map
   when the sidebar is hidden. The primary logo has dark type,
   so it needs a light background. Clear space on every side is at least
   the height of the university-name text (about 25px at this size). */
.brand-card {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 25;
	width: var(--sidebar-w);
	height: var(--brand-h);
	padding: 26px 30px;
	background: #FFFFFF;
}

/* Sidebar hidden: the card floats over the map with a light shadow */
body.sidebar-closed .brand-card {
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.brand-card img {
	display: block;
	width: 180px;
	height: auto;
}

.site-title {
	padding: 18px 20px 14px;
}

/* NSSTC mark + name: links to the NSSTC home page */
.nsstc-id {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.nsstc-id img {
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 40px;
}

.sidebar a.nsstc-id:hover span {
	text-decoration: underline;
}

/* Sits directly above the Contact Us block */
.uah-home {
	margin: 0 20px 14px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	font-weight: 700;
}

.site-title h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.clock {
	display: flex;
	gap: 14px;
	margin: 8px 0 0;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.clock span {
	white-space: nowrap;
}

.clock .zone {
	color: var(--uah-light-blue);
	font-weight: 600;
	margin-left: 4px;
}

.now-showing {
	margin: 10px 20px 4px;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.35;
	background: rgba(0, 0, 0, 0.18);
	border-left: 3px solid var(--uah-yellow);
}

.now-showing strong {
	display: block;
	font-size: 14px;
}

/* ------------------------------------------------------------------
   MENU SECTIONS
   Section labels match the homepage sidebar: small, bold, spaced
   capitals with a short UAH Yellow underline.
   ------------------------------------------------------------------ */

.menu {
	flex: 1 0 auto;   /* pushes the contact block to the bottom */
	padding: 4px 0 16px;
}

.menu-section {
	margin: 0;
}

.section-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 20px 10px;
	border: 0;
	background: none;
	color: #FFFFFF;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.section-toggle .label {
	position: relative;
	padding-bottom: 6px;
}

.section-toggle .label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 3px;
	background: var(--uah-yellow);
}

.section-toggle .chev {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s;
}

.section-toggle[aria-expanded="true"] .chev {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.section-toggle:hover .label {
	color: var(--uah-light-gray);
}

.section-body {
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
}

.section-body[hidden] {
	display: none;
}

.menu-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 6px 20px 6px 17px;
	border: 0;
	border-left: 3px solid transparent;
	background: none;
	color: #FFFFFF;
	font: inherit;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.sidebar a.menu-item:hover,
.menu-item:hover {
	background: rgba(255, 255, 255, 0.10);
	text-decoration: none;
}

.menu-item[aria-pressed="true"],
.menu-item[aria-current="page"] {
	border-left-color: var(--uah-yellow);
	background: rgba(255, 255, 255, 0.14);
	font-weight: 600;
}

.menu-item .code {
	flex: 0 0 auto;
	min-width: 3.4em;
	font-weight: 700;
}

.menu-item .desc {
	color: var(--uah-light-gray);
	font-size: 13px;
}

.menu-item.switch .state {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--uah-light-blue);
}

.menu-item.switch[aria-pressed="true"] .state {
	color: var(--uah-yellow);
}

/* ------------------------------------------------------------------
   OWNERSHIP / CONTACT (required on every page)
   ------------------------------------------------------------------ */

.site-footer {
	margin: 8px 0 0;
	padding: 18px 20px 20px;
	background: var(--uah-light-gray);
	border-top: 6px solid var(--uah-blue);
	color: var(--uah-black);
	font-size: 12px;
	line-height: 1.5;
}

.site-footer h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 500;
	color: var(--uah-blue);
}

.site-footer p {
	margin: 0 0 10px;
}

/* Icon above each line of contact text, so the e-mail address fits
   on one line in the narrow sidebar */
.site-footer .icon-line {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 14px;
}

.site-footer .icon {
	flex: 0 0 auto;
	color: var(--uah-black);
}

.sidebar .site-footer a {
	color: var(--uah-black);
	text-decoration: none;
	white-space: nowrap;
}

.sidebar .site-footer a:hover,
.sidebar .site-footer a:focus {
	color: var(--uah-blue);
	text-decoration: underline;
}

.site-footer .copyright {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--uah-gray);
}

/* ------------------------------------------------------------------
   SIDEBAR TOGGLE (collapses the sidebar so the map gets full width)
   ------------------------------------------------------------------ */

.sidebar-toggle {
	position: absolute;
	top: 10px;
	left: calc(var(--sidebar-w) + 10px);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px 0 10px;
	border: 0;
	border-radius: 2px;
	background: var(--uah-navy);
	color: #FFFFFF;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.sidebar-toggle:hover {
	background: var(--uah-blue);
}

.sidebar-toggle .bars {
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* ------------------------------------------------------------------
   MAP AREA
   Single view: one map. Multi-panel: large map on the left, two
   smaller maps stacked on the right (same 2/3 + 1/3 split as before).
   ------------------------------------------------------------------ */

.maps {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	gap: 3px;
	background: var(--uah-navy);
}

.maps.single {
	grid-template: 1fr / 1fr;
}

.maps.single .map-side {
	display: none;
}

.maps.multi {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.maps.multi .map-main {
	grid-row: 1 / 3;
}

.map {
	min-width: 0;
	min-height: 0;
	background: #1B2A38;
}

.map-error {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: 420px;
	padding: 16px 20px;
	transform: translate(-50%, -50%);
	background: #FFFFFF;
	color: var(--uah-black);
	border-top: 4px solid var(--uah-yellow);
}

/* Top-right of each map: product info image, then the color scale */
.radar-key {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	margin: 10px 10px 0 0;
}

.radar-info,
.radar-legend {
	display: block;
}

.radar-legend[hidden] {
	display: none;
}

/* Keep the scale inside short side panels in multi-panel view */
.maps.multi .map-side .radar-legend {
	max-height: calc(50vh - 80px);
	width: auto;
}

.nws-status {
	display: block;
	margin-top: 4px;
	color: var(--uah-light-gray);
}

/* NWS warning pop-up (Google Maps InfoWindow content) */
.warning-info {
	max-width: 260px;
	font-family: var(--font);
	font-size: 13px;
	line-height: 1.4;
	color: var(--uah-black);
}

.warning-info strong {
	display: block;
	font-size: 14px;
}

.warning-info p {
	margin: 4px 0 0;
}

/* ------------------------------------------------------------------
   VIEWER PAGE: framed product pages (status.html, vcpdir.html, etc.)
   ------------------------------------------------------------------ */

.viewer-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	background: #FFFFFF;
}

/* Caption strip above the framed page; leaves room for the menu button */
.viewer-bar {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	padding: 0 20px 0 136px;
	background: var(--uah-light-gray);
	border-bottom: 1px solid #C8C8C8;
}

/* Menu hidden: the bar grows to the logo card's height so the card
   never covers the framed page */
body.sidebar-closed .viewer-bar {
	flex-basis: var(--brand-h);
	align-items: flex-start;
	padding-top: 16px;
	padding-left: calc(var(--sidebar-w) + 136px);
}

.viewer-bar h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--uah-blue);
}

.viewer-frame {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #FFFFFF;
}

.rhi-empty {
	padding: 4px 20px 8px;
	font-size: 13px;
	color: var(--uah-light-gray);
}

/* ------------------------------------------------------------------
   SMALL SCREENS: sidebar becomes an overlay drawer
   ------------------------------------------------------------------ */

@media (max-width: 800px) {
	:root {
		--sidebar-w: min(240px, 86vw);
		--brand-h: 84px;   /* logo 130px wide (50px tall), 17px clear space */
	}

	.brand-card {
		width: auto;
		padding: 17px 20px;
	}

	.brand-card img {
		width: 130px;
	}

	.sidebar {
		position: absolute;
		top: var(--brand-h);
		margin-top: 0;
		bottom: 0;
		left: 0;
		z-index: 30;
		width: var(--sidebar-w);
		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.45);
	}

	body:not(.sidebar-closed) .brand-card {
		width: var(--sidebar-w);
	}

	.sidebar-toggle,
	body.sidebar-closed .sidebar-toggle {
		left: 180px;
		top: 24px;
	}

	body:not(.sidebar-closed) .sidebar-toggle {
		left: calc(var(--sidebar-w) + 10px);
		padding: 0 10px;
	}

	body.sidebar-closed .viewer-bar {
		padding-left: 290px;
	}

	/* drawer open: icon-only button so it doesn't cover map labels */
	body:not(.sidebar-closed) .sidebar-toggle .text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.maps.multi {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 3fr 2fr;
	}

	.maps.multi .map-main {
		grid-row: 1;
		grid-column: 1 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section-toggle .chev {
		transition: none;
	}
}