/*
Theme Name: Commerce Theme 2
Description: Nowoczesny motyw WordPress z zaawansowanym mega-menu dla TextileWall.pl. Minimalistyczny design z focus na UX.
Author: Studio Xpanda - Radosław Gruszczyński
Author URI: https://xpanda.pl
Version: 2.1.1
License: GPL v2 or later
Text Domain: commerce-theme-2
*/

/* CSS Variables - Design System */
:root {
    /* FORCE LIGHT MODE - Wymuś jasny motyw zawsze */
    color-scheme: light !important;
    
    /* Colors */
    --primary: #1a1a1a;
    --primary-light: #2d2d2d;
    --primary-100: #f5f5f5;
    --primary-500: #1a1a1a;
    --secondary: #3b82f6;
    --secondary-dark: #2563eb;
    --accent: #10b981;
    --accent-dark: #059669;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --background: #ffffff;
    --background-light: #f9fafb;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    
    /* Neutral colors (for compatibility) */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Layout */
    --container-width: 1280px;
    --container-padding: 1.5rem;
    --border-radius: 0.75rem;
    --border-radius-sm: 0.5rem;
    --border-radius-lg: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   WORDPRESS BUTTON OVERRIDE
   Nadpisz domyślne szare buttony WordPress
   ============================================ */
.wp-element-button,
.wp-block-button__link {
    background-color: var(--secondary) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    background-color: var(--secondary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Outline button style */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: white !important;
    color: var(--secondary) !important;
    border: 2px solid var(--secondary) !important;
}

.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--secondary-dark) !important;
    border: 2px solid var(--secondary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Outline button na ciemnym tle (np. w cover/hero) - białe tło dla czytelności */
.wp-block-cover .is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.hero-section .is-style-outline .wp-block-button__link {
    background-color: white !important;
    color: var(--secondary) !important;
    border: 2px solid white !important;
}

.wp-block-cover .is-style-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero-section .is-style-outline .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--secondary-dark) !important;
    border: 2px solid white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main,
.site-main,
#main-content {
    flex: 1;
}

/* Container */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Header Styles */
.site-header {
    background: var(--background);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

.header-top {
    background: var(--primary);
    color: white;
    font-size: 0.875rem;
    padding: var(--space-sm) 0;
}

/* WordPress FSE block support */
.wp-block-group.header-top {
    background: var(--primary);
    color: white;
    font-size: 0.875rem;
    padding: var(--space-sm) 0;
}

.header-top .container,
.header-top .header-top-inner,
.wp-block-group.header-top .container,
.wp-block-group.header-top .header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.header-top-left,
.header-top-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.header-top-left {
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-top-left span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-top a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

.header-top a:hover {
    color: white;
}

/* Account and Cart Icons */
.account-link,
.cart-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
}

.account-icon,
.cart-icon {
    width: 18px;
    height: 18px;
    position: relative;
}

.account-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>') no-repeat center;
    background-size: contain;
}

.cart-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>') no-repeat center;
    background-size: contain;
}

.cart-count {
    background: var(--primary-500);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    position: absolute;
    top: -8px;
    right: -8px;
}

.header-main {
    padding: 0;
}

.header-main .container {
    display: flex;
}

.header-main .container .header-content {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.wp-block-group.header-main {
    padding: 0;
}

/* Override WordPress default spacing */
.wp-block-group.header-main :where(.is-layout-flow) > * {
    margin-block-start: 12px !important;
}

.wp-block-group.header-main > .header-content {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--space-xl) !important;
}

.header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-xl) !important;
    width: 100%;
}

