@import './styles/reset.css';
@import './styles/tokens.css';
@import './styles/header.css';
@import './styles/footer.css';
@import './styles/hero.css';
@import './styles/projects.css';
@import './styles/popup.css';
@import './styles/workplace.css';
@import './styles/impressum.css';


/* Anmerkungen 
  - nutze konsistent das 8-Point Grid (Vertical Rhythm): alle Größen Vielfaches (oder Teiler) von 8 oder 4
    so wie hier beschrieben: https://medium.com/built-to-adapt/8-point-grid-vertical-rhythm-90d05ad95032
  - responsiv bis (minimal) Breite des Bildschirms von 320px
  - 1200px Maximalbreite wurde über eine generische CSS-Klasse "container" gemacht die jeden Inhalt als Wrapper nutze
    (bei den popup-Fenstern wurde die Maximalbreite manual auf 1200px gelegt --> sh. popup.css - #popup-content)
*/
    
body {
  font-family: var(--font-family-sans-serif);
  color: var(--color-text);
  line-height: 24px; 
  
  background: var(--color-background);
}

@media (max-width: 768px) {
  html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer, Edge */
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}

.container { 
  max-width: 1200px;
  margin: 0 auto;
}

/* Klasse wird oft für Funktionalitäten in JS bspw. via classList.add('hidden') benötigt */
.hidden {
  display: none;
} 

html:has(#popup-overlay) {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-family-sans-serif);
}

h1 { 
  font-size: var(--font-size-h1);
  line-height: 48px; 
  margin-bottom: var(--spacing-medium);
}
h2 {
  font-size: var(--font-size-h2);
  line-height: 40px; 
  margin-bottom: var(--spacing-medium);
}
h3 { 
  font-size: var(--font-size-h3); 
  line-height: 32px; 
  margin-bottom: var(--spacing-medium);
}
h4 {
  font-size: var(--font-size-h4);
}

/* Für sehr kleine Bildschirme */
@media (max-width: 400px) {
  h1 {
    font-size: 2rem;
    line-height: 32px;
  }
  h2 {
    font-size: 1.6rem;
    line-height: 24px;
  }
  h3 {
    font-size: 1.2rem;
    line-height: 24px;
  }
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  opacity: var(--icon-hover-opacity);
}

button:not(.project-card):not(#popup-close):not(.popup-backdrop):hover,
.button-link:hover {
  transform: translateY(-5px);
  box-shadow: 0.25rem 0.25rem rgba(0,0,0,0.5);
}

.icon-mask {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.icon-archive { --icon-url: url("/static/icons/archive.svg"); }
.icon-back { --icon-url: url("/static/icons/arrow_back.svg"); }
.icon-close { --icon-url: url("/static/icons/close.svg"); }
.icon-github { --icon-url: url("/static/icons/github.svg"); }
.icon-info { --icon-url: url("/static/icons/info.svg"); }
.icon-linkedin { --icon-url: url("/static/icons/linkedin.svg"); }
.icon-mail { --icon-url: url("/static/icons/mail.svg"); }
.icon-menu { --icon-url: url("/static/icons/menu.svg"); }

.icon-mask:hover {
  opacity: var(--icon-hover-opacity);
}

.icon-mask.contact-icon {
  width: 30px;
  height: 30px;
}

iframe {
  width: 100%; 
  aspect-ratio: 16 / 9;
}


.map-shell {
  min-height: 360px;
  display: grid;
  place-items: center;
  background: #f3f4f6;
}
#load-map {
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#myMap { 
  min-height: 360px; 
  width: 100%; 
  height: 100%;
  aspect-ratio: 16 / 9;
}

hr {
  width: 100%;
  border-width: 1;
  margin-bottom: var(--spacing-large);
}

/* Utility Klassen */                                                                                     
.flex-container {                                                                                        
  display: flex;                                                                                         
  flex-direction: row;                                                                                   
  gap: .4rem;                                                                                            
}                                                                                                        
.flex-container_small {                                                                                  
  display: flex;                                                                                         
  flex-direction: row;                                                                                   
  gap: .1rem;                                                                                            
}
.flex-container-center {
  display: flex;                                                                                         
  flex-direction: row;   
  align-items: center;                                                                              
  gap: .4rem;
}

.flex-container-column {
  display: flex;                                                                                         
  flex-direction: column;                                                                                   
  gap: .8rem;
}
.flex-container-column_big {
  display: flex;                                                                                         
  flex-direction: column;                                                                              
  gap: 1.2rem;
}
.flex-container-center-wide {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
}

/* Kleine Fade-In Animation */
@keyframes fade-in {
  from { opacity: 0; }  
  to   { opacity: 1; }   
}
.fade-in_anim_shorter_shorter {
  opacity: 0;                        
  animation: fade-in 0.4s ease-in-out 0.3s forwards;
}
.fade-in_anim_shorter {
  opacity: 0;                        
  animation: fade-in 0.7s ease-in-out 0.3s forwards;
}
.fade-in_anim {
  opacity: 0;                        
  animation: fade-in 1.1s ease-in-out 0.3s forwards;
}
.fade-in_anim_longer {
  opacity: 0;                        
  animation: fade-in 1.2s ease-in-out 0.4s forwards;
}
.fade-in_anim_longer_longer {
  opacity: 0;                        
  animation: fade-in 1.3s ease-in-out 0.5s forwards;
}

/* credits: https://max.hn/thoughts/how-to-create-a-highlighter-marker-effect-in-css */
.mark {
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
      to right,
      var(--mark-color-1),
      var(--mark-color-2),
      var(--mark-color-3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}