/*
 Theme Name:   Divi Child — Lost Otter Ranch
 Theme URI:    https://lostotterranch.com
 Description:  Child theme for Lost Otter Ranch. All custom CSS lives here.
 Author:       TreeLine Productions
 Author URI:   https://treelinepro.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  divi-child-lor
*/

/* =============================================
   LOST OTTER RANCH — GLOBAL STYLES
   ============================================= */

/* ─── Global Palette Variables ───────────────── */
:root {
  --dark:         #16130D;
  --dark-2:       #211E15;
  --dark-3:       #2C2820;
  --gold:         #B8945A;
  --gold-light:   #D4BC8C;
  --gold-pale:    #EFE5CE;
  --sage:         #4A5C42;
  --sage-light:   #7A9470;
  --cream:        #F4EFE5;
  --cream-2:      #EAE3D5;
  --teal:         #284858;
  --text-on-dark: #D8D0C0;
  --text-muted:   #8A8070;
  --radius:       4px;
  --transition:   0.35s ease;
}

/* ─── Base ───────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--dark);
  color: var(--dark);
  overflow-x: hidden;
  padding-top: 0 !important;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* Remove Divi default white background */
#page-container,
.et_pb_section,
#main-content { background: transparent; }

/* ─── Typography helpers ─────────────────────── */
.lor-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
}

/* ============================================================
   BUTTONS
   All four button styles have border explicitly set to "none"
   (or a fixed width, for the ghost button) in BOTH the base and
   hover states. Divi's default button module adds its own 2px
   border automatically — without this, hovering removes that
   border and the button's box shrinks by 2px, which reflows the
   layout and shifts nearby content. Keeping border consistent in
   both states means there's nothing to add or remove, so nothing
   shifts. All !important flags exist because Divi's own default
   hover rules (background-color, padding, border) were winning
   over these classes and had to be explicitly beaten.
============================================================ */

/* Primary gold CTA button (e.g. "Request Access", "Book a Hunt") */
.lor-btn-primary {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--dark) !important;
  padding: 1rem 2.25rem;
  border-radius: var(--radius);
  border: none !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}
.lor-btn-primary:hover {
  background: var(--gold-light) !important;
  color: var(--dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(184,148,90,0.35);
  padding: 1rem 2.25rem !important;
  border: none !important;
}

/* Outlined "ghost" button (e.g. "Explore the Experience") */
.lor-btn-ghost {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff !important;
  padding: 1rem 2.25rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.35) !important;
  transition: border-color var(--transition), background var(--transition);
  margin-bottom: 0.5rem;
}
.lor-btn-ghost:hover {
  border: 1px solid rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  padding: 1rem 2.25rem !important;
}

/* Full-width button used in the availability/date-booking card */
.lor-btn-full {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--dark) !important;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: none !important;
  transition: background var(--transition);
}
.lor-btn-full:hover {
  background: var(--gold-light) !important;
  color: var(--dark) !important;
  padding: 0.9rem 1rem !important;
  border: none !important;
}

/* Dark button used on the cream-background CTA section */
.lor-btn-dark {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--dark);
  color: #fff !important;
  padding: 1rem 2.25rem;
  border-radius: var(--radius);
  border: none !important;
  transition: background var(--transition), transform var(--transition);
}
.lor-btn-dark:hover {
  background: var(--dark-3) !important;
  color: #fff !important;
  transform: translateY(-2px);
  padding: 1rem 2.25rem !important;
  border: none !important;
}

/* Native Divi button modules: remove default icon-hover animation */
.lor-btn-primary::after,
.lor-btn-ghost::after,
.lor-btn-full::after,
.lor-btn-dark::after {
  display: none !important;
}

/* Native Divi button modules render each button in its own block-level
   wrapper div. inline-block puts multiple buttons in the same column
   side by side instead of stacked. */
.et_pb_button_module_wrapper:has(.lor-btn-primary),
.et_pb_button_module_wrapper:has(.lor-btn-ghost),
.et_pb_button_module_wrapper:has(.lor-btn-dark) {
  display: inline-block !important;
  vertical-align: top;
}

/* The column is a flex container with flex-direction:column by default,
   so inline-block alone doesn't put buttons side by side. Force this
   specific column to wrap as a row, and make everything except the
   button wrappers take a full line so text stays stacked above. */
