/* AKMSecure — Component Styles
 * Custom interaction states, scroll behavior, and UI polish
 * Loaded on all pages alongside brand-tokens.css and animations.css
 */

/* ===== Mobile Menu Scroll Lock ===== */
/* Default: scrolling enabled */
html, body {
  overflow: visible !important;
  overflow-y: auto !important;
}

/* Only lock scroll when menu is open */
html.menu-open,
html.menu-open body {
  overflow: hidden;
  height: 100%;
}

/* Ensure CMS safe mode always allows scrolling */
html.cms-safe,
html.cms-safe body {
  overflow: visible !important;
  overflow-y: auto !important;
  height: auto !important;
}

/* Override menu lock in CMS safe mode */
html.cms-safe.menu-open,
html.cms-safe.menu-open body {
  overflow: visible !important;
  overflow-y: auto !important;
}

/* ===== Active Navigation State ===== */
.nav-active {
  position: relative;
  font-weight: 600 !important;
}

.nav-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

/* ===== Link Hover States ===== */
/* Arrow icon animation on hover */
a [data-lucide="arrow-up-right"],
a svg.lucide-arrow-up-right {
  transition: transform 200ms ease;
}

a:hover [data-lucide="arrow-up-right"],
a:hover svg.lucide-arrow-up-right {
  transform: translate(2px, -2px);
}

/* Read more links in dark cards */
.flex.items-center.space-x-2 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== Card Hover States ===== */
/* White feature cards */
.bg-white.border.border-gray-200.p-8 {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.bg-white.border.border-gray-200.p-8:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Black feature cards */
.bg-black.text-white.p-8,
.bg-black.text-white.p-6 {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.bg-black.text-white.p-8:hover,
.bg-black.text-white.p-6:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(255, 255, 255, 0.08);
}

/* ===== Footer Link Hover States ===== */
footer .nav-link {
  transition: color 200ms ease, text-decoration 200ms ease;
}

footer .nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

footer ul a.nav-link.text-gray-400:hover {
  color: #ffffff;
}

/* ===== Form Focus States ===== */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #00B3C6;
  outline-offset: 2px;
}

/* HubSpot form focus overrides */
.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
  outline: 2px solid #00B3C6 !important;
  outline-offset: 2px !important;
  border-color: #00B3C6 !important;
}