/*
 Theme Name:   GeneratePress Child - Clone 26-auto
 Theme URI:    https://generatepress.com
 Description:  Thème enfant GeneratePress basé sur le design de 26-auto.com
 Author:       Tim
 Author URI:   https://example.com
 Template:     generatepress
 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:  generatepress-child
*/

/* ==========================================================================
   CSS Variables - Palette de couleurs
   ========================================================================== */

:root {
    /* Couleurs principales */
    --contrast: #222222;
    --contrast-2: #575760;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #1e73be;
    
    /* Couleurs custom orange */
    --orange-primary: #FF824F;
    --orange-secondary: #e98136;
    --orange-light: rgba(255, 129, 79, 0.89);
    
    /* Autres */
    --body-bg: #f7f9fa;
    --entry-meta: #6e6868;
    --button-bg: #55555e;
    --button-hover: #3f4047;
}


/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
    background-color: var(--body-bg);
    color: var(--contrast);
    font-size: 15px;
}

a {
    color: #000000;
}

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


/* ==========================================================================
   Typography
   ========================================================================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-weight: 500;
    font-size: 30px;
    text-transform: initial;
    margin-bottom: 20px;
    color: var(--contrast);
}

h2 {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--contrast-2);
}

h3 {
    font-weight: 500;
    font-size: 20px;
    color: var(--contrast-2);
}

h4, h5 {
    color: var(--contrast-2);
}

h2.entry-title {
    font-size: 30px;
}

/* Widget titles */
.widget-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}


/* ==========================================================================
   Layout - Container
   ========================================================================== */

.grid-container {
    max-width: 1300px;
}

.wp-block-group__inner-container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    background-color: var(--base-3);
}

.inside-header {
    padding: 40px 40px 0px 40px;
}

.site-header .header-image {
    width: 400px;
}

.main-title a,
.main-title a:hover {
    color: var(--contrast);
}

.site-description {
    color: var(--contrast-2);
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navigation,
.main-navigation ul ul {
    background-color: #ffffff;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    color: #000000;
    font-weight: 400;
    text-decoration: none;
    font-size: 18px;
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .menu-bar-item > a {
    padding-left: 16px;
    padding-right: 16px;
    line-height: 72px;
}

.nav-below-header .main-navigation .inside-navigation.grid-container,
.nav-above-header .main-navigation .inside-navigation.grid-container {
    padding: 0px 24px 0px 24px;
}

/* Navigation hover & active states */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
    color: var(--orange-primary);
}

button.menu-toggle:hover,
button.menu-toggle:focus {
    color: #000000;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--orange-primary);
}

/* Navigation search */
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus,
.main-navigation .main-nav ul li.search-item.active > a,
.main-navigation .menu-bar-items .search-item.active > a {
    color: var(--orange-primary);
    height: 72px;
}

/* Dropdown */
.main-navigation ul ul {
    background-color: var(--base);
}

.main-navigation .main-nav ul ul li a {
    padding: 10px 16px 10px 16px;
}


/* ==========================================================================
   Content Area
   ========================================================================== */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
    color: var(--contrast-2);
    background-color: var(--base-3);
    padding: 5px 10px 40px 10px;
}

.site-main .wp-block-group__inner-container {
    padding: 5px 10px 40px 10px;
}

/* Links in content */
.inside-article a,
.paging-navigation a,
.comments-area a,
.page-header a {
    color: var(--orange-primary);
}

.inside-article a:hover,
.paging-navigation a:hover,
.comments-area a:hover,
.page-header a:hover {
    color: #000000;
}

/* Entry title */
.entry-title a {
    color: var(--contrast);
}

.entry-title a:hover {
    color: var(--contrast-2);
}

/* Entry meta */
.entry-meta {
    color: var(--entry-meta);
}

/* Post image spacing */
.post-image:not(:first-child),
.page-content:not(:first-child),
.entry-content:not(:first-child),
.entry-summary:not(:first-child),
footer.entry-meta {
    margin-top: 0.3em;
}

.post-image-above-header .inside-article div.featured-image,
.post-image-above-header .inside-article div.post-image {
    margin-bottom: 0.3em;
}


/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar .widget {
    color: var(--contrast-2);
    background-color: var(--base-3);
    padding: 20px;
}

.sidebar .widget a {
    color: #000000;
}

.sidebar .widget a:hover {
    color: var(--orange-primary);
}

.sidebar .widget .widget-title {
    color: var(--orange-primary);
}

/* Sidebar width */
.is-right-sidebar {
    width: 20%;
}

