/* Import futuristic fonts for Star Trek elements */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap");

:root {
  /* ==========================================
     Core Brand Colors
     ========================================== */
  --horse-poop: #b97730;
  --primary-orange: #b94d30; /* Signature Terracotta Orange */
  --primary-orange-gradient: #f0957c; /* Soft Warm Sunset Orange */
  --accent-color: #d97706; /* Warm Amber Accent */

  /* Orange Color Scale (For Hovers, Badges & Focus States) */
  --primary-orange-hover: #983d25; /* Darker Orange for Button Hovers */
  --primary-orange-light: #fbebe7; /* Ultra-Light Orange Tint for Backgrounds/Badges */
  --primary-orange-border: #e3a393; /* Soft Orange Border */

  /* ==========================================
     Earthy Browns & Warm Neutrals
     ========================================== */
  --earth-brown-dark: #4a2c1d; /* Deep Espresso Brown */
  --earth-brown-medium: #8c532b; /* Saddle Brown */
  --earth-brown-light: #d8c3b1; /* Warm Taupe / Sand */

  /* ==========================================
     Blacks, Charcoals & Dark Neutrals
     ========================================== */
  --dark-black: #121111; /* Deep Off-Black for High Contrast */
  --dark-charcoal: #1a1818; /* Soft Charcoal (Softer than pure #000) */
  --dark-slate: #2b2827; /* Dark Card/Panel Background in Dark Mode */

  /* ==========================================
     Light Mode Backgrounds & Surfaces
     ========================================== */
  --light-bg-main: #fcf9f6; /* Warm Cream / Ivory Background */
  --light-bg-surface: #ffffff; /* Pure White for Cards & Containers */
  --light-bg-alt: #f3ede6; /* Soft Cream Accent Background */

  /* ==========================================
     Text Colors
     ========================================== */
  --text-primary: #1a1818; /* High-Contrast Main Text */
  --text-secondary: #5c524e; /* Muted Body Text / Subtitles */
  --text-light: #8c827d; /* Captions & Placeholders */
  --text-on-dark: #fcf9f6; /* Text on Dark Backgrounds or Primary Buttons */

  /* ==========================================
     Borders, Dividers & UI Elements
     ========================================== */
  --border-light: #e8dec8; /* Warm Subtle Border */
  --border-medium: #cbb89e; /* Defined Border */
  --shadow-color: rgba(26, 24, 24, 0.08); /* Soft Warm Shadow */

  /* ==========================================
     Functional Feedback Colors
     ========================================== */
  --color-success: #2e7d32; /* Natural Green */
  --color-warning: #d97706; /* Matches Accent Amber */
  --color-error: #c62828; /* Warm Red */
}

/* ==========================================
   1. COLOR PALETTE DEFINITIONS
   ========================================== */
:root {
  /* Brand Core */
  --primary-orange: #b94d30;
  --primary-orange-hover: #983d25;
  --primary-orange-light: #fbebe7;
  --primary-orange-gradient: #f0957c;
  --accent-amber: #d97706;

  /* Earth Tones */
  --earth-brown-dark: #4a2c1d;
  --earth-brown-medium: #8c532b;
  --earth-brown-light: #d8c3b1;
}

/* ==========================================
   2. DAY MODE VARIABLES (Light Theme)
   ========================================== */
