/*
Theme Name: Rushless Chapter
Theme URI: https://www.samslim.fr/rushless-chapter
Author: Samuel Huaux
Author URI: https://www.samslim.fr
Description: A custom WordPress theme for Rushless Chapter Belgium
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rushless-chapter
*/

:root {
    --color-primary-red: #8B0000;
    --color-primary-red-dark: #6E0000;
    --color-secondary-grey: #55504A;
    --color-accent-silver: #CBBFA9;
    --color-chapter-green: #3B4838;
    --color-chapter-gold: #C58E1A;
    --color-warmth: #734524;
    --color-black: #231F20;
    --color-white: #FFFFFF;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Reset & Basics */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-white);
    color: var(--color-black);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

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

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--color-primary-red);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.site-branding .custom-logo-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 90px;
    margin: -22px 0;
    position: relative;
    z-index: 2;
}

.site-branding .custom-logo {
    height: 100%;
    width: auto;
    max-height: none;
    display: block;
    object-fit: contain;
}

.site-branding .site-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    text-transform: uppercase;
}

.site-branding .site-description {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-accent-silver);
    margin: 0;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Main Navigation */
.main-navigation {
    position: relative;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.main-navigation a:hover {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

/* Submenu Indicator Arrow */
.main-navigation .menu-item-has-children > a {
    position: relative;
    padding-right: 34px;
}

.main-navigation .menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-primary-red);
    transform: translateY(-50%);
    transition: transform 0.3s ease, border-top-color 0.3s ease;
}

.main-navigation .menu-item-has-children > a:hover::after {
    border-top-color: var(--color-white);
}

.main-navigation ul ul .menu-item-has-children > a {
    padding-right: 30px;
}

.main-navigation ul ul .menu-item-has-children > a::after {
    right: 12px;
}

/* Dropdown Submenus */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background-color: var(--color-black);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    flex-direction: column;
    border-top: 3px solid var(--color-primary-red);
}

.main-navigation li:hover>ul {
    display: block;
}

.main-navigation ul ul li {
    width: 100%;
}

.main-navigation ul ul a {
    padding: 12px 20px;
    font-size: 0.85rem;
    border-bottom: 1px solid #333;
}

.main-navigation ul ul a:hover {
    background-color: var(--color-primary-red);
    padding-left: 25px;
}

/* Account Icon (Buddy) */
.main-navigation .menu-account-icon>a {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .menu-account-icon>a svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--color-white) !important;
    transition: fill 0.3s ease;
    display: block !important;
}

.main-navigation .menu-account-icon>a:hover svg {
    fill: var(--color-primary-red) !important;
}

/* Responsive adjustments for Account Icon */
@media (max-width: 1200px) {
    .main-navigation .menu-account-icon>a svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 992px) {
    .main-navigation .menu-account-icon>a svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Dealer Portal Icon (Bar & Shield) */
.main-navigation .menu-dealer-icon>a {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .menu-dealer-icon>a svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--color-white) !important;
    transition: fill 0.3s ease;
    display: block !important;
}

.main-navigation .menu-dealer-icon>a:hover svg {
    fill: var(--color-primary-red) !important;
}