.site-logo,
.wp-block-site-title {
    margin: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.site-logo a,
.wp-block-site-title a {
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.wp-block-group.header-content > .wp-block-site-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.site-logo {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.025em;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-md) !important;
    flex-shrink: 0 !important;
}

.wp-block-group.header-actions {
    margin: 0 !important;
}

.header-actions .btn {
    margin: 0 !important;
}

/* Mega Menu Styles */
.mega-navigation {
    position: relative;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.wp-block-group.mega-navigation {
    margin: 0 !important;
}

.mega-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-item {
    position: relative;
}

.mega-menu-link {
    display: flex;
    align-items: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 0.9375rem;
    transition: var(--transition);
    border-bottom: 3px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.mega-menu-link:hover,
.mega-menu-item:hover > .mega-menu-link {
    color: var(--secondary);
    border-bottom-color: var(--secondary);
}

/* Mega Dropdown */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    max-width: 90vw;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: var(--transition-slow);
    z-index: 100;
    overflow: hidden;
}

.mega-dropdown.active,
.mega-menu-item:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-dropdown-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    padding: var(--space-2xl);
    position: relative;
}

.mega-section {
    padding: 0 var(--space-lg);
    position: relative;
}

.mega-section:first-child {
    padding-left: 0;
}

.mega-section:last-child {
    padding-right: 0;
}

.mega-section-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-lg) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--secondary);
}

/* Featured Section */
.mega-featured {
    grid-column: span 1;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: white !important;
    padding: var(--space-2xl);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    position: relative;
    z-index: 1;
}

.mega-featured::before {
    content: '';
    position: absolute;
    top: calc(var(--space-2xl) * -1);
    left: calc(var(--space-2xl) * -1);
    right: 0;
    bottom: calc(var(--space-2xl) * -1);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    z-index: -1;
}

.mega-featured * {
    color: white !important;
}

.mega-featured .mega-section-title {
    color: white !important;
    border-bottom-color: rgba(255, 255, 255, 0.3);
    font-size: 1.25rem;
}

.mega-featured-content {
    margin-top: var(--space-lg);
}

.mega-featured-text {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

/* Button override for featured section */
.mega-featured .btn-outline {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

.mega-featured .btn-outline:hover {
    background-color: white !important;
    color: var(--secondary) !important;
    transform: translateY(-1px);
}

/* Education Featured Section */
.mega-featured-edu {
    grid-column: span 1;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: white !important;
    padding: var(--space-2xl);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    position: relative;
    z-index: 1;
}

.mega-featured-edu::before {
    content: '';
    position: absolute;
    top: calc(var(--space-2xl) * -1);
    left: calc(var(--space-2xl) * -1);
    right: 0;
    bottom: calc(var(--space-2xl) * -1);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    z-index: -1;
}

.mega-featured-edu * {
    color: white !important;
}

.mega-featured-edu .mega-section-title {
    color: white !important;
    border-bottom-color: rgba(255, 255, 255, 0.3);
    font-size: 1.25rem;
}

.mega-featured-edu .mega-featured-content {
    margin-top: var(--space-lg);
}

.mega-featured-edu .mega-featured-text {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.mega-featured-edu .btn-outline {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

.mega-featured-edu .btn-outline:hover {
    background-color: white !important;
    color: var(--secondary) !important;
    transform: translateY(-1px);
}

/* Product Cards */
.product-card {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    transition: var(--transition);
    border: 1px solid var(--border-light);
}

.product-card-link {
    cursor: pointer;
}

.product-card:hover {
    background: white;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.product-title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.product-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
}

.product-price {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--secondary);
    margin: 0;
}

/* Menu Items */
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    border-radius: var(--border-radius-sm);
}

.menu-item:hover {
    background-color: var(--background-light);
    color: var(--secondary);
}

.menu-item-icon {
    width: 20px;
    height: 20px;
    background-color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
    position: relative;
}

/* CSS Icons */
.icon-calculator::before {
    content: "=";
    font-weight: bold;
}

.icon-gallery::before {
    content: "◎";
}

.icon-upload::before {
    content: "↑";
    font-weight: bold;
}

.icon-fabric::before {
    content: "≈";
    transform: rotate(45deg);
}

.icon-colors::before {
    content: "●";
}

/* Menu Item Icons - Hero Icons SVG */
.menu-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.menu-item-icon::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Calculator icon */
.icon-calculator::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V13.5Zm0 2.25h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V18Zm2.498-6.75h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V13.5Zm0 2.25h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V18Zm2.504-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5ZM8.25 6h7.5v2.25h-7.5V6ZM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 0 0 2.25 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0 0 12 2.25Z"/></svg>');
}

/* Gallery icon */
.icon-gallery::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>');
}

