/*
 * Site theme, layered on top of Bootstrap 5.
 * Palette and fonts are carried over as-is from the old site (old/code/zalegalizujpobyt.pl/css/*.css)
 * so the visual identity stays the same while the markup/framework is modernized.
 */

@import url("../vendors/google-fonts/fonts.css");

:root {
    --brand-teal: #01ba9f;
    --brand-teal-dark: #019c85;
    --brand-teal-light: #72ddcd;
    --brand-cyan: #01acc0;
    --brand-navy: #2e2e3d;
    --brand-navy-dark: #272734;
    --brand-deep-teal-1: #04231f;
    --brand-deep-teal-2: #0b4a40;
    --brand-deep-teal-3: #0f6b5c;
    --brand-dark-gradient: linear-gradient(135deg, var(--brand-deep-teal-1) 0%, var(--brand-deep-teal-2) 55%, var(--brand-deep-teal-3) 100%);
    --brand-gray-light: #f3f3f8;
    --brand-gray-border: #e2e2e9;
    --brand-gray-text: #6b6b78;
    --brand-gray-text-light: #9c9ca8;
    --brand-yellow: #ebb44a;
    --brand-red: #ea584d;
}

html {
    /* Stops the iOS rubber-band bounce from revealing blank canvas above
       the header or below the footer. Set on both html and body since the
       flex layout below can make body the actual scrolling box. */
    overscroll-behavior-y: none;
    height: 100%;
}

body {
    font-family: "Heebo", sans-serif;
    color: var(--brand-navy);
    background-color: #fff;
    overscroll-behavior-y: none;
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Heebo", sans-serif;
    font-weight: 700;
    color: var(--brand-navy);
}

a {
    color: var(--brand-cyan);
}

a:hover {
    color: var(--brand-teal-dark);
}

.text-muted-brand {
    color: var(--brand-gray-text);
}

.link-brand {
    color: var(--brand-teal-dark);
}

.link-brand:hover {
    color: var(--brand-deep-teal-3);
}

/* Buttons */

.btn-brand {
    background-color: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-deep-teal-3);
    border-color: var(--brand-deep-teal-3);
    color: #fff;
}

/* Header / navbar */

.site-header {
    background: var(--brand-dark-gradient);
}

.site-header .navbar-brand img {
    height: 32px;
    width: 32px;
}

.site-header .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: #fff;
}

.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.lang-switcher {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}

.lang-flag-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

/* Hero */

.hero {
    background: var(--brand-dark-gradient);
    color: #fff;
    padding: 5rem 0 4rem;
    text-align: center;
}

.hero h1 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p.lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Content sections */

.section {
    padding: 4rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Feature tiles */

.feature-tile {
    text-align: center;
    padding: 1.5rem 1rem;
}

.feature-tile img {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    padding: 8px;
    border-radius: 50%;
    background-color: rgba(114, 221, 205, 0.18); /* --brand-teal-light tint */
}

.feature-tile h3 {
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Features split */

.split-item img.split-image {
    max-width: 100%;
    border-radius: 0.5rem;
}

@media (max-width: 767.98px) {
    .split-item img.split-image.split-image-sm-mobile {
        max-width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .split-cta {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: 12.5%;
    }
}

/* Contact form */

.contact-form label {
    font-weight: 500;
    color: var(--brand-navy);
}

.contact-form .form-control:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 0.2rem rgba(1, 186, 159, 0.25);
}

#iframe-map {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--brand-gray-border);
    border-radius: 0.5rem;
}

/* Footer */

.site-footer {
    background: var(--brand-dark-gradient);
    color: rgba(255, 255, 255, 0.75);
    padding: 2.5rem 0;
    margin-top: 3rem;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.75);
}

.site-footer a:hover {
    color: #fff;
}

.site-footer .footer-social a {
    color: var(--brand-cyan);
    font-size: 1.25rem;
}

.site-footer .footer-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 0;
    margin: 0;
}

@media (max-width: 767.98px) {
    /* Flex items only take up their own content width, so text-align alone
       can't center this — it needs the full row width to center within. */
    .footer-meta {
        width: 100%;
        text-align: center;
    }
}

/* Cookie popup */

#cookie-popup {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background-color: #ccc;
    color: #000;
    padding: 0.75rem 1rem;
    text-align: center;
}

#cookie-popup.show {
    display: block;
}

#cookie-popup .btn-brand {
    margin-left: 0.75rem;
}