/* Responsive adjustments for Dealer Portal Icon */
@media (max-width: 1200px) {
    .main-navigation .menu-dealer-icon>a svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 992px) {
    .main-navigation .menu-dealer-icon>a svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Language Switcher Flags */
.main-navigation .lang-flag>a {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .lang-flag>a .lang-flag-icon {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

@media (max-width: 1200px) {
    .main-navigation .lang-flag>a .lang-flag-icon {
        width: 22px;
        height: 16px;
    }
}

@media (max-width: 992px) {
    .main-navigation .lang-flag>a .lang-flag-icon {
        width: 20px;
        height: 15px;
    }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Section */
.hero-section {
    color: var(--color-white);
    text-align: center;
    min-height: 34vh;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    background-image: linear-gradient(135deg, #332a22 0%, #150f0c 55%, #3a1408 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    padding: 40px 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(217, 162, 75, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(139, 0, 0, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.78) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: 2px;
    margin-bottom: 0.4rem;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--color-accent-silver);
    /* Desserre l'espace sous-titre -> bouton pour que le regroupement visuel
       colle au regroupement semantique (titre+sous-titre proches, bouton
       distinct en dessous) - audit design. */
    margin-bottom: 3rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-subtitle-rotator {
    margin-bottom: 3rem;
}

.hero-subtitle-rotator .hero-subtitle-item {
    display: none;
    margin-bottom: 0;
}

.hero-subtitle-rotator .hero-subtitle-item.is-active {
    display: block;
    animation: hero-subtitle-fade 0.6s ease;
}

@keyframes hero-subtitle-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn {
    display: inline-block;
    padding: 12px 26px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    /* Pilule comme le CTA du hero (--btn-cta) : c'etait deja la forme la
       plus accueillante du site (audit design), generalisee ici a tous les
       boutons d'action plutot que reservee au seul hero. */
    border-radius: var(--radius-pill, 999px);
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}

.btn:hover {
    background-color: #a00000;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 0, 0, 0.25);
}

/* Premium CTA Button (Hero) — degrade + halo au repos (pas seulement au survol),
   pour correspondre au traitement "after" cible de l'audit design (bouton
   hero en pilule avec relief), plutot qu'un simple aplat de couleur. */
.btn-cta {
    padding: 18px 45px;
    font-size: 1rem;
    letter-spacing: 2px;
    border-radius: var(--radius-pill, 999px);
    border: 2px solid var(--color-primary-red);
    background: linear-gradient(135deg, var(--color-primary-red), var(--color-primary-red-dark));
    box-shadow: 0 6px 18px rgba(139, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-cta:hover {
    background: linear-gradient(135deg, var(--color-primary-red-dark), var(--color-primary-red-dark));
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(139, 0, 0, 0.6);
}

/* ------------------------------------------------------------------------ */
/* Configured Homepage Sections (ACF "Page d'accueil" + legacy Customizer)  */
/* ------------------------------------------------------------------------ */
.content-section {
    padding: clamp(40px, 5vw, 72px) 0;
}

.content-section--bg-white {
    background-color: var(--color-white);
}

.content-section--bg-gray {
    background-color: #f7f7f8;
}

.content-section--bg-red {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

.content-section + .content-section {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.content-section .row {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.content-section--image-left .row {
    flex-direction: row-reverse;
}

.content-section .col-text,
.content-section .col-image {
    flex: 1;
}

.content-section .col-text h2 {
    display: block;
    position: relative;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: 1px;
    padding-top: 1.25rem;
    margin-bottom: 1.1rem;
}

.content-section .col-text h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--color-primary-red);
}

.content-section--bg-red .col-text h2::before {
    background-color: var(--color-white);
}

.content-section .col-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
}

.content-section--bg-red .col-text p {
    color: rgba(255, 255, 255, 0.85);
}

.content-section .col-text .btn {
    margin-top: 0.5rem;
}

.content-section--bg-red .btn {
    background-color: var(--color-white);
    color: var(--color-primary-red);
}

.content-section--bg-red .btn:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

.content-section .col-image img {
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.4s ease;
}

.content-section .col-image:hover img {
    transform: scale(1.02);
}

/* Back to top */
#rushless-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.3s ease;
    z-index: 999;
}

#rushless-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#rushless-back-to-top:hover {
    background-color: var(--color-primary-red-dark);
}

/* Footer */
.site-footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 50px 0 20px;
    margin-top: 50px;
    border-top: 5px solid var(--color-primary-red);
}

.footer-brand {
    margin-bottom: 30px;
}

.footer-brand .custom-logo {
    max-height: 70px;
    width: auto;
    display: block;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-widget h3 {
    color: var(--color-primary-red);
    margin-bottom: 1.5rem;
}

.footer-contact-text {
    color: var(--color-accent-silver);
    margin-bottom: 0.5rem;
}

.footer-contact-text a {
    color: var(--color-accent-silver);
    transition: color 0.3s ease;
}

.footer-contact-text a:hover {
    color: var(--color-primary-red);
}

/* Footer Menu */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.5rem;
}

.footer-menu a {
    color: var(--color-accent-silver);
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: var(--color-primary-red);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--color-accent-silver);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.social-links a:hover {
    color: var(--color-primary-red);
}

.social-icon {
    font-size: 1.2rem;
}

.site-info {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    font-size: 0.8rem;
    color: #888;
}

.header-inner {
    flex-wrap: wrap;
    position: relative;
}

.site-branding {
    flex: 1;
}

.site-branding .site-title {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .site-branding .custom-logo-link {
        height: 60px;
        margin: -12px 0;
    }
}

.site-branding .site-description {
    display: none;
}

/* Menu Toggle Button - iOS Compatible */
.menu-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 15px;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
    color: var(--color-primary-red);
    outline: none;
}

.menu-toggle .hamburger {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-white);
    position: relative;
    transition: all 0.3s ease;
    pointer-events: none;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: var(--color-white);
    transition: all 0.3s ease;
    pointer-events: none;
}

.menu-toggle .hamburger::before {
    top: -8px;
}

.menu-toggle .hamburger::after {
    top: 8px;
}

.menu-toggle.active .hamburger {
    background-color: transparent;
}

.menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile Navigation */
.main-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-black);
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 60px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}



