/* ==========================================================================
1. Base & shared navigation styles
========================================================================== */

#navigation {
z-index: 9;
}

#navigation .nav-menu {
list-style: none;
margin: 0;
padding: 0;
}

#navigation .nav-menu li {
position: relative;
}

#navigation .nav-menu a {
text-decoration: none;
color: #fff;
font-weight: 700;
padding: 0 8px 15px;
display: block;
font-size: 16px;
transition: background 0.3s;
}

#navigation .nav-menu a span {
font-size: 8px;
position: relative;
top: -2px;
padding-left: 10px;
opacity: 0.3;
}

/* ==========================================================================
2. Dropdown / quicklink-menu – base (used by both desktop & mobile)
========================================================================== */

.quicklink-menu {
list-style: none;
margin: 0;
padding: 0;
transition: opacity 0.3s ease-in-out;
}

#navigation .quicklink-menu a {
padding: 20px 30px;
display: block;
color: #fff;
font-size: 14px;
line-height: 1.4;
transition: background 0.3s;
}

#navigation .quicklink-menu a:hover,
#navigation .quicklink-menu a:focus {
background: rgba(255, 255, 255, 0.114);
}

/* ==========================================================================
3. Desktop dropdown styling (min-width 1250px)
========================================================================== */

@media (min-width: 1250px) {
#navigation .nav-menu {
display: flex;
}

#navigation {
position: relative;
margin-top: 78px;
transform: none;
}

.menu-button {
display: none;
}

#navigation .quicklink-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #1f2c42;
width: 500px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 20px;
}

#navigation .quicklink-menu li {
width: 50%;
float: left;
height: 55px;
}

#navigation .quicklink-menu a {
padding: 20px 30px;
font-size: 14px;
text-align: left;
display: flex;
align-items: center;
height: 55px;
}

/* Submenu positioning for mega-menu style dropdowns */
#navigation .quicklink-menu ul {
width: 250px;
top: 0;
}

#navigation .quicklink-menu ul li {
width: 100%;
float: none;
}

#navigation .quicklink-menu li:nth-child(even) ul {
right: inherit;
left: -250px;
}

#navigation .quicklink-menu li:nth-child(odd) ul {
right: 250px;
left: inherit;
}

/* Align last items / special cases */
#navigation li:nth-child(5) .quicklink-menu,
#navigation li:nth-child(6) .quicklink-menu,
#navigation li:nth-child(7) .quicklink-menu,
#navigation li:nth-child(8) .quicklink-menu {
right: 0;
left: inherit;
}

#navigation .nav-menu > li:last-child {
margin-right: 0;
}

#navigation .nav-menu > li:last-child a {
padding: 0;
}

/* Font size progression */
#navigation .nav-menu a {
font-size: 14px;
}

#navigation .nav-menu ul a {
font-size: 14px;
}
}

@media (min-width: 1350px) {
header#masthead .container {
width: calc(100% - 100px);
}
#navigation .nav-menu > li {
margin-right: 15px;
}
#navigation .nav-menu a {
font-size: 15px;
}

}

/* ==========================================================================
4. Mobile menu (max-width 1249px)
========================================================================== */

@media (max-width: 1249px) {
#navigation {
position: fixed;
top: 0;
left: 0;
width: 380px;
height: 100%;
z-index: 9999;
transform: translateX(-100%);
overflow-x: hidden;
transition: transform 0.3s ease-in-out;
}

#navigation.menu-open {
transform: translateX(0);
}

#navigation .nav-menu {
flex-direction: column;
}

#navigation .nav-menu a {
color: #fff !important;
padding: 15px 28px !important;
}

#navigation .quicklink-menu {
position: relative;
background: #ffffff0d;
}

#navigation .quicklink-menu a {
padding: 15px 28px !important;
}

#navigation .quicklink-menu ul {
width: 100%;
left: 0 !important;
background: #ffffff14;
padding-left: 20px;
}

/* Show social links in mobile menu */
#navigation #social {
display: flex !important;
}

/* Menu toggle button */
.menu-button {
position: fixed;
right: 30px;
top: 61px;
background: none;
color: white;
border: none;
cursor: pointer;
z-index: 999999;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
font-size: 14px;
border-radius: 20px;
padding: 8px 17px;
display: flex;
flex-direction: row;
align-items: center;
}

.menu-button:before {
content: "";
background: url(https://chilwellschool.kinsta.cloud/images/menu.svg);
width: 22px;
height: 20px;
display: block;
background-size: auto 20px;
margin-right: 11px;
}
}

/* ==========================================================================
5. Mobile overlay / backdrop
========================================================================== */

.opac-block {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}

body.menu-open .opac-block {
opacity: 1;
visibility: visible;
}

/* ==========================================================================
6. Accessibility helper
========================================================================== */

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}