/* Global styles */
html, body {
   width: 100vw;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background-image: url("../images/home-background.jpg");
   background-color: rgb(40, 40, 40);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   font-size: 16px;
   line-height: 1.6;
   font-family: system-ui, sans-serif;
   color: rgb(245, 245, 245);
}

.nav-item {
   color: rgb(245, 245, 245);
   text-decoration: none;
   transition: color 0.2s, transform 0.2s;
}

.nav-item:hover {
   color: rgb(205, 205, 205);
   transform: translateY(-2px);
}

.dropdown-toggle {
   background: none;
   border: none;
   color: rgb(245, 245, 245);
   font-size: 1.25rem;
   cursor: pointer;
   padding: 0.5rem 1rem;
   transition: color 0.2s, transform 0.2s;
}

.dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   background-color: rgb(40, 40, 40);
   font-size: 1rem;
   border-radius: 8px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
   display: none;
   flex-direction: column;
   min-width: 180px;
   z-index: 1000;
}

.dropdown-item {
   padding: 0.75rem 1rem;
   color: rgb(245, 245, 245);
   text-decoration: none;
   white-space: nowrap;
   transition: background-color 0.2s;
}

.solar-graph {
   padding-bottom: 100px;
}

/* Mobile styles */
body.mobile {
   padding: 1rem;
   max-width: 100vw;
}

body.mobile .navbar {
   display: none;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 8px;
   padding: 1rem;
   margin: 0.75rem 0;
   gap: 1rem;
}

body.mobile .navbar-hamburger {
   display: none;
}

body.mobile .navbar-hamburger-label {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   cursor: pointer;
   width: 2rem;
   height: 1.5rem;
   margin-bottom: 1rem;
}

body.mobile .navbar-hamburger-label span {
   display: block;
   height: 3px;
   width: 100%;
   background: rgb(245, 245, 245);
   border-radius: 2px;
}

body.mobile .navbar-hamburger:checked + .navbar-hamburger-label + .navbar {
   display: flex;
}

body.mobile .nav-item {
   padding: 1rem 0.5rem;
   font-size: 1.2rem;
   text-align: center;
   box-sizing: border-box;
   margin-left: 2rem;
   margin-right: 2rem;
   border-bottom: 1px solid rgba(245, 245, 245, 0.2);
}

body.mobile .page-content {
   background-color: rgb(40, 40, 40);
   border-radius: 12px;
   padding: 2rem 1.25rem;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
   margin-bottom: 3rem;
}

body.mobile .page-content h1 {
   font-size: 2rem;
   margin-top: 0;
   margin-bottom: 1.25rem;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.mobile .dropdown-menu {
   position: static;
   box-shadow: none;
   border-radius: 0;
   background-color: transparent;
   display: none;
   flex-direction: column;
}

body.mobile .dropdown-menu.show {
   display: flex;
}

/* Desktop styles */
body.desktop {
   padding: 2rem;
   padding-bottom: 6rem;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

body.desktop .navbar {
   display: flex;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 1.5rem;
   align-items: center;
}

body.desktop .nav-item {
   display: inline-block;
   padding: 0.5rem 1rem;
   font-size: 1.25rem;
}

body.desktop .navbar-hamburger {
   display: none;
}

body.desktop .page-content {
   max-width: 1050px;
   width: 100%;
   margin: 0 auto;
   background-color: rgb(40, 40, 40);
   padding: 3rem 2.5rem;
   border-radius: 16px;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

body.desktop .page-content h1 {
   font-size: 2.8rem;
   font-weight: 600;
   margin-top: 0;
   margin-bottom: 1.5rem;
   letter-spacing: 0.05rem;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.desktop .dropdown:hover .dropdown-menu {
   display: flex;
}

body.desktop .dropdown-toggle:hover {
   color: rgb(205,205,205);
}

body.desktop .dropdown-item:hover {
   background-color: rgb(85, 85, 85);
   border-radius: 8px;
}