/*
Theme Name: Aleczysto Theme
Theme URI: https://aleczysto.pl
Author: Aleczysto Team
Author URI: https://aleczysto.pl
Description: Problem-first cleaning product advisory theme for aleczysto.pl. Lightweight custom theme designed for the Cleaning Advisor MVP.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aleczysto
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Brand colors */
    --acz-primary: #048fd2;
    --acz-primary-dark: #036fa6;
    --acz-primary-light: #e8f4fb;
    --acz-secondary: #1a3344;
    --acz-accent: #2ecc71;
    --acz-warning: #d0121a;

    /* Neutrals */
    --acz-white: #ffffff;
    --acz-gray-50: #f8f9fa;
    --acz-gray-100: #e9ecef;
    --acz-gray-200: #dee2e6;
    --acz-gray-300: #ced4da;
    --acz-gray-500: #6c757d;
    --acz-gray-700: #495057;
    --acz-gray-900: #212529;

    /* Typography */
    --acz-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --acz-font-size-base: 1rem;
    --acz-font-size-sm: 0.875rem;
    --acz-font-size-lg: 1.125rem;
    --acz-font-size-xl: 1.5rem;
    --acz-font-size-2xl: 2rem;
    --acz-font-size-3xl: 2.5rem;
    --acz-line-height: 1.6;

    /* Spacing */
    --acz-space-xs: 0.25rem;
    --acz-space-sm: 0.5rem;
    --acz-space-md: 1rem;
    --acz-space-lg: 1.5rem;
    --acz-space-xl: 2rem;
    --acz-space-2xl: 3rem;
    --acz-space-3xl: 4rem;

    /* Layout */
    --acz-container-max: 1200px;
    --acz-container-padding: 1rem;

    /* Borders & Shadows */
    --acz-radius: 8px;
    --acz-radius-lg: 12px;
    --acz-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --acz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --acz-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --acz-transition: 200ms ease;
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--acz-font-sans);
    font-size: var(--acz-font-size-base);
    line-height: var(--acz-line-height);
    color: var(--acz-gray-900);
    background-color: var(--acz-white);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--acz-primary);
    text-decoration: none;
    transition: color var(--acz-transition);
}

a:hover {
    color: var(--acz-primary-dark);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.acz-container {
    max-width: var(--acz-container-max);
    margin-inline: auto;
    padding-inline: var(--acz-container-padding);
}

.acz-section {
    padding-block: var(--acz-space-3xl);
}

.acz-section--alt {
    background: var(--acz-gray-50);
}

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

.acz-section-header h2 {
    font-size: var(--acz-font-size-2xl);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-sm);
}

.acz-section-header p {
    color: var(--acz-gray-500);
    font-size: var(--acz-font-size-lg);
    margin: 0;
}

.acz-section-cta {
    text-align: center;
    margin-top: var(--acz-space-2xl);
}

.acz-section-empty {
    text-align: center;
    color: var(--acz-gray-500);
}

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

.site-header {
    background: var(--acz-white);
    border-bottom: 1px solid var(--acz-gray-100);
    padding-block: var(--acz-space-md);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .acz-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--acz-space-lg);
}

.site-logo {
    font-size: var(--acz-font-size-xl);
    font-weight: 700;
    color: var(--acz-primary);
}

.site-nav a {
    color: var(--acz-gray-700);
    font-weight: 500;
    padding: var(--acz-space-sm) var(--acz-space-md);
}

.site-nav a:hover {
    color: var(--acz-primary);
}

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

.site-footer {
    background: var(--acz-secondary);
    color: var(--acz-gray-200);
    padding-block: var(--acz-space-2xl);
    margin-top: var(--acz-space-3xl);
}

.site-footer a {
    color: var(--acz-gray-200);
}

.site-footer a:hover {
    color: var(--acz-white);
}

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