.dayMode {
  --bg-main: #fcf9f6;
  --bg-surface: #ffffff;
  --bg-hero: linear-gradient(135deg, #1a1818 0%, #4a2c1d 100%);

  --text-main: #1a1818;
  --text-muted: #5c524e;
  --text-on-dark: #ffffff;

  --border-subtle: #e8dec8;
  --card-shadow: 0 4px 15px rgba(26, 24, 24, 0.06);

  --nav-bg: #1a1818;
  --tab-active-indicator: var(--primary-orange);
  --btn-brand: var(--primary-orange);
  --btn-brand-hover: var(--earth-brown-dark);
  --icon-color: var(--primary-orange);
  --icon-hover: #ffb85c;
}

/* ==========================================
   3. NIGHT MODE VARIABLES (Dark Theme)
   ========================================== */
.nightMode {
  --bg-main: #121111;
  --bg-surface: #1a1818;
  --bg-hero: linear-gradient(135deg, #0a0a0a 0%, #2b170e 100%);

  --text-main: #fcf9f6;
  --text-muted: #d8c3b1;
  --text-on-dark: #ffffff;

  --border-subtle: #2b2827;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

  --nav-bg: #0a0a0a;
  --tab-active-indicator: var(--primary-orange-gradient);
  --btn-brand: var(--primary-orange);
  --btn-brand-hover: var(--primary-orange-gradient);
  --icon-color: var(--primary-orange-gradient);
  --icon-hover: #ffb85c;
}

.header nav,
.nightMode .header nav {
  border: none;
  box-shadow: none;
}

body nav.nav-extended {
  padding-top: 9.5rem;
  transition: padding-top 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
body {
  transition: padding-top 0.3s ease-in-out;
  padding-top: 60px;
  
}
body.scrolled {
  padding-top: 14rem;
}
body.scrolled .app-container {
  position: relative;
}
body.scrolled nav.nav-extended {
  padding-top: 6rem;
}
body.scrolled nav.nav-extended {
  position: fixed;
  top: 0;
  background-color: #0a0a0ad4 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(
    0 10px 15px rgba(0, 0, 0, 0.82)
  ); /* Activates structural depth */


  z-index: 1004;
}

nav a.brand-logo {
  display: inline-flex;
}
body.scrolled nav a.brand-logo {
  display: none;
}
body.scrolled nav.nav-extended .nav-wrapper {
  display: none;
}
.jnc-nav-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor; /* Automatically matches the text color of the parent link */
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}
/* Default state colors */
/* Base Layout Window Dimensions */
.jnc-nav-icon-rope {
  width: 4rem;
  height: 4rem;
  vertical-align: middle;
  display: inline-block;
}

/* Default Color Theme Assignment */
.jnc-nav-icon-rope .rope-tan-loop {
  color: #c2a67d; /* Soft rustic tan lasso ring */
  transition: color 0.25s ease;
}

.jnc-nav-icon-rope .rope-orange-cross path {
  transition: stroke 0.25s ease;
  color: var(--icon-color) !important; /* Soft rustic tan lasso ring */
}

/* HOVER TRIGGERS: Runs smoothly when a user hovers over the parent element */
.card:hover .jnc-nav-icon-rope .rope-tan-loop {
  color: #a04630; /* Transitions the outer loop cleanly to Materialize Teal */
  color: var(
    --icon-hover
  ) !important; /* Transitions the main cross lines into your gold accent code */
}

.card:hover .jnc-nav-icon-rope .rope-orange-cross path:first-child,
.card:hover .jnc-nav-icon-rope .rope-orange-cross path:nth-child(3) {
  stroke: var(--primary-orange) !important; /* Soft rustic tan lasso ring */
  /* stroke: #ffab40 !important; */ /* Transitions the main cross lines into your gold accent code */
}

.card:hover .jnc-nav-icon-rope .rope-orange-cross path:second-child,
.card:hover .jnc-nav-icon-rope .rope-orange-cross path:fourth-child {
  stroke: #ffca80 !important; /* Updates internal rope highlight strands cleanly on hover */
}

#single-page-nav {
  z-index: 888;
  position: relative;
}
#single-page-nav nav ul li a {
  padding: 0 8px;
}
#single-page-nav nav ul.tabs {
  display: flex;
  justify-content: space-between;
}
.jnc-feathered-icon {
  height: 3.2rem; /* Taller axis keeps the majestic rearing profile intact */
  color: #ffab40; /* Matches your gold/orange layout accent */
  vertical-align: middle;
  display: inline-block;
  margin-right: 10px;
}

.jnc-publishing-icon {
  width: 3rem;
  height: 3rem;
  vertical-align: middle;
  display: inline-block;
  margin-right: 12px; /* Matches the exact visual rhythm of your card columns */
}

/* Optional card hover effect to stay uniform with the other blocks */
.card:hover .jnc-publishing-icon {
  transition: color 0.3s ease;
}

/* Optional interactive glow on card hover */
.card:hover .jnc-feathered-icon {
  transition: color 0.3s ease;
}

