@charset "utf-8";

/* ================================================================
   KA-PLOW — Contact Page  v4.1
   Neutral palette: charcoal + brand orange
   ================================================================ */

/* ── PAGE BANNER ────────────────────────────────────────────── */
#top_bnnr {
    min-height: 28vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 5%;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 100%),
        url('/site/content/contact/top_bnr.jpg') center center / cover no-repeat,
        #2a2a2a;
    color: #fff;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 2px 4px 6px rgba(0,0,0,0.5);
}
#top_bnnr::after { display: none; }

/* ── OUTER WRAPPER ──────────────────────────────────────────── */
#contact-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
    max-width: 1200px;
    width: 90%;
    margin: 3rem auto 4rem;
    align-items: start;
}

/* ── FORM COLUMN ────────────────────────────────────────────── */
#contact-form-col {
    background: #fff;
    border: 1px solid #e0ddd8;
    border-radius: 8px;
    overflow: hidden;
}

#contact-form-hd {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: #fff;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(90,90,90,0.55) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(60,60,60,0.6) 0%, transparent 45%),
        linear-gradient(160deg, #0d0d0d 0%, #222222 35%, #111111 65%, #1c1c1c 100%);
    padding: 1rem 1.5rem;
    border-left: 5px solid #D74100;
}
#contact-form-hd i { color: #D74100; font-size: 1.1rem; }

/* Alerts */
.ctc-alert {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1.5rem 1.5rem 0;
    padding: 0.85rem 1.1rem;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.5;
}
.ctc-success {
    background: #f0faf2;
    border: 1px solid #2e9e50;
    color: #1a5c30;
}
.ctc-success i { color: #2e9e50; font-size: 1.1rem; }
.ctc-error {
    background: #fff5f2;
    border: 1px solid #D74100;
    color: #a33000;
}
.ctc-error i { color: #D74100; font-size: 1.1rem; }
.ctc-error a { color: #D74100; font-weight: 700; }

/* Form layout */
form#contact-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ctc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ctc-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ctc-full { width: 100%; }

.ctc-group label {
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.02em;
}
.ctc-req { color: #D74100; }

.ctc-group input,
.ctc-group select,
.ctc-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.93rem;
    color: #1a1a1a;
    background: #fafaf9;
    border: 1px solid #d0cdc8;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ctc-group input:focus,
.ctc-group select:focus,
.ctc-group textarea:focus {
    border-color: #D74100;
    box-shadow: 0 0 0 3px rgba(215,65,0,0.1);
    background: #fff;
}
.ctc-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.ctc-group select { cursor: pointer; }

/* Form intro blurb */
.ctc-form-intro {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}
.ctc-form-intro a { color: #D74100; font-weight: 600; text-decoration: none; }
.ctc-form-intro a:hover { text-decoration: underline; }

/* Field error state */
.ctc-group input.ctc-field-error,
.ctc-group select.ctc-field-error,
.ctc-group textarea.ctc-field-error {
    border-color: #D74100;
    background: #fff8f5;
    box-shadow: 0 0 0 3px rgba(215,65,0,0.15);
}
.ctc-field-msg {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: #D74100;
    font-weight: 600;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Submit row */
#ctc-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.25rem;
}
#ctc-req-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
}
#ctc-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* ── INFO COLUMN ────────────────────────────────────────────── */
#contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ctc-info-block {
    background: #fff;
    border: 1px solid #e0ddd8;
    border-radius: 8px;
    overflow: hidden;
}

.ctc-info-hd {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    color: #fff;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(90,90,90,0.55) 0%, transparent 50%),
        linear-gradient(160deg, #0d0d0d 0%, #222222 35%, #111111 65%, #1c1c1c 100%);
    padding: 0.75rem 1.1rem;
    border-left: 4px solid #D74100;
}
.ctc-info-hd i { color: #D74100; font-size: 1rem; }

.ctc-info-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
    padding: 1rem 1.1rem;
    margin: 0;
}
.ctc-info-body a { color: #D74100; font-weight: 600; text-decoration: none; }
.ctc-info-body a:hover { text-decoration: underline; }

/* Info list (address / phone / email) */
.ctc-info-list {
    list-style: none;
    padding: 0.75rem 1.1rem 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ctc-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
}
.ctc-info-list li i {
    color: #D74100;
    font-size: 0.95rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 1em;
    text-align: center;
}
.ctc-info-list li a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
}
.ctc-info-list li a:hover { color: #D74100; text-decoration: underline; }
.ctc-sub {
    display: block;
    font-size: 0.78rem;
    color: #999;
    font-style: italic;
}

/* Hours sub-headers & divider */
.ctc-hours-sub-hd {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    padding: 0.7rem 1.1rem 0.1rem;
    margin: 0;
}
.ctc-hours-sub-hd i { color: #D74100; font-size: 0.85rem; }
.ctc-hours-divider {
    border: none;
    border-top: 1px solid #ede9e3;
    width: 90%;
    margin: 0.2rem auto 0;
}

/* Hours list */
.ctc-hours-list {
    list-style: none;
    padding: 0.75rem 1.1rem 0.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ctc-hours-list li {
    display: flex;
    justify-content: space-between;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    color: #333;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #f0ede8;
}
.ctc-hours-list li:last-child { border-bottom: none; }
.ctc-hours-list li span:first-child { font-weight: 600; color: #1a1a1a; }
.ctc-closed { color: #aaa !important; font-style: italic; }

.ctc-hours-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: #aaa;
    font-style: italic;
    padding: 0 1.1rem 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Social block */
.ctc-social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem 1rem;
}
.ctc-social-links a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}
.ctc-social-links a:hover { color: #D74100; }
.ctc-social-links a i { font-size: 1.2rem; color: #D74100; width: 1.2em; text-align: center; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    #contact-wrap {
        grid-template-columns: 1fr;
        width: 94%;
        gap: 1.5rem;
    }
    #contact-info-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}
@media (max-width: 560px) {
    .ctc-row { grid-template-columns: 1fr; }
    #contact-info-col { grid-template-columns: 1fr; }
    #ctc-submit-row { flex-direction: column; align-items: flex-start; }
    #top_bnnr { font-size: clamp(1.4rem, 7vw, 2rem); min-height: 16vh; line-height: 1.1; }
}