/*
Theme Name: UVG Transportation
Description: A custom theme for UVG Transportation with smooth transitions (pure CSS transitions).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: uvg-transportation
*/

/* -------------------------------------------------- */
/*                      GLOBAL                        */
/* -------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  color: white;
}

/*
OPTIONAL TRANSITION OVERLAY (if used):
Typically set in script.js to .active or not,
but not mandatory for the fade logic below.
*/
#transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  pointer-events: none;
  z-index: 950; /* Below header (1000) */
  transition: opacity 1s ease;
}
#transition-overlay.active {
  opacity: 1;
}

/* -------------------------------------------------- */
/*                     HOMEPAGE                       */
/* -------------------------------------------------- */

/* 
body.home: The front page background image. 
(WordPress typically adds 'home' if you're using Posts as Front Page, 
or 'front-page' if set as a static Page—verify your actual body classes!)
*/
body.home {
  background: url('images/background.jpg') center center/cover no-repeat fixed;
}

/* --- HERO SECTION --- */
.hero {
  position: relative;
  height: 1024px; /* adjust as needed */
  background: url('images/background.jpg') center center/cover no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*
By default, .hero::before is opacity: 0.
We add 'hero-on' to body AFTER DOM load => transitions to 0.7 over 3s.
*/
.hero::before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 1;
  opacity: 0;
  transition: opacity 3s ease; /* 3s fade-in for homepage overlay */
}
body.home.hero-on .hero::before {
  opacity: 0.7;
}

/* The hero content also starts at opacity:0,
   then transitions to 1 with a 1s fade after a 2s delay => total 3s. */
.hero-content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease 2s;
}
body.home.hero-on .hero-content {
  opacity: 1;
}

/* If the user leaves the homepage, we add .fade-out to .hero 
   => transitions from opacity:1 to 0 in 1s. */
.hero.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}

/* Hero button styling */
.hero-content .book-now {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  border: 2px solid white;
  background: transparent;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
}
.hero-content .book-now:hover {
  background: black;
}

/* -------------------------------------------------- */
/*                  INNER PAGES                      */
/* -------------------------------------------------- */

/*
body:not(.home): another background image if you want
and an overlay that fades from 0 -> 0.7 in 1s.
*/
body:not(.home) {
  background: url('images/background.jpg') center center/cover no-repeat fixed;
}
/* 
 By default, it's opacity: 0; 
 we add .overlay-on => transitions it to 0.7 over 1s.
*/
body:not(.home)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
}
body.overlay-on:not(.home)::before {
  opacity: 0.7;
}

/*
Inner page main wrapper: starts at 0,
 we add .page-active => transitions it to 1 in 1s.
*/
.page-wrapper {
  margin-top: 210px;  /* header (~140px) + 70px gap, adjust as needed */
  margin-bottom: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease;
}
body.page-active .page-wrapper {
  opacity: 1;
}

/* If user leaves an inner page, we add .fade-out => transitions from 1 -> 0 */
.page-wrapper.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}
/* Also fade out the overlay for inner pages when leaving */
body.overlay-fade-out::before {
  opacity: 0;
  transition: opacity 1s ease;
}

/* The typical content container on inner pages */
.page-container {
  width: 80%;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px 40px;
  border-radius: 10px;
}
.page-container h1,
.page-container h2,
.page-container h3,
.page-container h4,
.page-container h5,
.page-container h6 {
  margin-top: 1em;
}
.page-container p {
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 1.6;
}
.page-container ul {
  margin-left: 1.5em;
  padding-left: 1em;
}
.page-container li {
  margin-bottom: 0.5em;
}

/* -------------------------------------------------- */
/*                    HEADER                          */
/* -------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  z-index: 1000;
}

/* HOMEPAGE SLIDE-IN for .logo and .nav-menu:
   They start off-screen + invisible,
   then when .hero-on is applied, we slide them into place.
*/
body.home .logo {
  transform: translateX(-100%);
  opacity: 0;
  /* 1s for the animation, plus 1s delay => total 2s offset */
  transition: transform 1s ease 1s, opacity 1s ease 1s;
}
body.home.hero-on .logo {
  transform: translateX(0);
  opacity: 1;
}

body.home .nav-menu {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 1s ease 1s, opacity 1s ease 1s;
}
body.home.hero-on .nav-menu {
  transform: translateX(0);
  opacity: 1;
}

/* Logo sizing */
.logo img {
  max-height: 100px !important;
  width: auto;
  height: auto;
}

/* Nav menu styling */
.nav-menu {
  display: flex;
}
.nav-menu ul {
  display: flex;
  list-style: none;
}
.nav-menu li {
  margin-left: 20px;
}
.nav-menu a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  transition: color 0.3s ease;
}
.nav-menu a:hover {
  color: #ccc;
}

/* Mobile toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.menu-toggle .bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
  transition: 0.4s;
}

/* SLIDE-OUT KEYFRAMES for going BACK to homepage from an inner page */
@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
.header-slide-out .logo {
  animation: slideOutLeft 1s ease forwards;
}
.header-slide-out .nav-menu {
  animation: slideOutRight 1s ease forwards;
}

/* -------------------------------------------------- */
/*                    FOOTER                          */
/* -------------------------------------------------- */
footer {
  text-align: center;
  padding: 10px;
  background: #000;
  color: #888;
}

/* -------------------------------------------------- */
/*                RESPONSIVE EXAMPLE                  */
/* -------------------------------------------------- */
@media (max-width: 768px) {
  .menu-toggle { 
    display: flex; 
  }
  .nav-menu {
    position: absolute;
    top: 70px;
    right: 0;
    background: #111;
    width: 200px;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    transition: height 0.3s ease;
  }
  .nav-menu ul {
    flex-direction: column;
    padding: 10px 0;
  }
  .nav-menu li {
    margin: 10px 0;
    text-align: center;
  }
  .nav-menu.active {
    height: auto;
  }
}