/* Cleradol Contact page — compact editorial layout aligned with About and FAQ. */

.cl-contact {
    --cl-contact-max: 1240px;
    overflow: clip;
    background: #050505;
    color: #ffffff;
}

.cl-contact :where(h1, h2, p, address) { margin-top: 0; }
.cl-contact em { font-style: italic; font-weight: 400; }

/* COMPACT INNER-PAGE HERO */
.cl-contact-hero {
    display: grid;
    min-height: clamp(11rem, 22vw, 15rem);
    align-items: center;
    padding: clamp(2.25rem, 4vw, 3.5rem) max(var(--cl-page-gutter), calc((100% - var(--cl-contact-max)) / 2));
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background:
        radial-gradient(circle at 82% 18%, rgba(203, 163, 66, .13), transparent 27%),
        linear-gradient(135deg, #050505 0%, #0b0906 100%);
}

.cl-contact-hero__inner {
    width: min(100%, var(--cl-contact-max));
    margin-inline: auto;
}

.cl-contact-hero .cl-eyebrow {
    margin: 0 0 1rem;
    color: #d3a84c;
}

.cl-contact-hero h1 {
    max-width: 11ch;
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(2.6rem, 4.6vw, 4.7rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .91;
}

.cl-contact-hero h1 em {
    background: var(--cl-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* FORM AND CONTACT DETAILS */
.cl-contact-main {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(4.5rem, 8vw, 7.5rem) max(var(--cl-page-gutter), calc((100% - var(--cl-contact-max)) / 2));
    background: #f7f3ef;
    color: #17120b;
}

.cl-contact-main__form {
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid #ded5cc;
    background: #ffffff;
}

.cl-contact-main__form .cl-eyebrow {
    margin: 0 0 .9rem;
    color: #8c6817;
}

.cl-contact-main__form h2 {
    max-width: 11ch;
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(2.6rem, 4.3vw, 4.6rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .95;
}

.cl-contact-main__form h2 em {
    color: #956d13;
    font-weight: 400;
}

.cl-contact-main__intro {
    max-width: 35rem;
    margin: 1.25rem 0 0;
    color: #665f58;
    line-height: 1.7;
}

.cl-contact-form-wrap { margin-top: clamp(2.25rem, 4vw, 3.5rem); }

/* Contact Form 7 */
.cl-contact-form-wrap .wpcf7,
.cl-contact-form-wrap .wpcf7-form { max-width: none; margin: 0; }
.cl-contact-form-wrap .wpcf7-form > p { margin: 0 0 1.25rem; }

.cl-cf7 { display: grid; gap: 1.35rem; }
.cl-cf7__row { display: grid; gap: 1.35rem; }
.cl-cf7__field { display: grid; gap: .55rem; margin: 0; }

.cl-cf7__label,
.cl-contact-form-wrap label {
    color: #26221d;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cl-cf7__label small {
    color: #857d73;
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.cl-contact-form-wrap .wpcf7-form-control-wrap { display: block; }

.cl-contact-form-wrap :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    width: 100%;
    margin: .45rem 0 0;
    padding: .8rem .9rem;
    border: 1px solid #c9c0b7;
    border-radius: 0;
    outline: 0;
    background: #fbf9f7;
    box-shadow: none;
    color: #17120b;
    font: inherit;
    font-size: .95rem;
    line-height: 1.45;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.cl-contact-form-wrap textarea { min-height: 8.5rem; resize: vertical; }

.cl-contact-form-wrap :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus {
    border-color: #956d13;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(149, 109, 19, .12);
}

.cl-contact-form-wrap .wpcf7-not-valid-tip {
    margin-top: .4rem;
    color: #8a2f2f;
    font-size: .78rem;
}

.cl-contact-form-wrap .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: .85rem 1rem;
    border: 1px solid #956d13;
    color: #3f392f;
    font-size: .85rem;
}

.cl-cf7__submit { margin-top: .1rem; }

.cl-contact-form-wrap input[type="submit"] {
    min-height: 3.2rem;
    padding: .9rem 1.5rem;
    border: 1px solid #17120b;
    border-radius: 999px;
    background: #17120b;
    color: #ffffff;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.cl-contact-form-wrap input[type="submit"]:hover {
    border-color: #956d13;
    background: #956d13;
    transform: translateY(-1px);
}

.cl-contact-form-wrap input[type="submit"]:focus-visible {
    outline: 2px solid #956d13;
    outline-offset: 3px;
}

.cl-contact-form-wrap .wpcf7-spinner { vertical-align: middle; }

/* DISTRIBUTOR CARD */
.cl-contact-details {
    position: relative;
    display: grid;
    min-width: 0;
    align-content: start;
    gap: clamp(2rem, 4vw, 3.25rem);
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.5rem);
    background:
        radial-gradient(circle at 90% 85%, rgba(203, 163, 66, .12), transparent 32%),
        #090909;
    color: #ffffff;
}

.cl-contact-details__top,
.cl-contact-details__item,
.cl-contact-details__grid { position: relative; z-index: 1; }

.cl-contact-details__top .cl-eyebrow {
    margin: 0 0 .9rem;
    color: #cba342;
}

.cl-contact-details__top h2 {
    max-width: 11ch;
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(2.45rem, 4vw, 4rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .95;
}

.cl-contact-details__top > p:last-child {
    max-width: 25rem;
    margin: 1.2rem 0 0;
    color: #b8b0aa;
    font-size: .95rem;
    line-height: 1.7;
}

.cl-contact-details__item {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.cl-contact-details__label {
    display: block;
    margin-bottom: .6rem;
    color: #cba342;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cl-contact-details :where(address, a) {
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: .93rem;
    font-style: normal;
    line-height: 1.65;
    text-decoration: none;
}

.cl-contact-details a:hover { color: #d3a84c; }
.cl-contact-details a:focus-visible { outline: 2px solid #d3a84c; outline-offset: 4px; }

.cl-contact-details__grid { display: grid; gap: 1.5rem; }

.cl-contact-details__mark {
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    color: rgba(255, 255, 255, .035);
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(15rem, 32vw, 25rem);
    line-height: .8;
    pointer-events: none;
}

@media (min-width: 680px) {
    .cl-cf7__row,
    .cl-contact-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .cl-contact-main {
        grid-template-columns: minmax(0, 1.08fr) minmax(21rem, .72fr);
        align-items: stretch;
    }
}

@media (max-width: 679px) {
    .cl-contact-hero { min-height: 10rem; }
    .cl-contact-hero h1 { font-size: clamp(2.55rem, 12vw, 3.55rem); }

    .cl-contact-main__form,
    .cl-contact-details { padding: 1.5rem; }

    .cl-contact-main__form h2 { font-size: clamp(2.45rem, 12vw, 3.35rem); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-contact-form-wrap :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea),
    .cl-contact-form-wrap input[type="submit"] { transition: none; }
}