/*
 * OpenRoutes Outdoor Adventure Theme
 *
 * A nature-inspired theme with earth tones, topographic patterns,
 * and organic shapes for an authentic outdoor adventure feel.
 * All colors tested for WCAG AA accessibility compliance.
 */

/* ============================================
   Google Fonts Import
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================
   CSS Custom Properties - Earth Tone Palette
   ============================================ */

:root {
    /* Earth Tone Primary Colors (WCAG AA Compliant) */
    --or-forest-green: #2d5016;      /* Deep forest - primary CTA */
    --or-forest-light: #3a5a40;      /* Lighter forest for hover */
    --or-sage: #87a96b;              /* Sage green - secondary */
    --or-sage-light: #a8c69f;        /* Lighter sage */
    --or-canyon: #c17c52;            /* Terracotta accent */
    --or-sand: #f5f1e8;              /* Warm sand background */
    --or-sand-dark: #e8dcc4;         /* Darker sand */
    --or-bark: #3d2817;              /* Dark brown text (9.6:1 on sand) */
    --or-bark-light: #5c4033;        /* Medium brown (7.2:1 on sand) */
    --or-moss: #3a5a40;              /* Moss green - success */

    /* Accent Colors */
    --or-summit-blue: #457b9d;       /* Mountain peak blue */
    --or-trail-orange: #d97629;      /* Trail marker orange */
    --or-sky: #a8dadc;               /* Light sky blue */
    --or-sunset: #ee6c4d;            /* Sunset red for alerts */

    /* Neutral Tones */
    --or-cream: #fdfcf9;             /* Off-white cream */
    --or-stone: #8b7d6b;             /* Stone gray */
    --or-pebble: #d4c5b0;            /* Light stone */

    /* Semantic Color Mappings */
    --or-primary: var(--or-forest-green);
    --or-primary-hover: var(--or-forest-light);
    --or-secondary: var(--or-sage);
    --or-success: var(--or-moss);
    --or-info: var(--or-summit-blue);
    --or-warning: var(--or-trail-orange);
    --or-danger: var(--or-sunset);
    --or-light: var(--or-sand);
    --or-dark: var(--or-bark);
    --or-muted: var(--or-stone);

    /* Typography */
    --or-font-heading: 'Outfit', system-ui, sans-serif;
    --or-font-body: 'Inter', system-ui, sans-serif;

    /* Organic Border Radius */
    --or-radius-sm: 0.25rem 0.3rem 0.25rem 0.3rem;
    --or-radius: 0.4rem 0.5rem 0.45rem 0.5rem;
    --or-radius-lg: 0.6rem 0.7rem 0.65rem 0.7rem;
    --or-radius-xl: 0.8rem 1rem 0.9rem 1rem;

    /* Shadows with Earth Tone Tints */
    --or-shadow-sm: 0 0.125rem 0.25rem rgba(61, 40, 23, 0.1);
    --or-shadow: 0 0.5rem 1rem rgba(61, 40, 23, 0.15);
    --or-shadow-lg: 0 1rem 2rem rgba(61, 40, 23, 0.2);
    --or-shadow-green: 0 0.5rem 1rem rgba(45, 80, 22, 0.15);

    /* Spacing */
    --or-spacing-xs: 0.25rem;
    --or-spacing-sm: 0.5rem;
    --or-spacing-md: 1rem;
    --or-spacing-lg: 1.5rem;
    --or-spacing-xl: 2rem;
}


/* ============================================
   Bootstrap Variable Overrides
   ============================================ */

:root {
    /* Override Bootstrap colors with our earth tones */
    --bs-primary: #2d5016;
    --bs-primary-rgb: 45, 80, 22;
    --bs-secondary: #87a96b;
    --bs-secondary-rgb: 135, 169, 107;
    --bs-success: #3a5a40;
    --bs-success-rgb: 58, 90, 64;
    --bs-info: #457b9d;
    --bs-info-rgb: 69, 123, 157;
    --bs-warning: #d97629;
    --bs-warning-rgb: 217, 118, 41;
    --bs-danger: #ee6c4d;
    --bs-danger-rgb: 238, 108, 77;
    --bs-light: #f5f1e8;
    --bs-light-rgb: 245, 241, 232;
    --bs-dark: #3d2817;
    --bs-dark-rgb: 61, 40, 23;

    /* Body styling */
    --bs-body-bg: var(--or-sand);
    --bs-body-color: var(--or-bark);
    --bs-body-font-family: var(--or-font-body);

    /* Links */
    --bs-link-color: var(--or-forest-green);
    --bs-link-hover-color: var(--or-forest-light);

    /* Border radius - slightly more organic */
    --bs-border-radius: 0.4rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.6rem;
    --bs-border-radius-xl: 0.8rem;
}


/* ============================================
   Base Typography
   ============================================ */

body {
    font-family: var(--or-font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--or-bark);
    background-color: var(--or-sand);
    letter-spacing: 0.01em;
    position: relative;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: url('/static/img/topo.svg');
    background-repeat: no-repeat;
    
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    background-size: 200vh;
}

