/**
 * Nocturnal Marketing - Responsive Utilities
 *
 * Standardized responsive patterns for consistent mobile-first design.
 * Use these utilities alongside Tailwind CSS classes.
 *
 * BREAKPOINTS (Tailwind defaults):
 * --------------------------------
 * xs:   375px  - Large phones (custom, optional)
 * sm:   640px  - Small tablets, large phones
 * md:   768px  - Tablets, small laptops
 * lg:  1024px  - Laptops, desktops
 * xl:  1280px  - Large desktops
 * 2xl: 1536px  - Extra large screens
 *
 * SEMANTIC NAMING:
 * ----------------
 * mobile:  < 640px  (base styles, no prefix)
 * tablet:  640px - 1023px  (sm:, md:)
 * desktop: 1024px+  (lg:, xl:, 2xl:)
 */

/* ==========================================================================
   MOBILE HERO SECTION FIXES
   ========================================================================== */

/**
 * Critical: Ensure hero content is visible on mobile
 * The reveal animation can cause issues if JS is slow or fails.
 * These rules ensure hero is immediately visible on mobile.
 */
@media (max-width: 640px) {
    /* Force hero elements visible on mobile */
    section:first-of-type .reveal {
        opacity: 1 !important;
        transform: translateY(0) !important;
        animation: none !important;
    }
    
    /* Ensure hero text doesn't overflow */
    section:first-of-type h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Ensure CTA buttons stack properly */
    section:first-of-type .flex-col {
        width: 100%;
    }
    
    section:first-of-type .flex-col a {
        width: 100%;
    }
}

/* ==========================================================================
   CONTAINER UTILITIES
   ========================================================================== */

/**
 * Wide container - for full-width sections
 * Max-width: 1280px with responsive horizontal padding
 */
.container-wide {
    max-width: 80rem; /* 1280px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-wide {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-wide {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/**
 * Narrow container - for content-focused sections (blog posts, legal pages)
 * Max-width: 896px
 */
.container-narrow {
    max-width: 56rem; /* 896px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-narrow {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */

/**
 * Responsive 2-column grid
 * Mobile: 1 column → Tablet+: 2 columns
 */
.grid-responsive-2 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .grid-responsive-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

/**
 * Responsive 3-column grid
 * Mobile: 1 column → Tablet: 2 columns → Desktop: 3 columns
 */
.grid-responsive-3 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .grid-responsive-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-responsive-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

/**
 * Responsive 4-column grid
 * Mobile: 2 columns → Desktop: 4 columns
 */
.grid-responsive-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .grid-responsive-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem;
    }
}

/**
 * Dashboard card grid (admin)
 * Mobile: 1 column → Tablet: 2 columns → Desktop: 3 columns
 */
.grid-dashboard {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .grid-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

/**
 * Hero headline - largest text, for page heroes
 * Scales from 2.25rem (mobile) to 6rem (xl desktop)
 */
.text-hero {
    font-size: 1.875rem; /* 30px */
    line-height: 1.1;
}

@media (min-width: 640px) {
    .text-hero {
        font-size: 2.25rem; /* 36px */
    }
}

@media (min-width: 768px) {
    .text-hero {
        font-size: 3.75rem; /* 60px */
    }
}

@media (min-width: 1024px) {
    .text-hero {
        font-size: 4.5rem; /* 72px */
    }
}

@media (min-width: 1280px) {
    .text-hero {
        font-size: 6rem; /* 96px */
    }
}

/**
 * Section title - for section headings
 * Scales from 1.875rem (mobile) to 3rem (desktop)
 */
.text-section {
    font-size: 1.875rem; /* 30px */
    line-height: 1.2;
}

@media (min-width: 768px) {
    .text-section {
        font-size: 2.25rem; /* 36px */
    }
}

@media (min-width: 1024px) {
    .text-section {
        font-size: 3rem; /* 48px */
    }
}

/**
 * Card title - for card headings
 * Scales from 1.25rem (mobile) to 1.5rem (tablet+)
 */
.text-card-title {
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
}

@media (min-width: 640px) {
    .text-card-title {
        font-size: 1.5rem; /* 24px */
    }
}

/* ==========================================================================
   FORM UTILITIES
   ========================================================================== */

/**
 * Form grid - responsive 2-column form layout
 * Mobile: stacked → Tablet+: 2 columns
 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/**
 * Full-width form field (spans both columns on desktop)
 */
.form-full {
    grid-column: 1 / -1;
}

/**
 * Inline form elements - stacked on mobile, inline on tablet+
 */
.form-inline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .form-inline {
        flex-direction: row;
        align-items: center;
    }
}