.et_pb_column:has(> .et_pb_button_module_wrapper .lor-btn-primary) {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.et_pb_column:has(> .et_pb_button_module_wrapper .lor-btn-primary) > *:not(.et_pb_button_module_wrapper) {
  flex-basis: 100% !important;
}

/* ─── Header ─────────────────────────────────── */
.lor-header-section {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: transparent !important;
  border-bottom: none !important;
  transition: background var(--transition), backdrop-filter var(--transition);
}

.et-l--header > .et_builder_inner_content .et_pb_section.lor-header-section.scrolled {
  background: rgba(22, 19, 13, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: background var(--transition), backdrop-filter var(--transition) !important;
}

.lor-header-section > .et_pb_row {
  padding: 0 !important;
  margin: 0 !important;
}

.lor-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 1.5rem 3rem !important;
  transition: padding var(--transition);
  min-height: 78px;
  transition: min-height var(--transition);
}

.et_pb_column_0_tb_header,
.et_pb_column_1_tb_header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.lor-header-section.scrolled .lor-header-row {
  min-height: 60px;
}

.lor-main-nav .et_pb_menu__menu ul > li > a {
  padding-bottom: 0 !important;
}

.lor-main-nav.et_pb_menu,
.lor-main-nav .et_pb_menu__wrap,
.lor-main-nav .et_pb_menu__menu {
  background: transparent !important;
}

.lor-nav-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none !important;
}

.lor-nav-logo-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.08em;
  line-height: 1;
  display: block;
}

.lor-nav-logo-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  display: block;
}

.lor-main-nav .et_pb_menu__wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.lor-main-nav .et_pb_menu__menu > ul {
  display: flex !important;
  align-items: center !important;
  gap: 2.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lor-main-nav .et_pb_menu__menu ul > li > a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.lor-main-nav .et_pb_menu__menu ul > li {
  display: flex !important;
  align-items: center !important;
}

.lor-main-nav .et_pb_menu__menu ul > li > a:hover {
  color: var(--gold) !important;
}

.lor-main-nav .et_pb_menu__menu ul > li:last-child > a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  background: var(--gold) !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: var(--radius) !important;
  transition: background var(--transition), transform var(--transition) !important;
}

.lor-main-nav .et_pb_menu__menu ul > li:last-child > a:hover {
  background: var(--gold-light) !important;
  color: var(--dark) !important;
  transform: translateY(-1px) !important;
}

/* ─── Hero ───────────────────────────────────── */
.lor-hero-section {
  position: relative;
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0 !important;
}

.lor-hero-section .et_pb_row {
  position: relative;
  z-index: 2;
}

.lor-hero-slogan {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1.25rem;
  display: block;
}

.lor-hero-sub {
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  color: rgba(225,215,198,0.96);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.85;
  display: block;
}

/* ─── Stats Bar ──────────────────────────────── */
.lor-stats-bar {
  background: var(--dark-2) !important;
  border-top: 1px solid rgba(184,148,90,0.12);
  border-bottom: 1px solid rgba(184,148,90,0.12);
  padding: 2rem 0 !important;
}

.lor-stats-grid {
  display: flex !important;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 980px) {
  .lor-stats-grid { flex-wrap: wrap; }
  .lor-stat-item { min-width: 45%; }
}

.lor-stat-item {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: 1rem 1.5rem;
  border-right: 1px solid rgba(184,148,90,0.12);
}

.lor-stat-item:last-child { border-right: none; }

.lor-stat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  color: var(--gold);
  opacity: 0.8;
}

.lor-stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 1000;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  display: block;
}

.lor-stat-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

/* ─── Ranch / About section ──────────────────── */
.lor-ranch-section {
  position: relative;
}

.lor-ranch-section .et_pb_row {
  max-width: 100% !important;
}

/* ─── Hunt Cards ─────────────────────────────── */
.lor-hunt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  border-radius: var(--radius);
  overflow: hidden;
}

.lor-hunt-card {
  position: relative;
  overflow: hidden;
  cursor: default;
  min-height: 480px;
}

.lor-hunt-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  position: absolute;
  inset: 0;
}

