/* Global Style */
body {
    overflow-x: hidden;
}

    body .site-name-label {
        border-radius: 6px !important; /* Rounds the corners for a softer, modern look */
        color: #34495e !important; /* Sets text color to a deep slate blue for readability and brand tone */
        display: block !important; /* Forces the label to behave as a block element, stacking naturally */
        font-size: 1.5rem !important; /* Enlarges the font for visual prominence */
        font-weight: 500 !important; /* Applies medium-bold weight for emphasis without overpowering */
        margin: 20px auto !important; /* Adds vertical spacing and centers horizontally within parent */
        padding: 8px 16px !important; /* Adds internal spacing for breathing room around the text */
        position: relative; /* Enables positioning of child elements (e.g., badges or overlays) */
        text-align: center !important; /* Centers the text within the label */
        width: fit-content !important; /* Shrinks the label to match its content width, avoiding excess space */
        z-index: 10; /* Ensures the label appears above lower-stacked elements if overlapping */    
    }

.hidden {
    display: none;
}

/* 
  Component:    .btn-find
  Page:         sitelocations.aspx
  DOM Path:     site-page-wrapper > map-wrapper > map-controls > button id="find-closest" > .btn-find
  Purpose:      Styles the “Find Closest Location” button with compact padding and pointer cursor
*/
.btn-find {
    padding: 6px 12px;
    font-size: 0.9em;
    cursor: pointer;
}

    /* 
      Component:    .btn-find:hover
      Page:         sitelocations.aspx
      DOM Path:     site-page-wrapper > map-wrapper > map-controls > button id="find-closest" > .btn-find
      Purpose:      Adds hover feedback to the “Find Closest Location” button using a warm orange highlight
    */
    .btn-find:hover {
        background-color: #e68900;
    }
    
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 10;
}

.carousel-dots {
    text-align: center;
    margin-top: 10px;
}

    .carousel-dots .dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 5px;
        background-color: #bbb;
        border-radius: 50%;
        cursor: pointer;
    }

        .carousel-dots .dot.active {
            background-color: #333;
        }

.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
}

.carousel-slide {
    display: none;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.carousel-img-wrapper {
    width: 100%;
    max-width: 600px;
    max-height: 400px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 
  Component:    .close-card-btn
  Page:         sitelocations.aspx
  DOM Path:     .site-page-wrapper > .map-wrapper > .site-location-card > #close-location-card > .close-card-btn
  Purpose:      Styles the close button for interactive card or modal components
                - `position: absolute` anchors button to top-right corner of parent
                - `top: 8px`, `right: 8px` provide consistent offset
                - `background: #eee` gives neutral tone—consider theme variants (e.g., `.btn--light`, `.btn--dark`)
                - `border: none` removes default styling for cleaner look
                - `font-size: 18px` ensures visibility of icon/text (e.g., × or SVG)
                - `line-height: 1` keeps button compact
                - `cursor: pointer` signals interactivity
                - `padding: 4px 8px` adds click target comfort
                - `border-radius: 4px` softens edges for modern feel
                - `box-shadow` adds subtle depth—consider hover enhancement
                - `transition: background-color 0.2s ease` enables smooth hover feedback
                - Ensure accessible focus styles and keyboard support
*/
.close-card-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #eee;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    transition: background-color 0.2s ease;
}

    /* 
      Component:    .close-card-btn:hover
      Page:         LocationDetails.aspx, MapView.aspx—used in dismissible location cards
      DOM Path:     .site-page-wrapper > .map-wrapper > .site-location-card > #close-location-card > .close-card-btn
      Purpose:      Enhances visual feedback when hovering over the close button
                        - `background: #ddd` provides a subtle contrast shift from default `#eee`
                        - Reinforces interactivity and improves user experience
                        - Consider pairing with `transition: background-color 0.2s ease` for smooth animation
                        - Ensure hover state meets accessibility contrast requirements
                        - Works well with elevated styles (e.g., box-shadow) and compact button layout
*/


    .close-card-btn:hover {
        background: #ddd;
    }

.contact-phone svg,
.contact-email svg {
    vertical-align: middle;
}

    /* 
      Component:    .contact-card a
      Page:         LocationDetails.aspx
      DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > a
      Purpose:      Styles contact links with a clean blue tone and removes underline for a modern, unobtrusive look
    */
    .contact-card a {
        color: #0066cc;
        text-decoration: none;
    }

        /* 
          Component:    .contact-card a:hover
          Page:         LocationDetails.aspx
          DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > a
          Purpose:      Adds underline on hover to signal interactivity and improve link discoverability
        */
        .contact-card a:hover {
            text-decoration: underline;
        }

    /* 
      Component:    .contact-card p
      Page:         LocationDetails.aspx
      DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card
      Purpose:      Emphasizes paragraph content with semi-bold weight and tight bottom margin for compact,  readable layout
    */
    .contact-card p {
        font-weight: 600;
        margin: 0 0 4px 0;
    }

        /* 
          Component:    .contact-card p + p
          Page:         LocationDetails.aspx
          DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > p
          Purpose:      Reduces vertical spacing between consecutive paragraphs for tighter grouping of related content
        */
        .contact-card p + p {
            margin: 2px 0;
        }

/* 
  Component:    .contact-row
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > #rptContacts > .contact-entry > .contact-row
  Purpose:      Arranges contact elements in a flexible horizontal row with wrapping and generous spacing for clarity and responsiveness
*/
.contact-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 4px 0;
}