.jnc-gg-logo {
  width: 3.5rem;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

.sidenav {
  background-color: rgba(255, 255, 255, 0.68);
}
.nightMode .sidenav {
  background-color: rgba(18, 21, 26, 0.9);
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #00aaff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

nav .brand-logo {
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  body.scrolled {
    padding-top: 20rem;
  }

  body.scrolled nav.nav-extended {
    display: block;
  }
  /* Styles for tablets/small laptops */
  nav .brand-logo {
    font-size: 2.1rem;
  }
  /*
  body.scrolled nav.nav-extended .nav-wrapper {
    display: block;
  }
*/
  body.scrolled nav a.brand-logo {
    display: inline-flex;
  }

  /* Target the Materialize tabs container element */
  ul.tabs {
    /* 1. Hide scrollbar for Chrome, Safari, and newer Edge versions */
    &::-webkit-scrollbar {
      display: none;
    }

    /* 2. Hide scrollbar for Firefox */
    scrollbar-width: none;

    /* 3. Hide scrollbar for legacy IE and older Edge versions */
    -ms-overflow-style: none;
  }
}

.nav-extended {
  background-color: var(--primary-orange);
}
.jnc-hero {
  background: linear-gradient(
    135deg,
    var(--earth-brown-dark) 0%,
    var(--earth-brown-medium) 100%
  );
  color: #ffffff;
  padding: 60px 0 40px 0;
}
.jnc-profile-img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.jnc-card {
  border-radius: 10px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.jnc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
/* Fix icon alignment inside nav buttons */
.btn-book i.left {
  float: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  line-height: inherit !important;
  height: auto !important;
}

.btn-book {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Ensure carousel items stack properly without cutting off text */
.tabs-content.carousel.carousel-slider {
  transition: height 0.3s ease-in-out; /* Smooth transition when switching tabs */
}

.tabs-content.carousel .carousel-item {
  height: auto !important;
  min-height: 100%;
}
nav,
nav .nav-wrapper i,
nav a.sidenav-trigger,
nav a.sidenav-trigger i {
  height: 25px;
}

/* ==========================================
   Day Mode Overrides: #ventures
   Theme Colors:
   - Primary Accent: #b94d30 (Warm Orange)
   - Earthy Brown: #5c3a21 / #8c532b
   - Charcoal/Black: #1a1818
   ========================================== */

/* Main Container & Background */
.dayMode #ventures {
  background-color: #fcf9f6; /* Soft warm ivory to complement earth tones */
  color: #1a1818;
}

/* Headings & Section Titles */
.dayMode #ventures h1,
.dayMode #ventures h2,
.dayMode #ventures h3,
.dayMode #ventures h4 {
  color: #1a1818;
  text-shadow: none;
}

.dayMode #ventures .section-subtitle,
.dayMode #ventures p {
  color: #5c3a21; /* Warm brown text */
}

/* Venture Cards / Panel Containers */
.dayMode #ventures .card,
.dayMode #ventures .venture-card,
.dayMode #ventures .panel {
  background: #ffffff;
  border: 1px solid #e8dec8;
  border-top: 4px solid #b94d30; /* Accent strip using signature orange */
  box-shadow: 0 4px 12px rgba(26, 24, 24, 0.05);
  color: #1a1818;
}

.dayMode #ventures .card:hover,
.dayMode #ventures .venture-card:hover {
  background: #ffffff;
  border-color: #b94d30;
  box-shadow: 0 8px 20px rgba(185, 77, 48, 0.15);
  transform: translateY(-3px);
}

/* Links inside #ventures */
.dayMode #ventures a:not(.btn):not(.starfleet-btn) {
  color: #b94d30;
  font-weight: 600;
}

.dayMode #ventures a:not(.btn):not(.starfleet-btn):hover {
  color: #8c532b;
}

/* Badges / Category Tags */
.dayMode #ventures .custom-badge,
.dayMode #ventures .project-type {
  background-color: rgba(185, 77, 48, 0.1);
  color: #b94d30;
  border: 1px solid rgba(185, 77, 48, 0.3);
}

/* Primary Buttons */
.dayMode #ventures .btn,
.dayMode #ventures .starfleet-btn {
  background: #b94d30;
  color: #ffffff;
  border: 1px solid #8c532b;
  font-weight: 600;
}

.dayMode #ventures .btn:hover,
.dayMode #ventures .starfleet-btn:hover {
  background: #1a1818; /* Dark charcoal/black hover state for strong contrast */
  color: #ffffff;
  border-color: #1a1818;
  box-shadow: 0 4px 12px rgba(26, 24, 24, 0.2);
}

/* ==========================================
   4. TEMPLATE COMPONENT STYLES
   ========================================== */

/* App Wrapper & Background */
.app-container,
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Navigation Bar Overrides */
nav.nav-extended {
  background-color: var(--nav-bg) !important;
  border-bottom: 3px solid var(--horse-poop);
}
body.scrolled nav.nav-extended {
  background-color: var(--nav-bg) !important;
  border-bottom: 3px solid #6e2816;
}
nav .brand-logo,
nav ul a {
  color: var(--text-on-dark) !important;
}

nav .tabs {
  background-color: transparent !important;
}

nav .tabs .tab a {
  color: var(--earth-brown-light) !important;
}

nav .tabs .tab a.active,
nav .tabs .tab a:hover {
  color: var(--text-on-dark) !important;
}

nav .tabs .indicator {
  background-color: var(--tab-active-indicator) !important;
  height: 3px;
}

/* Hero Section */
.jnc-hero {
  background: var(--bg-hero);
  padding: 50px 0 30px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.jnc-hero p {
  color: var(--earth-brown-light) !important;
}

.jnc-profile-img {
  width: 100%;
  border-radius: 8px;
  border: 2px solid var(--border-subtle);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.jnc-profile-img:hover {
  transform: scale(1.02);
}

/* Ventures Section & Cards */
#ventures h4,
.container h5 {
  color: var(--text-main);
}

.jnc-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--primary-orange) !important;
  border-radius: 8px !important;
  box-shadow: var(--card-shadow) !important;
  transition: all 0.3s ease;
}

