/* ============================================================

   NDC MOBILE FIXES (FINAL)

   - Nicepage hamburger/menu SAFE FIX

   - Full-screen app mode on mobile/tablet (< 1024px)

   - Prevent header overlap

============================================================ */



/* ============================================================

   1) FULL SCREEN APP MODE (< 1024px)

   - Edge-to-edge viewport (100vw)

   - No rounded edges

   - No margins/padding constraints

============================================================ */

@media (max-width: 1023px){

  /* Remove any body/html padding that might cause gaps */

  *,

  *::before,

  *::after{

    box-sizing: border-box;

  }



  body,

  html{

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    overflow-x: hidden;

    width: 100% !important;

    max-width: 100% !important;

  }



  /* Ensure no parent containers add padding */

  #page,

  #main,

  #content,

  .site,

  .site-content,

  .entry-content,

  .post-content{

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

  }



  /* Remove padding from theme wrappers - override theme styles */

  .site-main,

  .content-wrapper,

  .u-section,

  .u-sheet,

  main,

  [class*="u-section"],

  [class*="u-sheet"]{

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding: 0 !important;

  }



  /* Override theme's content-wrapper padding specifically - CRITICAL */

  body .content-wrapper,

  html .content-wrapper,

  .site-main .content-wrapper,

  .content-wrapper{

    padding: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

  }



  /* Shell - ensure all parents have no padding, then use full width */

  /* Remove padding from all parent containers */

  .entry-content,

  article .entry-content,

  .content-wrapper,

  .site-main{

    padding-left: 0 !important;

    padding-right: 0 !important;

    overflow-x: hidden !important;

  }



  /* Shell - full width, positioned at left edge */

  body .ndc-shell,

  html .ndc-shell,

  .site-main .ndc-shell,

  .content-wrapper .ndc-shell,

  .entry-content .ndc-shell,

  article .ndc-shell,

  #main .ndc-shell,

  #content .ndc-shell,

  .ndc-shell{

    position: relative !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    padding: 0 !important;

    transform: none !important;

    overflow-x: hidden !important;

    box-sizing: border-box !important;

  }



  /* Other wrappers */

  .ndc-partners-wrap,

  .ndc-deals-wrap,

  .ndc-clipped-wrap,

  .ndc-clipped-coupons-wrap,

  .ndc-coupons-wrap,

  .ndc-hudsons-wrapper{

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    padding: 0 !important;

  }



  /* Ensure shell doesn't add any horizontal spacing */

  .ndc-shell > *{

    margin-left: 0 !important;

    margin-right: 0 !important;

  }



  /* Ensure content inside glass panel is properly contained and centered */

  .ndc-glass-panel > *{

    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;

  }



  /* Ensure deals wrap content doesn't overflow and is properly aligned */

  /* Override deals.css and site.css styles - MAXIMUM SPECIFICITY */

  body .ndc-glass-panel .ndc-deals-wrap,

  html .ndc-glass-panel .ndc-deals-wrap,

  .ndc-shell .ndc-glass-panel .ndc-deals-wrap,

  .ndc-glass-panel .ndc-deals-wrap,

  body .ndc-deals-wrap,

  html .ndc-deals-wrap,

  .ndc-shell .ndc-deals-wrap,

  .ndc-deals-wrap{

    max-width: 100% !important;

    width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    margin: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    position: relative !important;

    left: 0 !important;

    right: 0 !important;

  }



  .ndc-deals-head,

  .ndc-deals-grid{

    max-width: 100% !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }



  /* Shell - full width, edge-to-edge */

  /* First ensure key parent containers have no padding */

  .site-main,

  .content-wrapper,

  main,

  #main,

  #content{

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

  }



  /* Now make shell full width */

  body .ndc-shell,

  .site-main .ndc-shell,

  .content-wrapper .ndc-shell,

  .ndc-shell{

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    padding: 0 !important;

    position: relative !important;

    overflow-x: hidden !important;

  }



  /* Prevent horizontal scroll on body and html */

  body,

  html{

    overflow-x: hidden !important;

    max-width: 100% !important;

    width: 100% !important;

    position: relative !important;

    margin: 0 !important;

    padding: 0 !important;

  }



  /* Prevent containers from causing horizontal overflow */

  .site-main,

  .content-wrapper,

  .entry-content,

  article,

  main{

    overflow-x: hidden !important;

    max-width: 100% !important;

  }



  /* Prevent containers from causing overflow */

  .ndc-shell *,

  .ndc-glass-panel *,

  .ndc-deals-wrap *,

  .ndc-partners-wrap *{

    max-width: 100% !important;

    box-sizing: border-box !important;

  }



  /* Exception for images and content that should be contained */

  img,

  video,

  iframe{

    max-width: 100% !important;

    height: auto !important;

  }



  /* If shell is directly in content-wrapper, use different approach */

  .content-wrapper > .ndc-shell{

    margin-left: calc(-15px - 50vw + 50%) !important;

    margin-right: calc(-15px - 50vw + 50%) !important;

    width: 100vw !important;

    max-width: 100vw !important;

  }



  /* Nuclear option: Make content-wrapper itself full width with no padding */

  .content-wrapper{

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

  }



  /* Glass panel - full width, no rounded edges (keep cards/buttons rounded) */

  /* Override theme styles with maximum specificity */

  body .ndc-glass-panel,

  html .ndc-glass-panel,

  .content-wrapper .ndc-glass-panel,

  .site-main .ndc-glass-panel,

  .ndc-shell .ndc-glass-panel,

  .ndc-shell > .ndc-glass-panel,

  .ndc-glass-panel{

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    margin: 0 !important;

    padding: 18px 16px !important;

    box-sizing: border-box !important;

    border-radius: 0 !important;

    position: relative !important;

    left: 0 !important;

    right: 0 !important;

    transform: none !important;

    float: none !important;

    display: block !important;

    overflow-x: hidden !important;

    overflow-wrap: break-word !important;

  }



  /* Glass panel pseudo-element - no rounded edges */

  .ndc-glass-panel::before{

    border-radius: 0 !important;

  }



  /* Orange panel - full width, no rounded edges */

  body .ndc-orange-panel,

  html .ndc-orange-panel,

  .content-wrapper .ndc-orange-panel,

  .site-main .ndc-orange-panel,

  .ndc-orange-panel{

    width: 100vw !important;

    max-width: 100vw !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin: 0 !important;

    border-radius: 0 !important;

  }



  /* CTA panel - full width, no rounded edges */

  body .ndc-cta-panel,

  html .ndc-cta-panel,

  .content-wrapper .ndc-cta-panel,

  .site-main .ndc-cta-panel,

  .ndc-cta-panel{

    width: 100vw !important;

    max-width: 100vw !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin: 0 !important;

    border-radius: 0 !important;

  }

}



