/*
Theme Name: Astra Child - Portal Kierowców
Theme URI: https://driversjob.pl
Author: Portal Team
Author URI: https://driversjob.pl
Description: Motyw potomny Astra dla portalu pracy kierowców
Version: 1.0.0
Template: astra
Text Domain: astra-child
*/

/* ==========================================
   🎨 ZMIENNE GLOBALNE - LIGHT & DARK MODE
   ========================================== */

/* Import unified variables */
@import url('./assets/css/variables.css');

:root {
    /* KOLORY PODSTAWOWE (niezależne od motywu) */
    --primary-color: #0073aa;
    --primary-dark: #005a87;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    
    /* ROZMIARY I ANIMACJE */
    --border-radius: 8px;
    --border-radius-lg: 8px;
    --transition: all 0.3s ease;
    --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    
    /* CIENIE (dostosują się automatycznie) */
    --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
    --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
    --shadow-lg: 0 8px 25px rgba(var(--shadow-rgb), 0.15);
}

/* ==========================================
   ☀️ LIGHT MODE (DOMYŚLNY)
   ========================================== */
:root {
    /* TŁA */
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --bg-tertiary: #f5f5f5;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-body: #ffffff;
    --bg-page: #f8f9fa;
    
    /* TEKSTY */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;
    
    /* RAMKI I SEPARATORY */
    --border-color: #dddddd;
    --border-light: #eeeeee;
    --border-strong: #cccccc;
    
    /* GRADIENTY */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --card-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* CIENIE - RGB dla dynamicznych opacity */
    --shadow-rgb: 0, 0, 0;
    
    /* IKONY I AKCENTY */
    --icon-color: #666666;
    --accent-color: #0073aa;
    --link-color: #0073aa;
    --link-hover: #005a87;
    
    /* STATUSY SPECJALNE */
    --online-color: #2ecc71;
    --offline-color: #95a5a6;
    --highlight-bg: #fff3cd;
    --highlight-border: #ffeaa7;
    
    /* KOMPATYBILNOŚĆ Z STARYMI ZMIENNYMI */
    --light-bg: var(--bg-secondary);
    --white: var(--bg-primary);
    --text-dark: var(--text-primary);
    --text-light: var(--text-secondary);
}

/* ==========================================
   🌙 DARK MODE
   ========================================== */
/* Wszystkie zmienne dark mode przeniesione do assets/css/dark-mode.css */

/* ==========================================
   🎯 AUTOMATYCZNE WYKRYWANIE SYSTEMOWE
   ========================================== */
/* TYMCZASOWO WYŁĄCZONE - może konflikty */
/*
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --text-primary: #ffffff;
    }
}
*/

/* ==========================================
   🎨 GLOBALNE HERO SECTIONS - WSZYSTKIE STRONY
   Zarządzane z variables.css (zmienne --hero-*)
   Zwiększona specyficzność (body.page) dla nadpisania Astra - BEZ !important
   ========================================== */

/* Główny tytuł - wszystkie hero sections */
body.home .hero-section h1,
body.page .hero-section h1,
body.single .hero-section h1,
body.archive .hero-section h1,
body.home .portal-offers-header h1,
body.page .portal-offers-header h1,
body.single .portal-offers-header h1,
body.archive .portal-offers-header h1,
body.home .page-header h1,
body.page .page-header h1,
body.single .page-header h1,
body.archive .page-header h1 {
    font-size: var(--hero-h1-size);
    font-weight: var(--hero-h1-weight);
    color: var(--text-inverse);
    margin-bottom: var(--hero-h1-margin);
    line-height: var(--hero-h1-line-height);
}

/* Podtytuł - wszystkie hero sections */
body.home .hero-section p,
body.page .hero-section p,
body.single .hero-section p,
body.archive .hero-section p,
body.home .portal-offers-header p,
body.page .portal-offers-header p,
body.single .portal-offers-header p,
body.archive .portal-offers-header p,
body.home .page-header p,
body.page .page-header p,
body.single .page-header p,
body.archive .page-header p {
    font-size: var(--hero-p-size);
    color: var(--text-inverse);
    margin-bottom: 0;
    opacity: var(--hero-p-opacity);
    line-height: var(--hero-p-line-height);
}

/* ==========================================
   📱 RESPONSIVE BREAKPOINTS - HERO SECTIONS
   Używamy zmiennych z variables.css - BEZ !important
   ========================================== */

