/* brand.css: WAJDSchool's header and footer, matched to WAJD Academy (wajd.co.uk).

   The same family look as Academy's fluid layer: a frosted white header with the two-tone
   wordmark (WAJD in navy, School in Academy blue), a light glass chip for the Academy link, a
   menu button on phones, and the light frosted footer with gold-underlined headings. Values
   are copied from Academy's fluid.css so the two sites read as one family; change them there
   first and here second. Loaded after shared.css on every page with a site header.
   Author: WAJD AI */
:root {
  --brand-2: #2dadff;
  --glass-strong: rgba(255, 255, 255, 0.96);
  --hairline: rgba(255, 255, 255, 0.95);
  --ink-line: rgba(26, 26, 94, 0.12);
}

/* Header */
.site-nav {
  background: var(--glass-strong);
  border-bottom: 1.5px solid var(--hairline);
  box-shadow: 0 8px 22px rgba(26, 26, 94, 0.1);
  position: relative;
  z-index: 200;
}
.nav-logo-icon { background: none; border-radius: 0; }
.nav-logo span { color: var(--navy); }
.nav-logo .brand-2, .footer-logo .brand-2 { color: var(--brand-2); }
.btn-login {
  background: rgba(255, 255, 255, 0.68);
  color: var(--navy);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--hairline), 0 5px 12px rgba(26, 26, 94, 0.12);
}
.btn-login:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }
.hamburger span { background: var(--navy); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav {
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* Footer: light frosted panel */
.site-footer {
  background: rgba(255, 255, 255, 0.62);
  border-top: 1.5px solid var(--hairline);
  color: var(--text-dark);
}
.footer-logo { color: var(--navy); }
.footer-col p { color: var(--text-mid); }
.footer-col h4 { color: var(--navy); border-bottom-color: var(--yellow); }
.footer-links a { color: var(--text-mid); }
.footer-links a:hover { color: var(--blue); }
.footer-bottom { border-top-color: var(--ink-line); }
.footer-bottom p { color: var(--text-light); }
.footer-bottom-links a { color: var(--text-mid); }
.footer-bottom-links a:hover { color: var(--navy); }
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 34px 32px; margin-bottom: 36px; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 900px) {
  .site-nav { padding: 8px 16px; }
  .nav-right { margin-left: auto; }
  .site-footer { padding: 36px 16px 20px; }
}
@media (max-width: 380px) {
  .nav-logo span { font-size: 1.15rem; }
  .btn-login { padding: 7px 14px; font-size: .8rem; }
}