@media (max-width: 768px) {
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .main-navigation a {
        width: 100%;
        padding: 15px 25px;
    }

    /* Sous-menus mobiles : positionnement inline (accordion), masqués par défaut */
    .main-navigation ul ul {
        position: static !important;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--color-primary-red);
        min-width: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Désactiver l'ouverture par :hover sur mobile */
    .main-navigation li:hover > ul {
        display: none;
    }

    /* Ouverture contrôlée uniquement par la classe JS submenu-open */
    .main-navigation .submenu-open > ul {
        display: block !important;
    }

    /* Rotation de la flèche quand le sous-menu accordéon est ouvert */
    .main-navigation .submenu-open > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Décaler le menu sous la barre d'admin WordPress (visible si connecté) */
    body.admin-bar .main-navigation {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-section {
        min-height: 36vh;
        padding: 40px 0;
    }

    .content-section {
        padding: 40px 0;
    }

    .content-section .row,
    .content-section--image-left .row {
        flex-direction: column;
        gap: 32px;
    }

    /* La photo marquante passe avant le texte sur mobile. Portee au
       .col-image generique des sections de contenu (page/anniversaire) :
       si une future section y place un logo plutot qu'une photo, revoir
       ce point section par section plutot que d'elargir la portee. */
    .content-section .col-image {
        order: -1;
    }

    .content-section .col-text h2 {
        font-size: 1.6rem;
    }

    .content-section .col-image img {
        height: 300px;
    }
}

.main-navigation.toggled {
    right: 0;
    display: block;
}

.container {
    padding: 0 15px;
}

/* Footer responsive */
.social-links {
    flex-direction: column;
    gap: 10px;
}


/* iPhone & Small Mobile */
@media (max-width: 480px) {
    .site-branding .site-title {
        font-size: 1rem;
    }

    .main-navigation {
        width: 100%;
        right: -100%;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-section {
        min-height: 30vh;
        padding: 32px 0;
    }

    .btn-cta {
        padding: 14px 30px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .site-footer {
        padding: 30px 0 15px;
    }
}

/* Hide menu toggle on desktop */
@media (min-width: 769px) {
    /* Rotate the submenu arrow when the dropdown opens on hover */
    .main-navigation li.menu-item-has-children:hover > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .menu-toggle {
        display: none !important;
    }

    .menu-overlay {
        display: none !important;
    }

    /* Reset Main Navigation for Desktop */
    .main-navigation {
        position: static !important;
        height: auto !important;
        width: auto !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding-top: 0 !important;
        overflow-y: visible !important;
        right: auto !important;
        display: block !important;
    }
}

/* Archive / Grid Layout */
.page-header {
    margin-bottom: 5rem;
    /* Increased from 3rem */
    text-align: center;
    padding-top: 4rem;
    /* Increased from 2rem */
    border-bottom: 2px solid var(--color-accent-silver);
    padding-bottom: 2rem;
    /* Increased from 1rem */
}

.page-title {
    font-size: 3rem;
    /* Increased */
    color: var(--color-black);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.archive-description {
    color: var(--color-secondary-grey);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* Increased min-width */
    gap: 50px;
    /* Increased from 30px */
    margin-bottom: 6rem;
}

.post-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.post-card .post-thumbnail {
    position: relative;
    padding-top: 60%;
    /* Taller image */
    overflow: hidden;
    background: #fafafa;
}

.post-card .post-thumbnail a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.post-card:hover .post-thumbnail img {
    transform: scale(1.08);
}

.post-card .post-content {
    padding: 30px;
    /* Increased from 20px */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card .entry-meta {
    font-size: 0.9rem;
    color: var(--color-primary-red);
    /* Changed to red for contrast */
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.post-card .entry-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.post-card .entry-title a {
    text-decoration: none;
    color: var(--color-black);
}

.post-card .entry-title a:hover {
    color: var(--color-primary-red);
}

.post-card .entry-summary {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
    flex-grow: 1;
    line-height: 1.8;
    /* improved readability */
}

.post-card .entry-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Carte "Hommages" : meme gabarit que les autres articles (coherence de
   grille), mais un accent or/bronze plutot que rouge pour signaler le
   changement de ton avant le clic, au lieu d'un rendu identique a une
   actualite ordinaire (audit design du 2026-07-07). */
.post-card--tribute {
    border-color: var(--color-chapter-gold);
    border-width: 1px 1px 1px 4px;
}

.post-card-tribute-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(197, 142, 26, 0.12);
    color: var(--color-warmth);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
}

.post-card-tribute-badge .dashicons {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.btn-read-more {
    display: inline-block;
    color: var(--color-primary-red);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-read-more:hover {
    color: var(--color-black);
    padding-left: 5px;
    /* Subtle movement */
}

.pagination-wrapper .nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
}

.pagination-wrapper a {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 600;
}

.pagination-wrapper a:hover {
    background: var(--color-primary-red);
    color: #fff;
    border-color: var(--color-primary-red);
}

/* Single Post Specifics */
.small-container {
    max-width: 800px;
    /* Optimal reading width */
    margin: 0 auto;
}

.single-post-article .entry-header {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.single-post-article .header-meta {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--color-secondary-grey);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}

.single-post-article .cat-links a {
    color: var(--color-primary-red);
}

.single-post-article .entry-title {
    font-size: 3rem;
    /* Big title */
    line-height: 1.2;
    margin-bottom: 1rem;
}

.post-hero-image {
    margin-bottom: 3rem;
}

.post-hero-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.single-post-article .entry-content {
    font-size: 1.1rem;
    /* Slightly larger for reading */
    line-height: 1.8;
    color: #333;
}

.single-post-article .entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content p {
    text-align: left;
}

.single-post-article .entry-content h2 {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-primary-red);
    padding-left: 15px;
}

.separator {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 3rem 0;
}

.single-post-navigation {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4rem;
}

.single-post-navigation a {
    transition: color 0.3s ease;
}

.single-post-navigation a:hover {
    color: var(--color-primary-red);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .single-post-article .entry-title {
        font-size: 2rem;
    }

    .single-post-article .entry-content {
        font-size: 1rem;
    }
}

/* espacement images & blocs */

.single-post-article .entry-content img {
    display: block;
    margin: 2.5rem auto;
    /* espace au-dessus / au-dessous de chaque image */
    border-radius: 8px;
}

.single-post-article .entry-content hr,
.single-post-article .entry-content .wp-block-separator {
    margin: 3rem 0;
    /* confirme un bon espace autour des séparateurs */
}

.single-post-article .entry-content h2,
.single-post-article .entry-content h3 {
    margin-top: 3rem;
    /* souffle avant un nouveau bloc/titre */
}

/* Hero Title Row: club logo + title + dealership partner logo */
.hero-title-row {
    display: flex;
    /* nowrap on purpose: with flex-wrap the row could partially wrap (e.g.
       club logo + title fit on one line but the dealership logo alone gets
       pushed to a second line, misaligned) whenever the three items didn't
       quite fit — the logos below shrink fluidly instead so all items
       always stay on the same line. */
    flex-wrap: nowrap;
    /* Aligne le bas des logos sur le bas du titre plutot que de centrer :
       avec des logos hauts de 150-200px, un centrage vertical laissait un
       grand vide sous le texte, ce qui eloignait visuellement le sous-titre
       du titre (audit design). */
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 3vw, 24px);
    margin-bottom: 0.5rem;
}

/* On wide screens, spread the logos out to the edges of the container
   instead of hugging the title, using the empty space either side. */
@media (min-width: 993px) {
    .hero-title-row {
        justify-content: space-between;
    }
}

.hero-title-row .hero-title {
    margin-bottom: 0;
    /* Lets the title shrink/wrap onto a second line instead of overflowing
       the row when the two fixed-size logo slots leave little room — the
       default flex min-width:auto would otherwise refuse to shrink below
       its single-line width. */
    min-width: 0;
}

/* Fluid box (vw-based, not tied to the source image's own aspect ratio) so
   the row's width never depends on how the logo happens to be cropped — if
   the logo is recropped to a different shape, the slot stays put and the
   title stays centered between the two logos; object-fit: contain then
   fits whatever aspect ratio inside without distorting the box. Sized with
   clamp() rather than fixed breakpoint steps so it shrinks smoothly and
   never forces the row wider than the viewport (which used to make the
   row's flex-wrap kick in and misalign the logos — see nowrap note above). */
.hero-logo {
    flex-shrink: 1;
    min-width: 0;
    width: clamp(90px, 16vw, 240px);
    height: clamp(60px, 11vw, 150px);
    display: flex;
    align-items: flex-end;
}

.hero-logo-club {
    justify-content: flex-start;
}

.hero-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* The dealership artwork is a thin outline mark with a lot of empty space
   around it, so at an equal box height it reads visually smaller/lighter
   than the dense Rushless badge. Give it a taller box to balance the two. */
.hero-logo-dealership-desktop {
    width: clamp(100px, 18vw, 280px);
    height: clamp(70px, 13vw, 200px);
    justify-content: flex-end;
}

/* The dealership logo is rendered twice in the markup: once beside the title
   (desktop) and once below the subtitle (mobile). Only one copy is shown at
   a time — the other stays hidden per breakpoint below. */
.hero-logo-dealership-mobile {
    display: none;
    width: 220px;
    height: 130px;
}

/* Responsive for Hero Title Row */
@media (max-width: 992px) {
    .hero-title-row {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .hero-title-row {
        gap: 12px;
    }

    /* The club logo already appears in the site header on every screen size;
       drop it here on small screens to avoid redundancy and keep the title readable. */
    .hero-logo-club {
        display: none;
    }

    /* Below the subtitle instead of cramped next to the title on narrow screens. */
    .hero-logo-dealership-desktop {
        display: none;
    }

    .hero-logo-dealership-mobile {
        display: flex;
        justify-content: center;
        /* Fixed box from the base rule (220x130) isn't centered by the
           ancestor's text-align:center, since a block-level flex box ignores
           it; margin:auto does the actual centering. Also shrunk — 220px
           read as oversized against the mobile title/subtitle. */
        width: 150px;
        height: 90px;
        margin: 0.5rem auto 1rem;
    }
}

/* Restrict Excerpt Length Visuals in Grid */
.entry-summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    /* Limit to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fallback for non-webkit if needed, usually webkit works in most modern browsers for this prop */
    height: 6em;
    /* Fallback height approximately 4 lines */
}

/* =========================================
   ABOUT PAGE IMPROVEMENTS
   ========================================= */

/* About Page Container */
.about-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Montserrat', sans-serif;
}

/* Titles */
.about-hero-title {
    text-align: center;
    margin-bottom: 60px;
}

.about-hero-title h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 20px;
}

.red-separator {
    width: 60px;
    height: 4px;
    background-color: var(--color-primary-red);
    border: none;
    margin: 0 auto;
}

.yellow-separator {
    width: 80px;
    height: 3px;
    background-color: var(--color-primary-red);
    /* Changed to red */
    border: none;
    margin: 20px auto 0;
}

/* Intro Section */
.about-section-cols {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    /* Better for text alignment */
    margin-bottom: 80px;
}

.about-col-text {
    flex: 1;
}

.about-col-text h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

.about-col-text h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--color-primary-red);
}