@media (max-width: 1024px) {
    body.home .hero-section h1,
    body.page .hero-section h1,
    body.single .hero-section h1,
    body.archive .hero-section h1,
    body.home .portal-offers-header h1,
    body.page .portal-offers-header h1,
    body.single .portal-offers-header h1,
    body.archive .portal-offers-header h1,
    body.home .page-header h1,
    body.page .page-header h1,
    body.single .page-header h1,
    body.archive .page-header h1 {
        font-size: var(--hero-h1-size-tablet);
    }
    
    body.home .hero-section p,
    body.page .hero-section p,
    body.single .hero-section p,
    body.archive .hero-section p,
    body.home .portal-offers-header p,
    body.page .portal-offers-header p,
    body.single .portal-offers-header p,
    body.archive .portal-offers-header p,
    body.home .page-header p,
    body.page .page-header p,
    body.single .page-header p,
    body.archive .page-header p {
        font-size: var(--hero-p-size-tablet);
    }
}

@media (max-width: 768px) {
    body.home .hero-section h1,
    body.page .hero-section h1,
    body.single .hero-section h1,
    body.archive .hero-section h1,
    body.home .portal-offers-header h1,
    body.page .portal-offers-header h1,
    body.single .portal-offers-header h1,
    body.archive .portal-offers-header h1,
    body.home .page-header h1,
    body.page .page-header h1,
    body.single .page-header h1,
    body.archive .page-header h1 {
        font-size: var(--hero-h1-size-mobile);
    }
    
    body.home .hero-section p,
    body.page .hero-section p,
    body.single .hero-section p,
    body.archive .hero-section p,
    body.home .portal-offers-header p,
    body.page .portal-offers-header p,
    body.single .portal-offers-header p,
    body.archive .portal-offers-header p,
    body.home .page-header p,
    body.page .page-header p,
    body.single .page-header p,
    body.archive .page-header p {
        font-size: var(--hero-p-size-mobile);
    }
}

@media (max-width: 480px) {
    body.home .hero-section h1,
    body.page .hero-section h1,
    body.single .hero-section h1,
    body.archive .hero-section h1,
    body.home .portal-offers-header h1,
    body.page .portal-offers-header h1,
    body.single .portal-offers-header h1,
    body.archive .portal-offers-header h1,
    body.home .page-header h1,
    body.page .page-header h1,
    body.single .page-header h1,
    body.archive .page-header h1 {
        font-size: var(--hero-h1-size-small);
    }
    
    body.home .hero-section p,
    body.page .hero-section p,
    body.single .hero-section p,
    body.archive .hero-section p,
    body.home .portal-offers-header p,
    body.page .portal-offers-header p,
    body.single .portal-offers-header p,
    body.archive .portal-offers-header p,
    body.home .page-header p,
    body.page .page-header p,
    body.single .page-header p,
    body.archive .page-header p {
        font-size: var(--hero-p-size-small);
    }
}

/* ==========================================
   🔧 RESET I PODSTAWOWE STYLE
   ========================================== */
* {
    box-sizing: border-box;
}

html {
    background-color: var(--bg-body);
    transition: var(--transition-theme);
}

/* Body styles są zarządzane w variables.css (linie 164-178) */
/* Selektor body.page ma wyższą specyficzność (0,1,1) dla nadpisania Astra */
/* Zachowano tutaj tylko transition dla płynnego przełączania dark mode */
body {
    transition: var(--transition-theme);
}

/* ==========================================
   🎯 KOMPONENTY GLOBALNE
   ========================================== */

/* Wszystkie kontenery i sekcje */
.site-content,
.ast-container,
.container,
section,
main,
article,
.content-area,
.widget-area {
    background-color: transparent;
    color: inherit;
    transition: var(--transition-theme);
}

/* Nagłówki */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    transition: var(--transition-theme);
}

/* Paragrafy i tekst */
p, span, div {
    color: var(--text-primary);
    transition: var(--transition-theme);
}

/* ==========================================
   HERO SECTIONS - Style przeniesione do variables.css
   Globalna kontrola bez !important (linie 237-277)
   ========================================== */

/* Hero sections są teraz zarządzane z variables.css */
/* Jeśli potrzebujesz nadpisać konkretny hero, użyj specyficzności: */
/* body.page .hero-section { ... } */

