/* ==========================================================================
   SIGN MAX — LAYOUT (header, nav, footer, page shells)
   ========================================================================== */

/* ---- Top utility bar ---- */
.smx-topbar {
  background: var(--smx-ink); color: rgba(255,255,255,0.78);
  font-size: var(--smx-fs-sm);
}
.smx-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--smx-space-4); min-height: 42px; }
/* inline-flex keeps the icon on the same line as the text (the global
   svg{display:block} reset would otherwise stack it above the label) */
.smx-topbar a { display: inline-flex; align-items: center; gap: 0.45em; color: rgba(255,255,255,0.78); white-space: nowrap; }
.smx-topbar a:hover { color: #fff; }
.smx-topbar a svg { flex-shrink: 0; }
.smx-topbar__contact { display: flex; align-items: center; gap: var(--smx-space-5); }
.smx-topbar__meta { display: flex; gap: var(--smx-space-4); align-items: center; }

/* ---- Header ---- */
.smx-header {
  position: sticky; top: 0; z-index: var(--smx-z-header);
  background: rgba(255,255,255,0.85); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--smx-border);
  transition: box-shadow var(--smx-dur), background var(--smx-dur);
}
.smx-header.is-scrolled { box-shadow: var(--smx-shadow-sm); background: rgba(255,255,255,0.96); }
/* Without backdrop-filter (older browsers / GPU compositing off) a translucent
   header lets page content bleed through and makes nav text contrast
   unpredictable while scrolling — fall back to an opaque background. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .smx-header { background: #fff; }
}
.smx-header__inner { display: flex; align-items: center; gap: var(--smx-space-5); min-height: var(--smx-header-h); }
.smx-logo { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.smx-logo img { max-height: 46px; width: auto; }
.smx-logo__text { font-family: var(--smx-font-head); font-weight: 700; font-size: 1.5rem; color: var(--smx-ink); letter-spacing: -0.02em; }
.smx-logo__text span { color: var(--smx-primary); }

/* ---- Primary nav + mega menu ---- */
.smx-nav { display: flex; align-items: center; gap: var(--smx-space-2); margin-inline: auto; }
.smx-nav > .menu-item { position: relative; }
.smx-nav > .menu-item > a {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.6rem 0.9rem; border-radius: var(--smx-radius-sm);
  font-weight: 500; color: var(--smx-ink-soft);
}
.smx-nav > .menu-item > a:hover,
.smx-nav > .menu-item.current-menu-item > a { color: var(--smx-primary); background: var(--smx-primary-050); }
.smx-nav .menu-item-has-children > a::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--smx-dur-fast);
}
.smx-nav .sub-menu, .smx-megamenu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--smx-border); border-radius: var(--smx-radius);
  box-shadow: var(--smx-shadow-lg); padding: var(--smx-space-3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--smx-dur) var(--smx-ease); z-index: var(--smx-z-header);
}
.smx-nav .menu-item:hover > .sub-menu,
.smx-nav .menu-item:focus-within > .sub-menu,
.smx-nav .menu-item:hover > .smx-megamenu { opacity: 1; visibility: visible; transform: none; }
.smx-nav .sub-menu a { display: block; padding: 0.6rem 0.8rem; border-radius: var(--smx-radius-sm); color: var(--smx-ink-soft); font-weight: 500; }
.smx-nav .sub-menu a:hover { background: var(--smx-bg-soft); color: var(--smx-primary); }

/* Mega menu (full-width category panel) */
.smx-megamenu { left: 50%; transform: translateX(-50%) translateY(8px); width: min(960px, 92vw); padding: var(--smx-space-6); }
.smx-nav .menu-item:hover > .smx-megamenu { transform: translateX(-50%); }
.smx-megamenu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--smx-space-5); }
.smx-megamenu__col h4 { font-size: var(--smx-fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--smx-primary); margin-bottom: var(--smx-space-3); }
.smx-megamenu__col a { display: block; padding: 0.4rem 0; color: var(--smx-ink-soft); }
.smx-megamenu__col a:hover { color: var(--smx-primary); padding-left: 6px; }

/* ---- Header actions ---- */
.smx-header__actions { display: flex; align-items: center; gap: var(--smx-space-2); flex-shrink: 0; }
.smx-iconbtn {
  position: relative; width: 46px; height: 46px; border-radius: var(--smx-radius-pill);
  display: grid; place-items: center; color: var(--smx-ink); transition: background var(--smx-dur-fast), color var(--smx-dur-fast);
}
.smx-iconbtn:hover { background: var(--smx-bg-soft); color: var(--smx-primary); }
.smx-iconbtn svg { width: 22px; height: 22px; }
.smx-iconbtn__count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--smx-primary); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: var(--smx-radius-pill); display: grid; place-items: center; line-height: 1;
}
.smx-burger { display: none; }