.about-col-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
    text-align: left;
}

.about-col-image {
    flex: 1;
}

.about-col-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Mantra Section */
.about-mantra-section {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--color-black);
    color: #fff;
    margin: 0 -20px 80px;
    border-radius: 4px;
}

.about-mantra-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mantra-highlight {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: var(--color-chapter-gold);
    display: block;
    margin-bottom: 20px;
}

/* History Section */
.about-history-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    margin: 0 -20px 60px;
    text-align: center;
}

.about-history-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-history-node h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-history-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    text-align: left;
}

/* Tribute Box */
.about-tribute-box {
    background: #fff;
    border-left: 5px solid var(--color-primary-red);
    padding: 30px;
    margin-top: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.about-tribute-box h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-black);
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.about-tribute-box p {
    font-style: italic;
    color: #444;
}

/* Values Grid */
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.about-values-grid.five-cols {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Espace entre le medaillon partage (chapter-tools) et le titre, dans le
   contexte specifique de cette grille — pas une regle du composant lui-meme. */
.value-item .chapter-icon-medallion {
    margin-bottom: 20px;
}

/* Repli si le plugin chapter-tools (et son composant medaillon partage)
   est desactive — voir template-about.php. Valeurs alignees sur
   .chapter-icon-medallion--md pour rester visuellement identique. */
.value-item .value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(197, 142, 26, 0.12);
    border: 1px solid rgba(197, 142, 26, 0.3);
}

