/**
 * CartCubes - global front-end + editor styling.
 * Most design tokens live in theme.json; this file holds behavior-specific
 * styles (sticky header, footer links, smooth scrolling) that theme.json
 * cannot express.
 */

html {
  scroll-behavior: smooth;
}

/* Clean light sticky header */
.sch-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  overflow: visible;
  transition: box-shadow 0.25s ease;
}

/* Blur on a pseudo-element so fixed mobile menu overlays aren't clipped to the header */
.sch-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  pointer-events: none;
}

.sch-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(11, 38, 64, 0.08);
}

.sch-header.is-scrolled::before {
  background: rgba(255, 255, 255, 0.96);
}

/* Lock equal top/bottom space regardless of inline presets */
.sch-header {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.sch-header .sch-bar {
  overflow: visible;
  align-items: center;
}

/* Keep top/bottom spacing symmetric - no stray margins on header children */
.sch-header .sch-bar > * {
  margin-top: 0;
  margin-bottom: 0;
}

.sch-brand,
.sch-brand-mark {
  margin: 0;
}

/* Equal side columns so the nav is perfectly centered on desktop */
.sch-bar > .sch-brand {
  flex: 1 1 0;
  min-width: 0;
}

.sch-bar > .sch-actions {
  flex: 1 1 0;
  justify-content: flex-end;
}

.sch-bar > .wp-block-navigation {
  flex: 0 1 auto;
}

/* Hide duplicate Contact / Login links on desktop inline nav only */
@media (min-width: 782px) {
  .sch-bar .sch-nav-contact-mobile,
  .sch-bar .sch-nav-login-mobile {
    display: none;
  }
}

/* Hide the actions Login control inside the mobile overlay (nav has its own) */
@media (max-width: 781px) {
  .sch-actions .sch-login {
    display: none;
  }
}

/* Brand lockup */
.sch-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none !important;
  line-height: 1;
}

.sch-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: block;
  box-shadow: 0 2px 8px rgba(57, 156, 255, 0.2);
  transition: transform 0.18s ease;
}

.sch-brand-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--primary, #0b2640);
}

.sch-brand-accent {
  color: var(--wp--preset--color--base, #399cff);
}

.sch-brand:hover .sch-brand-mark {
  transform: translateY(-1px);
}

/* Header navigation links (dark on light) */
.sch-header .wp-block-navigation {
  font-weight: 500;
}

.sch-header
  .wp-block-navigation
  .wp-block-navigation-item
  .wp-block-navigation-item__content {
  position: relative;
  padding: 8px 8px;
  border-radius: 0;
  color: var(--wp--preset--color--body-neutral, #555e72);
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.sch-header .wp-block-navigation a:hover,
.sch-header .wp-block-navigation a:focus {
  text-decoration: none !important;
}

.sch-header
  .wp-block-navigation
  .wp-block-navigation-item
  .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--base, #399cff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.sch-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary, #0b2640);
  background: transparent;
}

.sch-header
  .wp-block-navigation
  .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}

/* No special active/current-page highlight in the desktop nav */
.sch-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.sch-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--body-neutral, #555e72);
  background: transparent;
}

.sch-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.sch-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after {
  transform: scaleX(0);
}

.sch-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:hover,
.sch-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary, #0b2640);
  background: transparent;
}

.sch-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:hover::after,
.sch-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}

/* Desktop Login dropdown (actions column) */
.sch-actions {
  gap: 12px;
  position: relative;
}

.sch-login {
  position: relative;
}

.sch-login__toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(11, 38, 64, 0.12);
  border-radius: 100px;
  background: #ffffff;
  color: var(--wp--preset--color--primary, #0b2640);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sch-login__toggle::-webkit-details-marker {
  display: none;
}

.sch-login__toggle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.18s ease;
}

