/* Shared site header for the secondary pages (gallery, tours, schools, crisis,
   koh-news, donate). Scoped to header.u4hdr so each page's own inline CSS
   (which has its own .nav and .btn rules) can't change how it looks.
   Mirrors the header rules in site.css. */
header.u4hdr{position:sticky;top:0;z-index:50;background:rgba(20,17,16,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.u4hdr .nav{display:flex;align-items:center;gap:18px;height:72px;
  max-width:1120px;margin:0 auto;padding:0 24px}
header.u4hdr .nav .logo{margin-right:2px}
header.u4hdr .nav .logo img{height:44px;width:auto}
header.u4hdr .nav .signin{flex-shrink:0}
header.u4hdr .nav nav{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:nowrap}
header.u4hdr .nav nav a{color:var(--sand);text-decoration:none;font-weight:600;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
header.u4hdr .nav nav a:hover,header.u4hdr .nav nav a.on{color:var(--orange-hot)}
header.u4hdr .btn{display:inline-block;padding:9px 18px;border-radius:4px;text-decoration:none;
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  transform:skewX(-6deg);border:2px solid transparent;margin:0}
header.u4hdr .btn>span{display:inline-block;transform:skewX(6deg)}
header.u4hdr .btn-solid{background:var(--orange);color:#1a1206}
header.u4hdr .btn-solid:hover{background:var(--orange-hot);color:#1a1206}
header.u4hdr .btn-ghost{border-color:var(--sand);color:var(--sand);background:none}
header.u4hdr .btn-ghost:hover{border-color:var(--orange-hot);color:var(--orange-hot)}
header.u4hdr .menubtn{display:none;align-items:center;gap:8px;background:none;border:2px solid var(--line);
  color:var(--sand);border-radius:4px;padding:8px 12px;font:800 .8rem/1 inherit;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
header.u4hdr .menubtn i{display:block;width:16px;height:2px;background:currentColor;
  box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
header.u4hdr .mnav{display:none;border-top:1px solid var(--line);padding:10px 0 16px}
header.u4hdr .mnav a{display:block;padding:11px 24px;color:var(--sand);text-decoration:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.92rem}
header.u4hdr .mnav a.on,header.u4hdr .mnav a:hover{color:var(--orange-hot)}
@media (max-width:1100px){
  header.u4hdr .nav nav a:not(.btn){display:none}
  header.u4hdr .menubtn{display:inline-flex}
  header.u4hdr.open .mnav{display:block}
}
@media (max-width:900px){
  header.u4hdr .nav,header.u4hdr .nav nav{gap:12px}
  header.u4hdr .nav .signin{padding:8px 14px;font-size:.8rem}
}
@media (max-width:520px){
  header.u4hdr .menubtn b{display:none}
  header.u4hdr .nav,header.u4hdr .nav nav{gap:8px}
  header.u4hdr .nav .logo img{height:36px}
}

/* "Back to site" bar under the header on secondary pages */
.u4back{border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.u4back .in{max-width:1120px;margin:0 auto;padding:0 24px}
.u4back a{display:inline-block;padding:11px 0;color:var(--sand);text-decoration:none;font-weight:600;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.u4back a:hover{color:var(--orange-hot)}