/* 
  Component:    .contact-phone, .contact-email
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > #rptContacts > .contact-entry
  Purpose:      Standardizes font size for phone and email entries to ensure visual consistency and readability across contact details
*/
.contact-phone,
.contact-email {
    font-size: 0.95rem;
}

/* 
  Component:    .day-label
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack > .hours-card > .hours-row > #rptOpenHours > .day-time-row > .day-label
  Purpose:      Styles the day name column within a time row. Fixed width ensures alignment across rows, while left text alignment maintains readability for labels like “Monday” or “Saturday.” Supports consistent layout in stacked or scrollable hour displays.
*/
.day-label {
    max-width: 80%; /* allows wrapping but leaves room for time */
    flex: 1 1 auto;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.time-range {
    flex: 0 1 auto;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 
  Component:    .day-time-row
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack > .hours-card > .hours-row > #rptOpenHours > .day-time-row
  Purpose:      Aligns day labels and time ranges horizontally within the hours card. Uses flex layout with center alignment for vertical centering, consistent horizontal gap for spacing, and bottom border to visually separate entries. Padding provides breathing room between rows.
*/
.day-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* This creates the space between items */
    align-items: baseline;
    margin-bottom: 10px;
}

/* 
  Component:    .details-link
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > #rptContacts > .contact-entry
  Purpose:      Styles “More Details” links with a vibrant blue and no underline to maintain visual consistency and encourage interaction
*/        
.details-link {
    color: #007bff;
    text-decoration: none;
}

    /* 
      Component:    .details-link:hover
      Page:         LocationDetails.aspx
      DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > #rptContacts > .contact-entry > .details-link
      Purpose:      Adds underline on hover to reinforce link interactivity and improve user feedback on “More Details” actions
    */
    .details-link:hover {
        text-decoration: underline;
    }

/* 
  Component:    .directions-link
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > #rptContacts > .contact-entry
  Purpose:      Styles “Get Directions” links with bold blue text, top margin, and inline-block layout to ensure visibility and spacing consistency
*/
.directions-link {
    color: #0078D4;
    display: inline-block;
    font-weight: bold;
    margin-top: 10px;
    text-decoration: none;
}

/* 
  Component:    .faq-body
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section
  Purpose:      Hides FAQ content by default and applies left margin and padding for clean spacing when revealed
*/
.faq-body {
    display: none;
    margin-left: 10px;
    padding: 16px 20px;
}

    /* 
      Component:    .faq-body.open
      Page:         LocationDetails.aspx
      DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section > .faq-body
      Purpose:      Reveals FAQ content when toggled open, enabling dynamic expansion of hidden details
    */
    .faq-body.open {
        display: block;
    }

/* 
  Component:    .faq-card
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section
  Purpose:      Ensures FAQ card spans full width of its parent container (60vw), maintaining layout consistency and readability
*/
.faq-card {
    width: calc(100% - 10px); /* Leaves 5px on each side */
    margin: 4px auto; /* Adds 5px top/bottom spacing */
    padding: 4px 0; /* Adds 10px vertical height */
    background-color: #fff; /* Optional: white background */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .faq-card + .faq-card {
        margin-top: 4px;
    }

/* 
  Component:    .faq-container
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section
  Purpose:      Creates a visually distinct FAQ section with soft background, rounded corners, and centered layout for enhanced readability
*/
.faq-container {
    background-color: #eaf3fc;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin: 0 auto;
    max-width: 900px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    gap: 2rem;
    padding-bottom: 3rem;
    box-sizing: border-box;
}

/* 
  Component:    .faq-header
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section > .faq-container
  Purpose:      Styles FAQ question headers as interactive buttons with bold text, soft background, and flex layout for icon alignment and accessibility
*/
.faq-header {
    align-items: center;
    background-color: #eef2f7;
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    font-size: 1.2rem;
    font-weight: bold;
    justify-content: space-between;
    padding: 12px 20px;
    text-align: left;
    width: 100%;
}

/* 
  Component:    .faq-item
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section > .faq-container
  Purpose:      Adds vertical spacing between individual FAQ entries to maintain clear separation and improve readability
*/
.faq-item {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 
  Component:    .faq-title
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section > .faq-container > .faq-item
  Purpose:      Allows the FAQ title to expand and fill available horizontal space within its flex container, ensuring alignment and consistent layout alongside icons or toggles
*/
.faq-title {
    flex: 1;
}

/* 
  Component:    .faq-toggle
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > .contact-card > .faq-section > .faq-container > .faq-item
  Purpose:      Styles the FAQ expand/collapse icon with brand-consistent color and size, and adds a smooth transform transition for interactive feedback (e.g., rotation on toggle)
*/
.faq-toggle {
    color: #2a4d69;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

#find-location {
    padding: 6px 12px;
    font-size: 0.9em;
    cursor: pointer;
}

/* 
  Component:    .hero-info-wrapper
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper
  Purpose:      Creates a responsive, left-aligned flex container for hero content with wrapping and spacing; centers layout within viewport and constrains width for readability
*/
.hero-info-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 auto;
    max-width: 1500px;
    padding: 40px 5vw;
    padding-top: 20px;
    position: relative;
}

.hours-card {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}

.hours-card {
    font-size: 0.95rem;
    padding: 14px;
}

    .hours-card * {
        white-space: normal !important;
    }

/* 
  Component:    .hourscard-label
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack > .hours-card > .hourscard-label
  Purpose:      Styles label or heading text within the hours card. Uses block display for vertical stacking, semi-bold weight for emphasis, and bottom margin to separate from following content (e.g., schedule list or time blocks).
*/
.hourscard-label {
    color: #333;
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.hours-card p,
.hours-card label,
.hours-card span,
.hours-card div {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}



/* 
  Component:    .hours-row
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack > .hours-card > .hours-row
  Purpose:      Creates a flexible container for time blocks or daily hour entries. Uses horizontal flex layout with wrapping to support responsive stacking. Gap ensures consistent spacing between items, and top margin separates row from preceding label or heading.
*/
.hours-row {
    display: flex;
    flex-wrap: wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* 
  Component:    .icon-label
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .icon-with-label > .icon-label
  Purpose:      Styles label text beneath icons with consistent spacing and visual hierarchy
                    - `margin-top: 10px` provides breathing room between icon and label
                    - `font-size: 16px` ensures clear legibility across devices
                    - `color: #333` maintains strong contrast and neutral tone
                    - `font-weight: 500` adds emphasis without overwhelming the layout
                    - Useful when `<span>` is replaced with `<div>` or `<p>` for semantic clarity
                    - Consider responsive variants (e.g., `.icon-label--compact`, `.icon-label--mobile`) for tighter layouts
*/
.icon-label {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/*
  Component:    .icon-row
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .icon-row
  Purpose:      Centers social icon container with full-width layout and vertical spacing
                  - `display: flex` enables horizontal layout for child elements
                  - `justify-content: center` centers icons within the row
                  - `width: 100%` ensures full container span across parent
                  - `margin-top: 2rem` adds spacing from preceding content
                  - `padding: 3rem 0` provides vertical breathing room above and below
*/
.icon-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
    padding: 1rem 0;
}

/* 
  Component:    .icon-with-label
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons > icon-with-label
  Purpose:      Vertically stacks an icon and its label with centered alignment
                    - `display: flex` enables layout control
                    - `flex-direction: column` stacks icon above label
                    - `align-items: center` horizontally centers both elements
                    - `text-align: center` ensures label text is centered within its container
                    - Ideal for consistent visual presentation of icon-label pairs across devices
*/
.icon-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
    margin: 0.5rem;
}

    /* 
      Component:    .icon-with-label:hover
      Page:         LocationDetails.aspx
      DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons > .icon-with-label
      Purpose:      Adds interactive visual feedback on hover to enhance user engagement
                        - `box-shadow` creates a subtle elevation effect, simulating depth
                        - `transform: translateY(-3px)` lifts the icon-label block slightly for tactile feel
                    - Ideal for social links, contact methods, or feature highlights
                    - Consider adding `transition` for smooth animation (e.g., `transition: all 0.3s ease`)
                    - Ensure hover effect is accessible—test contrast and motion preferences
    */
    .icon-with-label:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        transform: translateY(-3px);
    }

    /* 
      Component:    .icon-with-label a
      Page:         LocationDetails.aspx
      DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons > .icon-with-label > a
      Purpose:      Styles anchor tags within icon-label blocks for consistent vertical alignment and clean presentation
                        - `display: flex` ensures layout control for icon and label inside the link
                        - `flex-direction: column` stacks icon above label
                        - `align-items: center` centers content horizontally
                        - `text-decoration: none` removes default underline for cleaner visual design
                        - Consider adding `color: inherit` to preserve parent styling
                        - Ideal for social links, contact methods, or feature callouts with unified click targets
                        - Ensure accessible focus styles are present (e.g., `:focus-visible` outline or shadow)
    */
    .icon-with-label a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }

    /* 
      Component:    .icon-with-label img
      Page:         LocationDetails.aspx
      DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons > .icon-with-label > a > img
      Purpose:      Sets consistent dimensions for icons within vertical icon-label stacks
                        - `width: 72px` and `height: 72px` ensure uniform sizing across all icons
                        - Prevents layout shift and maintains visual rhythm in flex column layout
                        - Ideal for social media logos, contact method icons, or feature symbols
                        - Consider using `object-fit: contain` or `border-radius` if icons vary in aspect ratio or shape
                        - For responsive scaling, audit with media queries or use a `.icon--responsive` variant
    */
    .icon-with-label img {
        width: 72px;
        height: 72px;
        margin-bottom: 0.5rem;
    }

        /* 
          Component:    .icon-with-label img:hover
          Page:         LocationDetails.aspx
          DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons > .icon-with-label > a > img
          Purpose:      Adds subtle zoom effect on icon hover to enhance interactivity
                            - `transform: scale(1.1)` enlarges icon slightly for tactile feedback
                            - Reinforces clickable behavior and improves user engagement
                            - Consider pairing with `transition: transform 0.3s ease` for smooth animation
                            - Ensure motion respects user preferences (e.g., `@media (prefers-reduced-motion)`)
                            - Works well alongside box-shadow or lift effects on `.icon-with-label:hover`
        */
        .icon-with-label img:hover {
            transform: scale(1.1);
        }

    /* 
      Component:    .icon-with-label span
      Page:         LocationDetails.aspx
      DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons > .icon-with-label > a > span
      Purpose:      Styles the label text beneath each icon for clarity and consistency
                        - `margin-top: 6px` creates spacing between icon and label
                        - `font-size: 0.9rem` ensures legibility without overpowering the icon
                        - `color: #333` provides strong contrast while remaining neutral
                        - `font-weight: 500` adds emphasis without appearing bold-heavy
                        - Consider responsive scaling or theming variants (e.g., `.label--light`, `.label--compact`)
                        - Ensure semantic clarity—use `<span>` only if no additional meaning is needed; otherwise consider `<p>` or `<strong>` where appropriate
    */
    .icon-with-label span {
        margin-top: 6px;
        font-size: 0.9rem;
        color: #333;
        font-weight: 500;
    }

