/*
Theme Name: GeneratePress Child - You Are Welcome
Theme URI: https://you.arewel.com
Description: Custom child theme for You Are Welcome blog - DevOps, SRE & Cloud Engineering
Author: You Are Welcome
Author URI: https://you.arewel.com
Template: generatepress
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yawc
*/

/* ============================================
   VARIABLES CSS - BRANDING
   ============================================ */
:root {
    /* Couleurs principales */
    --yawc-primary: #0066CC;           /* Bleu tech */
    --yawc-primary-dark: #004999;      /* Bleu foncé */
    --yawc-primary-light: #3385D6;     /* Bleu clair */

    /* Couleurs secondaires */
    --yawc-secondary: #00C9A7;         /* Cyan/Teal (DevOps) */
    --yawc-accent: #FF6B35;            /* Orange (accents) */

    /* Couleurs texte - WCAG AA Compliant */
    --yawc-text-primary: #1a1a1a;      /* Noir texte */
    --yawc-text-secondary: #595959;    /* Gris texte (7.0:1 contrast) */
    --yawc-text-light: #757575;        /* Gris clair (4.55:1 contrast - WCAG AA) */

    /* Couleurs background */
    --yawc-bg-primary: #ffffff;        /* Blanc */
    --yawc-bg-secondary: #f8f9fa;      /* Gris très clair */
    --yawc-bg-dark: #1a1a1a;           /* Noir (footer, etc.) */

    /* Couleurs code blocks */
    --yawc-code-bg: #2d2d2d;           /* Fond code */
    --yawc-code-text: #f8f8f2;         /* Texte code */

    /* Typographie */
    --yawc-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --yawc-font-mono: 'Fira Code', 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;

    /* Espacements */
    --yawc-spacing-xs: 0.5rem;
    --yawc-spacing-sm: 1rem;
    --yawc-spacing-md: 1.5rem;
    --yawc-spacing-lg: 2rem;
    --yawc-spacing-xl: 3rem;

    /* Border radius */
    --yawc-radius-sm: 4px;
    --yawc-radius-md: 8px;
    --yawc-radius-lg: 12px;

    /* Shadows */
    --yawc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --yawc-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --yawc-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
[data-theme="dark"] {
    /* Couleurs principales adaptées */
    --yawc-primary: #3385D6;           /* Bleu plus clair en dark */
    --yawc-primary-dark: #4D94DB;      /* Bleu encore plus clair */
    --yawc-primary-light: #5CA3E0;     /* Bleu très clair */

    /* Couleurs secondaires adaptées */
    --yawc-secondary: #10DDC2;         /* Cyan plus lumineux */
    --yawc-accent: #FF8C61;            /* Orange plus doux */

    /* Couleurs texte inversées - WCAG AA Compliant */
    --yawc-text-primary: #e4e4e4;      /* Blanc cassé (11.6:1 contrast) */
    --yawc-text-secondary: #b3b3b3;    /* Gris clair (7.38:1 contrast) */
    --yawc-text-light: #8f8f8f;        /* Gris moyen (4.77:1 contrast) */

    /* Couleurs background dark */
    --yawc-bg-primary: #1a1a1a;        /* Noir doux */
    --yawc-bg-secondary: #2d2d2d;      /* Gris très foncé */
    --yawc-bg-dark: #0d0d0d;           /* Noir profond */

    /* Code blocks (inversés légèrement) */
    --yawc-code-bg: #0d0d0d;           /* Plus foncé */
    --yawc-code-text: #f8f8f2;         /* Reste clair */

    /* Shadows adaptées pour dark mode */
    --yawc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --yawc-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --yawc-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
body {
    font-family: var(--yawc-font-sans);
    color: var(--yawc-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--yawc-text-primary);
    font-weight: 700;
}

/* Liens */
a {
    color: var(--yawc-primary);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--yawc-primary-dark);
}

/* ============================================
   ACCESSIBILITY - SKIP LINK
   ============================================ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    z-index: 100000;
    padding: 8px 16px;
    background-color: var(--yawc-primary);
    color: white;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--yawc-accent);
    outline-offset: 2px;
}

/* ============================================
   ACCESSIBILITY - FOCUS INDICATORS
   ============================================ */

/* Remove default outline only if we're adding a custom one */
*:focus {
    outline: 2px solid var(--yawc-primary);
    outline-offset: 2px;
}

/* Enhanced focus for interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 3px solid var(--yawc-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Card focus states */
.yawc-blog-card:focus-within,
.yawc-prompt-card:focus-within,
.yawc-cheatsheet-card:focus-within,
.yawc-tool-feature-card:focus-within {
    outline: 3px solid var(--yawc-primary);
    outline-offset: 4px;
}

/* Button focus states */
.yawc-btn-primary:focus,
.yawc-tool-link:focus,
.yawc-blog-read-more:focus {
    outline: 3px solid var(--yawc-accent);
    outline-offset: 3px;
}

/* Dark mode focus states */
[data-theme="dark"] *:focus,
[data-theme="dark"] a:focus,
[data-theme="dark"] button:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    outline-color: var(--yawc-primary-light);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3);
}

