/* nav.css — updated to clove/quicksilver/midnight-sea/hidden-meadow */

/* Palette variables (scoped here so nothing else breaks) */
:root{
  --clove:#A55E33;           /* warm accent */
  --quicksilver:#9DA3A6;     /* light text + borders */
  --midnight:#2C3F4F;        /* header base */
  --meadow:#7A8061;          /* subtle secondary */

  /* existing custom props used below */
  --brand: var(--clove);
  --brand2:#B56B41;          /* hover for buttons (slightly lighter clove) */
  --line: rgba(157,163,166,.25); /* quicksilver @ 25% */
  --card:#334754;            /* dropdown background (lighter midnight) */
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background: rgba(44,63,79,.88); /* midnight w/ blur */
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

/* Bar layout */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}

/* Brand */
.brand{
  font-weight:800;
  color:#ffffff;
}

/* Base visibility */
#nav-toggle{display:none}
.hamburger{display:none}

/* Links */
.links a{
  margin-left:16px;
  color: var(--quicksilver);
}

/* CTA button */
.btn-primary{
  background: var(--brand);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
}
.btn-primary:hover{
  background: var(--brand2);
}

/* Mobile */
@media (max-width:720px){
  .hamburger{
    display:block;
    color: var(--quicksilver);
    font-size:24px;
    cursor:pointer;
  }
  .links{
    display:none;
    position:absolute;
    right:20px;
    top:64px;
    background: var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
  }
  #nav-toggle:checked ~ .links{ display:block; }
  .links a{ display:block; margin:8px 0; }
}