/* ==========================================================================
   The Ideal Card — 2026-11 design system: site nav + mobile menu
   Ported from the Ideal Brands handoff prototype (The-Ideal-Card-Prototype/
   index.html + css/responsive.css), keeping only the rules the ported markup
   uses. Everything is namespaced — classes .tc-*, ids #tc-*, variables
   --tc-*, keyframes tc-* — so it cannot collide with css/style.css or
   css/futuristic.css, which still style the rest of the site.
   Loaded on every public page (layouts/partials/site-nav.blade.php).
   ========================================================================== */

/* ==========================================================
       Animation runtime (Framer-motion-adjacent)
       ========================================================== */
.tc-scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.tc-scroll-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--tc-accent) 0%, var(--tc-pop) 100%);
  transition: width 120ms linear;
}

/* ==========================================================
       NAV
       ========================================================== */
.tc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  transition:
    background 240ms,
    backdrop-filter 240ms,
    border-color 240ms;
  border-bottom: 1px solid transparent;
}
.tc-nav.tc-scrolled {
  background: color-mix(in srgb, var(--tc-canvas) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom-color: var(--tc-line);
}
.tc-nav-brand {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
.tc-nav-brand img {
  height: 100%;
  width: auto;
  display: block;
}
.tc-nav-brand img.tc-logo-dark {
  display: none;
}
[data-theme="light"] .tc-nav-brand img.tc-logo-white {
  display: none;
}
[data-theme="light"] .tc-nav-brand img.tc-logo-dark {
  display: block;
}
.tc-nav-links {
  display: flex;
  gap: 32px;
}
.tc-nav-links a {
  font-family: var(--tc-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-ink-2);
  transition: color 200ms;
}
.tc-nav-links a:hover {
  color: var(--tc-ink);
}
.tc-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================
       ECOMMERCE COMPONENTS
       ========================================================== */
.tc-cart-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--tc-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-ink-2);
  transition:
    color 200ms,
    border-color 200ms;
  background: transparent;
  cursor: pointer;
}
.tc-cart-btn:hover {
  color: var(--tc-ink);
  border-color: var(--tc-ink-3);
}
.tc-cart-btn svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================
       NEWSLETTER band
       ========================================================== */
.tc-theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--tc-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-ink-2);
  transition:
    color 200ms,
    border-color 200ms;
}
.tc-theme-btn:hover {
  color: var(--tc-ink);
  border-color: var(--tc-ink-3);
}
.tc-theme-btn svg {
  width: 16px;
  height: 16px;
}
.tc-theme-btn .tc-sun {
  display: none;
}
[data-theme="light"] .tc-theme-btn .tc-sun {
  display: block;
}
[data-theme="light"] .tc-theme-btn .tc-moon {
  display: none;
}
.tc-btn-nav {
  height: 40px;
  padding: 0 18px;
  font-size: 13.5px;
}
@media (max-width: 780px) {
  .tc-nav-links {
    display: none;
  }
}

/* ==========================================================
       MOBILE NAV / HAMBURGER (default hidden on desktop)
       ========================================================== */
.tc-nav-burger {
  display: none;
}
.tc-nav-mobile-overlay {
  display: none;
}

@media (max-width: 900px) {
  .tc-nav {
    padding: 14px 20px;
  }
  .tc-nav-actions {
    gap: 8px;
  }
  .tc-nav-desktop-only {
    display: none !important;
  }
  #tc-aiSearchOpen {
    display: none !important;
  }
  .tc-nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    gap: 5px;
    border: 1px solid var(--tc-line);
    border-radius: 999px;
    background: transparent;
    color: var(--tc-ink);
    cursor: pointer;
    padding: 0;
  }
  .tc-nav-burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition:
      transform 240ms ease,
      opacity 200ms ease;
  }

  .tc-nav-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--tc-canvas) 96%, transparent);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
    overflow-y: auto;
  }
  .tc-nav-mobile-overlay[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }
  .tc-nav-mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 96px 24px 40px;
    max-width: 480px;
    margin: 0 auto;
  }
  .tc-nav-mobile-inner a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--tc-font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--tc-ink);
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--tc-line);
  }
  .tc-nav-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }
  .tc-nav-mobile-cta a {
    justify-content: center;
    min-height: 52px;
    font-size: 15px;
    border-bottom: 0;
  }
}

/* ==========================================================
       MOBILE NAV — hamburger + overlay
       ========================================================== */
