/* ================= Reset & Fonts ================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Garet-Book', sans-serif; /* Default font */
}

@font-face {
  font-family: 'HerrVonMuellerhoff';
  src: url('../fonts/HerrVonMuellerhoff-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garet-Book';
  src: url('../fonts/Garet-Book.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.HVM-font-very-large {
  font-family: 'HerrVonMuellerhoff', cursive;
  font-size: 144px;
}

.HVM-font-large {
  font-family: 'HerrVonMuellerhoff', cursive;
  font-size: 48px;
}

.HVM-font-small {
  font-family: 'HerrVonMuellerhoff', cursive;
  font-size: 24px;
}

.G-font-large {
  font-family: 'Garet-Book', cursive;
  font-size: 32px;
  text-transform: uppercase;
}

.G-font-small {
  font-family: 'Garet-Book', cursive;
  font-size: 16px;
  text-transform: uppercase;
}

/* Typography */
h1 {
  font-family: 'HerrVonMuellerhoff', cursive;
  font-size: 6rem; /* Larger for impact */
  font-weight: normal;
  margin: 0;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Shadow helps reading on image */
}

h2 {
  font-family: 'Garet-Book', sans-serif;
  font-size: 2rem;
  color: #500000;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ================= Header (Full Span) ================= */
.site-header {
  width: 100%;
  background-color: #ffffff; /* White background */
  
  /* The Red Separator Line */
  border-bottom: 2px solid #500000; 
  
  position: relative;
  z-index: 1500;
  
  /* Balanced Spacing for Logo */
  padding: 15px 20px; 
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logo - Balanced Spacing */
.logo-container {
  display: block;
  /* Removed padding-bottom to fix uneven spacing */
  margin-bottom: 20px; 
}

.site-logo {
  max-width: 150px; /* Slightly larger for impact */
  height: auto;
  display: block;
}

/* ================= Desktop Navigation ================= */
.main-nav {
  width: 100%;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 50px;
}

.main-nav a {
  font-family: 'Garet-Book', sans-serif;
  text-decoration: none;
  
  /* CHANGED TO RED since background is white */
  color: #500000; 
  
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 5px;
  position: relative;
  transition: opacity 0.3s;
}

/* Hover Effect - Gold Underline */
.main-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #500000; /* Gold accent */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

/* ================= Mobile Hamburger ================= */
.menu-toggle {
  display: none; /* Hidden on desktop */
  position: absolute;
  left: 0; /* Aligned to the far left of the container */
  top: 50%;
  transform: translateY(-50%); /* Vertically centered relative to logo */
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2500;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  /* CHANGED TO RED so it shows on white bg */
  background: #500000; 
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Hamburger Animation */
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
  background: #500000;
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
  background: #500000;
}

/* ================= Mobile Menu (Dropdown Style) ================= */
.mobile-nav {
  position: absolute;
  top: 100%; /* Starts exactly at the bottom of the red border */
  left: 0;
  width: 100%;
  background-color: #500000; /* Dark Red Background */
  padding: 0;
  
  /* Hidden State */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1400;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Open State */
.mobile-nav.open {
  max-height: 400px; /* Large enough to fit menu */
  opacity: 1;
  visibility: visible;
  padding: 5px 0;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.mobile-nav li {
  margin: 0;
  padding: 0;
}

.mobile-nav a {
  display: block;
  font-family: 'Garet-Book', sans-serif;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff; /* White text on Red background */
  text-decoration: none;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle separators */
  transition: background 0.3s;
}

.mobile-nav a:hover {
  background-color: rgba(0,0,0,0.1);
}

/* ================= VIDEO HERO SECTION ================= */
.video-hero {
  position: relative;
  width: 95%;
  /* CENTERING MAGIC */
  left: 50%; 
  transform: translateX(-50%); 
  height: 100vh; /* Forces full screen height */
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Stacks header top, content middle */
  margin-bottom: 25px;
}

/* 1. Target the bars in the Desktop Nav */
.video-hero .main-nav a::after {
  background-color: #ffffff !important;
}

/* 2. Target the bars in the Mobile Dropdown (if applicable) */
.video-hero .mobile-nav a::after {
  background-color: #ffffff !important;
}

/* 3. Target the Header Separator Line (the red line you had earlier) */
/* If you want the separator line to be white/transparent on the home page */
.video-hero .site-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 1. The Video File */
.video-bg {
  position: absolute;
  top: 0;
  
  /* CENTERING MAGIC */
  left: 50%; 
  transform: translateX(-50%); 
  
  width: 100%;
  height: 100%;
  
  /* THE WIDTH LIMIT */
  max-width: 1800px; 
  
  object-fit: cover; 
  z-index: 0;
}

/* 2. The Tint Overlay */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CENTERING MAGIC */
  left: 50%; 
  transform: translateX(-50%); 
  /* THE WIDTH LIMIT */
  max-width: 1800px; 
  background: rgba(0, 0, 0, 0.4); /* 40% Dark tint */
  z-index: 1; /* Sits above video, below text */
}

/* 3. The Content */
.hero-content {
  position: relative;
  z-index: 10; /* Sits on top of everything */
  flex-grow: 1; /* Pushes content to fill the space */
  display: flex;
  flex-direction: column;
  /* justify-content: center; Vertically center */
  align-items: center;     /* Horizontally center */
  text-align: center;
  color: #fff;
  padding: 0 0px;
  line-height: 0.8;
}

/* 4. Force Header Transparency */
/* We need to override the white header from the previous page */
.video-hero .site-header {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.2); /* Subtle glass border */
  position: relative;
  z-index: 20;
}

/* Ensure header text/icons are white on top of the video */
.video-hero .site-header a, 
.video-hero .menu-toggle span {
  color: #fff !important;
}

.video-hero .menu-toggle span {
  background: #fff !important;
}

/* Make sure the logo image works on dark video */
/* If you have a white version of your logo, switch it here using CSS content or filters */
.video-hero .site-logo {
  filter: brightness(0) invert(1); /* Turns a black logo white */
}

/* ================= Page Content ================= */
.page-content {
  /* 1. The Constraint */
  width: 95%; 
  max-width: 1800px; /* Prevents text from becoming unreadable on huge monitors */
  
  /* 2. The Centering */
  margin: 0 auto;    /* Top/Bottom: 0, Left/Right: Auto (Centers it) */
  
  /* 3. Spacing */
  padding-top: 60px;    /* Space below the header */
  padding-bottom: 60px; /* Space above the footer */
  box-sizing: border-box;
}

/* Optional: Ensure images inside the content never break the layout */
.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px; /* Softens image corners for that elegant look */
}


/* ================= Footer ================= */
.site-footer {
  width: 95%; /* Adjust this percentage to control how wide it is */
  margin: 0 auto; /* This centers the element horizontally */
  
  background-color: #500000;
  color: #fff;
  padding: 25px 0;
  z-index: 1500;
  position: relative;
  
  /* Optional: Adds a subtle curve for a more "luxury" feel */
  border-radius: 0px; 
}

.footer-inner {
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* Shared styling for text and links */
.contact p,
.contact a {
  color: #fff;
  font-size: 14px;
  font-family: 'Garet-Book', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  margin: 2px 0; /* Adds a little spacing between lines */
}

/* Specific styling for the Links (Email/Phone) to handle the animation */
.contact a {
  position: relative;      /* Needed to anchor the white bar */
  display: inline-block;   /* Ensures the bar is only as wide as the text */
  padding-bottom: 0px;     /* Space between text and the bar */
}

/* The White "Developing Bar" */
.contact a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;            /* Thin elegant line */
  background-color: #fff; /* White color */
  
  /* Animation Start State */
  transform: scaleX(0);
  transform-origin: center; /* Expands from the middle out */
  transition: transform 0.3s ease;
}

/* Hover State */
.contact a:hover::after {
  transform: scaleX(1);
}

.socials {
  margin-top: 15px;
}

.footer-subscribe {
  max-width: 320px;
}

.newsletter {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Increased gap slightly for breathing room */
}

/* --- Shared Styles for Font and Shape --- */
.newsletter input,
.newsletter button {
  font-family: 'Garet-Book', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Adds a high-end feel */
  border-radius: 0;      /* MAKES THEM SQUARE */
  outline: none;         /* Removes default browser focus rings */
  transition: all 0.3s ease;
}

/* --- Elegant Input Field --- */
.newsletter input {
  background-color: transparent; /* See-through background */
  border: none;
  /* A thin, subtle line underneath only */
  border-bottom: 1px solid rgba(255, 255, 255, 0.4); 
  padding: 10px 0; /* Padding only top/bottom */
  color: #fff; /* White text when typing */
}

/* Style the placeholder text (e.g., "Enter email") */
.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* When clicking into the input field */
.newsletter input:focus {
  border-bottom-color: #fff; /* The line becomes solid white */
}

/* --- Elegant Square Button --- */
.newsletter button {
  padding: 12px 25px; /* More substantial padding */
  background-color: #fff;
  color: #500000;
  border: 1px solid #fff; /* Define border so it doesn't jump on hover */
  font-weight: 600;
  cursor: pointer;
}

/* Hover Effect: Invert colors elegantly */
.newsletter button:hover {
  background-color: transparent; /* Become see-through */
  color: #fff; /* Text turns white */
  /* The white border defined above stays, creating an outlined look */
}

.subscribe-status {
  margin-bottom: 10px;
  font-size: 14px;
}

/* ================= reCAPTCHA Fix ================= */
.grecaptcha-badge { 
  /* 1. Ensure it sits on top of your footer (z-index 1500) */
  z-index: 9999 !important; 
  
  /* 2. Optional: Move it to the Top Right of the screen 
     instead of the bottom if you prefer it out of the way */
  /*
  bottom: auto !important;
  top: 10px !important;
  */
}

/* ================= Responsive Rules ================= */
@media (max-width: 900px) {
  
  /* 1. Hide Desktop Nav */
  .main-nav {
    display: none;
  }

  /* 2. Show Hamburger */
  .menu-toggle {
    display: flex;
  }
  
  /* 3. Adjust Header Layout for Mobile */
  .header-inner {
    flex-direction: row; /* Keep hamburger left, logo center */
    justify-content: center;
    padding: 10px 0;
  }
  
  .logo-container {
    margin-bottom: 0; /* Remove bottom margin on mobile to save space */
  }

  .site-logo {
    max-width: 140px; /* Smaller logo on mobile */
  }
  .feature-row, .feature-row.reverse {
    flex-direction: column;
    gap: 30px;
  }
  .row-image {
    height: 350px; /* Increased slightly for better mobile presence */
    min-height: 300px; /* Added: Ensures it never disappears */
    flex: none; /* Added: Prevents flexbox from trying to shrink it vertically */
  }
  
  /* Force everything to behave like simple blocks stacked on top of each other */
  .footer-inner, 
  .contact, 
  .footer-subscribe,
  .newsletter {
    display: block !important; 
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .site-footer {
    padding: 50px 0 !important;
  }

  .contact p, .contact a {
    display: block !important;
    margin: 10px 0 !important;
  }

  .newsletter input {
    width: 80% !important; /* Slightly narrower for looks */
    margin: 0 auto 15px auto !important;
    display: block !important;
  }

  .newsletter button {
    width: 180px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .socials {
    margin-top: 20px !important;
    display: block !important;
  }

}