.value-item .value-icon .dashicons {
    font-size: 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--color-primary-red);
}

.value-item h3 {
    font-family: 'Oswald', sans-serif;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 700;
}

.value-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

/* CTA Section */
.about-cta-section {
    text-align: center;
    background: var(--color-black);
    color: #fff;
    padding: 80px 20px;
    margin: 80px -20px -60px;
    border-radius: 4px;
}

.about-cta-section h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.about-cta-section p {
    max-width: 600px;
    margin: 0 auto 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc;
}

.about-cta-section .btn {
    display: inline-block;
    background-color: var(--color-primary-red);
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: var(--radius-pill, 999px);
    margin-top: 30px;
    text-decoration: none;
    transition: background 0.3s;
    border: 2px solid var(--color-primary-red);
}

.about-cta-section .btn:hover {
    background-color: transparent;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .about-section-cols {
        flex-direction: column;
    }

    .about-col-image img {
        height: 220px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        /* Fallback */
    }

    .about-values-grid.five-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-hero-title h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .about-values-grid.five-cols {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------------------------------- */
/*COMMENTS SECTION STYLING (Added for Routes & Posts)
/* -------------------------------------------------------------------------- */

/* Comment Area Container */
.comments-area {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #eee;
}

.comments-title,
.comment-reply-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 2rem;
    border-left: 5px solid var(--color-primary-red);
    padding-left: 15px;
}

/* Comment List */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list .comment {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 2.5rem;
}

.comment-list .comment:last-child {
    border-bottom: none;
}

.comment-body {
    position: relative;
    padding-left: 80px;
    /* Space for avatar */
}

/* Chapter Google Photos Block */
.chapter-photos-block-container {
    padding: 20px 0;
}

.splide__slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Trombinoscope Styling Update */
.member-real-name {
    font-size: 0.9em;
    color: #777;
    margin: -5px 0 10px 0;
    /* Tighten to main name */
    font-style: italic;
}

/* Avatar */
.comment-list .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--color-chapter-gold);
}

/* Metadata */
.comment-meta {
    margin-bottom: 0.5rem;
}

.comment-author .fn {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
}

.comment-metadata {
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
}