.is-left-sidebar {
    width: 15%;
}

.site-content .content-area {
    width: 80%;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.footer-widgets {
    background-color: var(--base-3);
}

.site-info {
    background-color: var(--base-3);
}


/* ==========================================================================
   Forms & Inputs
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    color: var(--contrast);
    background-color: var(--base-2);
    border-color: var(--base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    color: var(--contrast);
    background-color: var(--base-2);
    border-color: var(--contrast-3);
}


/* ==========================================================================
   Buttons
   ========================================================================== */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
    color: #ffffff;
    background-color: var(--button-bg);
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
    color: #ffffff;
    background-color: var(--button-hover);
}


/* ==========================================================================
   Back to Top
   ========================================================================== */

a.generate-back-to-top {
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
}


/* ==========================================================================
   Custom Classes - Images
   ========================================================================== */

.mon-image-arrondie {
    border-radius: 3%;
}

/* Featured image caption */
.featured_image_caption {
    text-align: right;
    opacity: .75;
    font-size: 75%;
    margin-top: -20px;
    margin-bottom: 30px;
}

/* Dynamic images */
.dynamic-author-image-rounded {
    border-radius: 100%;
}

.dynamic-featured-image,
.dynamic-author-image {
    vertical-align: middle;
}


/* ==========================================================================
   Category Badges
   ========================================================================== */

.category-badge,
.cat-links a {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 400;
    padding: 2px 5px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: var(--orange-light);
    color: #ffffff;
}

.category-badge a,
.cat-links a {
    color: #ffffff;
}

.category-badge a:hover,
.cat-links a:hover {
    color: var(--contrast);
}


/* ==========================================================================
   Table of Contents (Easy TOC compatible)
   ========================================================================== */

div#ez-toc-container {
    background: #fff;
    border: 1px solid var(--orange-secondary);
    width: 100%;
}

div#ez-toc-container p.ez-toc-title,
#ez-toc-container .ez_toc_custom_title_icon,
#ez-toc-container .ez_toc_custom_toc_icon {
    color: var(--orange-secondary);
}

div#ez-toc-container ul.ez-toc-list a {
    color: var(--orange-secondary);
}

div#ez-toc-container ul.ez-toc-list a:hover {
    color: #000000;
}

div#ez-toc-container ul.ez-toc-list a:visited {
    color: #428bca;
}


/* ==========================================================================
   Inline Related Posts
   ========================================================================== */

.inline-related-post {
    padding: 1em;
    margin: 1em 0;
    width: 100%;
    display: block;
    font-weight: bold;
    background-color: #FFFFFF;
    border: 0 !important;
    border-left: 4px solid #E67E22 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    text-decoration: none;
}

.inline-related-post:hover {
    opacity: 1;
    transition: opacity 250ms;
}

.inline-related-post .ctaText {
    font-weight: bold;
    color: #D35400;
    text-decoration: none;
    font-size: 16px;
}

.inline-related-post .postTitle {
    color: #E67E22;
    text-decoration: underline !important;
    font-size: 16px;
}


/* ==========================================================================
   Section Titles with Icons
   ========================================================================== */

.section-title-icon {
    display: flex;
    align-items: center;
    column-gap: 0.5em;
    font-size: 20px;
    margin-bottom: -20px;
    color: var(--contrast);
}

.section-title-icon .icon {
    color: var(--orange-primary);
}


/* ==========================================================================
   Cards Articles (Style GenerateBlocks)
   ========================================================================== */

.article-card {
    height: 100%;
    min-height: 100px;
    max-height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0 10px 0 0;
    border: 1px solid;
    color: #ffffff;
}

.article-card::before {
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 10px 0 0;
    pointer-events: none;
}

.article-card::after {
    content: "";
    background-image: linear-gradient(180deg, rgba(54, 54, 54, 0.09), #0e0e0e);
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.article-card .card-content {
    max-width: 1300px;
    z-index: 1;
    position: relative;
    text-align: left;
    margin: 5px 10px;
}

.article-card .card-category {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
    padding: 3px 5px;
    color: #000000;
    background-color: #ff8f62;
}

.article-card .card-date {
    font-size: 10px;
    font-weight: 300;
    color: #ffffff;
}

.article-card .card-title {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 0px;
    color: #ffffff;
}

.article-card .card-title a {
    color: #ffffff;
}

.article-card .card-title a:hover {
    color: #e6e6e6;
}


/* ==========================================================================
   Footer Custom Styles
   ========================================================================== */

.site-footer .footer-container {
    position: relative;
    overflow: hidden;
    background-color: var(--base-3);
}

.site-footer .footer-inner {
    max-width: 1200px;
    z-index: 1;
    position: relative;
    padding: 50px 20px 25px;
    margin: 0 auto;
}

.site-footer .footer-column {
    height: 100%;
    padding: 0 0 0 30px;
    margin-left: 0px;
    border-left: 1px solid var(--contrast-3);
}

.site-footer .footer-column:first-child {
    border-left: none;
    padding-left: 0;
}

.site-footer .footer-title {
    font-size: 17px;
    margin-bottom: 20px;
    color: var(--contrast);
}

.site-footer .footer-description {
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--contrast-2);
}

.site-footer .footer-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--contrast-2);
    text-decoration: none;
}

