/*
Theme Name: Willows Lake
Theme URI: 
Author: RVADV Rafa
Author URI: 
Description: A custom block theme for Willows Lake.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: willows-lake
Tags: 
*/

:root { 
    --max-width: 1400px;
    --page-margin: 20px;
    --auto-pad: max( var(--page-margin), calc( (100vw - var(--max-width) )/2 ));
}
html { box-sizing: border-box; }
html, body { overflow-x: clip; }
*, *::before, *::after { box-sizing: inherit; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { text-underline-offset: 0.2em; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
.wp-block-site-logo img { object-fit: contain; }
.willows-eyebrow {
    font-family: var(--wp--preset--font-family--tosh-a);
    font-weight: 500;
    font-style: normal;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.mobile-break { display: none; }
@media (max-width: 767px) {
    .mobile-break { display: inline; }
}

/* ---------------------------------- */
/* image content split pattern styles */
.image-content-split > .wp-block-group { gap: 0; }
.image-content-split > .wp-block-group > div.wp-block-group { padding: calc(var(--page-margin) * 2.4) var(--page-margin); }
.image-content-split > .wp-block-group > div.wp-block-group:nth-child(1) { padding-left: var(--auto-pad); }
.image-content-split > .wp-block-group > div.wp-block-group:nth-child(2) { padding-right: var(--auto-pad); padding-left: clamp(var(--page-margin), 5vw, 40px);}
.image-content-split > .wp-block-group > figure { width: 50%; min-height: 500px; position: relative; }
.image-content-split > .wp-block-group > figure img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
@media screen and (max-width: 768px) {
    .image-content-split > .wp-block-group{ flex-direction: column; }
    .image-content-split > .wp-block-group:has( > div.wp-block-group:nth-child(1)) { flex-direction: column-reverse; }
    .image-content-split > .wp-block-group > figure { width: 100%; min-height: max(240px, 50vw); }
}
/* ---------------------------------- */
/* ---------------------------------- */


/* ---------------------------------------- */
/* logo mark content section pattern styles */
.logo-marked h2 { position: relative; width: fit-content; }
@media screen and (min-width: 768px) { .logo-marked h2 { font-size: min(5vw, 4rem); } }
.logo-marked h2::before {
    content: "";
    display: block;
    position: absolute;
    right: -12%; bottom: -64%;
    width: 164px; height: 164px;
    background-image: url('/wp-content/uploads/2026/09/The-Willows_RGB_Icon-White.png');
    background-size: cover;
    opacity: 0.22; pointer-events: none; user-select: none;
}
.logo-marked-two { position: relative; }
@media screen and (min-width: 768px) { .logo-marked-two h2 { font-size: min(5vw, 4rem); } }
.logo-marked-two::before {
    content: "";
    display: block;
    position: absolute;
    right: var(--auto-pad); bottom: 1rem;
    width: min(464px, 50vw); height: auto; aspect-ratio: 2.5 / 1;
    background-image: url('/wp-content/uploads/2026/09/The-Willows_RGB_Alternate-Logo-White.png');
    background-size: cover;
    opacity: 0.64; pointer-events: none; user-select: none; z-index: 2;
}
.logo-marked.center h2 { margin: auto; }
.logo-marked.center h2::before { bottom: -100%; }
@media screen and (max-width: 768px) { .logo-marked.center h2 { max-width: 312px; } .logo-marked h2::before { bottom: -42%;} }
/* ---------------------------------------- */

/* ------------------------------ */
/* amenities block pattern styles */
.amenities-block * { transition: all 0.2s ease; }
/* .amenities-block .amenities-cards {} */
.amenities-block .amenities-card { width: 100%; }
.amenities-block .amenities-card img { height: clamp(300px, 33vw, 446px); object-fit: cover; opacity: 0.28; }
.amenities-block .amenities-card.active img { opacity: 1; }
.amenities-block .active-details { 
    width:50%; 
    position: relative; 
    padding-left: 20px; 
    min-height: 114px; 
    display: flex; flex-direction: column;
    justify-content: center; 
    align-items: center;
}
.amenities-block .active-details::before { 
    content: ""; display: block; position: absolute; width: 4px; height: 100%; background: #D9D9D9; left: 0;
}
.amenities-block .amenities-card .details { display: none; }
@media screen and (max-width: 768px) {
    .amenities-block .amenities-cards { flex-direction: column; }
    .amenities-block .amenities-card img { opacity: 1; }
    .amenities-block .amenities-card .details { display: block; }
    .amenities-block .active-details { display: none; }
}
body.editor-styles-wrapper {
    .amenities-block .amenities-card img { opacity: 1; }
    .amenities-block .amenities-card .details { display: block; }
}

/* ------------------------------ */
/* Button variants: shared by the frontend and block editor. */
.wp-block-button { --chev-thick: 2.42px;  --chev-size: 0.64em; z-index: 1;}
/* Cream + Chevron */
.wp-block-button.is-style-willows-cream-chevron .wp-block-button__link { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--cream); }
.wp-block-button.is-style-willows-cream-chevron .wp-block-button__link:hover { background: #efe7d4; background: color-mix(in srgb, var(--wp--preset--color--cream) 92%, var(--wp--preset--color--teal)); color: var(--wp--preset--color--teal); border-color: transparent; }
.wp-block-button.is-style-willows-cream-chevron .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; }
.wp-block-button.is-style-willows-cream-chevron .wp-block-button__link::after { content: ""; display: block; width: var(--chev-size); height: var(--chev-size); flex: 0 0 auto; margin-left: auto; border-top: var(--chev-thick) solid currentColor; border-right: var(--chev-thick) solid currentColor; transform: rotate(45deg); }
/* Cream */
.wp-block-button.is-style-willows-cream .wp-block-button__link { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--cream); }
.wp-block-button.is-style-willows-cream .wp-block-button__link:hover { background: #efe7d4; background: color-mix(in srgb, var(--wp--preset--color--cream) 92%, var(--wp--preset--color--teal)); color: var(--wp--preset--color--teal); border-color: transparent; }
/* Fill + Chevron */
.wp-block-button.is-style-willows-fill-chevron .wp-block-button__link,
.wp-block-button.is-style-willows-secondary-chevron .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; }
.wp-block-button.is-style-willows-fill-chevron .wp-block-button__link::after,
.wp-block-button.is-style-willows-secondary-chevron .wp-block-button__link::after { content: ""; display: block; width: var(--chev-size); height: var(--chev-size); flex: 0 0 auto; margin-left: auto; border-top: var(--chev-thick) solid currentColor; border-right: var(--chev-thick) solid currentColor; transform: rotate(45deg); }
/* Fill + Person: the decorative icon inherits the text and hover colors. */
.wp-block-button.is-style-willows-fill-person .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; }
.wp-block-button.is-style-willows-fill-person .wp-block-button__link::after {
    content: "";
    display: block;
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
    margin-left: auto;
    background-color: currentColor;
    --person-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E");
    -webkit-mask: var(--person-icon) center / contain no-repeat;
    mask: var(--person-icon) center / contain no-repeat;
}
/* Secondary (Green) */
.wp-block-button.is-style-willows-secondary .wp-block-button__link,
.wp-block-button.is-style-willows-secondary-chevron .wp-block-button__link { background: var(--wp--preset--color--green); color: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--cream); }
.wp-block-button.is-style-willows-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-willows-secondary-chevron .wp-block-button__link:hover { background: #4e6649; color: color-mix(in srgb, var(--wp--preset--color--green) 85%, black); background: var(--wp--preset--color--cream); }
/* Text + Chevron */
.wp-block-button.is-style-willows-text-chevron .wp-block-button__link { background: transparent; color: inherit; border: 0; box-shadow: none; padding-inline: 0; }
.wp-block-button.is-style-willows-text-chevron .wp-block-button__link:hover { background: transparent; color: inherit; border: 0; box-shadow: none; }
.wp-block-button.is-style-willows-text-chevron .wp-block-button__link { text-decoration: none; }
.wp-block-button.is-style-willows-text-chevron .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.42px; }
.wp-block-button.is-style-willows-text-chevron .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; }
.wp-block-button.is-style-willows-text-chevron .wp-block-button__link::after { content: ""; display: block; width: var(--chev-size); height: var(--chev-size); flex: 0 0 auto; margin-left: auto; border-top: var(--chev-thick) solid currentColor; border-right: var(--chev-thick) solid currentColor; transform: rotate(45deg); }
/* ------------------------------ */


