:root {
    /* Color Palette - Premium Navy & Gold */
    --primary: #0A192F;
    --primary-light: #172A45;
    --accent: #BC9B4C;              /* sampled from the logo artwork */
    --accent-hover: #A38438;
    --accent-glow: rgba(188, 155, 76, 0.4);
    --overlay: rgba(2, 12, 27, 0.7);
    --secondary: #64FFDA; /* Subtle teal for micro-accents */
    --bg-dark: #020C1B;
    --bg-light: #F8F9FA;
    --text-white: #E6F1FF;
    --text-dark: #1D1D1D;
    --text-muted: #8892B0;
    --white: #FFFFFF;
    
    /* Gradients */
    --grad-primary: linear-gradient(135deg, #0A192F 0%, #172A45 100%);
    --grad-accent: linear-gradient(135deg, #BC9B4C 0%, #D9BE7A 100%);

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing & Sizes */
    --section-padding: 120px 0;
    --container-width: 1100px;
    --transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero content fades in immediately on load */
.fade-in {
    animation: fadeInUp 0.8s ease forwards;
}

/* Scroll-revealed elements: hidden up front only when JS is active, so the
   content stays visible if JS fails. The observer adds .reveal-active. */
.js .fade-in-up,
.js .fade-in-scale {
    opacity: 0;
}

.fade-in-up.reveal-active {
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in-scale.reveal-active {
    animation: fadeInScale 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
}

a {
    text-decoration: none;
    transition: 0.3s ease;
}

ul {
    list-style: none;
}

.section {
    padding: var(--section-padding);
    scroll-margin-top: 90px; /* offset so anchored sections clear the fixed header */
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
}

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

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

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

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

.btn-large {
    padding: 16px 36px;
    font-size: 1.1rem;
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 26px 0;
    transition: 0.4s ease;
}

#main-header.scrolled {
    background-color: var(--primary);
    padding: 18px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* space-between alone leaves NO guaranteed room between the Kontakt button
       and the phone number once the lockup is tight; this gap is the floor. */
    gap: 44px;
}

/* The nav lockup (logo + attorney name + 7 items + phone) does not fit the
   1100px body container; give the header its own wider one. Widened 1280 -> 1400
   so the row has slack instead of sitting at its minimum width. */
#main-header .container {
    max-width: 1400px;
    /* Optical trim, not a symmetric box: the logo mark's SVG carries ~1.5px of
       internal whitespace so it sits inside the content box, while the phone
       number ends flush with it — measured, the right read ~2px tighter. The
       extra 4px squares that up and gives the round mark the ~2px of overshoot
       it needs to look level with flat text. */
    padding-right: 24px;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--white);
    text-decoration: none;
}

.logo-mark {
    height: 52px;
    width: auto;
    transition: height 0.4s ease;
}

#main-header.scrolled .logo-mark {
    height: 44px;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.logo-subtext {
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: var(--accent);
}

.logo-attorney {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--white);
    opacity: 0.85;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    /* Was squeezed to 20px to force the row onto one line inside a 1280px
       container. The container is now 1400px and the mobile breakpoint moved up
       to match, so the items can breathe again. */
    gap: 28px;
    align-items: center;
}

/* Detach the Kontakt call-to-action from the plain text links beside it. */
.nav-links > li:last-child {
    margin-left: 6px;
}

/* Top-level items and the phone number must never break mid-item. */
.nav-links > li > a,
.phone-link span {
    white-space: nowrap;
}

.nav-links a {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Keep the Kontakt call-to-action button unchanged by the uppercase rule's spacing */
.nav-links a.btn {
    letter-spacing: 0.5px;
}

.nav-links a:hover {
    color: var(--accent);
}

/* Specjalizacje mega-menu dropdown */
.has-dropdown {
    position: relative;
}

.dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* small bridge so the menu doesn't disappear when moving the cursor into it */
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 10px 28px;
    padding: 28px 32px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    border-top: 3px solid var(--accent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1001;
}

/* Invisible hover bridge covering the margin gap */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown:hover .dropdown-toggle::after,
.has-dropdown:focus-within .dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-heading {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu a {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    padding: 6px 0;
}

.dropdown-menu a:hover {
    color: var(--accent);
}

.header-contact {
    display: flex;
    align-items: center;
}

.phone-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-weight: 600;
}

/* Mobile menu button (hamburger) — hidden on desktop */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--white);
    border-radius: 2px;
    transition: var(--transition);
}

