/* style.css — modern, responsive, accessible */

/* Reset */
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #F7F6F3;
  color: #111;
  -webkit-font-smoothing: antialiased;
}

/* Utility container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
#site-header {
  position: sticky; top: 0; left: 0;
  background: #fff; z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand { display:flex; align-items:center; text-decoration:none; }
.logo { height:54px; width:auto; display:block; }

/* Nav */
.menu-toggle { display:none; background:transparent; border:0; font-size:22px; cursor:pointer; }
.nav { display:block; }
.nav-links { display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-links a { text-decoration:none; color:#111; font-weight:600; padding:8px 10px; border-radius:8px; transition:background .16s, transform .12s; }
/* Nav Hover Effect - Light Rounded */
.nav-links li a:hover,
.nav-links li a.active {
  background-color: rgba(255, 87, 51, 0.15) !important; /* lighter shade */
  border-radius: 20px !important;
  transition: background-color 0.2s ease;
}

/* Hero */
.hero { display:flex; gap:28px; align-items:center; padding:36px 0; }
.hero-left { flex:1; }
.hero-right { flex:1; display:flex; justify-content:center; align-items:center; }
h1 { font-size:28px; margin:0 0 12px 0; line-height:1.1; }
.lead { color:#444; margin:0 0 18px 0; }

/* Buttons */
.btn { display:inline-block; text-decoration:none; padding:10px 16px; border-radius:8px; font-weight:700; }
.btn.primary { background:#c0392b; color:#fff; }
.btn.outline { border:2px solid #c0392b; color:#c0392b; background:transparent; margin-left:12px; }

/* Slideshow */
.slideshow { width:100%; max-width:720px; position:relative; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.06); height:420px; }
.slides { width:100%; height:100%; position:relative; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:flex; align-items:center; justify-content:center; }
.slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slide.active { opacity:1; position:relative; }
.slide-prev, .slide-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.45); color:#fff; border:0; padding:10px 12px; border-radius:6px; cursor:pointer; }
.slide-prev { left:12px; } .slide-next { right:12px; }

/* Brands */
.brands { text-align:center; padding:48px 0; }
.brand-logos { display:flex; gap:40px; justify-content:center; align-items:center; flex-wrap:wrap; }
.brand-logos img { height:84px; object-fit:contain; }

/* Info cards */
.info { display:flex; gap:20px; justify-content:center; padding:36px 0; flex-wrap:wrap; }
.info-card { background:#fff; padding:20px; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,0.04); width:280px; text-align:center; }

/* Footer */
.site-footer { background:#fff; padding:28px 0 18px 0; margin-top:36px; border-top:1px solid #eee; }
.footer-grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; align-items:flex-start; }
.footer-logo { height:48px; display:block; margin-bottom:10px; }
.footer-map iframe { width:100%; height:160px; border:0; border-radius:8px; }

/* Footer bottom */
.footer-bottom { padding:12px 0; text-align:center; color:#666; }

/* Responsive */
@media (max-width: 980px) {
  .hero { flex-direction:column; padding:24px 0; }
  .hero-right { order: -1; } /* show slideshow above text on tablet */
  .slideshow { height:300px; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-links { gap:14px; }
}

@media (max-width: 720px) {
  .menu-toggle { display:block; }
  .nav { position:absolute; left:0; right:0; top:70px; background:#fff; transform:translateY(-110%); transition:transform .22s; z-index:999; }
  .nav.open { transform:translateY(0); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
  .nav-links { flex-direction:column; gap:8px; padding:14px; }
  .header-row { padding:10px 0; }
  .logo { height:46px; }
  .slide-prev, .slide-next { padding:8px 10px; font-size:16px; }
}

/* Small accessibility helpers */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==== NAV HOVER & ACTIVE (light pill highlight) ==== */
/* Place this at the very end of style.css */

.nav-links a {
  display: inline-block;            /* so the pill background fits nicely */
  padding: 8px 14px;                /* comfy touch target */
  border-radius: 22px;              /* pill shape */
  color: #111 !important;           /* ensure link color is consistent */
  text-decoration: none;
  transition: background-color .18s ease, transform .12s ease, color .12s ease;
}

/* Ensure all states have the same base color (prevent purple visited) */
.nav-links a:link,
.nav-links a:visited,
.nav-links a:focus,
.nav-links a:active {
  color: #111 !important;
}

/* Lighter pill on hover / focus / keyboard nav */
.nav-links a:hover,
.nav-links a:focus {
  background-color: rgba(192,57,43,0.08); /* lighter, softer shade */
  transform: translateY(-1px);
  outline: none;
}

/* Keep the current/active page highlighted:
   Support both <a class="active"> and <li class="active"><a> formas */
.nav-links a.active,
.nav-links li.active > a {
  background-color: rgba(192,57,43,0.10);
  color: #111 !important;
}

/* Mobile variant (if nav becomes vertical) */
@media (max-width: 720px) {
  .nav-links a { padding: 12px 16px; width:100%; border-radius:8px; }
}

/* ====== Force nav pill hover/active (put this at the END of style.css) ====== */

header .nav-links li a,
header .nav-links li a:link,
header .nav-links li a:visited,
header .nav-links li a:focus,
header .nav-links li a:active {
  display: inline-block !important;
  padding: 8px 16px !important;
  border-radius: 22px !important;
  color: #111 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background-color .18s ease, transform .12s ease, color .12s ease;
}

/* Hover / keyboard focus */
header .nav-links li a:hover,
header .nav-links li a:focus,
header .nav-links li:hover > a {
  background-color: rgba(192,57,43,0.08) !important; /* lighter shade */
  transform: translateY(-1px) !important;
  color: #111 !important;
  outline: none !important;
}

/* Active/current page (supports <a class="active"> and <li class="active"><a>) */
header .nav-links a.active,
header .nav-links li.active > a {
  background-color: rgba(192,57,43,0.10) !important;
  color: #111 !important;
}

/* Mobile: full-width pills */
@media (max-width:720px){
  header .nav-links li a { width:100% !important; padding:12px 16px !important; border-radius:10px !important; }
}
/* === Nav Hover / Active Styles (Override) === */
.nav-links li a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.nav-links li a:hover,
.nav-links li a:focus {
  background-color: rgba(192, 57, 43, 0.08);
  transform: translateY(-1px);
}

.nav-links li a.active {
  background-color: rgba(192, 57, 43, 0.10);
}

.slide {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.slide.active {
    opacity: 1;
}