/* Container: 90% on mobile, 75% on desktop */
.container {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    .container {
        width: 75% !important;
        max-width: 75% !important;
    }
}


@view-transition {
  navigation: auto; /* Enables seamless transitions between documents */
}
      
/* Force navbar to stay fixed during transitions */
#main-header, #nav, #ulMenu {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Prevent mobile menu from causing layout shifts */
#menu {
  transition: height 0.5s ease-out, opacity 0.5s ease-out;
}

/* Ensure desktop menu never collapses */
@media (min-width: 768px) {
  #menu {
    height: auto !important;
    opacity: 1 !important;
  }
}


    
    /* Safeguard for dark mode background to prevent white flash */
    .dark body {
      background-color: #000 !important;
      color: #fff !important;
    }
    
/* 1. FONT DEFINITIONS */
@font-face {
  font-family: 'HaraldText';
  src: url('../fonts/HaraldReveryTextFont.woff2') format('woff2'),
       url('../fonts/HaraldReveryTextFont.woff') format('woff'),
       url('../fonts/HaraldReveryTextFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HaraldMono';
  src: url('../fonts/HaraldReveryMonoFont.woff2') format('woff2'),
       url('../fonts/HaraldReveryMonoFont.woff') format('woff'),
       url('../fonts/HaraldReveryMonoFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CUSTOM DESKTOP FONT SIZING */
html { 
  /* Desktop Scale */
  font-size: 1.2rem;
  scrollbar-gutter: stable;
}

body {
  font-family: 'HaraldText', sans-serif;
  font-size: 1.9rem;     /* ≈28px on 16px root */
  line-height: 1.58;
  letter-spacing: 0.018em;
  overflow-x: hidden;
}

/* CUSTOM MOBILE FONT SIZING */
@media (max-width: 768px) {
          html {
            /* Reduces the base scale by ~20% for smaller screens */
            /* This makes your 1.9rem body text roughly 22px on mobile */
            font-size: 1.427rem; 
          }
        body {
          font-family: 'HaraldText', sans-serif;
          font-size: 2.28rem;     /* ≈28px on 16px root */
          line-height: 1.58;
          letter-spacing: 0.018em;
        }
}
      

    /* Gradient Background Animation */
    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .animate-gradient-slow {
      animation: gradientMove 15s ease infinite;
    }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .animate-fade-in {
    animation: fadeIn 0.8s ease-in forwards;
  }

    .text-justify {
      text-justify: inter-word;
      hyphens: auto;
    }

    /* Styling for the content sections */
    .policy-section h3 {
        font-family: 'HaraldText', sans-serif;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }


/* Navbar stuff */
#main-header {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  max-width: 100%;
  width: 100%;
}

.menu-letter-toggle {
  font-family: 'HaraldMono', monospace;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navbar reveal animation - ensure it starts visible if you don't use the original's scroll-reveal script */
header#main-header {
  transform: translateY(0) !important;
  opacity: 1 !important;
}