/* ========================================================================
   WordPress layer — keeps admin-uploaded media inside the original design.
   Loaded last, so every rule here is scoped to avoid overriding media.css.
   ======================================================================== */

/* The base layout (>1919px) relied on the intrinsic size of the bundled SVGs.
   Uploaded files have their own dimensions, so pin them to the design sizes. */
@media (min-width: 1920px) {
    .hero__logo {
        width: 617px;
        height: auto;
    }

    .hero__social img {
        width: 19px;
        height: auto;
    }

    .footer__social img {
        width: 21px;
        height: auto;
    }
}

.menu__logo,
.hero__logo,
.contact__logo img {
    max-width: 100%;
    object-fit: contain;
}

.hero__social img,
.footer__social img {
    object-fit: contain;
}

.hide_summary {
    display: none;
}

.page__thumb img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.page__article + .page__article {
    margin-top: 60px;
}

/* ------------------------------------------------------------------------
   Gravity Forms — chrome reset.

   Scoped by the layout's own form classes, which the theme puts on the <form>
   itself (gform_form_tag), plus .kar-form on the wrapper for the few bits that
   sit outside it. Nothing here is scoped by section: the contacts form lives in
   .hero--contact, not .contact, and every ".contact .gform_wrapper ..." rule
   silently missed it.

   Looks and layout are NOT set here. The theme stamps its classes onto the
   markup — .co-form / .contact__form / .popup__form on the form,
   .contact__fields / .popup__fields on the field container, .contact__input /
   .popup__input on every input, .co-form__message on every textarea — so the
   layout's own CSS applies to them directly, and a field added later in the
   form editor inherits it with no CSS work.
   ------------------------------------------------------------------------ */
.kar-form {
    display: flex;
    justify-content: center;
    width: 100%;
}

.popup__form .gform_heading,
.contact__form .gform_heading,
.co-form .gform_heading,
.popup__form .gfield_label,
.contact__form .gfield_label,
.co-form .gfield_label,
.popup__form .gform_required_legend,
.contact__form .gform_required_legend,
.co-form .gform_required_legend,
.popup__form .gform_validation_errors,
.contact__form .gform_validation_errors,
.co-form .gform_validation_errors,
.popup__form .gform_submission_error,
.contact__form .gform_submission_error,
.co-form .gform_submission_error,
.popup__form .validation_error,
.contact__form .validation_error,
.co-form .validation_error,
.popup__form [id$="_validation_container"],
.contact__form [id$="_validation_container"],
.co-form [id$="_validation_container"],
.popup__form .gfield_description:not(.validation_message),
.contact__form .gfield_description:not(.validation_message),
.co-form .gfield_description:not(.validation_message) {
    display: none;
}

.popup__form .gform-body,
.contact__form .gform-body,
.co-form .gform-body,
.popup__form .gform_body,
.contact__form .gform_body,
.co-form .gform_body {
    width: 100%;
}

.popup__form .gfield,
.contact__form .gfield,
.co-form .gfield {
    max-width: 100%;
    padding: 0;
    width: 100%;
}

/* A field switched to full width in the form editor spans the whole row. */
.popup__form .gfield--width-full,
.contact__form .gfield--width-full,
.co-form .gfield--width-full {
    grid-column: 1 / -1;
}

.popup__form .ginput_container,
.contact__form .ginput_container,
.co-form .ginput_container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.popup__form .gform_footer,
.contact__form .gform_footer,
.co-form .gform_footer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* The field container already carries the gap, so the button adds none. */
.popup__form .popup__submit,
.contact__form .contact__submit,
.co-form .contact__submit {
    margin-top: 0;
}

.popup__form .gfield_error input,
.contact__form .gfield_error input,
.co-form .gfield_error input,
.popup__form .gfield_error textarea,
.contact__form .gfield_error textarea,
.co-form .gfield_error textarea,
.popup__form .gfield_error .contact__select-trigger,
.contact__form .gfield_error .contact__select-trigger,
.co-form .gfield_error .contact__select-trigger {
    border-color: #ff5b0c !important;
}

.popup__form .validation_message,
.contact__form .validation_message,
.co-form .validation_message {
    margin-top: 6px;
    padding: 0 22px;
    border: none;
    background: none;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: #ff5b0c;
}

