/* OXMOOR | Shared raised-panel emergency actions and matched page headers.
   This stylesheet is placed last in the head on each active website page. */

/* Emergency actions all use the same gold, bevel, inner panel and pressed depth.
   The secondary 'request standard service' text link is intentionally unaffected. */
.topbar .emergencyUtility,
.emergencyDialog .emergencyCall,
.repairHero .emergencyBtn,
.commercialEmergency button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-sizing:border-box;
  background:linear-gradient(180deg,#efd17f 0%,#dab04c 38%,#c6922e 72%,#ab751d 100%)!important;
  border:1px solid #f3d68c!important;
  color:#171a20!important;
  border-radius:6px!important;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.58),
             inset 0 -3px 0 rgba(91,53,6,.24),
             0 3px 0 rgba(85,54,11,.72),
             0 7px 14px rgba(0,0,0,.20)!important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.topbar .emergencyUtility::before,
.emergencyDialog .emergencyCall::before,
.repairHero .emergencyBtn::before,
.commercialEmergency button::before {
  content:"";position:absolute;inset:4px;pointer-events:none;
  border:1px solid rgba(255,241,190,.70);
  border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 0 rgba(95,63,20,.22);
}
.topbar .emergencyUtility strong,
.topbar .emergencyUtility span,
.commercialEmergency button strong,
.commercialEmergency button span {
  color:#171a20!important;
}
.emergencyDialog .emergencyCall {
  min-height:56px;
  padding:15px 18px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:.79rem;font-weight:800;letter-spacing:.015em;
  line-height:1.35;white-space:normal;
}
.repairHero .emergencyBtn {min-height:50px;padding:13px 18px;}
@media(hover:hover){
  .topbar .emergencyUtility:hover,
  .emergencyDialog .emergencyCall:hover,
  .repairHero .emergencyBtn:hover,
  .commercialEmergency button:hover{
    transform:translateY(-1px);filter:brightness(1.045);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.62),
               inset 0 -3px 0 rgba(91,53,6,.24),
               0 4px 0 rgba(85,54,11,.72),
               0 10px 18px rgba(0,0,0,.23)!important;
  }
}
.topbar .emergencyUtility:active,
.emergencyDialog .emergencyCall:active,
.repairHero .emergencyBtn:active,
.commercialEmergency button:active {
  transform:translateY(2px);filter:brightness(.98);
  box-shadow:inset 0 2px 4px rgba(79,52,14,.25),
             0 1px 0 rgba(85,54,11,.7)!important;
}
.topbar .emergencyUtility:focus-visible,
.emergencyDialog .emergencyCall:focus-visible,
.repairHero .emergencyBtn:focus-visible,
.commercialEmergency button:focus-visible {
  outline:3px solid #f7e5bd;outline-offset:3px;
}

/* Repair & Residential: same header structure, same right-side label width,
   same call action and menu spacing, not just matching typography. */
header .nav:has(.pageContext) {
  display:flex;align-items:center;justify-content:initial;
  gap:22px!important;height:82px;min-height:82px;
}
header .nav:has(.pageContext) .navlinks,
header .nav:has(.pageContext) .links {
  display:flex;align-items:center;margin-left:auto;
  justify-content:center;gap:22px;font-size:.84rem;font-weight:750;
  white-space:nowrap;
}
header .nav:has(.pageContext) .actions,
header .nav:has(.pageContext) .nav-actions {
  display:flex;align-items:center;gap:9px;
  margin-left:0;justify-content:flex-end;flex:0 0 auto;
}
header .nav:has(.pageContext) .actions>.btn.dark,
header .nav:has(.pageContext) .nav-actions>.phone {
  display:inline-flex;align-items:center;justify-content:center;
  height:auto;min-height:44px;padding:12px 17px;
  font-size:.8rem;line-height:1.25;font-weight:800;
  border-radius:4px;background:#071a2c;color:#fff;border:1px solid #071a2c;
  text-decoration:none;white-space:nowrap;
}
header .nav:has(.pageContext) .pageContext {
  width:190px;min-width:190px;max-width:190px;flex:0 0 190px;
}
header .nav:has(.pageContext) .menu {
  display:none;margin-left:auto;
  width:44px;height:44px;flex:0 0 44px;
}
@media(max-width:1050px){
  header .nav:has(.pageContext) .navlinks,
  header .nav:has(.pageContext) .links,
  header .nav:has(.pageContext) .actions>.btn.dark,
  header .nav:has(.pageContext) .nav-actions>.phone {display:none;}
  header .nav:has(.pageContext) .menu {display:block;}
}
@media(max-width:900px){
  header .nav:has(.pageContext){height:76px;min-height:76px;gap:10px!important;}
  header .nav:has(.pageContext) .pageContext {
    width:clamp(124px,22vw,168px);
    min-width:0;max-width:none;flex:0 1 clamp(124px,22vw,168px);
  }
}
@media(max-width:650px){
  header .nav:has(.pageContext){height:70px;min-height:70px;gap:10px!important;}
  header .nav:has(.pageContext) .pageContext{
    width:clamp(104px,30vw,132px);
    flex:0 1 clamp(104px,30vw,132px);
  }
  .emergencyDialog .emergencyCall {font-size:.73rem;min-height:56px;padding:14px 10px;}
}
@media(max-width:375px){
  header .nav:has(.pageContext){gap:7px!important;}
  header .nav:has(.pageContext) .siteBrand{width:137px!important;flex:0 0 137px!important;}
  header .nav:has(.pageContext) .menu{width:40px;height:40px;flex-basis:40px;}
}
@media(max-width:350px){
  header .nav:has(.pageContext){gap:6px!important;}
  header .nav:has(.pageContext) .siteBrand{width:116px!important;flex:0 0 116px!important;}
  header .nav:has(.pageContext) .menu{width:38px;height:38px;flex-basis:38px;}
}
@media(prefers-reduced-motion:reduce){
  .topbar .emergencyUtility,
  .emergencyDialog .emergencyCall,
  .repairHero .emergencyBtn,
  .commercialEmergency button {transition:none!important;}
}