/**** SKIP LINK ****//**** SKIP LINK ****//**** SKIP LINK ****/

.skip-link {position: fixed; z-index: var(--z-nav); top: var(--space-sm); left: var(--space-sm); padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-sm); color: var(--color-bg-white); background-color: var(--color-navy-dark); border-radius: var(--radius-sm); transform: translateY(-200%);}
.skip-link:focus {color: var(--color-bg-white); transform: translateY(0px);}

/**** HEADER ****//**** HEADER ****//**** HEADER ****/

#header {position: sticky; z-index: var(--z-header); top: 0px; color: var(--color-navy); background-color: var(--color-bg-light); border-bottom: var(--border-width) solid var(--color-border-light);}
#header .container {min-height: var(--header-height); justify-content: space-between; gap: var(--space-lg);}
.logo {display: flex; align-items: center; min-width: 0px; gap: var(--space-xs); font-family: var(--font-family-heading); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--color-navy-dark); text-decoration: none;}
.logo:hover {color: var(--color-gold-dark);}
.logo-icon {width: var(--touch-target); height: var(--touch-target); flex: 0 0 var(--touch-target);}
.logo-name {min-width: 0px;}
#nav {display: flex; align-items: center; gap: var(--space-lg);}
#nav a {position: relative; display: inline-flex; align-items: center; min-height: var(--touch-target); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-navy); text-decoration: none;}
#nav a::after {position: absolute; right: 0px; bottom: var(--space-2xs); left: 0px; height: var(--border-width); content: ''; background-color: var(--color-transparent); transform: scaleX(0); transition: background-color var(--transition-fast), transform var(--transition-fast);}
#nav a:hover, #nav a[aria-current="page"] {color: var(--color-gold-dark);}
#nav a:hover::after, #nav a[aria-current="page"]::after {background-color: var(--color-gold-dark); transform: scaleX(1);}
.menu-toggle {display: none; width: var(--touch-target); height: var(--touch-target); padding: var(--space-xs); cursor: pointer; color: var(--color-navy); background-color: var(--color-transparent); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm);}
.menu-toggle:hover {color: var(--color-gold-dark); border-color: var(--color-gold-dark);}
.menu-toggle svg {width: 100%; height: 100%;}

/**** BUTTONS ****//**** BUTTONS ****//**** BUTTONS ****/

.btn {display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); margin: var(--space-sm) var(--space-xs) 0px 0px; padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-bg-light); text-align: center; text-decoration: none; background-color: var(--color-navy); border: var(--border-width) solid var(--color-navy); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);}
.btn:hover {color: var(--color-bg-white); background-color: var(--color-navy-soft); border-color: var(--color-navy-soft); transform: translateY(-2px);}
.btn-second {color: var(--color-navy); background-color: var(--color-transparent); border-color: var(--color-navy); box-shadow: none;}
.btn-second:hover {color: var(--color-navy-dark); background-color: var(--color-bg-secondary); border-color: var(--color-navy-dark);}

/**** DOCUMENT LINKS ****//**** DOCUMENT LINKS ****//**** DOCUMENT LINKS ****/

.doc-link {display: flex; align-items: center; min-height: var(--touch-target); padding: var(--space-md); font-weight: var(--font-weight-semibold); color: var(--color-navy-dark); text-decoration: none; background-color: var(--color-bg-white); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-md); transition: color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);}
.doc-link::before {display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); margin: 0px var(--space-md) 0px 0px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-bg-light); content: 'PDF'; background-color: var(--color-navy); border-radius: var(--radius-sm);}
.doc-link:hover {color: var(--color-gold-dark); border-color: var(--color-border); box-shadow: var(--shadow-sm);}

/**** CARDS ****//**** CARDS ****//**** CARDS ****/