/* -------------------------------- */
/* default page hero pattern styles */
.def-page-hero-container {}
.def-page-hero { overflow: visible;}
.def-page-hero-title { translate: 0 clamp(40px, 12vw, 100px); z-index: 1;}
.def-page-hero-content { padding-top: clamp(80px, 12vw, 140px) !important; }
@media screen and (max-width: 768px) {
    .def-page-hero-container > .wp-block-cover { min-height: min(46rem, 54svh) !important; }
    .def-page-hero-content { border: none !important; }
}

/* -------------------------------- */
/* Shared typography for native and block button controls. */
body button, body input[type="submit"], body input[type="button"], body input[type="reset"], body .wp-element-button, body .wp-block-button__link, body .rvfp-explorer button {
    font-family: var(--wp--preset--font-family--pt-sans, "PT Sans", Tahoma, sans-serif);
}

/* Contact Form 7: the surrounding layout uses native Gutenberg blocks. */
.willows-contact-form { --form-paper: var(--wp--preset--color--cream); --form-ink: var(--wp--preset--color--teal); }
.willows-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.willows-contact-form p { margin: 0 0 12px; }
.willows-form-grid p { margin: 0; }
.willows-contact-form label, .willows-contact-form .wpcf7-form-control-wrap { display: block; }
.willows-contact-form input:not([type="checkbox"]):not([type="submit"]), .willows-contact-form textarea { box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid transparent; border-radius: 0; padding: 12px; background: var(--form-paper); color: var(--form-ink); font: 16px var(--wp--preset--font-family--pt-sans); }
.willows-contact-form textarea { resize: vertical; min-height: 110px; }
.willows-contact-form input::placeholder, .willows-contact-form textarea::placeholder { color: var(--form-ink); opacity: .8; }
.willows-contact-form > label, .willows-form-grid { margin-bottom: 10px; }
.willows-contact-form .wpcf7-list-item { margin: 0; }
.willows-contact-form .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.willows-contact-form input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--wp--preset--color--light-blue); }
.willows-form-disclosure { font-size: 13px; margin: 8px 0 16px; }
.willows-form-disclosure summary { cursor: pointer; text-decoration: underline; padding-block: 8px; }
.willows-contact-form input[type="submit"] { background: var(--wp--preset--color--light-blue); color: var(--form-ink); border: 0; min-height: 44px; min-width: 180px; cursor: pointer; }
.willows-contact-form input[type="submit"]:hover { background: var(--form-paper); }