.sch-login[open] .sch-login__toggle {
  border-color: rgba(57, 156, 255, 0.45);
  background: var(--wp--preset--color--primary-50, #ebf5ff);
  color: var(--wp--preset--color--primary, #0b2640);
}

.sch-login[open] .sch-login__toggle::after {
  transform: rotate(-135deg) translateY(-1px);
}

.sch-login__toggle:hover {
  border-color: rgba(57, 156, 255, 0.45);
  background: var(--wp--preset--color--primary-50, #ebf5ff);
}

.sch-login__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(11, 38, 64, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(11, 38, 64, 0.14);
}

.sch-login__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--wp--preset--color--primary, #0b2640);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.sch-login__menu a:hover,
.sch-login__menu a:focus {
  background: var(--wp--preset--color--primary-50, #ebf5ff);
  color: var(--wp--preset--color--base, #399cff);
}

/* WP submenu fallback (mobile overlay + any leftover desktop submenus) */
.sch-header .wp-block-navigation .wp-block-navigation__submenu-container {
  border: 1px solid rgba(11, 38, 64, 0.08);
  border-radius: 14px;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(11, 38, 64, 0.14);
  padding: 8px;
  gap: 2px;
}

.sch-header
  .wp-block-navigation
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary, #0b2640) !important;
  padding: 10px 12px !important;
  border-radius: 10px;
  white-space: nowrap;
}

.sch-header
  .wp-block-navigation
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content::after {
  display: none !important;
}

.sch-header
  .wp-block-navigation
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--primary-50, #ebf5ff) !important;
  color: var(--wp--preset--color--base, #399cff) !important;
}

/* Mobile overlay: keep submenu readable on dark panel */
.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__submenu-container {
  position: static;
  width: 100%;
  margin: 0;
  padding: 4px 0 4px 12px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 17px;
  font-weight: 500;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Header CTA -> blue filled pill */
.sch-header .wp-block-button__link {
  background: var(--wp--preset--color--base, #399cff);
  color: #ffffff;
  border-radius: 100px;
  padding: 11px 26px;
  box-shadow: 0 2px 8px rgba(57, 156, 255, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.sch-header .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary-600, #2e7ecf);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(57, 156, 255, 0.38);
}

/* Burger toggle button */
.sch-header .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--primary, #0b2640);
  background: var(--wp--preset--color--primary-50, #ebf5ff);
  border: 1px solid rgba(11, 38, 64, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sch-header .wp-block-navigation__responsive-container-open:hover {
  background: var(--wp--preset--color--primary-100, #d7ebff);
  border-color: rgba(11, 38, 64, 0.18);
}

.sch-header .wp-block-navigation__responsive-container-open svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Mobile menu overlay - force full-screen dark panel */
.sch-header .wp-block-navigation__responsive-container.is-menu-open,
.sch-header .wp-block-navigation__responsive-container.has-modal-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100001 !important;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  background-color: var(--wp--preset--color--primary, #0b2640) !important;
  color: #ffffff !important;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 4.5rem 1.25rem 2rem;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 4px;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation-item {
  width: 100%;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation-item__content {
  color: #ffffff !important;
  font-size: 20px;
  font-weight: 600;
  padding: 14px 16px;
  width: 100%;
  border-radius: 12px;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation-item__content:hover,
.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .current-menu-item > .wp-block-navigation-item__content,
.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .current_page_item > .wp-block-navigation-item__content,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .current-menu-item > .wp-block-navigation-item__content,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .current_page_item > .wp-block-navigation-item__content {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .sch-nav-contact-mobile .wp-block-navigation-item__content,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .sch-nav-contact-mobile .wp-block-navigation-item__content {
  margin-top: 12px;
  background: #ffffff !important;
  color: var(--wp--preset--color--primary, #0b2640) !important;
  text-align: center;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__responsive-container-close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 10px;
  z-index: 2;
}

.sch-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close svg,
.sch-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__responsive-container-close svg {
  fill: currentColor;
}

/* Let the open menu scroll if it's taller than the screen */
.sch-header .wp-block-navigation__responsive-container.is-menu-open,
.sch-header .wp-block-navigation__responsive-container.has-modal-open {
  overflow-y: auto;
}

/* Full-screen overlay above the WP admin bar on mobile */
@media (max-width: 781px) {
  .admin-bar .sch-header .wp-block-navigation__responsive-container.is-menu-open,
  .admin-bar .sch-header .wp-block-navigation__responsive-container.has-modal-open {
    top: 0 !important;
  }

  .admin-bar .sch-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close,
  .admin-bar .sch-header .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-container-close {
    top: max(1rem, env(safe-area-inset-top, 0px));
  }
}

@media screen and (min-width: 783px) {
  .admin-bar .sch-header .wp-block-navigation__responsive-container.is-menu-open,
  .admin-bar .sch-header .wp-block-navigation__responsive-container.has-modal-open {
    top: 32px !important;
  }
}

/* Footer link colors (override theme link color inside dark footer) */
.sch-footer-list a,
.sch-footer-legal a {
  color: #cdd9e6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sch-footer-list a:hover,
.sch-footer-legal a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* SureContact newsletter embed, restyled to blend into the dark footer.
   The embed injects its own id-scoped <style> at runtime, so these overrides
   use !important to win against that higher-specificity, later-loaded CSS. */
.sch-footer-newsletter {
  max-width: 100%;
}

.sch-footer-newsletter .scf-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.sch-footer-newsletter .scf-fields {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.sch-footer-newsletter .scf-field.scf-full,
.sch-footer-newsletter .scf-field.scf-half {
  grid-column: span 1 !important;
}

.sch-footer-newsletter .scf-label {
  color: #cdd9e6 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.sch-footer-newsletter .scf-required {
  color: #8fb4d8 !important;
}

.sch-footer-newsletter .scf-input,
.sch-footer-newsletter .scf-textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

.sch-footer-newsletter .scf-input::placeholder,
.sch-footer-newsletter .scf-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.sch-footer-newsletter .scf-input:hover,
.sch-footer-newsletter .scf-textarea:hover,
.sch-footer-newsletter .scf-input:focus,
.sch-footer-newsletter .scf-textarea:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}

.sch-footer-newsletter .scf-submit-btn {
  width: 100% !important;
  margin-top: 8px !important;
  background: #ffffff !important;
  color: #0b2640 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Mobile header + burger menu */
@media (max-width: 781px) {
  .sch-header {
    padding-top: var(--wp--preset--spacing--spacing-16) !important;
    padding-bottom: var(--wp--preset--spacing--spacing-16) !important;
    padding-left: var(--wp--preset--spacing--spacing-16) !important;
    padding-right: var(--wp--preset--spacing--spacing-16) !important;
  }

  .sch-header .sch-bar {
    padding: 4px 8px;
    gap: 12px;
  }

  /* Logo left, burger right */
  .sch-bar > .sch-brand {
    flex: 1 1 auto;
  }

  .sch-bar > .wp-block-navigation {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Hide desktop CTA - Contact is in the mobile menu */
  .sch-bar > .sch-actions {
    display: none;
  }

  /* Shorter wordmark on very small screens */
  .sch-brand-name {
    font-size: 19px;
  }

  .sch-brand-mark {
    width: 36px;
    height: 36px;
  }

  /* Force the burger to collapse across the whole mobile range (the theme's
     782px breakpoint), not just WordPress's default 600px. This removes the
     navy "Home" stub that appeared when the menu rendered inline. */
  .sch-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .sch-header
    .wp-block-navigation__responsive-container:not(.is-menu-open):not(
      .has-modal-open
    ) {
    display: none !important;
  }

  /* Override WP core inline nav (600px+) so the open overlay fills the viewport */
  .sch-header .wp-block-navigation__responsive-container.is-menu-open,
  .sch-header .wp-block-navigation__responsive-container.has-modal-open {
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh;
  }
}

/* Desktop: always show the inline menu, never the burger. */
@media (min-width: 782px) {
  .sch-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .sch-header
    .wp-block-navigation__responsive-container:not(.is-menu-open):not(
      .has-modal-open
    ) {
    display: block !important;
  }

  .sch-bar > .sch-actions {
    display: flex;
  }
}

@media (max-width: 480px) {
  .sch-brand-name {
    font-size: 17px;
  }

  .sch-brand {
    gap: 9px;
  }
}