/* ==========================================================================
   PUENTE LATINO ASSOCIATION — navigation.css
   Masthead, editorial dropdowns, mobile navigation.
   ========================================================================== */

.pk-head{
  position:sticky;top:0;z-index:100;
  background:var(--puente-white);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid var(--puente-rule);
}
.pk-head__inner{
  height:var(--header-h);
  padding-inline:var(--page-margin);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.6vw,44px);
}
.pk-head__logo{display:flex;align-items:center;flex:0 0 auto;}
.pk-head__logo img{height:60px;width:auto;object-fit:contain;}
.pk-head__logo img.is-white{display:none;}

/* Overlay variant — transparent masthead over hero photography */
.pk-head--overlay{background:transparent;border-bottom-color:transparent;}
.pk-head--overlay .pk-head__logo img.is-black{display:none;}
.pk-head--overlay .pk-head__logo img.is-white{display:block;}
.pk-head--overlay .pk-nav__label,
.pk-head--overlay .pk-head__lang,
.pk-head--overlay .pk-burger span{color:#fff;}
.pk-head--overlay .pk-burger span{background:#fff;}
.pk-head--overlay .pk-head__donate{color:#fff;border-color:rgba(255,255,255,0.6);}
.pk-head--overlay .pk-head__donate:hover{background:#fff;color:var(--puente-ink);border-color:#fff;}
.pk-head--overlay.is-stuck{
  background:var(--puente-white);border-bottom-color:var(--puente-rule);
}
.pk-head--overlay.is-stuck .pk-head__logo img.is-white{display:none;}
.pk-head--overlay.is-stuck .pk-head__logo img.is-black{display:block;}
.pk-head--overlay.is-stuck .pk-nav__label,
.pk-head--overlay.is-stuck .pk-head__lang{color:var(--puente-ink);}
.pk-head--overlay.is-stuck .pk-burger span{background:var(--puente-ink);}
.pk-head--overlay.is-stuck .pk-head__donate{color:var(--puente-ink);border-color:var(--puente-ink);}
.pk-head--overlay.is-stuck .pk-head__donate:hover{background:var(--puente-ink);color:#fff;}

/* ---------- Desktop navigation ---------- */
.pk-nav{display:flex;align-items:center;gap:clamp(20px,2.3vw,38px);height:100%;}
.pk-nav__item{position:relative;display:flex;align-items:center;height:100%;}
.pk-nav__label{
  display:inline-flex;align-items:center;height:100%;
  font-size:var(--fs-nav);font-weight:500;letter-spacing:var(--ls-nav);font-kerning:normal;
  text-transform:uppercase;color:var(--puente-ink);white-space:nowrap;
  background:none;border:0;padding:0;cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.pk-nav__label::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(50% - 1.1em);height:1px;
  background:currentColor;opacity:0;transition:opacity var(--dur) var(--ease);
}
.pk-nav__item:hover > .pk-nav__label::after,
.pk-nav__item:focus-within > .pk-nav__label::after,
.pk-nav__label[aria-current="page"]::after{opacity:1;}
.pk-nav__label:hover{color:var(--puente-orange);}

.pk-nav__panel{
  position:absolute;top:100%;left:-22px;
  min-width:212px;
  background:var(--puente-white);
  border:1px solid var(--puente-rule);
  padding:22px 26px 24px;
  display:flex;gap:clamp(32px,3vw,56px);
  opacity:0;visibility:hidden;transform:translateY(-2px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.pk-nav__panel--wide{min-width:640px;max-width:calc(100vw - (var(--page-margin) * 2));flex-wrap:wrap;}
.pk-nav__item:hover > .pk-nav__panel,
.pk-nav__item:focus-within > .pk-nav__panel,
.pk-nav__item.is-open > .pk-nav__panel{opacity:1;visibility:visible;transform:translateY(0);}
.pk-nav__col{min-width:172px;}
.pk-nav__colhead{
  font-size:11px;font-weight:700;letter-spacing:0.055em;text-transform:uppercase;
  color:var(--puente-ink-4);padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--puente-rule);
}
.pk-nav__links{display:flex;flex-direction:column;gap:11px;}
.pk-nav__links a{
  font-size:16px;font-weight:400;line-height:1.35;color:var(--puente-ink);
  transition:color var(--dur) var(--ease);
}
.pk-nav__links a:hover{color:var(--puente-orange);}
.pk-nav__links a[aria-current="page"]{font-weight:700;}

/* Right cluster */
.pk-head__actions{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex:0 0 auto;}
.pk-head__lang{
  white-space:nowrap;
  font-size:var(--fs-nav);font-weight:500;letter-spacing:var(--ls-nav);
  text-transform:uppercase;color:var(--puente-ink);
}
.pk-head__lang em{font-style:normal;color:var(--puente-ink-4);}
.pk-head__donate{
  white-space:nowrap;
  font-size:var(--fs-nav);font-weight:500;letter-spacing:var(--ls-nav);text-transform:uppercase;
  color:var(--puente-ink);border:1px solid var(--puente-rule-2);padding:8px 14px;border-radius:0;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.pk-head__donate:hover{background:var(--puente-ink);color:#fff;}

/* ---------- Burger ---------- */
.pk-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:0;padding:10px;min-width:54px;min-height:54px;cursor:pointer;
}
.pk-burger span{display:block;width:26px;height:1.5px;background:var(--puente-ink);transition:background var(--dur) var(--ease);}

/* ---------- Mobile navigation ---------- */
.pk-mobilenav{
  display:none;
  position:fixed;inset:var(--header-h-sm) 0 0;z-index:99;
  background:var(--puente-white);
  overflow-y:auto;
  padding:8px var(--page-margin) 56px;
  -webkit-overflow-scrolling:touch;
}
.pk-mobilenav.is-open{display:block;}
.pk-mobilenav__group{border-bottom:1px solid var(--puente-rule);}
.pk-mobilenav__toggle{
  width:100%;min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:16px 0;cursor:pointer;text-align:left;
  font-size:22px;font-weight:700;letter-spacing:-0.01em;color:var(--puente-ink);
}
.pk-mobilenav__toggle .pk-mobilenav__sign{
  font-size:18px;font-weight:400;color:var(--puente-ink-4);line-height:1;
}
.pk-mobilenav__toggle[aria-expanded="true"] .pk-mobilenav__sign{color:var(--puente-orange);}
.pk-mobilenav__body{display:none;padding-bottom:20px;}
.pk-mobilenav__body.is-open{display:block;}
.pk-mobilenav__colhead{
  font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--puente-ink-4);margin:16px 0 10px;
}
.pk-mobilenav__body a{
  display:block;min-height:48px;padding:12px 0;
  font-size:17px;line-height:1.35;color:var(--puente-ink-2);
}
.pk-mobilenav__body a:hover{color:var(--puente-orange);}
.pk-mobilenav__link{
  display:flex;align-items:center;min-height:60px;padding:16px 0;
  font-size:22px;font-weight:700;letter-spacing:-0.01em;color:var(--puente-ink);
}
.pk-mobilenav__foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px;}
.pk-mobilenav__foot .pk-head__donate{padding:12px 18px;font-size:13px;}

/* Mid band: the masthead is scaled up, so step type + logo down before
   the desktop nav hands off to the burger. */
@media (min-width:1301px) and (max-width:1520px){
  :root{--header-h:96px;}
  .pk-head__logo img{height:54px;}
  .pk-nav{gap:clamp(18px,1.9vw,28px);}
}
/* Laptop band: the full nav still fits at 1024–1300, so keep it rather than
   handing a 1280 desktop a burger. Type holds; gaps and logo compress. */
@media (min-width:1024px) and (max-width:1300px){
  :root{--header-h:84px;}
  .pk-head__logo img{height:48px;}
  .pk-nav{gap:clamp(14px,1.5vw,22px);}
  .pk-head__inner{gap:clamp(14px,1.6vw,26px);}
  .pk-head__actions{gap:14px;}
  .pk-head__donate{padding:7px 11px;}
  .pk-nav__panel--wide{min-width:520px;}
}
@media (max-width:1023px){
  .pk-nav,.pk-head__donate{display:none;}
  .pk-burger{display:flex;}
  .pk-head__inner{height:var(--header-h-sm);}
  .pk-head__logo img{height:46px;}
}
@media (max-width:420px){
  .pk-head__logo img{height:40px;}
}