/* ==========================================================================
   freezer_header_theme.css — visual restyling for header_freezer.js and
   footer_freezer.js. Loaded AFTER screenlayout.css, on freezer floor
   pages only, so nothing else on the site is affected.

   Positioning (position:absolute, the top/height values, the overall
   #page/#header/#navigationBar box layout) is left exactly as
   screenlayout.css defines it — only color, type, and spacing change.
   ========================================================================== */

/* ---- Header ---- */
#header {
	font-style: normal;
}
#header .screen {
	top: 0;
	left: 20px;
	right: 220px;
	height: 70px;
	display: flex;
	align-items: center;
	font-style: normal;
}
#header .companyName {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: bold;
	font-size: 21px;
	color: #ffffff;
	letter-spacing: 0.01em;
}
#header .flangedIcon {
	width: 26px;
	height: auto;
	margin-left: 10px;
	opacity: 0.85;
	vertical-align: middle;
}
#header .screen1 {
	background-image: none;
	width: 210px;
	height: 70px;
	top: 0;
	right: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	font-style: normal;
}
#header .tagline {
	font-size: 12px;
	font-style: italic;
	color: #cfdcea;
	margin-bottom: 6px;
}
#header .phoneLink {
	font-size: 17px;
	font-weight: bold;
	color: #ffcc00;
	text-decoration: none;
}
#header .phoneLink:hover {
	color: #ffffff;
}

/* ---- Utility strip (View Cart) ---- */
#navigationBar2 {
	background: #f2f5f8;
	color: #19316d;
}
#navigationBar2 table.style2 td {
	font-size: 12px;
}
#navigationBar2 .viewCartLink {
	color: #19316d;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #19316d;
	padding: 2px 10px;
	border-radius: 3px;
}
#navigationBar2 .viewCartLink:hover {
	background: #19316d;
	color: #ffffff;
}

/* ---- Main nav ---- */
#navigationBar {
	background: #19316d;
}
#menu a {
	font-size: 13px;
	line-height: 20px;
}
#menu a:hover {
	color: #ffcc00;
}
.navDivider {
	font-size: 1.2em;
	font-weight: normal;
	color: rgba(255,255,255,0.35);
}
#navigationBar1 .navDivider {
	color: rgba(25,49,109,0.3);
}

/* ---- Sub-nav (application pages) ---- */
#navigationBar1 {
	background: #dcdcdc;
}
#menu1 a {
	font-size: 13px;
	line-height: 20px;
	color: #19316d;
}
#menu1 a:hover {
	color: #0d1b3d;
	text-decoration: underline;
}

/* ---- Footer ---- */
#footer {
	background: #19316d;
}
#footer p {
	font-size: 12px;
	line-height: 18px;
	top: 8px;
}
#footer .footerCompany {
	font-weight: bold;
}
#footer .copyright {
	color: #cfdcea;
	font-weight: normal;
}
#footer a:hover {
	color: #ffcc00;
}

@media (max-width: 800px) {
	#header .companyName { font-size: 16px; }
	#header .screen { right: 160px; }
	#header .screen1 { width: 150px; }
	#header .tagline { display: none; }
	#header .phoneLink { font-size: 14px; }
	#menu a, #menu1 a { font-size: 11px; }

	/* screenlayout.css sets #page { min-width: 750px; max-width: 85%; },
	   which forces the whole page wider than a phone screen, so the
	   browser zooms the entire page out to fit -- that's what makes the
	   header (and everything else) look shrunk to half-scale on a phone.
	   This override just lets the page actually fit the screen it's on. */
	#page {
		min-width: 0;
		max-width: 100%;
		width: 100%;
	}

	/* Some pages (freezerfloor.htm especially) have images with a fixed
	   HTML width="" attribute (e.g. width="700"), which is wider than any
	   phone screen. A CSS max-width always overrides an HTML width
	   attribute, so this shrinks them to fit without needing to touch
	   every img tag individually. */
	#main img {
		max-width: 100%;
		height: auto;
	}

	/* The YouTube iframe needs aspect-ratio alongside height:auto --
	   unlike an <img>, an iframe has no natural content height to fall
	   back on, so without this it would collapse to zero height instead
	   of shrinking proportionally. */
	#main iframe {
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 560 / 315;
	}

	/* Tables (the spec sheets, the multi-column layout areas) also don't
	   shrink on their own -- let them scroll horizontally inside their
	   own box instead of forcing the whole page wider. */
	#main table {
		max-width: 100%;
	}
	table.fullWidth {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}