/*
Theme Name:  Enrico's Fishing Safaris
Theme URI:   https://www.enricosfishing.co.za/
Author:      Enrico's Fishing Safaris
Description: Custom WordPress theme for Enrico's Fishing Safaris — Plettenberg Bay's premier fishing charter.
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: enricos-fishing
Tags:        fishing, safari, plettenberg-bay, charter
*/

/* =====================================================
   BASE RESET & TYPOGRAPHY
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Open Sans', sans-serif; color: #1c2b1e; background: #fff; }
h1, h2, h3, h4, h5 { font-family: 'Oswald', sans-serif; letter-spacing: .02em; margin: 0; }
p { margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
 
/* =====================================================
   NAVBAR
   ===================================================== */
#navbar { transition: background .3s, box-shadow .3s, padding .3s; }
#navbar.scrolled { background: rgba(255,255,255,.97) !important; box-shadow: 0 2px 30px rgba(0,0,0,.12); padding-top: .6rem !important; padding-bottom: .6rem !important; }
#navbar.scrolled .nav-link { color: #156a25 !important; }
#navbar.scrolled .nav-link:hover { color: #e81010 !important; }
#navbar.scrolled .logo-img { filter: none !important; }

/* =====================================================
   HERO — HOME (full-screen)
   ===================================================== */
.hero-section { position: relative; height: 100vh; min-height: 600px; background: url('https://www.enricosfishing.co.za/wp-content/uploads/2026/03/Screenshot-2026-03-20-at-12.56.35.png') center/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,31,11,.65) 0%, rgba(6,31,11,.5) 50%, rgba(6,31,11,.75) 100%); }

/* =====================================================
   HERO — INNER PAGES
   ===================================================== */