.info-card,
.contact-card,
.hours-card {
    flex: 0 0 auto;
    border-radius: 8px;
    display: block;
    background-color: #f9f9f9;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    box-sizing: border-box;
    padding: 16px;
    line-height: 1.5;
    height: auto;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* 
  Component:    .info-card
  Page:         LocationDetails.aspx
  DOM Path:     location-wrapper > hero-info-wrapper > info-stack > info-card
  Purpose:      Styles the main info block with soft background, padding, and shadow.
           Contains links and stacked paragraphs with subtle spacing.
*/
.info-card {
    margin-top: -25px;
}
    /* 
      Component:    .info-card a
      Page:         LocationDetails
      DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack > .info-card > a
      Purpose:      Ensures anchor text within info cards remains on a single line, truncates overflow with ellipsis, and respects container width for clean layout. Ideal for dynamic titles or links with unpredictable length.
    */
    .info-card a {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 
      Component: .info-card p
      Page: LocationDetails.aspx
      DOM Path: .location-wrapper > .hero-info-wrapper > .info-stack > .info-card > p
      Purpose: Styles paragraph text within info cards for emphasis and compact spacing. Uses semi-bold weight to highlight key details (e.g., location name, contact info) and tight bottom margin to maintain visual rhythm between stacked elements.
    */
    .info-card p {
        font-weight: 600;
        margin: 0 0 4px 0;
    }

        /* 
          Component: .info-card p + p
          Page: LocationDetails.aspx
          DOM Path: .location-wrapper > .hero-info-wrapper > .info-stack > .info-card > p + p
          Purpose: Adjusts spacing between consecutive paragraphs within info cards for tighter vertical rhythm. Used when multiple <p> elements are stacked to present grouped details (e.g., address, hours, contact info) without excessive whitespace.
        */
        .info-card p + p {
            margin: 2px 0;
        }

/* 
  Component:    .info-stack
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack
  Purpose:      Creates a vertically stacked layout for grouped info cards or content blocks. Fixed width ensures alignment with adjacent elements (e.g., map or sidebar), while column flex direction and gap maintain consistent spacing between children. Left margin offsets the stack for visual balance or alignment with grid columns.
*/
.info-stack {
    display: flex;
    flex: 0 0 600px;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin-left: 0;
}

#last-updated {
    font-size: 0.9em;
    color: #555;
}

/* 
  Component:    .last-updated-label
  Page: sitelocations.aspx
  DOM Path:     .site-page-wrapper > #map-controls
  Purpose: Styles the label preceding a timestamp or revision note. Uses reduced font size for subtlety and muted gray color (#555) to visually signal secondary importance without drawing attention away from primary content.
*/
.last-updated-label {
    font-size: 0.9em;
    color: #555;
}

/* 
  Component:    .location-address
  Page:         sitelocations.aspx
  DOM Path:     #location-cards-wrapper > #rptLocations > .site-location-card-static > p.location-address
  Purpose:      Styles the textual address of a location
                    - Font size set to 1rem for consistency with base text
                    - Color #555 provides subtle contrast for secondary info
                    - Intended to be readable but not visually dominant
*/
.location-address {
    font-size: 1rem;
    color: #555;
}

/* 
  Component:    #location-card
  Page:         sitelocations.aspx
  DOM Path:     .site-page-wrapper > .map-wrapper > #location-card
  Purpose:      Styles a floating card that displays location-specific details. 
           - Positioned absolutely and horizontally centered via `left: 50%` + `transform: translateX(-50%)`
           - Elevated with `z-index: 999` and soft shadow for prominence
           - Rounded corners and white background for clean, modern look
           - Responsive width with max constraint (320px) and internal padding for readability
           - Uses sans-serif font and 1.4 line-height for legibility
*/
    #location-card {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 12px 14px;
    max-width: 400px;
    width: auto;
    font-family: sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    min-height: unset;
    height: auto;
    display: inline-block;
    align-self: flex-start;
    pointer-events: auto;
}
    
    /* 
      Component:    #location-card a
      Page:         sitelocations.aspx
      DOM Path:     .site-page-wrapper > .map-wrapper > #location-card > a 
      Purpose:      Styles anchor tags inside the location card. 
           - Uses Microsoft blue (#0078D7) for visual consistency and recognizability
           - Removes underline for cleaner presentation, assuming hover/focus states are handled elsewhere
           - Intended for links to external maps, contact info, or location-specific actions
    */
    #location-card a {
        color: #0078D7;
        text-decoration: none;
        margin: 4px 0;
    }

        /* 
          Component:    #location-card a:hover
          Page:         sitelocations.aspx
          DOM Path:     .site-page-wrapper > .map-wrapper >#location-card > a:hover
          Purpose:      Defines hover state for anchor tags inside the location card.
           - Adds underline to reinforce interactivity and improve accessibility
           - Complements base style (`text-decoration: none`) with a clear visual cue on hover
           - Ensures consistent UX across clickable elements within the card
        */
        #location-card a:hover {
            text-decoration: underline;
        }

    #location-card .location-address {
        line-height: 1.3;
        font-size: 0.9rem;
    }

    #location-card .contactname,
    #location-card .contact {
        font-size: 0.9rem;
        line-height: 1.3;
    }

