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

   NDC SITE BASE STYLES — STABLE BASELINE (CLEAN)

   - Plugin-first

   - No random Nicepage hacks

   - Desktop header pill supported

   - Mobile: let Nicepage handle off-canvas menu

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



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

   0) GLOBAL SPACING + RADII

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

:root{

  --ndc-gap-sm: 10px;

  --ndc-gap: 15px;

  --ndc-gap-lg: 24px;



  --ndc-radius: 30px;

  --ndc-radius-card: 22px;

  /* Hilton Head / Lowcountry palette */
  --ndc-deep-navy: #0f1b2d;
  --ndc-mid-navy:  #13263a;
  --ndc-sand:      #f7e8c8;
  --ndc-gold:      #f4d9a2;
  --ndc-amber:     #eec590;
  --ndc-sunset:    #e8b26e;
  --ndc-teal:      #0f6c6c;
  --ndc-ink:       #0b121d;

  /* Consistent shadow system (tinted slightly warm) */
  --ndc-shadow: 0 8px 20px rgba(15,27,45,0.18);
  --ndc-shadow-light: 0 6px 14px rgba(15,27,45,0.12);
  --ndc-shadow-orange: 0 8px 20px rgba(232, 178, 110, 0.16);
  --ndc-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.32);

}



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

   1) BACKGROUND BASE

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

html{
  background: radial-gradient(circle at 20% 20%, rgba(244,217,162,0.10), transparent 28%),
              radial-gradient(circle at 80% 10%, rgba(232,178,110,0.08), transparent 30%),
              linear-gradient(135deg, var(--ndc-deep-navy) 0%, var(--ndc-mid-navy) 55%, var(--ndc-deep-navy) 100%);
}



body{

  min-height: 100vh;

  margin: 0;

  background-color: transparent; /* Allow time-of-day background to show through */

}



/* NOTE: Nicepage-specific code removed - no longer using Nicepage theme

[class*="u-section-"],

.u-body,

.u-sheet,

.u-section,

.u-group,

.u-layout,

.u-layout-row,

.u-layout-cell{

  background-color: transparent !important;

  background-image: none !important;

}

*/



/* NOTE: Nicepage-specific code removed - no longer using Nicepage theme

.u-section,

.u-sheet,

.u-layout,

.u-layout-row,

.u-layout-cell{

  overflow: visible !important;

}

*/



/* Header stays solid white */

.u-header,

.u-header .u-sheet{

  background: #ffffff !important;

  background-image: none !important;

}



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

   2) UNIVERSAL SHELL + GLASS PANEL

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

.ndc-shell{

  max-width: 1140px;

  margin: 0 auto;

  padding: 0 var(--ndc-gap) 5px;

  position: relative;

  z-index: 2;

  overflow: visible;

}



.ndc-glass-panel{

  position: relative;

  max-width: 1140px;

  width: auto;

  margin-left: auto;

  margin-right: auto;

  background: rgba(255, 252, 245, 0.92);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);



  border-radius: var(--ndc-radius);

  box-shadow: var(--ndc-shadow), var(--ndc-shadow-inset);



  padding: 15px;

  margin-top: 15px;

  margin-bottom: 15px;



  overflow: visible;

}



.ndc-glass-panel::before{

  content:"";

  position:absolute;

  inset:0;

  background: linear-gradient(145deg, rgba(255, 252, 245, 0.95), rgba(247, 232, 200, 0.60));

  border-radius: inherit;

  z-index:-1;

}



@media (max-width: 900px){

  .ndc-glass-panel{

    padding: 15px;

    margin-top: var(--ndc-gap);

  }

}

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

   3) ORANGE PANEL (White text on orange background)

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

.ndc-orange-panel{

  position: relative;

  max-width: 1140px;

  width: auto;

  margin-left: auto;

  margin-right: auto;

  background: linear-gradient(135deg, var(--ndc-sand), var(--ndc-gold));

  border-radius: var(--ndc-radius);

  box-shadow: var(--ndc-shadow-orange), var(--ndc-shadow-inset);

  padding: 15px;

  margin-top: 15px;

  margin-bottom: 15px;

  overflow: visible;

  color: #ffffff;

}

.ndc-orange-panel *{

  color: #ffffff;

}

.ndc-orange-panel h1,

.ndc-orange-panel h2,

.ndc-orange-panel h3,

.ndc-orange-panel h4,

.ndc-orange-panel h5,

.ndc-orange-panel h6{

  color: #ffffff !important;

}

@media (max-width: 900px){

  .ndc-orange-panel{

    padding: 15px;

    margin-top: var(--ndc-gap);

  }

}

@media (max-width: 600px){

  .ndc-glass-panel{

    padding: 15px;

    margin-top: var(--ndc-gap-sm);

  }

}



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

   3) VERTICAL RHYTHM INSIDE GLASS

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

