/*
Theme Name: WA Photography
Theme URI: https://wordpress.org/themes/wa-photography/
Author: webaddict.ch
Author URI: https://www.webaddict.ch/
Description: A modern photography theme with full site editing support, designed for photographers and visual storytellers.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wa-photography
Tags: photography, portfolio, full-site-editing, block-patterns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, block-styles, wide-blocks, accessibility-ready

This theme is designed for photographers and visual storytellers, featuring modern design elements and full site editing capabilities.
*/
/* Base styles */
:root {
    /* Colors */
    --color-primary: #b8bcbf;
    --color-secondary: #222122;
    --color-accent: #d6bca1;
    --color-background: #faf4ee;
    --color-alt-1: #b9beb7;
    --color-alt-2: #b89579;
    --color-alt-3: #ead6b8;
    --color-alt-4: #716b55;
    
    /* Font Families */
    --font-primary: 'Cormorant Garamond', serif;
    --font-secondary: 'HK Grotesk Pro', sans-serif;
    --font-accent: 'Flanella', cursive;
    
    /* Fluid Typography */
    --font-small: clamp(0.875rem, 0.8vw + 0.7rem, 1rem);
    --font-body: clamp(1rem, 1vw + 0.85rem, 1.125rem);
    --font-h6: clamp(1.125rem, 1.2vw + 0.9rem, 1.25rem);
    --font-h5: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
    --font-h4: clamp(1.5rem, 2vw + 1.1rem, 1.875rem);
    --font-h3: clamp(1.875rem, 2.5vw + 1.2rem, 2.25rem);
    --font-h2: clamp(2.25rem, 3vw + 1.3rem, 3rem);
    --font-h1: clamp(3rem, 4vw + 1.4rem, 4rem);
    --font-display: clamp(3.75rem, 5vw + 1.5rem, 5rem);
    
    /* Spacing */
    --spacing-xs: clamp(0.5rem, 0.5vw + 0.25rem, 0.75rem);
    --spacing-sm: clamp(1rem, 1vw + 0.5rem, 1.5rem);
    --spacing-md: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
    --spacing-lg: clamp(2rem, 3vw + 1rem, 3rem);
    --spacing-xl: clamp(3rem, 4vw + 1.5rem, 4.5rem);
    --spacing-xxl: clamp(4rem, 5vw + 2rem, 6rem);
    
    /* Transitions */
    --transition-standard: 0.3s ease;
    --transition-slow: 0.6s ease-in-out;
    
    /* Layout */
    --content-width: 1200px;
    --wide-width: 1400px;
}

/* Font Family Assignments */
body {
    font-family: var(--font-primary);
    color: var(--color-secondary);
    background-color: var(--color-background);
    font-size: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: var(--font-h4);
}

h5 {
    font-size: var(--font-h5);
}

h6 {
    font-size: var(--font-h6);
}

.subtitle {
    font-family: var(--font-secondary);
}

.quote {
    font-family: var(--font-accent);
}

/* Animation Utilities */
.fade-in {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.fade-in.visible {
    opacity: 1;
}

.slide-up {
    transform: translateY(20px);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.slide-up.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Structure de base pour sticky footer */
html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Styles spécifiques pour les blocs WordPress */
.wp-site-blocks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.wp-site-blocks > * {
    margin-top: 0;
    margin-bottom: 0;
}

.wp-site-blocks > main {
    flex: 1 0 auto;
}

.wp-site-blocks > footer,
.wp-block-template-part.footer {
    flex-shrink: 0;
    position: relative;
    margin-top: auto;
}

/* Ajustements pour le contenu du portfolio */
.portfolio-content {
    min-height: 50vh;
}

/* Correction pour les marges négatives */
.wp-site-blocks > .wp-block-group {
    margin-top: 0 !important;
}

/* Assurer que le contenu principal prend au moins la hauteur disponible */
.wp-block-group.is-layout-flow,
.wp-block-template-part.header + .wp-block-group {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
} 

/* Styles de liens */
a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-standard);
}

a:hover, 
a:focus {
    color: var(--color-accent);
}

/* Styles de boutons */
.wp-block-button__link {
    background-color: var(--color-accent);
    color: var(--color-secondary);
    transition: background-color var(--transition-standard), color var(--transition-standard);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

.is-style-outline .wp-block-button__link {
    border-color: var(--color-accent);
    color: var(--color-secondary);
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* Utilitaires d'espacement */
.margin-top-xs { margin-top: var(--spacing-xs); }
.margin-top-sm { margin-top: var(--spacing-sm); }
.margin-top-md { margin-top: var(--spacing-md); }
.margin-top-lg { margin-top: var(--spacing-lg); }
.margin-top-xl { margin-top: var(--spacing-xl); }

.margin-bottom-xs { margin-bottom: var(--spacing-xs); }
.margin-bottom-sm { margin-bottom: var(--spacing-sm); }
.margin-bottom-md { margin-bottom: var(--spacing-md); }
.margin-bottom-lg { margin-bottom: var(--spacing-lg); }
.margin-bottom-xl { margin-bottom: var(--spacing-xl); }

.padding-xs { padding: var(--spacing-xs); }
.padding-sm { padding: var(--spacing-sm); }
.padding-md { padding: var(--spacing-md); }
.padding-lg { padding: var(--spacing-lg); }
.padding-xl { padding: var(--spacing-xl); }