/* ==========================================================================
   layout.css — containers, header, footer, section rhythm
   ========================================================================== */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--sp-5);}
.section{padding-block:var(--sp-9);}
.section--tight{padding-block:var(--sp-7);}
.section--alt{background:var(--color-gray-50);}
.section--navy{background:var(--color-navy-950);color:#fff;}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4,.section--navy p{color:#fff;}
.section--navy .eyebrow{color:var(--color-amber-500);}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:var(--border);}
.header-bar{display:flex;align-items:center;justify-content:space-between;padding-block:var(--sp-3);}
.brand{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);font-weight:700;color:var(--color-navy-950);font-size:1.15rem;}
.brand img{height:40px;width:auto;}
.brand .brand-sub{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;color:var(--color-blue-600);text-transform:uppercase;}

.main-nav{display:flex;align-items:center;gap:var(--sp-6);}
.main-nav ul{display:flex;gap:var(--sp-5);margin:0;padding:0;list-style:none;}
.main-nav a{color:var(--color-ink-900);font-weight:500;font-size:var(--fs-300);}
.main-nav a:hover{color:var(--color-blue-600);text-decoration:none;}
.has-dropdown{position:relative;}
.dropdown{position:absolute;top:120%;left:0;min-width:220px;max-width:280px;background:#fff;border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--sp-2);opacity:0;visibility:hidden;transform:translateY(4px);transition:all var(--dur-base) var(--ease);list-style:none;display:flex;flex-direction:column;gap:1px;z-index:200;}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-300);}
.dropdown a:hover{background:var(--color-gray-50);text-decoration:none;}
.header-cta{display:flex;gap:var(--sp-3);align-items:center;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;}

@media (max-width:900px){
  .header-cta .btn-text{display:none;}
  .nav-toggle{display:block;}
}

/* Footer */
.site-footer{background:var(--color-navy-950);color:var(--color-gray-300);padding-block:var(--sp-9) var(--sp-6);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:var(--sp-7);}
.footer-grid h4{color:#fff;font-size:var(--fs-400);margin-bottom:var(--sp-4);}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2);}
.footer-grid a{color:var(--color-gray-300);font-size:var(--fs-300);}
.footer-grid a:hover{color:var(--color-amber-500);text-decoration:none;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-7);padding-top:var(--sp-5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);font-size:var(--fs-200);}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);}}

/* Sticky action rail */
.sticky-rail{position:fixed;right:var(--sp-4);bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);z-index:150;}
.sticky-rail a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);color:#fff;transition:transform var(--dur-fast) var(--ease);}
.sticky-rail a:hover{transform:scale(1.08);}
.sticky-rail .rail-whatsapp{background:#22c35e;}
.sticky-rail .rail-call{background:var(--color-blue-600);}
.sticky-rail .rail-quote{background:var(--color-amber-500);}

/* ── Mobile nav dropdown expansion (tap-to-open) ─────────────────────── */
@media (max-width:900px){
  .main-nav ul{
    position:fixed;inset:64px 0 0 0;
    background:#fff;flex-direction:column;
    padding:var(--sp-4) var(--sp-5);
    gap:0;overflow-y:auto;
    transform:translateX(100%);
    transition:transform var(--dur-base) var(--ease);
    display:flex;
    box-shadow:-4px 0 24px rgba(15,61,99,.15);
    z-index:300;
  }
  .main-nav.open ul{transform:translateX(0);}

  .main-nav > ul > li{
    border-bottom:1px solid var(--color-gray-100);
  }
  .main-nav > ul > li > a{
    display:block;padding:var(--sp-4) 0;
    font-size:1.05rem;font-weight:600;
    color:var(--color-navy-950);
  }
  /* Dropdown arrow indicator */
  .has-dropdown > a::after{
    content:'›';float:right;font-size:1.3rem;
    color:var(--color-blue-600);
    transition:transform var(--dur-base) var(--ease);
  }
  .has-dropdown.open > a::after{transform:rotate(90deg);}

  /* Sub-menu: hidden by default, shown when .open */
  .dropdown{
    position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:none;
    background:var(--color-gray-50);
    border-radius:var(--radius-md);
    margin-bottom:.5rem;
    max-height:0;overflow:hidden;
    padding:0;
    transition:max-height .35s ease, padding .35s ease;
    display:flex;flex-direction:column;gap:0;
  }
  .has-dropdown.open .dropdown{
    max-height:60vh;
    overflow-y:auto;
    padding:var(--sp-2) var(--sp-3) var(--sp-3);
  }
  .dropdown li a{
    display:block;padding:.55rem .5rem;
    font-size:.9rem;color:var(--color-navy-950);
    border-bottom:1px solid var(--color-gray-100);
  }
  .dropdown li:last-child a{border-bottom:none;}
  .dropdown li a:hover{color:var(--color-blue-600);background:none;}

  /* Hide hover-based desktop arrow (we add our own via CSS above) */
  .main-nav a::after{display:none;}
  .has-dropdown > a::after{display:inline;}
}

/* ── Articles dropdown: 2-column grid to prevent tall overflow ──────── */
.articles-dropdown {
  min-width:520px;
  max-width:600px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  padding:var(--sp-3);
  max-height:80vh;
  overflow-y:auto;
}
@media(max-width:900px){
  .articles-dropdown{
    min-width:unset;max-width:unset;
    grid-template-columns:1fr;
  }
}
/* Right-align dropdowns that overflow right edge */
.has-dropdown:nth-last-child(-n+3) .dropdown{
  left:auto;right:0;
}