/**
 * AKA Theme V2 - Responsive CSS Framework
 * Mobile-first responsive layouts with flexible grid system
 * Requirements: 8.1, 8.5
 */

/* ============================================
   CSS Custom Properties for Responsive Design
   ============================================ */
:root {
    /* Breakpoint values (for reference in JS) */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1440px;
    
    /* Fluid spacing scale */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1vw, 0.75rem);
    --space-md: clamp(0.75rem, 1.5vw, 1rem);
    --space-lg: clamp(1rem, 2vw, 1.5rem);
    --space-xl: clamp(1.5rem, 3vw, 2rem);
    --space-2xl: clamp(2rem, 4vw, 3rem);
    --space-3xl: clamp(3rem, 6vw, 4.5rem);
    
    /* Fluid typography scale */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --text-5xl: clamp(3rem, 2rem + 5vw, 4rem);
    
    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1440px;
    
    /* Grid gaps */
    --grid-gap-sm: clamp(0.75rem, 1.5vw, 1rem);
    --grid-gap-md: clamp(1rem, 2vw, 1.5rem);
    --grid-gap-lg: clamp(1.5rem, 3vw, 2rem);
}

/* ============================================
   Base Responsive Styles
   ============================================ */

/* Fluid base font size */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-size: var(--text-base);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Responsive images */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Responsive media embeds */
iframe,
embed,
object {
    max-width: 100%;
}

/* ============================================
   Container System
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-xl {
    max-width: var(--container-xl);
}

.container-2xl {
    max-width: var(--container-2xl);
}

.container-fluid {
    max-width: 100%;
}

/* ============================================
   Flexible Grid System
   ============================================ */

.grid {
    display: grid;
    gap: var(--grid-gap-md);
}

/* Auto-fit grid (responsive columns) */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid-auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.grid-auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
}

/* Fixed column grids */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Grid gap utilities */
.gap-sm { gap: var(--grid-gap-sm); }
.gap-md { gap: var(--grid-gap-md); }
.gap-lg { gap: var(--grid-gap-lg); }
.gap-0 { gap: 0; }

/* ============================================
   Flexbox Utilities
   ============================================ */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* ============================================
   Responsive Typography
   ============================================ */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* Responsive headings */
h1, .h1 {
    font-size: var(--text-4xl);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

h2, .h2 {
    font-size: var(--text-3xl);
    line-height: 1.25;
    margin-bottom: var(--space-md);
}

h3, .h3 {
    font-size: var(--text-2xl);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

h4, .h4 {
    font-size: var(--text-xl);
    line-height: 1.35;
    margin-bottom: var(--space-sm);
}

h5, .h5 {
    font-size: var(--text-lg);
    line-height: 1.4;
    margin-bottom: var(--space-xs);
}

h6, .h6 {
    font-size: var(--text-base);
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

/* ============================================
   Responsive Spacing Utilities
   ============================================ */

/* Margin utilities */
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* Padding utilities */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ============================================
   Display Utilities
   ============================================ */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* ============================================
   Width Utilities
   ============================================ */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.max-w-full { max-width: 100%; }
.min-w-0 { min-width: 0; }

/* ============================================
   Height Utilities
   ============================================ */

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ============================================
   Position Utilities
   ============================================ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ============================================
   Overflow Utilities
   ============================================ */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ============================================
   Text Alignment
   ============================================ */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }



/* ============================================
   Responsive Breakpoint Classes
   Mobile-first approach
   ============================================ */

/* Small devices (480px and up) */
@media (min-width: 480px) {
    .sm\:block { display: block; }
    .sm\:hidden { display: none; }
    .sm\:flex { display: flex; }
    .sm\:grid { display: grid; }
    
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-col { flex-direction: column; }
    
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    
    .sm\:text-left { text-align: left; }
    .sm\:text-center { text-align: center; }
    .sm\:text-right { text-align: right; }
    
    .sm\:items-start { align-items: flex-start; }
    .sm\:items-center { align-items: center; }
    .sm\:items-end { align-items: flex-end; }
    
    .sm\:justify-start { justify-content: flex-start; }
    .sm\:justify-center { justify-content: center; }
    .sm\:justify-end { justify-content: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    
    .sm\:w-auto { width: auto; }
    .sm\:w-full { width: 100%; }
    .sm\:w-1\/2 { width: 50%; }
    .sm\:w-1\/3 { width: 33.333333%; }
    .sm\:w-2\/3 { width: 66.666667%; }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
    
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    
    .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }
    .md\:text-right { text-align: right; }
    
    .md\:items-start { align-items: flex-start; }
    .md\:items-center { align-items: center; }
    .md\:items-end { align-items: flex-end; }
    
    .md\:justify-start { justify-content: flex-start; }
    .md\:justify-center { justify-content: center; }
    .md\:justify-end { justify-content: flex-end; }
    .md\:justify-between { justify-content: space-between; }
    
    .md\:w-auto { width: auto; }
    .md\:w-full { width: 100%; }
    .md\:w-1\/2 { width: 50%; }
    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-2\/3 { width: 66.666667%; }
    .md\:w-1\/4 { width: 25%; }
    .md\:w-3\/4 { width: 75%; }
    
    /* Medium spacing */
    .md\:p-lg { padding: var(--space-lg); }
    .md\:p-xl { padding: var(--space-xl); }
    .md\:m-lg { margin: var(--space-lg); }
    .md\:m-xl { margin: var(--space-xl); }
    
    /* Medium gap */
    .md\:gap-md { gap: var(--grid-gap-md); }
    .md\:gap-lg { gap: var(--grid-gap-lg); }
}

/* Large devices (1024px and up) */
@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
    
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }
    
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
    
    .lg\:text-left { text-align: left; }
    .lg\:text-center { text-align: center; }
    .lg\:text-right { text-align: right; }
    
    .lg\:items-start { align-items: flex-start; }
    .lg\:items-center { align-items: center; }
    .lg\:items-end { align-items: flex-end; }
    
    .lg\:justify-start { justify-content: flex-start; }
    .lg\:justify-center { justify-content: center; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:justify-between { justify-content: space-between; }
    
    .lg\:w-auto { width: auto; }
    .lg\:w-full { width: 100%; }
    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-1\/3 { width: 33.333333%; }
    .lg\:w-2\/3 { width: 66.666667%; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-3\/4 { width: 75%; }
    .lg\:w-1\/5 { width: 20%; }
    .lg\:w-2\/5 { width: 40%; }
    .lg\:w-3\/5 { width: 60%; }
    .lg\:w-4\/5 { width: 80%; }
    
    /* Large spacing */
    .lg\:p-xl { padding: var(--space-xl); }
    .lg\:p-2xl { padding: var(--space-2xl); }
    .lg\:m-xl { margin: var(--space-xl); }
    .lg\:m-2xl { margin: var(--space-2xl); }
    
    /* Large gap */
    .lg\:gap-lg { gap: var(--grid-gap-lg); }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
    .xl\:block { display: block; }
    .xl\:hidden { display: none; }
    .xl\:flex { display: flex; }
    .xl\:grid { display: grid; }
    
    .xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
    
    .xl\:w-auto { width: auto; }
    .xl\:w-full { width: 100%; }
    .xl\:w-1\/2 { width: 50%; }
    .xl\:w-1\/3 { width: 33.333333%; }
    .xl\:w-2\/3 { width: 66.666667%; }
    .xl\:w-1\/4 { width: 25%; }
    .xl\:w-3\/4 { width: 75%; }
}

/* ============================================
   Component-Specific Responsive Styles
   ============================================ */

/* Responsive Hero Section */
.site-hero {
    padding: var(--space-xl) var(--space-md);
}

@media (min-width: 768px) {
    .site-hero {
        padding: var(--space-2xl) var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .site-hero {
        padding: var(--space-3xl) var(--space-xl);
    }
}

/* Responsive Card Grid */
.card-grid {
    display: grid;
    gap: var(--grid-gap-md);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-lg);
    }
}

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

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive Team/Board Grid */
.team-grid,
.board-grid {
    display: grid;
    gap: var(--grid-gap-md);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .team-grid,
    .board-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid,
    .board-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-lg);
    }
}

