/*
Theme Name: Tolarian Spellbook - GeneratePress Child
Theme URI: https://tolarianspellbook.com
Description: Child theme per GeneratePress ottimizzato per gallerie, carte MTG e decklist - Mobile First Responsive
Author: Tolarian Spellbook Team
Author URI: https://tolarianspellbook.com
Template: generatepress
Version: 2.2.0
Text Domain: tolarian-spellbook
*/

/* ==========================================================================
   CSS Variables - Mobile First System
   ========================================================================== */
:root {
    /* Colors - Neutral Palette */
    --ts-primary: #2c3e50;
    --ts-secondary: #34495e;
    --ts-accent: #3498db;
    --ts-light: #ecf0f1;
    --ts-lighter: #f8f9fa;
    --ts-white: #ffffff;
    --ts-gray: #95a5a6;
    --ts-gray-light: #bdc3c7;
    --ts-text: #2c3e50;
    --ts-border: #e1e8ed;
    
    /* Typography - Mobile First Font System */
    --ts-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ts-font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Font Sizes - Mobile Base (320px) */
    --ts-text-xs: 0.75rem;     /* 12px */
    --ts-text-sm: 0.875rem;    /* 14px */
    --ts-text-base: 1rem;      /* 16px */
    --ts-text-lg: 1.125rem;    /* 18px */
    --ts-text-xl: 1.25rem;     /* 20px */
    --ts-text-2xl: 1.5rem;     /* 24px */
    --ts-text-3xl: 1.875rem;   /* 30px */
    --ts-text-4xl: 2.25rem;    /* 36px */
    --ts-text-5xl: 3rem;       /* 48px */
    
    /* Line Heights */
    --ts-leading-tight: 1.25;
    --ts-leading-normal: 1.5;
    --ts-leading-relaxed: 1.625;
    --ts-leading-loose: 2;
    
    /* Spacing - Mobile Base */
    --ts-spacing-xs: 0.25rem;  /* 4px */
    --ts-spacing-sm: 0.5rem;   /* 8px */
    --ts-spacing-md: 1rem;     /* 16px */
    --ts-spacing-lg: 1.5rem;   /* 24px */
    --ts-spacing-xl: 2rem;     /* 32px */
    --ts-spacing-2xl: 3rem;    /* 48px */
    --ts-spacing-3xl: 4rem;    /* 64px */
    
    /* Container Sizes */
    --ts-container-xs: 100%;    /* Small phones */
    --ts-container-sm: 100%;    /* Large phones */
    --ts-container-md: 768px;   /* Tablets */
    --ts-container-lg: 1024px;  /* Small laptops */
    --ts-container-xl: 1280px;  /* Laptops */
    --ts-container-2xl: 1536px; /* Desktops */
    --ts-container-ultra: 1920px; /* Ultra wide */
    
    /* Viewport Breakpoints */
    --ts-bp-xs: 320px;    /* Small Android */
    --ts-bp-sm: 375px;    /* iPhone SE */
    --ts-bp-md: 390px;    /* iPhone 12/13 */
    --ts-bp-lg: 430px;    /* iPhone 14 Pro Max */
    --ts-bp-tablet: 768px;     /* iPad */
    --ts-bp-desktop: 1024px;   /* Desktop */
    --ts-bp-wide: 1440px;      /* Large Desktop */
    --ts-bp-ultra: 1920px;     /* iMac 27" */
}

/* ==========================================================================
   Base Styles - Mobile First (320px+)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base font size */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    
    /* Prevenire auto dark mode su Android/Xiaomi */
    color-scheme: light only;
    -webkit-color-scheme: light only;
    
    /* Forza background bianco per prevenire temi scuri */
    background-color: #ffffff !important;
}

body {
    font-family: var(--ts-font-family-base);
    font-size: var(--ts-text-base);
    line-height: var(--ts-leading-normal);
    color: var(--ts-text) !important;
    background-color: var(--ts-lighter) !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    
    /* Forza tema chiaro su tutti i dispositivi */
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
    
    /* Previeni inversione colori automatica */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Typography - Mobile First */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ts-font-family-heading);
    font-weight: 700;
    line-height: var(--ts-leading-tight);
    margin: 0 0 var(--ts-spacing-md) 0;
    color: var(--ts-primary);
}

/* Mobile-optimized font sizes */
h1 { font-size: var(--ts-text-xl); }    /* Ridotto da 2xl a xl per mobile */
h2 { font-size: var(--ts-text-lg); }    /* Ridotto da xl a lg per mobile */
h3 { font-size: var(--ts-text-base); }  /* Ridotto da lg a base per mobile */
h4 { font-size: var(--ts-text-sm); }    /* Ridotto da base a sm per mobile */
h5 { font-size: var(--ts-text-xs); }    /* Ridotto da sm a xs per mobile */
h6 { font-size: var(--ts-text-xs); }

p {
    margin: 0 0 var(--ts-spacing-md) 0;
    font-size: var(--ts-text-base);
    line-height: var(--ts-leading-relaxed);
}

/* Links */
a {
    color: var(--ts-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--ts-primary);
    text-decoration: underline;
}