.acz-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--acz-space-sm);
    padding: var(--acz-space-sm) var(--acz-space-lg);
    border: none;
    border-radius: var(--acz-radius);
    font-family: inherit;
    font-size: var(--acz-font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--acz-transition);
    text-decoration: none;
    line-height: 1.5;
}

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

.acz-btn--primary:hover {
    background: var(--acz-primary-dark);
    color: var(--acz-white);
}

.acz-btn--outline {
    background: transparent;
    color: var(--acz-primary);
    border: 2px solid var(--acz-primary);
}

.acz-btn--outline:hover {
    background: var(--acz-primary);
    color: var(--acz-white);
}

.acz-btn--lg {
    padding: var(--acz-space-md) var(--acz-space-xl);
    font-size: var(--acz-font-size-lg);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.acz-card {
    background: var(--acz-white);
    border: 1px solid var(--acz-gray-100);
    border-radius: var(--acz-radius-lg);
    padding: var(--acz-space-lg);
    box-shadow: var(--acz-shadow-sm);
    transition: box-shadow var(--acz-transition), transform var(--acz-transition);
}

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

.acz-card__title {
    font-size: var(--acz-font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--acz-space-sm);
    color: var(--acz-gray-900);
}

.acz-card__title a {
    color: inherit;
    text-decoration: none;
}

.acz-card__title a:hover {
    color: var(--acz-primary);
}

.acz-card__text {
    color: var(--acz-gray-500);
    margin: 0;
    font-size: var(--acz-font-size-sm);
}

/* Problem card */
.acz-problem-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.acz-problem-card__link {
    margin-top: auto;
    padding-top: var(--acz-space-md);
    font-size: var(--acz-font-size-sm);
    font-weight: 600;
    color: var(--acz-primary);
}

/* Surface card */
.acz-surface-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.acz-surface-card__link {
    margin-top: auto;
    padding-top: var(--acz-space-md);
    font-size: var(--acz-font-size-sm);
    font-weight: 600;
    color: var(--acz-primary);
}

/* Product card */
.acz-product-card {
    display: flex;
    flex-direction: column;
}

.acz-product-card__brand {
    font-size: 11px;
    font-weight: 600;
    color: var(--acz-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--acz-space-xs);
}

.acz-product-card .acz-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.acz-grid {
    display: grid;
    gap: var(--acz-space-lg);
}

.acz-grid--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.acz-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.acz-grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

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

.entry-content h1,
.entry-content h2,
.entry-content h3 {
    color: var(--acz-secondary);
    line-height: 1.3;
}

.entry-content p {
    margin-block: var(--acz-space-md);
}

/* ==========================================================================
   Homepage: Hero
   ========================================================================== */

.acz-hero {
    background: var(--acz-primary-light);
    padding: var(--acz-space-3xl) var(--acz-container-padding);
    text-align: center;
}

.acz-hero__title {
    font-size: var(--acz-font-size-3xl);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-md);
    max-width: 700px;
    margin-inline: auto;
    line-height: 1.2;
}

.acz-hero__subtitle {
    font-size: var(--acz-font-size-lg);
    color: var(--acz-gray-700);
    max-width: 600px;
    margin: 0 auto var(--acz-space-xl);
}

.acz-hero__actions {
    display: flex;
    gap: var(--acz-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.acz-breadcrumb {
    font-size: var(--acz-font-size-sm);
    color: var(--acz-gray-500);
    margin: 0 0 var(--acz-space-md);
}

.acz-breadcrumb a {
    color: var(--acz-gray-500);
}

.acz-breadcrumb a:hover {
    color: var(--acz-primary);
}

/* ==========================================================================
   Homepage: Steps
   ========================================================================== */

.acz-step {
    text-align: center;
}

.acz-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--acz-primary-light);
    color: var(--acz-primary);
    font-size: var(--acz-font-size-xl);
    font-weight: 700;
    margin-bottom: var(--acz-space-md);
}

.acz-step__title {
    font-size: var(--acz-font-size-lg);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-sm);
}

.acz-step__text {
    color: var(--acz-gray-500);
    font-size: var(--acz-font-size-sm);
    margin: 0;
}