/* Upload icon */
.icon-upload::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>');
}

/* Fabric icon */
.icon-fabric::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg>');
}

/* Colors icon */
.icon-colors::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>');
}

/* Light icon */
.icon-light::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg>');
}

/* Tools icon */
.icon-tools::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"/></svg>');
}

/* Refresh icon */
.icon-refresh::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>');
}

/* Home icon */
.icon-home::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>');
}

/* Sound icon */
.icon-sound::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"/></svg>');
}

/* Clock icon */
.icon-clock::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>');
}

/* Certificate icon */
.icon-certificate::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>');
}

/* Shield icon */
.icon-shield::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%236366f1"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg>');
}

.menu-item-content {
    flex: 1;
}

.menu-item-title {
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-xs) 0;
    font-size: 0.9375rem;
}

.menu-item-description {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: none;
    cursor: pointer;
    line-height: 1.2;
    gap: var(--space-sm);
}

.btn-primary {
    background-color: var(--secondary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: white;
    color: var(--secondary);
    border: 2px solid var(--secondary);
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--secondary-dark);
    border: 2px solid var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Outline buttons na ciemnym tle (cover/hero) */
.wp-block-cover .btn-outline,
.hero-section .btn-outline {
    background-color: white;
    color: var(--secondary);
    border: 2px solid white;
}

.wp-block-cover .btn-outline:hover,
.hero-section .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--secondary-dark);
    border: 2px solid white;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ===============================================
   COLOR SYSTEM - FORCE LIGHT MODE & TEXT COLORS
   =============================================== */

/* Header Top - white text on dark background */
.header-top *,
.header-top h1,
.header-top h2,
.header-top h3,
.header-top h4,
.header-top h5,
.header-top h6,
.header-top p,
.header-top span,
.header-top a,
.header-top li {
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-top a:hover {
    color: rgba(255, 255, 255, 1) !important;
}

/* Footer - white text on dark background */
.site-footer *,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.site-footer a:hover {
    color: rgba(255, 255, 255, 1) !important;
}

.site-footer strong {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Main Content - dark text on white background (unless has-*-color class) */
main,
.site-main,
#main-content {
    background-color: #ffffff !important;
}

main:not([class*="has-"][class*="-color"]),
.site-main:not([class*="has-"][class*="-color"]),
#main-content:not([class*="has-"][class*="-color"]) {
    color: #1a1a1a;
}

/* Headings in main content */
main h1:not(.site-footer h1):not(.header-top h1):not([class*="has-"][class*="-color"]):not(.wp-block-cover h1),
main h2:not(.site-footer h2):not(.header-top h2):not([class*="has-"][class*="-color"]):not(.wp-block-cover h2),
main h3:not(.site-footer h3):not(.header-top h3):not([class*="has-"][class*="-color"]):not(.wp-block-cover h3),
main h4:not(.site-footer h4):not(.header-top h4):not([class*="has-"][class*="-color"]):not(.wp-block-cover h4),
main h5:not(.site-footer h5):not(.header-top h5):not([class*="has-"][class*="-color"]):not(.wp-block-cover h5),
main h6:not(.site-footer h6):not(.header-top h6):not([class*="has-"][class*="-color"]):not(.wp-block-cover h6),
main .wp-block-heading:not([class*="has-"][class*="-color"]):not(.wp-block-cover .wp-block-heading) {
    color: #1a1a1a;
}