.jnc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(185, 77, 48, 0.2) !important;
}
/* Optional hover state to make the brand interactive */
.jnc-card:hover i,
.jnc-card:hover svg {
  color: var(
    --icon-hover
  ); /* Smooth color transition when a visitor hovers over the logo */
  transition: color 0.3s ease;
}

.jnc-card h6 {
  color: var(--text-main);
}

.jnc-card p {
  color: var(--text-muted);
}

.jnc-card i,
.jnc-card svg {
  color: var(--icon-color);
}
.jnc-card i.card-hero {
  font-size: 2.35rem;
}
.jnc-card h6 {
  font-size: 1.5em;
  margin: 1.47em 0;
}

/* Buttons */
.btn-book,
.btn-small,
.btn-large {
  background-color: var(--btn-brand) !important;
  color: var(--text-on-dark) !important;
  font-weight: 600;
  border-radius: 4px;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn-book:hover,
.btn-small:hover,
.btn-large:hover {
  background-color: var(--btn-brand-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.jnc-card .btn-book:hover i,
.jnc-card .btn-small:hover i,
.jnc-card .btn-large:hover i {
  color: currentColor;
}

/* Sub-page Tab Text Content */
#bio p,
#feathered-fortunes p,
#jenlynne-publishing p,
#contact p {
  color: var(--text-muted) !important;
}

.jnc-section-img {
  max-height: 80vh; /* Adjusts to 80% of screen height */
  display: block;
  margin: 0 auto; /* Centers the image */
  border-radius: 8px;
  border: 2px solid var(--border-subtle);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

/* Hide header elements cleanly when lightbox is active */
body.lightbox-active header.header,
body.lightbox-active .merchant-header-image {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

/* Container framework alignment */
.ff-brand-logo-svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  /* Smooth transition engine for interactions */
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.3s ease;
}

/* Individual underlying path targets */
.ff-brand-logo-svg .fill-element {
  fill: #111111; /* Control brand graphic base fill hue here */
  transition: fill 0.3s ease;
}

.ff-brand-logo-svg .stroke-element {
  stroke: #111111; /* Control brand line stroke hue here */
  transition: stroke 0.3s ease;
}

/* Micro-interaction setup: Hover state animations */
.ff-brand-logo-svg:hover {
  transform: scale(1.04); /* Smooth crisp expansion */
  filter: drop-shadow(
    0 10px 15px rgba(0, 0, 0, 0.12)
  ); /* Activates structural depth */
}

/* Hover Accent Color Shift (Optional Feature) */
.ff-brand-logo-svg:hover .fill-element {
  fill: #1a1a1a;
}
.ff-brand-logo-svg:hover .stroke-element {
  stroke: #1a1a1a;
}

/* Feathered Fortunes Gallery Custom Styles */
.rtr-promo,
.feathered-fortunes-promo {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.ff-gallery-card {
  overflow: hidden;
  border-radius: 8px; /* Smooths out traditional Materialize hard corners */
}

.ff-gallery-wrapper {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  height: 220px; /* Fixes layout collapsing if source images have mismatched dimensions */
}
.nightMode .ff-gallery-wrapper {
  background-color: #000;
}
.ff-gallery-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops mixed size images perfectly into uniform shapes */
}
/* Materialized images override for smooth scaling */
.ff-gallery-wrapper img.materialboxed {
  transition: transform 0.4s ease-in-out;
}

.ff-gallery-wrapper:hover img.materialboxed:not(.active) {
  transform: scale(1.08); /* Soft zoom effect on card hover */
}

/* Text overlay configuration */
.ff-gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 77, 64, 0.65); /* Rich teal background opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Prevents overlay from disrupting Materialbox click */
}

.ff-gallery-wrapper:hover .ff-gallery-overlay {
  opacity: 1;
}

.ff-gallery-title {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1px;
  border-bottom: 2px solid #fff;
  padding-bottom: 5px;
}

.ff-gallery-row {
  display: flex;
  flex-wrap: wrap;
}

/* Ensure column alignment handles unequal child text lengths */
.ff-gallery-row .col {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
}

/* Force cards to expand to full row height */
.ff-gallery-flex-card {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height: 100%;
}

/* Push card content elements down and make text boundaries equal */
.ff-fixed-card-content {
  flex-grow: 1;
  min-height: 90px; /* Accounts for differences between 1, 2, or 3 lines of text */
  display: flex;
  align-items: flex-start;
}