/* Custom styles for Cain Creek Outfitters */
/* Inspired by Retay USA Design System */

/* ==========================================================================
   CUSTOM SCROLLBAR
   ========================================================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1A1412;
}

::-webkit-scrollbar-thumb {
    background: #FF5500;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e64d00;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #FF5500 #1A1412;
}

/* ==========================================================================
   LOCAL FONT LOADING
   ========================================================================== */

/* Gazzetta Bold - Headlines */
@font-face {
    font-family: 'Gazzetta';
    src: url('../fonts/Gazzetta-Bold.woff2') format('woff2'),
         url('../fonts/Gazzetta-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Barlow - Body Text */
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow-v13-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow-v13-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow-v13-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headlines use Gazzetta Bold - OnX Hunt inspired tight spacing */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Gazzetta', Impact, sans-serif;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

/* Stacked headline style - very tight line height like OnX */
.headline-stacked {
    line-height: 0.85;
    letter-spacing: -0.02em;
}

/* OnX-style mixed weight headline - use with spans */
.text-accent {
    color: #FF5500;
}

/* Italic emphasis for dramatic words like OnX "SUPERSTITIONS" */
.text-italic-bold {
    font-style: italic;
    font-weight: 700;
}

/* Subheadline above main headline - smaller, lighter */
.pre-headline {
    font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

p {
    text-wrap: pretty;
}

/* ==========================================================================
   FLUID TYPOGRAPHY SCALE
   ========================================================================== */

.fluid-xs {
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);         /* 14-16px */
}

.fluid-sm {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16-18px */
}

.fluid-base {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);        /* 16-18px */
}

.fluid-lg {
    font-size: clamp(1.25rem, 1.1rem + 0.625vw, 1.5rem);       /* 20-24px */
}

.fluid-xl {
    font-size: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem);     /* 22-28px */
}

.fluid-2xl {
    font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);          /* 24-32px */
}

.fluid-3xl {
    font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);       /* 28-44px */
}

.fluid-4xl {
    font-size: clamp(2.5rem, 1.75rem + 5vw, 5rem) !important;  /* 40-80px */
}

.fluid-5xl {
    font-size: clamp(3.5rem, 2.5rem + 7vw, 7rem);              /* 56-112px */
}

/* Extra large for hero impact */
.fluid-6xl {
    font-size: clamp(2.75rem, 2rem + 8vw, 9rem);               /* 44-144px */
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.font-headline {
    font-family: 'Gazzetta', Impact, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.font-body {
    font-family: 'Barlow', system-ui, sans-serif;
}

.uppercase-headline {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   SWIPER CUSTOMIZATION
   ========================================================================== */

.hero-swiper {
    width: 100%;
}

.hero-swiper .swiper-slide {
    height: 100%;
}

.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after {
    font-size: 20px;
}

.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.7);
}

.hero-swiper .swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
    width: 12px;
    height: 12px;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #FF5500;
}

/* Form input focus states */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #FF5500;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F5F0EB;
}

::-webkit-scrollbar-thumb {
    background: #4A3728;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2D1F14;
}

/* Placeholder image styling */
.bg-lodge-brown\/20 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5D4E37;
    font-size: 1rem;
}

/* Print styles */
@media print {
    nav,
    #scroll-top,
    .slider-dot,
    #prev-slide,
    #next-slide {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Loading animation for images */
img {
    transition: opacity 0.3s ease;
}

img[src=""] {
    opacity: 0;
}

/* Hero section minimum height */
@media (max-height: 600px) {
    .h-screen {
        min-height: 600px;
    }
}

/* ==========================================================================
   ONX-INSPIRED STYLES
   ========================================================================== */

/* Topographic pattern background - subtle line texture */
.bg-topo {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' fill='none' stroke='rgba(255,107,0,0.08)' stroke-width='0.5'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' fill='none' stroke='rgba(255,107,0,0.06)' stroke-width='0.5'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' fill='none' stroke='rgba(255,107,0,0.06)' stroke-width='0.5'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' fill='none' stroke='rgba(255,107,0,0.04)' stroke-width='0.5'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' fill='none' stroke='rgba(255,107,0,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Pill-shaped buttons - OnX style */
.btn-pill {
    border-radius: 9999px;
    padding: 1rem 2.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 85, 0, 0.4);
}

/* Orange label/tag style like OnX "APP 101" */
.label-orange {
    color: #FF5500;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Date/time pill badge */
.badge-pill {
    display: inline-block;
    background: #FF5500;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* OnX ELITE-style compound badge - orange pill + text */
.badge-compound {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.badge-compound .badge-label {
    background: #FF5500;
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-compound .badge-text {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Filter pill tags like OnX "Waterfowl" / "Migration Report" */
.tag-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tag-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}