/**
 * Form action buttons - stacked on mobile, inline right-aligned on tablet+
 */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .form-actions {
        flex-direction: row;
        justify-content: flex-end;
        gap: 1rem;
    }
}

/* ==========================================================================
   TABLE UTILITIES
   ========================================================================== */

/**
 * Scrollable table wrapper
 * Enables horizontal scroll on narrow viewports with minimum width
 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .table-scroll {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.table-scroll table {
    min-width: 640px;
}

@media (min-width: 640px) {
    .table-scroll table {
        min-width: 100%;
    }
}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

/**
 * Section padding - vertical padding for major sections
 * Scales from 4rem (mobile) to 6rem (desktop)
 */
.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/**
 * Hero padding - extra vertical padding for hero sections
 * Accounts for fixed navigation
 */
.hero-padding {
    padding-top: 7rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .hero-padding {
        padding-top: 9rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .hero-padding {
        padding-top: 12rem;
        padding-bottom: 8rem;
    }
}

/**
 * Responsive gap utility
 * Scales from 1rem (mobile) to 2rem (desktop)
 */
.gap-responsive {
    gap: 1rem;
}

@media (min-width: 640px) {
    .gap-responsive {
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 2rem;
    }
}

/* ==========================================================================
   TOUCH TARGET UTILITIES
   ========================================================================== */

/**
 * Minimum touch target size (44x44px per WCAG guidelines)
 * Apply to interactive elements that might be too small on mobile
 */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/**
 * Touch-friendly button/link
 * Ensures adequate padding for finger taps
 */
.touch-friendly {
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   VISIBILITY UTILITIES
   ========================================================================== */

/**
 * Mobile-only visibility
 */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

/**
 * Desktop-only visibility
 */
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

/**
 * Inline desktop-only visibility
 */
.desktop-only-inline {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only-inline {
        display: inline;
    }
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION (Admin Panel)
   ========================================================================== */

/**
 * Bottom tab bar - fixed at bottom on mobile
 * Used for admin panel navigation
 */
@media (max-width: 767px) {
    /* Ensure admin main content doesn't hide behind fixed bottom nav */
    body.bg-brand-dark main,
    main.admin-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 2rem);
    }
}

/**
 * Safe area handling for iOS devices with home indicator
 */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

#mobile-bottom-nav {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
}

.safe-area-bottom-spacer {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   MORE SHEET (Slide-up Modal)
   ========================================================================== */

/**
 * More navigation sheet states
 */
#more-nav-sheet.is-open {
    pointer-events: auto;
}

#more-nav-sheet.is-open #more-nav-backdrop {
    opacity: 1;
}

#more-nav-sheet.is-open #more-nav-panel {
    transform: translateY(0);
}

/**
 * Smooth scrolling within sheet
 */
#more-nav-panel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/**
 * Body scroll lock when sheet is open
 * Prevents background scrolling on mobile
 */
body.more-sheet-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ==========================================================================
   ACCORDION CARD UTILITIES (Mobile Data Tables)
   ========================================================================== */

/**
 * Accordion content container
 * Uses max-height transition for smooth expand/collapse animation
 */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.is-open {
    max-height: 500px;
}

/**
 * Accordion trigger button styles
 * Rotates chevron icon when expanded
 */
.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-icon {
    transition: transform 0.3s ease;
}

/**
 * Card stack container
 * Provides consistent spacing between accordion cards
 */
.card-stack > * + * {
    margin-top: 0.75rem;
}

/**
 * Card hover state for accordion cards
 */
.accordion-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.accordion-card.is-expanded {
    border-color: rgba(153, 0, 1, 0.3);
}

/**
 * Card stack responsive spacing and sizing
 * Provides comfortable padding and width constraints across breakpoints
 */
.card-stack {
    padding: 1rem;
}

@media (min-width: 640px) {
    .card-stack {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .card-stack {
        padding: 2rem;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

/**
 * Accordion card responsive font sizing
 * Slightly larger text on desktop for better readability
 */
.accordion-card {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .accordion-card {
        font-size: 1rem;
    }
}

/* ==========================================================================
   TEXT TRUNCATION UTILITIES (Admin Tables)
   ========================================================================== */

/**
 * Fixed-width truncation utilities for table columns
 * Use with `title` attribute to show full text on hover
 */
.text-truncate-sm {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.text-truncate-md {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.text-truncate-lg {
    display: inline-block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/**
 * Block-level truncation for table cells
 * Constrains cell width while allowing text to truncate
 */
.cell-truncate {
    max-width: 200px;
}

.cell-truncate > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}