/* ================================================================
   LeafyLoom — Contact Us Page
   Loaded only on /contact/ via functions.php (ll_contact_page_assets)
   Form field styles (inputs, labels, submit, messages) come from
   ll-forms.css which is loaded sitewide.
   ================================================================ */

/* ── Scope reset ───────────────────────────────────────────────── */
#ll-contact-page {
    font-family: var(--ll-font-sans);
    color: var(--ll-forest);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

#main-content > #ll-contact-page {
    margin: 0;
    padding: 0;
}

/* ── Inner container (matches about page) ──────────────────────── */
.ll-ct-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* ── Eyebrow chip ──────────────────────────────────────────────── */
.ll-ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 20px;
    color: rgba(168, 213, 176, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
}

/* ================================================================
   1. HERO
   ================================================================ */
.ll-ct-hero {
    background: var(--ll-forest);
    padding: 130px 40px 96px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ll-ct-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.ll-ct-hero::after {
    content: '';
    position: absolute;
    width: 700px;
    height: 500px;
    left: 50%;
    top: -150px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 156, 75, 0.2) 0%, transparent 65%);
    pointer-events: none;
}

.ll-ct-hero__eyebrow-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ll-ct-hero__title {
    font-family: var(--ll-font-sans);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #f5f0e8;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
    position: relative;
    z-index: 1;
}

.ll-ct-hero__title em {
    font-style: italic;
    font-family: var(--ll-font-display);
    font-weight: 300;
    color: #7dc98a;
}

.ll-ct-hero__sub {
    font-size: 1.05rem;
    color: rgba(245, 240, 232, 0.68);
    line-height: 1.8;
    max-width: 540px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ================================================================
   2. CONTACT SECTION — info left | form right
   ================================================================ */
.ll-ct-section {
    background: var(--ll-bg);
    padding: 96px 40px 104px;
}

.ll-ct-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 72px;
    align-items: start;
}

/* ── Left: Info column ─────────────────────────────────────────── */
.ll-ct-info__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ll-moss);
    margin: 0 0 10px;
}

.ll-ct-info__heading {
    font-family: var(--ll-font-display);
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-weight: 300;
    color: var(--ll-forest);
    line-height: 1.3;
    margin: 0 0 36px;
    letter-spacing: -0.01em;
}

.ll-ct-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ll-ct-info__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(26, 46, 26, 0.08);
}

.ll-ct-info__item:first-child {
    padding-top: 0;
}

.ll-ct-info__item:last-child {
    border-bottom: none;
}

.ll-ct-info-icon {
    width: 38px;
    height: 38px;
    background: rgba(0, 156, 75, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ll-ct-info-icon .material-icons-round {
    color: var(--ll-moss);
    font-size: 18px !important;
}

.ll-ct-info__text {
    flex: 1;
}

.ll-ct-info__text strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ll-forest);
    margin-bottom: 3px;
}

.ll-ct-info__text span,
.ll-ct-info__text a {
    font-size: 0.92rem;
    color: var(--ll-ash);
    line-height: 1.55;
    text-decoration: none;
}

.ll-ct-info__text a:hover {
    color: var(--ll-moss);
}

/* ── Right: Form column ────────────────────────────────────────── */
.ll-ct-form-card {
    background: #fff;
    border: 1px solid rgba(26, 46, 26, 0.08);
    border-radius: 20px;
    padding: 40px 40px 44px;
    position: relative;
    overflow: hidden;
}

/* Green top-bar accent (matches booking + value cards) */
.ll-ct-form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ll-moss) 0%, #6fcf97 100%);
}

.ll-ct-form-card__title {
    font-family: var(--ll-font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ll-forest);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.ll-ct-form-card__sub {
    font-size: 0.88rem;
    color: var(--ll-ash);
    margin: 0 0 28px;
    line-height: 1.55;
}

/* Two-column row inside form (Name | Email) */
.ll-ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Stack form fields with consistent gap */
.ll-ct-form-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Optional label suffix */
.ll-ct-optional {
    font-size: 0.75em;
    font-weight: 400;
    color: var(--ll-mist);
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

/* Override submit button to show send icon inline */
#ll-contact-form .ll-submit-btn {
    margin-top: 8px;
    gap: 10px;
}

#ll-contact-form .ll-submit-btn .material-icons-round {
    font-size: 18px !important;
    transition: transform 0.2s ease;
}

#ll-contact-form .ll-submit-btn:hover .material-icons-round {
    transform: translateX(3px);
}

#ll-contact-form .ll-submit-btn.loading .material-icons-round {
    display: none;
}

/* Status message (reuses ll-forms.css .ll-form-message base) */
#ll-contact-msg {
    margin-top: 0;
    margin-bottom: 2px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
    .ll-ct-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .ll-ct-info__heading { margin-bottom: 24px; }
}

@media (max-width: 640px) {
    .ll-ct-hero    { padding: 108px 20px 72px; }
    .ll-ct-section { padding: 64px 20px 72px; }
    .ll-ct-inner   { padding: 0 20px; }

    .ll-ct-form-card { padding: 28px 22px 32px; }

    .ll-ct-form-row { grid-template-columns: 1fr; }
}