/**
 * Progressive Disclosure Design System
 * Mobile-First Pattern for Camp Pages
 *
 * This CSS file provides tokens and components for the mobile-first
 * progressive disclosure pattern. Works alongside Design System 2.0.
 *
 * @package Opanije
 * @version 1.0.0
 * @since 2025-12-04
 *
 * Table of Contents:
 * 1. Design Tokens (Step 0)
 * 2. Utilities
 * 3. Journey Teaser Scroll-Snap (Step 1)
 * 4. Collapsible Sections - See More Toggle (Step 2)
 * 5. Safety Component Styles (Step 3)
 * 6. FAB Navigation (Step 4)
 * 7. Accordion Styles (Step 5)
 */


/* =================================================================
   SECTION 1: DESIGN TOKENS (Step 0)
   Complementary tokens for progressive disclosure system.
   Maps to Design System 2.0 where possible.
   ================================================================= */

:root {
    /* ---------------------------------------------------------------
       PRIMITIVE COLOR TOKENS
       Heritage-themed naming for brand consistency
       --------------------------------------------------------------- */

    /* Heritage Gold Palette */
    --color-heritage-gold: #d8a81b;      /* Primary gold - maps to --sys-color-primary-light */
    --color-heritage-sunlit: #f3d068;    /* Light gold - for hover states */
    --color-heritage-dark: #2B2823;      /* Deep charcoal - maps to --sys-color-ink-base */

    /* Ink/Text Colors */
    --color-ink-base: #111827;           /* Slightly darker for contrast */
    --color-ink-secondary: #4B5563;      /* Secondary text */

    /* Surface Colors */
    --color-surface-0: #fff;             /* Pure white */
    --color-surface-1: #f9fafb;          /* Off-white */
    --color-surface-dark: rgba(0, 0, 0, 0.03);  /* Subtle dark overlay */

    /* Border Colors */
    --color-border-light: #e5e7eb;       /* Light border */


    /* ---------------------------------------------------------------
       SEMANTIC TOKENS
       Purpose-driven aliases for design intent
       --------------------------------------------------------------- */

    /* Interactive Elements */
    --color-interactive-primary: var(--color-heritage-gold);
    --color-interactive-hover: var(--color-heritage-sunlit);

    /* Text Hierarchy */
    --color-text-primary: var(--color-ink-base);
    --color-text-secondary: var(--color-ink-secondary);
    --color-text-on-dark: rgba(255, 255, 255, 0.85);

    /* Background Layers */
    --color-bg-primary: var(--color-surface-0);
    --color-bg-secondary: var(--color-surface-1);


    /* ---------------------------------------------------------------
       SPACING TOKENS
       8px base grid for consistent rhythm
       --------------------------------------------------------------- */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 2rem;       /* 32px */
    --spacing-xl: 4rem;       /* 64px */


    /* ---------------------------------------------------------------
       TYPOGRAPHY TOKENS
       Weight and line-height for progressive disclosure
       --------------------------------------------------------------- */
    --font-weight-normal: 300;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.8;


    /* ---------------------------------------------------------------
       RADIUS TOKENS
       Border-radius scale
       --------------------------------------------------------------- */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 1rem;        /* 16px */
    --radius-full: 999px;


    /* ---------------------------------------------------------------
       SHADOW TOKENS
       Elevation system
       --------------------------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(216, 168, 27, 0.4);


    /* ---------------------------------------------------------------
       TRANSITION TOKENS
       Animation timing
       --------------------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.3s ease;
}


/* =================================================================
   SECTION 2: UTILITIES
   Helper classes for accessibility and layout
   ================================================================= */

/* Screen reader only - hides visually but accessible to AT */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible utility for keyboard navigation */
.op-focus-ring:focus-visible {
    outline: 2px solid var(--color-interactive-primary);
    outline-offset: 2px;
}


/* =================================================================
   SECTION 3: JOURNEY TEASER SCROLL-SNAP (Step 1)
   Horizontal scroll with snap points for mobile journey preview
   ================================================================= */

.op-journey-teaser-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.op-journey-teaser-scroll::-webkit-scrollbar {
    display: none;
}

.op-journey-snap-item {
    scroll-snap-align: center;
    flex: 0 0 85%;
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    min-width: 0;
}

/* Desktop: Convert to grid layout */
@media (min-width: 768px) {
    .op-journey-teaser-scroll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        scroll-snap-type: none;
        overflow-x: visible;
    }

    .op-journey-snap-item {
        flex: none;
    }
}


/* =================================================================
   SECTION 4: COLLAPSIBLE SECTIONS - SEE MORE TOGGLE (Step 2)
   Line-clamped preview with expand/collapse functionality
   ================================================================= */

/*
 * Line-clamp CRITICAL: Must use -webkit-box, NOT display: block
 * This is the only reliable cross-browser method for line clamping
 */
.op-preview-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    position: relative;
}

/* Expanded state - remove line clamp */
.op-preview-collapsed.op-expanded {
    display: block;
    -webkit-line-clamp: unset;
}

/* Gradient fade overlay for visual truncation indication */
.op-preview-collapsed::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
}

/* Hide gradient when expanded */
.op-preview-collapsed.op-expanded::after {
    display: none;
}

