/* Shared mobile canvas and safe areas. The announcement owns the top inset once. */
html[data-ddhs-shell] {
  background: #0f2840 !important;
  --dd-safe-top: env(safe-area-inset-top, 0px);
  --dd-safe-right: env(safe-area-inset-right, 0px);
  --dd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dd-safe-left: env(safe-area-inset-left, 0px);
}
@media (max-width: 1024px) {
  html[data-ddhs-shell] body:is(.site-v2, .home-v2) {
    --v2-gutter: max(clamp(1.25rem, 4vw, 2.5rem), var(--dd-safe-left), var(--dd-safe-right));
  }
  html[data-ddhs-shell="bar"] body {
    --dd-ann-height: calc(44px + var(--dd-safe-top));
    padding-top: var(--dd-ann-height) !important;
  }
  html[data-ddhs-shell="bar"] .announcement-bar {
    box-sizing: border-box;
    top: 0 !important;
    height: auto !important;
    min-height: calc(36px + var(--dd-safe-top));
    padding-top: calc(.55rem + var(--dd-safe-top)) !important;
    padding-bottom: .55rem !important;
    background: #0f2840 !important;
  }
  html[data-ddhs-shell="bar"] .announcement-content {
    padding-left: max(var(--space-4, 16px), var(--dd-safe-left)) !important;
    padding-right: max(var(--space-4, 16px), var(--dd-safe-right)) !important;
  }
  html[data-ddhs-shell="bar"] .header {
    top: var(--dd-ann-height) !important;
  }
  html[data-ddhs-shell="bar"] .header .nav {
    padding-left: max(24px, var(--dd-safe-left)) !important;
    padding-right: max(24px, var(--dd-safe-right)) !important;
  }
  html[data-ddhs-shell="bar"] body.home-v2 {
    --dd-ann-height: calc(44px + var(--dd-safe-top));
  }
  html[data-ddhs-shell="bar"] body.home-v2 .announcement-bar {
    min-height: calc(var(--v2-ann-min, 44px) + var(--dd-safe-top));
    padding-top: var(--dd-safe-top) !important;
    padding-bottom: 0 !important;
  }
  html[data-ddhs-shell="bar"] body.home-v2 .announcement-content,
  html[data-ddhs-shell="bar"] body.home-v2 .header .nav {
    padding-left: max(var(--v2-gutter), var(--dd-safe-left)) !important;
    padding-right: max(var(--v2-gutter), var(--dd-safe-right)) !important;
  }
  html[data-ddhs-shell="bar"] body.home-v2 .v2-sec {
    scroll-margin-top: calc(var(--dd-ann-height) + 80px);
  }
  /* Barless templates reserve only the device inset, never a fictional campaign. */
  html[data-ddhs-shell="plain"] body {
    padding-top: var(--dd-safe-top) !important;
    padding-left: var(--dd-safe-left);
    padding-right: var(--dd-safe-right);
    box-sizing: border-box;
  }
  html[data-ddhs-shell="plain"] body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dd-safe-top);
    background: #0f2840;
    z-index: 10005;
    pointer-events: none;
  }
  html[data-ddhs-shell="plain"] .top-bar,
  html[data-ddhs-shell="plain"] .mobile-topbar {
    top: var(--dd-safe-top);
    background: #0f2840;
    padding-left: max(20px, var(--dd-safe-left));
    padding-right: max(20px, var(--dd-safe-right));
  }
  html[data-ddhs-shell="plain"] .sidebar {
    padding-top: var(--dd-safe-top);
    padding-bottom: var(--dd-safe-bottom);
    box-sizing: border-box;
  }
  html[data-ddhs-shell="plain"] .back-link {
    top: calc(22px + var(--dd-safe-top));
    left: max(24px, var(--dd-safe-left));
  }
  html[data-ddhs-bottom] body {
    padding-bottom: max(var(--dd-fixed-bottom, calc(60px + var(--dd-safe-bottom))), var(--dd-safe-bottom)) !important;
  }
  html[data-ddhs-shell] .sticky-mobile-cta {
    box-sizing: border-box;
    height: calc(58px + var(--dd-safe-bottom));
    padding-bottom: var(--dd-safe-bottom);
    padding-left: var(--dd-safe-left);
    padding-right: var(--dd-safe-right);
  }
  html[data-ddhs-shell] body.home-v2 .v2-sticky-bar {
    height: calc(60px + var(--dd-safe-bottom));
    padding-bottom: 0;
    padding-left: var(--dd-safe-left);
    padding-right: var(--dd-safe-right);
  }
  html[data-ddhs-shell] body.home-v2 .v2-sticky-bar a {
    padding-bottom: var(--dd-safe-bottom);
  }
  html[data-ddhs-shell] .mobile-cta {
    padding-bottom: calc(.75rem + var(--dd-safe-bottom));
    padding-left: max(16px, var(--dd-safe-left));
    padding-right: max(16px, var(--dd-safe-right));
  }
  html[data-ddhs-shell] .error-phone-strip {
    padding-bottom: calc(1rem + var(--dd-safe-bottom));
    padding-left: max(24px, var(--dd-safe-left));
    padding-right: max(24px, var(--dd-safe-right));
  }
  html[data-ddhs-shell] .scroll-top-btn {
    left: max(24px, var(--dd-safe-left)) !important;
    bottom: calc(var(--dd-fixed-bottom, 58px) + 16px) !important;
  }
  html[data-ddhs-shell] #mobileMenuOverlay {
    top: var(--dd-ann-height) !important;
    height: calc(100vh - var(--dd-ann-height)) !important;
    height: calc(100dvh - var(--dd-ann-height)) !important;
  }
  html[data-ddhs-shell] #mobileMenuOverlay .mm-topbar {
    padding-left: max(24px, var(--dd-safe-left)) !important;
    padding-right: max(24px, var(--dd-safe-right)) !important;
  }
  html[data-ddhs-shell] #mobileMenuOverlay .mm-content {
    padding-left: var(--dd-safe-left);
    padding-right: var(--dd-safe-right);
  }
  html[data-ddhs-shell] #mobileMenuOverlay .mm-inner {
    padding-bottom: var(--dd-safe-bottom);
  }
}
@media (max-width: 767px) {
  html[data-ddhs-shell="bar"] body.home-v2 {
    --dd-ann-height: calc(48px + var(--dd-safe-top));
  }
}
@media (max-width: 480px) {
  html[data-ddhs-shell="bar"] body:not(.home-v2) .header .nav {
    padding-left: max(16px, var(--dd-safe-left)) !important;
    padding-right: max(16px, var(--dd-safe-right)) !important;
  }
}
@media (max-width: 640px) {
  html[data-ddhs-shell="bar"] body:not(.home-v2) {
    --dd-ann-height: calc(36px + var(--dd-safe-top));
  }
  html[data-ddhs-shell="bar"] body:not(.home-v2) .announcement-bar {
    padding-top: calc(.45rem + var(--dd-safe-top)) !important;
    padding-bottom: .45rem !important;
  }
}
@media (max-width: 480px) {
  html[data-ddhs-shell] .error-phone-strip {
    padding-bottom: calc(.875rem + var(--dd-safe-bottom));
  }
}