/*
 Theme Name:   Astra Child - Studio Oś
 Theme URI:    https://studio-os.pl
 Description:  Custom child theme for Studio Oś - Pracownia Architektoniczna
 Author:       Studio Oś
 Author URI:   https://studio-os.pl
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child-studioos
*/

/* ==========================================================================
   1. CSS VARIABLES & BASE
   ========================================================================== */

:root {
    --sos-white: #FFFFFF;
    --sos-black: #1A1A1A;
    --sos-text: #1A1A1A;
    --sos-text-light: #666666;
    --sos-coral: #922f21;
    --sos-coral-hover: #B34D4D;
    --sos-coral-light: #D97373;
    --sos-coral-muted: #E6A5A5;
    --sos-border: #E5E5E5;
    --sos-bg-light: #F9F9F9;
    --sos-font-primary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sos-font-heading: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sos-max-width: 1200px;
    --sos-content-width: 720px;
    --sos-text-width: 680px;
    --sos-spacing-xs: 0.5rem;
    --sos-spacing-sm: 1rem;
    --sos-spacing-md: 1.5rem;
    --sos-spacing-lg: 2.5rem;
    --sos-spacing-xl: 3.5rem;
    --sos-spacing-xxl: 5rem;
}

/* ==========================================================================
   2. GLOBAL RESET & TYPOGRAPHY
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Account for fixed header */
}

body {
    font-family: var(--sos-font-primary) !important;
    color: var(--sos-text) !important;
    background-color: #E5E5E5 !important;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sos-font-heading) !important;
    color: var(--sos-text) !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

p {
    color: var(--sos-text-light);
    line-height: 1.8;
    font-size: 1rem;
}

a {
    color: var(--sos-text);
    text-decoration: none;
    transition: color 0.2s ease-out;
}

a:hover {
    color: var(--sos-coral);
}

/* ==========================================================================
   3. ASTRA OVERRIDES - Layout
   ========================================================================== */

/* Full width layout */
.ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
    background: transparent;
    padding: 0;
}

.ast-separate-container .ast-article-post {
    margin: 0;
}

/* Remove Astra default sidebar */
.ast-right-sidebar .site-content .ast-container {
    display: block !important;
}

#secondary {
    display: none !important;
}

.site-content > .ast-container {
    max-width: 100% !important;
}

/* Remove default content padding */
.ast-separate-container .site-main > .ast-row {
    padding: 0;
}

/* Page builder template - remove all Astra content wrapping */
.ast-page-builder-template .site-content > .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.ast-page-builder-template .entry-content {
    margin: 0 !important;
    padding: 0 !important;
}

.ast-page-builder-template .entry-header {
    display: none;
}