.mobile-menu-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

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

.mobile-menu-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Hero Section */
#hero {
    height: 100vh;
    /* Gdańsk old town, aerial. Photo: Sebastian Huber via Unsplash
       (https://unsplash.com/photos/oUrM2wOYmBQ) — Unsplash License, free for
       commercial use, no attribution required. */
    background-image: url('assets/hero-gdansk-huber.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--white);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

#hero h1 {
    /* 3.2rem, not the original 4.5rem: the longest line
       ("Rozwiązujemy Twoje problemy.") measures ~742px inside the 760px the hero
       container gives it. Larger sizes wrap it and break the two-line structure. */
    font-size: 3.2rem;
    line-height: 1.15;
    margin-bottom: 20px;
}

.highlight {
    color: var(--accent);
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 600px;
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Services Section */
.bg-light { background-color: var(--bg-light); }

.section-header {
    max-width: 700px;
    margin: 0 auto 60px;
}

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

.section-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--primary);
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    background-color: var(--white);
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
}

.service-icon {
    color: var(--accent);
    margin-bottom: 25px;
}

.service-card h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 15px;
    color: var(--primary);
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.service-areas {
    margin: 0 0 22px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
}

.service-areas li {
    position: relative;
    padding-left: 18px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary);
}

.service-areas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 6px;
    height: 6px;
    background-color: var(--accent);
    border-radius: 50%;
}

.service-link {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Porady Online */
.porady-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.porady-card {
    text-align: center;
    padding: 40px 30px;
    background-color: var(--bg-light);
    border-radius: 8px;
    transition: var(--transition);
}

.porady-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.porady-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--primary);
}

.porady-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.porady-cta {
    margin-top: 50px;
}

/* About Section */
.about-flex {
    display: flex;
    align-items: center;
    gap: 80px;
}

.about-image {
    flex: 1;
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 20px 20px 0 var(--accent);
}

.about-content {
    flex: 1;
}

.section-tag {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 15px;
}

.about-content p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Category chips. The client's 20 questions are grouped into 6 categories; the
   chips narrow the list to one group so the section is not a 20-row wall.
   Shown only under .js — without it every group stays on the page. */
.faq-filters {
    display: none;
}

.js .faq-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    /* Wider than .faq-container's 800px on purpose: seven chips need ~1035px to
       sit on one row, and the section container gives 1100px. Below that they
       wrap centred, which is fine. */
    margin: 0 auto 45px;
}

.faq-filter {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 18px;
    border: 1px solid rgba(10, 25, 47, 0.15);
    border-radius: 999px;
    background-color: var(--white);
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
}

.faq-filter:hover {
    border-color: var(--accent);
    color: var(--accent-hover);
}

.faq-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.faq-filter.is-active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.faq-group + .faq-group {
    margin-top: 45px;
}

.faq-group-title {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 18px;
    padding-left: 4px;
}