/* Paragraphs and lists in main content */
main p:not(.site-footer p):not(.header-top p):not(.mega-featured p):not(.mega-featured-edu p):not([class*="has-"][class*="-color"]):not(.wp-block-cover p),
main li:not(.site-footer li):not(.header-top li):not(.mega-featured li):not(.mega-featured-edu li):not([class*="has-"][class*="-color"]):not(.wp-block-cover li),
main .wp-block-paragraph:not(.mega-featured .wp-block-paragraph):not(.mega-featured-edu .wp-block-paragraph):not([class*="has-"][class*="-color"]):not(.wp-block-cover .wp-block-paragraph) {
    color: #333333;
}

/* Cover blocks - always white text */
.wp-block-cover,
.wp-block-cover *,
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6,
.wp-block-cover p,
.wp-block-cover .wp-block-heading,
.wp-block-cover .wp-block-paragraph {
    color: #ffffff !important;
}

/* ===============================================
   MOBILE NAVIGATION
   =============================================== */

/* Mobile menu and toggle - hidden by default */
.mobile-menu-toggle,
.mobile-nav,
.mobile-nav-overlay {
    display: none;
}

/* Hamburger button */
.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary);
    margin: 5px 0;
    transition: 0.3s;
}

/* Hamburger animation when active */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ===============================================
   RESPONSIVE DESIGN
   =============================================== */

@media (max-width: 1024px) {
    .mega-dropdown {
        width: 95vw;
        left: 2.5vw;
        transform: none;
    }
    
    .mega-dropdown-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
    
    .mega-featured {
        grid-column: span 2;
        margin: 0 0 var(--space-lg) 0;
    }
}

@media (max-width: 768px) {
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: block !important;
    }

    /* Header layout for mobile */
    .header-content {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: var(--space-md) !important;
    }

    /* Logo on left */
    .site-logo {
        order: 1;
        font-size: 1.25rem !important;
    }

    /* Hamburger on right */
    .mobile-menu-toggle {
        order: 3;
    }

    /* Hide desktop navigation */
    .mega-navigation {
        display: none;
    }

    /* Hide desktop header actions */
    .header-actions {
        display: none;
    }

    /* Mobile navigation - hidden by default */
    .mobile-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: #ffffff;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        padding: 80px 20px 20px 20px;
    }

    /* Mobile nav active */
    .mobile-nav.active {
        left: 0;
    }

    /* Mobile nav overlay */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .mobile-nav-overlay.active {
        display: block;
    }

    /* Mobile menu items */
    .mobile-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-item {
        border-bottom: 1px solid #e5e7eb;
    }

    .mobile-nav-link {
        display: block;
        padding: 15px 10px;
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s;
    }

    .mobile-nav-link:hover {
        background: #f9fafb;
        color: var(--secondary);
    }

    /* Mobile submenu */
    .mobile-submenu {
        list-style: none;
        padding-left: 20px;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-submenu.active {
        max-height: 500px;
    }

    .mobile-submenu-link {
        display: block;
        padding: 10px;
        color: #6b7280;
        text-decoration: none;
        font-size: 0.9rem;
    }

    /* Hide header top on mobile */
    .header-top {
        display: none !important;
    }

    /* Hide mega dropdown on mobile */
    .mega-dropdown {
        display: none !important;
    }
    
    .mega-dropdown-content {
        grid-template-columns: 1fr;
        padding: var(--space-lg);
    }
    
    .mega-featured {
        grid-column: span 1;
        margin: 0 0 var(--space-lg) 0;
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
    }
    
    .header-main {
        padding: var(--space-sm) var(--container-padding);
    }

    .site-logo {
        font-size: 1.1rem !important;
    }

    /* Mobile nav full width */
    .mobile-nav {
        width: 100%;
        left: -100%;
    }

    .mobile-nav.active {
        left: 0;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.mega-menu-link:focus,
.menu-item:focus,
.btn:focus {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Dark mode support */
/* Dark mode disabled - keeping light theme only */
/* 
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #ffffff;
        --text-primary: #ffffff;
        --text-secondary: #d1d5db;
        --background: #111827;
        --background-light: #1f2937;
        --border: #374151;
        --border-light: #4b5563;
    }
}
*/

/* Print styles */
@media print {
    .mega-dropdown,
    .header-top,
    .header-actions {
        display: none !important;
    }
}

/* Demo page specific styles */
.site-header {
    margin-bottom: 0;
}

main {
    background: var(--neutral-50);
}

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

.site-footer {
    background: var(--primary);
    color: white;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

.site-footer a:hover {
    color: white;
}

/* ===============================================
   PAGE & SINGLE POST STYLES
   =============================================== */

/* Page Template */
.page-wrapper {
    padding: var(--space-3xl) 0;
    background: var(--background);
}

.page-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.page-header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border);
}

.page-title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin: 0;
    line-height: 1.2;
}

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

.page-content .entry-content h2 {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
    color: var(--primary);
}

.page-content .entry-content h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--primary);
}