/* Remove default padding from Astra page builder template */
.ast-single-post.ast-page-builder-template .site-main > article,
.ast-page-builder-template .post-navigation {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full-width breakout for alignfull */
.ast-page-builder-template .alignfull,
.entry-content .alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Remove Astra's separate container box styling */
.ast-separate-container .ast-article-single:not(.ast-related-post),
.ast-separate-container .comments-area {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ast-separate-container .site-main {
    padding: 0 !important;
}

/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */

.site-header,
.ast-primary-header {
    background-color: #E5E5E5 !important;
    box-shadow: none !important;
    border: none !important;
}

.main-header-bar {
    box-shadow: none !important;
    background-color: #E5E5E5 !important;
    border: none !important;
}

/* Navigation wrapper - Full width */
.main-header-bar .ast-container {
    max-width: 100% !important; /* Full width instead of 1200px */
    margin: 0 auto;
    padding: 0 3rem !important; /* More padding on sides */
}

/* Logo */
.site-branding .site-title {
    display: none !important; /* Hide site title text - logo only */
}

.custom-logo {
    max-height: 80px !important;
    width: auto !important;
    opacity: 0.4 !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Logo link wrapper */
.custom-logo-link {
    display: inline-block;
    line-height: 1;
}

/* Navigation links - Slightly larger font */
.main-header-menu > .menu-item > a,
.ast-header-break-point .ast-button-wrap .menu-toggle,
.main-navigation a {
    font-family: var(--sos-font-primary) !important;
    font-size: 0.95rem !important; /* Increased from 0.85rem */
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: var(--sos-text) !important;
    padding: 0 1.4rem !important; /* Slightly more padding */
    transition: color 0.2s ease-out !important;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a {
    color: var(--sos-coral) !important;
}

/* Disable active state for anchor link (Kontakt) */
.main-header-menu > .menu-item > a[href*="#kontakt"],
.main-header-menu > .menu-item.current-menu-item > a[href*="#kontakt"],
.main-header-menu > .menu-item.current_page_item > a[href*="#kontakt"] {
    color: var(--sos-text) !important; /* Reset to default color */
}

/* Only highlight on hover */
.main-header-menu > .menu-item > a[href*="#kontakt"]:hover {
    color: var(--sos-coral) !important;
}

/* === MOBILE NAVIGATION - Better Touch Targets === */
@media (max-width: 768px) {
    /* Mobile menu background - same as page */
    .ast-hf-mobile-menu,
    .main-header-menu,
    .ast-mobile-menu-buttons,
    .ast-mobile-popup-content {
        background-color: #E5E5E5 !important;
    }

    /* Larger, easier to tap menu items */
    .main-header-menu > .menu-item > a,
    .main-navigation a,
    .ast-mobile-menu-buttons a {
        font-size: 1rem !important; /* Larger font (was 0.85rem) */
        padding: 1rem 1.5rem !important; /* Much larger padding */
        min-height: 48px !important; /* iOS/Android touch target standard */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Align to right */
        background-color: transparent !important; /* No background */
    }

    /* More spacing between menu items */
    .main-header-menu > .menu-item {
        margin: 0.3rem 0 !important; /* Vertical spacing */
    }

    /* Full width menu items for easier tapping */
    .ast-mobile-menu-buttons .menu-item a,
    .ast-header-break-point .main-header-menu .menu-item a {
        width: 100% !important;
        text-align: center !important;
    }

    /* Hamburger menu icon - black color in ALL states */
    .menu-toggle.main-header-menu-toggle,
    .ast-mobile-menu-trigger-minimal,
    .mobile-menu-toggle-icon,
    .ast-mobile-svg,
    button.menu-toggle,
    .ast-button-wrap button,
    .site-header-focus-item button,
    .ast-mobile-menu-trigger-minimal span,
    .ast-mobile-menu-trigger-minimal svg,
    .mobile-menu-toggle-icon svg,
    .ast-mobile-svg.ast-menu-svg,
    .ast-mobile-svg.ast-close-svg,
    .menu-toggle:hover,
    .menu-toggle:focus,
    .menu-toggle:active,
    button.menu-toggle:hover,
    button.menu-toggle:focus,
    button.menu-toggle:active,
    .ast-button-wrap button:hover,
    .ast-button-wrap button:focus,
    .ast-button-wrap button:active {
        color: #1A1A1A !important; /* Black */
        fill: #1A1A1A !important; /* Black for SVG */
    }

    /* Force SVG path to be black in ALL states */
    .ast-mobile-svg path,
    .mobile-menu-toggle-icon path,
    .menu-toggle:hover .ast-mobile-svg path,
    .menu-toggle:focus .ast-mobile-svg path,
    .menu-toggle:active .ast-mobile-svg path,
    .menu-toggle:hover path,
    .menu-toggle:focus path,
    .menu-toggle:active path {
        fill: #1A1A1A !important;
        stroke: #1A1A1A !important;
    }

    /* Override Astra color variables for mobile menu in ALL states */
    .ast-header-break-point .ast-button-wrap .menu-toggle,
    .ast-header-break-point .menu-toggle,
    .ast-header-break-point .menu-toggle:hover,
    .ast-header-break-point .menu-toggle:focus,
    .ast-header-break-point .menu-toggle:active {
        color: #1A1A1A !important;
        border-color: transparent !important;
        background: transparent !important;
    }

    /* Better mobile menu container */
    .ast-mobile-menu-buttons {
        padding: 1rem 0 !important;
    }

    /* Active menu item - NO background color (uniform) */
    .main-header-menu > .menu-item.current-menu-item > a {
        background-color: transparent !important;
        color: var(--sos-text) !important;
    }

    /* Exclude Kontakt from mobile highlighting */
    .main-header-menu > .menu-item.current-menu-item > a[href*="#kontakt"],
    .main-header-menu > .menu-item.current_page_item > a[href*="#kontakt"],
    .main-header-menu > .menu-item > a[href*="#kontakt"] {
        background-color: transparent !important;
        color: var(--sos-text) !important;
    }

    /* Hover state on mobile - NO background color (uniform) */
    @media (hover: hover) {
        .main-header-menu > .menu-item > a:hover {
            background-color: transparent !important;
            color: var(--sos-text) !important;
        }
    }
}

/* Sticky header */
.ast-sticky-active .main-header-bar,
#masthead.ast-sticky-active {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   5. HERO SECTION
   ========================================================================== */

.sos-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sos-hero-image {
    width: 100%;
    height: 80vh;
    min-height: 600px;
    max-height: none;
    overflow: hidden;
}

.sos-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    display: block;
}

.sos-hero-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem var(--sos-spacing-lg);
    text-align: left;
}

.sos-hero-tagline {
    font-size: clamp(18px, 4vw, 2.5rem) !important;
    line-height: 1.3;
}

.sos-hero-description {
    font-size: 1.05rem;
    color: var(--sos-text-light);
    line-height: 1.8;
    max-width: 680px;
    margin-left: 0;
    margin-right: auto;
}

/* Gutenberg cover block as hero */
.wp-block-cover.sos-hero-cover {
    min-height: 85vh !important;
    max-height: none !important;
    height: 85vh !important;
    margin-bottom: 0 !important;
}

/* Ensure image fills the entire hero area without white space */
.wp-block-cover.sos-hero-cover img,
.wp-block-cover.sos-hero-cover .wp-block-cover__background,
.wp-block-cover.sos-hero-cover .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
}

.wp-block-cover.sos-hero-cover .wp-block-cover__inner-container {
    max-width: var(--sos-max-width);
    padding: 2rem;
}

/* ==========================================================================
   6. PROJEKTY SECTION - Horizontal Scroll Carousel
   ========================================================================== */

.sos-projekty-section {
    width: 100%;
    margin: 0;
    padding: 0 0 var(--sos-spacing-xl);
    overflow: visible;
}

.sos-projekty-title {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    color: var(--sos-text) !important;
    letter-spacing: -0.03em;
    text-align: right;
    margin: 0 0 var(--sos-spacing-lg) 0;
    padding: 0 3rem; /* Same padding as navigation */
}

.sos-projekty-description {
    max-width: 650px;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: 0;
    color: #666;
    text-align: right;
    padding: 0 3rem;
}

/* Horizontal scroll container */
.sos-projekty-scroll {
    display: flex;
    gap: 20px; /* Space between cards */
    margin-left: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-top: 0;
    padding-right: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem; /* Same as gap for consistent spacing */

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.sos-projekty-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Project card - Vertical layout (image top, text bottom) */
.sos-projekt-card {
    flex: 0 0 auto;
    width: clamp(350px, 40vw, 550px); /* Large cards */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column; /* Vertical: image on top */
    gap: 0;
    border: none;
    border-radius: 0;
    background: transparent; /* Transparent - inherit page background */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
}

.sos-projekt-card:hover {
    transform: translateY(-4px); /* Subtle lift */
}

.sos-projekt-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* Landscape */
    overflow: hidden;
    margin-bottom: 0;
    background: #E5E5E5;
}

.sos-projekt-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sos-projekt-card:hover .sos-projekt-image img {
    transform: scale(1.02);
}

/* Project info - text below image */
.sos-projekt-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.5rem 2rem 2rem 0;
    background: transparent; /* Transparent - inherit page background */
}

