/* DarFindr homepage styles: footer and builder surfaces. */


.df-home-host p {
    max-width: 430px;
    line-height: 1.5;
}

.df-home-host ul {
    margin: 0 0 20px;
    padding-left: 18px;
}

.df-rtl .df-home-host {
    text-align: right;
    direction: ltr;
    grid-template-columns: 260px minmax(0, 1fr);
    background-image:
        linear-gradient(270deg, color-mix(in srgb, var(--color-white) 96%, transparent), color-mix(in srgb, var(--color-white) 72%, transparent) 46%, color-mix(in srgb, var(--color-white) 5%, transparent)),
        var(--host-image);
}

.df-rtl .df-home-host > div {
    grid-column: 2;
    grid-row: 1;
    direction: rtl;
}

.df-rtl .df-home-host aside {
    grid-column: 1;
    grid-row: 1;
    direction: rtl;
}

.df-rtl .df-home-host ul {
    padding-right: 18px;
    padding-left: 0;
}

.df-home-host aside {
    padding: 24px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-white) 94%, transparent);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary-dark) 14%, transparent);
}

.df-home-host button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: 7px;
    background: var(--color-white);
    font-weight: 800;
}

.df-home-footer {
    padding: 42px clamp(24px, 5vw, 72px) 24px;
    background: radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--color-primary) 34%, transparent), transparent 32%), var(--color-primary-dark);
    color: var(--color-white);
}

.df-home-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, minmax(110px, .8fr)) 1.3fr;
    gap: 34px;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.df-home-footer p {
    color: color-mix(in srgb, var(--color-white) 76%, transparent);
    font-size: 13px;
    line-height: 1.5;
}

.df-home-footer nav,
.df-home-footer form {
    display: grid;
    align-content: start;
    gap: 10px;
}

.df-home-footer nav a {
    color: color-mix(in srgb, var(--color-white) 78%, transparent);
    font-size: 13px;
}

.df-home-socials {
    display: flex;
    gap: 10px;
}

.df-rtl .df-home-socials {
    justify-content: flex-start;
}

.df-home-socials a {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
    border-radius: 50%;
}

.df-home-footer .df-newsletter-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    width: 100%;
    height: 42px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-white) 24%, transparent);
    border-radius: 7px;
    direction: ltr;
}

.df-home-footer .df-newsletter-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.df-newsletter-notice {
    display: block;
    color: color-mix(in srgb, var(--color-white) 78%, transparent);
    font-size: 12px;
    line-height: 1.4;
}

.df-newsletter-notice.is-success {
    color: #b7f4c8;
}

.df-newsletter-notice.is-error {
    color: #ffb8b8;
}

.df-rtl .df-home-footer,
.df-rtl .df-home-footer input {
    text-align: right;
}

.df-rtl .df-home-footer .df-newsletter-control {
    grid-template-columns: 42px minmax(0, 1fr);
}

.df-home-footer .df-newsletter-control input,
.df-home-footer .df-newsletter-submit {
    height: 42px;
    min-height: 42px;
    border: 0;
    color: var(--color-white);
}

.df-home-footer .df-newsletter-control input {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    background: rgba(255, 255, 255, .12);
}

.df-rtl .df-home-footer .df-newsletter-control input {
    grid-column: 2;
    direction: rtl;
    text-align: right;
}

.df-home-footer input::placeholder {
    color: color-mix(in srgb, var(--color-white) 68%, transparent);
}

.df-home-footer .df-newsletter-submit {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-column: 2;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 0;
    place-items: center;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-accent) 82%, #fff 18%);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.df-rtl .df-home-footer .df-newsletter-submit {
    grid-column: 1;
}

.df-home-footer-bottom {
    display: flex;
    width: min(1120px, 100%);
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
    color: color-mix(in srgb, var(--color-white) 72%, transparent);
    font-size: 12px;
}

@media (min-width: 981px) {
    .df-rtl .df-home-header {
        display: flex;
        flex-wrap: nowrap;
        direction: ltr;
        justify-content: space-between;
    }

    .df-rtl .df-home-logo {
        order: 3;
        flex: 0 0 230px;
        justify-self: end;
        justify-content: flex-end;
    }

    .df-rtl .df-home-nav {
        order: 2;
        flex: 1 1 auto;
        direction: rtl;
        justify-content: center;
        min-width: 0;
    }

    .df-rtl .df-home-actions {
        order: 1;
        flex: 0 0 230px;
        justify-content: flex-start;
        direction: rtl;
    }

    .df-rtl .df-home-hero {
        direction: ltr;
        height: 400px;
        min-height: 0;
        max-height: none;
        grid-template-columns: minmax(390px, 430px) minmax(0, 1fr);
        gap: 38px;
        overflow: hidden;
        background-image:
            linear-gradient(270deg, color-mix(in srgb, var(--color-white) 98%, transparent), color-mix(in srgb, var(--color-white) 68%, transparent) 34%, color-mix(in srgb, var(--color-white) 12%, transparent) 58%),
            linear-gradient(0deg, color-mix(in srgb, var(--color-primary-dark) 28%, transparent), color-mix(in srgb, var(--color-primary-dark) 8%, transparent)),
            var(--hero-image);
    }

    .df-rtl .df-home-hero-copy {
        grid-column: 2;
        grid-row: 1;
        direction: rtl;
        justify-self: end;
        align-self: center;
    }

    .df-rtl .df-home-promise {
        grid-column: 1;
        grid-row: 1;
        direction: rtl;
        align-self: center;
        max-height: 330px;
        overflow: hidden;
        padding: 24px;
    }

    .df-rtl .df-home-hero h1 {
        font-size: var(--hero-title-size, clamp(44px, 5.5vw, 68px));
    }

    .df-rtl .df-home-promise ul {
        gap: 15px;
        font-size: 14px;
    }

    .df-rtl .df-home-promise p {
        margin-top: 24px;
        font-size: 16px;
        line-height: 1.5;
    }

    .df-rtl .df-home-promise-item svg {
        width: 16px;
        height: 16px;
    }

    .df-rtl .df-home-host {
        grid-template-columns: 260px 1fr;
    }

    .df-rtl .df-home-host > div {
        grid-column: 2;
    }

    .df-rtl .df-home-host aside {
        grid-column: 1;
        grid-row: 1;
    }
}