.comment-content {
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Reply Link */
.reply {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
}

.comment-reply-link {
    color: var(--color-primary-red);
    text-decoration: none;
}

.comment-reply-link:hover {
    color: var(--color-black);
    text-decoration: underline;
}

/* Comment Form */
.comment-respond {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 4px;
    margin-top: 3rem;
    border-left: 3px solid var(--color-secondary-grey);
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.comment-notes,
.logged-in-as {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-black);
    text-transform: uppercase;
    font-size: 0.85rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Submit Button */
.comment-respond .submit,
.comment-respond input[type="submit"],
.comment-respond button[type="submit"],
.comment-form-submit .submit {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-form-submit .submit:hover {
    background-color: #a00000;
}

/* Threaded Comments (Nested) */
.comment-list .children {
    list-style: none;
    margin-left: 50px;
    margin-top: 2rem;
    border-left: 2px solid #eee;
    padding-left: 2rem;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .comment-list .children {
        margin-left: 20px;
        padding-left: 1rem;
    }

    .comment-body {
        padding-left: 0;
    }

    .comment-list .avatar {
        position: static;
        margin-bottom: 1rem;
        width: 50px;
        height: 50px;
    }
}

/* -------------------------------------------------------------------------- */
/*ROUTE LIBRARY FILTERS (Search & Country)
/* -------------------------------------------------------------------------- */

.chapter-routes-filters {
    background: #fff !important;
    /* Override inline style */
    padding: 0 !important;
    /* Override inline style */
    margin-bottom: 3rem !important;
    border: none !important;
}

.chapter-routes-filters>div {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

/* Search Input */
.chapter-routes-filters input[type="text"] {
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 4px;
    /* Rushless square style or slight radius */
    font-family: var(--font-body);
    font-size: 1rem;
    min-width: 300px;
    transition: all 0.3s ease;
}

.chapter-routes-filters input[type="text"]:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

/* Select Dropdown */
.chapter-routes-filters select {
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 4px;
    background-color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chapter-routes-filters select:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

/* Filter Button */
.chapter-routes-filters button[type="submit"] {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    letter-spacing: 1px;
}

.chapter-routes-filters button[type="submit"]:hover {
    background-color: var(--color-black);
    /* Darken nicely or swap to black */
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    .chapter-routes-filters input[type="text"],
    .chapter-routes-filters select,
    .chapter-routes-filters button[type="submit"] {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* -------------------------------------------------------------------------- */
/*CHAPTER PROFILE FORM STYLING
/* -------------------------------------------------------------------------- */

.chapter-profile-container {
    padding: 2rem 0;
}

.chapter-profile-container h2,
.chapter-profile-container h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--color-primary-red);
    padding-left: 15px;
}

.chapter-profile-container h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.chapter-profile-container h3 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
    color: var(--color-secondary-grey);
}

.chapter-profile-form .form-row {
    margin-bottom: 1.5rem;
}

.chapter-profile-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-black);
}

.chapter-profile-form input[type="text"],
.chapter-profile-form input[type="email"],
.chapter-profile-form input[type="tel"],
.chapter-profile-form input[type="date"],
.chapter-profile-form input[type="number"],
.chapter-profile-form textarea,
.chapter-profile-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.chapter-profile-form input:focus,
.chapter-profile-form textarea:focus,
.chapter-profile-form select:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

/* Specific adjustments for Moto Repeater */
.chapter-moto-row {
    background: #fff !important;
    /* Override inline */
    border: 1px solid #eee !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chapter-moto-row strong {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-red);
    text-transform: uppercase;
}

/* Submit Button */
.chapter-profile-form button[type="submit"] {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 2rem;
    width: 100%;
    /* Full width on mobile/tablet */
}

@media (min-width: 768px) {
    .chapter-profile-form button[type="submit"] {
        width: auto;
    }
}

.chapter-profile-form button[type="submit"]:hover {
    background-color: var(--color-black);
}

/* Custom File Input Styling */
.chapter-profile-form input[type="file"] {
    border: none;
    padding: 10px 0;
    background: transparent;
    font-size: 1rem;
    /* Larger text for 'No file chosen' */
    color: var(--color-secondary-grey);
    width: 100%;
}

.chapter-profile-form input[type="file"]::file-selector-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    /* Slight radius */
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 15px;
}

.chapter-profile-form input[type="file"]::file-selector-button:hover {
    background-color: var(--color-primary-red);
}

/* Legacy Webkit support */
.chapter-profile-form input[type="file"]::-webkit-file-upload-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 15px;
}

.chapter-profile-form input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--color-primary-red);
}

/* -------------------------------------------------------------------------- */
/* REPORTAGE AUTHORS & CREDITS
/* -------------------------------------------------------------------------- */
.chapter-reportage-credits {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}

.chapter-reportage-credits h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--color-black);
    text-transform: uppercase;
    font-weight: 700;
}

.reportage-authors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.reportage-author-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #fff;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.reportage-author-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary-red);
}

.reportage-author-info {
    display: flex;
    flex-direction: column;
}

.reportage-author-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-black);
}