.leaflet-container {
    pointer-events: auto;
}



/* 
  Component:    .location-title
  Page:         sitelocations.aspx
  DOM Path:     #location-cards-container > #rptLocations > .site-location-card-static > .location-title
  Purpose:      Styles the name/title of a location
                    - Font size 1.2rem gives slight emphasis over base text
                    - Bold weight ensures visual hierarchy and scannability
                    - 8px bottom margin separates title from address or metadata
                    - Color #333 offers strong contrast while staying neutral
*/

.location-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

/* 
  Component:    .location-wrapper
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper
  Purpose:      Establishes a padded container for location content
                    - `display: block` ensures standard flow behavior
                    - `min-height: 100px` guarantees baseline vertical space
                    - Top padding of 100px offsets fixed/sticky header height (verify header height consistency)
                    - Horizontal padding (30px) provides breathing room for content
                    - `position: relative` enables absolute positioning of child elements (e.g., overlays, icons)
*/

.location-wrapper {
    display: block;
    min-height: 100px;
    padding: 100px 30px 0 30px; /* match header height */
    position: relative;
}

/* 
  Component:    #map
  Page:         sitelocations.aspx
  DOM Path: .site-page-wrapper > .map-wrapper > #map
  Purpose: Styles the embedded map container with responsive width, fixed height baseline, and smooth height transitions for dynamic resizing. Positioned relative for overlay elements and layered above background content.
*/
#map {
    margin: 0 auto;
    margin-bottom: 20px;
    min-height: 450px;
    height: 500px; 
    transition: height 0.3s ease;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* 
  Component:    #map-controls
  Page:         sitelocations.aspx
  DOM Path:     .site-page-wrapper > .map-wrapper > #map-controls
  Purpose:      Creates a vertically stacked control panel aligned to the right edge of the map container, with consistent spacing and padding for clean layout and usability
