/* ========================================================================
   BENTO PANES COMPONENT STYLES
   Styles for Microsoft's Bento panes layout component
   ======================================================================== */

       .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

/* ========================================================================
   TABLE OF CONTENTS
   1. Base High-Contrast Overlay Styles
   2. Banner CTA Group Styles
   3. Icon/Glyph Styles
   4. F-Align-Middle Section (Main/Hero Section)
   5. F-Stacked Section (Side Panels)
   6. Media Queries (Mobile-First Approach)
   ======================================================================== */


/* ========================================================================
   1. BASE HIGH-CONTRAST OVERLAY STYLES
   Common styles for all high-contrast overlay elements
   ======================================================================== */
.bento-hero-bg .m-panes section > div div.high-contrast {
    position: absolute !important;
    text-align: left !important;
    /* display: none !important; */ /* Commented out to show overlays */
}

.bento-hero-bg .m-panes section .high-contrast h2,
.bento-hero-bg .m-panes section .high-contrast p {
    padding-top: 0.5rem;
}

@media only screen and (min-width: 0px) {
.bento-hero-bg.theme-black{
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
}

.bento-hero-bg::before {
  content: "";
  transform: scale(1.05); /* Slightly zoom in */
  transform-origin: center;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #171717;
  z-index: -1;
    }
}


/* ========================================================================
   2. BANNER CTA GROUP STYLES
   Call-to-action links and buttons in the banner section
   ======================================================================== */
.bento-banner .m-banner h1.c-heading-1a {
    margin-top: 1.5rem;
}

