/* 
  Component:    .contact-section
  Page:         Site.master.aspx
  DOM Path:     wrapper > .container > .contact-section
  Purpose:      Creates a fixed-position footer bar for contact information; spans full width at bottom of viewport with dark background, white text, and horizontal padding. Uses flex layout to vertically center content and maintain visibility above other elements.
*/
.contact-section {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1e4a7b;
    color: white;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 1rem;
    height: 3em; /* 3x the font size */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center;
    padding: 0 2rem;
    z-index: 1000; /* Keeps it above other content */
}

    /* 
  Component:    .contact-section h2, .contact-section p
  Page:         Site.master.aspx
  DOM Path:     wrapper > .container > .contact-section > h2 / p
  Purpose:      Removes default margins and ensures consistent white text color for headings and paragraphs within the contact footer; maintains visual alignment and readability against dark background
*/
.contact-section h2,
.contact-section p {
    margin: 0;
    color: #ffffff;
}

/* 
  Component:    .contact-section h2
  Page:         Site.master.aspx
  DOM Path:     wrapper > .container > .contact-section > h2
  Purpose:      Styles the contact heading with increased font size and semi-bold weight for emphasis; adds bottom margin to separate it from following content
*/
.contact-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

    /* 
      Component:    .contact-section p
      Page:         Site.master.aspx
      DOM Path:     wrapper > .container > .contact-section > > p
      Purpose:      Styles paragraph text within the contact footer with slightly increased font size and generous padding for readability and spacing; ensures height adapts to content
    */
    .contact-section p {
        font-size: 1.1rem;
        height: auto;
        padding: 12px 20px;
    }

/* 
  Component:    .phone, .email
  Page:         Site.master.aspx
  DOM Path:     .wrapper > .container > .contact-section > .contact-row > .connect-label > .phone / .email
  Purpose:      Sets consistent font size for phone and email contact elements; ensures readability and visual alignment within the fixed contact footer
*/
.phone, .email {
    font-size: 1rem;
    width: auto;
}

    /* 
      Component:    .email a
      Page:         Site.master.aspx
      DOM Path:     .wrapper > .container > .contact-section > .contact-row > .connect-label > .email > a
      Purpose:      Styles the email link with white text and removes underline for cleaner appearance; ensures visual consistency with surrounding contact info in the footer
    */
    .email a {
        color: #ffffff;
        text-decoration: none;
    }

/* 
  Component:    .contact-row
  Page:         Site.master.aspx
  DOM Path:     .wrapper > .container > .contact-section > .contact-row
  Purpose:      Arranges contact elements in a horizontal row using flexbox; vertically centers items, adds spacing between them, and prevents line wrapping to maintain a single-line layout in the fixed footer
*/
.contact-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 25px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    max-width: 100%;
}

    .contact-row span {
        flex: 1 1 auto;
        min-width: 120px;
        text-align: center;
        word-break: break-word;
    }




    /* 
      Component:    .contact-row i
      Page:         Site.master.aspx
      DOM Path:     .wrapper > .container > .contact-section > .contact-row > i
      Purpose:      Styles icons (e.g., phone, envelope) with white color to match footer text; adds right margin for spacing between icon and label
    */
    .contact-row i {
        margin-right: 6px;
        color: white;
    }

    /* 
      Component:    .contact-row a
      Page:         Site.master.aspx
      DOM Path:     .wrapper > .container > .contact-section > .contact-row > a
      Purpose:      Styles anchor links within the contact footer with white text and no underline; ensures visual consistency with surrounding contact info and maintains clean, readable presentation
    */
    .contact-row a {
        color: white;
        text-decoration: none;
        word-break: break-word;
        overflow-wrap: break-word;

    }

/* 
  Component:    .connect-label
  Page:         Site.master.aspx
  DOM Path:     .wrapper > .container > .contact-section > .contact-row > .connect-label
  Purpose:      Styles the "Connect With Us" label with semi-bold weight, standard font size, and slight letter spacing for emphasis and readability within the contact footer
*/
.connect-label {
    flex-basis: auto;
    text-align: center;
    font-weight: bold;
}

/*@media (max-width: 430px) {
    .contact-row {
        flex-direction: column;
        align-items: center;
    }

        .contact-row span {
            width: 100%;
            margin-bottom: 8px;
        }
}*/