.card {width: 100%; min-width: 0px; height: 100%; padding: var(--space-lg); overflow: hidden; background-color: var(--color-bg-white); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);}
.card:hover {border-color: var(--color-border); box-shadow: var(--shadow-md); transform: translateY(-3px);}
.card > :last-child {margin-bottom: 0px;}
.card img {width: calc(100% + var(--space-lg) + var(--space-lg)); aspect-ratio: 4 / 3; margin: calc(0px - var(--space-lg)) calc(0px - var(--space-lg)) var(--space-md) calc(0px - var(--space-lg)); object-fit: cover; background-color: var(--color-bg-secondary);}
.card-cover-placeholder {position: relative; display: block; width: calc(100% + var(--space-lg) + var(--space-lg)); aspect-ratio: 4 / 3; margin: calc(0px - var(--space-lg)) calc(0px - var(--space-lg)) var(--space-md) calc(0px - var(--space-lg)); overflow: hidden; background-color: var(--color-bg-secondary);}
.card-cover-placeholder::before {position: absolute; top: 18%; left: 14%; width: 46%; aspect-ratio: 1 / 1; content: ''; background-color: var(--color-peach); border-radius: var(--radius-pill); opacity: 0.65;}
.card-cover-placeholder::after {position: absolute; right: 12%; bottom: 16%; width: 42%; aspect-ratio: 1 / 1; content: ''; background-color: var(--color-sage); border-radius: var(--radius-pill); opacity: 0.55;}
.card-number {color: var(--color-bg-light); background-color: var(--color-navy); border-color: var(--color-navy);}
.card-number:hover {border-color: var(--color-gold);}

/**** NEWS COVER PLACEHOLDER ****//**** NEWS COVER PLACEHOLDER ****//**** NEWS COVER PLACEHOLDER ****/

.news-cover-placeholder {position: relative; width: 100%; max-width: var(--container-width); aspect-ratio: 16 / 9; margin: var(--space-xl) 0px var(--space-xl) 0px; overflow: hidden; background-color: var(--color-bg-secondary); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}
.news-cover-placeholder::before {position: absolute; top: 14%; right: 12%; width: 34%; aspect-ratio: 1 / 1; content: ''; background-color: var(--color-peach); border-radius: var(--radius-pill); opacity: 0.6;}
.news-cover-placeholder::after {position: absolute; bottom: 12%; left: 10%; width: 28%; aspect-ratio: 1 / 1; content: ''; background-color: var(--color-sage); border-radius: var(--radius-pill); opacity: 0.5;}

/**** FACTS AND STEPS ****//**** FACTS AND STEPS ****//**** FACTS AND STEPS ****/

.facts {width: 100%; max-width: none; padding: 0px; list-style: none;}
.facts li {width: 100%; min-width: 0px; height: 100%; margin: 0px; padding: var(--space-md); color: var(--color-navy-dark); background-color: var(--color-bg-white); border-left: var(--space-3xs) solid var(--color-gold); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);}
.steps {width: 100%; max-width: none; padding: 0px; list-style: none; counter-reset: school-steps;}
.steps li {position: relative; min-height: 100%; margin: 0px; padding: var(--space-lg); counter-increment: school-steps; background-color: var(--color-bg-white); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-md);}
.steps li::before {display: flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); margin: 0px 0px var(--space-md) 0px; font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); color: var(--color-navy-dark); content: counter(school-steps); background-color: var(--color-gold); border-radius: var(--radius-pill);}

/**** PHOTOS ****//**** PHOTOS ****//**** PHOTOS ****/

.photo {overflow: hidden; background-color: var(--color-bg-secondary); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);}
.photo img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}

/**** LIGHTBOX ****//**** LIGHTBOX ****//**** LIGHTBOX ****/

body.lightbox-open {overflow: hidden;}
.lightbox {position: fixed; z-index: calc(var(--z-nav) + 10); top: 0px; right: 0px; bottom: 0px; left: 0px; display: none; align-items: center; justify-content: center; padding: var(--space-lg); background-color: var(--color-navy-dark);}
.lightbox.open {display: flex;}
.lightbox-dialog {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.lightbox-figure {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0px;}
.lightbox-image {display: block; max-width: 100%; max-height: calc(100vh - var(--space-4xl)); object-fit: contain; background-color: var(--color-bg-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);}
.lightbox-close, .lightbox-prev, .lightbox-next {position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); padding: var(--space-xs); cursor: pointer; color: var(--color-navy-dark); background-color: var(--color-bg-light); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {color: var(--color-bg-white); background-color: var(--color-gold-dark); border-color: var(--color-gold-dark);}
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg {width: 100%; height: 100%;}
.lightbox-close {top: 0px; right: 0px;}
.lightbox-prev {top: 50%; left: 0px; transform: translateY(-50%);}
.lightbox-next {top: 50%; right: 0px; transform: translateY(-50%);}

/**** CONTACTS ****//**** CONTACTS ****//**** CONTACTS ****/

.contacts-name {font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-navy-dark);}
.contacts-address {font-size: var(--font-size-md); color: var(--color-text-secondary);}

/**** FOOTER ****//**** FOOTER ****//**** FOOTER ****/