*/
#map-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    gap: 6px;
}

/* 
  Component:    .map-wrapper
  Page:         sitelocations.aspx 
  DOM Path: .site-page-wrapper > .map-wrapper
  Purpose: Defines a centered container for embedded maps with constrained max-width and relative positioning for overlay elements like controls or markers
*/
.map-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto;
}

#nextSlide {
    right: 10px;
}

/* 
  Component:    .no-hours
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .info-stack > .hours-card > .hours-row > #phNoHours > .no-hours
  Purpose:      Styles fallback or empty-state messaging when no operating hours are available. Uses italic font for subtle emphasis, muted color for visual de-prioritization, and vertical padding for spacing consistency within the card layout.
*/
.no-hours {
    font-style: italic;
    color: #666;
    padding: 8px 0;
}

.open-days,
.open-times {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

#prevSlide {
    left: 10px;
}

/* 
  Component:    .site-cards-wrapper
  Page:         sitelocations.aspx
  DOM Path:     #location-card-container > .site-cards-wrapper
  Purpose:      Defines a responsive grid container for displaying site or location cards. 
                    - Uses 5-column layout with equal-width tracks via `repeat(5, 1fr)`
                    - 20px gap provides consistent spacing between cards
                    - Centered horizontally with `margin: 0 auto`
                    - Width set to 70% of viewport for balanced layout across screen sizes
                    - Vertical padding adds breathing room above and below the grid
*/
.site-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 cards per row */
    gap: 20px;
    margin: 0 auto;
    width: 70vw; /* 70% of the viewport width */
    padding: 20px 0;
}