.faq-item {
    background-color: var(--white);
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.faq-question {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
    transition: var(--transition);
}

.faq-question svg {
    transition: var(--transition);
    flex-shrink: 0;
}

.faq-question:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.faq-item.active .faq-question {
    background-color: var(--primary);
    color: var(--white);
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    overflow: hidden;
    background-color: var(--white);
}

/* Collapsed only when JS is there to open it again — same progressive-enhancement
   rule as the scroll reveals. Without JS all 20 answers simply read as text.
   The open height is measured and set inline by main.js: the longest answers
   carry bulleted lists, so no fixed max-height is safe. */
.js .faq-answer {
    max-height: 0;
    transition: max-height 0.4s ease;
}

.faq-answer p,
.faq-answer ul {
    padding: 0 30px;
    color: var(--text-muted);
}

.faq-answer > :first-child {
    padding-top: 18px;
}

.faq-answer > :last-child {
    padding-bottom: 22px;
}

/* Re-enable markers: the global reset strips list-style from every ul. */
.faq-answer ul {
    list-style: disc;
    padding-left: 52px;
    margin: 0;
}

.faq-answer li + li {
    margin-top: 8px;
}

.faq-answer strong {
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 600px) {
    .faq-question {
        padding: 18px 20px;
        font-size: 0.95rem;
    }

    .faq-answer p,
    .faq-answer ul {
        padding: 0 20px;
    }

    .faq-answer ul {
        padding-left: 38px;
    }

    .js .faq-filters {
        gap: 8px;
        margin-bottom: 35px;
    }

    .faq-filter {
        font-size: 0.8rem;
        padding: 8px 14px;
    }
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.contact-info p {
    margin-bottom: 40px;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.info-item a {
    color: var(--primary);
    font-weight: 500;
}

.info-item a:hover {
    color: var(--accent);
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-item {
    display: flex;
    gap: 20px;
    align-items: center;
}

.info-icon {
    width: 60px;
    height: 60px;
    background-color: var(--bg-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Long unbreakable strings (e-mail address) must not blow out the flex row
   on narrow screens — min-width:0 lets the text column shrink, overflow-wrap
   lets the address itself break. */
.info-item > div {
    min-width: 0;
}

.info-item p {
    overflow-wrap: anywhere;
}

.info-item strong {
    display: block;
    color: var(--primary);
    margin-bottom: 5px;
}

.contact-urgent {
    margin-top: 30px;
    padding: 20px 24px;
    border-left: 3px solid var(--accent);
    background-color: var(--bg-light);
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.contact-form {
    background-color: var(--white);
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--primary);
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.btn-full {
    width: 100%;
}

/* Honeypot — visually removed but still present in the DOM for bots to trip on.
   Not display:none, since some bots skip hidden fields; this keeps it off-screen. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* RODO consent checkbox — inline layout, smaller print than the field labels */
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-consent input {
    /* Override the generic .form-group input rule (width:100%; padding:15px),
       which otherwise stretches this checkbox to full width. */
    width: 18px;
    height: 18px;
    padding: 0;
    margin-top: 3px;
    flex-shrink: 0;
}

.form-consent label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.form-consent a {
    color: var(--accent);
    font-weight: 600;
}

.form-consent a:hover {
    text-decoration: underline;
}

/* Submission feedback message */
.form-status {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 0.95rem;
    display: none;
}

.form-status.is-visible {
    display: block;
}

.form-status.is-success {
    background-color: rgba(100, 255, 218, 0.12);
    color: #0a7a5c;
    border: 1px solid rgba(100, 255, 218, 0.5);
}

.form-status.is-error {
    background-color: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.35);
}

/* Legal / policy pages (privacy policy, etc.) */
.legal-page {
    padding-top: 160px; /* clear the fixed header */
    padding-bottom: 100px;
}

.legal-page .container {
    max-width: 800px;
}

.legal-page h1 {
    font-size: 2.8rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.legal-page .legal-updated {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 40px;
}

.legal-page h2 {
    font-size: 1.6rem;
    color: var(--primary);
    margin: 40px 0 15px;
}

.legal-page p,
.legal-page li {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.legal-page ul {
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 15px;
}

.legal-page a {
    color: var(--accent);
    font-weight: 600;
}

.legal-page a:hover {
    text-decoration: underline;
}

.legal-note {
    background-color: var(--bg-light);
    border-left: 3px solid var(--accent);
    padding: 20px 25px;
    border-radius: 4px;
    margin-bottom: 40px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Footer */
.footer {
    background-color: var(--primary);
    color: var(--white);
    padding: 80px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
}

.footer-brand p {
    margin-top: 20px;
    color: var(--text-muted);
    max-width: 400px;
}

.footer-legal {
    font-size: 0.85rem;
    line-height: 1.8;
}

.footer-brand .logo-attorney {
    color: var(--accent);
    opacity: 1;
}

/* Komunikatory — Signal / WhatsApp / Telegram click-to-chat */
.contact-messengers {
    margin-top: 30px;
}

.contact-messengers h3 {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 14px;
}

.messenger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.messenger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid rgba(10, 25, 47, 0.15);
    border-radius: 6px;
    background-color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    transition: var(--transition);
}

.messenger-btn svg {
    flex-shrink: 0;
}

.messenger-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.messenger-handle {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background-color: var(--bg-light);
    border: 1px solid rgba(10, 25, 47, 0.12);
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.messenger-note {
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Footer icon row */
.footer-messengers {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.footer-messengers a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(230, 241, 255, 0.2);
    border-radius: 50%;
    color: var(--text-white);
    transition: var(--transition);
}

.footer-messengers a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.footer-links h4 {
    margin-bottom: 20px;
    color: var(--accent);
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-muted);
}

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

.footer-bottom {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 40px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Interior page header banner — dark so the fixed (transparent) header's
   white nav stays visible above light page content. */
.page-header {
    background: var(--grad-primary);
    color: var(--white);
    padding: 180px 0 80px;
    text-align: center;
}

.page-header h1 {
    color: var(--white);
    font-size: 2.8rem;
    margin-bottom: 16px;
}

.page-header p {
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.page-header .breadcrumb {
    display: block;
    margin-bottom: 18px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
}

/* Simple prose block for stub / legal pages */
.prose {
    max-width: 760px;
    margin: 0 auto;
}

.prose p {
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.8;
}

.prose h2 {
    color: var(--primary);
    margin: 40px 0 16px;
    font-size: 1.5rem;
}

/* Inline links in .prose had no colour rule, so they fell back to the browser
   default blue/purple (rodo.html and all 16 specjalizacje stubs). Mirrors the
   .legal-page a treatment. .btn is excluded so buttons keep their own styling. */
.prose a:not(.btn) {
    color: var(--accent);
    font-weight: 600;
}

.prose a:not(.btn):hover {
    text-decoration: underline;
}

.stub-note {
    padding: 24px 28px;
    background-color: var(--bg-light);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    color: var(--text-muted);
}

/* Contact page: map + opening hours */
.contact-map {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: 8px;
    margin-top: 60px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.opening-hours {
    margin-top: 30px;
    padding: 20px 24px;
    background-color: var(--bg-light);
    border-radius: 6px;
}

.opening-hours h3 {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.opening-hours ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opening-hours li {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 320px;
}

.opening-hours li span:last-child {
    color: var(--primary);
    font-weight: 500;
}

/* Cookie consent banner */
.cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 26px;
    background-color: var(--primary);
    color: var(--text-white);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-top: 3px solid var(--accent);
}

.cookie-banner.is-visible {
    display: flex;
}

.cookie-banner p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.cookie-banner a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-banner .cookie-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-banner button {
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 600px) {
    .messenger-row {
        flex-direction: column;
    }
    .messenger-btn {
        justify-content: center;
        padding: 14px 18px;
    }

    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-banner .cookie-actions {
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .porady-grid {
        grid-template-columns: 1fr;
    }

    .page-header h1 {
        font-size: 2.1rem;
    }
}

/* 1260-1399px: measured, the relaxed lockup needs 1400px to sit on one line.
   Between the burger breakpoint and there, fall back to the tight values that
   are measured to fit from 1260px up. Vertical padding stays relaxed. */
@media (max-width: 1399px) {
    #main-header .container {
        max-width: 1280px;
    }

    nav {
        gap: 0;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-links > li:last-child {
        margin-left: 0;
    }
}

@media (max-width: 1259px) {
    .mobile-menu-btn {
        display: flex;
    }

    .header-contact {
        display: none;
    }

    /* Desktop nav hidden; opens as a stacked dropdown below the fixed header */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--primary);
        padding: 10px 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 14px 20px;
    }

    /* Neutralize the button styling on the Kontakt link inside the dropdown */
    .nav-links a.btn-primary {
        background-color: transparent;
        color: var(--white);
        border-radius: 0;
    }

    .nav-links a.btn-primary:hover {
        background-color: var(--primary-light);
        transform: none;
    }

    /* Mega-menu collapses into an inline, tap-to-expand accordion on mobile */
    .dropdown-menu {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
        padding: 0;
        background-color: var(--primary-light);
        border-radius: 0;
        border-top: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .has-dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu::before {
        display: none;
    }

    .dropdown-heading {
        color: var(--accent);
        border-bottom: none;
        padding: 14px 28px 4px;
        margin-bottom: 0;
        font-size: 0.8rem;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .dropdown-menu a {
        color: var(--text-white);
        padding: 8px 28px 8px 40px;
    }

    .dropdown-toggle::after {
        float: right;
    }

    .has-dropdown.open .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* ============================================================
   Tablet / phone layout.
   The grids and flex rows above are desktop-first and had no
   breakpoint below 992px, so the landing page overflowed
   horizontally on phones. Flex/grid items also need min-width:0
   — their default `auto` refuses to shrink below content width.
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --section-padding: 80px 0;
    }

    .about-flex {
        flex-direction: column;
        gap: 40px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

/* The slogan's first line ("Rozwiązujemy Twoje problemy.") needs ~14.5x the
   font size in width. Below ~900px the hero container can no longer hold it at
   3.2rem, so the headline steps down earlier than the rest of the layout. */
@media (max-width: 900px) {
    #hero h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 600px) {
    #hero > .container {
        min-width: 0;
    }

    #hero h1 {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.9rem;
    }
}

/* Blog article: client-supplied layout, using the site palette. */
.skd-post-container {
  font-family: var(--font-body);
  line-height: 1.75;
  color: var(--text-dark);
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}
.skd-post-container h1,
.skd-post-container h2,
.skd-post-container h3 {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.skd-post-container h1 {
  font-size: 2.15rem;
  line-height: 1.25;
  margin-bottom: 24px;
}
.skd-post-container h2 {
  font-size: 1.55rem;
  margin-top: 48px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text-muted);
}
.skd-post-container h3 {
  font-size: 1.25rem;
  margin-top: 28px;
  margin-bottom: 12px;
}
.skd-lead {
  font-size: 1.15rem;
  color: var(--primary-light);
  background: var(--bg-light);
  border-left: 4px solid var(--accent);
  padding: 18px 22px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 32px;
}
.skd-highlight-box {
  background: var(--bg-light);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 24px;
  margin: 28px 0;
}
.skd-highlight-title {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.skd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  margin: 28px 0;
}
.skd-card {
  background: var(--white);
  border: 1px solid var(--text-muted);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.skd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.skd-card-title {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.skd-timeline {
  position: relative;
  margin: 32px 0 32px 10px;
  padding-left: 28px;
  border-left: 3px solid var(--text-white);
}
.skd-timeline-item {
  position: relative;
  margin-bottom: 28px;
}
.skd-timeline-item:last-child {
  margin-bottom: 0;
}
.skd-timeline-badge {
  position: absolute;
  left: -43px;
  top: -2px;
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  border: 3px solid var(--white);
}
.skd-timeline-title {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.skd-table-wrapper {
  overflow-x: auto;
  margin: 28px 0;
}
.skd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--text-muted);
}
.skd-table th {
  background: var(--primary);
  color: var(--white);
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
}
.skd-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg-light);
  vertical-align: top;
}
.skd-table tr:nth-child(even) td {
  background: var(--bg-light);
}
.skd-cta-banner {
  background: var(--primary);
  color: var(--white);
  border-radius: 14px;
  padding: 36px 28px;
  margin-top: 48px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
  text-align: center;
}
.skd-cta-banner h3 {
  color: var(--white);
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 12px;
}
.skd-cta-banner p {
  color: var(--text-white);
  max-width: 650px;
  margin: 0 auto 24px auto;
  font-size: 1.05rem;
}
.skd-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--primary);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.05rem;
  transition: background 0.2s ease, transform 0.1s ease;
}
.skd-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}
.skd-alert {
  background-color: var(--bg-light);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  border-radius: 6px;
  margin: 24px 0;
  font-size: 0.95rem;
}


.skd-post-container p { margin-bottom: 20px; }
.skd-post-container ul { padding-left: 24px; list-style: disc; }
.skd-post-container li + li { margin-top: 12px; }
.skd-post-container section + section { margin-top: 40px; }
.skd-post-container .skd-card p:last-child,
.skd-post-container .skd-timeline-item p:last-child { margin-bottom: 0; }
.skd-post-container .skd-table { min-width: 640px; }
.skd-post-container .skd-table th { color: var(--text-white); }
.skd-post-container .skd-card-title { color: var(--primary); }
.skd-table-wrapper:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.blog-post-header h1 { max-width: 1000px; margin-inline: auto; font-size: clamp(1.8rem, 4vw, 2.8rem); overflow-wrap: break-word; }
.blog-post-header .breadcrumb a { color: inherit; }
.blog-post-header .breadcrumb a:hover { text-decoration: underline; }
.blog-card { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--accent); border-radius: 10px; background: var(--bg-light); }
.blog-card h2 { margin-top: 12px; font-size: clamp(1.5rem, 3vw, 2rem); }
.blog-card h2 a:not(.btn) { color: var(--primary); }
.blog-category { color: var(--primary-light); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; }
.blog-back { max-width: 900px; margin: 40px auto 0; }
.blog-back .btn-outline { color: var(--primary); border-color: var(--primary); }
.blog-back .btn-outline:hover { background: var(--primary); color: var(--white); }
@media (max-width: 600px) {
    .skd-post-container .skd-cta-banner { padding: 28px 20px; }
    .skd-post-container .skd-btn { padding: 14px 20px; }
}

/* Blog article: police detention guide. */
.as-article-wrapper {
font-family: var(--font-body);
color: var(--primary-light);
line-height: 1.75;
max-width: 900px;
margin: 0 auto;
padding: 0;
background-color: var(--white);
}
.as-article-wrapper * {
box-sizing: border-box;
}
.as-lead {
font-size: 1.15rem;
color: var(--text-dark);
background-color: var(--bg-light);
border-left: 4px solid var(--accent-hover);
padding: 20px 24px;
border-radius: 0 8px 8px 0;
margin-bottom: 35px;
}
.as-article-wrapper h2 {
font-size: 1.55rem;
color: var(--primary);
margin-top: 45px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--text-white);
font-weight: 700;
}
.as-article-wrapper h3 {
font-size: 1.25rem;
color: var(--primary-light);
margin-top: 28px;
margin-bottom: 12px;
font-weight: 700;
}
.as-article-wrapper p {
margin-bottom: 18px;
}
.as-article-wrapper strong {
color: var(--primary);
font-weight: 700;
}
/* Time Rule Cards (48 + 24h) */
.as-time-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin: 25px 0 35px 0;
}
.as-time-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08);
position: relative;
overflow: hidden;
}
.as-time-card .as-hours {
font-size: 2.4rem;
font-weight: 800;
color: var(--accent);
line-height: 1.1;
margin-bottom: 8px;
display: block;
}
.as-time-card .as-time-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--bg-light);
margin-bottom: 10px;
display: block;
}
.as-time-card p {
font-size: 0.95rem;
color: var(--text-white);
margin: 0;
line-height: 1.55;
}
.as-time-card strong {
color: var(--white);
}
/* Checklist / Bullet Box */
.as-conditions-box {
background-color: var(--bg-light);
border: 1px solid var(--text-white);
border-radius: 12px;
padding: 24px;
margin: 25px 0;
}
.as-conditions-list {
list-style: none;
padding: 0;
margin: 0;
}
.as-conditions-list li {
position: relative;
padding-left: 34px;
margin-bottom: 14px;
}
.as-conditions-list li:last-child {
margin-bottom: 0;
}
.as-conditions-list li::before {
content: "⚖️";
position: absolute;
left: 0;
top: 0;
font-size: 1.1rem;
}
/* Responsive Table */
.as-table-container {
overflow-x: auto;
margin: 25px 0 35px 0;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid var(--text-white);
}
.as-table {
width: 100%;
border-collapse: collapse;
background-color: var(--white);
font-size: 0.95rem;
}
.as-table th {
background-color: var(--primary);
color: var(--white);
text-align: left;
padding: 15px 18px;
font-weight: 600;
}
.as-table td {
padding: 15px 18px;
border-bottom: 1px solid var(--text-white);
vertical-align: top;
}
.as-table tr:last-child td {
border-bottom: none;
}
.as-table tr:nth-child(even) {
background-color: var(--bg-light);
}
/* Steps Timeline */
.as-steps {
margin: 30px 0;
}
.as-step-item {
display: flex;
gap: 20px;
margin-bottom: 22px;
background: var(--white);
border: 1px solid var(--text-white);
padding: 22px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.as-step-number {
flex-shrink: 0;
width: 44px;
height: 44px;
background-color: var(--accent-hover);
color: var(--white);
font-weight: 800;
font-size: 1.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.as-step-content h3 {
margin: 0 0 8px 0;
font-size: 1.15rem;
color: var(--primary);
}
.as-step-content p {
margin: 0;
color: var(--text-dark);
font-size: 0.97rem;
}
/* Quote / Formula Box */
.as-quote-formula {
background-color: #fffbeb;
border: 2px dashed var(--accent);
border-radius: 10px;
padding: 18px 22px;
margin: 15px 0 0 0;
font-size: 1rem;
color: #78350f;
}
/* Family Section Box */
.as-family-box {
background-color: #f0f9ff;
border: 1px solid #bae6fd;
border-left: 5px solid #0284c7;
border-radius: 10px;
padding: 25px;
margin: 30px 0;
}
.as-family-box h3 {
margin-top: 0;
color: #0369a1;
}
/* Compensation Alert */
.as-alert-box {
background-color: var(--bg-light);
border-left: 5px solid var(--primary);
padding: 20px 24px;
border-radius: 0 10px 10px 0;
margin: 30px 0;
}
/* CTA Section */
.as-cta-banner {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
padding: 38px 32px;
border-radius: 16px;
margin-top: 45px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}
.as-cta-banner h2 {
color: var(--white);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
margin-top: 0;
padding-bottom: 15px;
}
.as-cta-banner p {
color: var(--text-white);
}
.as-cta-banner strong {
color: var(--accent);
}
.as-cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
margin: 25px 0;
}
.as-cta-point {
background: rgba(255, 255, 255, 0.07);
padding: 16px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.95rem;
color: var(--bg-light);
}
.as-cta-footer {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.as-cta-btn {
display: inline-block;
background-color: var(--accent);
color: var(--white) !important;
text-decoration: none;
font-weight: 700;
padding: 14px 28px;
border-radius: 8px;
transition: background-color 0.2s ease;
text-align: center;
}
.as-cta-btn:hover {
background-color: var(--accent-hover);
}
@media (max-width: 640px) {
.as-step-item {
flex-direction: column;
gap: 12px;
}
.as-cta-banner {
padding: 25px 20px;
}
}
.as-article-wrapper ul { list-style: disc; padding-left: 24px; }
.as-article-wrapper li + li { margin-top: 12px; }
.as-article-wrapper .as-conditions-list { list-style: none; padding: 0; }
.as-article-wrapper .as-conditions-list li + li { margin-top: 0; }
.as-table { min-width: 640px; }
.as-table-container:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.as-cta-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.blog-card + .blog-card { margin-top: 32px; }