/* Adapt + a11y + polish overlays on the incumbent system */

:root{
  --muted:#55636b;
  --focus:rgba(8,117,169,.45);
}

::selection{background:rgba(8,117,169,.22);color:var(--ink)}

a:focus-visible,
button:focus-visible,
.branch:focus-visible,
.menu-button:focus-visible,
.lightbox-btn:focus-visible,
.photo-grid button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

.nav-links>a:focus-visible,
.home-services-menu>a:focus-visible,
.home-about-menu>a:focus-visible{
  outline-offset:4px;
}

/* Contrast & readable microcopy */
.branch{color:#4f5d64}
.branch small{font-size:12px;color:#5c6b72}
.updated{font-size:12px;color:#4f5d64}
.fine-print{font-size:12px;color:#5c6b72}
.trust-grid span{font-size:12px;letter-spacing:.4px}
.hero h1,h2{letter-spacing:-1.6px}
.hero h1{letter-spacing:-2px}
.primary{color:#fff}
.button.primary{background:var(--red);color:#fff}

.fuel{grid-template-columns:1.4fr auto}
.fuel strong{text-align:right}

/* Nav menus: Serviços + Sobre (botão + ponte de hover) */
.home-services-menu,
.home-about-menu,
.nav-flyout{position:relative}
.nav-flyout-trigger,
.home-services-menu>a,
.home-about-menu>a{
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
}
.nav-flyout-trigger.current{color:var(--red)}
.nav-links>a.current{color:var(--red)}
.nav-flyout-trigger:after,
.home-services-menu>a:after,
.home-about-menu>a:after{
  content:"⌄";
  color:var(--red);
  font-size:12px;
}
.home-services-menu .submenu,
.home-about-menu .submenu,
.nav-flyout .submenu{
  display:none;
  position:absolute;
  top:100%;
  left:-12px;
  min-width:190px;
  background:#fff;
  padding:14px 16px 12px;
  margin-top:0;
  box-shadow:0 10px 24px rgba(18,38,52,.14);
  z-index:30;
}
.nav-flyout .submenu:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}
.nav-flyout:hover .submenu,
.nav-flyout.open .submenu,
.home-services-menu:hover .submenu,
.home-about-menu:hover .submenu,
.home-services-menu.open .submenu,
.home-about-menu.open .submenu{display:block}
.home-services-menu .submenu a,
.home-about-menu .submenu a,
.nav-flyout .submenu a{
  display:block;
  padding:8px 0;
  color:var(--ink);
  font-size:13px;
  text-decoration:none;
}
.home-services-menu .submenu a:hover,
.home-about-menu .submenu a:hover,
.nav-flyout .submenu a:hover{color:var(--blue)}

/* Mobile contact strip replaces hidden topbar */
.mobile-contact{
  display:none;
  background:var(--blue);
  color:#fff;
  font-size:12px;
  font-weight:600;
}
.mobile-contact .wrap{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mobile-contact a{color:#fff;text-decoration:none}

/* Hero photo quality + readability */
.hero-photo{
  background-image:url("assets/posto-jarjour.jpg");
  background-image:image-set(
    url("assets/posto-jarjour.webp") type("image/webp"),
    url("assets/posto-jarjour.jpg") type("image/jpeg")
  );
  background-position:center 40%;
  opacity:.92;
  transform:scale(1.02);
}
@media (min-width:801px){
  .hero-photo{
    filter:saturate(1.06) contrast(1.04);
  }
}
@media (max-width:800px){
  .hero-photo{
    background-image:url("assets/posto-jarjour-mobile.jpg");
    background-image:image-set(
      url("assets/posto-jarjour-mobile.webp") type("image/webp"),
      url("assets/posto-jarjour-mobile.jpg") type("image/jpeg")
    );
    opacity:1;
    filter:none;
    transform:none;
  }
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(0,55,82,.88) 0%,rgba(0,78,112,.62) 38%,rgba(0,80,116,.22) 66%,rgba(0,70,100,.08) 100%),
    linear-gradient(0deg,rgba(0,30,45,.42),transparent 48%);
}

.location-list a{
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
}

.story-image picture{
  display:block;
  width:100%;
  height:100%;
}
.story-image picture img{
  width:100%;
  height:100%;
  object-fit:cover;
}

footer h4{font:700 15px Outfit,sans-serif}

@media(max-width:800px){
  .topbar{display:none}
  .mobile-contact{display:block}

  .trust-grid{
    grid-template-columns:repeat(3,1fr);
    padding:18px 0 8px;
    row-gap:14px;
  }
  .trust-grid span{font-size:11px;line-height:1.3}
  .trust-grid p{
    display:block;
    grid-column:1 / -1;
    padding:14px 0 6px;
    border-top:1px solid rgba(255,255,255,.25);
    font-size:15px;
    text-align:center;
  }

  .branch small{font-size:11px}
  .fuel{grid-template-columns:1fr auto}
  .fuel span:nth-child(2){display:none}

  .home-services-menu,
  .home-about-menu,
  .nav-flyout{width:100%}
  .home-services-menu .submenu,
  .home-about-menu .submenu,
  .nav-flyout .submenu{
    position:static;
    box-shadow:none;
    padding:4px 0 4px 12px;
    min-width:0;
    border-left:2px solid var(--line);
    margin:6px 0 0;
  }
  .home-services-menu:hover .submenu,
  .home-about-menu:hover .submenu,
  .nav-flyout:hover .submenu{display:none}
  .home-services-menu.open .submenu,
  .home-about-menu.open .submenu,
  .nav-flyout.open .submenu{display:block}

  .hero{height:auto;min-height:0}
  /* Hero mobile layout owned by adapt.css */
  .store-actions{position:relative;z-index:4}
  .scroll-cue{display:none}
}

@media(max-width:420px){
  .trust-grid span{font-size:10px}
}