body > * {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--or-font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--or-bark);
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--or-font-heading);
    font-weight: 700;
}

/* Organic underline for links */
a:not(.btn):not(.nav-link):not(.navbar-brand) {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
    transition: all 0.2s ease;
}

a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    text-decoration-thickness: 0.12em;
    color: var(--or-forest-light);
}


/* ============================================
   SVG Topographic Patterns
   ============================================ */

/* Subtle contour line background */
.bg-contour {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(61, 40, 23, 0.03) 20px,
            rgba(61, 40, 23, 0.03) 22px
        );
    position: relative;
}

/* More pronounced topographic pattern */
.bg-topo {
    background-color: var(--or-sand);
    background-image:
        url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%233d2817' fill-opacity='0.025' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Subtle texture overlay */
.texture-paper {
    position: relative;
}

.texture-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}


/* ============================================
   Navigation Styling
   ============================================ */

.navbar {
    background: linear-gradient(180deg, var(--or-cream) 0%, var(--or-sand) 100%);
    border-bottom: 2px solid var(--or-pebble);
    box-shadow: var(--or-shadow-sm);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-family: var(--or-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--or-forest-green) !important;
    letter-spacing: -0.02em;
}

.nav-link {
    font-family: var(--or-font-body);
    font-weight: 500;
    color: var(--or-bark-light) !important;
    transition: color 0.2s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--or-forest-green) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--or-forest-green);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 80%;
}


/* ============================================
   Button Styling - Organic Feel
   ============================================ */

.btn {
    font-family: var(--or-font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--or-radius);
    border: none;
    transition: all 0.2s ease;
    position: relative;
}

.btn-primary {
    background: linear-gradient(135deg, var(--or-forest-green) 0%, var(--or-forest-light) 100%);
    color: white;
    box-shadow: var(--or-shadow-green);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--or-forest-light) 0%, var(--or-moss) 100%);
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(45, 80, 22, 0.2);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Trail Button - Sage Green */
.btn-trail {
    background: linear-gradient(135deg, var(--or-sage) 0%, var(--or-sage-light) 100%);
    color: var(--or-bark);
    box-shadow: var(--or-shadow);
}

