/*SMALL MOBILE NAV LAYOUT STARTS HERE*/

@media screen and (max-width:1142px) and (min-width:523px){
#navcontainer{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;left:0;width:100%;padding:0;padding-top:0;height:102px;background-color:#1c1c1c;box-shadow:0 4px 10px -4px rgb(0 0 0 / .1);z-index:9999}

#titlebox{width:auto;height:48px;text-align:center; display:flex; padding-left:0px;padding-right:0px;padding-top:0; padding-bottom: 0;margin-top:10px;background-color:transparent; white-space:nowrap}

#navbox{display:flex;justify-content:center;background-color:transparent;align-items:center; display: flex;margin-top:0px;height:44px;width:100%;}

.dropbtn{background-color:transparent;height:42px;display:flex;align-items:center;justify-content:center;padding:0;margin-left:0;cursor:pointer;border:none;transition:color 0.3s ease,transform 0.3s ease,background-color 0.3s ease}

.dropdown{position:relative;display:inline-block;transition:color 0.3s ease,transform 0.3s ease}

.dropdown_index{position:relative;display:inline-block;transition:color 0.3s ease,transform 0.3s ease}

.dropdown-content{opacity:0;visibility:hidden;position:absolute;margin-top:0;right:0;background-color:transparent;min-width:246px;z-index:1000;padding:0;pointer-events:auto;transition:opacity 0.3s ease,visibility 0.3s ease}

.dropdown:hover .dropdown-content{opacity:1;visibility:visible}
.dropdown_index:hover{opacity:1;visibility:visible}
.dropdown-content a{font-family:Bebas Neue,sans-serif;display:block;font-size:20pt;font-weight:300;color:#1c1c1c;text-decoration:none;padding:8px 16px;transition:background-color 0.3s ease;background-color:lightpink;border-bottom: 1px solid #1c1c1c}
.dropdown-content a:hover{background-color:#1c1c1c;color:#b2b2b2}
.dropdown:hover .dropbtn{background-color:transparent;color:lightpink;transition:background-color 0.3s ease}
.dropdown_index:hover .dropbtn{background-color:transparent;transition:background-color 0.3s ease}}

@media only screen and (max-width: 1142px) {
.full {
display: none;
}
.abbr {
display: block;
}
}/*MAKES CV SECTION ABREVIATED IN NAV*/

/*SMALL MOBILE NAV LAYOUT ENDS HERE*/

/*HAMBURGER NAV LAYOUT STARTS HERE*/

@media only screen and (max-width:522px){

#navcontainer{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:fixed;
left:0;
width:100%;
height:102px;
background:#1c1c1c;
box-shadow:0 4px 10px -4px rgb(0 0 0 / .1);
z-index: 2000; /* sits above menu */
}

#titlebox{
display:flex;
height:102px;
width:224px;
margin-top:0;
margin-left:14px;
background:transparent;
white-space:normal;
word-break:break-word;
align-self:flex-start;
}

#titlebox span{
text-align:left;
}

#navbox{
display:none;
}

/* Hamburger container (icon always visible, background fully transparent) */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* ===== MENU ICON (ALWAYS ON TOP) ===== */
.menu-icon {
position: fixed;
top: -4px;
right: 20px;
font-size: 56px;
color: #b2b2b2;

cursor: pointer;
background: transparent;
text-decoration: none;
height: 102px;
display: flex;
align-items: center;
z-index: 3000; /* above navbar */
}

.menu-icon:hover {
color: #b2b2b2;
}

.menu-icon.close-icon {
font-size: 48px;
color: lightpink;
padding-right: 5px;
padding-top:10px;
}

.menu-icon.close-icon:hover {
color: lightpink;
}

/* ===== MENU CONTAINER ===== */
.menu {
position: fixed;
top: 102px;
right: 0;
width: 100%;
height: calc(100vh - 102px);
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
background-color: transparent;
overflow-y: auto;
overflow-x: hidden;
max-height: 0;
transition: max-height 0.4s ease;
z-index: 1000; /* BELOW navbar */
}

/* ===== OPEN STATE ===== */
.menu.open {
max-height: calc(100vh - 102px);
}

/* ===== MENU LINKS ===== */
.menu a {
display: block;
width: 100%;
text-align: left;
padding: 12px 16px;
font-family: "Bebas Neue", sans-serif;
font-size: 24pt;
color: #1c1c1c;
text-decoration: none;
background-color: lightpink;
border-bottom: 1px solid #1c1c1c;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== SUB ITEMS ===== */
.menu a.sub-item {
padding-left: 32px;
font-size: 20pt;
padding-top: 13px;
padding-bottom: 13px;
}

/* ===== HOVER EFFECT ===== */
.menu a:hover {
background-color: #1c1c1c;
color: #b2b2b2;
}

/* ===== OPTIONAL: SMOOTHER SCROLL ===== */
.menu {
scroll-behavior: smooth;
}

/* ===== OPTIONAL: HIDE SCROLLBAR (CLEAN LOOK) ===== */
.menu::-webkit-scrollbar {
width: 0;
}
.menu {
-ms-overflow-style: none;
scrollbar-width: none;
}

#wrapper {
padding-top: 102px;
}}