.reportage-author-role {
    font-size: 0.75rem;
    color: var(--color-secondary-grey);
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* GOOGLE PHOTOS BLOCK
/* -------------------------------------------------------------------------- */
.chapter-photos-block-container {
    margin: 2rem 0;
}

.chapter-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.chapter-photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.chapter-photo-item img:hover {
    transform: scale(1.02);
}

/* Carousel Mode */
.chapter-photos-carousel {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 15px;
    /* Scrollbar space */
    scroll-snap-type: x mandatory;
}

.chapter-photos-carousel .chapter-photo-item {
    flex: 0 0 300px;
    scroll-snap-align: center;
}

.chapter-photos-carousel .chapter-photo-item img {
    height: 250px;
}

.chapter-photos-link {
    display: block;
    margin-top: 1rem;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary-red);
    text-decoration: none;
}

.chapter-photos-link:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* BIRTHDAY FEATURE
/* Positionnable via ACF (Réglages — Page d'accueil > Sections > "Section
   shortcode" avec [chapter_birthday]) ou via le shortcode direct dans une
   page. Toujours son propre design (pas la section generique image/texte) :
   photo et nom restent associes dans une meme carte, y compris si deux
   membres partagent un surnom. */
/* -------------------------------------------------------------------------- */
.chapter-birthday-section {
    padding: 32px 0;
}

.chapter-birthday-heading {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.chapter-birthday-heading-icon {
    color: var(--color-warmth);
}

.chapter-birthday-intro {
    text-align: center;
    color: var(--color-secondary-grey);
    margin-bottom: 20px;
}

.chapter-birthday-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.chapter-birthday-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

.chapter-birthday-card-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--color-warmth);
    box-shadow: var(--shadow-soft);
    margin-bottom: 10px;
}

.chapter-birthday-card-name {
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    color: var(--color-black);
}

/* -------------------------------------------------------------------------- */
/* TROMBINOSCOPE MEMBER NAME
/* -------------------------------------------------------------------------- */
.member-real-name {
    display: block;
    font-size: 0.85em;
    color: #777;
    margin-top: 2px;
    font-weight: normal;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE SHOP DROPDOWNS
/* -------------------------------------------------------------------------- */
.woocommerce-ordering select.orderby,
.woocommerce select {
    padding: 10px 35px 10px 15px;
    border: 2px solid #eee;
    border-radius: 4px;
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-black);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238B0000' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    transition: border-color 0.3s ease;
}

