/* Besual Learning OS — shared public header.
   One stylesheet for includes/public-header.php, loaded by all seven public
   pages so the header no longer depends on which sheet a page happens to pull.
   Colours come from the shared tokens in besual-core.css; the values repeated
   here as fallbacks are for pages that do not load it. */

.public-skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;border-radius:0 0 12px 0;
  background:var(--besual-ink,#17171c);color:#fff;
  font-size:14px;font-weight:700;text-decoration:none;
}
.public-skip-link:focus{left:0}

.public-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:30px;
  min-height:72px;
  padding:0 max(24px,calc((100vw - 1180px)/2));
  background:var(--besual-surface,#fff);
  color:var(--besual-ink,#17171c);
  border-bottom:1px solid var(--besual-line,#e7e3e8);
}

.public-logo{display:block;width:118px;flex:none}
.public-logo img{width:100%;height:auto;display:block}

.public-nav{display:flex;gap:26px;align-items:center;flex:1}
.public-nav a,
.public-actions a{
  font-size:13px;font-weight:600;text-decoration:none;
  color:var(--besual-muted,#5c5563);
}
.public-nav a:hover,
.public-nav a:focus-visible{color:var(--besual-ink,#17171c)}
.public-nav a.is-active{color:var(--link-on-light,#6d28d9);font-weight:700}

.public-actions{display:flex;align-items:center;gap:8px}

.public-locale{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
.public-locale a{
  padding:8px 6px;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--besual-muted,#5c5563);
}
.public-locale a.is-active{color:var(--link-on-light,#6d28d9);text-decoration:underline}
.public-locale a + a{border-left:1px solid var(--besual-line,#e7e3e8);padding-left:8px}

.public-menu-toggle{
  display:none;margin-left:auto;
  font:inherit;font-size:13px;font-weight:600;
  background:none;color:inherit;cursor:pointer;
  border:1px solid var(--besual-line,#e7e3e8);border-radius:8px;padding:9px 12px;
}

.public-mobile-nav{display:none}

/* Every interactive target in the header clears the 44px minimum. */
.public-nav a,
.public-actions a,
.public-locale a,
.public-menu-toggle{min-height:44px;display:inline-flex;align-items:center}

/* Dark treatment — the landing. Same markup, modifier only. */
.public-header--dark{
  background:rgba(11,7,20,.84);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.public-header--dark .public-logo img{filter:brightness(0) invert(1)}
.public-header--dark .public-nav a,
.public-header--dark .public-actions a,
.public-header--dark .public-locale a{color:rgba(255,255,255,.82)}
.public-header--dark .public-nav a:hover,
.public-header--dark .public-nav a:focus-visible{color:#fff}
.public-header--dark .public-nav a.is-active,
.public-header--dark .public-locale a.is-active{color:var(--link-on-dark,#c4b5fd)}
.public-header--dark .public-locale a + a{border-left-color:rgba(255,255,255,.22)}
.public-header--dark .public-menu-toggle{border-color:rgba(255,255,255,.2);color:#fff}

@media(max-width:900px){
  .public-header{min-height:64px;gap:12px;padding:0 15px}
  .public-logo{width:105px}
  .public-nav{display:none}
  .public-menu-toggle{display:inline-flex}
  .public-actions{margin-left:auto}
  .public-actions .btn-ghost{display:none}

  .public-mobile-nav{
    position:fixed;top:64px;left:0;right:0;z-index:49;
    display:none;padding:18px 20px;
    background:var(--besual-surface,#fff);
    border-bottom:1px solid var(--besual-line,#e7e3e8);
  }
  .public-mobile-nav.open{display:grid;gap:15px}
  .public-mobile-nav a{font-size:15px;font-weight:600;text-decoration:none;color:var(--besual-ink,#17171c);min-height:44px;display:inline-flex;align-items:center}
  .public-header--dark ~ .public-mobile-nav{background:#0b0714;border-bottom-color:rgba(255,255,255,.1)}
  .public-header--dark ~ .public-mobile-nav a{color:#fff}
}