/* ==========================================================================
   Homepage: Trust
   ========================================================================== */

.acz-trust-item {
    text-align: center;
}

.acz-trust-item__title {
    font-size: var(--acz-font-size-lg);
    font-weight: 600;
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-sm);
}

.acz-trust-item__text {
    color: var(--acz-gray-500);
    font-size: var(--acz-font-size-sm);
    margin: 0;
}

/* ==========================================================================
   Expert Banner
   ========================================================================== */

.acz-expert-banner {
    background: var(--acz-secondary);
    color: var(--acz-white);
}

.acz-expert-banner__inner {
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
}

.acz-expert-banner__title {
    font-size: var(--acz-font-size-2xl);
    color: var(--acz-white);
    margin: 0 0 var(--acz-space-md);
}

.acz-expert-banner__text {
    color: var(--acz-gray-200);
    font-size: var(--acz-font-size-lg);
    margin: 0 0 var(--acz-space-xl);
}

.acz-expert-banner__actions {
    display: flex;
    gap: var(--acz-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.acz-expert-banner .acz-btn--outline {
    border-color: var(--acz-white);
    color: var(--acz-white);
}

.acz-expert-banner .acz-btn--outline:hover {
    background: var(--acz-white);
    color: var(--acz-secondary);
}

/* ==========================================================================
   Advisor Intro (page-doradca)
   ========================================================================== */

.acz-advisor-intro {
    background: var(--acz-primary-light);
    padding: var(--acz-space-3xl) var(--acz-container-padding) var(--acz-space-xl);
    text-align: center;
}

.acz-advisor-intro__title {
    font-size: var(--acz-font-size-2xl);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-md);
}

.acz-advisor-intro__text {
    font-size: var(--acz-font-size-lg);
    color: var(--acz-gray-700);
    max-width: 640px;
    margin: 0 auto var(--acz-space-lg);
    line-height: 1.6;
}

.acz-advisor-intro__hints {
    display: flex;
    gap: var(--acz-space-lg);
    justify-content: center;
    flex-wrap: wrap;
}

.acz-advisor-intro__hint {
    font-size: var(--acz-font-size-sm);
    color: var(--acz-gray-500);
    display: inline-flex;
    align-items: center;
    gap: var(--acz-space-xs);
}

.acz-advisor-intro__hint::before {
    content: '✓';
    color: var(--acz-accent);
    font-weight: 700;
}

/* ==========================================================================
   Problem Landing Page
   ========================================================================== */

.acz-problem-hero {
    background: var(--acz-primary-light);
    padding: var(--acz-space-3xl) var(--acz-container-padding) var(--acz-space-xl);
    text-align: center;
}

.acz-problem-hero__title {
    font-size: var(--acz-font-size-2xl);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-md);
}

.acz-problem-hero__subtitle {
    font-size: var(--acz-font-size-lg);
    color: var(--acz-gray-700);
    max-width: 640px;
    margin: 0 auto var(--acz-space-xl);
}

.acz-problem-hero__actions {
    display: flex;
    gap: var(--acz-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.acz-problem-content {
    max-width: 800px;
}

/* Problem page advice blocks */
.acz-problem-advice {
    margin-top: var(--acz-space-2xl);
}

.acz-advice-block {
    padding: var(--acz-space-lg);
    border-radius: var(--acz-radius);
    margin-bottom: var(--acz-space-md);
    font-size: var(--acz-font-size-sm);
    line-height: 1.6;
}

.acz-advice-block--tips {
    background: #d4edda;
    border-left: 4px solid var(--acz-accent);
    color: #155724;
}

.acz-advice-block--warning {
    background: #f8d7da;
    border-left: 4px solid var(--acz-warning);
    color: #721c24;
}

.acz-advice-block--avoid {
    background: #fff3cd;
    border-left: 4px solid #dba617;
    color: #856404;
}

.acz-advice-block__title {
    font-weight: 700;
    margin: 0 0 var(--acz-space-xs);
    font-size: var(--acz-font-size-base);
}

.acz-advice-block__line {
    margin: 0 0 4px;
}

/* Problem page products */
.acz-problem-products {
    margin-bottom: var(--acz-space-xl);
}

.acz-problem-products__title {
    font-size: var(--acz-font-size-lg);
    font-weight: 600;
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-md);
    padding-bottom: var(--acz-space-xs);
    border-bottom: 2px solid var(--acz-primary-light);
}

/* Inline advisor CTA */
.acz-inline-advisor-cta {
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
    padding: var(--acz-space-xl);
    background: var(--acz-primary-light);
    border-radius: var(--acz-radius-lg);
}

.acz-inline-advisor-cta__title {
    font-size: var(--acz-font-size-xl);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-sm);
}