.siteheader {
    background-color: #004080;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px;
    text-align: center;
}

#siteHero {
    flex: 0 0 500px;
    max-width: 500px;
    overflow: hidden;
    margin-right: 40px;
}

    #siteHero .carousel-img {
        display: block;
        width: auto !important;
        height: auto !important;
        max-width: 500px !important;
        max-height: 500px !important;
        object-fit: contain !important;
        margin: 0 auto;
        transform: none !important;
    }

.site-label {
    color: #222;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

/* 
  Component:    .site-location-card
  Page:         sitelocations.aspx
  DOM Path:     .site-page-wrapper > .map-wrapper > .site-location-card
  Purpose:      Styles individual location cards within a 5-column grid
                    - `position: relative` allows layering of child elements (e.g. badges, overlays)
                    - White background (#fff) ensures clean, neutral presentation
                    - Light border (#ddd) and subtle shadow add visual separation from background
                    - Rounded corners (8px) soften card edges for modern feel
                    - 10px margin provides spacing between cards
                    - `max-width: 300px` prevents cards from stretching too wide on large screens
                    - `width: calc(20% - 20px)` ensures 5 cards per row with consistent spacing
                    - 16px padding creates internal breathing room for content
                    - `box-sizing: border-box` includes padding/border in total width for layout stability
*/
.site-location-card {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    /*margin: 10px; commented on 9/6 to try to fix mobile issue */
    max-width: 300px; /* Changed from 300px on 9/6 to try to fix mobile issue */
    padding: 16px; /* Changed from 20 px on 9/6 to try to fix mobile issue */
    width: calc(20% - 20px); /* 5 cards per row */
    /* box-sizing: border-box; Commented on 9/6 to try to fix mobile issue */
    border-radius: 8px; /* Added on 9/6 to try to fix mobile issue */
    overflow-y: auto;
    max-height: 70vh;
    margin: 10px;
    box-sizing: border-box;
}

/* 
  Component:    .site-location-card-static
  Page:         sitelocations.aspx
  DOM Path:     .site-page-wrapper > .site-cards-wrapper > #rptLocations > .site-location-card-static
  Purpose:      Styles a simplified or non-interactive version of location cards
                    - Light gray background (#f0f0f0) distinguishes static cards from interactive ones
                    - Softer border (#ccc) and rounded corners maintain visual consistency
                    - 16px padding ensures internal spacing for content
                    - `box-sizing: border-box` preserves layout integrity
                    - Full width (`width: 100%`) allows grid container to control sizing
*/
.site-location-card-static {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    width: 100%; /* grid handles sizing */
}

.site-location-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    justify-content: center;
    max-width: 2000px;
    margin: 0 auto;
}