/* ============================================================

   2) PREVENT GLASS FROM HIDING UNDER HEADER

   (Removed for full-screen app mode - content starts at top)

============================================================ */

/* Note: Margin-top removed for true edge-to-edge app experience */



/* ============================================================

   3) NICEPAGE MOBILE MENU — SAFE FIX (NO DRAWER OVERRIDES)

============================================================ */

@media (max-width: 980px){



  /* Header must always be on top */

  .u-header{

    position: relative !important;

    z-index: 999999 !important;

  }



  /* Ensure header + contents receive taps */

  .u-header,

  .u-header *{

    pointer-events: auto !important;

  }



  /* Hamburger button */

  .u-header .menu-collapse,

  .u-header .menu-collapse a,

  .u-header .menu-collapse button{

    pointer-events: auto !important;

    z-index: 1000000 !important;

    touch-action: manipulation;

  }



  /* When menu is OPEN (Nicepage adds this class) */

  body.u-menu-opened .u-nav-container-collapse,

  html.u-menu-opened .u-nav-container-collapse{

    z-index: 1000002 !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }



  /* Ensure sidenav panel itself is visible and aligned */

  body.u-menu-opened .u-nav-container-collapse .u-sidenav,

  html.u-menu-opened .u-nav-container-collapse .u-sidenav{

    transform: none !important;

    left: auto !important;

    right: auto !important;

    max-width: 360px !important;

    width: 82vw !important;

    z-index: 1000003 !important;

  }



  /* Menu items visible + clickable */

  body.u-menu-opened .u-nav-container-collapse .u-nav,

  body.u-menu-opened .u-nav-container-collapse .u-nav a{

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }



  /* Close button */

  body.u-menu-opened .u-nav-container-collapse .u-menu-close,

  html.u-menu-opened .u-nav-container-collapse .u-menu-close{

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 1000004 !important;

  }



  /* Page layers stay BELOW menu */

  .ndc-shell,

  .ndc-glass-panel,

  .ndc-page-hero,

  .ndc-featured-slider{

    position: relative;

    z-index: 1;

  }

}