/* ============================================================
   Atlantic Coast Mortgage Store — Header & Nav Redesign
   acm-header.css  (pairs with acm-header.js)
   Adapted for ACM 07/06/2026 (console-tested on AnnieMac) across desktop / 1001 / 953 / 830 / 555 px
   Owns the brand variables — include BEFORE any other acm-* snippet.
   Breakpoint spec: >=1025px desktop layout, <=1024px hamburger mode.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --acm-navy: #091321;
  --acm-navy2: #122647;
  --acm-accent: #015bd7;
  --acm-accent-2: #4d90f8;
}

/* ---------- Top strip: page links ---------- */
.navbar-container {
  background: linear-gradient(90deg, #07101f 0%, #091321 60%, #0d2a5e 100%) !important;
  border-bottom: 1px solid rgba(1, 91, 215, .35);
  padding: 0;
}
.navbar-container .nav.pages .nav-link {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff !important;
  padding: 9px 16px !important;
  position: relative;
  transition: color .15s;
}
.navbar-container .nav.pages .nav-link:hover { color: var(--acm-accent-2) !important; }
/* teal tick rises under link on hover */
.navbar-container .nav.pages .nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: 4px;
  width: 14px; height: 2px; border-radius: 2px; background: var(--acm-accent-2);
  transform: translateX(-50%) scaleX(0); transition: transform .18s ease;
}
.navbar-container .nav.pages .nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
/* dot separators */
.navbar-container .nav.pages .nav-item + .nav-item { position: relative; }
.navbar-container .nav.pages .nav-item + .nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .3);
}