/* Styling raffinato per le menzioni delle carte MTG nel testo (risoluzione 'Sea of Blue') */
.mtg-card-tooltip {
    color: #1e293b !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1.5px dotted #64748b;
    padding: 1px 4px;
    border-radius: 4px;
    background-color: rgba(241, 245, 249, 0.6);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: inline;
}

.mtg-card-tooltip:hover,
.mtg-card-tooltip:focus {
    color: #0284c7 !important;
    background-color: #e0f2fe;
    border-bottom-color: #0284c7;
    outline: none;
}

/* Images - Responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Container System - Mobile First
   ========================================================================== */
.container,
.site-content {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--ts-spacing-md);
    max-width: var(--ts-container-xs);
}

/* ==========================================================================
   Gallery System - Mobile Optimized
   ========================================================================== */
.ts-gallery {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: var(--ts-spacing-md);
    margin: var(--ts-spacing-lg) 0;
}

.ts-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ts-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ts-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ts-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.ts-gallery-item:hover img {
    transform: scale(1.02);
}

/* Gallery Overlay */
.ts-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: var(--ts-white);
    padding: var(--ts-spacing-md) var(--ts-spacing-sm);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.ts-gallery-item:hover .ts-gallery-overlay {
    transform: translateY(0);
}

.ts-gallery-overlay h3 {
    margin: 0;
    font-size: var(--ts-text-sm);
    font-weight: 600;
}

.ts-gallery-overlay p {
    margin: var(--ts-spacing-xs) 0 0;
    font-size: var(--ts-text-xs);
    opacity: 0.9;
}

/* ==========================================================================
   Navigation - Mobile First
   ========================================================================== */
.main-navigation {
    background: var(--ts-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.main-navigation a {
    color: var(--ts-text);
    padding: var(--ts-spacing-sm) var(--ts-spacing-md);
    font-size: var(--ts-text-sm);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.main-navigation a:hover {
    color: var(--ts-accent);
    background-color: var(--ts-lighter);
}

.menu-toggle {
    background: var(--ts-white);
    border: 2px solid var(--ts-border);
    color: var(--ts-text);
    padding: var(--ts-spacing-xs) var(--ts-spacing-sm);
    border-radius: 4px;
    font-size: var(--ts-text-sm);
}

/* ==========================================================================
   Featured Gallery Section
   ========================================================================== */
.ts-featured-gallery {
    background: var(--ts-white);
    padding: var(--ts-spacing-lg) var(--ts-spacing-md);
    margin: var(--ts-spacing-lg) 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ts-featured-gallery h2 {
    text-align: center;
    color: var(--ts-primary);
    margin-bottom: var(--ts-spacing-lg);
    font-size: var(--ts-text-xl);
    font-weight: 700;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-xs { font-size: var(--ts-text-xs); }
.font-sm { font-size: var(--ts-text-sm); }
.font-base { font-size: var(--ts-text-base); }
.font-lg { font-size: var(--ts-text-lg); }
.font-xl { font-size: var(--ts-text-xl); }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS - Mobile First Approach
   ========================================================================== */

/* Extra Small Mobile (320px-374px) - Ottimizzazione per schermi molto piccoli */
@media (max-width: 374px) {
    h1 { font-size: var(--ts-text-lg) !important; }    /* Ancora più piccolo per schermi tiny */
    h2 { font-size: var(--ts-text-base) !important; }
    h3 { font-size: var(--ts-text-sm) !important; }
    
    .ts-featured-gallery h2 {
        font-size: var(--ts-text-lg) !important;
    }
    
    .container,
    .site-content {
        padding: 0 var(--ts-spacing-sm) !important;
    }
    
    /* Forza tema chiaro per dispositivi Android piccoli */
    body {
        background-color: #f8f9fa !important;
        color: #2c3e50 !important;
    }
}

/* Small Mobile (375px+) - iPhone SE, older Android */
@media (min-width: 375px) {
    :root {
        --ts-text-base: 1rem;
        --ts-text-lg: 1.125rem;
        --ts-text-xl: 1.25rem;
        --ts-text-2xl: 1.5rem;
        --ts-text-3xl: 1.875rem;
    }
    
    .container,
    .site-content {
        padding: 0 var(--ts-spacing-lg);
    }
    
    .ts-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ts-spacing-sm);
    }
}

/* Medium Mobile (390px+) - iPhone 12/13 */
@media (min-width: 390px) {
    h1 { font-size: var(--ts-text-2xl); }  /* Graduale aumento */
    h2 { font-size: var(--ts-text-xl); }
    h3 { font-size: var(--ts-text-lg); }
    
    .ts-gallery-overlay h3 {
        font-size: var(--ts-text-base);
    }
    
    .ts-gallery-overlay p {
        font-size: var(--ts-text-sm);
    }
}

/* Large Mobile (430px+) - iPhone 14 Pro Max */
@media (min-width: 430px) {
    :root {
        --ts-spacing-md: 1.25rem;
        --ts-spacing-lg: 1.75rem;
        --ts-spacing-xl: 2.25rem;
    }
    
    .ts-gallery {
        gap: var(--ts-spacing-md);
    }
    
    .main-navigation a {
        font-size: var(--ts-text-base);
        padding: var(--ts-spacing-md) var(--ts-spacing-lg);
    }
}

/* Tablet Portrait (768px+) - iPad */
@media (min-width: 768px) {
    :root {
        --ts-text-base: 1.125rem;
        --ts-text-lg: 1.25rem;
        --ts-text-xl: 1.5rem;
        --ts-text-2xl: 1.875rem;
        --ts-text-3xl: 2.25rem;
        --ts-text-4xl: 2.5rem;
        --ts-spacing-md: 1.5rem;
        --ts-spacing-lg: 2rem;
        --ts-spacing-xl: 2.5rem;
        --ts-spacing-2xl: 3.5rem;
    }
    
    .container,
    .site-content {
        max-width: var(--ts-container-md);
        padding: 0 var(--ts-spacing-xl);
    }
    
    .ts-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ts-spacing-lg);
    }
    
    .ts-featured-gallery {
        padding: var(--ts-spacing-xl) var(--ts-spacing-lg);
    }
    
    .ts-featured-gallery h2 {
        font-size: var(--ts-text-3xl);
    }
    
    h1 { font-size: var(--ts-text-4xl); }
    h2 { font-size: var(--ts-text-3xl); }
    h3 { font-size: var(--ts-text-2xl); }
}

/* Tablet Landscape / Small Desktop (1024px+) */
@media (min-width: 1024px) {
    :root {
        --ts-text-base: 1.125rem;
        --ts-text-lg: 1.375rem;
        --ts-text-xl: 1.625rem;
        --ts-text-2xl: 2rem;
        --ts-text-3xl: 2.5rem;
        --ts-text-4xl: 3rem;
        --ts-text-5xl: 3.75rem;
    }
    
    .container,
    .site-content {
        max-width: var(--ts-container-lg);
        padding: 0 var(--ts-spacing-2xl);
    }
    
    .ts-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--ts-spacing-xl);
    }
    
    .ts-featured-gallery {
        padding: var(--ts-spacing-2xl) var(--ts-spacing-xl);
    }
    
    h1 { font-size: var(--ts-text-5xl); }
    h2 { font-size: var(--ts-text-4xl); }
    h3 { font-size: var(--ts-text-3xl); }
    
    .main-navigation a {
        padding: var(--ts-spacing-lg) var(--ts-spacing-xl);
    }
}