/* 
  Component:    .site-page-wrapper
  Page:         sitelocations.aspx
  DOM Path:     body > .site-page-wrapper
  Purpose:      Establishes a top-level container for page content
                    - `position: relative` enables absolute positioning of child elements (e.g., overlays, modals)
                    - `margin-top: 140px` offsets content below a fixed or sticky header (verify header height consistency)
                    - Often used to wrap `.site-cards-wrapper`, `.location-wrapper`, or other primary modules
*/
.site-page-wrapper {
    position: relative;
    margin-top: 140px;
}

/* 
  Component:    .social-icons
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > #social-icons > .social-icons
  Purpose:      Horizontally aligns social media icons with consistent spacing and full-width responsiveness
                    - `display: flex` enables horizontal layout
                    - `justify-content: center` centers icons within container
                    - `gap: 50px` ensures consistent spacing between icons (consider reducing for mobile)
                    - `width: 100%` allows full container span—useful in fluid layouts
                    - `padding: 2rem 0` adds vertical breathing room (can be adjusted per section context)
                    - `box-sizing: border-box` ensures padding doesn’t overflow container width
*/
.social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50vw;
    max-width: 500px;
    gap: 2rem;
}

.social-icons img {
    width: 48px;
    height: 48px;
    transition: transform 0.2s ease;
    z-index: 1999;
}

    .social-icons img:hover {
        transform: scale(1.1);
    }

