/*
Theme Name: 4Page
Theme URI: https://example.com/
Author: Autogenerated by ChatGPT
Author URI: https://example.com/
Description: Motyw WordPress oparty na projekcie "strona www" dla Karboviak Interiors.
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: fourpage
*/

        :root {
            --brand-cream: #f6f1ee;
            --brand-cream-dark: #e6ddd7;
            --brand-graphite: #1f1f1f;
            --brand-brown: #7d6b62;
            --brand-sage: #a4aa96;
            --brand-light: #faf8f6;
            --brand-beige: #d6c6b8;
        }

        * {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: var(--brand-graphite);
            background-color: #ffffff;
        }

        .navbar {
            background-color: var(--brand-cream);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .navbar-brand .custom-logo-link img {
            max-height: 60px;
            width: auto;
        }

        .navbar-brand-text {
            font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--brand-graphite);
            text-decoration: none;
        }

        .navbar-brand-text:hover,
        .navbar-brand-text:focus {
            color: var(--brand-brown);
            text-decoration: none;
        }

        .navbar .nav-item {
            position: relative;
        }

        .navbar .nav-link {
            position: relative;
            color: #000;
            font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 500;
            letter-spacing: 0.03em;
            transition: color 0.3s ease;
            padding-bottom: 0.35rem;
        }

        .navbar .nav-link::after {
            content: '';
            position: absolute;
            left: 0.35rem;
            right: 0.35rem;
            bottom: -0.15rem;
            height: 3px;
            background-color: currentColor;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.3s ease;
            border-radius: 999px;
        }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            color: var(--brand-beige);
        }

        .navbar .nav-link:hover::after,
        .navbar .nav-link:focus::after {
            transform: scaleX(1);
        }

        .navbar .nav-link.active,
        .navbar .current-menu-item > .nav-link {
            color: var(--brand-beige);
        }

        .navbar .nav-link.active::after,
        .navbar .current-menu-item > .nav-link::after {
            transform: scaleX(1);
        }

        main {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        .main-home {
            padding-top: 0;
        }

        footer {
            background-color: var(--brand-cream);
        }

        .footer-menu a {
            color: var(--brand-graphite);
            font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-menu a:hover,
        .footer-menu a:focus {
            color: var(--brand-brown);
            text-decoration: none;
        }

        .btn-brand {
            background-color: var(--brand-brown);
            border-color: var(--brand-brown);
            color: #fff;
            letter-spacing: 0.05em;
        }

        .btn-brand:hover,
        .btn-brand:focus {
            background-color: #6c5b54;
            border-color: #6c5b54;
            color: #fff;
        }

        .btn-outline-brand {
            border-color: var(--brand-brown);
            color: var(--brand-brown);
        }

        .btn-outline-brand:hover,
        .btn-outline-brand:focus {
            background-color: var(--brand-brown);
            color: #fff;
        }

        .hero-slider {
            position: relative;
        }

        .hero-slider .carousel-item {
            min-height: 72vh;
            max-height: 880px;
        }

        .hero-slider .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-placeholder {
            width: 100%;
            min-height: 72vh;
            max-height: 880px;
            background: linear-gradient(135deg, rgba(125, 107, 98, 0.55), rgba(246, 241, 238, 0.85));
        }

        .hero-slider .carousel-caption-wrapper {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: linear-gradient(180deg, rgba(14, 14, 14, 0.48) 0%, rgba(14, 14, 14, 0.3) 30%, rgba(14, 14, 14, 0.1) 70%, rgba(14, 14, 14, 0.6) 100%);
        }

        .hero-slider .hero-copy {
            max-width: 720px;
            text-align: center;
            color: #fff;
        }

        .hero-slider .hero-copy h1 {
            font-size: clamp(2rem, 4vw, 3.4rem);
            font-weight: 600;
            letter-spacing: 0.04em;
        }

        .hero-slider .hero-copy p {
            font-size: clamp(1rem, 2.2vw, 1.25rem);
            margin-bottom: 1.75rem;
        }

        .section-padding {
            padding: 5rem 0;
        }

        .section-title {
            font-size: clamp(2rem, 3.2vw, 2.75rem);
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .brand-highlight {
            background-color: var(--brand-light);
        }

        .mini-points .icon-circle {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: var(--brand-cream);
            color: var(--brand-brown);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .portfolio-filter .btn {
            border-radius: 999px;
            padding-inline: 1.25rem;
        }

        .portfolio-grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }

        .portfolio-card {
            position: relative;
            overflow: hidden;
            border-radius: 18px;
        }

        .portfolio-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .portfolio-card .portfolio-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(10, 9, 9, 0.1) 0%, rgba(10, 9, 9, 0.7) 100%);
            color: #fff;
            opacity: 0;
            display: flex;
            align-items: flex-end;
            padding: 1.5rem;
            transition: opacity 0.3s ease;
        }

        .portfolio-card:hover img,
        .portfolio-card:focus-within img {
            transform: scale(1.05);
        }

        .portfolio-card:hover .portfolio-overlay,
        .portfolio-card:focus-within .portfolio-overlay {
            opacity: 1;
        }

        .offer-card {
            border: 1px solid #e7dfdb;
            border-radius: 18px;
            padding: 2rem;
            background-color: #fff;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .offer-card.recommended {
            border: 2px solid var(--brand-brown);
            box-shadow: 0 10px 30px rgba(125, 107, 98, 0.12);
            transform: translateY(-8px);
        }

        .offer-card:hover {
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
        }

        .offer-card ul {
            padding-left: 1.2rem;
        }

        .process-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
        }

        .process-card {
            background-color: #ffffff;
            border-radius: 18px;
            border: 1px solid #ede3dd;
            padding: 2rem 1.75rem;
            height: 100%;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .process-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.08);
        }

        .process-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: var(--brand-cream);
            color: #000;
            font-weight: 600;
            font-size: 1.1rem;
            letter-spacing: 0.04em;
            margin-bottom: 1.25rem;
            box-shadow: inset 0 0 0 1px var(--brand-beige);
        }

        .process-step {
            background-color: #fff;
            border-radius: 16px;
            border: 1px solid #eee4df;
            padding: 1.75rem;
            height: 100%;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
        }

        .process-step .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: var(--brand-cream);
            color: var(--brand-brown);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .about-photo {
            border-radius: 24px;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
        }

        .testimonial-card {
            background-color: #fff;
            border-radius: 18px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            background-color: var(--brand-cream);
            color: var(--brand-graphite);
        }

        .contact-bar {
            background-color: var(--brand-graphite);
            color: #fff;
            border-radius: 20px;
            padding: 2.5rem;
        }

        .seo-block {
            background-color: var(--brand-light);
            border-radius: 18px;
            padding: 2rem;
        }

        .seo-block .collapse:not(.show) {
            max-height: 160px;
            overflow: hidden;
            position: relative;
        }

        .seo-block .collapse:not(.show)::after {
            content: '';
            position: absolute;
            inset-inline: 0;
            bottom: 0;
            height: 3rem;
            background: linear-gradient(180deg, rgba(246, 241, 238, 0) 0%, var(--brand-light) 100%);
        }

        .portfolio-masonry {
            column-count: 1;
            column-gap: 1.5rem;
        }

        .portfolio-masonry .masonry-item {
            break-inside: avoid;
            margin-bottom: 1.5rem;
        }

        .portfolio-detail-hero {
            border-radius: 24px;
            overflow: hidden;
        }

        .materials-list {
            columns: 2;
            column-gap: 2rem;
        }

        .project-gallery-grid .project-gallery-item {
            position: relative;
            display: block;
            text-decoration: none;
        }

        .project-gallery-figure {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
            background-color: var(--brand-light);
            aspect-ratio: 4 / 3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        .project-gallery-figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .project-gallery-item:hover .project-gallery-figure img,
        .project-gallery-item:focus .project-gallery-figure img {
            transform: scale(1.03);
        }

        .project-gallery-modal .modal-content {
            background-color: transparent;
            box-shadow: none;
        }

        .project-gallery-modal .modal-body {
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project-gallery-modal img[data-gallery-modal-image] {
            max-height: 80vh;
            width: 100%;
            object-fit: contain;
        }

        .gallery-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: rgba(0, 0, 0, 0.45);
            color: #ffffff;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .gallery-control:hover,
        .gallery-control:focus {
            background: rgba(0, 0, 0, 0.65);
            color: #ffffff;
        }

        .gallery-control i {
            font-size: 1.5rem;
        }

        .gallery-control-prev {
            left: 1rem;
        }

        .gallery-control-next {
            right: 1rem;
        }

        @media (min-width: 768px) {
            .portfolio-masonry {
                column-count: 2;
            }
        }

        @media (min-width: 1200px) {
            .portfolio-masonry {
                column-count: 3;
            }
        }

        @media (max-width: 991.98px) {
            .hero-slider .hero-copy {
                text-align: center;
            }

            .hero-slider .carousel-item {
                min-height: 65vh;
            }

            .offer-card.recommended {
                transform: none;
            }
        }

        @media (max-width: 575.98px) {
            .navbar-brand .custom-logo-link img {
                max-height: 48px;
            }

            .navbar-brand-text {
                font-size: 0.9rem;
                letter-spacing: 0.1em;
            }

            .hero-slider .hero-copy h1 {
                letter-spacing: 0.02em;
            }
        }