/*
 * Responsive Header Styles
 * Twenty Twenty-Five Child Theme
 *
 * Breakpoints:
 *   Mobile:  < 768px
 *   Tablet:  768px - 1023px
 *   Desktop: 1024px+
 */

/* ── Eliminate WP block gap between header and content ── */
.wp-site-blocks > .wp-block-template-part:first-child + * {
	margin-block-start: 0 !important;
}

/* ── Eliminate top white space -------------------------- */
.wp-block-template-part {
	margin-top: -1px;
}

/* ── Base / Reset ─────────────────────────────────────── */
.site-header-custom {
	position: relative;
	width: 100%;
	z-index: 100;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.site-header-custom a {
	text-decoration: none;
	display: block;
}

.site-header-custom img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Header Image Containers ──────────────────────────── */
.header-img-desktop,
.header-img-tablet,
.header-img-mobile {
	display: none;
}

/* ── Mobile: < 768px ──────────────────────────────────── */
@media (max-width: 767px) {
	.header-img-mobile {
		display: block;
	}
}

/* ── Tablet: 768px – 1023px ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
	.header-img-tablet {
		display: block;
	}
}

/* ── Desktop: 1024px+ ─────────────────────────────────── */
@media (min-width: 1024px) {
	.header-img-desktop {
		display: block;
	}
}

/* ── Placeholder styling (remove once real graphics are added) ── */
.header-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f0f0f0;
	border: 2px dashed #ccc;
	color: #888;
	font-family: sans-serif;
	font-size: 1rem;
	text-align: center;
	padding: 1rem;
}

.header-img-desktop .header-placeholder {
	min-height: 120px;
}

.header-img-tablet .header-placeholder {
	min-height: 100px;
}

.header-img-mobile .header-placeholder {
	min-height: 80px;
}

/* ── Desktop Clickable Overlay Links ─────────────────── */
/* Image is 1480×178; all positions are percentages.      */

.header-img-desktop,
.header-img-tablet,
.header-img-mobile {
	position: relative;
}

.header-overlay {
	position: absolute;
	display: block;
	z-index: 2;
	cursor: pointer;
/*	border: 2px solid red;  /* debug overlay positions */
}

/* Home — full-size background link (sits behind other overlays) */
.header-overlay-home {
	inset: 0;
	z-index: 1;
}

/* ── Social-media icons (left side of dark bar) ───────
 *  Image reference: 1480 × 178 px
 *  Top row:    Facebook · Instagram · Email     (~y 63-95)
 *  Bottom row: TikTok   · LinkedIn              (~y 107-139)
 */
.header-img-desktop .header-overlay-facebook {
	left: 10.1%;
	top: 33%;
	width: 3%;
	height: 24%;
}
.header-img-desktop .header-overlay-instagram {
	left: 13.0%;
	top: 33%;
	width: 3%;
	height: 24%;
}
.header-img-desktop .header-overlay-email {
	left: 15.9%;
	top: 33%;
	width: 3%;
	height: 24%;
}
.header-img-desktop .header-overlay-tiktok {
	left: 12.1%;
	top: 58%;
	width: 3%;
	height: 24%;
}
.header-img-desktop .header-overlay-linkedin {
	left: 15.0%;
	top: 58%;
	width: 3%;
	height: 24%;
}

/* ── Government Clients button (right side of dark bar) ── */
.header-img-desktop .header-overlay-gov {
	left: 70%;
	top: 51%;
	width: 15%;
	height: 15%;
}

/*-----------------------------------------------------------
 * NOT HEADER - Teal background for comm gallery
 * ---------------------------------------------------------- */

.teal-background {
	background-color: #669391;
}
/*-----------------------------------------------------------
 * NOT HEADER - space fix for contact us page
 * ---------------------------------------------------------- */

.top-margin-minus-25 {
	margin-top: -25px;
}

/*-----------------------------------------------------------
 * Shadow effects - cover sliders
 * ---------------------------------------------------------- */

.multi-shadow-cover-slider {
  text-shadow: 1px 1px 0 #ff0000, 2px 2px 0 #00ff00, 3px 3px 0 #0000ff;
}
.black-shadow-cover-slider {
    text-shadow: 2px 2px 4px #000000;
}
.black-shadow-cover-slider-background {
    text-shadow: 2px 2px 4px #000000;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
}

.white-shadow-cover-slider-background {
    /* text-shadow: 2px 2px 4px #000000; */
    background-color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
}

/*----------------------------------------------------------
 * Rotate the seperator bar
 * --------------------------------------------------------- */
.rotated-sep {
    transform: rotate(-4deg); /* Change 90deg to your desired angle */
    -webkit-transform: rotate(-4deg); /* Safari and Chrome */
    -moz-transform: rotate(-4deg); /* Firefox */
    -ms-transform: rotate(-4deg); /* IE 9 */
    -o-transform: rotate(-4deg); /* Opera */
}
.we-do-it-all {
	position: relative !important;
	margin-top: -80px;
	margin-bottom: -80px;
	z-index: 1;
	@media (width >= 768px) {
		margin-top: -125px;
		margin-bottom: -125px;
	}
}

/* ══════════════════════════════════════════════════════════
 *  Tablet Overlay Positions
 *  Image reference: 1490 × 397 px
 *  Layout: similar to desktop but more compact
 *  Social icons: left side of dark bar
 *  Gov Clients: right side of dark bar
 * ══════════════════════════════════════════════════════════ */