.kar-form .gform_confirmation_message,
.gform_confirmation_wrapper .gform_confirmation_message {
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    line-height: 140%;
    color: #fff;
}

.kar-form .gform_ajax_spinner {
    width: 20px;
    height: 20px;
    margin-left: 12px;
}

/* ------------------------------------------------------------------------
   Contacts page — the .co-form layout on Gravity Forms markup.

   The layout nests the fields and the button in .co-form__left and keeps the
   textarea as its sibling. Gravity Forms cannot produce that nesting: every
   field, the textarea included, lands inside .gform_fields. So the wrappers are
   flattened with display:contents and the whole form becomes one grid, using
   the same widths as contact.css / media-contact.css. The result is identical;
   only the way it is reached differs.

   The hand-written fallback form keeps using the .co-form__left rules.
   ------------------------------------------------------------------------ */
.co-form .gform-body,
.co-form .gform_body,
.co-form .gform_fields {
    display: contents;
}

form.co-form {
    display: grid;
    grid-template-columns: 224px 224px 487px;
    /* Three EXPLICIT rows — two of inputs and one for the button — because the
       textarea below spans "1 / -1", and -1 means the end of the explicit grid.
       With rows left implicit that resolves to line 1, the textarea occupies a
       single row, and its height blows that row up and pushes the rest down. */
    grid-template-rows: min-content min-content min-content;
    grid-auto-rows: min-content;
    column-gap: 18px;
    row-gap: 15px;
    align-items: stretch;
}

/* The textarea sits on the right, spanning both rows of inputs. The 2px make
   up the difference between the 18px inner gap and the 20px outer one. */
.co-form .gfield--type-textarea,
.co-form .gfield:has(textarea) {
    grid-column: 3;
    grid-row: 1 / -1;
    margin-left: 2px;
}

.co-form .gform_footer {
    grid-column: 1 / 3;
    justify-content: flex-start;
}

/* Stretches down to the button, exactly like align-items:stretch did in the
   layout's flex version, while min-height keeps the design's floor. */
.co-form .gfield--type-textarea,
.co-form .gfield:has(textarea) {
    min-height: 0;
}

.co-form textarea {
    height: 100%;
    box-sizing: border-box;
}

@media (max-width: 1919px) {
    /* 350 + 15 + 365 */
    form.co-form {
        grid-template-columns: 168px 168px 365px;
        column-gap: 14px;
        row-gap: 12px;
    }

    .co-form .gfield--type-textarea {
        margin-left: 1px;
    }
}

@media (max-width: 1270px) {
    form.co-form {
        grid-template-columns: 168px 168px 265px;
    }
}

@media (max-width: 769px) {
    form.co-form {
        grid-template-columns: 1fr 1fr 2fr;
        width: 100%;
    }
}

@media (max-width: 570px) {
    /* Single column: name | phone, then e-mail, property, textarea, button. */
    form.co-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 5px;
        row-gap: 5px;
    }

    .co-form .gfield:nth-child(n + 3),
    .co-form .gfield--type-textarea,
    .co-form .gfield:has(textarea),
    .co-form .gform_footer {
        grid-column: 1 / -1;
    }

    .co-form .gfield--type-textarea,
    .co-form .gfield:has(textarea) {
        grid-row: auto;
        margin-left: 0;
    }

    .co-form .contact__input,
    .co-form .contact__select-trigger {
        max-width: 100%;
    }

    .co-form textarea {
        min-height: 148px;
    }

    .co-form .contact__submit {
        max-width: 224px;
    }

    .contact__select.is-open .contact__select-list {
            width: 227px;
    right: auto;
    left: auto;
    }

    .co-form .contact__select.is-open .contact__select-list {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------
   Language switcher — not in the layout, so it borrows the design's own type
   scale and sits inside the existing header nav / burger column.
   ------------------------------------------------------------------------ */
/* The header grid is 1fr auto 1fr; the switcher shares the right cell with the
   request button instead of adding a fourth column. At <=1025px the nav is
   hidden and the grid drops to 1fr 1fr, so this cell keeps its place. */
.header__right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 24px;
}

