/* Premium Theme Styles */

:root {
    --color-primary: #6B8E23;
    --color-secondary: #F4F1E9;
    --color-accent: #D98F71;
    --color-dark: #192a56;
    --color-light: #F4F1E9;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Oxygen', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--color-dark);
    background-color: var(--color-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
}

.hero-content-wrapper h1 {
    color: white;
}

.text-brand-primary { color: var(--color-primary); }
.text-brand-secondary { color: var(--color-secondary); }
.text-brand-dark { color: var(--color-dark); }
.bg-brand-primary { background-color: var(--color-primary); }
.bg-brand-secondary { background-color: var(--color-secondary); }
.bg-brand-dark { background-color: var(--color-dark); }

/* Ghost Button Style */
.btn-ghost {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

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

/* Usługi page enhancements */
.prose h2, .prose h3, .prose h4 { color: var(--color-primary); }
.section-title { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-primary); margin-bottom: 0.5rem; }
.section-subtitle { color: var(--color-dark); font-size: 1.125rem; }
.raw-text-box { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size: 0.95rem; line-height: 1.5; color: #333; }
.raw-text-box::-webkit-scrollbar { height: 8px; width: 8px; }
.raw-text-box::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }
.raw-text-box pre { white-space: pre-wrap; }

/* Subtle entrance animations used across the site */
.animate-fade-in { opacity: 0; transform: translateY(10px); animation: fadeInUp 0.8s forwards; }
.animate-fade-in.delay-200 { animation-delay: 0.2s; }
.animate-fade-in.delay-300 { animation-delay: 0.3s; }
.animate-fade-in.delay-400 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.hero-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.1;
}

.display-1 { font-family: var(--font-heading); font-weight: 700; color: var(--color-dark); }
.lead { color: rgba(74,74,74,0.9); }

    /* Redesigned Vertical Legal Cards */
    .legal-grid { margin-top: 1rem; }
    .legal-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        height: 100%; /* Ensure cards in a row are same height */
    }

    .legal-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(25, 42, 86, 0.1);
    }

    .legal-link {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 1.75rem;
        color: inherit;
    }

    .legal-title {
        font-family: var(--font-heading);
        color: var(--color-dark);
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .legal-meta {
        color: var(--color-dark);
        opacity: 0.7;
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .legal-text-content {
        flex-grow: 1;
    }

    .legal-cta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 1.5rem;
        color: var(--color-primary);
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .legal-card:hover .legal-cta {
        color: var(--color-accent);
    }

    .legal-cta span {
        margin-right: 0.5rem;
    }

    .legal-cta svg {
        transition: transform 0.3s ease;
    }

    .legal-card:hover .legal-cta svg {
        transform: translateX(4px);
    }

    /* Remove underlines globally but keep focus styles for accessibility */
    a, a:link, a:visited {
        text-decoration: none !important;
    }

    /* Override utility underline classes if present */
    .underline { text-decoration: none !important; }

    /* Keep visible focus for keyboard users */
    a:focus-visible {
        outline: 3px solid rgba(138,154,137,0.14);
        outline-offset: 3px;
    }


    /* Responsive typography scaling for large / UHD displays */
    html { font-size: 16px; }

    @media (min-width: 1440px) {
        html { font-size: 17.5px; }
        .display-1 { font-size: 4.5rem; }
    }

    @media (min-width: 1920px) {
        html { font-size: 18.5px; }
        .display-1 { font-size: 5.5rem; }
        h1 { font-size: 3.25rem; }
        h2 { font-size: 2.25rem; }
    }

    @media (min-width: 2560px) {
        html { font-size: 20px; }
        .display-1 { font-size: 7rem; }
        h1 { font-size: 4rem; }
        h2 { font-size: 2.75rem; }
    }

    /* Minor scaling for very small devices */
    @media (max-width: 360px) {
        html { font-size: 15px; }
    }


@media (min-width: 1800px) {
    .display-1 { font-size: 6.5rem; line-height: 0.95; }
}

    /* Poradnictwo page specific styles */
    .poradnictwo-hero .hero-inner { position: relative; overflow: visible; }
    .poradnictwo-hero .hero-decor { filter: blur(18px); }
    .poradnictwo-hero .services-grid { gap: 1rem; }
    .service-card { border: 1px solid rgba(25,42,86,0.04); }
    .service-card h3 { font-family: var(--font-heading); }
    .service-card p { color: rgba(25,42,86,0.8); }

    .poradnictwo-content .prose { background: transparent; }
    .poradnictwo-content .lead { font-size: 1.05rem; }

    .cta-row .btn-ghost { padding: 0.65rem 1.1rem; }
    .underline-on-hover { text-decoration: none; transition: color 0.2s ease; }
    .underline-on-hover:hover { text-decoration: underline; color: var(--color-primary); }

    @media (min-width: 1024px) {
        .poradnictwo-hero .hero-inner { padding: 3rem; }
    }

    @media (max-width: 640px) {
        .hero-decor { display: none; }
    }

    /* Navigation: keep primary desktop menu on a single row */
    #primary-navigation-desktop nav { overflow: hidden; }
    .container-xl .menu { display: flex; }

    /* Target the ul/li structure rendered by wp_nav_menu to enforce no-wrap */
    #primary-menu-desktop { display: flex; }
    #primary-menu-desktop > li { white-space: nowrap; flex-shrink: 0; }
    #primary-menu-desktop li a { white-space: nowrap; display: inline-block; padding: 0.15rem 0.5rem; }

    /* Use the specific menu class rendered by wp_nav_menu - ensure no-wrap and graceful overflow */
    #primary-menu-desktop { display: flex; gap: 1rem; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #primary-menu-desktop::-webkit-scrollbar { height: 6px; }
    #primary-menu-desktop::-webkit-scrollbar-thumb { background: rgba(25,42,86,0.08); border-radius: 999px; }

    /* Slightly reduce horizontal gaps on medium screens to accommodate long labels */
    @media (min-width: 768px) and (max-width: 1200px) {
        #primary-menu-desktop { gap: 0.75rem; }
        #primary-menu-desktop a { padding: 0.25rem 0.5rem; }
    }

    /* Fallback: if items still wrap, visually indicate overflow */
    .menu-overflow-fade { position: relative; }
    .menu-overflow-fade::after { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 48px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)); }

    /* Elegant nav link animations: gradient underline + lift */
    /* Target UL/LI structure that wp_nav_menu outputs as well as link elements */
    #primary-menu-desktop, #primary-menu-desktop ul { display: flex; gap: 1rem; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    #primary-menu-desktop a, #primary-menu-desktop ul li a {
        position: relative;
        display: inline-block;
        transition: transform 220ms cubic-bezier(.2,.9,.2,1), color 180ms ease;
        will-change: transform;
    }

    #primary-menu-desktop a::after, #primary-menu-desktop ul li a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 3px;
        border-radius: 999px;
        transform-origin: left center;
        transform: scaleX(0);
        transition: transform 260ms cubic-bezier(.2,.9,.2,1);
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        opacity: 0.95;
    }

    #primary-menu-desktop a:hover,
    #primary-menu-desktop a:focus,
    #primary-menu-desktop ul li a:hover,
    #primary-menu-desktop ul li a:focus {
        transform: translateY(-3px);
        color: var(--color-primary);
    }

    #primary-menu-desktop a:hover::after,
    #primary-menu-desktop a:focus::after,
    #primary-menu-desktop ul li a:hover::after,
    #primary-menu-desktop ul li a:focus::after {
        transform: scaleX(1);
    }

    /* Focus-visible must remain obvious for keyboard users */
    #primary-menu-desktop a:focus-visible, #primary-menu-desktop ul li a:focus-visible {
        outline: 3px solid rgba(138,154,137,0.14);
        outline-offset: 3px;
    }

    /* Small screens: reduce lift and underline offset */
    @media (max-width: 767px) {
        #primary-menu-desktop a::after, #primary-menu-desktop ul li a::after { bottom: -4px; height: 2px; }
        #primary-menu-desktop a:hover, #primary-menu-desktop a:focus, #primary-menu-desktop ul li a:hover, #primary-menu-desktop ul li a:focus { transform: none; }
    }

