* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Open Sans Variable'; text-transform: uppercase;}
@font-face {font-family: 'Open Sans Variable';src: url('OpenSans-VariableFont_wdth,wght.ttf') format('truetype');font-optical-sizing: auto;font-style: normal;font-variation-settings: "wdth" 70;}
body { padding-top: 60px;}

/* Navbar Base Styles */
.navbar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 50px;
 background-color: tomato;
 color: #fff;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 2rem;
 z-index: 1000;
}

.logo {font-size: 1.3rem; font-weight: bold; letter-spacing: 1px;}
.nav-list {list-style: none;display: flex;gap: 2rem;align-items: center;}
.nav-list a {color: #fff; text-decoration: none; font-size: 1.1rem; transition: color 0.3s ease;}
.nav-list a:hover {color: #000;}

/* Dropdown Base */
.dropdown {position: relative;}
.dropdown-content {display: none; list-style: none;}
.menu-toggle, .close-btn {display: none; font-size: 2rem; cursor: pointer; user-select: none;}

.search-btn:hover {background-color: tomato;}

main { 
 display: grid;
 width: 100%;
 grid-template-areas: 
   "maj hea dja"
   "maj art dja"
   "foo foo foo";
 grid-template-rows: auto auto auto;  
 grid-template-columns: 1fr 2fr 1fr;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
 padding: 0 10px;
}

#pageHea {grid-area: hea;background-color:#eee;padding: 10px 0;}
#pageFoo {grid-area: foo;background-color:#eee;}
#pageMaj {grid-area: maj;background-color:#eee;}
#pageDja {grid-area: dja;background-color:#eee;}

#pageArt {
 display: grid;
 width: 100%;
 grid-template-columns: 2fr 1fr;
 gap: 0px 10px;
}

.item1 {
 grid-row-start: 1;
 grid-row-end: 3;
 background-color:#eee;
}

.item2 {
 align-content: center;
 align-items: center;
 background-color:#eee;
}

.item3 {
 align-items: top;
 text-align: center;
 background-color:#eee;
}

img {width:100%; height: auto;}

.search-container {
 display: flex; /* Aligns items horizontally */
 width: 90%;
 margin: 0 auto;
 border: none;
 border-radius: 25px; /* Rounded corners */
 overflow: hidden;
}

.search-input {
 flex-grow: 1;
 padding: 10px 15px;
 border: none;
 outline: none;
 font-size: 14px;
 background-color: #fff;
}

.search-btn {
 background-color: tomato;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 font-size: 14px;  
 transition: background 0.3s;
}

table {
 border-collapse: collapse;
 width: 100%;
 text-align: left;
 border: none;
}

th, td {
 padding: 6px 8px;
 font-size: 16px;
 font-weight: 500;
 border-bottom: 6px solid #fff;
}
/* --- DESKTOP STYLES --- */
@media (min-width: 769px) {
.dropdown-content {
 position: absolute;
 top: 100%;
 left: 0;
 background-color: tomato;
 min-width: 160px;
 padding: 0.5rem 0;
 box-shadow: 0 8px 16px rgba(0,0,0,0.3);
 border-radius: 4px;
}

.dropdown-content li {
 padding: 0.8rem 1.5rem;
}

/* Show dropdown on hover for desktop */
.dropdown:hover .dropdown-content {
 display: block;
}
}

/* --- MOBILE STYLES --- */
@media (max-width: 768px) {
.menu-toggle {
 display: block;
}

/* Full Screen Overlay */
.nav-links {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: tomato;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 
 /* Hidden by default with smooth fade-in */
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Applied via JavaScript */
.nav-links.active {
 opacity: 1;
 visibility: visible;
}

/* X Cancel Button */
.close-btn {
 display: block;
 position: absolute;
 top: 20px;
 right: 30px;
 color: #fff;
}

.nav-list {
 flex-direction: column;
 text-align: center;
 gap: 1.5rem;
}

.nav-list a {
 font-size: 1.5rem;
}

/* Mobile Dropdown Styling */
.dropdown-content {
 position: static;
 background-color: transparent;
 box-shadow: none;
 margin-top: 1rem;
}

.dropdown-content li {
 padding: 0.5rem 0;
}

.dropdown-content a {
 font-size: 1.2rem;
 color: #fff;
}

/* Active state for mobile dropdown toggle */
.dropdown.active .dropdown-content {
 display: block;
}

main { 
display: grid;
width: 100%;
grid-template-areas: 
 "hea"
 "art"
 "foo"
 "dja"
 "maj";
grid-template-rows: auto;  
grid-template-columns: 100%;
grid-row-gap: 10px;
grid-column-gap: 10px;
padding: 0 10px;
}

#pageArt {
 display: grid;
 width: 100%;
 grid-template-columns: 1fr;
 gap: 0px;
 font-size: 14px;
}

table {
 border-collapse: collapse;
 width: 100%;
}

.item2 {
 align-content: center;
 align-items: center;
 background-color:#eee;
}

.item3 {
 align-items: center;
 text-align: center;
 background-color:#eee;
}

img {display: block; margin-left: auto; margin-right: auto; width: 100%;}
}