/* =============================================================================
   CONTACT US PAGE — #contactUsDefault

   Real DOM structure (per rendered HTML):

   .centerColumn#contactUsDefault
     > <form name="contact_us">
         > <header><h1 #contactus-heading>Contact Us</h1></header>
         > .contact-box
           > .content                              ← block 1: address info
             > .row.address-content
               > .col-* .store-address             ← left: mailing/phone
               > .static-content.col-*             ← right: have a question
           > .content                              ← block 2: form
             > .row.sender-name-email
               > .col-* .sender-name
               > .col-* .sender-email
             > .row.message-detail
               > .col-* .contactus-message
                 > <label> + <textarea>
                 > .recaptcha-details              ← nested inside message
                   > <label> + .g-recaptcha
             > .row.contactus-sendbutton
               > .col-*
                 > .alert-text.forward             ← "* Required information"
                 > <input type="submit">

   .row uses Bootstrap flex layout. .col-lg-6 etc. set flex-basis widths.
   We work WITH Bootstrap's grid rather than against it.

   Strategy: Instead of trying to defeat Bootstrap's row/col flex, we let
   them lay out the columns and apply card chrome to the .content blocks
   (which are the actual logical groupings). One card per .content block.
   ============================================================================= */

/* ---- Hide the H1 title — page-image hero + breadcrumb already establish the page ---- */
#contactUsDefault > form > header,
#contactUsDefault #contactus-heading {
    display: none;
}

/* ---- Wrapper / outer reset ---- */
#contactUsDefault {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--primary-color, #15293f);
    font-family: inherit;
}

/* Kill the legacy gray .contact-box wrapper — we use card chrome instead */
#contactUsDefault .contact-box {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}


/* ---- Card chrome on each .content block ----
   Two .content blocks render: one wraps address-content, one wraps the
   form. Each becomes a card with our standard chrome. */
#contactUsDefault .contact-box > .content {
    background: #ffffff;
    border: 1px solid #e0ddd2;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin: 0 0 24px;
    padding: 0;
}

/* Synthetic header strip — first .content gets "Get in Touch",
   second gets "Send a Message". */
#contactUsDefault .contact-box > .content:nth-of-type(1)::before {
    content: "Get in Touch";
    display: block;
    padding: 14px 24px;
    background: #f5f5f0;
    border-bottom: 1px solid #e0ddd2;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    line-height: 1.3;
}

#contactUsDefault .contact-box > .content:nth-of-type(2)::before {
    content: "Send a Message";
    display: block;
    padding: 14px 24px;
    background: #f5f5f0;
    border-bottom: 1px solid #e0ddd2;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    line-height: 1.3;
}


/* ---- "Get in Touch" card body — the .address-content row ---- */
#contactUsDefault .address-content {
    margin: 0;  /* override Bootstrap's negative row margins */
}

#contactUsDefault .address-content > .store-address,
#contactUsDefault .address-content > .static-content {
    padding: 22px 28px;
    color: var(--primary-color);
    font-size: 14px;
    line-height: 1.6;
}

/* Subtle divider between the two columns on desktop */
@media (min-width: 768px) {
    #contactUsDefault .address-content > .static-content {
        border-left: 1px solid #ece9dc;
    }
}

/* Section headings */
#contactUsDefault .address-content h4 {
    margin: 0 0 12px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}

/* Mailing address content */
#contactUsDefault .store-address address {
    font-style: normal;
    line-height: 1.65;
    color: var(--primary-color);
    margin: 0 0 18px;
    font-size: 14px;
}

/* The Phone Number section gets its own h4 + h5 — h5 is "Toll Free: ..." */
#contactUsDefault .store-address h5 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--primary-color);
    text-transform: none;
    letter-spacing: 0;
}

#contactUsDefault .store-address h5 b {
    font-weight: 700;
}

/* Have a Question intro paragraph */
#contactUsDefault .static-content .g-button-wrapper {
    margin: 0 0 16px;
    color: var(--primary-color);
    font-size: 14px;
    line-height: 1.6;
}

/* General FAQ button — the legacy g-button markup styled as our standard
   filled action button. Uses !important on background/color/border to win
   any cascade fights with leftover legacy rules. */
#contactUsDefault .static-content .g-button {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    display: block;
}

#contactUsDefault .static-content .g-button > div,
#contactUsDefault .static-content .g-button > div > span,
#contactUsDefault .static-content .g-button > div > span > span {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: transparent;
    background-image: none;
    color: inherit;
    font-size: inherit;
    box-shadow: none;
    height: auto;
    max-width: none;
    line-height: 1;
}

#contactUsDefault .static-content .g-button a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    background: var(--smc-account, #15293f) !important;
    background-image: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1.5px solid var(--smc-account, #15293f) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.1s ease;
}

#contactUsDefault .static-content .g-button a:hover,
#contactUsDefault .static-content .g-button a:focus {
    background: var(--smc-action-hover, #007bff) !important;
    border-color: var(--smc-action-hover, #007bff) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#contactUsDefault .static-content .g-button a i {
    font-size: 14px;
    color: inherit;
    margin-right: 0;
}


/* ---- "Send a Message" card body — form fields ---- */

/* All three .row blocks (.sender-name-email, .message-detail, .contactus-sendbutton)
   are siblings inside the second .content. Reset Bootstrap negative margins. */
#contactUsDefault .sender-name-email,
#contactUsDefault .message-detail,
#contactUsDefault .contactus-sendbutton {
    margin: 0;
}