.lor-hunt-card:hover img { transform: scale(1.05); }

.lor-hunt-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(22,19,13,0) 0%, rgba(22,19,13,0.82) 100%);
  transition: background var(--transition);
}

.lor-hunt-card:hover .lor-hunt-card-content {
  background: linear-gradient(180deg, rgba(22,19,13,0) 0%, rgba(22,19,13,0.95) 100%);
}

.lor-hunt-season {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  background: rgba(22,19,13,0.68);
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
}

.lor-hunt-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.lor-hunt-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.lor-species-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lor-species-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(184,148,90,0.15);
  border: 1px solid rgba(184,148,90,0.3);
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
}

/* ─── Availability section ───────────────────── */
/* NOTE: Due to a Divi 5 rendering bug, this section's HTML output
   incorrectly nests ALL subsequent sections (dividers, Corporate,
   Testimonials, Book CTA) inside its own box, even though the raw
   block content is verified well-formed with proper section closures.
   Because of that nesting, this section's own bottom padding was
   rendering at the very END of the page (after all nested content)
   instead of right after Availability's own visible content —
   producing an unexplained dark gap before the footer. Removing the
   bottom padding here eliminates that visible gap. The top padding
   is untouched since it renders correctly in the right place. */
.lor-availability-section,
.et_pb_section_5 {
  position: relative;
  padding: 8rem 0 0 !important;
}

.lor-avail-dates {
  background: rgba(22,19,13,0.6);
  border: 1px solid rgba(184,148,90,0.2);
  border-radius: 4px;
  overflow: hidden;
}

.lor-avail-dates-header {
  background: rgba(184,148,90,0.12);
  border-bottom: 1px solid rgba(184,148,90,0.2);
  padding: 1.25rem 1.75rem;
}

.lor-avail-dates-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #fff;
  font-weight: 500;
  margin: 0;
}

.lor-date-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition);
}

.lor-date-row:last-child { border-bottom: none; }
.lor-date-row:hover { background: rgba(184,148,90,0.05); }

.lor-date-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 6px;
}
.lor-date-dot.limited { background: #C4785A; }

.lor-date-period {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.lor-date-hunt-type {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.lor-date-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.lor-date-slots { margin-left: auto; text-align: right; flex-shrink: 0; }

.lor-slots-count {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 0.2rem;
  display: block;
}

.lor-slots-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.lor-avail-cta {
  padding: 1.25rem 1.75rem;
  border-top: 1px solid rgba(184,148,90,0.2);
  background: rgba(184,148,90,0.08);
}

/* ─── Corporate section ──────────────────────── */
.lor-corporate-photo {
  border: 4px solid rgba(184,148,90,0.85);
  box-shadow: 0 0 0 8px rgba(184,148,90,0.13), 0 24px 80px rgba(0,0,0,0.7);
  border-radius: 8px;
  overflow: hidden;
}

.lor-corporate-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.lor-gold-photo-frame {
  border: 4px solid rgba(184,148,90,0.85);
  box-shadow: 0 0 0 8px rgba(184,148,90,0.13), 0 16px 60px rgba(0,0,0,0.7);
  border-radius: 8px;
  overflow: hidden;
}

/* ─── Testimonials ───────────────────────────── */
.lor-testimonial-card {
  padding: 2.25rem;
  border: 1px solid rgba(184,148,90,0.22);
  border-radius: var(--radius);
  background: rgba(22,19,13,0.72);
}

.lor-testimonial-stars {
  color: var(--gold);
  margin-bottom: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
}

.lor-testimonial-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--text-on-dark);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.lor-testimonial-author {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.lor-testimonial-location {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ─── Owner blockquote ───────────────────────── */
.lor-owner-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--gold-light);
  margin: 0 0 1.25rem;
}

.lor-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  line-height: 0.5;
  color: rgba(184,148,90,0.35);
  margin-bottom: 0.75rem;
  display: block;
}

.lor-quote-attr {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(234,227,213,0.6);
}

/* ─── Differentiator panel ───────────────────── */
.lor-difference-panel {
  padding: 2.5rem 3rem;
  background: rgba(8,6,3,0.45);
  border-left: 1px solid rgba(184,148,90,0.13);
  border-right: 1px solid rgba(184,148,90,0.13);
}

.lor-diff-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
  margin-bottom: 1.75rem;
  display: block;
}