/* New Side Navigation Styles */
.bg-secondary {
    background-color: var(--color-secondary);
}

.pl-64 {
    padding-left: 16rem; /* 256px */
}

header .menu a {
    position: relative;
    padding: 0.45rem 0.9rem;
    color: var(--color-dark);
    font-weight: 500;
    font-size: 0.95rem; /* slightly smaller */
    line-height: 1.1;
    text-decoration: none;
    display: block; /* ensure full-clickable area */
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

header .menu a .text-container {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease;
}

header .menu a .original-text,
header .menu a .hover-text {
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

header .menu a .hover-text {
    color: var(--color-primary);
    position: absolute;
    top: 100%;
    left: 0;
}

/* Set explicit initial positions to prevent double-text flash before JS runs */
header .menu a .original-text { transform: translateY(0%); opacity: 1; }
header .menu a .hover-text { transform: translateY(0%); opacity: 0; }

/* Modern CSS-first animation: slide original up and reveal hover text; underline scales from 0->1 */
header .menu a {
    --nav-animation-duration: 500ms;
    --nav-ease: cubic-bezier(.2,.9,.2,1);
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
}

header .menu a .text-container {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    height: 1.2em; /* constrain to single line to avoid reflow */
}

header .menu a .original-text,
header .menu a .hover-text {
    display: block;
    line-height: 1.2em;
    transition: transform var(--nav-animation-duration) var(--nav-ease), opacity calc(var(--nav-animation-duration) / 1) var(--nav-ease);
    will-change: transform, opacity;
}

/* Hover state (works with :hover and keyboard focus via :focus-visible) */
header .menu a:hover .original-text,
header .menu a:focus-visible .original-text,
header .menu a.is-active .original-text {
    transform: translateY(-100%);
    opacity: 0;
}

header .menu a:hover .hover-text,
header .menu a:focus-visible .hover-text,
header .menu a.is-active .hover-text {
    transform: translateY(-100%);
    opacity: 1;
}

/* Underline uses scaleX transform for GPU-accelerated animation */
header .menu a .underline {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--nav-animation-duration) var(--nav-ease);
    border-radius: 999px;
}

header .menu a:hover .underline,
header .menu a:focus-visible .underline,
header .menu a.is-active .underline {
    transform: scaleX(1);
}

/* Respect users' motion preferences */
@media (prefers-reduced-motion: reduce) {
    header .menu a .original-text,
    header .menu a .hover-text,
    header .menu a .underline {
        transition: none !important;
    }
}

/* When JS (GSAP) is not available the `no-gsap` class will enable a CSS-only hover
   effect that approximates the intended animation: slide original up and fade in hover text */
header .menu a.no-gsap .text-container { overflow: visible; }
header .menu a.no-gsap:hover .original-text { transform: translateY(-100%); opacity: 0; }
header .menu a.no-gsap:hover .hover-text { transform: translateY(0%); opacity: 1; }

/* Underline element default and transition */
header .menu a .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--color-primary);
    transition: width 0.26s cubic-bezier(.2,.9,.2,1);
}

