/* Contact page styles scoped to #contact-main */

#contact-main {
    display: block;
}

#contact-main .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    #contact-main .container {
        padding-inline: var(--container-padding-tablet);
    }
}

@media (min-width: 1024px) {
    #contact-main .container {
        padding-inline: var(--container-padding-desktop);
    }
}

/* Contact Hero */
.contact-hero {
    padding-block: var(--space-48) var(--space-32);
    background-color: var(--color-ink);
}

.contact-hero__inner {
    max-width: 800px;
    margin-inline: auto;
    text-align: left;
}

.contact-hero h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-letter-spacing);
    font-weight: 500;
    color: var(--color-bone);
    margin-block-end: var(--space-24);
    position: relative;
    padding-block-end: var(--space-16);
}

.contact-hero h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background-color: rgba(198, 161, 91, 0.5);
    margin-block-start: var(--space-16);
}

.contact-hero__lead {
    max-width: 55ch;
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
    color: var(--color-bone-muted);
    margin-block-end: 0;
}

@media (min-width: 768px) {
    .contact-hero {
        padding-block: var(--space-64) var(--space-48);
    }
}

@media (min-width: 1024px) {
    .contact-hero {
        padding-block: var(--space-96) var(--space-64);
    }
}

/* Address and Map */
.contact-location {
    padding-block: var(--space-48);
    background-color: var(--color-ink);
}

.contact-location h2 {
    margin-block-end: var(--space-32);
}

.contact-location__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
}

.contact-location__address {
    min-width: 0;
}

.contact-location__address-text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-bone);
    margin-block-end: var(--space-24);
}

.contact-location__address-line {
    display: block;
    margin-block-start: var(--space-8);
}

.contact-location__postcode {
    color: var(--color-brass);
    font-weight: 600;
}

.contact-location__directions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-brass);
    text-decoration: underline;
    text-decoration-color: var(--color-brass);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-family: var(--font-body);
    font-size: var(--text-button-size);
    line-height: var(--text-button-line-height);
    letter-spacing: var(--text-button-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
    min-height: 44px;
}

.contact-location__directions:hover {
    color: var(--color-bone);
    text-decoration-color: var(--color-brass-deep);
}

.contact-location__map-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: var(--color-charcoal-soft);
    border: 1px solid var(--color-wood);
    border-radius: var(--radius-card);
    aspect-ratio: 3 / 2;
    min-height: 240px;
}

.contact-location__map {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 768px) {
    .contact-location {
        padding-block: var(--space-64);
    }

    .contact-location__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-48);
        align-items: start;
    }

    .contact-location__map-wrapper {
        aspect-ratio: auto;
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .contact-location {
        padding-block: var(--space-96);
    }
}

/* Contact Methods */
.contact-methods {
    padding-block: var(--space-48);
    background-color: var(--color-ink);
}

.contact-methods h2 {
    margin-block-end: var(--space-32);
}

.contact-methods__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
}

.contact-method-card {
    background-color: var(--color-charcoal);
    border: var(--border-wood-40);
    border-radius: var(--radius-card);
    padding: var(--space-24);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    min-width: 0;
}

.contact-method-card:hover {
    background-color: var(--color-charcoal-soft);
    border-color: var(--color-brass);
}

.contact-method-card__icon {
    color: var(--color-brass);
    margin-block-end: var(--space-16);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.contact-method-card h3 {
    margin-block-end: var(--space-12);
}

.contact-method-card p {
    max-width: 45ch;
    color: var(--color-bone-muted);
    margin-block-end: 0;
}

.contact-method-card__link {
    color: var(--color-brass);
    text-decoration: underline;
    text-decoration-color: var(--color-brass);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.contact-method-card__link:hover {
    color: var(--color-bone);
    text-decoration-color: var(--color-brass-deep);
}

@media (min-width: 768px) {
    .contact-methods {
        padding-block: var(--space-64);
    }

    .contact-methods__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-24);
    }
}

@media (min-width: 1024px) {
    .contact-methods {
        padding-block: var(--space-96);
    }
}

/* Opening Hours and Visit Information */
.contact-hours {
    padding-block: var(--space-48);
    background-color: var(--color-ink);
    border-top: 1px solid rgba(198, 161, 91, 0.3);
}

