/* Desktop dropdowns stay over the page instead of increasing navigation height. */
.site-header{position:relative}.site-nav{position:relative;z-index:20;flex-wrap:nowrap;gap:clamp(.6rem,1.45vw,1.75rem);padding:.9rem max(2vw,1rem)}.site-nav>a,.site-nav summary{font-size:clamp(.72rem,1vw,.88rem)}.site-nav details{position:relative;flex:0 0 auto}.site-nav summary{display:flex;align-items:center;gap:.36rem;list-style:none}.site-nav summary::-webkit-details-marker{display:none}.site-nav summary::before{content:"▾";font-size:.72em;transition:transform .18s ease}.site-nav details[open] summary::before{transform:rotate(180deg)}.site-nav details[open] summary{padding:.25rem .45rem;margin:-.25rem -.45rem;background:#fff;color:#092d55;box-shadow:0 5px 14px #001a30}.site-nav details[open]>a{position:absolute;left:0;z-index:25;display:block;width:max-content;min-width:190px;padding:.72rem .9rem;background:#fff;color:#17304a;text-decoration:none;box-shadow:0 10px 18px #001a3024}.site-nav details[open]>a:hover,.site-nav details[open]>a:focus-visible{background:#edf4fb;color:#0d5a9e}.site-nav details[open]>a:nth-of-type(1){top:calc(100% + .25rem)}.site-nav details[open]>a:nth-of-type(2){top:calc(100% + 2.85rem)}.site-nav details[open]>a:nth-of-type(3){top:calc(100% + 5.45rem)}

@media(max-width:1150px){.menu-toggle{display:block;justify-self:end;padding:.55rem .8rem;border:1px solid #0b294e;border-radius:5px;background:#fff;color:#0b294e;font:700 .78rem Arial,sans-serif;text-transform:uppercase}.brand-row{grid-template-columns:75px 1fr auto}.site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;max-height:calc(100vh - 80px);overflow:auto;padding:1rem;background:#0b294e;box-shadow:0 14px 25px #001a3040}.site-header .site-nav.open{display:grid;gap:.1rem}.site-nav>a,.site-nav details{display:block}.site-nav>a,.site-nav summary{padding:.72rem .45rem;font-size:.92rem}.site-nav details[open] summary{margin:0;padding:.72rem .45rem;background:#173c67;color:#fff;box-shadow:none}.site-nav details[open]>a{position:static;width:auto;min-width:0;margin:0 .4rem;padding:.65rem .9rem;background:#fff;color:#17304a;box-shadow:none}.site-nav details[open]>a:nth-of-type(n){top:auto}.site-nav summary::before{order:2;margin-left:auto}.site-nav details[open] summary::before{transform:rotate(180deg)}}

@media(max-width:1150px){.brand-row{min-width:0}.brand{min-width:0;overflow:hidden}.brand strong{overflow-wrap:anywhere}.programme-search form{min-width:0}.programme-search input{min-width:0;flex:1}}

@media(max-width:480px){.brand-row{grid-template-columns:58px minmax(0,1fr) auto}.brand strong{font-size:clamp(.92rem,4.7vw,1.1rem);line-height:1.12}.brand small{font-size:.54rem;letter-spacing:.16em}.brand em{font-size:.68rem}.menu-toggle{font-size:.7rem;padding:.48rem .56rem}.site-nav>a,.site-nav summary{font-size:.86rem}.programme-search{padding:1.2rem}.programme-search form{width:100%}}

@media(max-width:600px){.brand-row{display:flex;width:100%;min-width:0;gap:.55rem;padding:.65rem .8rem}.header-emblem{width:52px;max-width:52px;max-height:64px;flex:0 0 52px}.brand{flex:1 1 0;width:0;text-align:center}.brand strong{white-space:normal}.menu-toggle{display:block;flex:0 0 auto}.programme-search{width:calc(100% - 2rem);margin-left:1rem;margin-right:1rem}.programme-search form{display:flex!important;min-width:0}.programme-search input{width:auto;min-width:0;flex:1}.programme-search button{flex:0 0 auto;padding:.7rem .8rem}}

/* Small-screen navigation is a left-to-right sliding sidebar. */
@media(max-width:1150px){body{overflow-x:hidden}.menu-toggle{display:grid!important;place-items:center;width:42px;height:40px;padding:0;font-size:1.35rem;line-height:1}.site-header .site-nav{display:block!important;position:fixed;top:0;bottom:0;left:0;right:auto;width:min(82vw,340px);max-height:none;margin:0;padding:5.25rem 1rem 1.5rem;transform:translateX(-105%);transition:transform .28s ease;overflow-y:auto;background:#082d55;box-shadow:none}.site-header .site-nav.open{display:block!important;transform:translateX(0);box-shadow:100vw 0 0 rgba(0,0,0,.48),14px 0 28px #001a3060}.site-nav>a,.site-nav summary{padding:.8rem .5rem;color:#fff}.site-nav details[open] summary{background:#174b7c}.site-nav details[open]>a{margin:0;padding:.7rem 1rem;background:#eef4f9}.site-nav details[open]>a:nth-of-type(n){top:auto}.site-nav summary::before{order:2;margin-left:auto}.site-nav details[open] summary::before{transform:rotate(180deg)}}

/* The control is deliberately pinned on phones so long college names cannot push it out of view. */
@media(max-width:600px){.utility{justify-content:flex-end;padding:.35rem .75rem}.utility a{font-size:.65rem}.brand-row{position:relative!important;padding-right:3.85rem!important}.brand{margin-right:0!important}.menu-toggle{position:absolute!important;z-index:45;top:50%;right:.8rem;transform:translateY(-50%);margin:0!important}.brand strong{font-size:clamp(.9rem,4.3vw,1.08rem)!important;letter-spacing:0}.brand small{letter-spacing:.13em}.brand em{white-space:normal}}

/* Keep the three header groups evenly spaced with a comfortable top/bottom margin. */
@media(min-width:1151px){.brand-row{height:auto;min-height:196px;grid-template-columns:190px minmax(0,1fr) 270px;gap:clamp(1rem,3vw,3.5rem);padding-top:.7rem;padding-bottom:.7rem}.header-emblem{justify-self:start;max-height:158px}.brand{justify-self:center}.header-marks{justify-self:end;gap:.75rem}.header-marks img{width:112px;height:112px}}
/* The supplied national emblem is centered in the shared public masthead. */
@media(min-width:1151px){.brand-row{grid-template-columns:1fr minmax(0,640px) 1fr}.brand{grid-column:2;grid-row:1}.header-marks{grid-column:3;grid-row:1}.brand-logo{display:block;width:104px;height:104px;margin:0 auto .35rem;object-fit:contain}}
.brand{display:flex;flex-direction:column;align-items:center;justify-content:center}.brand-logo{display:block;width:78px;height:78px;margin:0 auto .25rem;object-fit:contain}
@media(max-width:600px){.brand-logo{width:54px;height:54px}.brand-row{grid-template-columns:1fr auto!important}.brand{width:auto!important}}

/* Final small-screen masthead layout: retain a centered identity and a reachable menu. */
@media(max-width:1150px){
  .brand-row{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;align-items:center}
  .brand{grid-column:1;grid-row:1;width:auto!important;margin:0!important;padding:0 .4rem;text-align:center}
  .header-marks{display:none!important}
  .menu-toggle{display:grid!important;position:relative!important;top:auto!important;right:auto!important;grid-column:2;grid-row:1;z-index:50;justify-self:end;transform:none!important;margin:0!important;background:#092d55;color:#fff;border-color:#092d55}
}
@media(max-width:600px){
  .utility{min-height:0;padding:.32rem .75rem!important}
  .utility span{display:none}
  .utility a{margin-left:auto;white-space:nowrap}
  .brand-row{padding:.7rem .8rem!important;padding-right:.8rem!important}
  .brand-logo{width:54px;height:54px}
}

/* Place the national emblem on the left of the masthead on every public page. */
.brand-row{position:relative}
.brand-logo{display:block!important;position:absolute;left:1rem;top:50%;z-index:2;width:112px;height:112px;margin:0!important;object-fit:contain;transform:translateY(-50%)}
@media(max-width:1150px){
  .brand-logo{left:.85rem;width:58px;height:58px}
  .brand{padding-left:4.5rem!important}
}
@media(max-width:600px){
  .brand-logo{left:.8rem;width:52px;height:52px}
  .brand{padding-left:4rem!important}
}

/* The staff-only utility strip is intentionally not part of the public header. */
.site-header>.utility{display:none!important}
.mobile-header-seal{display:none}

/* Keep the official right-side seal visible beside the mobile menu control. */
@media(max-width:1150px){
  .brand-row{grid-template-columns:minmax(0,1fr) 44px 50px!important;column-gap:.35rem}
  .header-marks{display:grid!important;grid-column:2;grid-row:1;place-items:center;justify-self:center;width:44px;height:44px;margin:0!important}
  .header-marks img{display:none!important}
  .header-marks img:last-child{display:block!important;width:42px!important;height:42px!important;max-width:42px;max-height:42px;object-fit:contain}
  .menu-toggle{grid-column:3;grid-row:1}
}
@media(max-width:380px){
  .brand-row{grid-template-columns:minmax(0,1fr) 38px 46px!important;column-gap:.2rem}
  .header-marks{width:38px;height:38px}
  .header-marks img:last-child{width:36px!important;height:36px!important;max-width:36px;max-height:36px}
  .menu-toggle{width:40px;height:38px}
  .brand{padding-left:3.7rem!important}
}

/* Pin both right-side controls so a long college title can never hide them. */
@media(max-width:1150px){
  .brand-row{display:block!important;padding-right:6.9rem!important}
  .brand{display:flex!important;width:100%!important;padding-right:0!important}
  .header-marks{position:absolute!important;top:50%;right:4.05rem;z-index:55;transform:translateY(-50%)}
  .mobile-header-seal{display:block!important;position:absolute;top:50%;right:4.05rem;z-index:55;width:42px;height:42px;object-fit:contain;transform:translateY(-50%)}
  .menu-toggle{position:absolute!important;top:50%;right:.8rem;z-index:56;transform:translateY(-50%)!important}
}
@media(max-width:380px){
  .brand-row{padding-right:6.1rem!important}
  .header-marks{right:3.7rem}
  .mobile-header-seal{right:3.7rem;width:36px;height:36px}
  .menu-toggle{right:.55rem}
}

/* Final mobile menu control: a pinned, high-contrast three-bar button that turns into a
   close (X) control and stays above the open drawer. Earlier blocks set top/right to
   auto!important, so the position here is restated explicitly. */
@media(max-width:1150px){
  .brand-row{margin-left:0!important;margin-right:0!important;width:100%!important}
  .menu-toggle{display:grid!important;place-items:center;position:absolute!important;top:50%!important;right:.8rem!important;transform:translateY(-50%)!important;z-index:60;width:46px!important;height:46px!important;padding:0!important;border:2px solid var(--gold)!important;border-radius:8px;background:#092d55!important;color:#fff!important;box-shadow:0 3px 10px rgba(9,45,85,.35);cursor:pointer}
  .menu-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .menu-toggle__bars{position:relative;display:block;width:24px;height:18px}
  .menu-toggle__bars span{position:absolute;left:0;width:100%;height:3px;border-radius:2px;background:#fff;transition:transform .2s ease,opacity .2s ease,top .2s ease}
  .menu-toggle__bars span:nth-child(1){top:0}
  .menu-toggle__bars span:nth-child(2){top:7.5px}
  .menu-toggle__bars span:nth-child(3){top:15px}
  .menu-toggle[aria-expanded="true"]{position:fixed!important;top:1rem!important;right:1rem!important;transform:none!important;z-index:950;background:#fff!important;border-color:#fff!important}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span{top:7.5px;background:#092d55}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3){transform:rotate(-45deg)}
  .site-header .site-nav{width:min(80vw,340px)!important;z-index:940!important}
  .site-header:has(.site-nav.open)::after{content:"";position:fixed;inset:0;z-index:930;background:rgba(3,17,31,.55)}
}
@media(max-width:1150px) and (prefers-reduced-motion:reduce){.menu-toggle__bars span{transition:none}}

/* "New" badge on the Joining instruction tab, shown only while a guide is published. */
.site-nav .nav-joining{display:inline-flex;align-items:center;gap:.4rem}
.nav-new{display:inline-block;padding:.12rem .4rem;border-radius:4px;background:#c8102e;color:#fff;font-size:.62rem;font-weight:800;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}

/* Joining instruction guide page. */
.joining-head h1{text-transform:uppercase}
.joining-body{padding:2rem max(calc((100% - var(--max))/2),1rem) 1rem}
.joining-body .news-download{max-width:760px;margin-top:0}