/*
Theme Name:   Signal Saver (Astra Child)
Theme URI:    https://signalsaver.com/
Description:  Child theme for signalsaver.com. Owns the site header and footer.
Author:       Signal Saver
Template:     astra
Version:      1.1.0
Requires PHP: 7.4
Text Domain:  signalsaver-child
*/

/* =============================================================================
 * SITE CHROME
 *
 * Reproduces Elementor Pro Theme Builder templates 160 and 168. Every value here was
 * measured from the RENDERED page, not read out of the Elementor JSON, because the JSON
 * expresses the layout as three flex children whose widths total 135% and then shrink -
 * so the stated percentages are not the rendered ones.
 *
 * The derived model was checked against the measurements before being written:
 *   boxed width 1242, children 18% / 89% / 28% shrinking by 100/135
 *   -> 165.6 / 818.8 / 257.6
 *   -> logo x = 99 + (165.6 - 97.7)/2 = 132.9   (measured 132)
 *   -> nav  x = 264.6 + (818.8 - 597)/2 = 375.5 (measured 377)
 * ========================================================================== */

.ss-header{
	background-color:#100A33;
}
.ss-header__inner{
	max-width:1242px;
	margin:0 auto;
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	padding:3px 0 5px;
}

/* The three cells, as the shrunk proportions of 1242. The third is an empty spacer that
   exists in the original layout and is what pushes the nav left of centre. */
.ss-header__logo{ flex:0 0 13.333%; display:flex; justify-content:center; }
.ss-nav--desktop{ flex:0 0 65.926%; display:flex; justify-content:center; }
.ss-header__inner::after{ content:""; flex:0 0 20.741%; }

.ss-header__logo img{
	width:57.4%;      /* of the cell: 0.574 x 165.6 = 95px at 1440, matching the measurement */
	height:auto;
	display:block;
}

/* ---- menu ---- */
.ss-nav .ss-menu{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
}
.ss-nav--desktop .ss-menu{ gap:35px; }
.ss-nav .ss-menu a{
	font-family:"Teko", sans-serif;
	font-size:21px;
	font-weight:500;
	text-transform:uppercase;
	line-height:20px;
	color:#FFFFFF;
	text-decoration:none;
	padding:13px 0;
	display:block;
}
.ss-nav .ss-menu a:hover,
.ss-nav .ss-menu a:focus-visible,
.ss-nav .ss-menu .current-menu-item > a,
.ss-nav .ss-menu .current_page_item > a{
	color:#3DCDFF;
}

/* ---- toggle ---- */
/* Astra styles bare <button> with its own accent colour, and that was winning: the
   toggle rendered rgb(4,92,180) instead of #3DCDFF. Scoped through .ss-header to beat
   it on specificity rather than reaching for !important. */
.ss-header .ss-toggle{
	display:none;
	margin-left:auto;
	align-items:center;
	justify-content:center;
	width:53px;
	height:75px;
	padding:0;
	border:0;
	border-radius:0;
	cursor:pointer;
	background-color:#3DCDFF;
	color:#FFFFFF;
}
.ss-header .ss-toggle:hover,
.ss-header .ss-toggle:focus{
	background-color:#FFFFFF;
	color:#3DCDFF;
}
.ss-toggle__icon--close{ display:none; }
.ss-menu-open .ss-toggle__icon{ display:none; }
.ss-menu-open .ss-toggle__icon--close{ display:block; }

/* ---- mobile panel ----
   Closed state is the `hidden` attribute AND visibility:hidden. Both remove it from the
   tab order and from the accessibility tree, so aria-hidden can never disagree with
   focusability - which is exactly how the Elementor menu this replaces went wrong. */
.ss-nav--mobile{
	display:none;
	background-color:#100A33;
}
.ss-nav--mobile[hidden]{ visibility:hidden; }
.ss-nav--mobile .ss-menu{ flex-direction:column; align-items:stretch; }
.ss-nav--mobile .ss-menu a{ padding:16px 20px; }

