/* ===========================================================
   Caribbean Hosting Theme v3.1
   Header + Footer + Buttons
=========================================================== */

:root {
    --cng-blue: #072040;
    --cng-blue-hover: #0B2E5C;
    --cng-blue-active: #11457F;
    --cng-dark: #04162D;
    --cng-white: #ffffff;
    --cng-light: #dbe7f5;
    --cng-accent: #8cc8ff;
}

/* HEADER TOP BAR */
.toolbarmain-container,
.toolbarmain,
.toolbarmain-text,
.toolbarmain-menu,
.toolbarmain-menu ul,
.toolbarmain-menu li,
.toolbarmain-menu a {
    background: var(--cng-blue) !important;
    color: var(--cng-white) !important;
}

/* MAIN HEADER */
.headermain,
.headermain-design1,
.headermain-design2 {
    background: var(--cng-white) !important;
}

/* NAVIGATION */
.navmain-container,
.navmain,
.navmain > ul,
.navmain > ul > li,
.navmain > ul > li > a {
    background: var(--cng-blue) !important;
    color: var(--cng-white) !important;
    border-color: var(--cng-blue) !important;
}

/* NAV HOVER */
.navmain > ul > li:hover > a,
.navmain > ul > li > a:hover {
    background: var(--cng-blue-hover) !important;
    color: var(--cng-white) !important;
}

/* ORDER BUTTON */
.navmain-cta,
.navmain-cta a {
    background: var(--cng-blue-active) !important;
    color: var(--cng-white) !important;
}

/* DROPDOWNS */
.navmain-subcontainer,
.navmain-columns,
.navmain-columns-col,
.navmain-links,
.navmain-link,
.navmain-link a {
    background: var(--cng-white) !important;
    color: var(--cng-blue) !important;
}

.navmain-link:hover,
.navmain-link:hover a {
    background: #f2f6fb !important;
    color: var(--cng-blue) !important;
}

/* MOBILE MENU */
.navmain-mobile-home,
.navmain-mobile-icon {
    background: var(--cng-blue) !important;
    color: var(--cng-white) !important;
}

/* CTA ABOVE FOOTER */
.cta-container,
.cta-container .background,
.cta {
    background: var(--cng-blue-active) !important;
    color: var(--cng-white) !important;
}

/* FOOTER */
.footermain,
.footermain-background,
.footermain-background-inner {
    background: var(--cng-blue) !important;
    color: var(--cng-white) !important;
}

.footermain-inner,
.footermain-col,
.footermain-box {
    background: transparent !important;
}

/* FOOTER HEADINGS */
.footermain-heading {
    color: var(--cng-white) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding-bottom: 12px;
}

/* FOOTER TEXT */
.footermain,
.footermain p,
.footermain span,
.footermain li,
.footermain div {
    color: var(--cng-light) !important;
}

/* FOOTER LINKS */
.footermain a,
.footermain-link a {
    color: var(--cng-light) !important;
    text-decoration: none !important;
}

.footermain a:hover,
.footermain-link a:hover {
    color: var(--cng-white) !important;
}

/* FOOTER ICONS */
.footermain i {
    color: var(--cng-accent) !important;
}

/* CONTACT BOXES */
.linkblocks-linkblock,
.linkblocks-linkblock a {
    background: var(--cng-blue-hover) !important;
    color: var(--cng-white) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

/* COPYRIGHT */
.copyrightmain {
    background: var(--cng-dark) !important;
    color: var(--cng-white) !important;
}

.copyrightmain-inner,
.copyright-logos {
    background: transparent !important;
}

.copyrightmain,
.copyrightmain *,
.copyrightmain a {
    color: var(--cng-white) !important;
}

/* BUTTONS */
.btn-primary,
.button1.color1,
.button1.color2,
input[type="submit"],
button[type="submit"] {
    background: var(--cng-blue-active) !important;
    border-color: var(--cng-blue-active) !important;
    color: var(--cng-white) !important;
}

.btn-primary:hover,
.button1.color1:hover,
.button1.color2:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--cng-blue-hover) !important;
    border-color: var(--cng-blue-hover) !important;
    color: var(--cng-white) !important;
}

/* Header logo area stays white */
.headermain,
.headermain-design2,
.headermain-inner {
    background: #ffffff !important;
}

/* Top menu bar */
.toolbarmain-container,
.toolbarmain {
    background: #072040 !important;
    color: #ffffff !important;
}