.tc-nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--tc-line);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--tc-ink);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  gap: 4px;
}
.tc-nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
@media (max-width: 900px) {
  .tc-nav-links {
    display: none;
  }
  .tc-nav-desktop-only {
    display: none !important;
  }
  #tc-aiSearchOpen {
    display: none !important;
  }
  .tc-nav-burger {
    display: inline-flex;
  }
}
.tc-nav-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--tc-canvas);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.tc-nav-mobile-overlay[hidden] {
  display: none;
}
.tc-nav-mobile-overlay .tc-nav-mobile-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--tc-ink);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 12px;
}
.tc-nav-mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--tc-font-display);
  font-size: 28px;
  font-weight: 600;
}
.tc-nav-mobile-inner > a {
  color: var(--tc-ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--tc-line);
}
.tc-nav-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.tc-nav-mobile-cta .tc-btn {
  text-align: center;
  font-size: 16px;
}
@media (max-width: 1000px) {
  .tc-nav .tc-nav-links {
    display: none !important;
  }
  .tc-nav .tc-nav-burger {
    display: inline-flex !important;
  }
  .tc-nav .tc-nav-desktop-only {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .tc-nav {
    padding: 12px 16px !important;
  }
  .tc-nav .tc-nav-actions {
    gap: 8px !important;
  }
  .tc-nav .tc-btn-nav {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 420px) {
  .tc-nav .tc-btn-nav {
    display: none !important;
  }
}

/* ==========================================================================
   Live-site integrations — not in the prototype, styled to its tokens.
   ========================================================================== */

/* ⌘K search button (the prototype's inline style, moved here). */
.tc-nav-search {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-ink-2);
  background: transparent;
  border: 1px solid var(--tc-line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 0 10px;
}
.tc-nav-search svg {
  width: 14px;
  height: 14px;
}
/* Class-less on purpose: the light theme colours class-less spans (base.css). */
.tc-nav-search > span {
  opacity: 0.75;
}

.tc-nav-links a.tc-active {
  color: var(--tc-ink);
}

/* Cart count badge — cart.js injects .cart-badge into [data-cart-badge];
   restyled to the prototype's .cart-count. */
.tc-cart-btn .cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tc-pop);
  color: #0b0c0f;
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--tc-canvas);
}

/* Signed-in user menu. */
.tc-nav-user {
  position: relative;
}
.tc-nav-user-btn {
  gap: 8px;
  padding: 0 14px 0 5px;
}
.tc-nav-user-btn svg {
  width: 14px;
  height: 14px;
}
.tc-nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--tc-accent-2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.tc-nav-user-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-nav-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--tc-card);
  border: 1px solid var(--tc-line-2);
  border-radius: 14px;
  box-shadow: var(--tc-shadow-elev);
}
.tc-nav-user-menu a,
.tc-nav-user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--tc-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-ink-2);
}
.tc-nav-user-menu a:hover,
.tc-nav-user-menu button:hover {
  background: var(--tc-canvas-3);
  color: var(--tc-ink);
}
.tc-nav-user-menu form {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--tc-line);
}

/* Mobile menu CTAs are buttons (they open the sign-in / sign-up modals);
   give them the full-width treatment the prototype gave its links. */
.tc-nav-mobile-cta form {
  margin: 0;
}
.tc-nav-mobile-cta .tc-btn {
  width: 100%;
  justify-content: center;
}

/* Products mega-menu (js/nav-enhancements.js) builds itself with inline
   styles that read the old theme's variables; point those at the new tokens. */
.tc-nav .mega-menu {
  --bg-secondary: var(--tc-card);
  --border: var(--tc-line-2);
  --text-muted: var(--tc-ink-3);
  --text-secondary: var(--tc-ink-2);
  --accent-hover: var(--tc-accent);
  font-family: var(--tc-font-body);
}
.tc-nav .mega-menu a {
  font-family: var(--tc-font-body);
}

/* nav-enhancements.js wraps the shop link in an inline-block <div> for the
   mega-menu; as an inline box the link would size to that wrapper's 16px line
   and stretch every nav item to 25px. Block keeps it at the prototype's 22px. */
.tc-nav-links [data-mega-menu] {
  display: block;
}

/* Responsive fix (not in the prototype): between ~1000px and ~1180px the
   prototype's links wrap ("How it / works"), growing the bar to 100px+, and
   just above its 1000px collapse point they collide with the logo and the
   action buttons. Keep labels on one line, tighten the gap, and hand over to
   the burger menu at 1080px instead of 1000px. */
.tc-nav-links a {
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .tc-nav-links {
    gap: 22px;
  }
}
@media (max-width: 1080px) {
  .tc-nav .tc-nav-links {
    display: none !important;
  }
  .tc-nav .tc-nav-burger {
    display: inline-flex !important;
  }
  .tc-nav .tc-nav-desktop-only {
    display: none !important;
  }
}

/* Burger -> X while the mobile menu is open (prototype rules; they were missed
   by the first extraction pass). Scoped to where the burger is visible. */
@media (max-width: 1080px) {
  .tc-nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .tc-nav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .tc-nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
}