.site-footer .footer-link:hover {
    color: var(--orange-secondary);
}

.site-footer .footer-link .icon {
    padding-right: 0.5em;
}

.site-footer .footer-copyright {
    font-size: 14px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 0px;
    color: var(--contrast-3);
}


/* ==========================================================================
   Social Buttons
   ========================================================================== */

.social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: var(--orange-secondary);
    color: var(--base-3);
    text-decoration: none;
}

.social-button:hover {
    color: var(--base-2);
}

.social-button .icon {
    width: 1.5em;
    height: 1.5em;
}


/* ==========================================================================
   Related Articles Section
   ========================================================================== */

.related-articles-section {
    flex-direction: column;
    padding: 20px;
    margin-top: 50px;
    border-radius: 5px;
    border: 1px solid transparent;
    background-color: var(--base-2);
}

.related-articles-section .section-title {
    display: flex;
    align-items: center;
    column-gap: 0.5em;
    font-size: 20px;
    margin-bottom: -20px;
    color: var(--contrast);
}

.related-articles-section .section-title .icon {
    color: var(--orange-primary);
}


/* ==========================================================================
   Author Box
   ========================================================================== */

.author-box {
    padding: 30px;
    background-color: var(--base-3);
}

.author-box .author-avatar {
    border-radius: 100px;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

.author-box .author-name {
    display: inline-block;
    margin-bottom: 0px;
}

.author-box .author-name a {
    color: var(--contrast);
}

.author-box .author-role {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(171, 184, 195, 0.5);
    color: var(--contrast-3);
}

.author-box .author-bio {
    display: inline-block;
    margin-bottom: 0px;
}


/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumb-container {
    justify-content: center;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 30px;
    color: var(--contrast);
}

.breadcrumb-container a {
    color: var(--contrast-2);
}


/* ==========================================================================
   Separators
   ========================================================================== */

hr.wp-block-separator.has-alpha-channel-opacity {
    border-color: var(--orange-primary);
}


/* ==========================================================================
   KK Star Ratings (if used)
   ========================================================================== */

.kk-star-ratings {
    text-align: center;
}


/* ==========================================================================
   Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Typography */
    .main-navigation a,
    .main-navigation .menu-toggle,
    .main-navigation .menu-bar-items {
        font-size: 15px;
    }
    
    .main-navigation .menu-toggle {
        font-size: 17px;
    }
    
    h1 {
        font-size: 25px;
    }
    
    /* Navigation */
    .main-navigation .menu-toggle,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }
    
    .main-navigation ul,
    .gen-sidebar-nav,
    .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,
    .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav) {
        display: none;
    }
    
    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items a,
    .main-navigation .menu-bar-item > a {
        padding-left: 50px;
        padding-right: 50px;
        line-height: 60px;
    }
    
    /* Content padding */
    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .separate-containers .paging-navigation,
    .one-container .site-content,
    .inside-page-header {
        padding: 0px 20px 30px 20px;
    }
    
    .site-main .wp-block-group__inner-container {
        padding: 0px 20px 30px 30px;
    }
    
    /* Header */
    .inside-top-bar,
    .inside-header {
        padding-right: 30px;
        padding-left: 30px;
    }
    
    /* Widgets */
    .widget-area .widget {
        padding: 30px;
    }
    
    /* Footer */
    .footer-widgets-container {
        padding: 30px;
    }
    
    .inside-site-info {
        padding-right: 30px;
        padding-left: 30px;
    }
    
    /* Footer columns - stack on mobile */
    .site-footer .footer-column {
        width: 100%;
        text-align: center;
        padding-left: 0;
        border-left: none;
    }
    
    /* Cards */
    .article-card {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    
    /* Cards - 2 columns on tablet */
    .article-card {
        width: 50%;
    }
    
    /* Footer columns */
    .site-footer .footer-column {
        width: 50%;
    }
}