/* Sekcje z klasami tła */
.bg-light,
.light-section,
.section-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.bg-white,
.white-section,
.section-white {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Wszystkie przciski */
.btn, 
button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
    transition: var(--transition-theme);
}

/* Wszystkie formularze */
input, textarea, select {
    transition: var(--transition-theme);
}

/* ==========================================
   🏠 FRONT-PAGE - UWAGA: NIE DODAWAJ TUTAJ STYLÓW!
   ========================================== */

/*
 * ⚠️ WAŻNE: Style dla front-page.php są w assets/css/front-page.css
 * 
 * NIE DODAWAJ tutaj stylów dla:
 * - .search-section, .category-card, .feature-card
 * - .portal-stats-section, .cta-section, .why-section
 * 
 * Te style są w dedykowanym pliku: assets/css/front-page.css
 * 
 * Jedyny wyjątek: .hero-section (linia 162-175) - globalny dla wszystkich stron
 */

/* ==========================================
   🧭 NAVBAR OVERRIDES
   ========================================== */

/* Portal Navbar - przeniesione do navbar-unified.css */

/* .portal-navbar dark mode przeniesione do assets/css/dark-mode.css */

.portal-navbar-logo {
    color: var(--accent-color) !important;
}

/* Portal navbar menu styles przeniesione do navbar-unified.css */