/* Dark background variant */
.op-preview-collapsed.op-preview-dark::after {
    background: linear-gradient(to bottom, rgba(43, 40, 35, 0) 0%, rgba(43, 40, 35, 0.85) 100%);
}

/* See More Toggle Button */
.op-see-more-toggle {
    border: none;
    background: none;
    color: var(--color-interactive-primary);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) 0;
    margin-top: var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.op-see-more-toggle:hover {
    color: var(--color-interactive-hover);
}

.op-see-more-toggle:focus-visible {
    outline: 2px solid var(--color-interactive-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduced motion support */
@media (prefers-reduced-motion: no-preference) {
    .op-preview-collapsed {
        transition: all var(--transition-base);
    }
}


/* =================================================================
   SECTION 5: SAFETY COMPONENT STYLES (Step 3)
   Grid layout for "Why You're Safe & Supported" section
   ================================================================= */

.op-safety-card {
    background: var(--color-bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

/* Hover effect with reduced motion support */
@media (prefers-reduced-motion: no-preference) {
    .op-safety-card {
        transition: transform var(--transition-base), box-shadow var(--transition-base);
    }

    .op-safety-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }
}


/* =================================================================
   SECTION 6: FAB NAVIGATION (Step 4)
   Floating Action Button with expandable menu
   ================================================================= */

/*
 * GPU-optimized FAB using only transform/opacity
 * Prevents layout thrashing during animations
 */
.op-fab-main {
    position: fixed;
    bottom: 136px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-heritage-gold), var(--color-heritage-sunlit));
    color: var(--color-bg-primary);
    border: none;
    box-shadow: var(--shadow-md);
    z-index: 1039;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    cursor: pointer;
}

.op-fab-main.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.op-fab-main:focus-visible {
    outline: 3px solid var(--color-interactive-primary);
    outline-offset: 2px;
}

/* FAB Expandable Menu */
.op-fab-menu {
    position: fixed;
    bottom: 200px;
    right: 20px;
    display: none;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 1039;
}

.op-fab-menu.show {
    display: flex;
}

.op-fab-menu button {
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-sm) calc(var(--spacing-md) * 1.5);
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    cursor: pointer;
}

.op-fab-menu button:hover {
    background: var(--color-bg-secondary);
}

.op-fab-menu button:focus-visible {
    outline: 2px solid var(--color-interactive-primary);
    outline-offset: 2px;
}

/* Transition support for reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .op-fab-main {
        transition: opacity var(--transition-base), transform var(--transition-base);
    }

    .op-fab-menu button {
        transition: background var(--transition-fast);
    }
}

/* Hide FAB on desktop */
@media (min-width: 768px) {
    .op-fab-main,
    .op-fab-menu {
        display: none !important;
    }
}


/* =================================================================
   SECTION 7: ACCORDION STYLES (Step 5)
   Universal accordion styling compatible with Bootstrap 5
   ================================================================= */

.op-accordion {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-primary);
}

.op-accordion-item + .op-accordion-item {
    border-top: 1px solid var(--color-border-light);
}

.op-accordion-header button {
    width: 100%;
    text-align: left;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
}

.op-accordion-header button:hover {
    background: var(--color-bg-secondary);
}

.op-accordion-header button:focus-visible {
    outline: 2px solid var(--color-interactive-primary);
    outline-offset: -2px;
    z-index: 1;
}

/* Chevron icon rotation */
.op-accordion-icon {
    margin-left: var(--spacing-sm);
    color: var(--color-interactive-primary);
    font-size: 0.875rem;
}

.op-accordion-header button[aria-expanded="true"] .op-accordion-icon {
    transform: rotate(180deg);
}

/* Accordion body content */
.op-accordion-body {
    padding: 0 var(--spacing-lg) var(--spacing-md);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

/* Reduced motion support for accordion */
@media (prefers-reduced-motion: no-preference) {
    .op-accordion-icon {
        transition: transform var(--transition-base);
    }

    .op-accordion-header button {
        transition: background var(--transition-fast);
    }
}


/* =================================================================
   SECTION 8: SECTION BACKGROUNDS
   Background utilities for content sections
   ================================================================= */

.op-section {
    padding: var(--spacing-xl) 0;
}

.op-bg-light {
    background: var(--color-bg-secondary);
}

.op-bg-dark {
    background: var(--color-heritage-dark);
    color: var(--color-text-on-dark);
}

/* Section title styling */
.op-section .section-title {
    color: inherit;
    margin-bottom: var(--spacing-lg);
}

.op-bg-dark .section-title {
    color: var(--color-surface-0);
}


/* =================================================================
   SECTION 9: BUTTON VARIANTS
   Outline button for progressive disclosure CTAs
   ================================================================= */

.btn-outline-gold {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid var(--color-heritage-gold);
    background: transparent;
    color: var(--color-heritage-gold);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
}

.btn-outline-gold:hover {
    background: var(--color-heritage-gold);
    color: var(--color-surface-0);
}

.btn-outline-gold:focus-visible {
    outline: 2px solid var(--color-heritage-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .btn-outline-gold {
        transition: background var(--transition-base), color var(--transition-base);
    }
}