/*
 * Contact Page – Stylesheet
 * Loaded only on pages using template-contact.php
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
    --con-bg-light   : #F6F4F1;
    --con-bg-white   : #FFFFFF;
    --con-bg-dark    : #1E2820;
    --con-accent     : #7FB13D;
    --con-gold       : #C7A87A;
    --con-gold-dark  : #b2945f;
    --con-text       : #1A1A1A;
    --con-muted      : #666666;
    --con-border     : #DDD8D2;
    --con-radius     : 4px;
    --con-radius-lg  : 10px;
    --con-shadow-sm  : 0 2px 12px rgba(0,0,0,0.06);
    --con-shadow-md  : 0 8px 32px rgba(0,0,0,0.10);
    --con-transition : 0.26s ease;
}


/* ═══════════════════════════════════════════
   SHARED LAYOUT
═══════════════════════════════════════════ */
.con-container {
    max-width : 1180px;
    margin    : 0 auto;
    padding   : 0 24px;
}

.con-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--con-accent);
    margin-bottom  : 14px;
}


/* ═══════════════════════════════════════════
   BUTTON SYSTEM
═══════════════════════════════════════════ */
.con-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 14px 36px;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    border-radius   : var(--con-radius);
    border          : 2px solid transparent;
    cursor          : pointer;
    white-space     : nowrap;
    line-height     : 1;
    transition      : background-color var(--con-transition), border-color var(--con-transition), box-shadow var(--con-transition);
}
.con-btn--primary {
    background-color : var(--con-gold);
    color            : #FFFFFF !important;
    border-color     : var(--con-gold);
}
.con-btn--primary:hover,
.con-btn--primary:focus-visible {
    background-color : var(--con-gold-dark);
    border-color     : var(--con-gold-dark);
    box-shadow       : 0 4px 18px rgba(199,168,122,0.4);
}
.con-btn--outline {
    background-color : transparent;
    color            : rgba(255,255,255,0.9) !important;
    border-color     : rgba(255,255,255,0.45);
}
.con-btn--outline:hover,
.con-btn--outline:focus-visible {
    background-color : rgba(255,255,255,0.08);
    border-color     : rgba(255,255,255,0.75);
    box-shadow       : none;
}
.con-btn--whatsapp {
    background-color : #1DAA57;
    color            : #FFFFFF !important;
    border-color     : #1DAA57;
}
.con-btn--whatsapp:hover,
.con-btn--whatsapp:focus-visible {
    background-color : #178f49;
    border-color     : #178f49;
    box-shadow       : 0 4px 18px rgba(29,170,87,0.35);
}
.con-btn:focus-visible {
    outline        : 3px solid var(--con-accent);
    outline-offset : 3px;
}


/* ═══════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════ */
.con-hero {
    background    : var(--con-bg-white);
    padding       : 80px 24px 88px;
    text-align    : center;
    border-bottom : 1px solid var(--con-border);
}

.con-hero__title {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(36px, 4.5vw, 54px);
    font-weight    : 600;
    color          : var(--con-text);
    line-height    : 1.15;
    margin         : 0 0 20px;
    letter-spacing : -0.02em;
}

.con-hero__sub {
    font-family : 'Inter', sans-serif;
    font-size   : 17px;
    font-weight : 300;
    color       : var(--con-muted);
    line-height : 1.8;
    margin      : 0 auto;
    max-width   : 640px;
}


/* ═══════════════════════════════════════════
   2. CONTACT CARDS
═══════════════════════════════════════════ */
.con-cards-section {
    background    : var(--con-bg-light);
    padding       : 64px 24px;
    border-bottom : 1px solid var(--con-border);
}

.con-cards {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 24px;
}

.con-card {
    background    : var(--con-bg-white);
    border        : 1px solid var(--con-border);
    border-radius : var(--con-radius-lg);
    padding       : 32px 24px;
    text-align    : center;
    transition    : transform var(--con-transition), box-shadow var(--con-transition);
}
.con-card:hover {
    transform  : translateY(-4px);
    box-shadow : var(--con-shadow-md);
}

