/* =========================================================================
   1stRankings static site - loaded after the theme CSS.
   Replaces what the WordPress version did with per-page inline <style>
   blocks and with the theme's JavaScript (jQuery, bootstrap.js,
   custom.all.js, custom.home.js). No JavaScript is used.
   ========================================================================= */

/* --- Styles WordPress printed inline ------------------------------------ */
.header { background-image: url(../img/background.jpg); }            /* home hero */
.overlay-layer-wrap { background: rgba(13, 60, 85, 0.5); }
#ribbon { background-image: url(../img/parallax-img1.jpg); }          /* "Request analysis" band */

/* --- Footer at the bottom of short pages (was fixFooterBottom()) -------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > * { flex-shrink: 0; }
body > .content-wrap { flex-grow: 1; }

/* --- Navigation bar -------------------------------------------------------
   WordPress: position:fixed plus a script-measured spacer, and on screens
   wider than 768px a scroll handler that let the dark phone/social strip
   scroll away while the white menu bar stayed pinned at the top.
   Here: position:sticky in normal flow, offset by the strip height (48px;
   46px below 1200px, where the theme's line-height drops to 26px). */
.site-header-sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 1030; }
@media (min-width: 769px) { .site-header-sticky { top: -46px; } }
@media (min-width: 1200px) { .site-header-sticky { top: -48px; } }
.site-header-sticky .sticky-navigation { position: relative; top: auto; opacity: 1; }
/* Phones: the theme itself makes the bar scroll with the page. */
@media (max-width: 767px) { .site-header-sticky { position: relative; top: auto; } }

/* --- Centered menu (was callback_menu_align()) ----------------------------
   The script added .menu-align-center to the header when logo width + menu
   width exceeded the container width. Measured: logo 245px + menu 683px =
   927px, so only the 720px container (768px-991px screens) triggered it;
   at 992px+ (940px / 1140px containers) the menu stayed on the logo's line. */
@media (min-width: 768px) and (max-width: 991px) {
	.sticky-navigation .navbar-header,
	.sticky-navigation .navbar-collapse { width: 100%; text-align: center; }
	.sticky-navigation .main-navigation li a { margin: 0; }
	.sticky-navigation .no-menu { width: 100%; margin-bottom: 10px; padding: 0; text-align: center; }
	.sticky-navigation .no-menu > li { display: inline-block; float: none; }
	.sticky-navigation .no-menu > li > a { padding: 5px 8px; }
}

/* --- Menu button on small screens (was bootstrap collapse.js) -------------
   A visually hidden checkbox toggled by the <label> hamburger. */
.nav-toggle-cb {
	position: absolute; top: 0; right: 0; width: 1px; height: 1px;
	margin: 0; padding: 0; border: 0; overflow: hidden; opacity: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
}
.navbar-toggle { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
@media (min-width: 768px) { .nav-toggle-cb { display: none; } }
@media (max-width: 767px) {
	.nav-toggle-cb:checked ~ .navbar-collapse.collapse { display: block; visibility: visible; overflow-y: auto; }
	.nav-toggle-cb:checked + .navbar-header .navbar-toggle .icon-bar,
	.nav-toggle-cb:focus-visible + .navbar-header .navbar-toggle .icon-bar { background-color: #0d3c55; }
	.nav-toggle-cb:focus-visible + .navbar-header .navbar-toggle { outline: 1px dotted #f16c20; }
}

/* --- Home hero spacing ----------------------------------------------------
   custom.home.js set the hero's padding-top to (menu bar height + 84px) once
   at page load, while the bar overlapped the hero. The visible gap under the
   bar that this produced is reproduced here, with the bar in normal flow. */
.header .overlay-layer { padding-top: 84px; }
@media (min-width: 768px) and (max-width: 991px) {
	/* bar measured before centering (147px) but 157px after: 84 + 147 - 157 */
	.header .overlay-layer { padding-top: 74px; }
}
@media (max-width: 767px) {
	/* phones: the bar was already in normal flow, so its height (119px) was
	   added on top of it */
	.header .overlay-layer { padding-top: 203px; }
}
@media (max-width: 580px) {
	/* bar is 103px here (smaller line-height) */
	.header .overlay-layer { padding-top: 187px; }
}