/* =========================================================
   Krystene Zehnder — To Live Is To Fly
   Custom styles layered on Bootstrap 5.3.8 + AOS
   ========================================================= */

/* ---------------------------------------------------------
   CSS Variables (brand palette from nicepage.css)
   --------------------------------------------------------- */
:root {
  --primary:        #e54861;
  --primary-dark1:  #aa515f;
  --primary-dark2:  #6e464d;
  --primary-light2: #f5b2bc;
  --primary-light3: #fcebee;
  --body-color:     #111111;
  --font-heading:   'Roboto', sans-serif;
  --font-body:      'Open Sans', sans-serif;
  --font-brand:     'Bruno Ace', sans-serif;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
body {
  font-family: var(--font-body);
  color: var(--body-color);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

a {
  color: var(--primary);
}
a:hover {
  color: #e12e4a;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn-brand {
  background-color: var(--primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 10px 24px;
  transition: background-color 0.2s ease;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--primary-dark1);
  color: #ffffff;
}
.btn-brand:active {
  background-color: var(--primary-dark1);
  color: #ffffff;
}

/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */
.site-navbar {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.8));
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-height: 56px;
  z-index: 1030;
}

.navbar-brand-text {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--primary);
  font-size: 1rem;
  text-decoration: none;
}
.navbar-brand-text:hover {
  color: var(--primary-dark1);
}

.nav-link-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary) !important;
  padding: 10px 20px !important;
  font-size: 1rem;
}
.nav-link-brand:hover,
.nav-link-brand:focus {
  color: var(--primary-dark1) !important;
}

/* Hamburger icon color */
.navbar-toggler {
  border-color: var(--primary);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23e54861' d='M0 1h16v2H0zm0 6h16v2H0zm0 6h16v2H0z'/%3e%3c/svg%3e");
}

/* Offcanvas (mobile nav) */
.offcanvas-nav {
  background-color: rgba(0,0,0,0.95);
}
.offcanvas-nav .offcanvas-title {
  font-family: var(--font-brand);
  color: #ffffff;
  letter-spacing: 3px;
  font-size: 1rem;
}
.offcanvas-nav .btn-close {
  filter: invert(1);
}
.offcanvas-nav .nav-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  text-align: center;
  padding: 12px 20px;
  letter-spacing: 1px;
}
.offcanvas-nav .nav-link:hover {
  color: var(--primary-light2);
}

/* ---------------------------------------------------------
   Section 1 — Hero
   --------------------------------------------------------- */
#home {
  background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('../images/home-hero.jpg') center center / cover no-repeat;
  min-height: 800px;
  display: flex;
  align-items: center;
}

#home .hero-content {
  padding: 60px 0;
}

#home h1 {
  color: #ffffff;
  font-weight: 700;
  font-size: 2.25rem;
}

#home .hero-subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin-top: 20px;
  margin-bottom: 0;
  max-width: 680px;
}

#home .btn-brand {
  margin-top: 20px;
}

@media (max-width: 1199px) {
  #home { min-height: 700px; }
}
@media (max-width: 991px) {
  #home { min-height: 600px; }
  #home .hero-subtitle { max-width: 100%; }
}
@media (max-width: 767px) {
  #home { min-height: 450px; }
  #home h1 { font-size: 1.75rem; }
}

/* ---------------------------------------------------------
   Section 2 — About
   --------------------------------------------------------- */
#about {
  background-color: #ffffff;
  padding: 60px 0;
}

.about-bio-col {
  padding: 30px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-bio-col h2 {
  color: var(--primary);
  font-weight: 700;
  margin-top: 20px;
}

.about-bio-col p {
  margin-top: 20px;
}

.about-bio-col .btn-brand {
  margin-top: 20px;
  align-self: flex-start;
  text-transform: none;
  letter-spacing: 0;
}

.about-photo-col {
  background-image: url('../images/about-krystene-1.jpg');
  background-position: center center;
  background-size: cover;
  min-height: 409px;
}

/* About gallery */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 273px;
  margin-top: 25px;
}

@media (max-width: 1199px) {
  .about-gallery { height: 225px; }
  .about-bio-col { padding: 30px 40px; }
  .about-photo-col { min-height: 337px; }
}
@media (max-width: 991px) {
  .about-gallery {
    grid-template-columns: repeat(2, 1fr);
    height: 517px;
    margin-top: 25px;
  }
  .about-bio-col { padding: 30px; }
  .about-photo-col { min-height: 258px; }
}
@media (max-width: 767px) {
  .about-gallery {
    grid-template-columns: 1fr;
    height: auto;
  }
  .about-gallery .gallery-item { height: 387px; }
  .about-bio-col { padding: 30px 15px; }
  .about-photo-col { min-height: 581px; }
}
@media (max-width: 575px) {
  .about-photo-col { min-height: 366px; }
}