.lor-diff-item { margin-bottom: 1.5rem; }

.lor-diff-item-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.35rem;
  display: block;
}

.lor-diff-item-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.58);
  margin: 0;
}

/* ─── Photo mosaic ───────────────────────────── */
.lor-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.lor-mosaic-item { overflow: hidden; }
.lor-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.lor-mosaic-item:hover img { transform: scale(1.04); }

.lor-m1 { grid-column: 1 / 6; height: 340px; }
.lor-m2 { grid-column: 6 / 9; height: 340px; }
.lor-m3 { grid-column: 9 / 13; height: 340px; }
.lor-m4 { grid-column: 1 / 4; height: 280px; }
.lor-m5 { grid-column: 4 / 8; height: 280px; }
.lor-m6 { grid-column: 8 / 13; height: 280px; }

/* (scroll reveal removed — replaced with native Divi per-module animation) */

/* ─── Vertical section tags ──────────────────── */
.lor-section-tag {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(184,148,90,0.45);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

@media (max-width: 1100px) { .lor-section-tag { display: none; } }

/* ─── Mobile ─────────────────────────────────── */
@media (max-width: 980px) {
  .lor-header-row { padding: 0 1.5rem !important; }

  .lor-main-nav .et_mobile_menu {
    background: rgba(22,19,13,0.97) !important;
    border-top: 1px solid rgba(184,148,90,0.2) !important;
  }

  .lor-main-nav .et_mobile_menu li a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.75) !important;
    border-bottom: 1px solid rgba(184,148,90,0.12) !important;
    padding: 1rem 1.5rem !important;
  }

  .lor-main-nav .et_pb_menu__hamburger span { background-color: #fff !important; }

  .lor-hunt-cards { grid-template-columns: 1fr; }
  .lor-mosaic { grid-template-columns: 1fr 1fr; }
  .lor-m1, .lor-m2, .lor-m3, .lor-m4, .lor-m5, .lor-m6 {
    grid-column: auto;
    height: 250px;
  }
}

/* ─── Background image overlay system ───────────
   In CSS/Divi, background-color renders BEHIND the
   background-image — it cannot darken an image.
   These ::before pseudo-elements create a dark
   layer ON TOP of each section's background image.
   Sections are targeted by Divi's auto-generated
   numbered class (et_pb_section_N) since those are
   stable for the homepage section order.
   Adjust the rgba alpha value to lighten/darken.
   ─────────────────────────────────────────────── */

/* Base rule — all overlay-bearing sections need position:relative */
.lor-hero-section,
.lor-ranch-section,
.et_pb_section_3,
.et_pb_section_4,
.et_pb_section_5,
.et_pb_section_6,
.et_pb_section_7,
.et_pb_section_8 {
  position: relative;
}

/* Hero rows need explicit z-index above the gradient overlay */
.lor-hero-section .et_pb_row { z-index: 2; }

/* ─── Otter Track Dividers ───────────────────── */
.tracks-zone {
  position: relative;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  margin-top: -80px;
  margin-bottom: -80px;
}

.tz-wedge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.paw-wrap {
  position: absolute;
  line-height: 0;
  z-index: 3;
}

.paw-print {
  opacity: 0;
  transform-origin: center center;
  color: var(--dark-2);
}

@keyframes pawStep {
  0%   { opacity: 0;    transform: scale(0.12) rotate(var(--rot, 90deg)); }
  45%  { opacity: 0.55; transform: scale(1.1)  rotate(var(--rot, 90deg)); }
  100% { opacity: 0.38; transform: scale(1)    rotate(var(--rot, 90deg)); }
}

.paw-print.visible {
  animation: pawStep 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.geese-band-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  isolation: isolate;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.geese-band-container .geese-bg {
  position: absolute;
  inset: 0;
  background: #8B6830;
}
.geese-band-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  will-change: transform;
}

@media (max-width: 780px) {
  .tracks-zone { height: 180px; margin-top: -40px; margin-bottom: -40px; }
}

