@charset "utf-8";
/* Fix automatic font-inflation when rotating to landscape */
html {
  -webkit-text-size-adjust: 100%; /* Fixes iOS Safari */
  text-size-adjust: 100%;         /* Fixes Android Chrome/Edge */
}

.nav-link {
  display: inline-flex;
  align-items: center;    /* Keeps text and icon vertically centered */
  gap: 8px;               /* Adds clean spacing between icon and text */
  text-decoration: none;
  font-size: 16px;        /* Adjust base text size as needed */
}

/* The SVG configuration */
.nav-icon-language {
  width: 1.25rem;         /* Caps the size (approx 20px) so it never blows up on mobile */
  height: 1.25rem;        /* Keeps the 1:1 scale */
  flex-shrink: 0;         /* Prevents the browser from squishing the icon if space gets tight */
}

@media (max-width: 991px) {
  /* 1. OVERRIDE BOOTSTRAP 5 POPPER & HIDE MECHANISMS */
  ul.lang-overlay-menu,
  ul.lang-overlay-menu:not(.show),
  ul.lang-overlay-menu[data-bs-popper] {
    display: none !important;
    position: fixed !important;
    top: 30px !important;
    left: 30% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important; /* Strips Bootstrap 5 default popper margins */
    animation: none !important; 
  }

  /* Prevent Bootstrap/Popper from forcing standard dropdown rules */
  li.dropdown {
    position: static !important; 
  }

  /* Style the menu as an isolated, floating window modal at the top */
  ul.lang-overlay-menu.show {
    display: block !important;
    position: fixed !important;
    
    /* Position it at the top and center horizontally */
    top: 100px !important; 
    left: 30% !important;
    
    /* Give it a distinct window appearance */
    width: 60% !important;        
    max-width: 120px !important;  
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    background-color: #ffffff !important;

    
    /* Heavy shadow to look layered over background elements */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    padding: 8px 5px !important;  
    z-index: 9999 !important;     
    
    /* Quick fade & slide-down animation */
    animation: windowPop 0.2s ease-out forwards !important;
  }

  /* Style the links inside the new window container */
  ul.lang-overlay-menu .dropdown-item {
    padding: 8px 15px !important; 
    font-size: 0.8rem !important;
	  line-height: 0.5rem;
    border-radius: 8px;
    margin: 2px 5px;
  }

  /* Smooth drop-down & fade animation */
  @keyframes windowPop {
    from {
      opacity: 0;
      transform: translate(-50%, -10px) scale(0.95); 
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }
}

/* Specific layout fix for mobile landscape/horizontal view with a 100px header */
@media (max-width: 1199px) and (orientation: landscape) {
  .navmenu ul {
    /* 1. Use your required 100px top offset, but keep bottom 'auto' */
    inset: 100px 20px auto 20px !important;
    
    /* 2. Dynamically calculate the maximum possible height: 
          100vh (total screen height) minus 120px (100px header + 20px bottom buffer) */
    max-height: calc(100vh - 120px) !important;
    height: max-content !important;
  }

  /* 3. Compress the link spacing to pack them closer together vertically */
  .navmenu a,
  .navmenu a:focus {
    padding-top: 4px !important;    /* Shrinks the gap between menu items */
    padding-bottom: 4px !important;
    font-size: 0.75rem !important;  /* Marginally smaller text to fit the tight screen */
  }

  /* 4. Downsize the circle arrow icons so they match the compressed links */
  .navmenu a i,
  .navmenu a:focus i {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
}

/* Mobile Typography Adjustments */
/* 1. Perfected Portrait Mobile View (Phones held vertically) */
@media (max-width: 576px) and (orientation: portrait) {
  body h1, body .h1, [class*="hero"] h1, [class*="content"] h1 { font-size: 1.32rem !important; }
  body h2, body .h2, [class*="hero"] h2, [class*="content"] h2 { font-size: 1.15rem !important; }
  
  /* Added h3 (Matches portrait h2 scaling ratio) */
  body h3, body .h3, [class*="hero"] h3, [class*="content"] h3 { font-size: 1.05rem !important; }
  
  /* Added Paragraphs and Lists to match exactly */
  body p, body span, body ul, body li, [class*="content"] p { font-size: 0.98rem !important; }
}

/* 2. Perfected Horizontal Mobile View (Phones flipped sideways) */
@media (max-width: 992px) and (orientation: landscape) {
  body h1, body .h1, [class*="hero"] h1, [class*="content"] h1 { font-size: 1.61rem !important; }
  body h2, body .h2, [class*="hero"] h2, [class*="content"] h2 { font-size: 1.38rem !important; }
  
  /* Added h3 (Matches landscape h2 scaling ratio) */
  body h3, body .h3, [class*="hero"] h3, [class*="content"] h3 { font-size: 1.25rem !important; }
  
  /* Added Paragraphs and Lists to match exactly */
  body p, body span, body ul, body li, [class*="content"] p { font-size: 1.04rem !important; }
}