.page-content .entry-content p {
    margin-bottom: var(--space-lg);
}

.page-content .entry-content ul,
.page-content .entry-content ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.page-content .entry-content li {
    margin-bottom: var(--space-sm);
}

/* Single Post Template */
.single-post-wrapper {
    padding: var(--space-3xl) 0;
    background: var(--background);
}

.single-post-content {
    max-width: 900px;
    margin: 0 auto;
}

.post-header {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.post-title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.2;
}

.post-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.post-category {
    padding: var(--space-xs) var(--space-md);
    background: var(--secondary);
    color: white;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
}

.post-thumbnail {
    margin-bottom: var(--space-2xl);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
}

.post-content h2 {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
    color: var(--primary);
}

.post-content h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--primary);
}

.post-content p {
    margin-bottom: var(--space-lg);
}

.post-content ul,
.post-content ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.post-content li {
    margin-bottom: var(--space-sm);
}

.post-footer {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
    margin-bottom: var(--space-2xl);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-tags .tag {
    padding: var(--space-xs) var(--space-md);
    background: var(--background-light);
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    text-decoration: none;
    transition: var(--transition);
}

.post-tags .tag:hover {
    background: var(--secondary);
    color: white;
}

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--border);
    margin-top: var(--space-2xl);
}

.post-navigation a {
    flex: 1;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
}

.post-navigation a:hover {
    color: var(--secondary);
}

.nav-subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.nav-title {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: 1.125rem;
}


.site-footer .wp-block-columns {
    margin-bottom: 0;
}

.site-footer .wp-block-social-links a {
    color: var(--primary) !important;
    background-color: white !important;
    border-radius: 50% !important;
}

.site-footer .wp-block-social-links a:hover {
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.site-footer .wp-block-social-links .wp-social-link {
    background-color: white !important;
    color: var(--primary) !important;
    border-radius: 50% !important;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.site-footer .wp-block-social-links svg {
    fill: var(--primary) !important;
}

.site-footer ul {
    list-style: none;
    margin: 0;
}

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

.site-footer ul li:last-child {
    margin-bottom: 0;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

/* Input fields - text, email, tel, number, password, etc. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: var(--font-primary);
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #ffffff;
    border: 2px solid var(--border);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    outline: none;
}

/* Focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Hover state */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    border-color: var(--text-secondary);
}

/* Textarea specific */
textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select specific */
select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--background-light);
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

/* Checkboxes and Radio buttons */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--secondary);
}

/* Labels */
label {
    display: block;
    margin-bottom: 6px;
    font-weight: var(--font-weight-medium);
    color: #1a1a1a;
}

/* Form groups */
.form-group,
.wp-block-group form > div,
.woocommerce-form-row {
    margin-bottom: 20px;
}

/* Submit buttons in forms */
form button[type="submit"],
form input[type="submit"],
.woocommerce-Button {
    background-color: var(--secondary);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover,
.woocommerce-Button:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Error states */
input.error,
textarea.error,
select.error,
.woocommerce-invalid input {
    border-color: #ef4444 !important;
}

/* Success states */
input.success,
textarea.success,
select.success {
    border-color: var(--accent) !important;
}