/* Safe & Secure site header, the ONE copy (2026-11-04).
   Markup: templates/ssl_public/_site_header.html. Behaviour: js/ssl-nav.js.
   Linked by _shell.html and _base.html after each page's own sheets, so every
   page (home, service, city, shop, safes, about, contact, cart, blog...) draws
   the same header with the same padding, sticky bar and Commercial dropdown.
   Values are the homepage's (ssl-home.css, approved mockup); the old copies
   in ssl-home.css (.hp .nav) and ssl-safes.css (.sfp .nav) were removed.
   Don't style the header from a page sheet: change it here. */

.ssl-hd{
  --navy:#221F49; --navy2:#2E2A63; --navy3:#39347A;
  --yellow:#F2C230; --cream:#F0E3C2; --paper:#F7F6F2; --white:#FFFFFC;
  --disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:8px 10px 22px;font-family:var(--sans);font-size:16px;line-height:1.5;
}
.ssl-hd,.ssl-hd *{box-sizing:border-box}
.ssl-hd svg{display:block}
.ssl-hd button{font:inherit}

/* lockup */
.ssl-hd .lockup{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none}
.ssl-hd .lockup .mk{width:44px;height:44px;flex:none}
.ssl-hd .wt{display:inline-flex;flex-direction:column;width:max-content;font-size:24px}
.ssl-hd .wm{font-family:var(--disp);font-weight:800;font-stretch:104%;line-height:1;letter-spacing:-.03em;white-space:nowrap;color:var(--white)}
.ssl-hd .sub{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:900;font-stretch:112%;font-size:.7em;line-height:1;margin-top:.2em;color:var(--cream)}

/* desktop links */
.ssl-hd .links{display:flex;align-items:center;gap:34px;margin:0;padding:0;background:none}
.ssl-hd .links a{color:#C9C7D6;text-decoration:none;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 0;border-radius:0;background:none}
.ssl-hd .links a.on,.ssl-hd .links a:hover,.ssl-hd .links a:focus-visible{color:var(--white);box-shadow:inset 0 -2px 0 var(--yellow);outline:none;background:none}

/* Commercial dropdown */
.ssl-hd .nav-dd{position:relative;display:flex}
.ssl-hd .nav-dd.has-sub>a::after{content:"";box-sizing:content-box;display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.ssl-hd .nav-sub{position:absolute;top:100%;left:-16px;z-index:20;min-width:220px;padding:8px;margin-top:8px;background:var(--white);border-radius:14px;box-shadow:0 12px 32px rgba(21,18,58,.25);display:none;flex-direction:column}
.ssl-hd .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ssl-hd .nav-dd:hover .nav-sub,.ssl-hd .nav-dd:focus-within .nav-sub{display:flex}
.ssl-hd .links .nav-sub a{white-space:nowrap;color:var(--navy);letter-spacing:.08em;padding:10px 12px;border-radius:10px}
.ssl-hd .links .nav-sub a:hover,.ssl-hd .links .nav-sub a:focus-visible{background:var(--paper);box-shadow:none;color:var(--navy)}

/* right side: Book online, call, menu */
.ssl-hd .nav-cta{display:flex;align-items:center;gap:10px}
.ssl-hd .pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.5;text-decoration:none;white-space:nowrap;padding:13px 22px;border:0}
.ssl-hd .pill:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.ssl-hd .pill.yellow{background:var(--yellow);color:var(--navy)}
.ssl-hd .pill.nav-book{background:var(--white);color:var(--navy);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px}
.ssl-hd .pill.nav-book:hover{background:var(--cream)}
.ssl-hd .circle{width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;flex:none}
.ssl-hd .menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--navy2);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.ssl-hd .menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--white);transition:transform .2s,opacity .2s}
.ssl-hd .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ssl-hd .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.ssl-hd .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ssl-hd .menu-btn:focus-visible,.ssl-hd .circle:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* mobile menu panel */
.ssl-hd .m-menu{position:absolute;top:calc(100% - 8px);left:0;right:0;z-index:7;display:flex;flex-direction:column;gap:2px;background:var(--navy2);border-radius:18px;padding:10px;box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.ssl-hd .m-menu[hidden]{display:none}
.ssl-hd .m-menu a:not(.cta){color:var(--white);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:14px 12px;border-radius:12px}
.ssl-hd .m-menu a.on:not(.cta){box-shadow:inset 3px 0 0 var(--yellow)}
.ssl-hd .m-menu a:not(.cta):hover,.ssl-hd .m-menu a:not(.cta):focus-visible{background:var(--navy3);outline:none}
.ssl-hd .m-menu .cta{margin-top:8px;justify-content:center}
.ssl-hd .m-menu .pill.yellow.cta{padding:20px 38px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}

@media (prefers-reduced-motion:no-preference){.ssl-hd .pill{transition:background .15s}}
@media (max-width:1100px){
  .ssl-hd .links{display:none}
  .ssl-hd .menu-btn{display:flex}
}
@media (min-width:1101px){.ssl-hd .m-menu{display:none!important}}
@media (max-width:860px){
  .ssl-hd{padding:8px 12px 14px}
  .ssl-hd .pill.nav-book{display:none}
}

/* Sticky bar: past the header it pins to the top as a slim navy bar;
   ssl-nav.js adds .kt-stuck and holds the header's space with a placeholder. */
.ssl-hd.kt-stuck{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--navy);padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));padding-top:calc(8px + env(safe-area-inset-top,0px));box-shadow:0 8px 24px rgba(21,18,58,.18)}
.ssl-hd .wt{transition:opacity .25s ease,max-width .3s ease,transform .3s ease}
.ssl-hd.kt-stuck .wt{opacity:0;max-width:0;transform:translateX(-8px);overflow:hidden}
.ssl-hd.kt-stuck .lockup{gap:0}
.ssl-hd.kt-stuck .lockup .mk{width:36px;height:36px}
.ssl-hd.kt-stuck .links{gap:26px}
.ssl-hd.kt-stuck .links a{font-size:12px;color:var(--white)}
.ssl-hd.kt-stuck .pill.nav-book{padding:11px 18px}
.ssl-hd.kt-stuck .circle,.ssl-hd.kt-stuck .menu-btn{width:40px;height:40px}
.ssl-hd.kt-stuck .m-menu{top:calc(100% + 6px);left:12px;right:12px}
@media (prefers-reduced-motion:no-preference){.ssl-hd.kt-stuck{animation:sslHdDrop .3s ease}}
@keyframes sslHdDrop{from{transform:translateY(-100%)}to{transform:none}}