.bento-banner .m-banner .ctaGroup {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.bento-banner .m-banner .ctaGroup .c-hyperlink {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    text-decoration: none !important;
    font-weight: 700;
}

.bento-banner .m-banner .ctaGroup .c-hyperlink:hover {
    text-decoration: underline !important;
}

.bento-banner .m-banner .ctaGroup .border,
.bento-banner .m-banner .ctaGroup .borderless {
    margin-left: 20px;
    margin-right: 20px;
}

.bento-banner .m-banner .ctaGroup .border {
    border-left: 2px solid lightgray;
}

.bento-banner .m-banner .c-call-to-action {
    margin-top: 2rem;
    margin-right: 0;
    color: #054b16;
}


/* ========================================================================
   3. ICON/GLYPH STYLES
   Styles for Microsoft Web Framework glyphs and icons
   ======================================================================== */
.bento-banner .c-glyph::before, 
.bento-banner .c-glyph::after {
    font-family: 'MWFMDL2-Xbox';
}

.bento-banner .c-glyph:before {
    padding-inline-end: 0.75rem;
    font-weight: 100;
    font-size: 20px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: 1px;
}


/* ========================================================================
   4. F-ALIGN-MIDDLE SECTION (MAIN/HERO SECTION)
   Styles for the main large image section
   ======================================================================== */
.bento-hero-bg .m-panes .f-align-middle {
    padding: 0;
    width: 100% !important;
    max-width: none !important;
}

.bento-hero-bg .m-panes .f-align-middle .m-panes-product-placement-item {
    height: 100%;
    width: 100% !important;
    max-width: none !important;
}

.bento-hero-bg .m-panes .f-align-middle .c-image {
    height: 100%;
    width: 100% !important;
}

.bento-hero-bg .m-panes .f-align-middle .c-image img {
    object-fit: cover !important;
    /* max-width: none !important; */ /* Commented out - may cause overflow */
}


/* ========================================================================
   5. F-STACKED SECTION (SIDE PANELS)
   Styles for the smaller stacked image sections
   ======================================================================== */
.bento-hero-bg .m-panes section.f-stacked {
    padding: 0 0 1rem 0 !important;
    border: none;
}

.bento-hero-bg .m-panes section.f-stacked > div + div:last-of-type {
    padding-top: 0.5rem;
}

.bento-hero-bg .m-panes section.f-stacked > div > .m-panes-product-placement-item picture.c-image img {
    max-width: 100% !important;
}

.bento-hero-bg .m-panes section.f-stacked:last-child>div {
    border: none !important;
}


/* ========================================================================
   6. MEDIA QUERIES (MOBILE-FIRST APPROACH)
   Responsive breakpoints organized from mobile to desktop
   ======================================================================== */

/* Extra Small Mobile (0-355px) */
@media screen and (min-width: 0) and (max-width: 355px) {
    .bento-hero-bg .m-panes section > div div.high-contrast {
        left: calc((100vw - 21rem) * 0.5 + 1rem);
    }
}

/* Small Mobile (356-539px) */
@media screen and (min-width: 356px) and (max-width: 539px) {
    .bento-hero-bg .m-panes section > div div.high-contrast {
        left: calc((100vw - 22rem) * 0.5);
    }
}

/* Mobile CTA Group Layout (max-width: 539px) */
@media (max-width: 539px) {
    .bento-banner .m-banner .ctaGroup {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding-top: 48px !important;
        width: 100% !important;
    }

    .bento-banner .m-banner .ctaGroup .c-hyperlink {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        flex: 0 0 calc(33.33% - 1px) !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .bento-banner .m-banner .ctaGroup .c-hyperlink span {
        padding-top: 0.75rem;
    }

    .bento-banner .m-banner .ctaGroup .c-hyperlink .c-glyph {
        display: block !important;
        margin: 0 auto 0.25rem auto !important;
        padding-inline-end: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }
    
    .bento-banner .m-banner .ctaGroup .c-hyperlink .c-glyph:before {
        padding-inline-end: 0 !important;
    }

    .bento-banner .m-banner .ctaGroup .border {
        display: block !important;
        width: 1px !important;
        height: 96px !important;
        background: lightgray !important;
        border-left: none !important;
        margin: 0 !important;
        align-self: stretch !important;
        flex: 0 0 1px !important;
    }
    .bento-hero-bg .m-panes section.f-stacked>div+div:last-of-type {
        border: none !important;
    }
}

/* Portrait Tablet (540-767px) */
@media screen and (min-width: 540px) and (max-width: 767px) {
    .bento-hero-bg .m-panes section div.high-contrast {
        padding-left: 0.75rem !important;
    }
}

/* Mobile and Tablet Banner Adjustments (max-width: 767px) */
@media screen and (max-width: 767px) {
    .bento-hero-bg .m-banner .ctaGroup {
        max-width: 100%;
        margin-inline-start: inherit;
        text-align: inherit;
        display: block;
        margin-inline-start: auto !important;
        margin-inline-end: auto;
        padding-top: 48px;
    }
}

/* Landscape Tablet (768-1083px) */
@media screen and (min-width: 768px) and (max-width: 1083px) {
    .bento-hero-bg .m-panes section div.high-contrast {
        padding-left: 2rem !important;
    }
}

/* Mobile and Small Tablets Layout (0-1083px) */
@media screen and (min-width: 0) and (max-width: 1083px) {
    .bento-hero-bg .m-panes section div.m-panes-product-placement-item {
        position: relative;
    }

    .bento-hero-bg .m-panes section.f-stacked:last-child {
        display: block;
    }

    .bento-hero-bg .m-panes section.f-stacked > div {
        max-width: 100% !important;
        padding-bottom: 0;
    }

    .bento-hero-bg .m-panes section.f-stacked:last-child > div > .m-panes-product-placement-item {
        padding: 0;
        padding-top: 1rem;
    }

    .bento-hero-bg .m-panes section.f-stacked > div,
    .bento-hero-bg .m-panes section.f-stacked > div + div:last-of-type {
        padding-top: 0;
        border: none;
    }

    .bento-hero-bg .m-panes section > div div.high-contrast {
        bottom: 2rem;
    }
}

@media (max-width: 539px) {
    .bento-hero-bg .m-panes section > div div.high-contrast {
        bottom: 1rem;
    }
}

/* Large Tablets and Small Desktop (1084px+) */
@media screen and (min-width: 1084px) {
    .bento-hero-bg .bento-hero[data-grid~=container] {
        margin: 0 auto;
        max-width: 100rem;
        padding: 0;
    }
    
    .bento-hero-bg .m-panes section.f-stacked > div {
        padding: 8px 2px 0;
        max-width: 100% !important;
    }

    .bento-hero-bg .m-panes .m-panes-product-placement-item{
        position: relative;
    }

    .bento-hero-bg .m-panes section.f-stacked:last-child > div > .m-panes-product-placement-item {
        padding: 0;
    }

    .bento-hero-bg .m-panes section.f-stacked > div:first-child > .m-panes-product-placement-item picture.c-image img {
        margin-right: 0;
    }

    .bento-hero-bg .m-panes section.f-stacked > div:last-child > .m-panes-product-placement-item picture.c-image img {
        margin-left: 0;
    }
}

/* Medium Desktop Range (1084-1258px) */
@media screen and (min-width: 1084px) and (max-width: 1258px) {
    .bento-hero-bg .m-panes .f-align-middle .high-contrast,
    .bento-hero-bg .m-panes .f-stacked .high-contrast {
        top: 45.5vw;
        left: 2rem;
    }

    .bento-hero-bg .m-panes .f-stacked > div .high-contrast {
        top: 20vw;
        left: 2rem;
    }

    .bento-hero-bg .m-panes .f-stacked > div:last-child .high-contrast {
        left: 2rem;
    }
}

/* Large Desktop Range (1259-1399px) */
@media screen and (min-width: 1259px) and (max-width: 1399px) {
    .bento-hero-bg .m-panes .f-align-middle .high-contrast,
    .bento-hero-bg .m-panes .f-stacked .high-contrast {
        top: 37rem;
        left: calc((100vw - 1259px) * 0.5 + 2rem);
    }

    .bento-hero-bg .m-panes .f-stacked > div:first-child .high-contrast {
        top: 18rem;
        left: calc((100vw - 1259px) * 0.5 + 2rem);
    }

    .bento-hero-bg .m-panes .f-stacked > div:last-child .high-contrast {
        top: 18rem;
        left: 2rem;
    }
}

/* Extra Large Desktop (1400px+) */
@media screen and (min-width: 1400px) {
    .bento-hero-bg .m-panes .f-align-middle .high-contrast {
        top: 28.625rem;
        padding-left: 2rem;
    }

    .bento-hero-bg .m-panes .f-stacked > div .high-contrast {
        top: 13rem;
    }

    .bento-hero-bg .m-panes section.f-stacked > div {
        padding: 1.375rem 0.125rem 0.25rem 1rem;
    }

    .bento-hero-bg .m-panes section.f-stacked {
        width: 100%;
        max-width: 33.7% !important;
    }
}

/* Ultra Wide Desktop Range (1400-1599px) */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
    .bento-hero-bg .m-panes .f-align-middle .high-contrast,
    .bento-hero-bg .m-panes .f-stacked .high-contrast {
        top: 28.625vw;
    }

    .bento-hero-bg .m-panes .f-stacked > div .high-contrast {
        top: 13vw;
    }
}

.bento-hero-bg .bento-hero .m-panes{
    padding-bottom: 2rem;
}

.bento-hero-bg .bento-hero .m-panes .m-panes-product-placement-item a.slide-link:focus img {
    border: #9bf00b solid 4px;
}
.bento-hero-bg .bento-hero .m-panes .m-panes-product-placement-item a.slide-link:focus{
    outline:none !important;
}