/* Contact page enhancements - Literary Tech Theme */

/* Utilities from template inline css converted */
.form-errors { margin-top: 5px; }
.error-text { color: #c45c5c; font-size: 0.875em; display: block; margin-top: 2px; }

/* Inputs */
.form-control { 
    width: 100%; 
    padding: 12px 14px; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    font-size: 16px; 
    background: var(--bg-primary); 
    transition: box-shadow .2s ease, border-color .2s ease; 
    font-family: var(--font-sans);
}
.form-control:focus { 
    border-color: var(--accent-terracotta); 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(204, 104, 72, 0.12); 
}

/* Social icons */
.social-connect { margin-top: 2rem; }
.social-connect h3 { margin-bottom: .75rem; font-family: var(--font-serif); }
.social-icons { display: flex; gap: .75rem; flex-wrap: wrap; }
.social-icons .icon { 
    width: 44px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    background: var(--bg-secondary); 
    color: var(--text-color); 
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; 
    line-height: 0; 
    font-size: 0; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid var(--border-color);
}
.social-icons .icon i { 
    font-size: 18px; 
    line-height: 1; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    text-align: center;
}
.social-icons .icon:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); color: #fff; }
.social-icons .icon.linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.social-icons .icon.facebook:hover { background: #1877f2; border-color: #1877f2; }
.social-icons .icon.twitter:hover { background: #1da1f2; border-color: #1da1f2; }
.social-icons .icon.instagram:hover { background: #E1306C; border-color: #E1306C; }
.social-icons .icon.youtube:hover { background: #ff0000; border-color: #ff0000; }

/* Left panel: contact methods */
.contact-info .contact-method { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 1rem; padding: .85rem 0; }
.contact-info .contact-method + .contact-method { border-top: 1px solid var(--border-color); }
.contact-info .method-icon { 
    position: relative; 
    width: 48px; 
    height: 48px; 
    border-radius: 8px; 
    background: var(--accent-sage); 
    color: var(--text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    transition: all .2s ease; 
    line-height: 0; 
    font-size: 0; 
    overflow: hidden; 
}
.contact-info .method-icon i { font-size: 20px; line-height: 1; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Normalize FA icon baseline inside circles */
.contact-info .method-icon .fa, .contact-info .method-icon .fab, .contact-info .method-icon .fas,
.social-icons .icon .fa, .social-icons .icon .fab, .social-icons .icon .fas { line-height: 1; vertical-align: middle; }
.contact-info .contact-method:hover .method-icon { background: var(--accent-terracotta); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(204, 104, 72, 0.25); }
.contact-info .method-details h3 { margin: 0; font-size: 1rem; color: var(--text-color); font-family: var(--font-serif); }
.contact-info .method-details p { margin: .25rem 0 0; color: var(--muted-text); }
.contact-info .method-details a { color: var(--muted-text); text-decoration: none; word-break: break-word; overflow-wrap: anywhere; }
.contact-info .method-details a:hover { color: var(--accent-terracotta); text-decoration: underline; }

/* Chips for services */
.service-chips { display: flex; gap: .5rem; margin: .5rem 0 0.75rem; flex-wrap: wrap; }
.service-chips .chip { 
    border: 1px solid var(--border-color); 
    background: var(--bg-secondary); 
    color: var(--text-color); 
    padding: .5rem .85rem; 
    border-radius: 6px; 
    font-size: .9rem; 
    display: inline-flex; 
    align-items: center; 
    gap: .4rem; 
    cursor: pointer; 
    transition: all .2s ease; 
    font-family: var(--font-sans);
}
.service-chips .chip:hover { 
    background: var(--accent-sage); 
    border-color: var(--accent-sage); 
    color: var(--text-color); 
    transform: translateY(-1px); 
}
.service-chips .chip.active { 
    background: var(--accent-terracotta); 
    color: #fff; 
    border-color: var(--accent-terracotta); 
    box-shadow: 0 8px 18px rgba(204, 104, 72, 0.25); 
}

/* Select wrapper to match input styling */
.select-wrapper select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }

/* Form container tweaks */
.contact-form-container h2 { margin-bottom: 1rem; font-family: var(--font-serif); }
.contact-form .form-group { margin-bottom: 1rem; }
.contact-form .form-submit { margin-top: .5rem; }

/* AOS helpful defaults */
[data-aos] { will-change: transform, opacity; }