#footer {padding: var(--section-space-sm) 0px var(--space-lg) 0px; color: var(--color-bg-secondary); background-color: var(--color-navy-dark);}
.footer-grid {display: grid; grid-template-columns: minmax(0px, 1.6fr) minmax(0px, 1fr) minmax(0px, 1fr); gap: var(--space-xl);}
.footer-name {margin: 0px 0px var(--space-sm) 0px; font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--color-bg-light);}
.footer-text {margin: 0px; color: var(--color-bg-secondary);}
.footer-title {margin: 0px 0px var(--space-sm) 0px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold);}
.footer-nav {display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs);}
.footer-nav a, .footer-contacts a {color: var(--color-bg-secondary); text-decoration-color: var(--color-gold-dark);}
.footer-nav a:hover, .footer-contacts a:hover {color: var(--color-gold);}
.footer-contacts p {margin: 0px 0px var(--space-2xs) 0px;}
.footer-bottom {display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: var(--space-xl) 0px 0px 0px; padding: var(--space-md) 0px 0px 0px; border-top: var(--border-width) solid var(--color-navy-soft);}
.footer-legal, .footer-copy {margin: 0px; font-size: var(--font-size-sm); color: var(--color-peach);}

/**** MEDIA 1650 ****//**** MEDIA 1650 ****//**** MEDIA 1650 ****/

@media (max-width: 1650px) {
    #nav {gap: var(--space-md);}
}

/**** MEDIA 1350 ****//**** MEDIA 1350 ****//**** MEDIA 1350 ****/

@media (max-width: 1350px) {
    #header .container {gap: var(--space-md);}
    .logo {font-size: var(--font-size-base);}
    #nav {gap: var(--space-sm);}
}

/**** MEDIA 750 ****//**** MEDIA 750 ****//**** MEDIA 750 ****/

@media (max-width: 750px) {
    #header .container {position: relative; min-height: var(--header-height);}
    .logo {max-width: calc(100% - var(--touch-target) - var(--space-md)); font-size: var(--font-size-sm);}
    .logo-icon {width: calc(var(--touch-target) - var(--space-3xs)); height: calc(var(--touch-target) - var(--space-3xs)); flex-basis: calc(var(--touch-target) - var(--space-3xs));}
    .menu-toggle {display: block; flex: 0 0 var(--touch-target);}
    #nav {position: absolute; z-index: var(--z-nav); top: 100%; right: var(--container-padding); left: var(--container-padding); display: none; flex-direction: column; align-items: stretch; gap: 0px; padding: var(--space-sm); background-color: var(--color-bg-light); border: var(--border-width) solid var(--color-border); border-radius: 0px 0px var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md);}
    #header.open #nav {display: flex;}
    #nav a {justify-content: space-between; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-sm);}
    #nav a::after {right: var(--space-sm); bottom: var(--space-2xs); left: var(--space-sm);}
    .footer-grid {grid-template-columns: 1fr 1fr;}
    .footer-brand {grid-column: 1 / -1;}
    .lightbox {padding: var(--space-sm);}
    .lightbox-image {max-height: calc(100vh - var(--space-3xl));}
}

/**** MEDIA 500 ****//**** MEDIA 500 ****//**** MEDIA 500 ****/

@media (max-width: 500px) {
    .btn {width: 100%; margin: var(--space-sm) 0px 0px 0px;}
    .card {padding: var(--space-md);}
    .card img {width: calc(100% + var(--space-md) + var(--space-md)); margin: calc(0px - var(--space-md)) calc(0px - var(--space-md)) var(--space-md) calc(0px - var(--space-md));}
    .card-cover-placeholder {width: calc(100% + var(--space-md) + var(--space-md)); margin: calc(0px - var(--space-md)) calc(0px - var(--space-md)) var(--space-md) calc(0px - var(--space-md));}
    .footer-grid {grid-template-columns: 1fr; gap: var(--space-lg);}
    .footer-brand {grid-column: auto;}
    .footer-bottom {align-items: flex-start; flex-direction: column;}
}

/**** MEDIA 350 ****//**** MEDIA 350 ****//**** MEDIA 350 ****/

@media (max-width: 350px) {
    .logo {max-width: calc(100% - var(--touch-target) - var(--space-md)); gap: var(--space-2xs); font-size: var(--font-size-xs);}
    .logo-icon {width: calc(var(--touch-target) - var(--space-2xs)); height: calc(var(--touch-target) - var(--space-2xs)); flex-basis: calc(var(--touch-target) - var(--space-2xs));}
    .menu-toggle {width: var(--touch-target);}
    #nav {right: var(--space-sm); left: var(--space-sm);}
}