.ndc-glass-panel :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote){

  margin: 0;

}

.ndc-glass-panel :where(ul,ol){

  padding-left: 1.2em;

}



.ndc-stack{

  display:flex;

  flex-direction:column;

  gap: var(--ndc-gap-lg);

}

.ndc-stack.sm{ gap: var(--ndc-gap-sm); }

.ndc-stack.md{ gap: var(--ndc-gap); }

.ndc-stack.lg{ gap: var(--ndc-gap-lg); }



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

   4) UNIVERSAL TEXT INSET (INSIDE GLASS)

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

.ndc-glass-panel p,

.ndc-glass-panel h1,

.ndc-glass-panel h2,

.ndc-glass-panel h3,

.ndc-glass-panel h4,

.ndc-glass-panel h5,

.ndc-glass-panel h6,

.ndc-glass-panel ul,

.ndc-glass-panel ol,

.ndc-glass-panel li{

  padding-left: 16px;

  padding-right: 16px;

}



/* Exclude grids/cards

.ndc-partners-grid,

.ndc-deals-grid,

.ndc-partner-card,

.ndc-deal-card{

  padding-left: 0 !important;

  padding-right: 0 !important;

}

 */

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

   5) PAGE HERO

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

.ndc-page-hero{ text-align:center; }



.ndc-page-title{

  margin: 0 0 var(--ndc-gap-sm);

  font-size: 46px;

  font-weight: 900;

  color: #ff7a1a;

  letter-spacing: -0.02em;

  line-height: 1.06;

  padding: 0;

}



.ndc-page-sub{

  max-width: 820px;

  margin: 0 auto;

  font-size: 16px;

  line-height: 1.6;

  color: rgba(0,0,0,0.70);

  padding: 0;

}



@media (max-width: 620px){

  .ndc-page-title{ font-size: 34px; }

}



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

   6) BUTTON SYSTEM

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

.ndc-actions{

  display:flex;

  justify-content:center;

  align-items:center;

  gap: var(--ndc-gap);

  flex-wrap: wrap;

}



.ndc-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap: 8px;



  padding: 14px 22px;

  border-radius: 999px;

  font-weight: 900;

  text-decoration:none;

  border:none;

  cursor:pointer;



  transition: transform .15s ease, box-shadow .15s ease;

}



.ndc-btn:hover{

  transform: translateY(-1px);

  box-shadow: var(--ndc-shadow-light);

}



.ndc-btn-orange{ background:var(--ndc-gold); color:#0f1b2d; }
.ndc-btn-orange:hover{ background:var(--ndc-amber); color:#0b121d; }

.ndc-btn-teal{ background:var(--ndc-teal); color:#fff; }
.ndc-btn-teal:hover{ background:#0d5a5a; color:#fff; }



.ndc-actions .ndc-btn{ margin: 0; }



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

   7) HEADER PILL (DESKTOP ONLY)

   IMPORTANT: do NOT force header flex on mobile (breaks offcanvas)

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

@media (min-width: 940px){

  .u-header .u-sheet{

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: var(--ndc-gap) !important;

  }

}



.ndc-header-float{

  position: static !important;

  margin-left: auto !important;



  display: inline-flex;

  align-items: center;

  gap: 10px;



  padding: 10px 14px;

  border-radius: 999px;



  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);



  box-shadow: var(--ndc-shadow-light);

  text-decoration: none;

  white-space: nowrap;

}



.ndc-header-float-label{

  font-weight: 900;

  color: rgba(0,0,0,0.75);

  font-size: 14px;

}



.ndc-badge{

  display: inline-flex;

  align-items: center;

  justify-content: center;



  min-width: 24px;

  height: 24px;

  padding: 0 8px;



  border-radius: 999px;

  font-size: 13px;

  font-weight: 900;

  line-height: 1;



  background: #009FBD;

  color: #fff;



  box-shadow: var(--ndc-shadow-light);

}



/* Keep menu/hamburger vertically centered (safe) */

.u-header .u-menu,

.u-header .u-nav-container,

.u-header .u-nav-container-collapse,

.u-header .menu-collapse{

  align-self: center !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}



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

   8) MOBILE TIDY (SAFE)

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

@media (max-width: 820px){

  .ndc-header-float{

    padding: 8px 12px !important;

    gap: 8px !important;

    box-shadow: var(--ndc-shadow-light) !important;

  }



  .ndc-header-float-label{ font-size: 13px !important; }



  .ndc-badge{

    min-width: 22px !important;

    height: 22px !important;

    padding: 0 7px !important;

    font-size: 12px !important;

  }



  [data-ndc-hero-clip-btn]{ display: none !important; }



  .ndc-glass-panel{

    padding: 15px !important;

  }

}



@media (max-width: 420px){

  .ndc-header-float{ padding: 7px 10px !important; }

  .ndc-header-float-label{ font-size: 12.5px !important; }

}



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

   A) DISCOVER SECTION

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

