/*
Theme Name: WAM V1
Description: Theme sur-mesure pour WAM Dance Studio (Refonte)
Author: Antoine Boursier
Version: 1.2
Text Domain: wamv1
*/

/* =====================================================
   RESET MINIMAL
   ===================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--outfit);
    background-color: var(--wp--preset--color--background-800);
    color: var(--wp--preset--color--text-normal);
}

/* =====================================================
   CLASSES TYPOGRAPHIQUES
   Mapping direct des styles Figma → classes CSS
   Ne pas recréer ces propriétés inline, utiliser les classes.
   ===================================================== */

/* --- Titres "Cool" (WAM Font) --- */
.title-cool-md {
    font-family: var(--wam-font-graphical-2);
    font-size: var(--wam-font-size-display-md);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}

.title-cool-lg {
    font-family: var(--wam-font-graphical-2);
    font-size: var(--wam-font-size-display-lg);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}

/* --- Titres "Sign" (Mallia) --- */
.title-sign-lg {
    font-family: var(--wam-font-graphical-1);
    font-size: var(--wam-font-size-h1);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

.title-sign-md {
    font-family: var(--wam-font-graphical-1);
    font-size: var(--wam-font-size-h2);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}

.title-sign-sm {
    font-family: var(--wam-font-graphical-1);
    font-size: var(--wam-font-size-h3);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}

/* --- Titres "Norm" (Outfit Bold) --- */
.title-norm-lg {
    font-family: var(--wam-font-body);
    font-size: var(--wam-font-size-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.title-norm-md {
    font-family: var(--wam-font-body);
    font-size: var(--wam-font-size-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.title-norm-sm {
    font-family: var(--wam-font-body);
    font-size: var(--wam-font-size-h3);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

/* --- Paragraphes (Outfit Regular) --- */
.text-lg {
    font-size: var(--wam-font-size-lg);
    font-weight: 400;
    line-height: 1.25;
}

.text-md {
    font-size: var(--wam-font-size-md);
    font-weight: 400;
    line-height: 1.25;
}

.text-sm {
    font-size: var(--wam-font-size-sm);
    font-weight: 400;
    line-height: 1.25;
}

.text-xs {
    font-size: var(--wam-font-size-xs);
    font-weight: 400;
    line-height: 1.25;
}

/* =====================================================
   COMPOSANTS RÉUTILISABLES
   ===================================================== */

/* --- Page fallback (index.php — template générique) --- */
.page-fallback {
    padding: var(--wp--preset--spacing--xl);
    text-align: center;
}

.page-fallback h1 {
    color: var(--wp--preset--color--accent-pink);
}

/* --- Card article (featured — fond tertiary) --- */
.card-article {
    background: var(--wam-color-accent-tertiary-bg);
}

/* --- Carte professeur·e --- */
/* Pastille flèche sur les cartes prof */
.teacher-card__arrow {
    background: var(--wam-color-glass-white);
}

/* Placeholder cartes prof (aucun user avec rôle professeur/directrice) */
.teacher-card--placeholder {
    pointer-events: none;
}

.teacher-card--placeholder .title-sign-sm {
    opacity: 0.3;
}

.teacher-card--placeholder .text-md {
    opacity: 0.2;
}

/* =====================================================
   UTILITAIRES ACCESSIBILITÉ
   ===================================================== */

/* Contenu visuellement caché mais accessible aux lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Utilitaires couleur — pour les classes dynamiques PHP (ex: <?php echo $is_enfant ? 'color-green' : 'color-text'; ?>) */
.color-text {
    color: var(--wam-color-text);
}

.color-subtext {
    color: var(--wam-color-subtext);
}

.color-muted,
.color-disabled {
    color: var(--wam-color-disabled);
}

.color-green {
    color: var(--wam-color-green);
}

.color-yellow {
    color: var(--wam-color-yellow);
}

.color-orange {
    color: var(--wam-color-orange);
}

.color-pink {
    color: var(--wam-color-pink);
}

.bg-page {
    background-color: var(--wam-color-page-bg);
}

.bg-card {
    background-color: var(--wam-color-card-bg);
}

.fw-bold {
    font-weight: 700;
}

/* Focus visible — ne jamais supprimer sans remplacer */
:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent-yellow);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Menu caché de liens d'évitement */
.skip-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Skip link — visible uniquement au focus clavier (WCAG 2.4.1) */
.skip-link:focus {
    position: fixed;
    top: var(--wam-spacing-sm);
    left: var(--wam-spacing-sm);
    z-index: 99999;
    padding: var(--wam-spacing-xs) var(--wam-spacing-lg);
    background: var(--wam-color-yellow);
    color: var(--wam-color-page-bg);
    font-weight: 700;
    font-size: var(--wam-font-size-sm);
    border-radius: var(--wam-radius-sm);
    clip: auto;
    width: auto;
    height: auto;
    text-decoration: none;
    box-shadow: var(--wam-shadow-md);
}