header .menu a .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
}

.hero-text-container .hero-text {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Fix: prevent horizontal scrolling when using a fixed left sidebar (w-64) */
/* The theme outputs a wrapper with class `pl-64` to offset content for the sidebar. */
.pl-64 {
    /* hide accidental overflow inside the main content area while keeping outside overlays accessible */
    overflow-x: hidden;
}

/* Alignfull/alignwide utilities (and other full-bleed blocks) often use 100vw and negative margins
   which creates overflow when content is already offset by the fixed sidebar. Limit their width here. */
.pl-64 .alignfull,
.pl-64 .alignwide,
.pl-64 .wp-block-cover,
.pl-64 .wp-block-media-text,
.pl-64 .hero-section-background,
.pl-64 .video-fullwidth {
    width: calc(100vw - 16rem) !important;
    max-width: calc(100vw - 16rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Scroll lock via class on the root element (use instead of inline style) */
.no-scroll, .no-scroll body {
    overflow: hidden !important;
    height: 100% !important;
}

/* Slightly reduce the negative image gutters for wide images inside the offset wrapper */
.pl-64 .alignwide img,
.pl-64 .alignfull img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: calc(100vw - 16rem) !important;
}

/* Improve hero text contrast and legibility (scoped to hero content reveal) */
.hero-content-reveal {
    background: rgba(0,0,0,0.36);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 1.25rem 1.75rem;
    border-radius: 1rem;
    display: inline-block;
}

.hero-content-reveal h1,
.hero-content-reveal p {
    text-shadow: 0 8px 24px rgba(0,0,0,0.65);
}

/* Ensure the absolute video background cannot force horizontal scroll */
.pl-64 video#hero-video,
.pl-64 .hero-section-background {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
}

/* Subtle slow-scale animation for hero images across site (not front page)
   Applies to elements that act as hero backgrounds or hero images.
   Exclude front page using common body classes: WordPress adds `home` and our theme adds `homepage`.
*/
@keyframes hero-subtle-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Apply to hero background container and explicit hero img id - but not on front page */
body:not(.home):not(.homepage) .hero-section-background,
body:not(.home):not(.homepage) img#hero-bg-image,
body:not(.home):not(.homepage) .hero-video-blur {
    will-change: transform;
    transform-origin: center center;
    animation: hero-subtle-scale 12s ease-in-out infinite;
}

.contact-info span {
    word-break: break-all;
}

.contact-info {
    line-height: 1.5;
}

/* Desktop sidebar menu layout adjustments */
@media (min-width: 1201px) {
    /* Place menu directly below the logo */
    #desktop-sidebar .menu { margin-top: 0.75rem; display: flex; flex-direction: column; align-items: center; }

    /* Add a spacer between menu links and contact area: we create a pseudo spacer element using margin/padding
       so that the contact-info appears roughly 200px below the menu block. */
    #desktop-sidebar .menu + .contact-info { margin-top: 12.5rem; /* ~200px */ }

    /* Make desktop menu links visually larger and add hover effects */
    #desktop-sidebar .menu a {
        padding: 0.6rem 0.9rem; /* slightly reduced padding */
        font-size: 0.95rem; /* smaller desktop menu font */
        transition: transform 360ms cubic-bezier(.2,.9,.2,1), color 160ms ease, box-shadow 360ms ease;
    }

    #desktop-sidebar .menu a:hover,
    #desktop-sidebar .menu a:focus {
        transform: translateY(-3px) scale(1.01);
        color: var(--color-primary);
        box-shadow: 0 8px 20px rgba(25,42,86,0.06);
    }

    /* Decorative underline slide on hover */
    #desktop-sidebar .menu a::after {
        content: '';
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 4px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        transform-origin: left center;
        transform: scaleX(0);
        transition: transform 520ms cubic-bezier(.2,.9,.2,1);
        opacity: 0.95;
    }
    #desktop-sidebar .menu a:hover::after,
    #desktop-sidebar .menu a:focus::after { transform: scaleX(1); }
}