/* =========================================================
   GK Llambec — Full Stylesheet (with single-column dropdown)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --brand:#a40000;          /* Primary */
  --brand-2:#f9a602;        /* Accent (GK gold) */
  --ink:#0f172a;            /* Text dark */
  --muted:#475569;          /* Text muted */
  --bg:#ffffff;             /* Page background */
  --bg-alt:#f1f5f9;         /* Section background */
  --stroke:#e2e8f0;         /* Borders */
  --radius:14px;            /* Card radius */
  --container:1200px;       /* Max content width */
  --shadow:0 8px 30px rgba(2,8,23,.08);
}

/* ---------- Base ---------- */
html { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
html, body { height:100%; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
img { max-width:100%; display:block; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.grid { display:grid; gap:20px; }

.btn { display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; border:1px solid transparent; }
.btn.primary { background:var(--brand); color:#fff; }
.btn.primary:hover { filter:brightness(1.05); text-decoration:none; }
.btn.outline { border-color:var(--brand); color:var(--brand); }

.eyebrow{
  color:#fff;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8rem;
  font-weight:700;
}

/* ---------- Topbar / Header / Nav ---------- */
.topbar { background:var(--ink); color:#fff; font-size:.9rem; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; padding-block:8px; }
.topbar a { color:#fff; opacity:.9; }

header.site-header { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--stroke); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.nav .brand { display:flex; align-items:center; gap:12px; }
.nav .brand img { height:60px; width:auto; }
.nav .menu { display:flex; gap:18px; align-items:center; }
.nav .menu > li { position:relative; list-style:none; }
.nav .menu > li > a { font-weight:600; padding:10px 8px; display:block; color:var(--ink); }
.nav .menu > li:hover > a { color:var(--brand); }

/* ---------- Mega dropdown (single-column, auto width) ---------- */
.mega{
  position:absolute;
  top:100%;
  left:0;                 /* anchor to left of parent <li> */
  right:auto;             /* allow natural width growth */
  background:#fff;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:16px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:.2s ease;
  width:max-content;      /* expand to longest item */
  min-width:100%;         /* but never smaller than trigger */
  padding:12px 0;
  z-index:1000;
}
.nav .menu > li:hover .mega,
.menu > li:focus-within .mega{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Inner wrapper / links — force a single vertical list */
.mega .inner,
.mega .links,
.mega ul{
  display:block;
  padding:0;
  margin:0;
  list-style:none;
  column-count:1;         /* guard against multicol */
}
.mega h4{
  margin:0 0 8px;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.mega li{ display:block; width:100%; }
.mega a{
  display:block;
  padding:10px 24px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;      /* keep item on one line */
}
.mega a:hover{ background:var(--bg-alt); text-decoration:none; }

/* Optional promo card in dropdown */
.mega .promo{
  background:linear-gradient(135deg, #eef6ff, #fff);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ---------- Mobile nav ---------- */
.hamburger { display:none; background:none; border:0; width:44px; height:44px; border-radius:8px; }
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:88vw; max-width:380px; background:#fff;
  transform:translateX(100%); transition:transform .25s ease; z-index:60; box-shadow:var(--shadow);
  padding:18px; overflow:auto;
}
.drawer-open .mobile-drawer{ transform:translateX(0); }
.backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.45); opacity:0; visibility:hidden; transition:.2s; z-index:55; }
.drawer-open .backdrop{ opacity:1; visibility:visible; }

/* ---------- Hero Main ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 56vh;
  display: grid;
  align-items: center;
}

/* Default background image */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('images/GKLlambec_banner.png') center/cover no-repeat;
  filter: saturate(.9) contrast(1) brightness(.9);
}

/* Overlay gradient */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2,8,23,.55), rgba(2,8,23,.04));
}

/* Hero content styling */
.hero .content {
  color: #fff;
  padding-block: 64px;
}

.hero h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 14px;
}

.hero p {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  max-width: 70ch;
  opacity: .95;
}

.hero .actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Page-specific hero backgrounds ---------- */
.hero--page1::before {
  background-image: url('images/systems_banner.png');
}

.hero--page2::before {
  background-image: url('images/bulk_banner.png');
}

.hero--page3::before {
  background-image: url('images/feeder_banner.png');
}

.hero--page4::before {
  background-image: url('images/hero_page4.png');
}



/* ---------- Sections / Cards ---------- */
.section{ padding-block:56px; }
.section.alt{ background:var(--bg-alt); border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); }
.section h2{ font-size:clamp(1.4rem, 2.4vw, 2rem); margin:0 0 8px; }
.section .lead{ color:var(--muted); max-width:70ch; }

.cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:24px; }
.card{ background:#fff; border:1px solid var(--stroke); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card .thumb{ aspect-ratio:16/9; background:#dbeafe url('/assets/img/placeholder-16x9.jpg') center/cover no-repeat; }
.card .body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card .title{ font-weight:700; font-size:1.05rem; }
.card .meta{ color:var(--muted); font-size:.9rem; }

/* ---------- Simple Carousel ---------- */
.carousel{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--stroke); background:#fff; }
.carousel-track{ display:flex; transition:transform .35s ease; }
.carousel-item{ flex:0 0 100%; }
.carousel-nav{ position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; padding:12px; }
.carousel-nav button{ background:rgba(255,255,255,.95); border:1px solid var(--stroke); border-radius:999px; padding:10px 12px; }

/* ---------- Stats band ---------- */
.stats-band{
  background:#909090; /* gray */
  color:#fff;
  margin-top:100px;
  padding:48px 16px;
  font-family: Avenir, "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.stats-wrap{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); align-items:center;
}
.stat{ text-align:center; padding:8px 24px; position:relative; }
.stat:not(:first-child)::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:rgba(255,255,255,.35);
}
.stat-number{ font-weight:800; font-size:60px; line-height:1; letter-spacing:.5px; }
.stat-label{ margin-top:10px; font-size:22px; line-height:1.1; color:#DBDBDB; }

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(135deg, var(--brand), #590202);
  color:#fff; border-radius:20px; margin-top:100px; margin-bottom:100px;
  padding:28px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:var(--shadow);
}

/* ---------- Footer ---------- */
footer{ background:#0b1220; color:#cbd5e1; margin-top:42px; }
footer .upper{ padding-block:42px; border-bottom:1px solid rgba(255,255,255,.08); }
footer .cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:24px; }
footer h5{ color:#fff; margin:0 0 12px; letter-spacing:.06em; text-transform:uppercase; font-size:.85rem; }
footer a{ color:#cbd5e1; opacity:.9; }
footer .lower{ padding-block:18px; font-size:.9rem; display:flex; align-items:center; justify-content:space-between; gap:12px; }

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

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  /* Keep dropdown single-column on tablet; constrain width to viewport/container if needed */
  .mega{ max-width:min(92vw, var(--container)); }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  footer .cols{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; }
}

@media (max-width:900px){
  .stat-number{ font-size:48px; }
  .stat-label{ font-size:20px; }
}

@media (max-width:768px){
  .nav .menu, .nav .actions{ display:none; }
  .hamburger{ display:block; }
  .cards{ grid-template-columns:1fr; }
  .cta{ flex-direction:column; text-align:center; }
  footer .cols{ grid-template-columns:1fr 1fr; }

  /* Mobile dropdown becomes inline (no overlay) if you re-use .mega in the drawer */
  .mega{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:none; background:transparent; width:100%; min-width:0; padding:0;
  }
  .mega a{ padding:8px 0; }
}

@media (max-width:640px){
  .stats-wrap{ grid-template-columns:1fr; gap:24px; }
  .stat{ padding:8px 0; }
  .stat:not(:first-child)::before{ top:auto; bottom:auto; left:8%; right:8%; width:auto; height:1px; }
}

/* =========================================================
   Hard overrides to guarantee single-column dropdown behavior
   (in case any earlier rules or theme CSS re-apply grid/columns)
   ========================================================= */
.nav .menu > li > .mega{
  right:auto !important;
  width:max-content !important;
  min-width:100% !important;
  padding:12px 0 !important;
  z-index:1000 !important;
}
.nav .menu > li > .mega .inner{
  min-width:auto !important;
  padding:0 !important;
}
.nav .menu > li > .mega .links{
  display:block !important;
  grid-template-columns:none !important;
  column-count:1 !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.nav .menu > li > .mega .links a{
  display:block !important;
  white-space:nowrap !important;
  padding:10px 24px !important;
  border-radius:0 !important;
  text-decoration:none !important;
}
.nav .menu > li > .mega .links a:hover{
  background:var(--bg-alt) !important;
}
@media (max-width:1024px){
  .nav .menu > li > .mega .links{
    grid-template-columns:none !important;
    column-count:1 !important;
  }
}