/* ============================================
   HEADER CUSTOMIZATION
   ============================================ */
.site-header {
    background-color: var(--yawc-bg-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--yawc-shadow-sm);
}

.main-title a {
    color: var(--yawc-primary);
    font-weight: 700;
    font-size: 1.75rem;
}

.main-title a:hover {
    color: var(--yawc-primary-dark);
}

.site-description {
    color: var(--yawc-text-secondary);
    font-size: 0.95rem;
    font-style: italic;
}

/* ============================================
   NAVIGATION
   ============================================ */
.main-navigation {
    font-weight: 500;
}

.main-navigation a {
    color: var(--yawc-text-primary);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: var(--yawc-primary);
    background-color: var(--yawc-bg-secondary);
}

.main-navigation .current-menu-item > a {
    color: var(--yawc-primary);
    font-weight: 600;
}

/* ============================================
   CONTENT AREA
   ============================================ */

/* Homepage full-width layout (no sidebar) */
.yawc-homepage-full-width #primary {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.yawc-homepage-full-width .inside-article {
    max-width: 100%;
    padding: 0;
}

.entry-content {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--yawc-text-primary);
}

.entry-content p {
    margin-bottom: var(--yawc-spacing-md);
}

/* Articles listing */
.article-wrapper {
    margin-bottom: var(--yawc-spacing-xl);
    padding-bottom: var(--yawc-spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.entry-title a {
    color: var(--yawc-text-primary);
    transition: color 0.2s ease;
}

.entry-title a:hover {
    color: var(--yawc-primary);
}

/* Post meta */
.entry-meta {
    color: var(--yawc-text-secondary);
    font-size: 0.9rem;
}

.entry-meta a {
    color: var(--yawc-text-secondary);
}

.entry-meta a:hover {
    color: var(--yawc-primary);
}

/* Category badges */
.cat-links a {
    display: inline-block;
    background-color: var(--yawc-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--yawc-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-right: 0.5rem;
    transition: background-color 0.2s ease;
}

.cat-links a:hover {
    background-color: var(--yawc-primary-dark);
}

/* Tag badges */
.tags-links a {
    display: inline-block;
    background-color: var(--yawc-bg-secondary);
    color: var(--yawc-text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--yawc-radius-sm);
    font-size: 0.85rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tags-links a:hover {
    background-color: var(--yawc-primary);
    color: white;
}

/* ============================================
   CODE BLOCKS
   ============================================ */
code,
pre {
    font-family: var(--yawc-font-mono);
}

/* Inline code */
code {
    background-color: var(--yawc-bg-secondary);
    color: var(--yawc-primary-dark);
    padding: 0.2rem 0.4rem;
    border-radius: var(--yawc-radius-sm);
    font-size: 0.9em;
}

/* Code blocks */
pre {
    background-color: var(--yawc-code-bg);
    color: var(--yawc-code-text);
    padding: var(--yawc-spacing-md);
    border-radius: var(--yawc-radius-md);
    overflow-x: auto;
    margin: var(--yawc-spacing-md) 0;
    box-shadow: var(--yawc-shadow-sm);
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.9rem;
}

/* ============================================
   BUTTONS & CTA
   ============================================ */
.button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
    background-color: var(--yawc-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--yawc-radius-md);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--yawc-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--yawc-shadow-md);
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar .widget {
    background-color: var(--yawc-bg-secondary);
    padding: var(--yawc-spacing-md);
    border-radius: var(--yawc-radius-md);
    margin-bottom: var(--yawc-spacing-lg);
}

.sidebar .widget-title {
    color: var(--yawc-text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--yawc-spacing-sm);
    padding-bottom: var(--yawc-spacing-xs);
    border-bottom: 2px solid var(--yawc-primary);
}

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar li {
    margin-bottom: var(--yawc-spacing-xs);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background-color: var(--yawc-bg-dark);
    color: #ffffff;
    padding: var(--yawc-spacing-xl) 0;
    margin-top: var(--yawc-spacing-xl);
}

.site-footer a {
    color: var(--yawc-secondary);
}

.site-footer a:hover {
    color: var(--yawc-primary-light);
}

/* ============================================
   BLOCKQUOTES
   ============================================ */
blockquote {
    border-left: 4px solid var(--yawc-primary);
    padding-left: var(--yawc-spacing-md);
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: var(--yawc-text-secondary);
    background-color: var(--yawc-bg-secondary);
    padding: var(--yawc-spacing-md);
    border-radius: var(--yawc-radius-sm);
}

/* ============================================
   TABLES
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--yawc-spacing-md) 0;
}

th {
    background-color: var(--yawc-primary);
    color: white;
    padding: var(--yawc-spacing-sm);
    text-align: left;
    font-weight: 600;
}

td {
    padding: var(--yawc-spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

tr:hover {
    background-color: var(--yawc-bg-secondary);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    :root {
        --yawc-spacing-lg: 1.5rem;
        --yawc-spacing-xl: 2rem;
    }

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

    .main-title a {
        font-size: 1.5rem;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.yawc-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--yawc-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yawc-badge-primary {
    background-color: var(--yawc-primary);
    color: white;
}

.yawc-badge-secondary {
    background-color: var(--yawc-secondary);
    color: white;
}

.yawc-badge-accent {
    background-color: var(--yawc-accent);
    color: white;
}

/* Reading time badge */
.yawc-reading-time {
    color: var(--yawc-text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

/* ============================================
   CUSTOM BLOCKS (Gutenberg)
   ============================================ */
.wp-block-quote {
    border-left-color: var(--yawc-primary);
}

.wp-block-pullquote {
    border-top: 4px solid var(--yawc-primary);
    border-bottom: 4px solid var(--yawc-primary);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.screen-reader-text:focus {
    background-color: var(--yawc-primary);
    color: white;
}

/* Focus styles */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--yawc-primary);
    outline-offset: 2px;
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.yawc-dark-mode-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    background-color: var(--yawc-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    box-shadow: var(--yawc-shadow-lg);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.yawc-dark-mode-toggle:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.4);
}

.yawc-dark-mode-toggle:active {
    transform: scale(0.95);
}

/* Icon display */
.yawc-dark-mode-toggle .sun-icon {
    display: none;
}

.yawc-dark-mode-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .yawc-dark-mode-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .yawc-dark-mode-toggle .moon-icon {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .yawc-dark-mode-toggle {
        width: 50px;
        height: 50px;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.25rem;
    }
}

/* ============================================
   DARK MODE TRANSITIONS
   ============================================ */
body,
.site-header,
.site-footer,
.entry-content,
.sidebar .widget,
blockquote {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure body background changes */
body {
    background-color: var(--yawc-bg-primary);
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .main-navigation,
    .yawc-dark-mode-toggle {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }
}