/* Critical CSS to prevent FOUC - loaded before JS */

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

html, body { 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; 
  color: #283433;
  overflow-x: hidden;
  max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 { 
  font-family: Georgia, 'Times New Roman', serif; 
  font-weight: 400; 
}

:root {
  --color-primary: #283433;
  --color-secondary: #4D5C4D;
  --color-accent: #B8C8BA;
  --color-white: #FFFFFF;
  --color-lightgray: #F4F4F4;
  --color-black: #000000;
  --color-gray: #A3A9AA;
}

/* Critical Header Styles */
header[class*="header"] {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
}

[class*="navbar"] {
  height: 118px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

[class*="container"] {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

[class*="navLink"] {
  color: #ffffff !important;
  text-decoration: none;
}

/* Dropdown Menu Styles */
[class*="dropdown"] {
  position: relative;
}
[class*="dropdownBtn"] {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 300;
  background: none;
  border: none;
  cursor: pointer;
}
[class*="dropdownContent"] {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  display: none;
}
[class*="dropdown"]:hover [class*="dropdownContent"] {
  display: block !important;
}

/* Language Switcher Styles */
[class*="langSwitcher"] {
  display: flex !important;
  align-items: center;
}
[class*="langButton"] {
  color: #ffffff !important;
  background: none;
  border: none;
  cursor: pointer;
}

/* Critical Footer Styles */
footer[class*="footer"] {
  background-color: #283433 !important;
  width: 100%;
}

[class*="bottomSection"] {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

[class*="developerSection"] {
  display: flex !important;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 245, 245, 0.1);
}

[class*="developerLink"] {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

[class*="developerText"] {
  color: #B8C8BA;
  font-size: 12px;
  font-weight: 300;
  line-height: 12px;
}

[class*="zeepLogo"] {
  height: 20px;
  width: auto;
  opacity: 0.7;
  filter: brightness(0) invert(1);
}

/* Basic visibility */
main { 
  min-height: 100vh; 
}