/*
 * Theme Name:  Volley Liège Child
 * Theme URI:   https://www.volleyliege.be
 * Description: Thème enfant de Hello Elementor pour le Comité Provincial de Volleyball de Liège (RCPLgVB)
 * Author:      Agile Minds SRL
 * Author URI:  https://www.agile-minds.be
 * Template:    hello-elementor
 * Version:     1.0.0
 * Text Domain: volleyliege-child
 * License:     GPL-2.0-or-later
 */

/* =============================================================================
   VARIABLES CSS — PALETTE VOLLEY LIÈGE
   ============================================================================= */

:root {
    /* --- Couleurs principales (extraites du logo officiel) --- */
    --vl-rouge:        #E82810;
    --vl-rouge-dark:   #C41E0A;
    --vl-rouge-light:  #F04830;

    --vl-gold:         #F8D800;
    --vl-gold-dark:    #D4B800;
    --vl-gold-light:   #FAE540;

    --vl-anthracite:   #1A1A2E;
    --vl-anthracite-80:#3a3a52;
    --vl-anthracite-60:#5e5e76;

    /* --- Neutres --- */
    --vl-grey-light:   #F3F4F6;
    --vl-grey-mid:     #D1D5DB;
    --vl-grey-dark:    #6B7280;
    --vl-white:        #FFFFFF;
    --vl-black:        #0D0D0D;

    /* --- Sémantiques --- */
    --vl-color-primary:     var(--vl-rouge);
    --vl-color-secondary:   var(--vl-gold);
    --vl-color-accent:      var(--vl-anthracite);
    --vl-color-bg:          var(--vl-grey-light);
    --vl-color-surface:     var(--vl-white);
    --vl-color-text:        var(--vl-anthracite);
    --vl-color-text-muted:  var(--vl-grey-dark);
    --vl-color-border:      var(--vl-grey-mid);

    /* --- Typographie --- */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;

    --vl-font-size-xs:   0.75rem;   /* 12px */
    --vl-font-size-sm:   0.875rem;  /* 14px */
    --vl-font-size-base: 1rem;      /* 16px */
    --vl-font-size-lg:   1.125rem;  /* 18px */
    --vl-font-size-xl:   1.25rem;   /* 20px */
    --vl-font-size-2xl:  1.5rem;    /* 24px */
    --vl-font-size-3xl:  1.875rem;  /* 30px */
    --vl-font-size-4xl:  2.25rem;   /* 36px */
    --vl-font-size-5xl:  3rem;      /* 48px */

    --vl-font-weight-regular:    400;
    --vl-font-weight-medium:     500;
    --vl-font-weight-semibold:   600;
    --vl-font-weight-bold:       700;

    --vl-line-height-tight:  1.25;
    --vl-line-height-normal: 1.5;
    --vl-line-height-loose:  1.75;

    /* --- Espacements (échelle 4px) --- */
    --vl-space-1:  0.25rem;   /* 4px */
    --vl-space-2:  0.5rem;    /* 8px */
    --vl-space-3:  0.75rem;   /* 12px */
    --vl-space-4:  1rem;      /* 16px */
    --vl-space-5:  1.25rem;   /* 20px */
    --vl-space-6:  1.5rem;    /* 24px */
    --vl-space-8:  2rem;      /* 32px */
    --vl-space-10: 2.5rem;    /* 40px */
    --vl-space-12: 3rem;      /* 48px */
    --vl-space-16: 4rem;      /* 64px */
    --vl-space-20: 5rem;      /* 80px */

    /* --- Bordures & rayons --- */
    --vl-radius-sm:  4px;
    --vl-radius-md:  8px;
    --vl-radius-lg:  16px;
    --vl-radius-xl:  24px;
    --vl-radius-full: 9999px;

    --vl-border-width:       1px;
    --vl-border-width-thick: 3px;

    /* --- Ombres --- */
    --vl-shadow-sm:  0 1px 3px rgba(26, 26, 46, 0.10);
    --vl-shadow-md:  0 4px 12px rgba(26, 26, 46, 0.12);
    --vl-shadow-lg:  0 8px 24px rgba(26, 26, 46, 0.16);
    --vl-shadow-xl:  0 16px 40px rgba(26, 26, 46, 0.20);

    /* --- Transitions --- */
    --vl-transition-fast:   150ms ease-in-out;
    --vl-transition-normal: 250ms ease-in-out;
    --vl-transition-slow:   400ms ease-in-out;

    /* --- Breakpoints (référence documentation) --- */
    /* --vl-bp-sm:  640px  */
    /* --vl-bp-md:  768px  */
    /* --vl-bp-lg:  1024px */
    /* --vl-bp-xl:  1280px */
    /* --vl-bp-2xl: 1536px */

    /* --- Layout --- */
    --vl-container-max:    1280px;
    --vl-container-narrow: 860px;
    --vl-header-height:    80px;
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */

body {
    font-family: var(--font-body);
    font-size: var(--vl-font-size-base);
    line-height: var(--vl-line-height-normal);
    color: var(--vl-color-text);
    background-color: var(--vl-color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--vl-font-weight-bold);
    line-height: var(--vl-line-height-tight);
    color: var(--vl-color-text);
}

a {
    color: var(--vl-color-primary);
    transition: color var(--vl-transition-fast);
}

a:hover {
    color: var(--vl-rouge-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   GRILLES CPT — responsive
   ============================================================================= */

.vl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 768px) {
    .vl-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .vl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.vl-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.vl-card a:hover {
    background: var(--vl-rouge);
    color: #fff !important;
}

/* =============================================================================
   HOMEPAGE — masquer le titre de page + supprimer les marges
   ============================================================================= */

.home .entry-title,
.home .page-title,
.home main > article > header,
.page-template-default.home #content > article > .entry-header {
    display: none;
}

.home #content,
.home main,
.home .site-main,
.home .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* =============================================================================
   HEADER
   ============================================================================= */

.vl-topbar {
    background: var(--vl-rouge);
}

.vl-topbar__inner {
    max-width: var(--vl-container-max);
    margin: 0 auto;
    padding: 8px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vl-topbar__text,
.vl-topbar__email {
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--vl-font-size-sm);
}

.vl-header {
    background: var(--vl-anthracite);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.vl-header__inner {
    max-width: var(--vl-container-max);
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vl-space-8);
}

.vl-header__logo {
    flex-shrink: 0;
    text-decoration: none;
}

.vl-header__logo-img {
    max-height: 70px;
    width: auto;
}

.vl-header__sitename {
    font-family: var(--font-display);
    font-size: var(--vl-font-size-2xl);
    font-weight: var(--vl-font-weight-bold);
    color: var(--vl-white);
    text-transform: uppercase;
}

.vl-header__nav {
    display: flex;
    align-items: center;
}

.vl-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--vl-space-1);
}