/* Language switcher */
.language-switcher-inline {
    display: flex !important;
    gap: 6px !important;
    background: var(--bg-card, #f8fafc) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Flagi w przełączniku języków - szare tło wszędzie */
.language-switcher-inline .lang-flag {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid #ddd !important;
    object-fit: cover !important;
    transition: all 0.3s ease !important;
    padding: 2px !important;
    background: var(--bg-card, #f8fafc) !important;
}

.language-switcher-inline .lang-flag.active {
    border-color: var(--accent-color, #3b82f6) !important;
    transform: scale(1.1) !important;
}

.language-switcher-inline .lang-flag:hover {
    transform: scale(1.1) !important;
    border-color: var(--accent-color, #3b82f6) !important;
}

/* Mobile menu toggle */
.mobile-menu-toggle span {
    background: var(--accent-color) !important;
}

/* Menu buttons */
.navbar-menu .cta {
    background: var(--success-color) !important;
}

.navbar-menu .login-btn {
    background: var(--primary-gradient) !important;
}

/* Specjalne przyciski w header - przeniesione do navbar-unified.css */

/* ==========================================
   🎯 DODATKOWE ELEMENTY
   ========================================== */

/* Wszystkie divs i spany dziedziczą kolory */
div, span {
    transition: var(--transition-theme);
}

/* Specjalne klasy */
.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {  
    color: var(--text-secondary) !important;
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}

.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

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

/* ==========================================
   🔧 FINAL OVERRIDES - WSZYSTKIE ELEMENTY  
   ========================================== */

/* Upewnij się że wszystkie elementy dziedziczą */
*:not(i):not(svg) {
    transition: var(--transition-theme);
}

/* Hero przyciski */
.hero-cta,
.cta-primary,
.primary-btn {
    background: var(--primary-gradient) !important;
    color: var(--text-inverse) !important;
}

/* Wszystkie sekcje */
section {
    color: var(--text-primary);
}

/* Footer może zachować ciemny styl */
/* Footer styles moved to front-page.css and dark-mode.css for better organization */

/* Przyciski form */
button[type="submit"],
input[type="submit"],
.submit-btn {
    background: var(--primary-gradient) !important;
    color: var(--text-inverse) !important;
    border: none !important;
}

/* Debugging - jeśli coś nie działa */
/* color-scheme przeniesione do assets/css/dark-mode.css */

/* ==========================================
   🚨 FORCE DARK MODE - HIGHEST PRIORITY
   ========================================== */

/* Super specyficzny selektor na końcu CSS */
/* Wszystkie style dark mode przeniesione do assets/css/dark-mode.css */

/* Przyciski - używamy globalnego components.css */
/* Wszystkie klasy przycisków (.btn, .btn-primary, .btn-secondary, etc.) zarządzane globalnie */

/* Alerty - używamy globalnego components.css */
/* Wszystkie klasy alertów (.alert, .alert-success, .alert-error, etc.) zarządzane globalnie */

/* Badge'e - używamy globalnego components.css */
/* Wszystkie klasy badge'y (.badge, .badge-success, .badge-warning, etc.) zarządzane globalnie */

.badge-expired {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* Kontenery */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Karty */
.card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: var(--transition-theme);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Nagłówki sekcji */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.25rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

/* Animacje */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading spinner */
.loading-spinner {
    text-align: center;
    padding: 40px;
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsywność */
@media (max-width: 768px) {
    .section-header h2 {
        font-size: 1.75rem;
    }
    
    .section-header p {
        font-size: 1rem;
    }
    
    .card {
        padding: 1.5rem;
    }
}

/* ==========================================
   🌐 GLOBAL PAGE CONTAINER PATTERN v1.0
   Używaj tej klasy dla wszystkich głównych kontenerów stron
   
   Zgodne z:
   - Hero Sections v3.0 (Single Source of Truth)
   - Global Management System
   - Maintenance Banner Pattern
   ========================================== */

/* Base styles - wspólne dla wszystkich kontenerów */
.portal-page-container {
    width: 100%;
    max-width: var(--container-max-width); /* 1400px - Global Container System */
    margin: 0 auto; /* Horizontal centering */
    margin-bottom: var(--page-margin-bottom); /* Footer Spacing System v1.0 - 60px default */
    padding: var(--container-padding); /* 20px - Global Container System */
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
}

/* Maintenance banner pattern - SINGLE SOURCE OF TRUTH! */
/* Dodaj margin-top TYLKO gdy maintenance banner NIE jest widoczny */
body:not(.maintenance-active) .portal-page-container {
    margin-top: var(--page-margin-top); /* 80px */
}

/* ==========================================
   📱 RESPONSIVE BREAKPOINTS
   ========================================== */

/* Tablet Landscape (1200px and below) */
@media (max-width: 1200px) {
    body:not(.maintenance-active) .portal-page-container {
        margin-top: var(--page-margin-top-lg); /* 60px */
    }
    /* max-width i padding przeniesione do global-responsive.css */
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    body:not(.maintenance-active) .portal-page-container {
        margin-top: var(--page-margin-top-md); /* 50px */
    }
    /* max-width i padding przeniesione do global-responsive.css */
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    body:not(.maintenance-active) .portal-page-container {
        margin-top: var(--page-margin-top-sm); /* 40px */
    }
    /* max-width przeniesione do global-responsive.css */
}

/* Mobile Small (375px and below) */
@media (max-width: 375px) {
    body:not(.maintenance-active) .portal-page-container {
        margin-top: var(--page-margin-top-xs); /* 30px */
    }
}

/* ==========================================
   📐 FOOTER SPACING - RESPONSIVE BREAKPOINTS
   Proporcjonalne zmniejszanie spacing content → footer
   ========================================== */

/* Tablet Landscape (1200px and below) */
@media (max-width: 1200px) {
    .portal-page-container {
        margin-bottom: var(--page-margin-bottom-lg); /* 50px */
    }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    .portal-page-container {
        margin-bottom: var(--page-margin-bottom-md); /* 40px */
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .portal-page-container {
        margin-bottom: var(--page-margin-bottom-sm); /* 30px */
    }
}

/* Mobile Small (375px and below) */
@media (max-width: 375px) {
    .portal-page-container {
        margin-bottom: var(--page-margin-bottom-xs); /* 20px */
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
    
    .card {
        padding: 1rem;
    }
}

/* ==========================================
   🌙 DARK MODE - DODATKOWE STYLE
   ========================================== */

/* Aplikuj zmienne do podstawowych elementów */
a {
    color: var(--link-color);
    transition: var(--transition-theme);
}

a:hover {
    color: var(--link-hover);
}

/* Inputy i formularze */
input, 
textarea, 
select, 
.form-control {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: var(--transition-theme);
}

input:focus, 
textarea:focus, 
select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
}

/* Tabele */
table {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

td {
    border-color: var(--border-light);
}

/* Modaly i dropdowny */
.modal-content, 
.popup, 
.dropdown-menu {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* Scrollbary dla dark mode */
/* Scrollbar dark mode przeniesione do assets/css/dark-mode.css */

/* ==========================================
   🌙 DARK MODE TOGGLE - PRZENIESIONE DO navbar-unified.css
   ========================================== */

/* Wszystkie style dark mode toggle zostały przeniesione do assets/css/navbar-unified.css */
/* dla lepszej organizacji i uniknięcia duplikatów */