.con-card__icon {
    width           : 52px;
    height          : 52px;
    border-radius   : 50%;
    background      : rgba(127,177,61,0.1);
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin          : 0 auto 20px;
    color           : var(--con-accent);
}
.con-card__icon--wa {
    background : rgba(29,170,87,0.1);
    color      : #1DAA57;
}

.con-card__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : 18px;
    font-weight   : 600;
    color         : var(--con-text);
    margin        : 0 0 10px;
    line-height   : 1.3;
}

.con-card__link {
    display         : block;
    font-family     : 'Inter', sans-serif;
    font-size       : 15px;
    font-weight     : 500;
    color           : var(--con-gold);
    text-decoration : none;
    margin-bottom   : 6px;
    transition      : color var(--con-transition);
    word-break      : break-all;
}
.con-card__link:hover { color: var(--con-gold-dark); }

.con-card__note {
    font-family : 'Inter', sans-serif;
    font-size   : 13px;
    color       : var(--con-muted);
    margin      : 0;
    line-height : 1.5;
}

.con-card__address {
    font-family  : 'Inter', sans-serif;
    font-size    : 15px;
    font-weight  : 400;
    color        : var(--con-text);
    font-style   : normal;
    line-height  : 1.65;
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════
   3. MAP + FORM
═══════════════════════════════════════════ */
.con-main {
    background : var(--con-bg-white);
    padding    : 88px 24px;
}

.con-main__inner {
    display               : grid;
    grid-template-columns : 420px 1fr;
    gap                   : 72px;
    align-items           : start;
}

/* Left — map + hours */
.con-info { display: flex; flex-direction: column; gap: 40px; }

.con-map iframe {
    width         : 100%;
    height        : 320px;
    border        : 0;
    border-radius : var(--con-radius-lg);
    display       : block;
}

.con-hours {
    background    : var(--con-bg-light);
    border        : 1px solid var(--con-border);
    border-radius : var(--con-radius-lg);
    padding       : 28px 32px;
}

.con-hours__table {
    width          : 100%;
    border-collapse: collapse;
    margin-top     : 4px;
}

.con-hours__table tr {
    border-bottom : 1px solid var(--con-border);
}
.con-hours__table tr:last-child { border-bottom: none; }

.con-hours__day,
.con-hours__time {
    font-family : 'Inter', sans-serif;
    font-size   : 14px;
    padding     : 12px 0;
    line-height : 1.4;
}
.con-hours__day  { color: var(--con-text); font-weight: 500; }
.con-hours__time { color: var(--con-muted); text-align: right; }
.con-hours__time--closed { color: #C0392B; font-weight: 500; }

.con-hours__note {
    font-family : 'Inter', sans-serif;
    font-size   : 13px;
    color       : var(--con-muted);
    line-height : 1.6;
    margin      : 16px 0 0;
    font-style  : italic;
}

/* Right — form */
.con-form-wrap { padding-top: 4px; }

.con-form__heading {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(26px, 3vw, 34px);
    font-weight    : 600;
    color          : var(--con-text);
    line-height    : 1.2;
    margin         : 0 0 32px;
    letter-spacing : -0.01em;
}

.con-form {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
}

.con-form__row {
    display : grid;
    grid-template-columns : 1fr 1fr;
    gap     : 20px;
}

.con-form__field {
    display        : flex;
    flex-direction : column;
    gap            : 6px;
}

.con-form__label {
    font-family : 'Inter', sans-serif;
    font-size   : 13px;
    font-weight : 600;
    color       : var(--con-text);
    letter-spacing: 0.02em;
}
.con-form__label span { color: var(--con-accent); margin-left: 2px; }

.con-form__input {
    font-family    : 'Inter', sans-serif;
    font-size      : 15px;
    font-weight    : 300;
    color          : var(--con-text);
    background     : var(--con-bg-white);
    border         : 1.5px solid var(--con-border);
    border-radius  : var(--con-radius);
    padding        : 12px 16px;
    width          : 100%;
    box-sizing     : border-box;
    outline        : none;
    transition     : border-color var(--con-transition), box-shadow var(--con-transition);
    appearance     : none;
    -webkit-appearance: none;
}
.con-form__input::placeholder { color: #AAA; }
.con-form__input:focus {
    border-color : var(--con-accent);
    box-shadow   : 0 0 0 3px rgba(127,177,61,0.12);
}

.con-form__textarea {
    resize     : vertical;
    min-height : 140px;
    line-height: 1.7;
}

.con-form__select {
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 16px center;
    padding-right       : 40px;
    cursor              : pointer;
}

.con-form__submit {
    display         : inline-flex;
    align-items     : center;
    gap             : 10px;
    padding         : 16px 40px;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.08em;
    text-transform  : uppercase;
    color           : #FFFFFF;
    background      : var(--con-gold);
    border          : 2px solid var(--con-gold);
    border-radius   : var(--con-radius);
    cursor          : pointer;
    align-self      : flex-start;
    transition      : background-color var(--con-transition), border-color var(--con-transition), box-shadow var(--con-transition);
}
.con-form__submit:hover,
.con-form__submit:focus-visible {
    background  : var(--con-gold-dark);
    border-color: var(--con-gold-dark);
    box-shadow  : 0 4px 18px rgba(199,168,122,0.4);
}
.con-form__submit:focus-visible {
    outline        : 3px solid var(--con-accent);
    outline-offset : 3px;
}

.con-form__privacy {
    font-family : 'Inter', sans-serif;
    font-size   : 12px;
    color       : var(--con-muted);
    line-height : 1.5;
    margin      : 0;
}
.con-form__privacy a {
    color           : var(--con-gold);
    text-decoration : underline;
}

/* Success / Error states */
.con-form__success {
    display       : flex;
    align-items   : flex-start;
    gap           : 12px;
    background    : rgba(127,177,61,0.08);
    border        : 1.5px solid var(--con-accent);
    border-radius : var(--con-radius-lg);
    padding       : 24px 28px;
    margin-bottom : 8px;
}
.con-form__success p {
    font-family : 'Inter', sans-serif;
    font-size   : 15px;
    color       : var(--con-text);
    margin      : 0;
    line-height : 1.65;
}
.con-form__success svg { flex-shrink: 0; margin-top: 2px; }

.con-form__error {
    background    : rgba(192,57,43,0.07);
    border        : 1.5px solid #C0392B;
    border-radius : var(--con-radius);
    padding       : 14px 18px;
    font-family   : 'Inter', sans-serif;
    font-size     : 14px;
    color         : #C0392B;
    line-height   : 1.5;
    margin-bottom : 4px;
}


/* ═══════════════════════════════════════════
   4. BOTTOM CTA
═══════════════════════════════════════════ */
.con-cta {
    background : var(--con-bg-dark);
    padding    : 80px 24px;
    text-align : center;
}

.con-cta__heading {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(28px, 3.5vw, 42px);
    font-weight    : 600;
    color          : #FFFFFF !important;
    line-height    : 1.2;
    margin         : 0 0 16px;
    letter-spacing : -0.01em;
}

.con-cta__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 16px;
    font-weight : 300;
    color       : rgba(255,255,255,0.75);
    line-height : 1.8;
    margin      : 0 auto 40px;
    max-width   : 560px;
}

.con-cta__phone {
    color           : var(--con-gold);
    text-decoration : none;
    font-weight     : 500;
}
.con-cta__phone:hover { color: #d4b98a; }

.con-cta__actions {
    display         : flex;
    gap             : 16px;
    justify-content : center;
    flex-wrap       : wrap;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .con-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .con-main__inner {
        grid-template-columns : 1fr;
        gap                   : 48px;
    }
    .con-map iframe { height: 280px; }
}

@media (max-width: 640px) {
    .con-cards              { grid-template-columns: 1fr; }
    .con-form__row          { grid-template-columns: 1fr; }
    .con-form__submit       { width: 100%; justify-content: center; }
    .con-hero               { padding: 60px 20px 72px; }
    .con-cards-section      { padding: 48px 20px; }
    .con-main               { padding: 64px 20px; }
    .con-cta                { padding: 64px 20px; }
    .con-cta__actions       { flex-direction: column; align-items: stretch; }
    .con-cta__actions .con-btn { justify-content: center; }
}