/* aufc-header.css (v11.8.193) - the one header for every *.ascotunitedfc.co.uk site, copied from
   commercial.ascotunitedfc.co.uk (Sponsorship Brochure\site\css\styles.css, .site-header). The SAME file is in the app
   (wwwroot\css) and the Help Centre (HelpSite\theme); finalize checks they are identical. Change it in both or neither.

   Markup:
   <header class="aufc-navbar [aufc-navbar-wide]">          wide = more links, so it folds into the menu below 1080px
     <div class="aufc-navbar-inner">
       <a class="aufc-brand" href="..."><img class="aufc-brand-badge" src=".../club-crest.png" alt="Ascot United FC">
         <span class="aufc-brand-text"><span class="aufc-brand-name">Ascot United</span>
           <span class="aufc-brand-tag">Football Club</span></span></a>
       <nav class="aufc-nav-links"> a.aufc-nav-link ... a.aufc-btn-nav (the yellow button) </nav>
       <a class="aufc-mobile-help"> (optional: shown beside the menu button on a phone)
       <button class="aufc-mobile-toggle" aria-expanded="false"><span></span><span></span><span></span></button>
     </div>
   </header>
   Fonts: Inter 600/700 and Outfit 400/800 (Google Fonts), with system fallbacks. Everything is scoped to .aufc-navbar,
   so a page's own .aufc-brand (the app footer) keeps its own look. */

.aufc-navbar { position: sticky; top: 0; z-index: 1000; background: #0c1b33; box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.6;
    -webkit-font-smoothing: antialiased; }
.aufc-navbar *, .aufc-navbar *::before, .aufc-navbar *::after { box-sizing: border-box; }
.aufc-navbar .aufc-navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 78px;
    max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* brand: the crest, then ASCOT UNITED over FOOTBALL CLUB */
.aufc-navbar .aufc-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.aufc-navbar .aufc-brand-badge { height: 48px; width: 48px; display: block; flex-shrink: 0; }
.aufc-navbar .aufc-brand-text { display: flex; flex-direction: column; line-height: 1.1; margin-left: 6px; }
.aufc-navbar .aufc-brand-name { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.aufc-navbar .aufc-brand-tag { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400; text-transform: uppercase; font-size: .72rem; letter-spacing: .15em; color: #d4a843;
    margin-top: 4px; white-space: nowrap; }

/* links: white pills; the one call to action is the yellow button */
.aufc-navbar .aufc-nav-links { display: flex; align-items: center; gap: 6px; margin: 0; }
.aufc-navbar .aufc-nav-link, .aufc-navbar .aufc-btn-nav, .aufc-navbar .aufc-nav-label, .aufc-navbar .aufc-mobile-help {
    display: inline-flex; align-items: center; gap: .4em; font-family: inherit; font-weight: 600; font-size: .94rem;
    line-height: 1.6; padding: 9px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; margin: 0; }
.aufc-navbar .aufc-nav-link { color: rgba(255, 255, 255, .88); background: none; border: 0; cursor: pointer;
    transition: background .15s, color .15s; }
.aufc-navbar .aufc-nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aufc-navbar .aufc-btn-nav { background: #ffd21e; color: #0a1452; font-weight: 700; border: 0; cursor: pointer;
    transition: background .15s; }
.aufc-navbar .aufc-btn-nav:hover { background: #f0b400; color: #0a1452; }
.aufc-navbar .aufc-nav-label { color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .08); cursor: default; }
.aufc-navbar form { display: contents; margin: 0; }
.aufc-navbar .aufc-nav-name { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.aufc-navbar a:focus-visible, .aufc-navbar button:focus-visible { outline: 2px solid #ffd21e; outline-offset: 2px; }

/* phone: Help beside the menu button (if the page has one), and the three-bar button */
.aufc-navbar .aufc-mobile-help { display: none; color: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .28);
    padding: 5px 12px; font-size: .85rem; margin: 0 6px 0 auto; }
.aufc-navbar .aufc-mobile-help:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aufc-navbar .aufc-mobile-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin: 0; }
.aufc-navbar .aufc-mobile-toggle span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 3px;
    margin: 5px 0; transition: .25s; }
.aufc-navbar .aufc-mobile-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.aufc-navbar .aufc-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.aufc-navbar .aufc-mobile-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* folded: the links drop down under the bar (860px as on the commercial site; 1080px for a wide header) */
@media (max-width: 860px) {
    .aufc-navbar .aufc-mobile-toggle { display: block; }
    .aufc-navbar .aufc-mobile-help { display: inline-flex; }
    .aufc-navbar .aufc-nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
        align-items: stretch; background: #0a1452; padding: 14px 24px 22px; gap: 4px; border-bottom: 3px solid #ffd21e;
        box-shadow: 0 18px 50px rgba(8, 16, 60, .14); visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: transform .25s, opacity .25s, visibility .25s; }
    .aufc-navbar .aufc-nav-links.open { visibility: visible; opacity: 1; transform: none; }
    .aufc-navbar .aufc-nav-links .aufc-nav-link, .aufc-navbar .aufc-nav-links .aufc-nav-label { padding: 13px 14px; }
    .aufc-navbar .aufc-nav-links .aufc-btn-nav { justify-content: center; padding: 13px 14px; margin-top: 8px; }
    .aufc-navbar .aufc-nav-links .aufc-nav-help { display: none; }
}
@media (max-width: 1080px) {
    .aufc-navbar-wide .aufc-mobile-toggle { display: block; }
    .aufc-navbar-wide .aufc-mobile-help { display: inline-flex; }
    .aufc-navbar-wide .aufc-nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
        align-items: stretch; background: #0a1452; padding: 14px 24px 22px; gap: 4px; border-bottom: 3px solid #ffd21e;
        box-shadow: 0 18px 50px rgba(8, 16, 60, .14); visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: transform .25s, opacity .25s, visibility .25s; }
    .aufc-navbar-wide .aufc-nav-links.open { visibility: visible; opacity: 1; transform: none; }
    .aufc-navbar-wide .aufc-nav-links .aufc-nav-link, .aufc-navbar-wide .aufc-nav-links .aufc-nav-label { padding: 13px 14px; }
    .aufc-navbar-wide .aufc-nav-links .aufc-btn-nav { justify-content: center; padding: 13px 14px; margin-top: 8px; }
    .aufc-navbar-wide .aufc-nav-links .aufc-nav-help { display: none; }
}
@media (max-width: 760px) { .aufc-navbar .aufc-brand-name { font-size: 1.12rem; } }
@media (max-width: 520px) { .aufc-navbar .aufc-navbar-inner { padding: 0 18px; } }
@media (max-width: 380px) { .aufc-navbar .aufc-brand-badge { height: 42px; width: 42px; }
    .aufc-navbar .aufc-brand-text { margin-left: 2px; } .aufc-navbar .aufc-brand-name { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .aufc-navbar * { transition: none !important; } }
@media print { .aufc-navbar { position: static; box-shadow: none; } .aufc-navbar .aufc-nav-links,
    .aufc-navbar .aufc-mobile-help, .aufc-navbar .aufc-mobile-toggle { display: none; } }