/* Contact Page Styles - Mobile First Refactor */

/* Wrapper */
.contact-page-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* Base Styles (Mobile Default) */
.contact-container {
    width: 100%;
    margin: 0 auto;
    padding: 64px 16px 24px;
    /* Mobile Padding */
    box-sizing: border-box;
}

/* Breadcrumbs */
.breadcrumbs {
    font-family: 'Loew', sans-serif;
    font-size: 10px;
    /* Mobile font size */
    letter-spacing: 0.1em;
    color: var(--color-charcoal);
    text-transform: uppercase;
    margin-bottom: 20px;
    /* Mobile margin */
    font-weight: 400;
}

.breadcrumbs a {
    color: var(--color-charcoal);
    text-decoration: none;
}

/* Header */
.contact-header {
    margin-bottom: 80px;
    /* Mobile margin */
}

.contact-header h1 {
    font-size: 48px;
    /* Mobile font size */
    line-height: 90%;
    font-family: "loew-variable", sans-serif;
    color: var(--color-charcoal);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0;
    font-stretch: 10%;
    margin: 0;
}

/* Main Layout */
.contact-main {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: Single Column */
    gap: 48px;
    /* Mobile gap */
    align-items: start;
}

/* Info Section */
.contact-info {
    padding-right: 0;
    /* Mobile padding */
}

.contact-info h2 {
    font-size: 32px;
    /* User set 26px base */
    font-weight: 700;
    line-height: 100%;
    font-family: "loew-variable", sans-serif;
    font-stretch: 10%;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--color-charcoal);
}

.contact-desc {
    font-size: 16px;
    line-height: 1.1;
    color: var(--color-charcoal);
    margin-bottom: 48px;
}

.contact-contact-details-item-sp {
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-charcoal);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 48px;
    /* Mobile gap */
}

.contact-grid-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 18px;
    color: var(--color-charcoal);
}

.contact-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.contact-link,
.contact-text {
    font-size: 16px;
    color: var(--color-charcoal);
    text-decoration: none;
    margin-left: 0;
}

.contact-link:hover {
    text-decoration: underline;
}

/* Form Section */
.contact-form-wrapper {
    width: 100%;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.label-text {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-charcoal);
    line-height: 1.1;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 24px;
    /* Mobile padding */
    border: 1px solid var(--color-charcoal);
    border-radius: 8px;
    font-size: 16px;
    /* Mobile font size */
    font-family: Arial, Helvetica, sans-serif;
    /* Mobile font family override */
    font-weight: 400;
    /* Mobile weight */
    line-height: 1.1;
    /* Mobile line height */
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #aaa;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #000;
}

.form-disclaimer {
    font-size: 12px;
    color: var(--color-charcoal);
    margin-top: 10px;
    margin-bottom: 12px;
    line-height: 1.1;
}

.submit-btn {
    background-color: var(--color-fluoro);
    color: var(--color-charcoal);
    border: 1px solid var(--color-charcoal);
    padding: 22px 32px;
    font-size: 16px;
    letter-spacing: -0.48px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
    align-self: flex-start;
    transition: color 300ms ease, border-color 300ms ease, transform 200ms ease, box-shadow 200ms ease;
    font-family: Arial, Helvetica, sans-serif;

    /* Mobile styles */
    width: 100%;
    text-align: center;

    /* Fancy Hover Setup */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.submit-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--color-charcoal);
    transition: height 300ms ease;
    z-index: -1;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: var(--color-fluoro);
    border-color: var(--color-charcoal);
}

.submit-btn:hover::after {
    height: 100%;
}


/* =========================================
   MEDIA QUERIES (Desktop Overrides)
   ========================================= */

/* Tablet / Intermediate */
@media (min-width: 481px) {
    .contact-container {
        padding: 90px 20px 40px;
    }

    .contact-header {
        margin-bottom: 60px;
    }

    .contact-header h1 {
        font-size: 32px;
    }

    .breadcrumbs {
        font-size: 12px;
        margin-bottom: 30px;
    }

    .contact-main {
        gap: 50px;
    }

    .contact-details {
        gap: 30px;
    }

    /* Reset form inputs to desktop-ish style or keep mobile? 
       Previous desktop had padding: 15px. Mobile has 16px 24px.
       Let's stick to mobile styles unless specifically overridden in previous 768 block, which it wasn't.
       But standard desktop was 15px. Let's apply 15px here to match original desktop behavior which applies to > 480 effectively. */
    .contact-form input,
    .contact-form textarea {
        padding: 15px;
        font-family: inherit;
        /* Reset to inherited font */
    }

    .submit-btn {
        width: auto;
        text-align: left;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .contact-container {
        padding: 80px;
        max-width: 1440px;
    }

    .contact-main {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }

    .contact-info {
        padding-right: 20px;
    }

    .contact-header h1 {
        font-size: 40px;
    }
}


/* Navbar Overrides for Contact Page using Wrapper */
.contact-navbar-wrapper .navbar {
    /* Allow natural flow so it sits below top bar */
}

.contact-navbar-wrapper .navbar .navbar-logo.white {
    opacity: 0 !important;
}

.contact-navbar-wrapper .navbar .navbar-logo.black {
    opacity: 1 !important;
}

.contact-navbar-wrapper .navbar .navbar-link {
    color: #000000 !important;
}

.contact-navbar-wrapper .navbar .navbar-menu-icon {
    filter: invert(1);
}

.contact-navbar-wrapper .navbar .navbar-mobile-toggle {
    color: #000000 !important;
}

/* Dropdown override adjustment */
.contact-navbar-wrapper .navbar .navbar-dropdown {
    z-index: 29;
}

@media screen and (min-width: 1440px) {
    .breadcrumbs {
        font-size: 12px;
        margin-bottom: 24px;
    }

    .contact-header h1 {
        font-size: 96px;
        max-width: 974px;
    }

    .contact-header {
        margin-bottom: 80px;
    }

    .contact-details {
        gap: 48px;
    }

    .form-group {
        gap: 4px;
    }

    .contact-container {
        max-width: 1568px;
    }

    .form-disclaimer {
        font-size: 16px;
    }

    .submit-btn {
        font-size: 18px;
    }
}