/* ---- Search overlay ---- */
.smx-search-overlay {
  position: fixed; inset: 0; z-index: var(--smx-z-overlay); background: rgba(26,26,26,0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: start center; padding-top: 14vh;
  opacity: 0; visibility: hidden; transition: opacity var(--smx-dur), visibility var(--smx-dur);
}
.smx-search-overlay.is-open { opacity: 1; visibility: visible; }
.smx-search-overlay__box { width: min(680px, 92vw); background: #fff; border-radius: var(--smx-radius-lg); padding: var(--smx-space-5); box-shadow: var(--smx-shadow-lg); }
.smx-search-overlay form { display: flex; gap: var(--smx-space-2); }

/* ---- Footer ---- */
.smx-footer { background: var(--smx-ink); color: rgba(255,255,255,0.65); padding-top: var(--smx-space-9); }
.smx-footer a { color: rgba(255,255,255,0.65); }
.smx-footer a:hover { color: #fff; }
.smx-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr; gap: var(--smx-space-6); padding-bottom: var(--smx-space-8); }
.smx-footer h4 { color: #fff; font-size: var(--smx-fs-md); margin-bottom: var(--smx-space-4); }
.smx-footer__col ul li { margin-bottom: 0.7rem; }
.smx-footer__brand .smx-logo__text { color: #fff; }
.smx-footer__brand p { margin: var(--smx-space-3) 0; max-width: 34ch; }
.smx-footer__contact li { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; }
.smx-footer__contact svg { width: 18px; height: 18px; color: var(--smx-secondary); flex-shrink: 0; margin-top: 3px; }
.smx-social { display: flex; gap: var(--smx-space-2); margin-top: var(--smx-space-4); }
.smx-social a { width: 42px; height: 42px; border-radius: var(--smx-radius-pill); background: rgba(255,255,255,0.08); display: grid; place-items: center; }
.smx-social a:hover { background: var(--smx-primary); }
.smx-social svg { width: 18px; height: 18px; }
.smx-footer__badges { display: flex; flex-wrap: wrap; gap: var(--smx-space-4); align-items: center; padding: var(--smx-space-5) 0; border-top: 1px solid rgba(255,255,255,0.1); }
.smx-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--smx-space-4);
  padding: var(--smx-space-5) 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--smx-fs-sm);
}
.smx-footer__bottom nav { display: flex; gap: var(--smx-space-4); }

/* ---- Page hero (inner pages / archives) ---- */
.smx-pagehero { background: var(--smx-bg-soft); padding-block: var(--smx-space-7); border-bottom: 1px solid var(--smx-border); }
.smx-pagehero h1 { margin-bottom: var(--smx-space-2); }

/* ---- Mobile drawer ---- */
.smx-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(380px, 86vw); background: #fff; z-index: var(--smx-z-modal);
  transform: translateX(100%); transition: transform var(--smx-dur) var(--smx-ease); box-shadow: var(--smx-shadow-lg);
  display: flex; flex-direction: column; padding: var(--smx-space-5); overflow-y: auto;
}
.smx-drawer.is-open { transform: none; }
.smx-drawer__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: var(--smx-z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--smx-dur); }
.smx-drawer__backdrop.is-open { opacity: 1; visibility: visible; }
.smx-drawer .menu-item a { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--smx-border); color: var(--smx-ink); font-weight: 500; }
.smx-drawer .sub-menu { padding-left: var(--smx-space-4); }

/* drawer sections */
.smx-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--smx-space-4); }
.smx-drawer__search { display: flex; gap: 0.5rem; margin-bottom: var(--smx-space-4); }
.smx-drawer__search .smx-input { min-height: 48px; }
.smx-drawer__account { background: var(--smx-bg-soft); border-radius: var(--smx-radius); padding: var(--smx-space-4); margin-bottom: var(--smx-space-4); }
.smx-drawer__hello { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--smx-ink); margin-bottom: 0.7rem; }
.smx-drawer__hello img { border-radius: 50%; }
.smx-drawer__account-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: var(--smx-fs-sm); }
.smx-drawer__account-links a { color: var(--smx-ink-soft); font-weight: 500; }
.smx-drawer__account-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.smx-drawer__quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: var(--smx-space-4); }
.smx-drawer__quick a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.8rem 0.4rem; border: 1px solid var(--smx-border); border-radius: var(--smx-radius-sm);
  color: var(--smx-ink); font-size: var(--smx-fs-xs); font-weight: 600;
}
.smx-drawer__quick a:hover { border-color: var(--smx-primary); color: var(--smx-primary); }
.smx-drawer__quick .smx-iconbtn__count { position: absolute; top: 6px; right: 8px; }
.smx-drawer__nav { flex: 1; }
.smx-drawer__quote { margin-top: var(--smx-space-4); }
.smx-drawer__contact { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--smx-space-4); padding-top: var(--smx-space-4); border-top: 1px solid var(--smx-border); font-size: var(--smx-fs-sm); }
.smx-drawer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--smx-text); }
.smx-drawer__contact a:hover { color: var(--smx-primary); }

/* ---- Account dropdown (header) ---- */
.smx-account-menu { position: relative; }
.smx-account-menu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 240px;
  background: #fff; border: 1px solid var(--smx-border); border-radius: var(--smx-radius);
  box-shadow: var(--smx-shadow-lg); padding: var(--smx-space-4); z-index: var(--smx-z-header);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--smx-dur) var(--smx-ease);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.smx-account-menu:hover .smx-account-menu__panel,
.smx-account-menu:focus-within .smx-account-menu__panel { opacity: 1; visibility: visible; transform: none; }
.smx-account-menu__hello { font-weight: 700; color: var(--smx-ink); font-size: var(--smx-fs-sm); padding-bottom: 0.5rem; border-bottom: 1px solid var(--smx-border); margin-bottom: 0.35rem; }
.smx-account-menu__panel > a:not(.smx-btn) {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--smx-radius-sm);
  color: var(--smx-ink-soft); font-weight: 500; font-size: var(--smx-fs-sm);
}
.smx-account-menu__panel > a:not(.smx-btn):hover { background: var(--smx-bg-soft); color: var(--smx-primary); }
.smx-account-menu__panel svg { color: var(--smx-accent); flex-shrink: 0; }
.smx-account-menu__logout { border-top: 1px solid var(--smx-border); margin-top: 0.35rem; padding-top: 0.6rem !important; }
.smx-account-menu__logout svg { color: var(--smx-primary) !important; }
.smx-iconbtn.is-logged-in::after {
  content: ""; position: absolute; bottom: 7px; right: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--smx-success); border: 2px solid #fff;
}