/* =========================================================
   1771skilling.com — canonical shared site components
   Menu styling below is copied verbatim from the working
   Altona Type 2 page supplied from the live server.
   ========================================================= */

:root{
  --shared-bg:#17120D;
  --shared-bg-2:#211A13;
  --shared-ink:#EDE4D4;
  --shared-faded:#A6987F;
  --shared-hairline:#3B3227;
  --shared-gold:#D4A465;
  --shared-serif:'Libre Baskerville',Georgia,serif;
  --shared-sans:'Alegreya Sans','Segoe UI',sans-serif;
  --masthead-height:64px;
}

/* The header mount, rather than the generated masthead itself, is sticky.
   This lets the local page toolbar sit directly beneath it. */
#site-header{
  position:sticky;
  top:0;
  z-index:60;
}

/* progress line generated by menu.js */
.progress{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:2px;
  z-index:70;
  background:var(--gold,var(--shared-gold));
  pointer-events:none;
}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--hairline);
  background:rgba(23,18,13,.8);backdrop-filter:blur(10px)}
.masthead-inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-name{
  font-family:var(--serif,var(--shared-serif));
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink,var(--shared-ink));
  text-decoration:none;
  letter-spacing:.01em;
}

#site-header .site-home-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--ink,var(--shared-ink)) !important;
  background:#6F2232 !important;
  border:1px solid #9A4257 !important;
  border-radius:10px !important;
  padding:8px 13px !important;
  line-height:1 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.24) !important;
  transition:transform .15s ease,background .15s ease,border-color .15s ease !important;
}
#site-header .site-home-badge:hover,
#site-header .site-home-badge:focus-visible{
  color:var(--ink,var(--shared-ink)) !important;
  background:#833047 !important;
  border-color:#B45A70 !important;
  transform:translateY(-1px) !important;
}
.crumbs{font-family:var(--sans);font-size:.95rem;color:var(--faded)}
.crumbs a{color:var(--faded);text-decoration:none;border-bottom:1px solid var(--hairline)}
.crumbs a:hover{color:var(--ink);border-color:var(--gold)}
.crumbs .here{color:var(--ink);font-weight:600}

/* ---------- main navigation ---------- */
.masthead-inner{position:relative}
.mainnav{display:flex;gap:4px;align-items:center;font-family:var(--sans)}
.navgroup{position:relative}
.navtop{background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:1.22rem;
  color:var(--faded);padding:8px 14px;border-radius:22px;transition:all .18s ease}
.navtop:hover,.navtop[aria-expanded="true"]{color:var(--ink);background:rgba(212,164,101,.14)}
.navtop.active{color:var(--gold)}
.chev{font-size:.75em;opacity:.7}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;display:none;flex-direction:column;padding:8px;
  background:rgba(28,22,15,.97);backdrop-filter:blur(12px);border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.85);z-index:45}
.navgroup.open .dropdown{display:flex}
.dropdown a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.05rem;padding:9px 14px;border-radius:8px;
  transition:background .14s ease, color .14s ease}
.dropdown a:hover{background:rgba(212,164,101,.14);color:var(--gold)}
.dropdown a.current{color:var(--gold)}
.dropdown a.current::after{content:" ●";font-size:.6em;vertical-align:middle}
.nav-burger{display:none;background:none;border:1px solid var(--hairline);border-radius:8px;cursor:pointer;padding:9px 10px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}
@media (max-width:900px){
  .nav-burger{display:block}
  .mainnav{display:none;position:absolute;top:calc(100% + 6px);right:0;left:0;flex-direction:column;align-items:stretch;
    background:rgba(28,22,15,.98);border:1px solid var(--hairline);border-radius:12px;padding:10px;z-index:45}
  .mainnav.open{display:flex}
  .navgroup{width:100%}
  .navtop{width:100%;text-align:left}
  .dropdown{position:static;display:none;box-shadow:none;border:none;background:none;padding:0 0 6px 18px}
}

/* The masthead is inside the sticky #site-header wrapper. */
#site-header .masthead{
  position:relative;
  top:auto;
  z-index:60;
}

/* Local navigation: sticky on desktop/tablet, normal flow on phone. */
.localnav,
.toolbar,
.section-nav{
  position:sticky;
  top:var(--masthead-height,64px);
}

.localnav{z-index:35}
.toolbar,
.section-nav{z-index:30}

/* Shared footer */
#site-footer footer,
footer{
  border-top:1px solid var(--hairline,var(--shared-hairline));
  background:rgba(0,0,0,.25);
}

#site-footer .foot-inner,
footer .foot-inner{
  max-width:1200px;
  margin:0 auto;
  padding:26px 24px;
  font-family:var(--sans,var(--shared-sans));
  color:var(--faded,var(--shared-faded));
  font-size:.92rem;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-email{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(166,152,127,.35);
}
.footer-email:hover{
  color:var(--gold,var(--shared-gold));
  border-bottom-color:currentColor;
}

/* Phone: keep only the main menu sticky. */
@media (max-width:767px){
  .localnav,
  .toolbar,
  .section-nav{
    position:static;
    top:auto;
  }
}