.ndc-discover{

  max-width: 1140px;

  width: auto;

  margin-left: auto;

  margin-right: auto;

  margin-top: 15px;

  margin-bottom: 15px;

  padding: 15px;

  background: rgba(255,255,255,0.96);

  border-radius: 26px;

  box-shadow: var(--ndc-shadow-light);

}

/* When inside glass panel, remove duplicate background and let panel handle container */
.ndc-glass-panel .ndc-discover {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure discover content is visible inside glass panel */
.ndc-glass-panel .ndc-discover-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ndc-glass-panel .ndc-discover-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ndc-glass-panel .ndc-discover-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}



.ndc-discover-title{

  margin: 0 0 var(--ndc-gap);

  font-size: 46px;

  line-height: 1.06;

  font-weight: 900;

  color: #ff7a1a;

  letter-spacing: -0.02em;

  padding: 0;

}



.ndc-discover-grid{

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: var(--ndc-gap);

  margin-top: var(--ndc-gap);

}



@media (max-width: 1100px){

  .ndc-discover-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 620px){

  .ndc-discover-grid{ grid-template-columns: 1fr; }

  .ndc-discover-title{ font-size: 34px; }

}



.ndc-discover-card{

  background: rgba(255,255,255,0.92);

  border: 1px solid rgba(0,0,0,0.08);

  border-radius: var(--ndc-radius-card);

  box-shadow: var(--ndc-shadow-light);

  padding: calc(var(--ndc-gap) + var(--ndc-gap-sm)) var(--ndc-gap);

}



.ndc-discover-card h3{

  margin: 0 0 var(--ndc-gap-sm);

  font-size: 22px;

  font-weight: 900;

  color: #111;

  padding: 0;

}



.ndc-discover-card p{

  margin: 0;

  font-size: 14.5px;

  line-height: 1.5;

  color: rgba(0,0,0,0.72);

  padding: 0;

}



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

   B) CTA PANEL

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

.ndc-cta-panel{

  max-width: 1140px !important;

  width: auto !important;

  margin-left: auto !important;

  margin-right: auto !important;

  margin-top: 15px !important;

  margin-bottom: 15px !important;

  padding: 15px !important;

  display: block !important;

  box-sizing: border-box !important;



  background: #ff7a1a !important;

  background-color: #ff7a1a !important;

  border-radius: var(--ndc-radius) !important;

  text-align: center !important;



  box-shadow: var(--ndc-shadow-orange), var(--ndc-shadow-inset) !important;

}



.ndc-cta-panel,

.ndc-cta-panel *,

.ndc-cta-panel h1,

.ndc-cta-panel h2,

.ndc-cta-panel h3,

.ndc-cta-panel h4,

.ndc-cta-panel h5,

.ndc-cta-panel h6,

.ndc-cta-panel p,

.ndc-cta-panel .ndc-cta-lead,

.ndc-cta-panel .ndc-cta-tagline{

  color: #ffffff !important;

}

/* Ensure orange background overrides any parent styles */

.u-section .ndc-cta-panel,

.u-sheet .ndc-cta-panel,

.custom-expanded .ndc-cta-panel,

.u-custom-html .ndc-cta-panel,

#block-1 .ndc-cta-panel,

.u-section-3 .ndc-cta-panel,

body .ndc-cta-panel,

html .ndc-cta-panel{

  background: #ff7a1a !important;

  background-color: #ff7a1a !important;

  background-image: none !important;

}



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

   C) HOME: DEALS WIDTH + INNER PADDING

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

.ndc-deals-wrap,

.ndc-deals-container,

.ndc-deals,

.ndc-deals-grid-wrap{

  max-width: none !important;

  width: 100% !important;

}



.ndc-deals-head,

.ndc-deals-grid{

  max-width: none !important;

  width: 100% !important;

}



.ndc-deals-wrap{

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: var(--ndc-gap-lg) !important;

  padding-right: var(--ndc-gap-lg) !important;

  box-sizing: border-box !important;

}

/* ============================================================
   MOBILE RESPONSIVE STYLES - COMPREHENSIVE
   ============================================================ */

