/* --- Contact page--- */
.contact-page .entry-header .entry-title { 
	text-align: center;
    color: var(--site-color-text);
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 1.5em;
}

.contact-page .entry-content .wp-block-columns {
    gap: 40px;
    align-items: flex-start;
    margin-top: 2em;
    margin-bottom: 2em;
    display: flex;
}

.contact-page .entry-content .wp-block-columns .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    box-sizing: border-box;
}

/* Support for the neutral wrapper `contact-defaults` used by the
   contact template when the theme injects defaults (non-Gutenberg). */
.contact-page .entry-content .contact-defaults .contact-defaults-row {
    /* gap: 40px; */
    align-items: flex-start;
    margin-top: 2em;
    margin-bottom: 2em;
    display: flex;
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-main,
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side {
    box-sizing: border-box;
    flex-basis: 0;
    flex-grow: 1;
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-main {
    padding: 25px;
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side {
    padding: 25px;
    border-radius: 5px;
    box-shadow: var(--shadow-sm);
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-details h3,
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-details h4 {
    margin-top: 0;
    color: var(--site-color-text);
    font-size: 1.6em;
    margin-bottom: 1em;
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-details > * {
    margin-bottom: 1.5em;
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-detail-item {
    display: flex;
    align-items: center;
}

/* Keep contact links same color as normal text */
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-detail-item a {
    color: var(--site-color-text) !important;
    text-decoration: none;
}
.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-detail-item a:hover {
    color: var(--site-color-accent-primary) !important;
}

.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side .contact-icon {
    margin-right: 1em;
    color: var(--site-color-accent-primary);
    font-size: 1.8em;
    line-height: inherit;
    flex-shrink: 0;
}

.contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side > .map-responsive {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Instagram QR block (optional, enabled from Customizer) */
.contact-instagram-qr {
    text-align: center;
    margin-top: 1.5em;
}
.contact-instagram-qr h4 {
    margin-bottom: 0.5em;
    font-size: 1.1em;
}
.contact-instagram-qr img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 6px;
    background: #fff;
}

.contact-instagram-qr {
    text-align: center;
}
.contact-instagram-qr .contact-instagram-qr-img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Full-width map when moved below the two columns */
.contact-defaults-map {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    max-width: 100%;
}
.contact-defaults-map .contact-map-embed {
    width: 100%;
    height: 400px;
    max-width: 100%;
}

/* Remove bottom margin for address paragraph so postal code sits directly below */
.contact-address-block .contact-street p {
    margin-bottom: 0;
}
.sandco-contact > *:nth-child(1) {
    grid-column: 1;
}
.sandco-contact > *:nth-child(2) {
    grid-column: 2;
    display: block;
}
.sandco-contact .contact-details {
    margin-bottom: 0;
}

.contact-page .entry-content .wp-block-column:nth-child(1) {
    padding: 25px;
}

.contact-page .entry-content .wp-block-column:nth-child(2) {
    /* background-color: var(--site-color-background); */
    padding: 25px;
    border-radius: 5px;
    box-shadow: var(--shadow-sm);
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-details h3,
.contact-page .entry-content .wp-block-column:nth-child(2) .contact-details h4 {
    margin-top: 0;
    color: var(--site-color-text);
    font-size: 1.6em;
    margin-bottom: 1em;
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-details > * {
    /* width: 100%; */
    margin-bottom: 1.5em;
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-details {       
    /* max-width: 280px;  */
    /* margin-left: auto; */
    /* margin-right: auto;     */
    margin-bottom: 1.5em;
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-detail-item {
    display: flex;
    align-items: center;
}

/* On contact page keep contact links the same color as normal text */
.contact-page .entry-content .wp-block-column:nth-child(2) .contact-detail-item a {
    color: var(--site-color-text) !important;
    text-decoration: none;
}
.contact-page .entry-content .wp-block-column:nth-child(2) .contact-detail-item a:hover {
    color: var(--site-color-accent-primary) !important;
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-detail-item p {
    margin: 0; 
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-detail-item a[href^="mailto:"] {
    /* color: inherit; */
    text-decoration: none; 
}

.contact-page .entry-content .wp-block-column:nth-child(2) .contact-icon {
    margin-right: 1em;
    color: var(--site-color-accent-primary);
    font-size: 1.8em;
    line-height: inherit;
    flex-shrink: 0;
}

.contact-page .entry-content .wp-block-column:nth-child(2) .social-media-links {
    margin-top: 1.5em;
}

.contact-page .entry-content .wp-block-column:nth-child(2) .social-media-links .contact-detail-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* color: inherit; */
}

.contact-page .entry-content .wp-block-column:nth-child(2) .social-media-links .contact-icon {
    margin-right: 1em;
    color: var(--site-color-accent-primary);
    font-size: 1.8em;
    line-height: inherit;
    flex-shrink: 0;
}

.contact-page .entry-content .wp-block-column:nth-child(2) > .map-responsive {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Donne une taille minimale pour éviter que le lien ne soit "invisible" avant le décodage */
[data-sandco-phone], [data-sandco-email] {
    min-width: 100px;
    display: inline-block;
}

/* Optionnel : un petit effet de "chargement" discret si tu veux chipoter */
[data-sandco-phone]:empty::before, [data-sandco-email]:empty::before {
    content: "...";
    opacity: 0.5;
}

/* SMS option: hidden by default to avoid impacting existing clients.
   Add the class `show-sms-link` on a parent (e.g. .contact-details)
   to reveal the SMS link. */
.sms-option { display: none; }
.show-sms-link .sms-option { display: inline-block; }

/* Espacement entre la barre "|" et le lien SMS */
.show-sms-link .sms-option a {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Espacement entre l'icône et le texte "SMS" */
.show-sms-link .sms-option i {
    margin-right: 5px;
}


.cf7-cf-turnstile {
    display: flex;
    justify-content: center;
    margin-bottom: 1em !important;
}

@media screen and (max-width: 900px) {
    .contact-page .entry-content > .wp-block-columns {
        flex-direction: column;
    }

    .contact-page .entry-content > .wp-block-columns > .wp-block-column {
        width: 100%;
    }

    /* Ensure our neutral wrapper collapses to a single column on small screens */
    .contact-page .entry-content .contact-defaults .contact-defaults-row {
        flex-direction: column;
    }
    .contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-main,
    .contact-page .entry-content .contact-defaults .contact-defaults-row .contact-defaults-side {
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobile: center the entire aside block but keep icons left-aligned
       by constraining the inner `.contact-details` and keeping
       `.contact-detail-item` flex-start. */
    .contact-page .entry-content .contact-defaults .contact-defaults-side {
        text-align: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* Shrinkwrap the details box to its content on small screens to avoid
       large empty space on the right. Keep a safe max width (90vw) so it
       never overflows the viewport. */
    .contact-page .entry-content .contact-defaults .contact-defaults-side .contact-details {
        display: inline-block;
        max-width: min(520px, 90vw);
        margin: 0 auto;
        text-align: left; /* keep text and icons left inside the centered block */
        white-space: normal;
        vertical-align: top;
    }
    .contact-page .entry-content .contact-defaults .contact-defaults-side .contact-detail-item {
        justify-content: flex-start;
    }
    .contact-page .entry-content .contact-defaults .contact-defaults-side .contact-instagram-qr {
        margin-top: 1rem;
    }
}

@media screen and (min-width: 901px) {
    .contact-page .entry-content > .wp-block-columns > .wp-block-column:nth-child(2) .map-responsive {
        padding-bottom: 125%;
    }
}

@media screen and (max-width: 768px) {
    .contact-page .entry-content > .wp-block-columns > .wp-block-column:nth-child(2) .map-responsive {
        padding-bottom: 0;
        height: 400px;
    }

    .contact-page .entry-content .wp-block-column:nth-child(1) {
        padding: 0;
    }

    .contact-page .entry-content .wp-block-column:nth-child(2) .contact-details {       
        max-width: 280px; 
        margin-left: auto;
        margin-right: auto;
    }
}

/* -- Modifiers for the two asides used by the template -- */
.contact-defaults-side--primary {
    background-color: var(--site-color-background);
    /* padding: 1rem; */
}
.contact-defaults-side--secondary {
    background-color: var(--site-color-background);
    /* padding: 1rem; */
}

/* Ensure map iframe is full size in any container */
.contact-map-embed iframe { width:100%; height:100%; }