.social-icons a {
    cursor: pointer;
}

/*
  Component:    #socialIcons
  Page:         LocationDetails.aspx
  DOM Path:     .location-wrapper > .hero-info-wrapper > .icon-row > #socialIcons
  Purpose:      Displays social media icons in a flexible, responsive row with consistent spacing
                  - `display: flex` arranges icons horizontally using Flexbox
                  - `gap: 2rem` provides uniform spacing between icons (adjustable for tighter layouts)
                  - `flex-wrap: wrap` allows icons to flow to next line on smaller screens, preserving layout
*/
#socialIcons {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}


/********************************************************************************************/
/*                      Below this line are styles for smaller screens                      */
/********************************************************************************************/

/* Responsive positioning for smaller screens */
@media (max-width: 800px) {
    .carousel-img,
    #siteHero .carousel-img {
       display: block;
       width: auto !important;
       height: auto !important;
       max-width: 500px !important;
       max-height: 300px !important;
       object-fit: contain !important;
       margin: 0 auto;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .contact-card .contact-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .details-link,
    .directions-link {
        font-size: 0.95rem;
    }

     .faq-card {
        margin-bottom: 12px; 
        padding: 16px; 
    }

    .faq-card:last-child {
        margin-bottom: 0;
    }

    .faq-container {
        padding: 24px 20px;
        margin-top: 16px;
        margin-bottom: 8px;
    }

    .faq-item {
        margin-bottom: 12px;
    }

    .footer {
        margin-top: 40px;
        padding: 20px;
    }

    .hero-info-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        gap: 12px;
    }

    .day-time-row {
        font-size: 0.95rem;
        gap: 4px;
    }

    .info-card,
    .contact-card,
    .hours-card {
        flex: 1 1 auto;
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
        max-height: none; /* Optional: removes scroll constraint */
        padding: 16px;
        box-sizing: border-box;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        margin-bottom: 16px;
        background-color: #fff;
    }

    .info-card {
        margin-top: 0;
    }

    .info-stack {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .location-title,
    .site-label,
    .icon-label {
        font-size: 1rem;
    }

    /* Map Controls */
    #map-controls {
        flex-direction: column;
        align-items: flex-end;
    }

    .site-cards-wrapper {
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        align-items: center;
    }

    #siteHero {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 100%; /* Optional: keeps image readable */
        max-height: 320px; /* Optimized for mobile readability and layout balance */
        margin-bottom: 8px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        object-fit: cover;
        overflow: hidden;
    } 

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 24px; 
    }
}

@media (max-width: 480px) {
    .carousel-img {
        max-width: 100% !important;
        max-height: 250px !important;
    }
}

@media (max-width: 1024px) {
    .site-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}