/* 

  GARD EYEWEAR - MAINTENANCE PAGE STYLES (CLEAN)

*/



:root {

  --color-dark: #333333;     

  --color-light: #e5dac7;    

  --font-main: 'Manrope', sans-serif;

  --font-display: 'Oswald', sans-serif;

}



* { box-sizing: border-box; margin: 0; padding: 0; }



body { 

  font-family: var(--font-main); 

  background-color: var(--color-dark); 

  color: var(--color-light); 

  overflow: hidden; 

  -webkit-font-smoothing: antialiased;

}



.maintenance-wrapper {

  height: 100vh;

  width: 100vw;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  padding: 2rem;

  background-color: var(--color-dark);

}



.maintenance-content {

  max-width: 1200px;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  justify-content: space-between;

  height: 80vh;

}



.maintenance-main {

  margin-top: -2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.maintenance-logo-wrapper {

  margin-bottom: 2.5rem;

  max-width: 300px;

  width: 80%;

}



.maintenance-logo {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 4px; 

}



.maintenance-status {

  font-family: var(--font-display);

  font-size: 1.8rem;

  letter-spacing: 0.25em;

  font-weight: 500;

  opacity: 0.8;

  text-transform: uppercase;

}



.maintenance-tagline {

  font-size: 1.1rem;

  line-height: 1.6;

  font-weight: 300;

  max-width: 600px;

  margin: 2rem auto;

  opacity: 0.8;

}



.maintenance-info {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2.5rem;

}



.info-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 2rem;

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.info-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}



.info-item a {

  text-decoration: none;

  color: inherit;

  transition: opacity 0.3s;

}



.info-item a:hover {

  opacity: 0.6;

}



.maintenance-socials {

  display: flex;

  gap: 2rem;

}



.maintenance-socials a {

  color: var(--color-light);

  opacity: 0.6;

  transition: opacity 0.3s, transform 0.3s;

}



.maintenance-socials a:hover {

  opacity: 1;

  transform: translateY(-3px);

}



.maintenance-legal {

  font-size: 0.7rem;

  opacity: 0.4;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-top: 2rem;

}



@media (min-width: 1024px) {

  .maintenance-status { font-size: 2.5rem; }

  .info-grid { gap: 4rem; }

  .maintenance-logo-wrapper { max-width: 500px; }

}



@media (max-width: 768px) {

  .maintenance-content { height: 90vh; }

  .info-item {font-size: 0.8rem !important;}

  .info-grid { flex-direction: column; gap: 1.2rem; }

  .maintenance-logo-wrapper { max-width: 200px; }

}