.woocommerce-ordering select.orderby:focus,
.woocommerce select:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE SALE BADGE
/* -------------------------------------------------------------------------- */
.woocommerce span.onsale {
    background-color: var(--color-chapter-green) !important;
    color: var(--color-white) !important;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Prix soldé (ins) : rouge du club au lieu du vert WooCommerce par défaut */
.woocommerce ul.products li.product .price ins,
.woocommerce .price ins,
.woocommerce .price ins .woocommerce-Price-amount {
    color: var(--color-primary-red) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Prix barré (del) : gris discret */
.woocommerce ul.products li.product .price del,
.woocommerce .price del,
.woocommerce .price del .woocommerce-Price-amount {
    color: var(--color-secondary-grey) !important;
    opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE BUTTONS
/* -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button {
    background-color: var(--color-primary-red) !important;
    color: var(--color-white) !important;
    border: none;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE MY ACCOUNT
/* -------------------------------------------------------------------------- */
.woocommerce form.login,
.woocommerce form.register {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.woocommerce form .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce form .form-row label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-black);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

.woocommerce form .show-password-input {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}

/* Bouton "Se connecter" : explicite plutot que de dependre uniquement de la
   regle "Harmonize Buttons" (chapter-tools-public.css) — le formulaire de
   connexion WooCommerce s'affiche avant que l'utilisateur soit identifie,
   contexte ou d'autres regles de specificite peuvent differer. */
.woocommerce-form-login__submit,
button[name="login"] {
    background-color: var(--color-primary-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill, 999px) !important;
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px !important;
}

.woocommerce-form-login__submit:hover,
button[name="login"]:hover {
    background-color: var(--color-primary-red-dark, #6E0000) !important;
}

.woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: normal;
    text-transform: none;
    cursor: pointer;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: var(--color-white);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
    background: var(--color-primary-red);
    border-color: var(--color-primary-red);
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    margin: 1px auto 0;
    transform: rotate(45deg);
}

.woocommerce-form-login__rememberme input[type="checkbox"]:hover {
    border-color: var(--color-primary-red);
}

.woocommerce form.login .woocommerce-error,
.woocommerce form.register .woocommerce-error {
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

.woocommerce form .form-row.woocommerce-form-row--first,
.woocommerce form .form-row.woocommerce-form-row--last,
p.woocommerce-form-login__submit ~ * {
    margin-top: 1rem;
}

.woocommerce form.login .lost_password,
.woocommerce-LostPassword {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.woocommerce form.login .lost_password a,
.woocommerce-LostPassword a {
    color: var(--color-primary-red);
    text-decoration: none;
}

.woocommerce form.login .lost_password a:hover,
.woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* My Account dashboard (logged-in) – navigation verticale sidebar */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: none;
    border-right: 2px solid #eee;
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
    width: 100%;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: var(--color-secondary-grey);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.woocommerce-MyAccount-navigation li:last-child a {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--color-primary-red);
    border-left-color: var(--color-primary-red);
    background: #fdf5f5;
}

.woocommerce-MyAccount-content {
    max-width: 800px;
}

.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
    padding: 12px;
    border: 1px solid #eee;
    text-align: left;
}

.woocommerce-MyAccount-content table.shop_table th {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    list-style: none;
    /* WooCommerce core reserves left space for its icon (::before, absolutely
       positioned around left:1.5em); a flat symmetric padding here collapses
       that space and the icon lands on top of the message text. */
    padding: 1rem 1.5rem 1rem 3.5rem;
    margin: 0 0 1.5rem;
    border-radius: 4px;
    border-left: 4px solid var(--color-primary-red);
    background: #fdf5f5;
    font-size: 0.95rem;
    /* WooCommerce JS focuses this element on render so screen readers
       announce it; it isn't an interactive control, so drop the default
       focus ring instead of leaving a stray blue box (visible on iOS Safari). */
    outline: none;
}

.woocommerce-message {
    border-left-color: var(--color-chapter-green);
    background: #f3f7f4;
}

.woocommerce-info {
    border-left-color: var(--color-secondary-grey);
    background: #f5f5f5;
}

/* --- Featured Post (Article à la une) --- */
.featured-post-label {
    display: inline-block;
    background: var(--color-primary-red);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 4px;
    margin-bottom: 25px;
}

.featured-post-card {
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
}

.featured-post-card .post-thumbnail {
    flex: 1 1 45%;
    padding-top: 0;
    height: 300px;
}

.featured-post-card .post-content {
    flex: 1 1 55%;
    justify-content: center;
}

@media (max-width: 768px) {
    .featured-post-card {
        flex-direction: column;
    }

    .featured-post-card .post-thumbnail {
        flex: 0 0 220px;
        height: 220px;
    }
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
    color: var(--color-primary-red);
    font-weight: 700;
    text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* DEALERSHIP EVENTS - "Suivez-nous sur Facebook" (recolor to match site .btn) */
/* -------------------------------------------------------------------------- */
.chapter-dealership-fb-follow {
    background: var(--color-primary-red) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.chapter-dealership-fb-follow:hover {
    background: #a00000 !important;
    color: var(--color-white) !important;
}

/* Mobile: stack logo / name / FB button instead of squeezing them onto one
   row, which made the button wrap and overlap the partner name. */
@media (max-width: 768px) {
    .chapter-dealership-events-partner {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left;
    }

    .chapter-dealership-events-partner-info {
        width: 100%;
    }

    .chapter-dealership-fb-follow {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
        font-size: 12px;
    }
}

/* -------------------------------------------------------------------------- */
/* LIFE MEMBER – Toggle switch
/* -------------------------------------------------------------------------- */

/* Aligne le label et le toggle sur la même ligne */
.form-row:has(#chapter_hog_life) {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.form-row:has(#chapter_hog_life) label {
    display: inline;
    margin-bottom: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Toggle switch */
#chapter_hog_life {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 24px;
    position: relative;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: background 0.3s ease;
    border: none;
}

#chapter_hog_life::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#chapter_hog_life:checked {
    background: var(--color-chapter-gold);
}

#chapter_hog_life:checked::before {
    left: 23px;
}

/* Fallback : si :has() non supporté, on garde quand même le switch visible */
p.form-row input[type="checkbox"]#chapter_hog_life {
    min-width: 44px;
}

/* -------------------------------------------------------------------------- */
/* EVENT CTAs — S'inscrire (cards & list)
/* -------------------------------------------------------------------------- */

/* Bouton "S'inscrire" dans les cartes événement (vue grille / inscriptions ouvertes) */
a.event-card-cta {
    display: block;
    text-align: center;
    padding: 10px 20px;
    background-color: var(--color-primary-red);
    color: var(--color-white) !important;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

a.event-card-cta:hover {
    background-color: var(--color-primary-red-dark);
    color: var(--color-white) !important;
    transform: translateY(-1px);
}

/* Conteneur de détails d'un item événement (liste) — flex pour aligner le CTA à droite */
.event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: #555;
}

/* Lien "S'inscrire" dans les lignes de la liste événement (vue calendrier) */
a.event-item-cta {
    display: inline-block;
    padding: 5px 16px;
    background-color: var(--color-primary-red);
    color: var(--color-white) !important;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    margin-left: auto;
    white-space: nowrap;
}

a.event-item-cta:hover {
    background-color: var(--color-primary-red-dark);
    color: var(--color-white) !important;
}