/* ---- breakpoint: desktop menu at >=1025, toggle at <=1024 ---- */
/* Below the breakpoint the measured header is exactly 20px taller than its logo
   (135 vs 115 at 1024, 106 vs 86 at 768, 115 vs 95 at 390), i.e. 10px above and below.
   The first build had no vertical padding here, which is why it came out 20px short. */
@media (max-width:1024px){
	.ss-header__inner{ padding:10px; }
	.ss-nav--desktop{ display:none; }
	.ss-header__inner::after{ content:none; }
	.ss-header .ss-toggle{ display:flex; }
	.ss-nav--mobile{ display:block; }
	.ss-nav--mobile[hidden]{ display:none; }
	/* The logo sits in a cell and is centred in it, which is where its x offset comes
	   from: 10 + (0.18 x 1024 - 117)/2 = 43.6 against a measured 42. */
	.ss-header__logo{ flex:0 0 18%; justify-content:center; }
	.ss-header__logo img{ width:11.45vw; }        /* 117 at 1024, 88 at 768 */
}
/* Toggle inset, measured across the whole range rather than guessed from two points:
   1024->74, 900->58, 800->45, 768->41, then a flat 10 at 700/600/480/390.
   The tablet range is linear at 12.891px per 100px of viewport, so the inset is
   12.891vw - 58. The inner already contributes 10px of padding, hence -68 here. */
@media (max-width:1024px) and (min-width:768px){
	.ss-header .ss-toggle{ margin-right:calc(12.891vw - 68px); }
}
@media (max-width:767px){
	/* No horizontal padding: the measured logo x of 49 at 390 is exactly
	   (0.5 x 390 - 96)/2, which only holds if the cell starts at the viewport edge. */
	.ss-header__inner{ padding:10px 0; }
	.ss-header__logo{ flex:0 0 50%; }
	/* Mapped across the whole mobile range rather than fitted to one point: 88@360,
	   96@390, 107@430, 127@500, 154@600, then FLAT 158 at 700 and 767. It is linear
	   (0.275·vw - 11) up to about 614px and capped at 158 above that. A single
	   percentage was 4-6px out at both ends. */
	.ss-header__logo img{ width:min(calc(27.5vw - 11px), 158px); }
	.ss-header .ss-toggle{ margin-right:10px; }
}

/* =============================================================================
 * FOOTER
 * ========================================================================== */
.ss-footer__main{
	background-color:#100A33;
	padding:50px 0;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.ss-footer__logo img{ width:180px; height:auto; display:block; }
.ss-nav--footer .ss-menu{ gap:35px; }
.ss-footer__text{
	max-width:83%;
	margin:3px auto -15px;
	text-align:center;
}
.ss-footer__text p{
	font-family:"Poppins", sans-serif;
	font-size:15px;
	font-weight:400;
	line-height:28px;
	color:#FFFFFF;
	text-align:center;
}
.ss-footer__text a{ color:#FFFFFF; text-decoration:underline; }

.ss-footer__strip{
	background-color:#3DCDFF;
	padding:18px 0 20px;
	text-align:center;
}
/* 🔴 #100A33, NOT white. White on #3DCDFF is 1.9:1. The Elementor build got its ink
   colour from an accessibility override keyed to .elementor-element-c7da533, which
   cannot survive this rebuild - so the correct colour is baked in here instead. */
.ss-footer__strip p{
	font-family:"Poppins", sans-serif;
	font-size:16px;
	font-weight:400;
	color:#100A33;
	margin:0;
}

@media (max-width:1024px){
	.ss-footer__logo img{ width:160px; }
	.ss-nav--footer .ss-menu{ flex-wrap:wrap; justify-content:center; gap:20px; }
}
@media (max-width:767px){
	.ss-footer__logo img{ width:145px; }
	.ss-footer__text{ max-width:90%; }
}