/*
Theme Name: Florian Kapteijn Photography
Theme URI: https://floriankapteijn.com
Author: Florian Kapteijn
Author URI: https://floriankapteijn.com
Description: Thème WordPress ultra-rapide, sécurisé et minimaliste dédié à la photographie météo, climat et grands espaces. Inclut un éditeur d'accueil intégré, un gestionnaire de galeries avec titres en transparence, un module de publication rapide d'actualités et un formulaire de contact sécurisé.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: kapteijn-theme
*/

:root {
--bg-main: #060608;
--bg-card: #0e0e12;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--accent-emerald: #34d399;
--grid-gap: 16px;
--grid-cols: 3;
--card-radius: 16px;
}

*, *::before, *::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
background-color: var(--bg-main);
color: var(--text-main);
}

body {
margin: 0;
background-color: var(--bg-main);
color: var(--text-main);
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}

.font-display {
font-family: 'Syne', sans-serif;
}

/* Effet Verre Dépoli (Titres en transparence devant les couvertures de galeries) */
.glass-title-badge {
background: rgba(10, 10, 14, 0.48);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Grilles Photographiques Dynamiques */
.kapteijn-photo-grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
gap: var(--grid-gap, 16px);
}

.kapteijn-card-radius {
border-radius: var(--card-radius, 16px);
}

/* Optimisation Mobile Stricte : textes sur une seule ligne & grilles fluides */
.single-line-mobile {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 768px) {
.kapteijn-photo-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}

.nav-pill-item {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
}


}