.acz-inline-advisor-cta__text {
    color: var(--acz-gray-500);
    margin: 0 0 var(--acz-space-lg);
}

/* ==========================================================================
   Surface Landing Page
   ========================================================================== */

.acz-surface-hero {
    background: var(--acz-primary-light);
    padding: var(--acz-space-2xl) var(--acz-container-padding) var(--acz-space-xl);
    text-align: center;
}


.acz-surface-hero__title {
    font-size: var(--acz-font-size-2xl);
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-md);
}

.acz-surface-hero__subtitle {
    font-size: var(--acz-font-size-lg);
    color: var(--acz-gray-700);
    max-width: 640px;
    margin: 0 auto var(--acz-space-xl);
}

.acz-surface-hero__actions {
    display: flex;
    gap: var(--acz-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Related Links
   ========================================================================== */

.acz-related-links {
    margin-bottom: var(--acz-space-xl);
}

.acz-related-links__title {
    font-size: var(--acz-font-size-lg);
    font-weight: 600;
    color: var(--acz-secondary);
    margin: 0 0 var(--acz-space-md);
}

.acz-related-links__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acz-space-sm);
}

.acz-related-links__item {
    display: inline-flex;
    padding: var(--acz-space-sm) var(--acz-space-md);
    border: 1px solid var(--acz-gray-200);
    border-radius: var(--acz-radius);
    font-size: var(--acz-font-size-sm);
    color: var(--acz-gray-700);
    background: var(--acz-white);
    transition: all var(--acz-transition);
}

.acz-related-links__item:hover {
    border-color: var(--acz-primary);
    color: var(--acz-primary);
    background: var(--acz-primary-light);
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */

.acz-product-detail {
    max-width: 800px;
}

.acz-product-detail__header {
    margin-bottom: var(--acz-space-xl);
}

.acz-product-detail__header h1 {
    font-size: var(--acz-font-size-2xl);
    color: var(--acz-secondary);
    margin: var(--acz-space-xs) 0 var(--acz-space-md);
}

.acz-product-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acz-space-sm);
    margin-bottom: var(--acz-space-lg);
}

.acz-product-detail__tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--acz-font-size-sm);
    font-weight: 500;
    border-radius: var(--acz-radius);
    background: var(--acz-gray-50);
    color: var(--acz-gray-700);
}

.acz-product-detail__tag--ph {
    background: #fef3cd;
    color: #856404;
}

.acz-product-detail__buy {
    margin-bottom: var(--acz-space-xl);
}

.acz-product-detail__image {
    margin: 0 0 var(--acz-space-xl);
    border-radius: var(--acz-radius-lg);
    overflow: hidden;
}

.acz-product-detail__taxonomies {
    margin-top: var(--acz-space-2xl);
    padding-top: var(--acz-space-xl);
    border-top: 1px solid var(--acz-gray-100);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --acz-font-size-3xl: 1.75rem;
        --acz-font-size-2xl: 1.5rem;
        --acz-space-3xl: 2.5rem;
    }

    .site-header .acz-container {
        flex-wrap: wrap;
    }

    .acz-advisor-intro__hints {
        flex-direction: column;
        align-items: center;
    }
}