@media (max-width: 480px) { .willows-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Keep the contact photo behind the introduction, not the taller mobile form. */
@media (max-width: 781px) {
    .wp-block-cover:has(.willows-contact-form) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 0 !important;
        gap: 0;
    }
    .wp-block-cover:has(.willows-contact-form) > .wp-block-cover__inner-container,
    .wp-block-cover:has(.willows-contact-form) > .wp-block-cover__inner-container > .wp-block-columns {
        display: contents;
    }
    .wp-block-cover:has(.willows-contact-form) > :is(.wp-block-cover__image-background, .wp-block-cover__background) {
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
        height: 100%;
    }
    .wp-block-cover:has(.willows-contact-form) > .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column {
        position: relative;
        z-index: 1;
        min-width: 0;
        margin: 0;
    }
    .wp-block-cover:has(.willows-contact-form) > .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column:first-child {
        grid-area: 1 / 1;
        padding: 10em var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    }
    .wp-block-cover:has(.willows-contact-form) > .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column:last-child {
        grid-area: 2 / 1;
        margin-bottom: 1em;
    }
    .wp-block-cover:has(.willows-contact-form) > .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column:last-child > .wp-block-group {
        border: 0;
        border-width: 0 !important;
        padding-inline: var(--wp--preset--spacing--40) !important;
    }
}

/* Contact Form 7 validation and submission feedback. */
.wpcf7 {
    --form-error: #9e3b32;
    --form-error-text: var(--form-error);
    --form-success: var(--wp--preset--color--green, #5b7755);
}
.has-teal-background-color .wpcf7 {
    --form-error-text: #ffd0bf;
}
.wpcf7 .wpcf7-form :is(input, select, textarea).wpcf7-not-valid {
    border-color: var(--form-error);
    box-shadow: none;
}
.wpcf7 :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--wp--preset--color--light-blue, #b9e1e9);
    outline-offset: 3px;
}
.wpcf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--form-error-text);
    font-family: var(--wp--preset--font-family--pt-sans, "PT Sans", sans-serif);
    font-size: .875rem;
    line-height: 1.4;
}
.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 14px 18px;
    border: 0;
    border-left: 4px solid var(--wp--preset--color--teal, #425b63);
    background: var(--wp--preset--color--cream, #fef3de);
    color: var(--wp--preset--color--teal, #425b63);
    font-family: "PT Sans", sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
}
.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output {
    border-left-color: var(--form-error);
}
.wpcf7 form:is(.invalid, .unaccepted) .wpcf7-response-output {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--form-error-text);
    font-size: .875rem;
    line-height: 1.4;
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--form-success); }
.wpcf7 .wpcf7-spinner {
    background: var(--wp--preset--color--teal, #425b63);
    opacity: 1;
}
.wpcf7 .wpcf7-spinner::before { background: var(--wp--preset--color--cream, #fef3de); }
.wpcf7 form.submitting .wpcf7-submit { opacity: .65; cursor: wait; }

/* Overlapping native Group title on the Neighborhood page. */
.neighborhood-title { position: relative; z-index: 2; max-width: 660px !important; }


.neighborhood-title { margin-top: 0 !important; margin-bottom: -42px !important; transform: translateY(-90px); }


/* Amenities: match the native Columns stacking breakpoint. Page scope supports
   feature patterns already inserted before the dedicated class was added. */
@media (max-width: 781px) {
    :is(.willows-amenities-feature, .page-id-342) .wp-block-columns > .wp-block-column > .wp-block-group[style*="border-left-width"] {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    :is(.willows-amenities-feature, .page-id-342) .wp-block-columns:has(> .wp-block-column > .wp-block-list) {
        gap: 0 !important;
    }
    :is(.willows-amenities-feature, .page-id-342) .wp-block-columns > .wp-block-column:has(> .wp-block-list) {
        margin-block: 0 !important;
    }
    :is(.willows-amenities-feature, .page-id-342) .wp-block-columns > .wp-block-column > .wp-block-list {
        margin-block: 0;
    }
}