@media (max-width: 980px) {
    .df-rtl .df-home-page .home-search {
        width: min(100%, calc(100vw - 32px));
        grid-template-columns: 1fr;
    }

    .df-rtl .df-home-page .home-search .home-search-submit,
    .df-rtl .df-home-page .home-search .home-guests-field,
    .df-rtl .df-home-page .home-search .home-checkout-trigger,
    .df-rtl .df-home-page .home-search .home-checkin-trigger,
    .df-rtl .df-home-page .home-search .home-destination-field {
        grid-column: auto;
    }

    .df-home-header,
    .df-home-hero,
    .df-home-host,
    .df-home-stats,
    .df-home-footer-grid {
        grid-template-columns: 1fr;
    }

    .df-home-nav,
    .df-home-actions {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .df-rtl .df-home-header {
        display: flex;
        flex-wrap: wrap;
        direction: ltr;
        justify-content: space-between;
    }

    .df-rtl .df-home-logo {
        order: 2;
        flex: 0 1 210px;
        justify-content: flex-end;
    }

    .df-rtl .df-home-actions {
        order: 1;
        flex: 0 1 auto;
        justify-content: flex-start;
        direction: rtl;
    }

    .df-rtl .df-home-nav {
        order: 3;
        flex: 1 0 100%;
        direction: rtl;
        justify-content: flex-start;
    }

    .df-home-search,
    .df-home-trust,
    .df-home-card-row,
    .df-home-how > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-home-search-submit {
        grid-column: span 2;
    }
}

@media (max-width: 680px) {
    .df-home-hero {
        padding-top: 34px;
    }

    .df-home-search,
    .df-home-trust,
    .df-home-card-row {
        grid-template-columns: 1fr;
    }

    #destinations .df-home-card-row,
    #experiences .df-home-card-row {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding: 0 0 8px;
        scroll-padding-inline: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #destinations .df-home-card-row::-webkit-scrollbar,
    #experiences .df-home-card-row::-webkit-scrollbar {
        display: none;
    }

    #destinations .df-home-image-card,
    #experiences .df-home-experience-card {
        flex: 0 0 min(78vw, 286px);
        box-sizing: border-box;
        min-height: 190px;
        scroll-snap-align: start;
    }

    .home-place-grid.is-grid {
        display: flex;
        max-width: none;
        gap: 14px;
        overflow-x: auto;
        margin: 0;
        padding: 0 0 8px;
        scroll-padding-inline: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-place-grid.is-grid::-webkit-scrollbar {
        display: none;
    }

    .home-place-grid.is-grid .home-place-card {
        flex: 0 0 min(78vw, 286px);
        box-sizing: border-box;
        min-height: 220px;
        scroll-snap-align: start;
    }

    .df-home-how > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
    }

    .df-home-how article {
        gap: 7px;
    }

    .df-home-how span {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    .df-home-how p {
        max-width: 150px;
        font-size: 11.5px;
    }

    .df-home-search-submit {
        grid-column: auto;
    }

    .df-home-trust article {
        border-right: 0;
    }

    .df-home-footer {
        padding: 28px 18px 18px;
    }

    .df-home-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
        align-items: start;
    }

    .df-home-footer-grid > div,
    .df-home-footer-grid > form {
        grid-column: 1 / -1;
    }

    .df-home-footer-grid > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .df-home-footer-grid > div .df-home-logo {
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    .df-home-footer-grid > div p {
        margin: 0;
    }

    .df-home-socials {
        justify-content: flex-start;
    }

    .df-rtl .df-home-footer-grid > div {
        align-items: flex-end;
    }

    .df-rtl .df-home-footer-grid > div .df-home-logo,
    .df-rtl .df-home-socials {
        align-self: flex-end;
    }

    .df-rtl .df-home-socials {
        justify-content: flex-end;
    }

    .df-home-footer nav,
    .df-home-footer form {
        gap: 7px;
    }

    .df-home-footer nav strong,
    .df-home-footer form strong {
        font-size: 13px;
    }

    .df-home-footer nav a {
        font-size: 12px;
        line-height: 1.35;
    }

    .df-home-footer form {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 2px;
    }

    .df-home-footer form p {
        margin: 0;
    }

    .df-home-footer-bottom {
        display: grid;
        gap: 10px;
        margin-top: 22px;
        padding-top: 16px;
    }
}

/* Preview template overrides moved from page-home.php */
.df-home-body {
    overflow-x: clip !important;
}

.df-home-page .df-home-hero-copy a,
.df-home-page .df-home-hero-copy a:link,
.df-home-page .df-home-hero-copy a:visited,
.df-home-page .df-home-host a,
.df-home-page .df-home-host a:link,
.df-home-page .df-home-host a:visited,
.df-home-header .df-home-login,
.df-home-header .df-home-login:link,
.df-home-header .df-home-login:visited {
    color: var(--color-white) !important;
}

.df-home-page .df-home-hero-copy a:hover,
.df-home-page .df-home-hero-copy a:focus-visible,
.df-home-header .df-home-login:hover,
.df-home-header .df-home-login:focus-visible {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px);
}

.df-home-header .df-home-login {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--color-primary-dark) !important;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}