.vl-header__menu li a {
    display: block;
    padding: 8px 14px;
    color: var(--vl-white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--vl-font-weight-semibold);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--vl-transition-fast), border-color var(--vl-transition-fast);
}

.vl-header__menu li a:hover,
.vl-header__menu li.current-menu-item a {
    color: var(--vl-gold);
    border-bottom-color: var(--vl-gold);
}

/* Burger mobile */
.vl-header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.vl-header__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--vl-white);
    transition: transform var(--vl-transition-fast);
}

@media (max-width: 768px) {
    .vl-header__burger { display: flex; }
    .vl-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--vl-anthracite);
        padding: var(--vl-space-4);
        box-shadow: var(--vl-shadow-lg);
    }
    .vl-header__nav--open { display: block; }
    .vl-header__menu { flex-direction: column; }
    .vl-header__menu li a { padding: 12px 20px; }
    .vl-topbar__inner { flex-direction: column; gap: 4px; text-align: center; }
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.vl-footer {
    background: var(--vl-anthracite);
    color: var(--vl-grey-mid);
}

.vl-footer__main {
    max-width: var(--vl-container-max);
    margin: 0 auto;
    padding: 60px 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.vl-footer__logo-img {
    max-height: 80px;
    width: auto;
    margin-bottom: var(--vl-space-4);
}

.vl-footer__desc {
    color: #9CA3AF;
    font-family: var(--font-body);
    font-size: var(--vl-font-size-sm);
    line-height: var(--vl-line-height-loose);
    margin: 0;
}

.vl-footer__title {
    color: var(--vl-gold);
    font-family: var(--font-display);
    font-size: var(--vl-font-size-base);
    font-weight: var(--vl-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--vl-space-4) 0;
}

.vl-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vl-footer__links li {
    margin-bottom: 8px;
}

.vl-footer__links a {
    color: var(--vl-grey-mid);
    font-family: var(--font-body);
    font-size: var(--vl-font-size-sm);
    text-decoration: none;
    transition: color var(--vl-transition-fast);
}

.vl-footer__links a:hover {
    color: var(--vl-white);
}

.vl-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vl-footer__contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-size: var(--vl-font-size-sm);
}

.vl-footer__contact svg {
    flex-shrink: 0;
    color: var(--vl-gold);
}

.vl-footer__contact a {
    color: var(--vl-grey-mid);
    text-decoration: none;
    transition: color var(--vl-transition-fast);
}

.vl-footer__contact a:hover {
    color: var(--vl-white);
}

.vl-footer__contact span {
    color: var(--vl-grey-mid);
}

.vl-footer__bottom {
    background: #0D0D1A;
    text-align: center;
    padding: 16px 40px;
}

.vl-footer__bottom p {
    color: var(--vl-grey-dark);
    font-family: var(--font-body);
    font-size: 13px;
    margin: 0;
}

.vl-footer__bottom a {
    color: var(--vl-gold);
    text-decoration: none;
}

.vl-footer__bottom a:hover {
    color: var(--vl-gold-light);
}

@media (max-width: 768px) {
    .vl-footer__main {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 32px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .vl-footer__main {
        grid-template-columns: 1fr 1fr;
    }
}