/* Keep the stock Aperture layout contract while CISS owns the primary navigation row. */
.aperture-theme {
  --ciss-theme-font: Ubuntu, sans-serif;
  --ciss-theme-heading-font: Ubuntu, sans-serif;
  --ciss-theme-header-background: var(--dnn-color-tertiary-light, #3c7a9a);
  --ciss-theme-header-text: var(--dnn-color-tertiary-contrast, #fff);
  --ciss-theme-control-radius: 6px;
}

.aperture-ciss-menu-shell {
  flex: 1 1 auto;
  min-width: 0;
}

/* The stock Aperture logo link adds 36px of vertical padding and the active
   menu preset can force an 80px row. CISS shares Aperture's existing row, so
   keep one compact 64px header instead of stacking both spacing contracts. */
.aperture-theme .aperture-ciss-header .logo-menu-bar {
  padding-top: 0;
  padding-bottom: 0;
}

.aperture-theme .aperture-ciss-header .logo-menu-bar > .aperture-container {
  min-height: 64px;
}

.aperture-theme .aperture-ciss-header a[id*="dnnLOGO"] {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-top: 0;
  padding-bottom: 0;
}

.aperture-theme .aperture-ciss-header a[id*="dnnLOGO"] img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 52px;
  object-fit: contain;
}

.aperture-ciss-utility,
.aperture-ciss-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.aperture-ciss-utility a,
.aperture-ciss-utility span {
  color: var(--dnn-color-tertiary-contrast, #fff);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.aperture-ciss-utility a:hover,
.aperture-ciss-utility a:focus {
  color: var(--dnn-color-primary-light, #1aaee3);
}

.aperture-ciss-header .am {
  position: static;
  width: 100%;
  background: transparent !important;
  font-family: var(--acme-menu-font-family, inherit);
}

.aperture-ciss-header .am-sticky {
  position: static;
}

.aperture-ciss-header .am-header-inner {
  max-width: none;
  min-height: 64px;
  height: 64px !important;
  padding: 0;
  justify-content: flex-end;
}

.aperture-theme .aperture-ciss-header .am :is(.am-nav, .am-nav-item, .am-nav-link) {
  height: 64px !important;
}

/* Menu-bar presets are loaded after the bridge and use !important on the
   main row height. Include the runtime id and preset-bearing body so the
   Aperture integration keeps its own compact row in every preset. */
body[class*="acme-mb-"] .aperture-theme .aperture-ciss-header #cissMenu.am .am-header-inner,
body[class*="acme-mb-"] .aperture-theme .aperture-ciss-header #cissMenu.am .am-nav,
body[class*="acme-mb-"] .aperture-theme .aperture-ciss-header #cissMenu.am .am-nav-item,
body[class*="acme-mb-"] .aperture-theme .aperture-ciss-header #cissMenu.am .am-nav-link {
  min-height: 64px !important;
  height: 64px !important;
}

.aperture-ciss-header .am-header,
.aperture-ciss-header .am-sticky {
  box-shadow: none !important;
}

/* The outer Aperture header is already sticky. Keep CISS' scroll state from
   shrinking or repainting only the menu subtree inside the blue row. */
.aperture-ciss-header .am-sticky.am-scrolled .am-header {
  box-shadow: none !important;
}

.aperture-ciss-header .am-sticky.am-scrolled .am-header-inner {
  min-height: 64px;
  height: 64px !important;
}

.aperture-ciss-header .am-brand {
  display: none;
}

.aperture-ciss-header .am .am-header.am-style-modern .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-minimal .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-bold .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-elegant .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-german .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-centered .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-centered.am-scrolled .am-header-inner {
  min-height: 64px;
  height: 64px !important;
  max-width: none;
  padding: 0;
}

/* Elegant and Centered split the navigation around CISS' own central brand.
   Flatten those three grid tracks into the existing Aperture logo/menu row. */
.aperture-ciss-header .am .am-header.am-style-elegant .am-header-inner,
.aperture-ciss-header .am .am-header.am-style-centered .am-header-inner {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-end;
  gap: 0;
}

.aperture-ciss-header .am .am-header.am-style-elegant .am-nav-left,
.aperture-ciss-header .am .am-header.am-style-centered .am-nav-left,
.aperture-ciss-header .am .am-header.am-style-elegant .am-nav-right,
.aperture-ciss-header .am .am-header.am-style-centered .am-nav-right {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  padding: 0;
  overflow: visible;
}

.aperture-ciss-header .am .am-header.am-style-elegant .am-bar-right,
.aperture-ciss-header .am .am-header.am-style-centered .am-bar-right {
  display: flex;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  margin-left: 0.75rem;
}

.aperture-ciss-header .am .am-header.am-style-elegant .am-nav,
.aperture-ciss-header .am .am-header.am-style-centered .am-nav {
  gap: 0.75rem;
}

/* Structural adaptations stay in the bridge; color ownership does not. */
.aperture-ciss-header .am .am-header.am-style-bold .am-nav {
  align-self: center;
  min-height: 64px;
  padding: 0 0.35rem;
}

.aperture-ciss-header[data-acme-appearance="preset"] .am .am-header.am-style-bold .am-nav {
  background: var(--acme-color-inverse, var(--am-fg, #0f0a09)) !important;
}

/* The standalone Elegant demo includes promotional copy in pseudo-elements.
   That text belongs to ACME sample content, not to a portable skin object. */
.aperture-ciss-header .am .am-header.am-style-elegant {
  min-height: 0;
}

.aperture-ciss-header .am .am-header.am-style-elegant::before,
.aperture-ciss-header .am .am-header.am-style-elegant::after {
  content: none;
  display: none;
}

.aperture-ciss-header .am .am-header.am-style-elegant .am-header-inner {
  top: 0;
}

/* positionMega() already computes the width that fits beside Aperture's logo
   and utility controls. The card must honor that computed panel width. */
.aperture-ciss-header .am-panels > .am-mega .am-mega-card {
  width: 100%;
  max-width: 100%;
}

.aperture-ciss-header .am-mega-card,
.aperture-ciss-header .am-mega-card * {
  min-width: 0;
}

/* Aperture owns menu surfaces whenever Site appearance or Theme menu mode is
   selected. CSS presets may still style page blocks, while menu-bar presets
   can change spacing/typography without painting an unrelated second theme. */
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-sticky,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-header {
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Host menu mode is a real theme adapter, not merely a transparent header.
   This selector intentionally outranks the preset SSR contract: page blocks
   may keep their selected preset while the menu inherits Aperture tokens. */
.aperture-theme .aperture-ciss-header.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .aperture-ciss-menu-shell .am[data-acme-appearance] {
  --background: var(--dnn-color-background, #fff) !important;
  --foreground: var(--dnn-color-foreground, #000) !important;
  --card: var(--dnn-color-background, #fff) !important;
  --card-foreground: var(--dnn-color-foreground, #000) !important;
  --popover: var(--dnn-color-background, #fff) !important;
  --popover-foreground: var(--dnn-color-foreground, #000) !important;
  --primary: var(--dnn-color-primary, #00a5e0) !important;
  --primary-foreground: var(--dnn-color-primary-contrast, #fff) !important;
  --secondary: var(--dnn-color-background-light, #f5f5f5) !important;
  --secondary-foreground: var(--dnn-color-foreground, #000) !important;
  --muted: var(--dnn-color-background-light, #f5f5f5) !important;
  --muted-foreground: var(--dnn-color-foreground-light, #333) !important;
  --accent: var(--dnn-color-primary, #00a5e0) !important;
  --accent-foreground: var(--dnn-color-primary-contrast, #fff) !important;
  --border: var(--dnn-color-background-dark, #ccc) !important;
  --input: var(--dnn-color-background-dark, #ccc) !important;
  --ring: var(--dnn-color-primary, #00a5e0) !important;
  --am-bg: var(--dnn-color-background, #fff) !important;
  --am-card: var(--dnn-color-background, #fff) !important;
  --am-fg: var(--dnn-color-foreground, #000) !important;
  --am-muted: var(--dnn-color-background-light, #f5f5f5) !important;
  --am-muted-30: color-mix(in srgb, var(--dnn-color-background-light, #f5f5f5) 72%, transparent) !important;
  --am-muted-fg: var(--dnn-color-foreground-light, #333) !important;
  --am-primary: var(--dnn-color-primary, #00a5e0) !important;
  --am-primary-fg: var(--dnn-color-primary-contrast, #fff) !important;
  --am-primary-05: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 5%, transparent) !important;
  --am-primary-10: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 10%, transparent) !important;
  --am-primary-12: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 12%, transparent) !important;
  --am-primary-20: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 20%, transparent) !important;
  --am-primary-30: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 30%, transparent) !important;
  --am-primary-40: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 40%, transparent) !important;
  --am-primary-50: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 14%, var(--dnn-color-background, #fff)) !important;
  --am-border: var(--dnn-color-background-dark, #ccc) !important;
  --am-border-50: color-mix(in srgb, var(--dnn-color-background-dark, #ccc) 58%, transparent) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am :is(
  .am-mega-card,
  .am-dd-card,
  .am-shop-content,
  .am-services-content,
  .am-tabs-body,
  .am-designs-body,
  .am-about-body
) {
  background-color: var(--dnn-color-background, #fff) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am :is(
  .am-tabs-header,
  .am-designs-header,
  .am-services-header,
  .am-shop-sidebar,
  .am-shop-benefits,
  .am-services-tabs,
  .am-drawer-search,
  .am-drawer-body
) {
  background: var(--dnn-color-background-light, #f5f5f5) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-header.am-style-modern .am-nav {
  background: color-mix(in srgb, var(--dnn-color-tertiary-contrast, #fff) 12%, transparent) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-header .am-nav-item.am-expanded > .am-nav-link,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-header .am-nav-link:hover,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-header .am-nav-link:focus-visible {
  color: var(--acme-host-header-text, var(--dnn-color-tertiary-contrast, #fff)) !important;
  background: color-mix(in srgb, var(--dnn-color-tertiary-contrast, #fff) 16%, transparent) !important;
  box-shadow: none !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am :is(.am-shop-badge, .am-dd-badge) {
  color: var(--dnn-color-primary-dark, #0091c5) !important;
  background: color-mix(in srgb, var(--dnn-color-primary, #00a5e0) 13%, var(--dnn-color-background, #fff)) !important;
}

/* Aperture has broad header-link color rules. Keep primary calls to action
   legible in every link state, including browsers restoring :visited. */
.aperture-ciss-header .am .am-services-cta,
.aperture-ciss-header .am .am-services-cta:visited,
.aperture-ciss-header .am .am-services-cta:hover,
.aperture-ciss-header .am .am-services-cta:focus-visible {
  color: var(--am-primary-fg, var(--dnn-color-primary-contrast, #fff)) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-header :is(
  .am-nav-link,
  .am-brand-name,
  .am-brand-suffix,
  .am-mobile-toggle,
  .am-search-input,
  .am-search-submit
) {
  color: var(--acme-host-header-text, var(--ciss-theme-header-text, var(--dnn-color-tertiary-contrast, #fff))) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-search-inner {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-search-input::placeholder {
  color: rgba(255, 255, 255, 0.82) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-mobile-toggle,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-mobile-toggle:hover,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-mobile-toggle:focus-visible {
  color: var(--acme-host-header-text, var(--ciss-theme-header-text, var(--dnn-color-tertiary-contrast, #fff))) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The drawer belongs to the host skin in host menu mode. Reuse the same header
   surface so light portal logos remain visible and branding stays consistent. */
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-drawer-head {
  color: var(--acme-host-header-text, var(--ciss-theme-header-text, #fff)) !important;
  background: var(--acme-host-header-bg, var(--ciss-theme-header-background, #3c7a9a)) !important;
  border-color: color-mix(in srgb, currentColor 24%, transparent) !important;
}

.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-drawer-close,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-drawer-close:hover,
.aperture-ciss-header:is([data-acme-appearance="site"], [data-acme-menu-mode="theme"]) .am .am-drawer-close:focus-visible {
  color: inherit !important;
  background: transparent !important;
}

.aperture-ciss-header .am .am-drawer-brand-img,
.aperture-ciss-header .am .am-drawer-brand-visual {
  display: block;
  height: 36px !important;
  width: auto !important;
  max-width: 155px;
  object-fit: contain;
}

.aperture-ciss-header .am-search {
  margin-left: auto;
}

/* Aperture's global `header a` rule paints links white. Simple drawer links
   have no stronger color of their own, so they disappeared on the white
   mobile drawer while button-based items remained visible. The appearance
   token rules carry !important, so the drawer defense must as well. */
.aperture-ciss-header .am-drawer-link {
  color: var(--am-fg, #0f0a09) !important;
}

.aperture-ciss-header .am-drawer-link:hover,
.aperture-ciss-header .am-drawer-link:focus {
  color: var(--am-primary, #ef4444) !important;
}

.aperture-ciss-ai-content,
.aperture-ciss-edit-menu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.aperture-ciss-ai-content:hover,
.aperture-ciss-ai-content:focus,
.aperture-ciss-edit-menu:hover,
.aperture-ciss-edit-menu:focus {
  color: #fff;
  background: var(--dnn-color-primary-dark, #008cc0);
  text-decoration: none;
}

@media (max-width: 1023px) {
  .aperture-ciss-header .logo-menu-bar > .aperture-container {
    flex-wrap: wrap;
  }

  .aperture-ciss-menu-shell { min-width: 44px; }

  .aperture-ciss-header .am-drawer {
    left: var(--am-admin-left, 0px);
    width: calc(100% - var(--am-admin-left, 0px));
  }

  .aperture-ciss-utility {
    flex-wrap: wrap;
    margin-left: auto;
  }

  .aperture-ciss-header .am-header-inner {
    height: 64px;
    padding: 0;
  }

  .aperture-ciss-header .am-sticky.am-scrolled .am-header-inner {
    height: 64px;
  }

  .aperture-ciss-header .am .am-header .am-mobile-toggle {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
  }

  .aperture-ciss-header .am-search {
    display: none;
  }

  .aperture-ciss-auth {
    display: none;
  }

  .aperture-ciss-ai-content,
  .aperture-ciss-edit-menu {
    padding: 0 9px;
  }
}

/* Aperture has enough horizontal room for the compact three-group demo menu
   before the generic 1320px switch-over. Do not leave the tablet hamburger
   sitting beside a visible desktop composition at browser zoom levels. */
@media (min-width: 1180px) {
  .aperture-ciss-header .am .am-mobile-toggle {
    display: none !important;
  }

  .aperture-ciss-header .am .am-nav {
    display: flex !important;
  }

  .aperture-ciss-header .am .am-search {
    display: flex !important;
    align-items: center;
  }
}

@media (max-width: 720px) {
  .aperture-ciss-utility { padding-bottom: 8px; }
  .aperture-ciss-ai-content span {
    display: none;
  }

  .aperture-ciss-ai-content {
    justify-content: center;
    width: 30px;
    padding: 0;
  }
}

/* Mobile content gutters
   Aperture's 2rem pane padding can combine with authored module shells that
   also use desktop padding. On the DNN Defender home page that reduced the
   primary report card to 246px inside a 390px viewport. Keep the skin gutter
   compact and remove only the identified report shell's duplicate padding;
   desktop layout and unrelated HTML modules retain their authored spacing. */
@media (max-width: 767px) {
  .aperture-theme .aperture-main .aperture-content-pane {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  .aperture-theme .aperture-content-pane
    .DNNModuleContent:has(#dnnd-whats-new) > .Normal > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #dnnd-whats-new {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  #dnnd-whats-new > div:first-child {
    padding: clamp(1.125rem, 5vw, 1.5rem) !important;
  }
}