/* Mobile Base (Below 768px) */
@media (max-width: 768px) {
  
  /* Global Mobile Adjustments */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Panels - Full width with padding */
  .ndc-glass-panel,
  .ndc-orange-panel,
  .ndc-cta-panel,
  .ndc-discover {
    max-width: calc(100% - 30px) !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding: 20px !important;
  }
  
  /* CTA Panel Mobile */
  p[data-ndc-cta="true"],
  p.ndc-cta-auto {
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding: 20px 15px !important;
    max-width: calc(100% - 30px) !important;
  }
  
  /* Welcome Panel Mobile */
  .ndc-welcome-panel {
    padding: 20px;
  }
  
  /* Buttons - Larger touch targets */
  .ndc-btn,
  button[type="submit"],
  input[type="submit"],
  a.button {
    min-height: 44px;
    padding: 12px 24px;
    font-size: 16px;
  }
  
  .ndc-btn-lg {
    min-height: 48px;
    padding: 14px 28px;
    font-size: 18px;
  }
  
  /* Forms - Prevent zoom on iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 12px 16px;
  }
  
  /* Links - Larger touch targets */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Cards and Items */
  .ndc-card,
  .ndc-deal-card,
  .ndc-partner-card {
    margin-bottom: 20px;
  }
}

/* Small Mobile (Below 480px) */
@media (max-width: 480px) {
  
  /* Smaller panels padding */
  .ndc-glass-panel,
  .ndc-orange-panel,
  .ndc-cta-panel,
  .ndc-discover {
    padding: 15px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    max-width: calc(100% - 24px) !important;
  }
  
  p[data-ndc-cta="true"],
  p.ndc-cta-auto {
    padding: 15px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    max-width: calc(100% - 24px) !important;
  }
  
  /* Smaller titles */
  .ndc-deals-title,
  .ndc-discover-title,
  .ndc-page-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  
  p[data-ndc-cta="true"] .ndc-cta-title,
  p.ndc-cta-auto .ndc-cta-title {
    font-size: 20px !important;
  }
  
  /* Tighter spacing */
  .ndc-welcome-panel,
  .ndc-welcome-content {
    padding: 15px;
  }
}

/* Tablet Portrait (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  
  /* Panels - Slight margin adjustments */
  .ndc-glass-panel,
  .ndc-orange-panel,
  .ndc-cta-panel,
  .ndc-discover {
    max-width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  
  /* Larger touch targets for all interactive elements */
  button,
  .ndc-btn,
  a,
  input[type="submit"],
  input[type="button"],
  .ndc-clip-btn,
  .ndc-action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
  }
  
  /* Remove hover effects on touch devices */
  button:hover,
  .ndc-btn:hover,
  a:hover {
    transform: none;
  }
  
  /* Larger form inputs for easier tapping */
  input,
  textarea,
  select {
    font-size: 16px !important;
    padding: 14px 16px;
    min-height: 44px;
  }
}

/* Landscape Mobile (Max width but landscape orientation) */
@media (max-width: 768px) and (orientation: landscape) {
  
  /* Reduce vertical padding in landscape */
  .ndc-glass-panel,
  .ndc-orange-panel,
  .ndc-cta-panel {
    padding: 15px 20px !important;
  }
  
  /* Smaller header in landscape */
  .site-header {
    padding: 10px 0;
  }
  
  .site-logo img {
    max-height: 40px;
  }
}

/* Print Styles (Optional but good practice) */
@media print {
  
  /* Hide navigation and interactive elements */
  .site-header,
  .site-footer,
  .mobile-menu-toggle,
  .ndc-btn,
  button {
    display: none !important;
  }
  
  /* Ensure content is readable */
  .ndc-glass-panel,
  .ndc-orange-panel {
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
}



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

   FULL SCREEN APP MODE - SITE WIDE (< 1024px)

   - Remove all rounded edges for app-like appearance

   - Edge-to-edge viewport

   - Overrides all previous mobile styles

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

@media (max-width: 1023px){

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

  .ndc-glass-panel::before{

    border-radius: 0 !important;

  }



  /* Note: Keeping rounded edges on cards, buttons, pills, etc. - only removing from main panels */



  /* Override any existing mobile styles that add margins */

  .ndc-glass-panel,

  .ndc-orange-panel,

  .ndc-cta-panel,

  .ndc-discover{

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin: 0 !important;

    max-width: 100vw !important;

    width: 100vw !important;

    border-radius: 0 !important;

    position: relative !important;

    left: 0 !important;

    right: 0 !important;

  }



  /* Override theme's mobile styles that add margins */

  body .ndc-glass-panel,

  html .ndc-glass-panel,

  .content-wrapper .ndc-glass-panel,

  .site-main .ndc-glass-panel{

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin: 0 !important;

  }



  /* Shell containers - full width, no padding at all */

  .ndc-shell{

    padding: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    max-width: 100vw !important;

    width: 100vw !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }



  /* Deals wrap - full width */

  .ndc-deals-wrap{

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

    max-width: 100vw !important;

    width: 100vw !important;

  }



  /* CTA panels - full width */

  p[data-ndc-cta="true"],

  p.ndc-cta-auto{

    margin-left: 0 !important;

    margin-right: 0 !important;

    max-width: 100vw !important;

    width: 100vw !important;

    border-radius: 0 !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

  }

}