.header-img-tablet .header-overlay-facebook {
	left: 8.0%;
	top: 22%;
	width: 3.5%;
	height: 13%;
}
.header-img-tablet .header-overlay-instagram {
	left: 12.2%;
	top: 22%;
	width: 3.5%;
	height: 13%;
}
.header-img-tablet .header-overlay-email {
	left: 16.5%;
	top: 22%;
	width: 3.5%;
	height: 13%;
}
.header-img-tablet .header-overlay-tiktok {
	left: 10.0%;
	top: 37%;
	width: 3.5%;
	height: 13%;
}
.header-img-tablet .header-overlay-linkedin {
	left: 14.5%;
	top: 37%;
	width: 3.5%;
	height: 13%;
}
.header-img-tablet .header-overlay-gov {
	left: 68%;
	top: 35%;
	width: 17%;
	height: 12%;
}

/* ══════════════════════════════════════════════════════════
 *  Mobile Overlay Positions
 *  Image reference: 516 × 413 px
 *  Layout: stacked vertically
 *  Social icons: horizontal row (right side, near phone number)
 *  Gov Clients: wide button near bottom
 * ══════════════════════════════════════════════════════════ */
.header-img-mobile .header-overlay-facebook {
	left: 64%;
	top: 15%;
	width: 4.5%;
	height: 6%;
}
.header-img-mobile .header-overlay-instagram {
	left: 69%;
	top: 15%;
	width: 4.5%;
	height: 6%;
}
.header-img-mobile .header-overlay-email {
	left: 74%;
	top: 15%;
	width: 4.5%;
	height: 6%;
}
.header-img-mobile .header-overlay-tiktok {
	left: 79%;
	top: 15%;
	width: 4.5%;
	height: 6%;
}
.header-img-mobile .header-overlay-linkedin {
	left: 83.5%;
	top: 15%;
	width: 4.5%;
	height: 6%;
}
.header-img-mobile .header-overlay-gov {
	left: 25%;
	top: 78%;
	width: 60%;
	height: 8%;
}

/* ── Default nav & footer background ─────────────────────── */
/* COLOR: #669391 (teal) — used on all non-gov pages         */
.wp-block-navigation {
	background-color: #669391 !important;              /* nav color — change here */
}
.wp-block-template-part:last-child,
.wp-block-template-part:last-child .wp-block-group.has-background {
	background-color: #669391 !important;              /* footer color — change here */
}

/* ── Pull footer up (reduce gap between content and footer) ── */
.wp-block-template-part:last-child {
	margin-top: -30px;
}

/* ══════════════════════════════════════════════════════════
 *  /gov Page Overrides
 *  Body class "page-gov" is added on /gov and its children.
 * ══════════════════════════════════════════════════════════ */

/* ── Nav & footer background for /gov pages ── */
/* COLOR: #000080 (navy) — used on /gov and its sub-pages    */
.page-gov .wp-block-navigation {
	background-color: #000080 !important;              /* gov nav color — change here */
}
.page-gov .wp-block-template-part:last-child,
.page-gov .wp-block-template-part:last-child .wp-block-group.has-background {
	background-color: #000080 !important;              /* gov footer color — change here */
}
.blue-background {
	background-color: #000080 !important;              /* gov color — change here */
}

/* ── Gov header overlay positions (desktop) ──────────────
 *  Adjust these once gov header images are in place.
 *  Image: header-desktop-gov.png
 */
.page-gov .header-img-desktop .header-overlay-facebook  { left: 10.1%; top: 33%; width: 3%; height: 24%; }
.page-gov .header-img-desktop .header-overlay-instagram { left: 13.0%; top: 33%; width: 3%; height: 24%; }
.page-gov .header-img-desktop .header-overlay-email     { left: 15.9%; top: 33%; width: 3%; height: 24%; }
.page-gov .header-img-desktop .header-overlay-tiktok    { left: 12.1%; top: 58%; width: 3%; height: 24%; }
.page-gov .header-img-desktop .header-overlay-linkedin  { left: 15.0%; top: 58%; width: 3%; height: 24%; }
.page-gov .header-img-desktop .header-overlay-gov       { left: 70%;   top: 51%; width: 15%; height: 15%; }

/* ── Gov header overlay positions (tablet) ───────────────
 *  Image: header-tablet-gov.png
 */
.page-gov .header-img-tablet .header-overlay-facebook  { left: 8.0%;  top: 22%; width: 3.5%; height: 13%; }
.page-gov .header-img-tablet .header-overlay-instagram { left: 12.2%; top: 22%; width: 3.5%; height: 13%; }
.page-gov .header-img-tablet .header-overlay-email     { left: 16.5%; top: 22%; width: 3.5%; height: 13%; }
.page-gov .header-img-tablet .header-overlay-tiktok    { left: 10.0%; top: 37%; width: 3.5%; height: 13%; }
.page-gov .header-img-tablet .header-overlay-linkedin  { left: 14.5%; top: 37%; width: 3.5%; height: 13%; }
.page-gov .header-img-tablet .header-overlay-gov       { left: 68%;   top: 35%; width: 17%; height: 12%; }

/* ── Gov header overlay positions (mobile) ───────────────
 *  Image: header-mobile-gov.png
 */
.page-gov .header-img-mobile .header-overlay-facebook  { left: 64%;   top: 15%; width: 4.5%; height: 6%; }
.page-gov .header-img-mobile .header-overlay-instagram { left: 69%;   top: 15%; width: 4.5%; height: 6%; }
.page-gov .header-img-mobile .header-overlay-email     { left: 74%;   top: 15%; width: 4.5%; height: 6%; }
.page-gov .header-img-mobile .header-overlay-tiktok    { left: 79%;   top: 15%; width: 4.5%; height: 6%; }
.page-gov .header-img-mobile .header-overlay-linkedin  { left: 83.5%; top: 15%; width: 4.5%; height: 6%; }
.page-gov .header-img-mobile .header-overlay-gov       { left: 25%;   top: 78%; width: 60%; height: 8%; }