/* osteogen_custom.css — OsteoGen / Impladent brand polish layer
 * Tier 1 of the re-skin escalation ladder.
 * Loaded via OsteoGenHeadInclude.cshtml AFTER swift.css and the Style-asset sheets.
 * Pitfall guards applied throughout:
 *   P4: [data-dw-button] filled paint uses :not() chain so outline/ghost variants are spared
 *   P5: page-footer paint scoped to body > footer / [data-swift-page-footer] (never bare footer{})
 *   P10: header/nav rules scoped via data-attributes, not bare nav selectors
 */

:root {
  --og-primary:      #0E456F;
  --og-primary-dark: #0A3557;
  --og-secondary:    #004C99;
  --og-navy:         #001933;
  --og-light-blue:   #8EB2D9;
  --og-warm:         #F7F6F4;
  --og-ink:          #222222;
  --og-muted:        #555555;
  --og-border:       #E6E6E6;
  --og-alert:        #CC0000;
}

/* === Primary (filled) button hover — filled variant only (P4) === */
[data-dw-button]:not([data-dw-button="outline"]):not([data-dw-button="ghost"]):not([data-dw-button="link"]):hover {
  background-color: var(--og-primary-dark);
  border-color: var(--og-primary-dark);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* === Outline / ghost button hover — soft blue tint (P4 compliant) === */
[data-dw-button="outline"]:hover,
[data-dw-button="ghost"]:hover {
  background-color: rgba(14, 69, 111, 0.08);
  border-color: var(--og-primary);
  color: var(--og-primary);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* === Links — brand accent blue === */
a:not([data-dw-button]) {
  color: var(--og-secondary);
}
a:not([data-dw-button]):hover {
  color: var(--og-primary);
}

/* === Utility / top bar — thin navy strip above the header ===
 * Swift renders the tools row inside the page header; tint the top tools band navy. */
[data-swift-page-header] .top-toolbar,
header .navbar-top,
[data-swift-tools-menu] {
  background-color: var(--og-navy);
  color: #fff;
}
[data-swift-tools-menu] a { color: #fff; }
[data-swift-tools-menu] a:hover { color: var(--og-light-blue); }

/* === Site header — clean white chrome, brand-blue nav hover (P10) === */
[data-swift-page-header] a:hover,
[data-dw-navigation] a:hover {
  color: var(--og-primary);
  text-decoration: none;
}

/* === Logo sizing === */
[data-swift-logo-image] img {
  max-height: 3rem;
  width: auto;
}

/* === Page-level site footer — navy chrome, scoped to landmark only (P5) === */
body > footer,
[data-swift-page-footer] {
  background-color: var(--og-navy);
  color: #cfd8e4;
}
body > footer a,
[data-swift-page-footer] a {
  color: #cfd8e4;
  text-decoration: none;
}
body > footer a:hover,
[data-swift-page-footer] a:hover {
  color: #fff;
}
body > footer h1, body > footer h2, body > footer h3,
body > footer h4, body > footer h5, body > footer h6,
[data-swift-page-footer] h1, [data-swift-page-footer] h2,
[data-swift-page-footer] h3, [data-swift-page-footer] h4 {
  color: #fff;
}

/* === Content / product cards — subtle border on light schemes, blue hover lift === */
[data-dw-colorscheme="light"] .card,
[data-dw-colorscheme="lightgrey1"] .card,
[data-dw-colorscheme="lightgrey2"] .card {
  box-shadow: none;
  border: 1px solid var(--og-border);
  border-radius: 0.25rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-dw-colorscheme="light"] .card:hover,
[data-dw-colorscheme="lightgrey1"] .card:hover,
[data-dw-colorscheme="lightgrey2"] .card:hover {
  border-color: var(--og-light-blue);
  box-shadow: 0 2px 10px rgba(14, 69, 111, 0.08);
}

/* === Focus ring — brand-blue for keyboard accessibility === */
:focus-visible {
  outline: 2px solid var(--og-secondary);
  outline-offset: 2px;
}

/* === Featured products — Feature paragraphs read as product cards (item-type scoped, not page-id) ===
 * Stock Feature renders icon-left + text-right with a small figure.icon-4. On this site Features
 * only appear in the homepage featured row, so scope to the item type and turn them into centered
 * cards with a large product photo on top. */
[data-dw-itemtype="swift-v2_feature" i] .d-flex.align-items-start {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
[data-dw-itemtype="swift-v2_feature" i] figure.icon-4 {
  width: auto;
  height: auto;
  margin: 0 auto 1rem auto;
}
[data-dw-itemtype="swift-v2_feature" i] figure.icon-4 img {
  max-height: 150px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === Mobile header overflow guard ===
 * The stock Swift header tools/nav row can push past a 375px viewport (dropdown + icons).
 * Clamp the header landmark and let the top-bar phone wrap. Scoped to <=576px so desktop
 * layout is untouched. */
@media (max-width: 575.98px) {
  header,
  [data-swift-page-header] {
    overflow-x: clip;
  }
  header .nav-wrapper,
  [data-swift-page-header] .nav-wrapper,
  header .nav-item.position-static {
    max-width: 100%;
    overflow-x: clip;
  }
  header .text-nowrap,
  [data-swift-page-header] .text-nowrap {
    white-space: normal !important;
  }
  /* Final clamp: the empty related-content nav dropdown is absolutely positioned and
   * escapes ancestor clip, leaving a ~50px phantom scroll. It carries no content, so
   * clamping the page x-overflow on phones is safe (off-canvas menu is fixed-position). */
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* === PLP left-rail category menu — brand list styling === */
[data-swift-facets] .list-group-item.active,
.facet-group .active {
  background-color: var(--og-primary);
  border-color: var(--og-primary);
}

/* =============================================================================
 * HEADER MENU-BAR POLISH — Option B (icons · carets · hover/active · dropdowns)
 * -----------------------------------------------------------------------------
 * Mirror of the reusable distribution/layers/theme-nav-polish/ overlay, inlined
 * here because osteogen_custom.css is the sheet Area 3 actually loads (via
 * OsteoGenHeadInclude.cshtml, AFTER swift.css + the Style-asset sheets).
 *
 * Data prerequisite (NOT css): the 5 top SHOP2 groups were given child ecom
 * groups so Swift-v2_MenuRelatedContent/Menu.cshtml sees rootNode.Nodes.Any()
 * and renders the .megamenu panel. Group nav nodes carry a GroupId (not a page
 * `Icon` PropertyItem), so icons come from CSS mask-injection keyed by href.
 * No template edit, no custom code (P10: header rules scoped via data-attrs).
 * ========================================================================== */

/* Borderless band — no top/bottom hairline on the desktop category bar */
.megamenu-wrapper > nav.d-flex { padding-block: .15rem; gap: .25rem; }

/* The wider (icon + caret) nav row shares a flex row with the header search
 * field, whose inner wrapper carries a hardcoded min-width:260px that refuses to
 * shrink and forces horizontal overflow at ~1440px. Relax it so the search fits
 * the row (stays comfortably usable at ~190px). Scoped to the search field. */
[data-dw-itemtype="swift-v2_searchfield"],
[data-dw-itemtype="swift-v2_searchfield"] .js-async-fetch-placeholder { min-width: 0 !important; }

/* Lay out icon + label + caret on one row on the top-level items.
 * Tighter horizontal padding + gap keeps the icon/caret additions from widening
 * the nav row enough to push the header search field past the viewport. */
.megamenu-wrapper > nav > .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-inline: .3rem;
  border-radius: .25rem;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* Category icons — mask-image tinted with currentColor (recolours on hover/active).
 * Keyed by href slug so they appear on the desktop megamenu AND mobile off-canvas. */
[data-swift-menu] a.nav-link[href$="osteogen-synthetic-bone-graft"]::before,
[data-swift-menu] a.nav-link[href$="membranes-wound-care"]::before,
[data-swift-menu] a.nav-link[href$="human-bone-allografts"]::before,
[data-swift-menu] a.nav-link[href$="screws-fixation-tristar"]::before,
[data-swift-menu] a.nav-link[href$="graft-accessories-instruments"]::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -0.15em;
}
[data-swift-menu] a.nav-link[href$="osteogen-synthetic-bone-graft"]::before { -webkit-mask-image: url("/Files/Images/osteogen/nav-icons/bone.svg"); mask-image: url("/Files/Images/osteogen/nav-icons/bone.svg"); }
[data-swift-menu] a.nav-link[href$="membranes-wound-care"]::before { -webkit-mask-image: url("/Files/Images/osteogen/nav-icons/shield-plus.svg"); mask-image: url("/Files/Images/osteogen/nav-icons/shield-plus.svg"); }
[data-swift-menu] a.nav-link[href$="human-bone-allografts"]::before { -webkit-mask-image: url("/Files/Images/osteogen/nav-icons/layers.svg"); mask-image: url("/Files/Images/osteogen/nav-icons/layers.svg"); }
[data-swift-menu] a.nav-link[href$="screws-fixation-tristar"]::before { -webkit-mask-image: url("/Files/Images/osteogen/nav-icons/screw.svg"); mask-image: url("/Files/Images/osteogen/nav-icons/screw.svg"); }
[data-swift-menu] a.nav-link[href$="graft-accessories-instruments"]::before { -webkit-mask-image: url("/Files/Images/osteogen/nav-icons/instruments.svg"); mask-image: url("/Files/Images/osteogen/nav-icons/instruments.svg"); }

/* Caret on top items that have a dropdown; rotates when open/hovered */
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: .42em;
  height: .42em;
  margin-left: .05rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}
/* The link's text-decoration-underline-hover uses the SAME ::after pseudo as this
 * caret; when the panel opens it repurposes ::after into an underline and zeroes the
 * caret's side border, so the chevron vanishes. Force the chevron to own ::after in
 * every open state (hover / .show / aria-expanded) — keep it a rotated (animated)
 * chevron, never let it collapse. */
.megamenu-wrapper > nav > .nav-item.dropdown:hover > .nav-link::after,
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link.show::after,
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link[aria-expanded="true"]::after {
  /* The underline rule also positions ::after absolutely at the link's bottom-left
   * (its underline geometry) — reset position or the caret lands UNDER the item. */
  position: static !important;
  inset: auto !important;
  display: inline-block !important;
  width: .42em !important;
  height: .42em !important;
  border: 0 !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: translateY(1px) rotate(-135deg);
}

/* Hover + active affordances (desktop) */
@media (min-width: 992px) {
  .megamenu-wrapper > nav > .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  .megamenu-wrapper > nav > .nav-item.dropdown:hover > .nav-link::after { transform: translateY(1px) rotate(-135deg); }

  /* Keep the dropdown reachable while the mouse travels to it. The panel opens
   * only while the item is :hover'd and is a child, so any dead space on the
   * cursor's path drops the hover — snapping the panel shut and reverting the
   * caret (reads as "the arrow disappears"). Two dead zones to close:
   *   1. Vertical — pin the panel flush to the bar (no gap below the link).
   *   2. Horizontal — the panel is narrower than these long category labels, so a
   *      straight-down move from the right of the label lands beside the panel.
   *      Widen it to at least the trigger width so every downward path lands on it. */
  .megamenu-wrapper > nav > .nav-item.dropdown > .dropdown-menu,
  .megamenu-wrapper > nav > .nav-item.dropdown > .megamenu {
    margin-top: 0;
    min-width: 100%;
  }
  /* Vertical bridge over the Popper gap. The panel is opened by Bootstrap/Popper
   * (data-bs-toggle="dropdown") which positions it ~16px below the trigger with a
   * transform — a real dead gap the cursor falls into, dropping the hover so the JS
   * closes the panel. Anchor the bridge to the ITEM (position:relative) and gate it
   * on the item HAVING an open panel via :has(.show) — NOT :hover, which is already
   * lost inside the gap. Because the bridge is the item's own ::after, resting on it
   * counts as being over the item (no item.mouseleave → panel stays open) and it
   * hit-tests inside the item. z-index lifts it above the header layout. Height must
   * exceed the ~16px offset; 1.25rem = 20px with margin. */
  .megamenu-wrapper > nav > .nav-item.dropdown:has(> .dropdown-menu.show)::after,
  .megamenu-wrapper > nav > .nav-item.dropdown:has(> .megamenu.show)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1.25rem;
    z-index: 1001;
  }

  .megamenu-wrapper > nav > .nav-item > .nav-link:hover,
  .megamenu-wrapper > nav > .nav-item.dropdown:hover > .nav-link {
    background-color: rgba(14, 69, 111, .07);
    color: var(--og-primary);
  }

  .megamenu-wrapper > nav > .nav-item > .nav-link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 0 var(--og-primary);
    color: var(--og-primary);
    border-radius: .25rem .25rem 0 0;
  }
}

/* Dropdown / megamenu panel polish: soft shadow + tidy links */
.megamenu-wrapper .megamenu,
.megamenu-wrapper .dropdown-menu.dropdown-menu-shadow {
  box-shadow: 0 10px 26px rgba(0, 25, 51, .12);
}
.megamenu-wrapper .megamenu-col .nav-link:hover { color: var(--og-primary); }
.megamenu-wrapper .dropdown-menu .dropdown-item:hover {
  background-color: rgba(14, 69, 111, .07);
  color: var(--og-primary);
}

/* Leaf subcategory landing pages: suppress stock empty-state placeholders so a
 * clicked subcategory shows a clean landing (breadcrumb + heading + description),
 * not the "navigation will be shown here" editor placeholder + empty repeater bar.
 * No-op on populated categories (those item types render real links/tiles). */
[data-dw-itemtype="swift-v2_productlistnavigation"] .alert.alert-dark,
[data-dw-itemtype="swift-v2_productlistitemrepeater"] .alert.alert-dark {
  display: none !important;
}