/* Visit Red Feather Lakes - Design System Extension */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
    --mountain-green: #1a3a3a;
    --pine-green: #2d6a4f;
    --earth-brown: #d4a373;
    --soft-white: #fefae0;
    --sand-bg: #f8f6f1;
    --slate-text: #2d3436;
}

/* ============================================================
   2. BASE STYLES
   ============================================================ */
body {
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    color: #1a1a1a;
}

.serif {
    font-family: 'Playfair Display', serif;
}

.heading-serif {
    font-family: 'Playfair Display', serif;
}

[x-cloak] { display: none !important; }

/* ============================================================
   3. TYPOGRAPHY REFINEMENTS
   ============================================================ */

/* Accessible link styles - underline ensures ADA compliance (not color alone) */
.prose a,
.content a,
main p a,
main li a {
    color: var(--pine-green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.prose a:hover,
.content a:hover,
main p a:hover,
main li a:hover {
    color: var(--mountain-green);
    text-decoration-thickness: 2px;
}

.prose a:focus,
.content a:focus,
main p a:focus,
main li a:focus {
    outline: 2px solid var(--earth-brown);
    outline-offset: 2px;
}

/* Prose paragraph spacing - for rich text content only */
.prose p {
    margin-bottom: 1.25em;
}

.prose p:last-child {
    margin-bottom: 0;
}

.heading-hero {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.heading-section {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.subheading-label {
    letter-spacing: 0.25em;
    font-weight: 700;
    color: #8a5a00; /* WCAG AA compliant golden-brown (5.5:1 contrast on white) */
    text-transform: uppercase;
}

.text-shadow-lg {
    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================================
   4. NAVIGATION
   ============================================================ */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--earth-brown);
    transition: width 0.3s ease;
}

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

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn-primary {
    background-color: var(--mountain-green);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background-color: var(--pine-green);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: white;
    color: var(--mountain-green);
    border: 2px solid var(--earth-brown);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background-color: var(--soft-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   6. PAGE HEADERS
   ============================================================ */
.page-header {
    background-color: var(--mountain-green);
    color: white;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.03) 100%);
    pointer-events: none;
}

.hero-gradient {
    background: linear-gradient(to bottom, rgba(26, 58, 58, 0.4), rgba(26, 58, 58, 0.8));
}

/* ============================================================
   7. CARDS
   ============================================================ */
.card-styled {
    background: white;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-styled:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* ============================================================
   8. ACCENT UTILITIES
   ============================================================ */
.accent-border {
    border-color: var(--earth-brown);
}

.accent-text {
    color: var(--earth-brown);
}

/* ============================================================
   9. CTA SECTIONS
   ============================================================ */
.cta-section {
    background: linear-gradient(135deg, var(--soft-white) 0%, #fff 100%);
    border: 2px solid var(--earth-brown);
    border-radius: 1.5rem;
}

/* ============================================================
   10. TEXTURES & PATTERNS
   ============================================================ */
.bg-topo {
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 400c100-50 150-100 200-100s100 50 200 100M0 350c100-50 150-100 200-100s100 50 200 100M0 300c100-50 150-100 200-100s100 50 200 100M0 250c100-50 150-100 200-100s100 50 200 100' fill='none' stroke='%23d4a373' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
}

.grain-overlay {
    position: relative;
}

.grain-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    z-index: 5;
    background-image: url("https://www.transparenttextures.com/patterns/p6.png");
}

/* ============================================================
   11. BESPOKE COMPONENTS
   ============================================================ */
.photo-frame {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border-radius: 0.75rem;
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
    transform: rotate(-1deg);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.photo-frame:hover {
    transform: rotate(0deg) scale(1.02);
}

.photo-frame::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: var(--earth-brown);
    opacity: 0.1;
    z-index: -1;
    border-radius: 50%;
}

.nature-divider {
    height: 30px;
    width: 100%;
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: auto 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none' %3E%3Cpath d='M0 20 L10 10 L20 20 L30 5 L40 20 L50 15 L60 20 L70 8 L80 20 L90 12 L100 20 Z' fill='%231a3a3a' /%3E%3C/svg%3E");
}

.section-anchor {
    scroll-margin-top: 100px;
}

/* ============================================================
   12. CATEGORY ICONS (Home Page)
   ============================================================ */
.category-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.category-icon-text {
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--earth-brown);
}

.category-icon-emoji {
    font-size: 3.5rem;
}

/* ============================================================
   13. ANIMATIONS
   ============================================================ */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes subtle-zoom {
    from { transform: scale(1.05); }
    to { transform: scale(1.15); }
}

/* ============================================================
   14. SHADOWS
   ============================================================ */
.shadow-3xl {
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   15. IMAGE TREATMENT
   ============================================================ */
.img-editorial {
    filter: sepia(0.1) contrast(1.05) saturate(0.9);
    transition: filter 0.5s ease;
}

.img-editorial:hover {
    filter: none;
}

/* ============================================================
   16. LAYOUT FIXES
   ============================================================ */
footer {
    flex-shrink: 0;
}

/* ============================================================
   17. EVENT BOOST HIGHLIGHTING
   ============================================================ */
.event-highlighted {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 4px 6px -1px rgba(251, 191, 36, 0.1);
}

.event-highlighted:hover {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 10px 15px -3px rgba(251, 191, 36, 0.2);
}

/* ============================================================
   18. FORM STYLES (Crispy Forms)
   ============================================================ */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--mountain-green);
    margin-bottom: 0.5rem;
    display: block;
}

.help-block {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

#div_id_logo {
    background-color: #f9fafb;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 2px dashed #e5e7eb;
    transition: all 0.3s ease;
}

#div_id_logo:hover {
    border-color: var(--earth-brown);
    background-color: #fff;
}

input[type="file"] {
    padding: 0.5rem 0;
    width: 100%;
}