.contact-hours h2 {
    margin-block-end: var(--space-32);
}

.contact-hours__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
}

.contact-hours__block,
.contact-hours__tips {
    min-width: 0;
}

.contact-hours__block h3,
.contact-hours__tips h3 {
    margin-block-end: var(--space-16);
}

.contact-hours__block p,
.contact-hours__tips p {
    max-width: 55ch;
    color: var(--color-bone-muted);
    margin-block-end: var(--space-16);
}

.contact-hours__list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    max-width: 40ch;
}

.contact-hours__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-16);
    padding-block: var(--space-8);
    border-bottom: 1px solid rgba(107, 74, 47, 0.3);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
}

.contact-hours__day {
    color: var(--color-bone);
    flex-shrink: 0;
}

.contact-hours__time {
    color: var(--color-brass);
    font-weight: 600;
    text-align: right;
}

.contact-hours__tips-list {
    list-style: disc;
    padding-inline-start: var(--space-24);
    margin-block-end: 0;
    max-width: 55ch;
    color: var(--color-bone-muted);
}

.contact-hours__tips-list li {
    margin-block-end: var(--space-8);
}

.contact-hours__tips-list li:last-child {
    margin-block-end: 0;
}

@media (min-width: 768px) {
    .contact-hours {
        padding-block: var(--space-64);
    }

    .contact-hours__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-48);
    }
}

@media (min-width: 1024px) {
    .contact-hours {
        padding-block: var(--space-96);
    }
}

/* Inquiry Form */
.contact-form-section {
    padding-block: var(--space-48);
    background-color: var(--color-ink);
}

.contact-form-section__inner {
    max-width: 600px;
    margin-inline: auto;
    text-align: left;
}

.contact-form-section h2 {
    margin-block-end: var(--space-16);
}

.contact-form-section__intro {
    color: var(--color-bone-muted);
    margin-block-end: var(--space-32);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.contact-form__field label {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
    color: var(--color-bone);
    margin-block-end: 0;
}

.contact-form__field input,
.contact-form__field textarea {
    background-color: var(--color-charcoal-soft);
    border: 1px solid var(--color-wood);
    border-radius: var(--radius-input);
    color: var(--color-bone);
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
    padding: var(--space-12) var(--space-16);
    width: 100%;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--color-brass);
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.contact-form__field input[aria-invalid="true"],
.contact-form__field textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}

.contact-form__optional {
    color: var(--color-bone-muted);
    font-weight: 400;
}

.contact-form__error {
    color: var(--color-error);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
    margin-block-start: var(--space-4);
    margin-block-end: 0;
}

.contact-form__submit {
    align-self: flex-start;
    margin-block-start: var(--space-8);
}

@media (min-width: 768px) {
    .contact-form-section {
        padding-block: var(--space-64);
    }
}

@media (min-width: 1024px) {
    .contact-form-section {
        padding-block: var(--space-96);
    }
}

/* Event and Reservation CTA */
.contact-cta {
    padding-block: var(--space-48);
    background-color: var(--color-burgundy);
}

.contact-cta__inner {
    max-width: 800px;
    margin-inline: auto;
    text-align: left;
}

.contact-cta h2 {
    color: var(--color-bone);
    margin-block-end: var(--space-16);
}

.contact-cta p {
    max-width: 55ch;
    color: var(--color-bone);
    margin-block-end: var(--space-32);
}

.contact-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    align-items: center;
}

.contact-cta__actions .btn {
    min-width: 0;
    flex-shrink: 1;
}

@media (min-width: 768px) {
    .contact-cta {
        padding-block: var(--space-64);
    }
}

@media (min-width: 1024px) {
    .contact-cta {
        padding-block: var(--space-96);
    }
}

@media (max-width: 390px) {
    .contact-hero h1 {
        font-size: 2.125rem;
        line-height: 1.1;
    }

    .contact-location__map-wrapper {
        min-height: 240px;
    }

    .contact-hours__list li {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .contact-hours__time {
        text-align: left;
    }

    .contact-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-cta__actions .btn {
        width: 100%;
        justify-content: center;
    }
}