.inner-hero-fishing { position: relative; min-height: 55vh; background: url('https://www.enricosfishing.co.za/wp-content/uploads/2026/03/Screenshot-2026-03-20-at-12.56.35.png') center/cover no-repeat; }
.inner-hero-river   { position: relative; min-height: 60vh; background: url('https://www.enricosfishing.co.za/wp-content/uploads/2026/03/Screenshot-2026-03-20-at-12.56.35.png') center/cover no-repeat; }
.inner-hero-gallery { position: relative; min-height: 50vh; background: url('https://www.enricosfishing.co.za/wp-content/uploads/2026/03/Screenshot-2026-03-20-at-12.56.35.png') center/cover no-repeat; }
.inner-hero-contact { position: relative; min-height: 50vh; background: url('https://www.enricosfishing.co.za/wp-content/uploads/2026/03/Screenshot-2026-03-20-at-12.56.35.png') center 40%/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,31,11,.7) 0%, rgba(6,31,11,.55) 100%); }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-red { background: #e81010; color: #fff; padding: .8rem 2rem; font-family: 'Oswald', sans-serif; font-size: .95rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: none; cursor: pointer; transition: background .2s, transform .2s; display: inline-block; text-decoration: none; border-radius: 4px; }
.btn-red:hover { background: #c30b0b; transform: translateY(-2px); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; padding: .8rem 2rem; font-family: 'Oswald', sans-serif; font-size: .95rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: 2px solid rgba(255,255,255,.8); cursor: pointer; transition: background .2s, color .2s, transform .2s; display: inline-block; text-decoration: none; border-radius: 4px; }
.btn-outline-white:hover { background: #fff; color: #156a25; transform: translateY(-2px); }
.btn-green { background: #1a8a33; color: #fff; padding: .85rem 2rem; font-family: 'Oswald', sans-serif; font-size: .95rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, transform .2s; display: inline-block; text-decoration: none; border-radius: 4px; }
.btn-green:hover { background: #0d6b27; transform: translateY(-2px); color: #fff; }

/* =====================================================
   DIVIDERS
   ===================================================== */
.divider { width: 56px; height: 4px; background: #e81010; margin: 0 auto 0; border-radius: 2px; }
.divider-left { margin-left: 0; }
.river-divider {margin: 0}

/* =====================================================
   SERVICE CARDS (Home)
   ===================================================== */
.service-card { position: relative; overflow: hidden; cursor: pointer; }
.service-card-img { transition: transform .5s ease; }
.service-card:hover .service-card-img { transform: scale(1.07); }
.service-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,31,11,.88) 0%, rgba(6,31,11,.2) 60%, transparent 100%); transition: background .4s; }
.service-card:hover .service-overlay { background: linear-gradient(to top, rgba(6,31,11,.92) 0%, rgba(6,31,11,.45) 60%, rgba(6,31,11,.15) 100%); }
.service-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem; transition: transform .4s; }
.service-card:hover .service-content { transform: translateY(-8px); }

/* =====================================================
   WHY-CHOOSE-US CARDS (Home)
   ===================================================== */
.why-card { background: #fff; border-radius: 10px; padding: 2rem; box-shadow: 0 2px 20px rgba(0,0,0,.06); border-bottom: 3px solid transparent; transition: border-color .3s, transform .3s, box-shadow .3s; }
.why-card:hover { border-bottom-color: #24a33d; transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.1); }

/* =====================================================
   GALLERY (Home preview + Gallery page)
   ===================================================== */
.gallery-item { overflow: hidden; cursor: pointer; position: relative; }
.gallery-item img { transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-overlay { position: absolute; inset: 0; background: rgba(6,31,11,0); display: flex; align-items: center; justify-content: center; transition: background .3s; }
.gallery-item:hover .gallery-overlay { background: rgba(6,31,11,.4); }
.gallery-overlay svg { opacity: 0; transition: opacity .3s; }
.gallery-item:hover .gallery-overlay svg { opacity: 1; }

/* Masonry gallery */
.gallery-grid { columns: 2; column-gap: 10px; }
@media(min-width:640px){ .gallery-grid { columns: 3; } }
@media(min-width:1024px){ .gallery-grid { columns: 4; } }
.gallery-grid .gallery-item { break-inside: avoid; margin-bottom: 10px; border-radius: 10px; }
.gallery-grid .gallery-overlay { border-radius: 10px; }

/* =====================================================
   LIGHTBOX
   ===================================================== */
#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px; }
#lightbox.active { display: flex; }
#lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; }
#lb-close { position: absolute; top: 20px; right: 20px; color: white; cursor: pointer; padding: 8px; background: rgba(255,255,255,.1); border-radius: 50%; transition: background .2s; border: none; display: flex; align-items: center; justify-content: center; }
#lb-close:hover { background: rgba(255,255,255,.2); }
#lb-prev, #lb-next { position: absolute; top: 50%; transform: translateY(-50%); color: white; cursor: pointer; padding: 12px; background: rgba(255,255,255,.1); border-radius: 50%; transition: background .2s; border: none; display: flex; align-items: center; justify-content: center; }
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.2); }
#lb-prev { left: 20px; } #lb-next { right: 20px; }

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-card { background: #fff; border-radius: 14px; padding: 1.75rem; box-shadow: 0 2px 20px rgba(0,0,0,.06); border-bottom: 3px solid #24a33d; transition: transform .3s, box-shadow .3s; }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.1); }
.booking-form input,
.booking-form select,
.booking-form textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 8px; font-family: 'Open Sans', sans-serif; font-size: .9rem; color: #1c2b1e; transition: border-color .2s; outline: none; background: #fff; }
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus { border-color: #24a33d; box-shadow: 0 0 0 3px rgba(36,163,61,.1); }
.booking-form label { font-family: 'Oswald', sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #374151; display: block; margin-bottom: .4rem; }

/* =====================================================
   FISHING PAGE
   ===================================================== */
.trip-section { scroll-margin-top: 80px; }
.img-hover { transition: transform .5s; }
.img-hover:hover { transform: scale(1.03); }
.species-tag { display: inline-block; background: #dcf5e2; color: #156a25; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; font-family: 'Open Sans', sans-serif; }
.trip-nav-link { font-family: 'Oswald', sans-serif; font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .5rem 1rem; border-radius: 6px; color: rgba(255,255,255,.7); transition: background .2s, color .2s; cursor: pointer; text-decoration: none; white-space: nowrap; }
.trip-nav-link:hover, .trip-nav-link.active { background: rgba(255,255,255,.12); color: #fff; }

/* =====================================================
   RIVER PAGE
   ===================================================== */
.feature-card { background: #fff; border-radius: 12px; padding: 1.75rem; box-shadow: 0 2px 20px rgba(0,0,0,.06); border-left: 4px solid #24a33d; transition: transform .3s, box-shadow .3s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.1); }

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
.reveal { opacity: 0; transform: translateY(35px); transition: opacity .65s, transform .65s; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* =====================================================
   SCROLL BOUNCE
   ===================================================== */
.scroll-bounce { animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }

/* =====================================================
   WHATSAPP FLOAT
   ===================================================== */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.6); }

/* =====================================================
   MOBILE MENU
   ===================================================== */
#mobile-menu { display: none; }

/* =====================================================
   MISC UTILITIES
   ===================================================== */
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.notice-green { background: #dcf5e2; border: 1.5px solid #24a33d; border-radius: 8px; padding: 1rem 1.25rem; color: #0a3815; font-size: .9rem; }
.notice-red { background: #fee2e2; border: 1.5px solid #e81010; border-radius: 8px; padding: 1rem 1.25rem; color: #7f1d1d; font-size: .9rem; }



/* Home gallery preview — 4 images only on mobile, equal height */
@media(max-width: 767px) {
  [style*="height:400px"],
  [style*="height: 400px"] {
    height: 195px !important;
  }
  .gallery-item img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .gallery-item:nth-child(5),
  .gallery-item:nth-child(6) {
    display: none !important;
  }
}
@media(max-width: 386px) {
.text-5xl {
    font-size: 2.5rem !important;}
}