/* Project name - small, horizontal */
.sos-projekt-name {
    font-size: 0.95rem !important; /* Small text */
    font-weight: 400 !important; /* Light weight */
    color: var(--sos-text) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0;
}

.sos-projekt-name a {
    color: inherit !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sos-projekt-name a:hover {
    color: var(--sos-coral) !important;
}

/* Project meta - smaller, subtle */
.sos-projekt-meta {
    display: block;
    color: var(--sos-text-light);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.sos-projekt-meta span {
    display: inline;
}

.sos-projekt-meta span::after {
    content: ' ';
}

.sos-projekt-meta span:last-child::after {
    content: '';
}

/* Project link - minimal outlined button */
.sos-projekt-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem; /* Smaller */
    font-weight: 400; /* Lighter */
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--sos-text) !important;
    text-decoration: none;
    border: 1px solid rgba(26, 26, 26, 0.3); /* Lighter border */
    padding: 0.5rem 1.5rem; /* Smaller padding */
    border-radius: 2px; /* Subtle rounding */
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    align-self: flex-start;
}

.sos-projekt-link:hover {
    background-color: var(--sos-text);
    color: var(--sos-white) !important;
    border-color: var(--sos-text);
}

/* ==========================================================================
   7. CTA / KONTAKT SECTION - Coral Background
   ========================================================================== */

/* CTA Section - centered layout */
.sos-cta-section,
.sos-kontakt-section {
    background-color: #922f21 !important;
    color: var(--sos-white) !important;
    padding: 4rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Kontakt page - full viewport height */
body.page-id-101 .sos-kontakt-section,
body.studioos-kontakt .sos-kontakt-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sos-cta-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    text-align: left;
}

.sos-cta-text h2,
.sos-cta-section h2,
.sos-kontakt-section h2 {
    color: var(--sos-white) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    margin-bottom: var(--sos-spacing-md) !important;
    line-height: 1.25 !important;
}

.sos-cta-text p,
.sos-cta-section p,
.sos-kontakt-section p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
}

/* Center single-column CTA */
.sos-cta-section > *:not(.sos-cta-inner),
.sos-kontakt-section > *:not(.sos-cta-inner) {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   8. CONTACT FORM 7 STYLING
   ========================================================================== */

/* === FORM GRID LAYOUT === */
.sos-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    row-gap: 1.8rem;
}

.sos-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sos-form-field-full {
    grid-column: 1 / -1;
}

/* Remove CF7 default <p> margins and <br> inside our grid */
.sos-form-grid p {
    margin: 0 !important;
    padding: 0 !important;
}

.sos-form-grid p br {
    display: none;
}

.sos-form-grid .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0.4rem;
}

/* Remove fieldset border from hidden fields */
.sos-form-grid + .wpcf7-response-output,
.wpcf7-form .hidden-fields-container {
    border: none;
}

/* === LABELS on coral background === */
.sos-coral-form label,
.sos-cta-section label,
.sos-kontakt-section label {
    display: block;
    color: var(--sos-white) !important;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 1.2;
}

/* === INPUT FIELDS on coral background === */
.sos-coral-form input[type="text"],
.sos-coral-form input[type="email"],
.sos-coral-form input[type="tel"],
.sos-coral-form textarea,
.sos-cta-section input[type="text"],
.sos-cta-section input[type="email"],
.sos-cta-section input[type="tel"],
.sos-cta-section textarea,
.sos-kontakt-section input[type="text"],
.sos-kontakt-section input[type="email"],
.sos-kontakt-section input[type="tel"],
.sos-kontakt-section textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.4rem 1.2rem !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--sos-white) !important;
    font-family: var(--sos-font-primary) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0 !important;
}

/* === SELECT FIELDS - Simple approach with native appearance === */
.sos-coral-form select,
.sos-coral-form .wpcf7-select,
.sos-cta-section select,
.sos-cta-section .wpcf7-select,
.sos-kontakt-section select,
.sos-kontakt-section .wpcf7-select {
    width: 100% !important;
    box-sizing: border-box !important;
    /* padding: 1.4rem 1.2rem !important; */ /* Removed - using default browser padding */
    /* padding-right: 2.5rem !important; */ /* Removed - using default browser padding */
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--sos-white) !important;
    font-family: var(--sos-font-primary) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    margin: 0 !important;

    /* Use native browser dropdown rendering */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;

    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Select dropdown options - black text on white background */
.sos-coral-form select option,
.sos-coral-form .wpcf7-select option,
.sos-cta-section select option,
.sos-cta-section .wpcf7-select option,
.sos-kontakt-section select option,
.sos-kontakt-section .wpcf7-select option {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #000000 !important; /* Pure black text for maximum visibility */
    padding: 0.5rem 1rem !important;
}

