/*
 * WiFiSpec – custom branding overrides
 * Replaces default Tessellate template look
 */

/* Logo sprite: single PNG has 3 parts – top = full logo, bottom-left = wordmark, bottom-right = icon (1536×1024) */
.logo-sprite {
	background-image: url("../../images/Logo%20Sprites.png");
	background-repeat: no-repeat;
	background-color: transparent;
}

/* Full logo (icon + word): top half of sprite – fixed size so it doesn’t stretch */
.logo-sprite-full {
	display: block;
	width: 240px;
	height: 80px;
	margin: 0 auto 1em;
	background-size: 240px 160px;
	background-position: 0 0;
}

/* Wordmark only: bottom-left quadrant (aspect ~768:512) */
.logo-sprite-wordmark {
	display: block;
	width: 100%;
	max-width: 200px;
	height: 0;
	padding-bottom: 66.67%;
	margin: 0 auto;
	background-size: 200% 200%;
	background-position: 0% 50%;
}

/* Icon only: bottom-right quadrant */
.logo-sprite-icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	background-size: 200% 200%;
	background-position: 50% 50%;
}

/* Header: new Logo.png – normal size, centered */
#header .header-logo {
	display: block;
	max-width: 560px;
	width: 100%;
	height: auto;
	margin: 0 auto 1em;
}
/* Invert if logo is light-on-dark asset and header is dark */
#header .header-logo {
	filter: invert(1);
}

/* Footer logo */
#footer .footer-logo {
	display: block;
	max-width: 160px;
	height: auto;
	margin: 0 auto 1.5em;
	filter: invert(1);
	opacity: 0.95;
}

/* Get in Touch section logo */
.contact-logo {
	display: block;
	max-width: 240px;
	height: auto;
	margin: 0 auto 1em;
}

#header .logo-sprite-full {
	/* Fallback if sprite used; invert for dark header */
	filter: invert(1);
}

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

/* Header: solid neutral blue, no banner image; shorter height */
#header {
	background-image: none;
	background-color: #1e3a5f;
	padding: 6em 0 6em 0;
}

#header footer .button + .button {
	margin-left: 0.75em;
}

/* Section content backgrounds – blue/slate theme instead of template gradients */
.main > .content.dark {
	background: #1e3a5f !important;
}

.main > .content.style1 {
	background: url("images/overlay.png"), linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 50%, #1a2d47 100%) !important;
}

.main > .content.style2 {
	background: url("images/overlay.png"), linear-gradient(135deg, #243b55 0%, #354d6b 50%, #1a2d47 100%) !important;
}

.main > .content.style3 {
	background: url("images/overlay.png"), linear-gradient(135deg, #1a2d47 0%, #243b55 50%, #1e3a5f 100%) !important;
}

/* Section headers – subtle brand tint */
.main > header {
	background: #f0f4f8 !important;
}

.main > header h2 {
	color: #1a2d47 !important;
}

.main > header p {
	color: #444 !important;
}

/* Buttons – WiFiSpec blue */
.dark .button,
.dark input[type="button"],
.dark input[type="submit"],
.dark input[type="reset"],
.dark button {
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.dark .button:hover,
.dark input[type="submit"]:hover,
.dark .button.scrolly:hover {
	background: rgba(255, 255, 255, 0.35) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Contact section */
.content.style4 {
	background: #f0f4f8 !important;
}

.content.style4 a {
	color: #1e3a5f;
	border-bottom-color: #1e3a5f;
}

.content.style4 a:hover {
	border-bottom-color: transparent;
}

/* Footer */
#footer {
	background: #1a2d47 !important;
	box-shadow: none !important;
}

#footer .copyright,
#footer .menu li {
	color: rgba(255, 255, 255, 0.8) !important;
}

#footer .menu a {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer logo wordmark – light version on dark background */
#footer .logo-sprite-wordmark {
	max-width: 160px;
	padding-bottom: 66.67%;
	filter: invert(1);
	opacity: 0.95;
}