/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--body);line-height:1.6}
main{max-width:1120px;margin:0 auto;padding:var(--space-4) var(--space-2)}
img{max-width:100%;height:auto;display:block}

/* Header & Nav */
.header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid #e7ebee;z-index:10}
.nav{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-2)}
.nav .brand{font-weight:800;text-decoration:none;color:var(--ink)}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--brand-2)}
.nav-links{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-4);align-items:center;padding:var(--space-4) 0}
.hero h1{font-size:var(--h1);margin:.2rem 0}
.hero p{font-size:var(--lead);color:var(--muted)}
.hero .card{background:var(--bg-alt);padding:var(--space-3);border-radius:var(--radius);box-shadow:var(--shadow)}

/* Sections & Cards */
.section{padding:var(--space-4) 0}
.section h2{font-size:var(--h2);margin-bottom:var(--space-3);border-left:6px solid var(--brand-2);padding-left:var(--space-2)}
.grid{display:grid;gap:var(--space-3)}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--bg);border:1px solid #e7ebee;border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow)}
.card h3{font-size:var(--h3);margin:.2rem 0 .4rem}

/* Lists */
.list{padding-left:1.2rem}
.list li{margin:.35rem 0}

/* Footer */
footer{margin-top:var(--space-4);padding:var(--space-4) 0;border-top:1px solid #e7ebee;color:var(--muted)}
footer .container{max-width:1120px;margin:0 auto;padding:0 var(--space-2)}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
}

/* === Glue CSS for existing menu bits you kept === */

/* If you had a .logo block, align it nicely */
.nav-left .logo,
.nav-left .brand { display:inline-flex; align-items:center; gap: .5rem; }

/* Map your old menu link look to ours */
.menu a, .navbar a, .nav-right a {
  color: inherit; text-decoration:none; font-weight:600;
}

/* If you had a language switcher or small inline widgets */
.lang-switcher { font-size: .95rem; opacity:.9; }

/* Optional: dropdown compat */
.dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu {
  position: absolute; top: 100%; right: 0;
  background: var(--bg); border:1px solid #e7ebee; border-radius:10px;
  box-shadow: var(--shadow); padding: .5rem; min-width: 200px;
  z-index: 50;
}
.dropdown-menu a { display:block; padding:.4rem .6rem; }
.dropdown-menu a:hover { background: var(--bg-alt); 
}
/* === Hybrid nav: make Bootstrap nav look like our theme === */
.header{
  background: var(--brand-1);
  border-bottom: 3px solid var(--accent-3);
  position: sticky; top: 0; z-index: 1000;
}

/* space & alignment */
.nav.navbar { padding: var(--space-2) 0; }
.nav-links { display: flex; gap: var(--space-3); align-items: center; }

/* brand and link colors */
.navbar-brand, .nav .nav-link { color: var(--bright-3) !important; font-weight: 600; }
.nav .nav-link:hover, .nav .nav-link:focus { color: var(--bright-4) !important; }

/* toggler */
.navbar-toggler { border-color: rgba(255,255,255,.25); }
.navbar-toggler-icon { filter: invert(90%); }

/* dropdown styling aligned to theme */
.dropdown-menu{
  background: var(--bg);
  border: 1px solid #e7ebee;
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: .4rem;
}
.dropdown-item{ color: var(--ink); border-radius: 8px; }
.dropdown-item:hover{ background: var(--bg-alt); color: var(--ink); }

/* ensure horizontal layout on large screens */
@media (min-width: 992px){
  .navbar-nav { flex-direction: row; }
  .navbar-nav .nav-item { margin-left: .5rem; }
  .navbar-nav .dropdown-menu { position: absolute; }
}