/* Desktop (1280px+) */
@media (min-width: 1280px) {
    .container,
    .site-content {
        max-width: var(--ts-container-xl);
    }
    
    .ts-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    :root {
        --ts-text-base: 1.25rem;
        --ts-text-lg: 1.5rem;
        --ts-text-xl: 1.75rem;
        --ts-text-2xl: 2.25rem;
        --ts-text-3xl: 2.75rem;
        --ts-text-4xl: 3.25rem;
        --ts-text-5xl: 4rem;
    }
    
    .container,
    .site-content {
        max-width: var(--ts-container-2xl);
    }
    
    .ts-gallery {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--ts-spacing-2xl);
    }
}

/* Ultra Wide / iMac 27" (1920px+) */
@media (min-width: 1920px) {
    :root {
        --ts-text-base: 1.375rem;
        --ts-text-lg: 1.625rem;
        --ts-text-xl: 2rem;
        --ts-text-2xl: 2.5rem;
        --ts-text-3xl: 3rem;
        --ts-text-4xl: 3.5rem;
        --ts-text-5xl: 4.5rem;
        --ts-spacing-2xl: 4rem;
        --ts-spacing-3xl: 5rem;
    }
    
    .container,
    .site-content {
        max-width: var(--ts-container-ultra);
        padding: 0 var(--ts-spacing-3xl);
    }
    
    .ts-gallery {
        grid-template-columns: repeat(8, 1fr);
        gap: var(--ts-spacing-2xl);
    }
    
    .ts-featured-gallery {
        padding: var(--ts-spacing-3xl) var(--ts-spacing-2xl);
    }
    
    h1 { font-size: var(--ts-text-5xl); }
    h2 { font-size: var(--ts-text-4xl); }
    h3 { font-size: var(--ts-text-3xl); }
}

/* ==========================================================================
   High DPI / Retina Displays
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .ts-gallery-item img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==========================================================================
   Touch Device Optimizations
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    .ts-gallery-item:hover {
        transform: none;
    }
    
    .ts-gallery-item:active {
        transform: scale(0.98);
    }
    
    .main-navigation a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .menu-toggle {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    :root {
        --ts-text-base: 12pt;
        --ts-text-lg: 14pt;
        --ts-text-xl: 16pt;
        --ts-text-2xl: 18pt;
        --ts-text-3xl: 24pt;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .site-header,
    .site-footer,
    .main-navigation,
    .menu-toggle {
        display: none;
    }
    
    .ts-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        break-inside: avoid;
    }
    
    .ts-gallery-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .ts-gallery-overlay {
        position: static;
        transform: none;
        background: #f5f5f5;
        color: black;
        padding: 0.5rem;
    }
    
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
        color: black;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    img {
        max-width: 100%;
        break-inside: avoid;
    }
}