/*
 * SIGNO header + footer — translated 1:1 from Home.html's topbar/header/mega/footer rules.
 */

/* ---------- Topbar ---------- */
.signo-topbar { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--signo-line); padding: 9px 0; color: var(--signo-muted); }
.signo-topbar__wrap { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.signo-topbar__links { display: flex; gap: 24px; }
.signo-topbar__links a { text-decoration: none; color: inherit; }
.signo-topbar__links a:hover { color: var(--signo-blue); }

/* ---------- Header + Mega nav ---------- */
.signo-header { background: #fff; z-index: 50; border-bottom: 1px solid var(--signo-line); }
.signo-header--sticky { position: sticky; top: 0; }
/* While the sticky header is scrolled, hide the topbar so only the compact nav bar stays pinned. */
html.signo-header-scrolled .signo-topbar { display: none; }
.signo-header__wrap { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; }
.signo-logo { font-family: var(--signo-font-head); font-size: 29px; font-weight: 700; letter-spacing: .14em; color: var(--signo-navy); text-decoration: none; }
.signo-logo span { font-weight: 400; }
.signo-mainnav { display: flex; align-items: center; height: 84px; }
.signo-nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.signo-nav-item > a, .signo-nav-item > button { font: inherit; font-size: 14px; font-weight: 500; color: var(--signo-text); background-color: transparent; border: 0; padding: 8px 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 100%; text-decoration: none; }
.signo-nav-item > button:after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
/*
 * The theme's own reset.css ships a WooCommerce-style default for every <button>/[type=button]
 * ([type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;...}
 * and a #c36 solid fill on :hover/:focus). Our mega-nav triggers are plain <button> elements,
 * so without an explicit override here they inherit that theme default instead of looking like
 * plain nav links. Re-assert background/border on hover/focus, not just at rest.
 */
.signo-nav-item > a:hover,
.signo-nav-item > button:hover,
.signo-nav-item > button:focus,
.signo-nav-item.open > button {
	color: var(--signo-blue);
	background-color: transparent;
	border: 0;
}
.signo-mega { position: absolute; top: 100%; left: 0; width: 560px; background: #fff; border: 1px solid var(--signo-line); border-top: 3px solid var(--signo-blue); box-shadow: 0 26px 60px rgba(13,36,72,.14); padding: 22px 28px 18px; display: none; grid-template-columns: 1fr 1fr; column-gap: 30px; z-index: 60; }
/* Desktop: open on hover (and keyboard focus-within) like Home.html. The .open class (toggled by
   site-header.js on click) is what drives it on mobile/touch, where :hover doesn't apply. */
.signo-nav-item:hover > .signo-mega,
.signo-nav-item:focus-within > .signo-mega,
.signo-nav-item.open > .signo-mega { display: grid; }
.signo-mega a { display: block; padding: 13px 0; border-bottom: 1px solid var(--signo-line); text-decoration: none; }
.signo-mega a b { display: block; color: var(--signo-navy); font-size: 15px; font-weight: 600; }
.signo-mega a span { display: block; font-size: 13px; color: var(--signo-muted); margin-top: 2px; }
.signo-mega a:hover b { color: var(--signo-blue); }
.signo-mega__all { grid-column: 1/-1; border: 0; color: var(--signo-blue); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; padding: 16px 0 4px; }

.signo-nav-actions { display: flex; align-items: center; gap: 12px; }
.signo-menu-toggle { display: none !important; border: 0; background-color: transparent; font-size: 25px; color: var(--signo-navy); cursor: pointer; }
/* Same theme reset.css button:hover/:focus override as the mega-nav triggers above. */
.signo-menu-toggle:hover, .signo-menu-toggle:focus { background-color: transparent; border: 0; color: var(--signo-navy); }

.signo-btn--ghost { background: transparent; color: var(--signo-navy); border-color: var(--signo-line); }
.signo-btn--light { background: #fff; color: var(--signo-navy); }

@media (max-width: 1180px) {
	/* !important: guards these two against any other equal-or-higher-specificity rule (theme,
	   Elementor default widget CSS, etc.) that might otherwise re-assert the desktop layout. */
	.signo-mainnav { display: none !important; }
	.signo-menu-toggle { display: block !important; }
	.signo-header.nav-open .signo-mainnav { display: flex !important; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: -20px; right: -20px; height: auto; max-height: calc(100vh - 110px); overflow: auto; background: #fff; border-bottom: 1px solid var(--signo-line); box-shadow: 0 20px 40px rgba(13,36,72,.12); padding: 10px 20px 20px; z-index: 100; }
	.signo-header.nav-open .signo-nav-item { height: auto; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--signo-line); }
	.signo-header.nav-open .signo-nav-item > a, .signo-header.nav-open .signo-nav-item > button { padding: 16px 0; justify-content: space-between; font-size: 16px; }
	.signo-header.nav-open .signo-mega { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 12px; grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
	.signo-topbar__links { display: none; }
	.signo-header__wrap { height: 72px; }
	.signo-nav-actions .signo-btn { display: none; }
	.signo-logo { font-size: 22px; }
}

/* ---------- Footer ---------- */
.signo-footer { background: var(--signo-navy); color: #fff; padding: 70px 0 0; }
.signo-footer__wrap { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; }
.signo-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.14); }
.signo-footer__brand { font-family: var(--signo-font-head); font-size: 26px; font-weight: 700; letter-spacing: .1em; }
.signo-footer__brand--image img { max-height: 32px; width: auto; object-fit: contain; }
.signo-footer__claim { color: #cbd5e3; max-width: 330px; margin: 14px 0 22px; }
.signo-footer h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #9eb0ca; margin: 0 0 14px; }
.signo-footer h4.mt { margin-top: 28px; }
.signo-footer a { display: block; margin: 0 0 12px; font-size: 14px; color: #cbd5e3; text-decoration: none; }
.signo-footer a:hover { color: #fff; }
.signo-footer__copyright { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 26px 0; font-size: 12px; color: #9eb0ca; }
.signo-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.signo-footer__legal a { display: inline; margin: 0; font-size: 12px; color: #aebbd0; }
.signo-footer__legal a:hover { color: #fff; }

@media (max-width: 1050px) {
	.signo-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
	.signo-footer__grid { grid-template-columns: 1fr; }
	.signo-footer__copyright { display: block; }
	.signo-footer__copyright span { display: block; margin-top: 8px; }
}