/* style.css – Global Variables & Utilities */

/* --- FONTS --- */
@font-face {
  font-family: 'D-DIN';
  src: url('fonts/D-DIN.otf') format('opentype');
  font-display: swap; 
}
@font-face {
  font-family: 'DIN-Light';
  src: url('fonts/DIN-Light.otf') format('opentype');
  font-display: swap; 
}
@font-face {
  font-family: 'EBGaramond';
  src: url('fonts/EBGaramond.ttf') format('truetype');
  font-display: swap; 
}

/* --- VARIABLES --- */
:root {
  --primary-bg: rgb(39, 14, 14);
  --secondary-bg: #FFF5F0;
  --nav-hover: rgb(182, 69, 69);
  --btn-bg: white;
  --btn-hover: #FFF5F0;
  --btn-color: #2c2c2c;
  --btn-font-size: 20px;
  --btn-padding: 15px 3px;
  --btn-radius: 50px;
  --custom-font: 'D-DIN', sans-serif;
  --custom-font-light: 'DIN-Light', sans-serif;
  --custom-font-elegant: 'EBGaramond', serif;
}

/* --- BODY & BACKGROUND --- */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%; /* Change 100vh to 100% */
  background: var(--primary-bg);
  z-index: -1;
  pointer-events: none; /* Ensures the background doesn't block clicks */
}

body {
  width: 100%;
  margin: 0;
  position: relative;
  font-family: Arial, sans-serif;
  background-color: var(--secondary-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
  z-index: 1;
  overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
  -webkit-font-smoothing: antialiased; /* Makes fonts look crisper on Mac/iOS */
}

/* --- UTILITIES --- */
.fade-in { opacity: 0; visibility: hidden; transition: opacity 1.5s ease; }
.fade-in.ready { opacity: 1; visibility: visible; }

/* NOTE: 
   - Header & Footer styles are now handled by header-footer.php 
   - Page-specific elements (like #footer-line) are handled in their specific PHP files 
*/

/* --- MOBILE ADJUSTMENTS (Generic) --- */
@media (max-width: 880px) {

  /* 1. Switch to Dark Background Theme */
  body::before { display: none !important; }
  body { background-color: var(--primary-bg); }

  /* 2. Content Spacing (Used on Login/Contact pages) */
  .form-container {
    margin-top: 160px;
    margin-bottom: 40px;
  }
}