/* ---------- Logo band ---------- */
/* z-index must beat the sticky category bar (z:999) so dropdowns float above it */
.header-container {
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(9, 19, 33, .06), 0 4px 14px rgba(9, 19, 33, .07);
  position: relative;
  z-index: 1040;
}
.header-container::after { content: ''; display: block; height: 3px; background: linear-gradient(90deg, #015bd7, #4d90f8); }

/* search pill */
.header-container input[type="search"],
.header-container input[type="text"] {
  border-radius: 999px 0 0 999px !important;
  border: 1.5px solid #dde3ec !important;
  padding-left: 18px !important;
  background: #f5f7fa !important;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  transition: border-color .15s, box-shadow .15s;
}
.header-container input:focus {
  border-color: var(--acm-accent) !important;
  box-shadow: 0 0 0 3px rgba(1, 91, 215, .15) !important;
  outline: none !important;
  background: #fff !important;
}
.header-container .input-group .btn,
.header-container button[type="submit"] {
  border-radius: 0 999px 999px 0 !important;
  background: var(--acm-accent) !important;
  border-color: var(--acm-accent) !important;
}
/* magnifier icon must read white on the blue button */
.header-container .input-group .btn i,
.header-container .input-group .btn svg,
.header-container button[type="submit"] i,
.header-container button[type="submit"] svg { color: #fff !important; fill: #fff !important; }

/* ---------- Category nav ---------- */
.category-container {
  background: linear-gradient(180deg, #0e2a5c, #091321) !important;
  box-shadow: 0 6px 18px rgba(9, 19, 33, .25);
}
.category-container .header-navbar { padding-top: 2px; padding-bottom: 2px; }
.category-container .nav-link,
.category-container a.dropdown-toggle {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff !important;
  position: relative;
  padding: 10px 14px !important;
  transition: color .15s;
}
/* animated underline — ::before, NOT ::after (that would clobber Bootstrap's caret) */
.category-container .nav-link::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--acm-accent-2); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.category-container .nav-link:hover { color: var(--acm-accent-2) !important; }
.category-container .nav-link:hover::before { transform: scaleX(1); }
.category-container .dropdown-toggle::after { vertical-align: .12em; opacity: .7; transition: opacity .15s; }
.category-container .dropdown-toggle:hover::after { opacity: 1; color: var(--acm-accent-2); }

/* ---------- Dropdown cards (categories + account) ---------- */
.dropdown-menu {
  background: #fff !important;
  border: 1px solid #e6eaf1 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(9, 19, 33, .16), 0 2px 8px rgba(9, 19, 33, .08) !important;
  padding: 8px 0 0 !important;
  margin-top: 8px !important;
  min-width: 220px;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  overflow: hidden;
  animation: acmDrop .18s ease-out;
  transform-origin: top;
}
@keyframes acmDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-menu .dropdown-item {
  color: var(--acm-navy) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin: 0 8px;
  width: calc(100% - 16px);
  transition: background .12s, color .12s;
}
/* indented child categories read lighter */
.dropdown-menu .dropdown-item > span.px-3 { font-weight: 400; color: #3d4d66; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: rgba(1, 91, 215, .10) !important; color: var(--acm-accent) !important; }
.dropdown-menu .dropdown-item:hover > span.px-3 { color: var(--acm-accent); }
/* "Shop All" footer CTA (relabeled from "View {Category}" by acm-header.js) */
.dropdown-menu .dropdown-item.border-top {
  border-top: 1px solid #e6eaf1 !important;
  margin: 6px 0 0 !important;
  border-radius: 0 !important;
  width: 100%;
  display: block;
  padding: 11px 20px !important;
  background: linear-gradient(90deg, var(--acm-accent), var(--acm-accent-2)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}
.dropdown-menu .dropdown-item.border-top:hover { filter: brightness(1.06); color: #fff !important; }
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item[aria-disabled="true"] { color: #9aa7ba !important; font-weight: 400 !important; }

/* ---------- Logo-band action cluster (#acm-right built by acm-header.js) ---------- */
#acm-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#acm-right form { margin: 0; width: 340px !important; flex: 0 0 340px; }
#acm-right .input-group { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; }
#acm-right .input-group > input { width: auto !important; flex: 1 1 auto !important; min-width: 0; height: 42px !important; }
#acm-right .input-group .btn, #acm-right button { height: 42px !important; display: flex; align-items: center; }

.acm-acct { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.acm-acct .nav-link {
  color: var(--acm-navy) !important;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-weight: 600;
  font-size: 14px !important;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px !important;
  border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.acm-acct .nav-link:hover { background: #eef2f7; color: var(--acm-accent) !important; }
.acm-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acm-accent), var(--acm-accent-2));
  color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* balance chip — matched by its link, NOT by position (position guessing hit Register when logged out) */
.acm-acct li:has(a[href*="account_balance"]) .nav-link { background: rgba(1, 91, 215, .09); color: var(--acm-accent) !important; font-weight: 700; }
.acm-acct li:has(a[href*="account_balance"]) .nav-link:hover { background: rgba(1, 91, 215, .16); }
/* cart pill */
.acm-acct li:last-child .nav-link { background: var(--acm-accent); color: #fff !important; padding: 9px 18px !important; }
.acm-acct li:last-child .nav-link:hover { background: var(--acm-accent-2); color: #fff !important; }
/* cart svg has no intrinsic size — renders 0-wide without this */
.acm-acct li:last-child .nav-link svg { width: 19px; height: 17px; flex: 0 0 auto; }

/* account dropdown: pinned statically to kill the Popper reposition flicker */
.acm-acct .nav-item.dropdown { position: relative; }
.acm-acct .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important; left: auto !important; bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  animation: acmFade .15s ease-out !important;
}
@keyframes acmFade { from { opacity: 0; } to { opacity: 1; } }

/* cart count badge (compact mode only) */
.acm-badge { display: none; }
/* search toggle (compact mode only) */
.acm-search-li { display: none; }
#acm-search-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}

/* ---------- Desktop 1025–1279: condense search so it never crowds the logo ---------- */
@media (min-width: 1025px) and (max-width: 1279.98px) {
  #acm-right form { width: 260px !important; flex: 0 0 260px; }
  #acm-right { gap: 8px; }
}
@media (min-width: 1025px) and (max-width: 1119.98px) {
  #acm-right form { width: 210px !important; flex: 0 0 210px; }
}

/* ============================================================
   COMPACT MODE — everything at or below 1024px
   (desktop minimum is 1025px per spec; Bootstrap's native lg
   breakpoint at 992 is overridden throughout this block)
   ============================================================ */
@media (max-width: 1024.98px) {
  .navbar-container { display: none !important; }
  .category-container { display: none !important; }
  /* Bootstrap re-expands its collapse at 992 — keep it off below 1025 */
  .header-container .headerLinks { display: none !important; }
  /* force hamburger visible in the 992–1024 gap; hide the old search-toggle icon */
  .header-container #mobile-slider-button { order: 0; flex: 1 1 0; display: inline-flex !important; justify-content: flex-start; }
  /* hamburger (and its close-X state) in ACM core blue */
  .header-container #mobile-slider-button { color: #015bd7 !important; }
  .header-container #mobile-slider-button span { background: transparent !important; color: #015bd7 !important; }
  .header-container #mobile-slider-button svg { stroke: #015bd7; fill: #015bd7; }
  .header-container #mobile-slider-button i { color: #015bd7 !important; }
  /* account/login/register/phone/wishlist live in the flyout on compact - header keeps search + cart only */
  .acm-acct > li:not(.acm-search-li):not(:last-child) { display: none !important; }
  .header-container nav.header-navbar > button.d-lg-none:not(#mobile-slider-button) { display: none !important; }

  /* row 1: hamburger | centered logo | actions */
  .header-container nav.header-navbar { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
  #acm-right { display: contents; }
  .header-container .navbar-brand { order: 1; flex: 0 1 auto; margin: 0; display: flex; justify-content: center; }
  .header-container .navbar-brand img { max-height: 42px; width: auto; }
  .acm-acct { order: 2; flex: 1 1 0; width: auto; justify-content: flex-end; gap: 8px; }
  .acm-acct li { display: flex; align-items: center; margin: 0 !important; }
  .acm-acct .nav-link { padding: 6px 8px !important; margin: 0 !important; }
  .acm-acct .nav-link:hover { background: var(--acm-accent-2); }
  .acm-acct .dropdown-toggle::after { display: none; }

  /* row 2: search — hidden until toggled */
  #acm-right form { order: 3; flex: 1 1 100% !important; width: 100% !important; max-width: none; display: none !important; }
  nav.acm-search-open #acm-right form { display: flex !important; animation: acmSearchIn .22s cubic-bezier(.2, .8, .3, 1); margin-top: 4px; }
  @keyframes acmSearchIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  #acm-right .input-group { box-shadow: 0 4px 12px rgba(9, 19, 33, .08); border-radius: 999px; }
  #acm-right .input-group > input { height: 36px !important; font-size: 13px !important; border-width: 1px !important; }
  #acm-right .input-group .btn, #acm-right button { height: 36px !important; }

  /* action trio: three matching 38px teal circles */
  #acm-search-toggle { background: var(--acm-accent); color: #fff; }
  #acm-search-toggle:hover { background: var(--acm-accent-2); color: #fff; }
  nav.acm-search-open #acm-search-toggle { background: #eef2f7 !important; color: var(--acm-navy) !important; }
  .acm-search-li { display: flex; }

  .acm-acct .dropdown-toggle { width: 38px; height: 38px; padding: 0 !important; justify-content: center; border-radius: 50% !important; background: transparent !important; }
  .acm-acct .dropdown-toggle:hover { box-shadow: 0 0 0 3px rgba(1, 91, 215, .18); }
  .acm-avatar { width: 38px; height: 38px; font-size: 13.5px; background: var(--acm-accent) !important; }
  .acm-acct .dropdown-toggle:hover .acm-avatar { background: var(--acm-accent-2) !important; }

  /* balance chip hidden — Account Balance lives in the account dropdown (matched by link, not position) */
  .acm-acct li:has(a[href*="account_balance"]) { display: none; }

  /* account name hidden in compact mode — avatar only */
  .acm-acct .acm-name { display: none; }

  /* cart: 38px circle, count badge instead of price text */
  .acm-cart-text { display: none; }
  .acm-acct li:last-child .nav-link { position: relative; width: 38px; height: 38px; min-width: 38px; padding: 0 !important; border-radius: 50% !important; justify-content: center; overflow: visible; }
  .acm-acct li:last-child .nav-link svg { width: 17px; height: 15px; }
  .acm-badge {
    position: absolute; top: -4px; right: -3px;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--acm-navy); color: #fff;
    font-size: 10.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid #fff;
  }
}

/* 992–1024 gap: theme's jQuery slide menu sets inline display —
   un-hide the panel ONLY when its inline style isn't display:none */
@media (min-width: 992px) and (max-width: 1024.98px) {
  .mobile-slider.d-lg-none:not([style*="display: none"]):not([style*="display:none"]) { display: block !important; }
  .mobile-slider-overlay:not([style*="display: none"]):not([style*="display:none"]) { display: block !important; }
}

/* small phones: logo left-justifies next to hamburger */
@media (max-width: 575.98px) {
  .header-container #mobile-slider-button { flex: 0 0 auto; }
  .header-container .navbar-brand { margin: 0 0 0 8px; justify-content: flex-start; }
  .acm-acct { flex: 1 1 0; }
}
@media (max-width: 399.98px) { .header-container .navbar-brand img { max-height: 32px; } }
@media (max-width: 299.98px) { .header-container .navbar-brand img { max-height: 26px; } }