/* CRITICAL: Force black text in select dropdown for ALL browsers */
select option,
select.wpcf7-select option {
    color: #000000 !important;
    background: white !important;
}

/* Specific override for coral background forms */
.sos-coral-form select:focus option,
.sos-cta-section select:focus option,
.sos-kontakt-section select:focus option {
    color: #000000 !important;
    background-color: #FFFFFF !important;
}

/* Placeholder text */
.sos-coral-form input::placeholder,
.sos-coral-form textarea::placeholder,
.sos-cta-section input::placeholder,
.sos-cta-section textarea::placeholder,
.sos-kontakt-section input::placeholder,
.sos-kontakt-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
}

/* Focus state */
.sos-coral-form input:focus,
.sos-coral-form select:focus,
.sos-coral-form textarea:focus,
.sos-cta-section input:focus,
.sos-cta-section select:focus,
.sos-cta-section textarea:focus,
.sos-kontakt-section input:focus,
.sos-kontakt-section select:focus,
.sos-kontakt-section textarea:focus {
    outline: none !important;
    border-color: var(--sos-white) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Select dropdown focus state - same as other inputs */
.sos-coral-form select:focus,
.sos-cta-section select:focus,
.sos-kontakt-section select:focus {
    outline: none !important;
    border-color: var(--sos-white) !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* === TEXTAREA === */
.sos-coral-form textarea,
.sos-cta-section textarea,
.sos-kontakt-section textarea {
    min-height: 140px;
    resize: vertical;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* === SUBMIT BUTTON === (Updated 2026-02-07 - CF7 Migration) */
/* CRITICAL: Override ALL CF7 default styles - white button with coral text */
.sos-coral-form input[type="submit"],
.sos-coral-form .wpcf7-submit,
.sos-coral-form .wpcf7-form input[type="submit"],
.sos-coral-form .wpcf7-form .wpcf7-submit,
.sos-cta-section input[type="submit"],
.sos-cta-section .wpcf7-submit,
.sos-cta-section .wpcf7-form input[type="submit"],
.sos-cta-section .wpcf7-form .wpcf7-submit,
.sos-kontakt-section input[type="submit"],
.sos-kontakt-section .wpcf7-submit,
.sos-kontakt-section .wpcf7-form input[type="submit"],
.sos-kontakt-section .wpcf7-form .wpcf7-submit {
    /* Display & Layout */
    display: inline-block !important;
    width: auto !important;

    /* Colors - WHITE BUTTON with CORAL TEXT */
    background-color: #FFFFFF !important;
    background-image: none !important; /* Kill CF7 gradients */
    background: #FFFFFF !important;
    color: #922f21 !important;
    border: 2px solid #FFFFFF !important;
    border-color: #FFFFFF !important;

    /* Typography */
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-shadow: none !important;

    /* Spacing */
    padding: 1.1rem 3rem !important;
    margin: 0 !important;

    /* Visual Effects */
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;

    /* Interaction */
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) !important;

    /* Remove any CF7 weird stuff */
    outline: none !important;
    text-decoration: none !important;
}

/* Hover state - BLACK button with WHITE text */
.sos-coral-form input[type="submit"]:hover,
.sos-coral-form .wpcf7-submit:hover,
.sos-coral-form .wpcf7-form input[type="submit"]:hover,
.sos-coral-form .wpcf7-form .wpcf7-submit:hover,
.sos-cta-section input[type="submit"]:hover,
.sos-cta-section .wpcf7-submit:hover,
.sos-cta-section .wpcf7-form input[type="submit"]:hover,
.sos-cta-section .wpcf7-form .wpcf7-submit:hover,
.sos-kontakt-section input[type="submit"]:hover,
.sos-kontakt-section .wpcf7-submit:hover,
.sos-kontakt-section .wpcf7-form input[type="submit"]:hover,
.sos-kontakt-section .wpcf7-form .wpcf7-submit:hover {
    background-color: #1A1A1A !important;
    background-image: none !important;
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #1A1A1A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Focus state - same as hover */
.sos-coral-form input[type="submit"]:focus,
.sos-coral-form .wpcf7-submit:focus,
.sos-cta-section input[type="submit"]:focus,
.sos-cta-section .wpcf7-submit:focus,
.sos-kontakt-section input[type="submit"]:focus,
.sos-kontakt-section .wpcf7-submit:focus {
    background-color: #1A1A1A !important;
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #1A1A1A !important;
    outline: none !important;
}

/* Disabled state - sending form */
.sos-coral-form input[type="submit"]:disabled,
.sos-coral-form .wpcf7-submit:disabled,
.sos-coral-form .sos-btn-sending,
.sos-cta-section input[type="submit"]:disabled,
.sos-cta-section .wpcf7-submit:disabled,
.sos-cta-section .sos-btn-sending,
.sos-kontakt-section input[type="submit"]:disabled,
.sos-kontakt-section .wpcf7-submit:disabled,
.sos-kontakt-section .sos-btn-sending {
    background-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: rgba(194, 47, 33, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Spinner positioning (CF7 default spinner) */
.sos-coral-form .wpcf7-spinner,
.sos-cta-section .wpcf7-spinner,
.sos-kontakt-section .wpcf7-spinner {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ABSOLUTE BACKUP: Custom class for white button */
.sos-white-button,
.sos-white-button:not(:hover):not(:focus) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    background: #FFFFFF !important;
    color: #922f21 !important;
    border: 2px solid #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* NUCLEAR OPTION: Override ANY blue button on coral background */
.sos-coral-form input.wpcf7-form-control.wpcf7-submit,
.sos-cta-section input.wpcf7-form-control.wpcf7-submit,
.sos-kontakt-section input.wpcf7-form-control.wpcf7-submit,
div.sos-coral-form input[type="submit"],
div.sos-cta-section input[type="submit"],
div.sos-kontakt-section input[type="submit"] {
    background-color: #FFFFFF !important;
    background-image: none !important;
    background: #FFFFFF !important;
    color: #922f21 !important;
    border: 2px solid #FFFFFF !important;
    border-style: solid !important;
}

/* Kill all possible CF7 blue button styles */
input[type="submit"][class*="wpcf7"],
button[class*="wpcf7"],
.wpcf7 input[type="submit"] {
    background: #FFFFFF !important;
    color: #922f21 !important;
}

/* Specific for coral backgrounds only */
[class*="coral"] input[type="submit"],
[class*="cta"] input[type="submit"],
[class*="kontakt"] input[type="submit"] {
    background-color: white !important;
    background: white !important;
    color: #922f21 !important;
    border-color: white !important;
}

/* === CF7 WPCF7 WRAPPER RESETS === */
.sos-coral-form .wpcf7,
.sos-cta-section .wpcf7,
.sos-kontakt-section .wpcf7 {
    width: 100%;
}

.sos-coral-form .wpcf7-form-control-wrap,
.sos-cta-section .wpcf7-form-control-wrap,
.sos-kontakt-section .wpcf7-form-control-wrap {
    display: block;
}

/* Spinner */
.sos-coral-form .wpcf7-spinner,
.sos-cta-section .wpcf7-spinner,
.sos-kontakt-section .wpcf7-spinner {
    display: none;
}

/* Validation messages */
.sos-coral-form .wpcf7-not-valid-tip,
.sos-cta-section .wpcf7-not-valid-tip,
.sos-kontakt-section .wpcf7-not-valid-tip {
    color: #FFD700 !important;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.3rem;
}

.sos-coral-form .wpcf7-response-output,
.sos-cta-section .wpcf7-response-output,
.sos-kontakt-section .wpcf7-response-output {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: var(--sos-white) !important;
    grid-column: 1 / -1;
    margin: 1rem 0 0 0 !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    display: block !important;
}

/* Success message - green background with white text */
.sos-coral-form .wpcf7-mail-sent-ok,
.sos-cta-section .wpcf7-mail-sent-ok,
.sos-kontakt-section .wpcf7-mail-sent-ok {
    background: rgba(34, 139, 34, 0.3) !important;
    border: 2px solid rgba(34, 139, 34, 0.8) !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* Error message - WHITE background with DARK text for visibility */
.sos-coral-form .wpcf7-mail-sent-ng,
.sos-coral-form .wpcf7-validation-failed,
.sos-coral-form .wpcf7-acceptance-missing,
.sos-cta-section .wpcf7-mail-sent-ng,
.sos-cta-section .wpcf7-validation-failed,
.sos-cta-section .wpcf7-acceptance-missing,
.sos-kontakt-section .wpcf7-mail-sent-ng,
.sos-kontakt-section .wpcf7-validation-failed,
.sos-kontakt-section .wpcf7-acceptance-missing {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 1) !important;
    color: #922f21 !important; /* Dark coral text - readable! */
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* Force visibility when CF7 shows message - OVERRIDE aria-hidden */
.wpcf7-response-output {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1px !important; /* Prevent :empty from matching */
}

/* Hide only when truly empty AND no error classes */
.wpcf7-response-output:empty:not(.wpcf7-mail-sent-ng):not(.wpcf7-mail-sent-ok):not(.wpcf7-validation-failed) {
    display: none !important;
}

/* Always show when CF7 adds status classes - NUCLEAR OPTION */
.wpcf7-mail-sent-ok,
.wpcf7-mail-sent-ng,
.wpcf7-validation-failed,
.wpcf7-acceptance-missing,
.wpcf7-spam-blocked {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Extra specificity for error messages on coral background */
.sos-coral-form .wpcf7-mail-sent-ng,
.sos-cta-section .wpcf7-mail-sent-ng,
.sos-kontakt-section .wpcf7-mail-sent-ng {
    display: block !important;
    visibility: visible !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .sos-form-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile-first: Uniform field heights (2026-02-07 CF7 Migration) */
    .sos-coral-form input[type="text"],
    .sos-coral-form input[type="email"],
    .sos-coral-form input[type="tel"],
    .sos-coral-form select,
    .sos-coral-form .wpcf7-select,
    .sos-cta-section input[type="text"],
    .sos-cta-section input[type="email"],
    .sos-cta-section input[type="tel"],
    .sos-cta-section select,
    .sos-cta-section .wpcf7-select,
    .sos-kontakt-section input[type="text"],
    .sos-kontakt-section input[type="email"],
    .sos-kontakt-section input[type="tel"],
    .sos-kontakt-section select,
    .sos-kontakt-section .wpcf7-select {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        min-height: 52px; /* Ensures equal height */
    }

    /* Mobile: Button full-width */
    .sos-coral-form input[type="submit"],
    .sos-cta-section input[type="submit"],
    .sos-kontakt-section input[type="submit"] {
        width: 100% !important;
        padding: 1.3rem 2rem !important;
    }
}

/* Form on white background */
.sos-white-form .wpcf7-form input[type="text"],
.sos-white-form .wpcf7-form input[type="email"],
.sos-white-form .wpcf7-form input[type="tel"],
.sos-white-form .wpcf7-form select,
.sos-white-form .wpcf7-form textarea {
    border: 1.5px solid var(--sos-border) !important;
    border-radius: 4px !important;
    background: var(--sos-white) !important;
    color: var(--sos-text) !important;
    padding: 0.85rem 1rem;
    font-family: var(--sos-font-primary) !important;
    font-size: 0.95rem;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sos-white-form .wpcf7-form input[type="submit"] {
    background-color: var(--sos-text) !important;
    color: var(--sos-white) !important;
    border: none !important;
    padding: 1rem 2.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 4px !important;
}

.sos-white-form .wpcf7-form input[type="submit"]:hover {
    background-color: var(--sos-coral) !important;
}

/* === CUSTOM CONTACT FORM - ERROR STATES === */
.sos-field-error {
    display: none;
    color: #FFD700 !important;
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 0.3rem;
}

.sos-field-error.visible {
    display: block;
}

.sos-form-field input.error,
.sos-form-field select.error,
.sos-form-field textarea.error {
    border-color: #FFD700 !important;
}

/* === FORM RESPONSE MESSAGE === */
.sos-form-response {
    display: none;
    grid-column: 1 / -1;
    padding: 1rem 1.2rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.sos-form-response.visible {
    display: block;
}

.sos-form-response.success {
    background: rgba(255, 255, 255, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: var(--sos-white);
}

.sos-form-response.error {
    background: rgba(255, 215, 0, 0.2);
    border: 1.5px solid #FFD700;
    color: #FFD700;
}

/* === SUBMIT BUTTON LOADING STATE === */
.sos-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sos-submit-btn.loading {
    position: relative;
}

.sos-submit-btn.loading::after {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sosSpinner 0.6s linear infinite;
}

@keyframes sosSpinner {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ==========================================================================
   9. ABOUT / O MNIE PAGE
   ========================================================================== */

.sos-about-section {
    max-width: var(--sos-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sos-about-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--sos-spacing-xl);
    align-items: start;
}

.sos-about-image {
    max-width: 350px;
}

.sos-about-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    object-position: center top;
}

.sos-about-text {
    text-align: justify;
}

.sos-about-text h2 {
    margin-bottom: var(--sos-spacing-md);
    text-align: left;
}

.sos-about-text p {
    margin-bottom: var(--sos-spacing-sm);
    max-width: var(--sos-text-width);
}

/* === APPROACH SECTION (Moje podejście) - Mobile First === */
.sos-approach-section {
    background-color: var(--sos-bg-light);
    padding: 3rem 1.5rem; /* Mobile-first: smaller padding */
}

.sos-approach-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.sos-approach-title {
    color: var(--sos-text) !important;
    font-size: clamp(1.5rem, 4vw, 2rem) !important; /* Responsive font */
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

.sos-approach-intro {
    max-width: 650px;
    margin: 0 0 2rem 0;
    color: var(--sos-text-light);
    line-height: 1.7;
}

.sos-approach-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 2rem;
    text-align: left;
}

.sos-approach-item h4 {
    color: var(--sos-text) !important;
    font-size: 1.1rem !important; /* Mobile-first: smaller font */
    margin-bottom: 0.6rem !important;
    font-weight: 600 !important;
}

.sos-approach-item p {
    color: var(--sos-text-light);
    line-height: 1.6;
    margin: 0;
}

/* Desktop: Enhanced spacing */
@media (min-width: 768px) {
    .sos-approach-section {
        padding: 4rem 2rem;
    }

    .sos-approach-intro {
        margin-bottom: 3rem;
    }

    .sos-approach-grid {
        gap: 2.5rem;
    }

    .sos-approach-item h4 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
}

/* === CTA CENTERED (for O mnie page) === */
.sos-cta-centered .sos-cta-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    max-width: 700px !important;
}

.sos-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-family: var(--sos-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    margin-top: 1.5rem;
}

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

.sos-btn-white:hover {
    background-color: var(--sos-text);
    color: var(--sos-white);
    border-color: var(--sos-text);
    transform: translateY(-2px);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--sos-white) !important;
    border-top: 1px solid var(--sos-border) !important;
}

.site-footer .ast-container {
    max-width: var(--sos-max-width) !important;
    margin: 0 auto;
    padding: 0 2rem !important;
}

.site-footer,
.site-footer p,
.site-footer a,
.ast-small-footer .ast-container {
    color: var(--sos-text-light) !important;
    font-size: 0.85rem;
}

.site-footer a:hover {
    color: var(--sos-coral) !important;
}

/* ==========================================================================
   11. BUTTONS - Global
   ========================================================================== */

.sos-btn,
.wp-block-button__link {
    display: inline-block;
    background-color: var(--sos-text) !important;
    color: var(--sos-white) !important;
    padding: 0.8rem 2rem;
    font-family: var(--sos-font-primary) !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1.5px solid var(--sos-text);
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-decoration: none !important;
}

.sos-btn:hover,
.wp-block-button__link:hover {
    background-color: var(--sos-coral) !important;
    border-color: var(--sos-coral) !important;
    color: var(--sos-white) !important;
}

.sos-btn-outline {
    background-color: transparent !important;
    color: var(--sos-text) !important;
    border: 1.5px solid var(--sos-text);
}

.sos-btn-outline:hover {
    background-color: var(--sos-text) !important;
    color: var(--sos-white) !important;
}

.sos-btn-white {
    background-color: var(--sos-white) !important;
    color: var(--sos-coral) !important;
    border-color: var(--sos-white);
}

.sos-btn-white:hover {
    background-color: var(--sos-text) !important;
    color: var(--sos-white) !important;
    border-color: var(--sos-text);
}

/* ==========================================================================
   12. GUTENBERG BLOCK OVERRIDES
   ========================================================================== */

/* Full-width alignments */
.entry-content > .alignwide {
    max-width: var(--sos-max-width);
    margin-left: auto;
    margin-right: auto;
}

.entry-content > .alignfull {
    max-width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* Group block */
.wp-block-group.sos-section {
    padding: 0 2rem var(--sos-spacing-lg);
}

.wp-block-group.sos-section .wp-block-group__inner-container {
    max-width: var(--sos-max-width);
    margin: 0 auto;
}

/* Columns block */
.wp-block-columns.sos-columns {
    max-width: var(--sos-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    gap: var(--sos-spacing-lg);
}

/* Image block */
.wp-block-image.sos-full-image {
    margin: 0;
}

.wp-block-image.sos-full-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Separator */
.wp-block-separator {
    border-color: var(--sos-border) !important;
    opacity: 1;
}

/* Spacer refinement */
.wp-block-spacer {
    margin: 0 !important;
}

/* Cover block refinement */
.wp-block-cover {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   13. PAGE TEMPLATE - Kontakt (standalone page)
   ========================================================================== */

.page-template-default .sos-kontakt-page {
    margin: 0 calc(-50vw + 50%);
    width: 100vw;
}

/* ==========================================================================
   14. SINGLE PROJEKT (portfolio detail page)
   ========================================================================== */

.single-projekty .entry-header {
    max-width: var(--sos-content-width);
    margin: 0 auto;
    padding: var(--sos-spacing-lg) 2rem var(--sos-spacing-md);
}

.single-projekty .entry-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    margin-bottom: var(--sos-spacing-sm) !important;
}

.single-projekty .entry-content {
    max-width: var(--sos-content-width);
    margin: 0 auto;
    padding: 0 2rem var(--sos-spacing-xl);
}

/* Optimize paragraph width for readability */
.single-projekty .entry-content p,
.single-projekty .entry-content ul,
.single-projekty .entry-content ol {
    max-width: var(--sos-text-width);
    margin-left: auto;
    margin-right: auto;
}

.sos-projekt-detail-meta {
    display: flex;
    gap: var(--sos-spacing-lg);
    padding: var(--sos-spacing-md) 0;
    border-top: 1px solid var(--sos-border);
    border-bottom: 1px solid var(--sos-border);
    margin-bottom: var(--sos-spacing-lg);
    flex-wrap: wrap;
}

.sos-projekt-detail-meta .meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sos-projekt-detail-meta .meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sos-text-light);
    font-weight: 600;
}

.sos-projekt-detail-meta .meta-value {
    font-size: 1rem;
    color: var(--sos-text);
    font-weight: 500;
}

/* Gallery inside project */
.single-projekty .wp-block-gallery {
    margin: var(--sos-spacing-lg) 0;
}

.single-projekty .wp-block-gallery .wp-block-image img {
    border-radius: 0;
}

/* ==========================================================================
   15. ARCHIVE PROJEKTY
   ========================================================================== */

.post-type-archive-projekty .page-title,
.post-type-archive-projekty .ast-archive-title {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 700 !important;
    max-width: var(--sos-max-width);
    margin: 0 auto !important;
    padding: var(--sos-spacing-xl) 2rem var(--sos-spacing-lg) !important;
}

.post-type-archive-projekty .ast-row {
    max-width: var(--sos-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* ==========================================================================
   16. UTILITY CLASSES
   ========================================================================== */

.sos-text-center { text-align: center; }
.sos-text-white { color: var(--sos-white) !important; }
.sos-text-white p { color: rgba(255, 255, 255, 0.9) !important; }
.sos-bg-coral { background-color: var(--sos-coral) !important; }
.sos-bg-white { background-color: var(--sos-white) !important; }
.sos-bg-light { background-color: var(--sos-bg-light) !important; }

.sos-max-width {
    max-width: var(--sos-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.sos-content-width {
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ==========================================================================
   17. RESPONSIVE - Tablet
   ========================================================================== */

@media (max-width: 1024px) {
    .sos-cta-inner {
        grid-template-columns: 1fr;
        gap: var(--sos-spacing-lg);
    }

    .sos-about-grid {
        grid-template-columns: 1fr;
        gap: var(--sos-spacing-lg);
    }

    .sos-about-image {
        max-width: 100%;
        width: 100%;
    }

    .sos-hero-image {
        height: 65vh;
        min-height: 400px;
    }
}

/* ==========================================================================
   18. RESPONSIVE - Mobile
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --sos-spacing-xl: 3rem;
        --sos-spacing-xxl: 4rem;
    }

    .sos-hero-image {
        height: 55vh;
        min-height: 350px;
    }

    .sos-hero-content {
        padding: var(--sos-spacing-lg) 1.5rem;
    }

    /* Projekty section - mobile optimized */
    .sos-projekty-section {
        padding: var(--sos-spacing-md) 0 var(--sos-spacing-lg);
    }

    .sos-projekty-title {
        padding: 0 1.5rem !important;
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }

    /* Projekty description paragraph - better readability */
    .sos-projekty-section > p {
        padding: 0 1.5rem !important;
        margin: 0 0 2rem 0 !important;
        max-width: 100% !important;
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
        color: #666 !important;
    }

    .sos-projekty-scroll {
        padding: 0 1.5rem var(--sos-spacing-md) 1.5rem;
    }

    .sos-projekt-card {
        width: clamp(280px, 80vw, 400px); /* Smaller on mobile */
    }

    .sos-projekt-info {
        flex-direction: column;
    }

    .sos-projekt-meta {
        flex-direction: column;
        gap: 0.3rem;
    }

    .sos-cta-section,
    .sos-kontakt-section {
        padding: var(--sos-spacing-xl) 1.5rem;
    }

    .sos-cta-section .wpcf7-form,
    .sos-kontakt-section .wpcf7-form,
    .sos-coral-form .wpcf7-form,
    .sos-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Header mobile */
    .main-header-bar .ast-container {
        padding: 0 1rem !important;
    }

    /* Footer mobile */
    .site-footer .ast-container {
        padding: 0 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .sos-projekty-title {
        font-size: 2rem !important;
        padding: 0 1rem !important;
    }

    /* Better paragraph readability on small screens */
    .sos-projekty-section > p {
        padding: 0 1rem !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .sos-cta-section h2,
    .sos-kontakt-section h2 {
        font-size: 1.8rem !important;
    }
}

/* ==========================================================================
   19. PRINT STYLES
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .sos-cta-section {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}

/* ==========================================================================
   20. ANIMATIONS
   ========================================================================== */

@keyframes sos-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sos-animate-in {
    animation: sos-fadeInUp 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background-color: var(--sos-coral);
    color: var(--sos-white);
}

::-moz-selection {
    background-color: var(--sos-coral);
    color: var(--sos-white);
}

/* Center CTA buttons */
.sos-cta-section .wp-block-button,
.sos-kontakt-section .wp-block-button {
    text-align: center;
}

.sos-cta-section .wp-block-buttons,
.sos-kontakt-section .wp-block-buttons {
    justify-content: center;
}

/* ==========================================================================
   CONTACT PAGE ONLY - Working Select Dropdowns
   ========================================================================== */

/* Override select styles ONLY on /kontakt page (ID: 101) */
.page-id-101 .sos-coral-form select,
.page-id-101 .sos-coral-form .wpcf7-select {
    /* Match input field styling */
    width: 100% !important;
    box-sizing: border-box !important;
    /* padding: 1.4rem 1.2rem !important; */ /* Removed - using default browser padding */
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;

    /* Transparent background like other inputs */
    background: transparent !important;

    /* White text to match other inputs */
    color: var(--sos-white) !important;

    /* Typography */
    font-family: var(--sos-font-primary) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;

    /* Behavior */
    cursor: pointer !important;
    margin: 0 !important;

    /* CRITICAL: Use native browser dropdown (WORKING!) */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;

    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Dropdown options - readable black text on white */
.page-id-101 .sos-coral-form select option,
.page-id-101 .sos-coral-form .wpcf7-select option {
    color: #1A1A1A !important;
    background-color: white !important;
    padding: 0.5rem !important;
}

/* Focus state for selects on Contact page */
.page-id-101 .sos-coral-form select:focus,
.page-id-101 .sos-coral-form .wpcf7-select:focus {
    outline: none !important;
    border-color: var(--sos-white) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove underline from links in posts and comments */
.ast-single-post .entry-content a,
.ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-decoration: none !important;
}

/* ==========================================================================
   21. SINGLE PROJECT PAGE - NEW LAYOUT (2-column + Gallery)
   ========================================================================== */

/* Floor Plan + Description Layout */
.sos-projekt-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 3rem 0;
    max-width: 1200px;
}

.sos-projekt-plan {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.sos-plan-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sos-plan-image:hover {
    transform: scale(1.02);
}

.sos-plan-caption {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
    font-style: italic;
}

.sos-projekt-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}

.sos-projekt-description p {
    margin-bottom: 1.5rem;
}

.sos-projekt-description strong {
    color: var(--sos-black);
    font-weight: 600;
}

/* Project Gallery - Horizontal Scroll (like home page) */
.sos-projekt-gallery {
    margin: 4rem 0;
    max-width: 100%;
}

.sos-gallery-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--sos-black);
}

.sos-gallery-carousel {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 3rem 2rem 3rem;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.sos-gallery-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.sos-gallery-item {
    flex: 0 0 auto;
    width: clamp(350px, 40vw, 550px);
    scroll-snap-align: start;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sos-gallery-item:hover {
    transform: translateY(-4px);
}

.sos-gallery-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sos-gallery-item:hover .sos-gallery-image {
    transform: scale(1.02);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sos-projekt-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sos-projekt-plan {
        position: static;
    }

    .sos-gallery-title {
        font-size: 1.5rem;
    }

    .sos-gallery-carousel {
        padding: 0 1.5rem 2rem 1.5rem;
        gap: 1.5rem;
    }

    .sos-gallery-item {
        width: clamp(280px, 80vw, 400px);
    }
}

/* ==========================================================================
   22. LIGHTBOX - Image Overlay
   ========================================================================== */

.sos-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 300ms ease;
}

.sos-lightbox.active {
    display: flex;
    opacity: 1;
}

.sos-lightbox-image {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.sos-lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 250ms ease;
    line-height: 1;
    user-select: none;
}

.sos-lightbox-close:hover {
    transform: scale(1.2);
}

.sos-lightbox-counter {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

/* Mobile lightbox adjustments */
@media (max-width: 768px) {
    .sos-lightbox-image {
        max-width: 95%;
        max-height: 80vh;
    }

    .sos-lightbox-close {
        top: 1rem;
        right: 1rem;
        font-size: 2.5rem;
        width: 40px;
        height: 40px;
    }

    .sos-lightbox-counter {
        bottom: 1rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   HIDE SCROLL-TO-TOP BUTTON
   ========================================================================== */
#ast-scroll-top {
    display: none !important;
}