/* ─── Hero Geese Video ───────────────────── */
/* Divi wraps the Code module in .et_pb_code / .et_pb_code_inner, both
   with position:relative by default. That hijacks the containing block
   for our absolutely-positioned video, confining it to the narrow text
   column instead of spanning the full hero width. Force these specific
   wrappers back to static so positioning resolves against the section. */
.lor-hero-section .et_pb_code,
.lor-hero-section .et_pb_code_inner {
  position: static !important;
}

/* Both the row AND column wrapping the hero video have their own
   position:relative + z-index (row from our own CSS, column from Divi's
   default column styling). Each of those independently creates a new
   stacking context, and mix-blend-mode can only blend against content
   within the SAME stacking context — so it was blending against nothing
   twice over. Resetting both lets the blend reach all the way down to
   the section's actual background image. */
.lor-hero-section .et_pb_row:has(#hero-geese),
.lor-hero-section .et_pb_column:has(#hero-geese) {
  position: static !important;
  z-index: auto !important;
}

.hero-geese {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36vh;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 1.2s ease;
  z-index: 1;
}

.hero-geese.ended {
  opacity: 0;
}

.hero-geese video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ============================================================
   HERO BUTTON ROW (rebuilt by user as its own 2-column row)
   Each column is set to a fixed 50% width by Divi's column
   structure, so the two buttons sit at opposite ends of the
   full row width instead of grouping together in the center.
   Forcing both columns to shrink-to-fit their button content
   lets the row's existing justify-content:center actually
   group them together, matching the mockup's flex + gap layout.
============================================================ */
.lor-hero-section .et_pb_row:has(.lor-btn-primary) {
  flex-wrap: nowrap !important;
}
.lor-hero-section .et_pb_row:has(.lor-btn-primary) > .et_pb_column {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* ============================================================
   FINAL CTA BUTTON (Book a Hunt / Request Your Hunt)
   This button's wrapper is display:inline-block (from the
   earlier button-layout fix), so it aligns based on its
   parent column's text-align, which defaults to left. Center
   the column's text so the inline-block button wrapper centers
   with it.
============================================================ */
.et_pb_column:has(.lor-btn-dark) {
  text-align: center;
}


/* ============================================================
   HUNTING CARDS: media module fills the card, content pinned
   to bottom with its own gradient
============================================================ */

/* The text module now carries the background image + gradient
   (moved from the column). Make it fill the card completely so
   it behaves like the old column-level background did. */
.lor-hunt-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Divi wraps module content in .et_pb_text_inner, which is
   position:relative with height:0 by default. That makes IT the
   containing block for our absolutely-positioned bottom-aligned
   content (instead of the properly-sized module above it), so
   "bottom:0" was resolving against a zero-height box and pinning
   content to the top instead of the bottom. Give it real height. */
.lor-hunt-card-media .et_pb_text_inner {
  height: 100%;
}

/* Vertical gap between the two rows of hunt cards. Targets only
   the row that's immediately followed by another hunt-card row
   (i.e. row 1), so row 2 is unaffected. */
.et_pb_row:has(.lor-hunt-card):has(+ .et_pb_row .lor-hunt-card) {
  margin-bottom: 2rem;
}


/* ============================================================
   MOBILE RESPONSIVE FIXES
============================================================ */

/* Hero buttons: the desktop fix that groups/centers them side by
   side (flex-wrap:nowrap, auto width) has no mobile exception,
   so at narrow widths they overflow instead of stacking. Below
   767px, let them stack vertically full-width like every other
   button group on the site already does. */
@media (max-width: 767px) {
  .lor-hero-section .et_pb_row:has(.lor-btn-primary) {
    flex-wrap: wrap !important;
  }
  .lor-hero-section .et_pb_row:has(.lor-btn-primary) > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .lor-hero-section .et_pb_column:has(> .et_pb_button_module_wrapper .lor-btn-primary) {
    justify-content: center !important;
  }
  .et_pb_button_module_wrapper:has(.lor-btn-primary),
  .et_pb_button_module_wrapper:has(.lor-btn-ghost) {
    display: block !important;
    width: 100%;
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
    /* vertical gap between stacked buttons is now handled natively
       via each button module's own Phone-breakpoint Spacing setting
       in the Divi builder, not here */
  }
  .lor-btn-primary, .lor-btn-ghost {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
}


/* ============================================================
   HERO CONTENT ROW CENTERING
   Divi's Sizing panel lets you set a max-width for a row, and
   its own schema includes a matching "alignment" field meant to
   center it (module.decoration.sizing.{bp}.value.alignment:
   "center") -- set correctly here, confirmed saved, cache
   cleared -- but Divi 5 (beta) isn't emitting the margin:auto
   this should produce. Supplying just that one missing
   declaration so the row centers as intended; if a future Divi
   update fixes this natively, this rule becomes a harmless no-op.
============================================================ */
.lor-hero-section .et_pb_row:has(h1) {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   HERO H1: discrete breakpoint sizes instead of continuous
   clamp()/vw fluid scaling. Fluid sizing meant the heading's
   rendered width changed continuously as the viewport narrowed,
   which (combined with the row-centering gap above) made the
   drift look proportional to text size. Stepped sizes stay
   constant within each breakpoint, matching how the rest of the
   site already behaves.
============================================================ */
.lor-hero-h1 {
  font-size: 96px;
  /* The original inline style bundled color:#fff together with the
     clamp() font-size we removed — stripping that attribute
     inadvertently removed the color too, leaving the browser
     default dark grey. Restoring it explicitly here. */
  color: #fff;
}
@media (max-width: 1400px) {
  .lor-hero-h1 { font-size: 80px; }
}
@media (max-width: 1100px) {
  .lor-hero-h1 { font-size: 64px; }
}
@media (max-width: 767px) {
  .lor-hero-h1 { font-size: 48px; }
}


/* ============================================================
   HERO BUTTON ROW CENTERING
   This row never had an explicit width:100% set (only its two
   columns did, from the earlier fix that groups the buttons
   together). Without a width on the row itself, it shrinks to
   fit its content and left-aligns within its parent — dragging
   the visual position of the whole hero left regardless of what
   it's nested inside (confirmed via direct testing: duplicating
   this row into a fresh container reproduces the same drift).
   Same native-attribute gap as the content row above; same CSS
   fallback.
============================================================ */
.lor-hero-section .et_pb_row:has(.lor-btn-primary) {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   RANCH TEXT & PHOTO ROW: mobile stacking
   These two columns use Divi's legacy float-based column layout
   (float:left, display:block) rather than flexbox. With no
   explicit width rule matching their exact classes, they default
   to shrink-wrapping their own content instead of filling the
   row — leaving the text narrow and indented, and the photo
   tiny, instead of each stacking to full width on mobile.
============================================================ */
@media (max-width: 980px) {
  .lor-ranch-text-col,
  .lor-ranch-photo-col {
    width: 100% !important;
    float: none !important;
  }
  .lor-ranch-photo-col {
    text-align: center;
  }
  .lor-ranch-photo-col img {
    margin: 0 auto;
  }
}


/* ─── Experience section closer quote (restored) ──────────── */
.lor-experience-closer {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1.3;
  color: var(--gold-light);
  margin: 0;
}
@media (max-width: 980px) {
  .lor-experience-closer {
    font-size: 1.75rem;
  }
}


/* ============================================================
   HUNT CARD TEXT VISIBILITY IN DIVI BUILDER
   The hunt card text renders correctly on the live site (opacity:1,
   correctly stacked above its own background). In the Visual
   Builder specifically, Divi's own builder-mode stylesheet loads
   alongside ours and can win a specificity fight against the
   nested absolutely-positioned content div, making the text
   invisible in edit mode even though the image (the module's own
   background) still shows. Forcing it visible specifically within
   the builder's own selectors.
============================================================ */
/* Divi's Visual Builder wraps every module's content in an extra,
   unnamed div (for its own click-to-edit handling) that doesn't
   exist on the live site. That wrapper is position:relative with
   height:0, making IT the containing block for our absolutely-
   positioned content -- one layer deeper than the et_pb_text_inner
   fix above, and only present in the builder. Removing its
   positioning context lets the browser fall through to
   et_pb_text_inner (correctly sized) as the real containing block. */
.et-fb .lor-hunt-card-media .et_pb_text_inner > div:not(.lor-hunt-card-content) {
  position: static !important;
}


/* ============================================================
   EXPERIENCE PHOTO MOSAIC: grid-template-columns override
   Divi 5's native "custom" grid-column-widths mode (raw
   grid-template-columns track lists) doesn't render correctly in
   this beta -- confirmed via two different valid CSS syntaxes,
   both saved correctly to the database but rendered identically
   broken (first columns collapsing to 0px). Per-item placement
   (grid-column-start/end, grid-row-start) IS applied correctly
   natively; only this one container-level property needs a
   direct override. Everything else (image content, cropping,
   swappability) stays native.
============================================================ */
.lor-mosaic-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
}
@media (max-width: 980px) {
  .lor-mosaic-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .lor-mosaic-grid .et_pb_image {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
@media (max-width: 767px) {
  .lor-mosaic-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Browsers give <img width height> HTML attributes an implicit
   aspect-ratio, which overrides height:100% even when explicitly
   set via Divi's native image sizing. Needs !important specificity
   to override -- a genuine browser default, not a Divi setting gap. */
.lor-mosaic-grid img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}


/* ============================================================
   ABOUT PAGE
============================================================ */

.lor-about-hero {
  position: relative;
}
.lor-about-h1 {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  line-height: 1.15;
  color: #fff;
  margin: 0.75rem 0 0;
}
@media (max-width: 767px) {
  .lor-about-h1 { font-size: 2.5rem; }
}

.lor-about-coord-section,
.lor-about-experience-section {
  position: relative;
}

/* Bio / photo columns */
.lor-about-photo-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lor-otter-portrait,
.lor-bio-portrait {
  border-radius: 4px;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.lor-bio-name {
  margin-bottom: 0.25rem;
}
.lor-bio-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

@media (max-width: 980px) {
  .lor-about-photo-col { order: -1; margin-bottom: 1.5rem; }
}


/* ---- About page: readability + title fixes ---- */

/* Dark-background About sections need light text by default;
   specific elements (labels, quotes, titles) already set their
   own explicit color and are unaffected here. */
.lor-about-hero p, .lor-about-hero li,
.lor-ranch-section p, .lor-ranch-section li,
.lor-about-texture-section p, .lor-about-texture-section li,
.lor-about-coord-section p, .lor-about-coord-section li,
.lor-about-experience-section p, .lor-about-experience-section li,
.lor-packages-hero p, .lor-packages-hero li,
.lor-about-hero h1, .lor-about-hero h2, .lor-about-hero h3,
.lor-ranch-section h2, .lor-ranch-section h3,
.lor-about-texture-section h2, .lor-about-texture-section h3,
.lor-about-coord-section h2, .lor-about-coord-section h3,
.lor-about-experience-section h2, .lor-about-experience-section h3,
.lor-packages-hero h2, .lor-packages-hero h3 {
  color: var(--text-on-dark);
}
.lor-about-hero .lor-owner-quote,
.lor-ranch-section .lor-owner-quote,
.lor-about-texture-section .lor-owner-quote,
.lor-about-experience-section .lor-experience-closer {
  color: var(--gold-light);
}

/* Redundant default page title -- the page already has its own
   custom heading inside the hero section. */
.et_pb_title_container,
.entry-title {
  display: none !important;
}


/* ---- About: The Experience, stylized treatment ---- */
.lor-experience-line {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--text-on-dark);
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}
.lor-experience-closer-lg {
  font-size: 3.75rem !important;
  line-height: 1.2 !important;
  margin-top: 2.5rem !important;
}
@media (max-width: 767px) {
  .lor-experience-line {
    font-size: 1.15rem;
  }
  .lor-experience-closer-lg {
    font-size: 2.25rem !important;
  }
}


/* ---- Packages: What's Included, bold checkmark-feature layout ---- */
.lor-feature-panel {
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(212, 188, 140, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}
.lor-feature-panel-accent {
  border-color: rgba(212, 188, 140, 0.5);
  background: rgba(184, 148, 90, 0.1);
}
.lor-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 1rem 0;
}
.lor-feature-check {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gold);
  color: #16130D;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}
.lor-feature-lead {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-on-dark);
}
.lor-feature-detail {
  font-size: 0.95rem;
  color: var(--text-muted);
}
@media (max-width: 767px) {
  .lor-feature-panel { padding: 1.25rem; }
  .lor-feature-lead { font-size: 1rem; }
}