/* Contact Page */

.contact .article-title {
     margin-bottom: 24px;
}

.contact-hero {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
     margin-bottom: 18px;
}

.contact-hero-copy {
     border: 1px solid var(--jet);
     border-radius: var(--radius-lg);
     padding: 16px;
     background: var(--onyx);
}

.contact-hero-copy .h3 {
     margin-bottom: 10px;
}

.contact-hero-copy p {
     color: var(--light-gray);
     line-height: 1.75;
}

.contact-highlights {
     margin-top: 14px;
     display: grid;
     gap: 8px;
}

.contact-highlights li {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--light-gray);
     font-size: var(--fs-7);
}

.contact-highlights ion-icon {
     color: var(--orange-yellow-crayola);
     font-size: 16px;
}

.contact-hero-cards {
     display: grid;
     grid-template-columns: 1fr;
     gap: 10px;
}

.contact-hero-cards article {
     display: block;
     border: 1px solid var(--jet);
     border-radius: var(--radius-md);
     padding: 14px;
     background: var(--eerie-black-2);
}

.contact-hero-cards h4 {
     color: var(--white-2);
     margin-bottom: 6px;
     font-size: var(--fs-6);
}

.contact-hero-cards :is(a, p) {
     color: var(--light-gray);
     font-size: var(--fs-7);
     line-height: 1.6;
}

.contact-hero-cards a:hover {
     color: var(--orange-yellow-crayola);
}

.contact-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
}

.mapbox {
     position: relative;
     min-height: 300px;
     width: 100%;
     border-radius: var(--radius-lg);
     border: 1px solid var(--jet);
     overflow: hidden;
}

.mapbox figure {
     height: 100%;
}

.mapbox iframe {
     width: 100%;
     height: 100%;
     border: none;
     filter: grayscale(0.9) contrast(1.1);
}

html[data-theme="light"] .mapbox iframe {
     filter: grayscale(0.25) contrast(1.06);
}

.map-overlay {
     position: absolute;
     bottom: 16px;
     left: 16px;
}

.map-info {
     background: hsla(223, 34%, 12%, 0.84);
     padding: 10px 14px;
     border-radius: 999px;
     border: 1px solid hsla(42, 96%, 62%, 0.36);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--white-2);
     font-size: var(--fs-7);
}

html[data-theme="light"] .map-info {
     background: hsla(0, 0%, 100%, 0.92);
}

.map-info ion-icon {
     color: var(--orange-yellow-crayola);
     font-size: 16px;
}

.contact-form {
     border: 1px solid var(--jet);
     border-radius: var(--radius-lg);
     padding: 16px;
     background: var(--eerie-black-2);
}

.form-title {
     margin-bottom: 8px;
}

.form-note {
     color: var(--light-gray-70);
     font-size: var(--fs-7);
     margin-bottom: 16px;
     line-height: 1.6;
}

.form-status:empty {
     display: none;
}

.form-group {
     margin-bottom: 14px;
}

.form-group label {
     display: block;
     margin-bottom: 6px;
     color: var(--light-gray-70);
     font-size: var(--fs-8);
}

.input-wrapper {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
}

.form-input {
     color: var(--white-2);
     font-size: var(--fs-6);
     padding: 12px 14px;
     border: 1px solid var(--jet);
     border-radius: 12px;
     outline: none;
     background: var(--onyx);
     transition: border-color var(--transition-1), box-shadow var(--transition-1);
}

.form-input::placeholder {
     color: var(--light-gray-70);
}

.form-input:focus {
     border-color: var(--orange-yellow-crayola);
     box-shadow: 0 0 0 3px hsla(42, 96%, 62%, 0.15);
}

textarea.form-input {
     min-height: 140px;
     resize: vertical;
}

.form-honeypot {
     display: none;
}

.form-btn {
     width: 100%;
     border-radius: 14px;
     background: linear-gradient(130deg, var(--orange-yellow-crayola), var(--accent-cyan));
     color: hsl(223, 42%, 8%);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 14px 18px;
     font-size: var(--fs-6);
     font-weight: var(--fw-700);
     transition: transform var(--transition-1), filter var(--transition-1);
}

.form-btn:hover {
     transform: translateY(-2px);
     filter: brightness(1.04);
}

.form-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     transform: none;
}

.success-message,
.error-message {
     padding: 12px;
     border-radius: 12px;
     margin-bottom: 14px;
     font-size: var(--fs-7);
}

.success-message {
     background: hsla(142, 75%, 34%, 0.18);
     color: hsl(140, 68%, 72%);
     border: 1px solid hsla(140, 68%, 50%, 0.4);
}

.error-message {
     background: hsla(4, 78%, 44%, 0.16);
     color: hsl(1, 80%, 72%);
     border: 1px solid hsla(4, 78%, 54%, 0.34);
}

@media (min-width: 768px) {
     .contact-hero {
          grid-template-columns: 1.15fr 1fr;
     }

     .contact-hero-cards {
          grid-template-columns: 1fr;
     }

     .contact-grid {
          grid-template-columns: 1fr 1fr;
          align-items: stretch;
     }

     .mapbox {
          min-height: 100%;
     }

     .input-wrapper {
          grid-template-columns: 1fr 1fr;
     }
}

@media (min-width: 1100px) {
     .contact-form,
     .contact-hero-copy {
          padding: 20px;
     }
}