.btn-trail:hover {
    background: linear-gradient(135deg, var(--or-sage-light) 0%, #b8d4a8 100%);
    transform: translateY(-2px);
    color: var(--or-bark);
}

/* Summit Button - Mountain Blue */
.btn-summit {
    background: linear-gradient(135deg, var(--or-summit-blue) 0%, #5a8aaa 100%);
    color: white;
    box-shadow: var(--or-shadow);
}

.btn-summit:hover {
    background: linear-gradient(135deg, #5a8aaa 0%, #6e9bbe 100%);
    transform: translateY(-2px);
    color: white;
}

/* Canyon Button - Terracotta */
.btn-canyon {
    background: linear-gradient(135deg, var(--or-canyon) 0%, #cd8f6a 100%);
    color: white;
    box-shadow: var(--or-shadow);
}

.btn-canyon:hover {
    background: linear-gradient(135deg, #cd8f6a 0%, #d9a482 100%);
    transform: translateY(-2px);
    color: white;
}

.btn-outline-primary {
    border: 2px solid var(--or-forest-green);
    color: var(--or-forest-green);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--or-forest-green);
    color: white;
    transform: translateY(-2px);
}


/* ============================================
   Card Components - Organic Styling
   ============================================ */

.card {
    background: var(--or-cream);
    border: 1px solid var(--or-pebble);
    border-radius: var(--or-radius-lg);
    box-shadow: var(--or-shadow);
    position: relative;
    overflow: hidden;
}

.card-img-top {
    border-radius: var(--or-radius-lg) var(--or-radius-lg) 0 0;
}

.card-title {
    font-family: var(--or-font-heading);
    font-weight: 600;
    color: var(--or-bark);
}


/* ============================================
   Badges & Labels - Earth Tones
   ============================================ */

.badge {
    font-family: var(--or-font-body);
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.35em 0.75em;
    border-radius: var(--or-radius-sm);
}

.bg-primary-subtle {
    background-color: rgba(45, 80, 22, 0.15) !important;
    color: var(--or-forest-green) !important;
}

.bg-success-subtle {
    background-color: rgba(58, 90, 64, 0.15) !important;
    color: var(--or-moss) !important;
}

.bg-warning-subtle {
    background-color: rgba(217, 118, 41, 0.15) !important;
    color: #a85c1f !important;
}

.bg-danger-subtle {
    background-color: rgba(238, 108, 77, 0.15) !important;
    color: #c4543a !important;
}

.bg-secondary-subtle {
    background-color: rgba(139, 125, 107, 0.15) !important;
    color: var(--or-bark-light) !important;
}


/* ============================================
   Form Inputs - Organic Styling
   ============================================ */

.form-control,
.form-select {
    background-color: white;
    border: 2px solid var(--or-pebble);
    border-radius: var(--or-radius);
    color: var(--or-bark);
    font-family: var(--or-font-body);
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--or-sage);
    box-shadow: 0 0 0 0.25rem rgba(135, 169, 107, 0.25);
    background-color: white;
}

.form-control::placeholder {
    color: var(--or-stone);
}

.form-label {
    font-weight: 500;
    color: var(--or-bark-light);
    font-size: 0.925rem;
    letter-spacing: 0.01em;
}

.form-check-input:checked {
    background-color: var(--or-forest-green);
    border-color: var(--or-forest-green);
}


/* ============================================
   Alerts - Nature Themed
   ============================================ */

.alert {
    border-radius: var(--or-radius);
    border-left: 4px solid;
    font-family: var(--or-font-body);
}

.alert-success {
    background-color: rgba(58, 90, 64, 0.1);
    border-left-color: var(--or-moss);
    color: var(--or-bark);
}

.alert-info {
    background-color: rgba(69, 123, 157, 0.1);
    border-left-color: var(--or-summit-blue);
    color: var(--or-bark);
}

.alert-warning {
    background-color: rgba(217, 118, 41, 0.1);
    border-left-color: var(--or-trail-orange);
    color: var(--or-bark);
}

.alert-danger {
    background-color: rgba(238, 108, 77, 0.1);
    border-left-color: var(--or-sunset);
    color: var(--or-bark);
}


/* ============================================
   Footer - Mountain Silhouette
   ============================================ */

footer {
    background: linear-gradient(180deg, var(--or-bark) 0%, var(--or-bark-light) 100%);
    color: var(--or-sand);
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L100,70 L200,45 L300,80 L400,50 L500,85 L600,55 L700,90 L800,60 L900,85 L1000,50 L1100,75 L1200,45 L1200,120 L0,120 Z' fill='%232d5016' opacity='0.3'/%3E%3Cpath d='M0,60 L150,85 L300,65 L450,95 L600,70 L750,100 L900,75 L1050,90 L1200,65 L1200,120 L0,120 Z' fill='%233a5a40' opacity='0.5'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
}

footer a {
    color: var(--or-sage-light);
    text-decoration: none;
}

footer a:hover {
    color: white;
}


/* ============================================
   Map Components
   ============================================ */

.elevation-hover-popup .maplibregl-popup-content {
    background: var(--or-forest-green);
    color: white;
    padding: 8px 12px;
    border-radius: var(--or-radius);
    box-shadow: var(--or-shadow-lg);
    font-family: var(--or-font-body);
}

.elevation-hover-popup .maplibregl-popup-tip {
    border-top-color: var(--or-forest-green);
}

#activity-map,
#elevation-profile,
#browse-map {
    border-radius: var(--or-radius-lg);
    overflow: hidden;
}

/* Browse Map Popup Styling */
.maplibregl-popup-content {
    border-radius: var(--or-radius);
    box-shadow: var(--or-shadow-lg);
    font-family: var(--or-font-body);
    background-color: var(--or-cream);
    border: 1px solid var(--or-pebble);
}

.maplibregl-popup-tip {
    border-top-color: var(--or-cream);
}

.maplibregl-popup-close-button {
    color: var(--or-bark);
    font-size: 1.5rem;
    padding: 5px 10px;
}

.maplibregl-popup-close-button:hover {
    background-color: var(--or-sand);
    color: var(--or-forest-green);
}

/* Activity Popup Content */
.activity-popup h6 {
    color: var(--or-bark);
    font-family: var(--or-font-heading);
}

.activity-popup .badge {
    font-size: 0.75rem;
}

/* Mobile responsiveness for browse map */
@media (max-width: 767.98px) {
    #browse-map {
        height: 500px !important;
    }
}


/* ============================================
   Utility Classes
   ============================================ */

.text-primary {
    color: var(--or-forest-green) !important;
}

.text-muted {
    color: var(--or-stone) !important;
}

.bg-light {
    background-color: var(--or-sand) !important;
}

.bg-white {
    background-color: var(--or-cream) !important;
}

.border-bottom {
    border-bottom-color: var(--or-pebble) !important;
}

.border-top {
    border-top-color: var(--or-pebble) !important;
}

/* Smooth transitions for interactive elements */
.transition-smooth {
    transition: all 0.3s ease-in-out;
}

/* Organic shadow utility */
.shadow-organic {
    box-shadow: var(--or-shadow);
}

.shadow-organic-lg {
    box-shadow: var(--or-shadow-lg);
}


/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 767.98px) {
    /* Reduce pattern complexity on mobile */
    .bg-topo {
        background-image: none;
        background-color: var(--or-sand);
    }

    /* Simpler shadows for performance */
    .card {
        box-shadow: var(--or-shadow-sm);
    }

    /* Larger touch targets */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablet adjustments */
    .navbar-brand {
        font-size: 1.35rem;
    }
}

@media (min-width: 992px) {
    /* Desktop enhancements */
}


/* ============================================
   Loading States & Animations
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(45, 80, 22, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(45, 80, 22, 0);
    }
}

.pulse-green {
    animation: pulse-green 2s ease-in-out infinite;
}


/* ============================================
   Print Styles
   ============================================ */

@media print {
    .bg-topo,
    .bg-contour,
    .texture-paper::before {
        background: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}