/* Site header, mobile menu panel and footer. Shared by the site (layouts/site.blade.php, after style.css and redesign.css)
   and the customer portal (PortalPanelProvider, before portal.css). Moved here from style.css and redesign.css in their
   original order, so the cascade is unchanged. The header, nav and footer element selectors carry a zero-specificity
   :where() scope: on the site everything under body.design-2026, in the portal only the site header (header.header-portal)
   and footer (.site-footer), so Filament's own <header>, <nav> and <footer> elements stay untouched. */
header:where(.design-2026 *, .header-portal){max-width:1360px;margin:auto;padding:26px 45px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line)}
.brand{font:800 29px 'Manrope',sans-serif;letter-spacing:-1.3px;display:flex;align-items:center;gap:8px}
nav:where(.design-2026 *, .header-portal *){display:flex;gap:29px;font-size:13px;font-weight:600}
nav:where(.design-2026 *, .header-portal *) a:hover{color:var(--blue)}
footer:where(.design-2026 *, .site-footer *){display:flex;align-items:center;gap:25px;padding-bottom:35px;flex-wrap:wrap}
footer:where(.design-2026 *, .site-footer *) .brand{font-size:23px}
footer:where(.design-2026 *, .site-footer *) .brandmark{font-size:28px}
footer:where(.design-2026 *, .site-footer *)>span{font-size:10px;color:#8a98a8;flex:1}
footer:where(.design-2026 *, .site-footer *)>a:not(.brand){font-size:10px}
footer:where(.design-2026 *, .site-footer *) small{width:100%;border-top:1px solid var(--line);padding-top:20px;color:#9aa6b4;font-size:9px}
@media(max-width:1050px){
nav:where(.design-2026 *, .header-portal *){gap:16px;font-size:11px}
header:where(.design-2026 *, .header-portal){padding:22px 30px}
}
@media(max-width:760px){
header:where(.design-2026 *, .header-portal){padding:18px 22px;flex-wrap:wrap;gap:15px}
header:where(.design-2026 *, .header-portal) .brand{font-size:25px}
header:where(.design-2026 *, .header-portal) nav{order:3;width:100%;justify-content:space-between;gap:10px;padding-top:8px}
header:where(.design-2026 *, .header-portal) .small{padding:9px 12px;font-size:10px;gap:12px}
footer:where(.design-2026 *, .site-footer *){gap:15px}
footer:where(.design-2026 *, .site-footer *)>span{min-width:180px}
footer:where(.design-2026 *, .site-footer *)>a:not(.brand){width:100%}
}
.image-brand{width:176px;height:47px;overflow:hidden;flex-shrink:0;display:block}
.image-brand img{width:200px;height:auto;max-width:none;display:block;margin-top:-23px;margin-left:-12px;mix-blend-mode:multiply}
header:where(.design-2026 *, .header-portal) nav{gap:20px}
header:where(.design-2026 *, .header-portal) nav a{font-size:12px}
header:where(.design-2026 *, .header-portal) nav a[aria-current]{color:var(--blue)}
.multi-footer .footer-links{display:flex;gap:22px;flex-wrap:wrap;width:100%;padding:20px 0}
.footer-links a{font-size:12px;color:#6e8094}
@media(max-width:1050px){
header:where(.design-2026 *, .header-portal){flex-wrap:wrap}
header:where(.design-2026 *, .header-portal) nav{order:3;width:100%;justify-content:center}
}
@media(max-width:760px){
.image-brand{width:145px;height:39px}
.image-brand img{width:165px;margin-top:-19px;margin-left:-10px}
header:where(.design-2026 *, .header-portal) nav{overflow-x:auto;justify-content:flex-start;padding-bottom:6px;gap:22px}
header:where(.design-2026 *, .header-portal) nav a{white-space:nowrap;font-size:11px}
.multi-footer .footer-links{gap:15px 22px}
}
.skip-link{position:fixed;top:-70px;left:15px;z-index:100;background:white;padding:10px 20px}
.skip-link:focus{top:10px}
header:where(.design-2026 *, .header-portal){max-width:1440px;padding:17px 32px;border:0;gap:24px;min-height:86px;background:#fff;position:relative;z-index:10}
header:where(.design-2026 *, .header-portal) nav{gap:23px;flex:1;justify-content:center}
header:where(.design-2026 *, .header-portal) nav a{font-size:13px;font-weight:450;color:#536278;white-space:nowrap}
header:where(.design-2026 *, .header-portal) nav a:hover,header:where(.design-2026 *, .header-portal) nav a[aria-current]{color:#006be8}
.nav-login{font-size:13px;font-weight:450;color:#536278;white-space:nowrap}
.nav-login:hover{color:#006be8}
header:where(.design-2026 *, .header-portal) .image-brand{width:180px;height:49px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:207px;margin-top:-24px;margin-left:-13px}
.menu-toggle{display:none}
.multi-footer{padding-top:65px;padding-bottom:30px;gap:30px}
.footer-headline{font-size:45px;letter-spacing:-2px;line-height:1.15;width:100%;padding-bottom:35px;border-bottom:1px solid #dee7f0}
.footer-headline span{color:#8095ac}
.multi-footer>span{font-size:12px}
.multi-footer .footer-links{padding:20px 0;gap:30px}
.multi-footer .footer-links a{font-size:12px;color:#526b86}
.multi-footer small{font-size:10px;color:#6c829a}
footer:where(.design-2026 *, .site-footer *) .image-brand{width:180px;height:49px}
footer:where(.design-2026 *, .site-footer *) .image-brand img{width:207px;margin-top:-24px;margin-left:-13px}
@media(max-width:1100px){
.nav-login{font-size:11px}
header:where(.design-2026 *, .header-portal){gap:15px;flex-wrap:nowrap;padding:17px 24px}
header:where(.design-2026 *, .header-portal) nav{gap:14px;order:initial;width:auto}
header:where(.design-2026 *, .header-portal) nav a{font-size:11px}
header:where(.design-2026 *, .header-portal) .image-brand{width:150px;height:41px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:173px;margin-top:-20px;margin-left:-11px}
}
@media(max-width:760px){
header:where(.design-2026 *, .header-portal){padding:12px 20px;min-height:74px;gap:14px;flex-wrap:wrap}
header:where(.design-2026 *, .header-portal) .image-brand{width:146px;height:40px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:168px;margin-left:-10px;margin-top:-19px}
.nav-login{margin-left:auto;font-size:12px}
header:where(.design-2026 *, .header-portal)>.button.nav-cta{margin-left:0;font-size:11px;padding:9px 13px;min-height:36px;gap:11px}
.menu-toggle{display:flex;align-items:center;gap:7px;border:0;background:none;font-size:12px;padding:8px;order:3}
.menu-toggle span{font-size:19px}
header:where(.design-2026 *, .header-portal) nav{display:none;width:100%;order:4;flex:0 0 100%;overflow:visible;padding:5px 0 15px;flex-direction:column;align-items:stretch;gap:0}
header:where(.design-2026 *, .header-portal) nav.is-open{display:flex}
header:where(.design-2026 *, .header-portal) nav a{font-size:15px;padding:13px 0;border-bottom:1px solid #e2ebf4}
.multi-footer{padding-top:45px;padding-bottom:25px;gap:20px}
.footer-headline{font-size:37px;padding-bottom:25px}
.multi-footer>span{font-size:11px}
.multi-footer .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.multi-footer .footer-links a{font-size:12px}
.footer-headline+ .image-brand{width:160px}
}
@media(max-width:390px){
header:where(.design-2026 *, .header-portal){gap:7px;padding-left:14px;padding-right:14px}
header:where(.design-2026 *, .header-portal) .image-brand{width:130px;height:35px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:150px;margin-top:-17px;margin-left:-10px}
}
@media(min-width:761px) and (max-width:1023px){
header:where(.design-2026 *, .header-portal)>.button.small{white-space:nowrap}
header:where(.design-2026 *, .header-portal) nav a{padding:12px 0}
}
@media(min-width:761px) and (max-width:880px){
header:where(.design-2026 *, .header-portal){gap:10px}
header:where(.design-2026 *, .header-portal) nav{gap:9px}
}
@media(max-width:760px){
.menu-toggle{min-height:44px;padding:8px 6px}
.nav-login{padding:13px 0}
header:where(.design-2026 *, .header-portal)>.button.nav-cta{min-height:40px;font-size:12px}
.multi-footer>span{font-size:13px}
.multi-footer .footer-links{gap:0 20px}
.multi-footer .footer-links a{font-size:14px;padding:11px 0}
.multi-footer small{font-size:12px}
.footer-headline+.image-brand{width:160px;height:44px}
.footer-headline+.image-brand img{width:184px;margin-top:-21px;margin-left:-12px}
}
@media(max-width:440px){
header:where(.design-2026 *, .header-portal){gap:7px;padding-left:14px;padding-right:14px}
header:where(.design-2026 *, .header-portal) .image-brand{width:130px;height:35px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:150px;margin-top:-17px;margin-left:-10px}
}
@media(max-width:370px){
header:where(.design-2026 *, .header-portal) .image-brand{width:118px;height:32px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:136px;margin-top:-16px;margin-left:-9px}
.menu-toggle{padding:8px 4px;gap:5px}
header:where(.design-2026 *, .header-portal)>.button.nav-cta{padding:9px 11px;gap:9px}
}
@media(max-width:355px){
header:where(.design-2026 *, .header-portal){gap:4px}
header:where(.design-2026 *, .header-portal) .image-brand{width:104px;height:28px}
header:where(.design-2026 *, .header-portal) .image-brand img{width:120px;margin-top:-14px;margin-left:-8px}
.nav-login{font-size:11px}
header:where(.design-2026 *, .header-portal)>.button.nav-cta{padding:9px 9px;gap:6px;font-size:11px}
.menu-toggle{padding:8px 2px;font-size:11px}
}
/* Header: portal login, the red under-attack link and the full-height mobile menu. The extra panel parts stay hidden above 760px. */
.nav-more,.nav-panel-actions,.nav-panel-urgent{display:none}
.urgent-icon{flex:none;width:15px;height:15px}
.nav-urgent{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid #d93025;border-radius:100px;color:#c5221f;font-size:13px;font-weight:500;white-space:nowrap;transition:background .2s}
.nav-urgent:hover,.nav-urgent[aria-current]{background:#fdeceb;color:#a50e0e}
.urgent-bar{display:block;padding:10px 20px;background:#c5221f;color:#fff;text-align:center;font-size:14px;font-weight:500;line-height:1.4}
.urgent-bar:hover{background:#a50e0e;color:#fff}
@media(max-width:1100px){
.nav-urgent{min-height:38px;padding:0 12px;font-size:12px;gap:5px}
}
/* Between the mobile menu and full desktop the links no longer fit next to the urgent link: they get a second row. */
@media(min-width:761px) and (max-width:940px){
header:where(.design-2026 *, .header-portal){flex-wrap:wrap;row-gap:2px;padding-bottom:10px}
header:where(.design-2026 *, .header-portal) nav{order:5;flex:0 0 100%;justify-content:center;gap:22px}
header:where(.design-2026 *, .header-portal)>.nav-login{margin-left:auto}
}
@media(max-width:760px){
header:where(.design-2026 *, .header-portal) nav a.nav-panel-urgent{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin:8px 0 10px;padding:12px 20px;border:0;border-radius:100px;background:#c5221f;color:#fff;font-size:16px;font-weight:500}
header:where(.design-2026 *, .header-portal) nav a.nav-panel-urgent:hover{background:#a50e0e;color:#fff}
header:where(.design-2026 *, .header-portal) nav a.nav-panel-urgent .urgent-icon{width:18px;height:18px}
header:where(.design-2026 *, .header-portal) nav .nav-more{display:flex;flex-direction:column}
}
@media(max-width:640px){
/* The sticky phone header's height; sticky table heads (plans.css, compare.css) stop right under it. */
:root{--header-height:74px}
body.menu-open{overflow:hidden}
header:where(.design-2026 *, .header-portal){position:sticky;top:0;flex-wrap:nowrap;min-height:var(--header-height,74px)}
header:where(.design-2026 *, .header-portal)>.nav-login,header:where(.design-2026 *, .header-portal)>.nav-urgent{display:none}
header:where(.design-2026 *, .header-portal)>.button.nav-cta{margin-left:auto;min-height:44px;white-space:nowrap}
header:where(.design-2026 *, .header-portal) nav{display:none;position:fixed;top:var(--nav-top,74px);right:0;bottom:0;left:0;width:auto;flex:none;order:initial;flex-direction:column;align-items:stretch;gap:0;justify-content:flex-start;padding:8px 20px 28px;background:#fff;border-top:1px solid #e2ebf4;overflow-y:auto;overscroll-behavior:contain}
header:where(.design-2026 *, .header-portal) nav.is-open{display:flex}
header:where(.design-2026 *, .header-portal) nav a{display:flex;align-items:center;min-height:52px;padding:0;font-size:17px;white-space:normal}
header:where(.design-2026 *, .header-portal) nav .nav-more{display:flex;flex-direction:column;margin-top:18px}
header:where(.design-2026 *, .header-portal) nav .nav-more a{font-size:16px;font-weight:400}
header:where(.design-2026 *, .header-portal) nav .nav-panel-actions{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:28px}
header:where(.design-2026 *, .header-portal) nav a.nav-panel-urgent{min-height:56px;margin:12px 0 8px}
header:where(.design-2026 *, .header-portal) nav a.nav-panel-cta{justify-content:center;min-height:56px;padding:15px 25px;border-bottom:0;font-size:16px;color:#fff}
header:where(.design-2026 *, .header-portal) nav a.nav-panel-cta:hover{color:#fff}
header:where(.design-2026 *, .header-portal) nav a.nav-panel-login{justify-content:center;border-bottom:0;font-weight:500}
}
/* Phones: the logo link and the red bar get a 44px tap height (the padding only shows more of the logo's white
   background), and the footer tagline reads at 14px. */
@media(max-width:760px){
header:where(.design-2026 *, .header-portal) .image-brand{box-sizing:content-box;padding:2px 0}
.urgent-bar{padding:12px 20px;line-height:20px}
.multi-footer>span{font-size:14px}
}
@media(max-width:440px){
header:where(.design-2026 *, .header-portal) .image-brand{padding:6px 0}
}
@media(max-width:355px){
header:where(.design-2026 *, .header-portal) .image-brand{padding:8px 0}
}