/*
  File: styles.css
  Description:
  This stylesheet defines the visual design and responsive layout for the CRIMA project website.
  It includes styling for typography, navigation, mobile responsiveness, header banners,
  logo sections, layout structure, diagrams, and footer content. Mobile navigation is handled
  through a hamburger menu with toggleable visibility.

  Author: Sahba El-Shawa
  Organization: Eurac Research
  Last updated: July 2025
*/


/* ========== Global Styles ========== */
body {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #fff;
  color: #333;
  text-align: left;
}

/* General in-text links*/
main a,
footer a {
  color: #0b6c88;
  text-decoration: none;
  font-weight: bold;
}

main a:hover,
footer a:hover {
  text-decoration: underline;
}


/* ========== Navigation (Desktop) ========== */

/* Navigation links inside main header */
.main-header nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}

.main-header nav a:hover {
  text-decoration: overline;
}

.main-header {
  background-color: #0b6c88;
  display: flex;
  justify-content: center; 
  align-items: center;
  padding: 20px 20px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.main-header a {
  margin-left: 20px;
  margin-right: 20px
}


/* Global anchor styles */
a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}


/* ========== Navigation (Mobile) ========== */

/* Hide the burger icon by default (desktop view) */
.burger {
  display: none; /* hide it by default */
}

/* Responsive navigation for screens below 768px */
@media (max-width: 768px) {
  .main-header {
    flex-direction: column;
    align-items: flex-start;
  }
    
  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  
  .nav-list.active {
    display: flex;
    flex-direction: column;
  }
  
  .burger {
    display: block;
    font-size: 20px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin: 10px;
  }

  .nav-list a {
    display: block;
    padding: 10px 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 80%;
    text-align: center;
    margin: 0 auto;
    color: white;
    text-decoration: none;
  }
}


/* ========== Banner Section ========== */

/* Make the full banner clickable */
.banner-link {
  display: block;
  text-decoration: none;
}

/* Banner with background image */
.logo-header {
  background-image: url('assets/crima_banner_blue.png'); 
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;

  width: 100%;
  aspect-ratio: 3 / 1; 
  display: block;
  
    
  display: flex;
  align-items: flex-start; 
  justify-content: flex-start; 

  cursor: pointer;
}

/* Optional: white box overlay behind logo - currently not used */
.logo-box {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8); 
  padding: 10px 20px;
  border-radius: 8px;
}

.logo {
  height: 400px;
  max-width: 80%;
  width: auto;             
  object-fit: contain;
}



/* ========== Main Content ========== */

/* Main layout */
main {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Section headings */
h2 {
  margin-top: 40px;
  color: #0b6c88;
}

/* Images and diagrams within sections */
.images {
  display: flex;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0px;
}


/* Partner logos */
.partnerlogo {
  max-width: 100%;
  height: 80px;
  width: auto;             
  object-fit: contain;
}

/* Miscellaneous logos or small images */
.misclogo {
  max-width: 100%;
  height: 150px;
  width: auto;             
  object-fit: contain;
}

/* Larger diagrams or schematics */
.diagram {
  max-width: 100%;
  height: auto;
  width: auto;             
  object-fit: contain;
}


/* ========== Footer ========== */

footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
  color: #666;
  margin-top: 60px;
}

/* Footer attribution */
.footer-credit {
  font-size: 0.85em;
  margin-top: 5px;
  color: #aaa;
}

.footer-credit a {
  color: #aaa;
  text-decoration: none;
}

.footer-credit a:hover {
  text-decoration: underline;
}