/* Each row gets generous padding around its columns */
#contactUsDefault .sender-name-email {
    padding: 22px 28px 0;
}

#contactUsDefault .sender-name-email > .sender-name,
#contactUsDefault .sender-name-email > .sender-email {
    padding: 0 12px;
    margin-bottom: 16px;
}

#contactUsDefault .message-detail {
    padding: 6px 28px 0;
}

#contactUsDefault .message-detail > .contactus-message {
    padding: 0 12px;
}

#contactUsDefault .contactus-sendbutton {
    padding: 18px 28px 22px;
}

#contactUsDefault .contactus-sendbutton > [class*="col-"] {
    padding: 0 12px;
    text-align: right;
}


/* ---- Form labels ---- */
#contactUsDefault label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}

/* Required asterisk — brand red instead of the default orangey tone */
#contactUsDefault .alertrequired {
    color: #c44d4d;
    margin-left: 4px;
    font-weight: 700;
}


/* ---- Form fields ---- */
#contactUsDefault input[type="text"],
#contactUsDefault input[type="email"],
#contactUsDefault input[type="tel"],
#contactUsDefault textarea {
    width: 100%;
    padding: 10px 12px;
    margin: 0;
    border: 1.5px solid #d4d2c8;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
    color: var(--primary-color);
    background: #ffffff;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#contactUsDefault input[type="text"]:focus,
#contactUsDefault input[type="email"]:focus,
#contactUsDefault input[type="tel"]:focus,
#contactUsDefault textarea:focus {
    border-color: var(--smc-action-hover, #007bff);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
    outline: none;
}

#contactUsDefault textarea {
    height: 160px;
    resize: vertical;
    min-height: 120px;
}


/* ---- Security check (nested inside .message-detail > .contactus-message) ---- */
#contactUsDefault .recaptcha-details {
    margin-top: 18px;
}

#contactUsDefault .recaptcha-details label {
    margin-bottom: 10px;
}

#contactUsDefault .recaptcha-details .g-recaptcha {
    margin: 4px 0 0;
}


/* ---- Required information notice (the .alert-text.forward div) ---- */
#contactUsDefault .contactus-sendbutton .alert-text {
    color: #c44d4d;
    font-size: 12px;
    font-style: italic;
    margin: 0 0 12px;
    text-align: right;
    background: transparent;  /* defeat any sitewide .alert/.alert-text painting */
    border: 0;
    padding: 0;
    display: block;
}


/* ---- Send Now button ---- */
#contactUsDefault .contactus-sendbutton input[type="submit"],
#contactUsDefault .contactus-sendbutton .submit_button,
#contactUsDefault .contactus-sendbutton .button_send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--smc-account, #15293f);
    color: #ffffff;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s ease, transform 0.1s ease;
    font-family: inherit;
    width: auto;
    margin: 0;
}

#contactUsDefault .contactus-sendbutton input[type="submit"]:hover,
#contactUsDefault .contactus-sendbutton .submit_button:hover {
    background: var(--smc-account-hover, #0c1a2b);
    transform: translateY(-1px);
}

#contactUsDefault .contactus-sendbutton input[type="submit"]:focus-visible,
#contactUsDefault .contactus-sendbutton .submit_button:focus-visible {
    outline: 2px solid var(--smc-action-hover, #007bff);
    outline-offset: 2px;
}


/* ---- Mobile refinements ---- */
@media (max-width: 768px) {
    #contactUsDefault {
        padding: 0 12px;
    }

    /* Card body padding tightens */
    #contactUsDefault .contact-box > .content::before {
        padding: 12px 18px;
        font-size: 14px;
    }
    #contactUsDefault .address-content > .store-address,
    #contactUsDefault .address-content > .static-content {
        padding: 18px 20px;
    }
    #contactUsDefault .address-content > .static-content {
        border-top: 1px solid #ece9dc;
    }

    #contactUsDefault .sender-name-email {
        padding: 18px 20px 0;
    }
    #contactUsDefault .sender-name-email > .sender-name,
    #contactUsDefault .sender-name-email > .sender-email {
        padding: 0 8px;
    }
    #contactUsDefault .message-detail {
        padding: 6px 20px 0;
    }
    #contactUsDefault .message-detail > .contactus-message {
        padding: 0 8px;
    }
    #contactUsDefault .contactus-sendbutton {
        padding: 16px 20px 20px;
    }
    #contactUsDefault .contactus-sendbutton > [class*="col-"] {
        padding: 0 8px;
        text-align: left;
    }
    #contactUsDefault .contactus-sendbutton input[type="submit"],
    #contactUsDefault .contactus-sendbutton .submit_button {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }
    #contactUsDefault .contactus-sendbutton .alert-text {
        text-align: left;
    }

    #contactUsDefault .static-content .g-button a {
        display: flex !important;
        justify-content: center;
        width: 100%;
    }
}