/* ---------------------------------------------------------
   Gallery items (shared — About & Training)
   --------------------------------------------------------- */
.gallery-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.gallery-item:hover img {
  transform: scale(1.1);
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
  padding: 20px;
}

/* ---------------------------------------------------------
   Section 3 — Flight Training
   --------------------------------------------------------- */
#flight-training {
  background-color: var(--primary-light3);
  padding: 60px 0;
}

#flight-training h2 {
  color: var(--primary);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}

#flight-training .training-text {
  margin-top: 30px;
  text-align: left;
}

/* Training gallery */
.training-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 556px;
  margin-top: 34px;
}

.training-gallery-wrap {
  margin-top: 51px;
  text-align: center;
}

@media (max-width: 1199px) {
  .training-gallery { height: 458px; }
}
@media (max-width: 991px) {
  .training-gallery {
    grid-template-columns: repeat(2, 1fr);
    height: 789px;
  }
}
@media (max-width: 767px) {
  .training-gallery {
    grid-template-columns: 1fr;
    height: auto;
  }
  .training-gallery .gallery-item { height: 394px; }
}
@media (max-width: 575px) {
  .training-gallery .gallery-item { height: 248px; }
}

/* ---------------------------------------------------------
   Section 4 — Contact
   --------------------------------------------------------- */
#contact {
  background-image: url('../images/contact-form-bg.jpg');
  background-position: 50% 11.23%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 925px;
  display: flex;
  align-items: flex-start;
  padding: 0 0 60px;
}

.contact-box {
  background-color: rgba(255,255,255,0.7);
  width: 800px;
  max-width: 100%;
  margin: 60px auto 0;
  padding: 20px 60px;
}

.contact-box h3 {
  text-align: center;
  margin-top: 4px;
}
.contact-box h3 a {
  color: var(--primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
}
.contact-box h3 a:hover {
  color: var(--primary-dark1);
}

.contact-location {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}

.contact-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--primary);
  font-size: 1.25rem;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--primary);
  padding: 0;
  margin: 20px auto 0;
  width: fit-content;
  background: none;
  transition: color 0.2s, border-color 0.2s;
}
.contact-link:hover {
  color: var(--primary-light2);
  border-bottom-color: var(--primary-light2);
}
.contact-link.contact-email {
  font-weight: 700;
}

/* Contact form */
.contact-form-wrap {
  width: 625px;
  max-width: 100%;
  margin: 20px auto 0;
}

.contact-form-wrap .form-control {
  border-radius: 0;
  border: 1px solid #ced4da;
  font-family: var(--font-body);
}
.contact-form-wrap .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(229,72,97,0.15);
}
.contact-form-wrap label {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--body-color);
}

.form-send-success {
  color: #198754;
  margin-top: 10px;
  display: none;
}
.form-send-error {
  color: #dc3545;
  margin-top: 10px;
  display: none;
}

/* Turnstile container spacing */
#ts-container {
  margin-bottom: 12px;
}

@media (max-width: 1199px) {
  #contact { min-height: 763px; }
}
@media (max-width: 991px) {
  #contact { min-height: 584px; }
  .contact-box { width: 720px; padding: 20px 30px; }
  .contact-form-wrap { width: 100%; }
}
@media (max-width: 767px) {
  #contact { min-height: 438px; }
  .contact-box { width: 540px; padding: 20px 10px; }
}
@media (max-width: 575px) {
  #contact { min-height: 276px; }
  .contact-box { width: 340px; padding: 20px 10px; }
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
  background-color: var(--primary-dark2);
  color: #ffffff;
  padding: 20px 0;
  text-align: center;
}

.site-footer p {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: #ffffff;
}

.site-footer a {
  color: #ffffff;
  text-decoration: underline;
}
.site-footer a:hover {
  color: var(--primary-light2);
}

/* ---------------------------------------------------------
   Gallery Lightbox Modal + Carousel
   --------------------------------------------------------- */
#galleryModal .modal-dialog {
  max-width: 90vw;
  margin: auto;
}
#galleryModal .modal-content {
  background: #000;
  border: none;
  border-radius: 0;
}
#galleryModal .modal-body {
  padding: 0;
}
#galleryModal .carousel-item {
  background: #000;
  text-align: center;
}
#galleryModal .carousel-item img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}
.gallery-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 10;
  filter: invert(1);
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 6px;
}
#galleryModal .carousel-control-prev,
#galleryModal .carousel-control-next {
  width: 10%;
}