@media (min-width: 1200px) {
    .team-grid,
    .board-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive Sections */
.site-section {
    padding: var(--space-xl) 0;
}

@media (min-width: 768px) {
    .site-section {
        padding: var(--space-2xl) 0;
    }
}

@media (min-width: 1024px) {
    .site-section {
        padding: var(--space-3xl) 0;
    }
}

/* Responsive Content Sections */
.content-section {
    padding: var(--space-lg) var(--space-md);
    margin: var(--space-lg) 0;
}

@media (min-width: 768px) {
    .content-section {
        padding: var(--space-xl) var(--space-lg);
        margin: var(--space-xl) 0;
    }
}

@media (min-width: 1024px) {
    .content-section {
        padding: var(--space-2xl) var(--space-xl);
        margin: var(--space-2xl) 0;
    }
}

/* Responsive WordPress Blocks */
.wp-block-columns {
    flex-direction: column;
    gap: var(--grid-gap-md);
}

@media (min-width: 768px) {
    .wp-block-columns {
        flex-direction: row;
    }
}

.wp-block-column {
    flex-basis: 100%;
}

@media (min-width: 768px) {
    .wp-block-column {
        flex-basis: 0;
        flex-grow: 1;
    }
}

/* Responsive Buttons */
.wp-block-buttons {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

@media (max-width: 480px) {
    .wp-block-buttons {
        flex-direction: column;
    }
    
    .wp-block-button {
        width: 100%;
    }
    
    .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}

/* Responsive Tables */
.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-block-table table {
    min-width: 600px;
}

@media (min-width: 768px) {
    .wp-block-table table {
        min-width: auto;
    }
}

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

@media print {
    .hidden-print,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    .grid {
        display: block;
    }
    
    .card {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --kurdish-red: #ff0000;
        --kurdish-green: #008000;
        --kurdish-yellow: #ffff00;
        --aka-gray: #000000;
    }
    
    .card,
    .content-section {
        border: 2px solid currentColor;
    }
    
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ============================================
   Dark Mode Support (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --kurdish-white: #1a1a1a;
        --aka-slate: #e5e5e5;
        --aka-light-gray: #2d2d2d;
        --aka-cream: #1f1f1f;
    }
    
    body {
        background-color: var(--kurdish-white);
        color: var(--aka-slate);
    }
    
    .card {
        background-color: var(--aka-light-gray);
        border-color: rgba(255, 255, 255, 0.1);
    }
}