.kar-lang {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kar-lang__link {
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.25s ease;
}

.kar-lang__link:hover,
.kar-lang__link.is-active {
    color: rgba(255, 255, 255, 0.9);
}

.kar-lang--menu {
    gap: 14px;
}

.kar-lang--menu .kar-lang__link {
    font-size: 18px;
}

@media (max-width: 1919px) {
    .header__right {
        gap: 18px;
    }

    .kar-lang {
        gap: 8px;
    }

    .kar-lang__link {
        font-size: 13px;
    }

    .kar-lang--menu .kar-lang__link {
        font-size: 14px;
    }
}

@media (max-width: 570px) {
    .header__right {
        gap: 12px;
    }

    .kar-lang {
        gap: 6px;
    }

    .kar-lang__link {
        font-size: 12px;
    }
}

/* Menu items rendered as plain labels keep the look but not the pointer. */
.footer__links span,
.header__link:not(a):not(button),
.menu__nav-item:not(a):not(button),
.menu__submenu-link:not(a),
.header__submenu-link:not(a) {
    cursor: default;
}

/* ------------------------------------------------------------------------
   Text pages — Privacy Policy, terms, anything pasted in as plain HTML.

   Two things in the layout work against pasted content and are undone here:
   style.css strips list-style and padding off every ul on the site, so lists
   arrive with no markers at all; and .page had no background or colour, which
   left body's black-on-black.

   Sizes follow the same breakpoints as the rest of the theme.
   ------------------------------------------------------------------------ */

.page__inner {
    /* The header is positioned over the content, so the top padding is what
       keeps the title from sitting underneath it. */
    max-width: 900px;
    margin: 0 auto;
    padding: 200px 33px 140px;
    color: #fff;
}

.page__title {
    margin-bottom: 40px;
    font-weight: 300;
    font-size: 55px;
    line-height: 105%;
    letter-spacing: -0.03em;
    color: #fff;
}

.page__content {
    font-weight: 300;
    font-size: 17px;
    line-height: 165%;
    letter-spacing: -0.01em;
}

.page__content h2 {
    margin: 56px 0 18px;
    font-weight: 400;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #fff;
}

.page__content h3 {
    margin: 36px 0 14px;
    font-weight: 500;
    font-size: 21px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #fff;
}

.page__content h2:first-child,
.page__content h3:first-child {
    margin-top: 0;
}

.page__content p {
    margin: 0 0 18px;
}

/* The global reset kills markers and indent; both come back inside content. */
.page__content ul,
.page__content ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.page__content ul {
    list-style: disc;
}

.page__content ol {
    list-style: decimal;
}

.page__content li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.page__content li::marker {
    color: #ff5b0c;
}

/* Nested lists sit tighter and change marker, as lists normally do. */
.page__content li > ul,
.page__content li > ol {
    margin: 10px 0 0;
}

.page__content li > ul {
    list-style: circle;
}

.page__content strong,
.page__content b {
    font-weight: 500;
    color: #fff;
}

.page__content a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s ease;
}

.page__content a:hover {
    color: #ff5b0c;
}

.page__content hr {
    height: 1px;
    margin: 44px 0;
    border: 0;
    background-color: rgba(255, 255, 255, 0.15);
}

.page__content blockquote {
    margin: 24px 0;
    padding-left: 20px;
    border-left: 2px solid #ff5b0c;
    color: #fff;
}

/* Generated policies sometimes carry a table; it must not push the page wide. */
.page__content table {
    display: block;
    width: 100%;
    margin-bottom: 22px;
    overflow-x: auto;
    border-collapse: collapse;
}

.page__content th,
.page__content td {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
}

.page__content th {
    font-weight: 500;
    color: #fff;
}

@media (max-width: 1919px) {
    .page__inner {
        max-width: 720px;
        padding: 160px 24px 110px;
    }

    .page__title {
        margin-bottom: 32px;
        font-size: 41px;
    }

    .page__content {
        font-size: 15px;
    }

    .page__content h2 {
        margin-top: 44px;
        font-size: 24px;
    }

    .page__content h3 {
        margin-top: 30px;
        font-size: 18px;
    }
}

@media (max-width: 570px) {
    .page__inner {
        padding: 120px 20px 80px;
    }

    .page__title {
        margin-bottom: 24px;
        font-size: 32px;
    }

    .page__content {
        font-size: 14px;
        line-height: 170%;
    }

    .page__content h2 {
        margin-top: 36px;
        font-size: 21px;
    }

    .page__content h3 {
        margin-top: 26px;
        font-size: 17px;
    }

    .page__content ul,
    .page__content ol {
        padding-left: 20px;
    }
}