/* Loaded after the original design. Shared accessible interaction and content styles. */
[hidden] { display: none !important; }
html { scroll-padding-top: 7rem; }
body { overflow-wrap: anywhere; }
body :is(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid #111 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #fff !important;
}
.skip-link { position: fixed; left: 1rem; top: -10rem; z-index: 10000; padding: .75rem 1rem; background: #003366; color: #fff; }
.skip-link:focus { top: 1rem; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

#menuToggle { position: relative; top: auto; left: auto; padding: 0; display: block; background: #0069a7; }
#menuToggle.navigation-enhanced { position: fixed; top: 1rem; left: 1rem; z-index: 900; }
#navigation-toggle { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem .75rem; border: 2px solid #fff; background: #0069a7; color: #fff; font: inherit; cursor: pointer; }
#navigation-toggle span { display: inline; position: static; background: transparent; color: inherit; width: auto; height: auto; margin: 0; transform: none; transition: none; }
#navigation-toggle .menu-icon { font: 2rem/1 sans-serif; }
#menu { position: static; box-sizing: border-box; margin: 0; padding: 1rem; width: 100%; transform: none; transition: none; }
.navigation-enhanced #menu { position: absolute; top: 100%; left: 0; width: min(23rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
#menu li { font-size: 1rem; padding: 0; }
#menu li a { display: block; padding: .65rem .4rem; color: #fff; text-decoration: none; line-height: 1.4; }
#menu li a:is(:hover, :focus-visible, [aria-current="page"]) { background: #003e66; color: #fff; }

body #eucookielaw { position: relative !important; inset: auto !important; box-sizing: border-box; width: 100% !important; margin: 0; padding: 1rem; background: #a32121; color: #fff; z-index: 901; border-radius: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
body #eucookielaw p { display: block; float: none; width: auto; flex: 1 1 18rem; padding: 0; margin: 0; color: #fff; }
body #eucookielaw a { color: #fff; font-size: 1em; text-decoration: underline; }
body #eucookielaw button { width: auto; height: auto; min-height: 44px; padding: .65rem 1rem; background: #fff; color: #111; border: 2px solid #111; border-radius: 3px; font: inherit; cursor: pointer; }
body #eucookielaw button:hover { background: #eee; color: #111; }
body:has(#eucookielaw:not([hidden])) #menuToggle.navigation-enhanced { position: relative; top: auto; left: auto; width: fit-content; margin: 1rem; }

.page-content #maincontent { padding-top: 6rem; }
#maincontent { display: block; color: #212529; }
.vnutro a { color: #075783; text-decoration: underline; }
.vnutro a:is(:hover, :focus-visible) { color: #003e66; }
.vnutro :is(h1, h2, h3, h4, h5, h6) { line-height: 1.4; }
.single-article h1 { background: #9e3517; color: #fff; }
.article { color: #212529; background: #fff; }
.article :is(p, li, div, span, strong, em, a) { color: inherit; }
.article :is(p, li, div, span, strong, em):not(.plyr, .plyr *) { background-color: transparent !important; color: inherit !important; }
.article :is(h2, h3, h4, h5, h6) { color: #212529 !important; background-color: #fff !important; }
.article a { color: #075783 !important; }
.article a:is(:hover, :focus-visible) { color: #003e66 !important; }
.article :is(td, th) { height: auto !important; }
.article td { color: #212529 !important; background-color: #fff !important; }
.article :is(th, th p, th span, th strong, th a), .vnutro .school-properties, .vnutro .school-properties strong { background-color: #0069a7 !important; color: #fff !important; }
.article th a:is(:hover, :focus-visible) { background-color: #003e66 !important; color: #fff !important; }
.article caption { padding: .75rem; text-align: left; color: #fff; background: #9e3517; font-weight: bold; caption-side: top; }
.article caption * { color: inherit !important; }
.table-responsive { max-width: 100%; overflow-x: auto; }
.article :is(img, video, iframe) { max-width: 100%; }
.article img { height: auto; }
.article-newsbox .article-title h2 { font-size: 1.25rem; }
.article-readmore a, .article-readmore a:is(:hover, :focus-visible) { color: #fff; background: #0069a7; }
.article-newsbox > h1 { margin: 0 0 1rem; }
.field-error { display: block; color: #a32121; margin-top: .25rem; }
.accessible-form .form-group { margin: 0 0 1rem; }
.accessible-form label { display: block; margin-bottom: .3rem; }
.accessible-form :is(input, textarea) { box-sizing: border-box; max-width: 100%; border: 1px solid #555; color: #212529; background: #fff; }
.vnutro button { min-height: 44px; padding: .5rem 1rem; cursor: pointer; }
.vnutro .btn-primary { background: #0069a7; color: #fff; border: 1px solid #003e66; }
.site-footer { position: relative; clear: both; z-index: 1; background: #122735; color: #d0dce4; border-top: 4px solid #f28c54; font-size: 1rem; line-height: 1.65; }
.site-footer__inner { box-sizing: border-box; max-width: 1184px; margin: 0 auto; padding: 3rem 2rem 1.5rem; }
.site-footer__main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-bottom: 2.5rem; }
.site-footer h2 { margin: 0 0 1rem; color: #fff; font-size: 1.125rem; line-height: 1.5; font-weight: 700; }
.site-footer p { margin: 0; }
.site-footer__logo { display: inline-block; max-width: 100%; vertical-align: top; }
.site-footer__logo img { display: block; width: 240px; max-width: 100%; height: auto; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #d0dce4; text-decoration: none; }
.site-footer a:is(:hover, :focus-visible) { color: #fff; text-decoration: none; }
.site-footer__credits a { font-weight: 700; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 0; }
.site-footer__contact p { max-width: 28ch; }
.site-footer a.site-footer__contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 48px; margin-top: 1.25rem; padding: .65rem 1rem; border: 1px solid #7ec8f8; border-radius: .5rem; color: #fff; font-weight: 700; }
.site-footer__contact-link:is(:hover, :focus-visible) { background: #21475e; }
.site-footer__contact-link span { color: #7ec8f8; font-size: 1.25rem; }
.site-footer__bottom { border-top: 1px solid #405666; padding-top: 1.25rem; }
.site-footer__utility-links { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: .25rem; }
.site-footer__utility-links a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 0; font-size: .9375rem; }
.site-footer .site-footer__credits { margin-top: .75rem; font-size: .875rem; }
.site-footer__account { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.site-footer__account button { min-height: 44px; padding: .4rem .75rem; border: 1px solid #7ec8f8; border-radius: .375rem; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.site-footer__account button:hover { background: #21475e; }
@media (max-width: 760px) {
    .site-footer__inner { padding: 2rem 1.25rem 1.25rem; }
    .site-footer__main { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-bottom: 2rem; }
    .site-footer__contact p { max-width: 36ch; }
    .site-footer__utility-links { column-gap: 1.5rem; }
}
.page-home #maincontent { margin: 0; padding: 0; width: 100%; max-width: none; }
.page-home .intro-container { position: relative; inset: auto; width: 100%; height: 100vh; height: 100svh; min-height: 24rem; overflow: hidden; }
.page-home .intro-container video.intro { position: absolute; width: 100% !important; height: 100%; object-fit: cover; }
.page-home .mobile-poster { position: absolute; z-index: 0; }
#background-video-toggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 5; background: #003366; color: #fff; border: 2px solid #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }
@media (forced-colors: active) { body :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline-color: Highlight !important; } }

/* Reflow and readable presentation, including archived Word content. */
.skip-link:focus { top: 5rem; }
body #eucookielaw { background: #122735; padding: 1rem max(1rem, calc((100vw - 1120px) / 2)); }
body #eucookielaw button { border-color: #7ec8f8; border-radius: .5rem; }
.page-content #maincontent { box-sizing: border-box; max-width: 1184px; margin: 0 auto; padding: 6rem 1.5rem 3rem; width: 100%; }
#maincontent > .container { padding: 0; }
.article { padding: 1.5rem 0; font-size: 1.0625rem; line-height: 1.65; }
.article :is(h2,h3,h4) { margin-top: 1.75em; margin-bottom: .65em; }
.article :is(p,li,span):not(.plyr, .plyr *) { font-family: inherit !important; font-size: inherit !important; }
.article p { margin-bottom: 1rem; }
.article :is(ul,ol) { padding-left: 1.5rem; }
.article :is(td,th) { padding: .75rem; vertical-align: top; }
.article :is(td,th) p:last-child { margin-bottom: 0; }
.article table { border-collapse: collapse; width: 100% !important; }
.table-responsive { margin: 1.5rem 0; border: 1px solid #aab8c2; border-radius: .4rem; }
.table-responsive table { margin: 0; }
.article .archive-employer { box-sizing: border-box; width: 100%; max-width: 100%; margin: 2rem 0; padding: 1.25rem; border: 1px solid #aab8c2; border-radius: .75rem; }
.article .archive-employer h3 { margin-top: 0; }
.article .archive-employer img { max-width: min(100%, 200px); }
.article .event-information { padding: 1.5rem; margin: 2rem 0; border: 1px solid #aab8c2; border-left: 5px solid #0069a7; border-radius: .5rem; }
.article .event-information h2 { margin-top: 0; }
.article video { display: block; width: 100%; height: auto; }
.article .plyr { --plyr-color-main: #0069a7; --plyr-video-controls-background: #122735; --plyr-video-control-color: #fff; --plyr-font-family: inherit; --plyr-font-size-time: 14px; }
.article .plyr__controls { background: #122735 !important; padding: .65rem; gap: .25rem; }
.article .plyr__time { min-width: 3.4em; white-space: nowrap; overflow-wrap: normal; color: #fff !important; }
.article .plyr__control { min-height: 36px; padding: .45rem; }
.article .plyr__menu__container { background: #fff !important; color: #212529 !important; }
.article .plyr__progress__container { min-width: 3rem; }
.article-directory, .school-directory { padding-bottom: 1rem; }
.article-directory h1, .school-directory h1 { margin: 0 0 1.5rem; color: #122735; }
.article-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; padding: 0; margin: 0; list-style: none; }
.article-card { min-width: 0; border: 1px solid #aab8c2; border-radius: .75rem; background: #fff; }
.article-card__image { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .7rem .7rem 0 0; }
.article-card__content { padding: 1.5rem; }
.article-card h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.article-card p { line-height: 1.65; margin: 0 0 1rem; }
.article-card .article-card__date { font-size: .875rem; color: #465965; margin-bottom: 0; }
.login-form { max-width: 32rem; margin: 0 auto; padding: 2rem; border: 1px solid #aab8c2; border-radius: .75rem; }
.login-form h1 { margin-top: 0; margin-bottom: 1.5rem; }
.login-form input { min-height: 48px; width: 100%; padding: .6rem; }
.page-home .intro-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; min-height: 100svh; padding: 6rem 1.5rem; overflow: visible; box-sizing: border-box; background: #122735; }
.page-home .intro-container video.intro { inset: 0; transform: none; min-height: 0; }
.page-home .video-logo { position: relative; z-index: 1; width: clamp(16rem, 40vw, 40rem); max-width: 90%; }
.page-home .video-logo .logo { position: static; display: block; width: 100% !important; top: auto !important; left: auto !important; transform: none !important; margin: 0; }
#background-video-toggle { max-width: calc(100% - 2rem); height: auto; min-height: 44px; padding: .5rem 1rem; border-radius: .5rem; }
@media (max-width: 900px) { .article-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
    .page-content #maincontent { padding: 6rem 1rem 2rem; }
    .article-cards { grid-template-columns: minmax(0,1fr); }
    .login-form { padding: 1.25rem; }
    .article .event-information { padding: 1rem; }
    .article .plyr__controls { flex-wrap: wrap; }
    .article .plyr__volume { max-width: 70px; min-width: 0; }
}

.article table { min-width: 36rem; overflow-wrap: break-word; }
body.page-content:has(#eucookielaw:not([hidden])) #maincontent { padding-top: 2rem; }

.site-map ul { padding-left: 1.5rem; }
.site-map li a { display: inline-block; padding: .5rem 0; }
.article .archive-note { padding: 1rem; border-left: 4px solid #0069a7; background: #edf5fa !important; }

.article .plyr--video { display: flex; flex-direction: column; }
.article .plyr--video .plyr__controls { position: relative; inset: auto; opacity: 1; transform: none; }
.article .plyr__video-wrapper { height: auto; }
.article .plyr--fullscreen .plyr__video-wrapper { flex: 1; }

/* Keep original article and school cover photographs visible at every viewport size. */
.vnutro .article-image { margin: 0 0 1.5rem; }
.single-article { display: flex; align-items: flex-end; min-height: clamp(12rem, 22vw, 20rem); }
.single-article h1 { box-sizing: border-box; max-width: 100%; margin: 0; padding: .75rem 1.25rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.school-directory .table-responsive { position: relative; }
.school-table { width: 100%; min-width: 40rem; border-collapse: collapse; text-align: left; line-height: 1.6; }
.school-table caption { padding: 1rem; background: #0069a7; color: #fff; font-weight: 700; text-align: left; }
.school-table :is(th, td) { padding: 1rem; vertical-align: top; border-bottom: 1px solid #c4cfd6; }
.school-table thead th { background: #122735; color: #fff; }
.school-table tbody th { width: 40%; font-weight: 700; }
.school-table tbody tr:nth-child(even) { background: #f1f6f9; }
.school-table tbody tr:hover { background: #e5f1f8; }
.school-table-hint { display: none; }
@media (max-width: 700px) { .school-table-hint { display: block; } }

/* Full-width covers stay in the main landmark; reading content keeps its comfortable width. */
.page-content #maincontent.main--with-cover { max-width: none; margin: 0; padding: 0 0 3rem; }
.main--with-cover > .row { box-sizing: border-box; display: block; width: 100%; max-width: 1184px; margin: 0 auto; padding: 0 1.5rem; }
.page-cover.article-image { margin: 0 0 1.5rem; }
.page-cover .single-article { box-sizing: border-box; min-height: 0; padding: 3vw max(1.5rem, calc((100% - 1136px) / 2)) 2vw; padding-left: max(9rem, calc((100% - 1136px) / 2)); }
.page-cover .single-article h1 { padding: 1vw 3vw; font-size: 2rem; line-height: 1.34375; background: #9e3517; color: #fff; }
/* Match the original shallow cover proportions; allow wrapped/enlarged headings to grow. */
@media (max-width: 1279px) {
    .page-cover .single-article { min-height: 5.25rem; padding-top: 1vw; }
    .page-cover .single-article h1 { font-size: 1.5rem; line-height: 1.375; }
}
@media (max-width: 600px) {
    .main--with-cover > .row { padding-inline: 1rem; }
    .page-cover .single-article { flex-wrap: wrap; align-items: flex-start; padding: .75rem 1rem .5rem; }
    .page-cover .single-article::before { content: ""; flex: 0 0 7rem; height: 4.5rem; }
    .page-cover .single-article h1 { flex: 1 1 9rem; min-width: 0; padding-inline: .5rem; }
}