/* Main navigation bar */
.navmain-container,
.navmain,
.navmain > ul,
.navmain > ul > li,
.navmain > ul > li > a {
    background: #072040 !important;
    color: #ffffff !important;
}

/* Hover */
.navmain > ul > li:hover > a,
.navmain > ul > li > a:hover {
    background: #0B2E5C !important;
    color: #ffffff !important;
}

/* Order button */
.navmain-cta a {
    background: #11457F !important;
    color: #ffffff !important;
}

/* Footer */
.footermain,
.footermain-background,
.footermain-background-inner {
    background: #072040 !important;
    color: #ffffff !important;
}

.footermain *,
.copyrightmain * {
    color: #ffffff !important;
}

.copyrightmain {
    background: #04162D !important;
}

/* Mobile & tablet: footer accordion links → gold text */
@media (max-width: 1366px) {
    .footermain-link a,
    .footermain-link a:visited {
        color: #f5a623 !important;
    }
}
/* Override CNG banner auto-fit from layout.min.css — match actual image ratio */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  .cng-banner-slideshow,
  .cng-banner-track,
  .cng-banner-slide,
  .cng-banner-overlay {
    aspect-ratio: 2098 / 749 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .cng-banner-slideshow,
  .cng-banner-track,
  .cng-banner-slide,
  .cng-banner-overlay {
    aspect-ratio: 2098 / 749 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  .cng-banner-slideshow,
  .cng-banner-track,
  .cng-banner-slide,
  .cng-banner-overlay {
    aspect-ratio: 2098 / 749 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
/* Force mobile hamburger menu on tablets too (covers iPad portrait & landscape, incl. iPad Pro) */
@media (min-width: 756px) and (max-width: 1366px) {
  .navmain-container {
    min-height: 54px !important;
    margin-bottom: 0 !important;
  }
  .navmain {
    min-height: 54px !important;
    position: relative !important;
  }

  /* Hide the desktop menu list when mobile menu isn't open */
  .navmain:not(.navmain-mobile) > ul {
    display: none !important;
  }

  /* When mobile menu IS open, force it to stack vertically as a dropdown */
  .navmain.navmain-mobile > ul {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 30 !important;
    background: #072040 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: calc(100vh - 54px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ffc83d #072040 !important;
  }
  .navmain.navmain-mobile > ul::-webkit-scrollbar {
    width: 8px !important;
  }
  .navmain.navmain-mobile > ul::-webkit-scrollbar-track {
    background: #072040 !important;
  }
  .navmain.navmain-mobile > ul::-webkit-scrollbar-thumb {
    background-color: #ffc83d !important;
    border-radius: 4px !important;
  }
  .navmain.navmain-mobile > ul > li {
    display: block !important;
    width: 100% !important;
  }

  /* Hamburger icon */
  .navmain .navmain-mobile-icon {
    display: block !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 24px !important;
    z-index: 20 !important;
  }
  .navmain .navmain-mobile-icon::before,
  .navmain .navmain-mobile-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 32px !important;
    height: 3px !important;
    background: #ffffff !important;
  }
  .navmain .navmain-mobile-icon::before {
    top: 3px !important;
    box-shadow: 0 8px 0 #ffffff !important;
  }
  .navmain .navmain-mobile-icon::after {
    bottom: 3px !important;
  }

  /* Home icon */
  .navmain .navmain-mobile-home {
    display: flex !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    z-index: 20 !important;
  }
  .navmain .navmain-mobile-home::before {
    content: "" !important;
  }
}

/* Colocations (custom19) mega-menu icon — FontAwesome glyph, no image asset exists */
.navmain-icon-custom19 a::before {
  content: none !important;
  background: none !important;
}
.navmain-icon-custom19 .cng-coloc-menu-icon {
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  transform: translateY(-50%) !important;
  width: 33px !important;
  text-align: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--cng-blue, #072040) !important;
  pointer-events: none;
}


/* Cloud-GPU (custom20) mega-menu icon — FontAwesome glyph, no image asset exists */
.navmain-icon-custom20 a::before {
  content: none !important;
  background: none !important;
}
.navmain-icon-custom20 .cng-coloc-menu-icon {
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  transform: translateY(-50%) !important;
  width: 33px !important;
  text-align: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--cng-blue, #072040) !important;
  pointer-events: none;
}