/* ===================================
   1. Base & Main Layout
   =================================== */

/* * Defines the main content area as a full-height flex container,
 * arranging children vertically with space between them.
 */
main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: clamp(4rem, 17vh, 7rem)
}

.center-group {
  /* 1. Enable Flexbox */
  display: flex;
  
  /* 2. Horizontal Alignment: Center the entire group */
  justify-content: center;
  
  /* 3. Vertical Alignment: Align items to the center (important for the image) */
  align-items: center; 
  
  /* 4. Optional: Add a small gap between the button and the image */
  gap: 10px; 
}

/* Optional: Fixes a common issue where the image sits slightly low */
.social-button img {
    vertical-align: middle;
}
/* ===================================
   2. Page Components
   =================================== */

/* Header (fixed at the top) */
.header-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0;
  background: linear-gradient(to bottom, #00228a, #010A21);
  text-align: center;
  transition: opacity 0.8s ease-in-out;
  z-index: 10; /* Sits above other main content */
}

/* ADD THIS SECTION */
.header-wrap h1 {
  /* 1. Prevent line breaks */
  white-space: nowrap; 
  
  /* 2. Fluid Sizing */
  /* Syntax: clamp(minimum-size, preferred-size, maximum-size) */
  font-size: clamp(2.5rem, 5vw, 5rem); 
  
  /* Optional: remove default browser margins to keep it vertically centered */
  margin: 1rem 0; 
}

/* Main text container */
.text-box {
  width: clamp(80%, 90vw, 100%);
  margin-top: 0.25rem;
  z-index: 10;
}

/* Button container */
.buttons-wrap {
  margin-top: clamp(0rem, 10vh, 1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  margin-bottom: clamp(3rem, 15vh, 6rem);
  box-sizing: border-box;
  padding: 0;
}

/* ===================================
   3. Typography
   =================================== */

h1 {
  font-size: clamp(2.5rem, 8vh, 3.5rem);
  line-height: 1.4;
}

.quote {
  font-size: clamp(1.1rem, 3vmin, 2rem);
  font-style: italic;
  line-height: 1.4;
  width: 90%;
  padding-left: 5%;
}

/* ===================================
   4. UI Elements (Language Switcher)
   =================================== */

#language-switcher {
  margin-top: 0rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0rem;
}

#language-switcher button {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}

#language-switcher button.active-lang {
  opacity: 1;
  transform: scale(1.15);
}

/* ===================================
   5. Animations & Effects
   =================================== */

/* Used for fading content in/out */
.fade-container {
  transition: opacity 0.4s ease-in-out;
  border-radius: 50px;
}

.fade-container.fading {
  opacity: 0;
}

#language-switcher img {
  width: 30px;        /* Set a fixed width */
  height: 20px;       /* Set a fixed height */
  object-fit: cover;  /* Prevents stretching/distortion */
  border: 1px solid #eee; /* Optional: adds a nice subtle border */
}