/* src/assets/css/style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


.navheader {
    padding: 1rem 1rem; 
    background: #ffffff; 
    display: flex; 
    background: #ffffff; 
    border-bottom: 15px solid #51381a; 
    flex: none;
    justify-content: center; 
}
    

.logo { 
    display: flex; 
    max-width: 400;
    width: 100%;
    padding: 0 0; 
    height: auto ;
 }

.title-text {
    color: #2d6c7b;
    font-weight: 600;
}

nav { display: flex; gap: 1rem; padding: 0 1rem; }

 nav a {text-decoration: none; color: #2d6c7b; font-size: 1rem; }

@media (max-width: 800px) {
    nav { display: flex; justify-content: space-evenly; width: 100%; padding: 0 1rem; }
  nav a {text-decoration: none; color: #2d6c7b; font-size: 1.5rem;  }
}

nav a:hover, nav a.active { color: #51381a; font-weight: 600; }

h1 { margin-bottom: 0.5rem; }
code { background: #f4f4f4; padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.9em; }

.copyright-text {
    color: #8f7659;
    font-size: 0.8rem;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #222222;
    background: #d1e9ef;
    margin: 0 auto;
    margin-bottom: 0;
    justify-content: center; 
   
   
}

.width-limit {
    display: flex;
    flex-grow: 1;
    max-width: 1200px;
}

.width-limit-header {
    display: flex;
    flex-grow: 1;
    max-width: 1200px;
    flex-direction: row; 
    justify-content: space-between; 
    align-items: flex-end;
}

.width-limit-footer {
    display: flex;
    flex-grow: 1;
    flex-direction: row-reverse; 
    max-width: 1200px;
}

@media (max-width: 800px) {
    .width-limit-header {
        display: flex;
        flex-grow: 1;
        max-width: 1200px;
        flex-direction: column; 
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    
    .width-limit-footer {
        display: flex;
        flex-grow: 1;
        gap: 0.5rem;
        flex-direction: column; 
        align-items: flex-start; 
        max-width: 1200px;
    }
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;   /* stretches to fill body */
}

main {
    border-top: 5px solid #2d6c7b;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center; 
}

.portrait {
    max-height: 500px;
    max-width: 100%;
    width: fit-content;
    min-width: none;
    height: auto;
    border: 5px solid #2d6c7b;
    object-fit: contain;
}

.centered-container {
  display: flex;
  flex-direction: column; 
  justify-content: center; /* Horizontally centers content */
  align-items: center;     /* Vertically centers content */
}

.aligned-container {
  display: flex;
  flex-direction: column; 
  justify-content: left; /* Horizontally centers content */
  align-items: flex-start;     /* Vertically centers content */
}

.center-left-container {
  display: flex;
  flex-direction: column; 
  justify-content: center; /* Horizontally centers content */
  align-items: flex-start;     /* Vertically centers content */
  
}

.text-paragraphs {
  display: flex;
  flex-direction: column; 
  justify-content: left; /* Horizontally centers content */
  padding-left: 0rem;
  padding-right: 1rem;
  padding-bottom: 0;
}

.footer {   
    border-top: 10px solid #2d6c7b;
    border-bottom: 10px solid #2d6c7b;
    padding: 0.5rem 1rem;
    padding-bottom: 0;
    background: #51381a;
    min-height: 120px;
    display: flex; 
    justify-content: center;
    align-items: flex-start;
}

.page-home {
    display: flex; 
    flex-direction: row; 
    width: 100%;
    margin: 1rem 0rem;
}

.contact-row {
    width: 260px;
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
}

.contact-row-full {
    max-width: 100%;
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
}

.mail { text-decoration: none; color: #2d6c7b; }
.mail:hover { color: #51381a; font-weight: 600; }

.mail-footer { text-decoration: none; color: #8f7659; font-size: 0.8rem;}
.mail-footer:hover { color: #d1e9ef; font-weight: 600; }