/* tyten-sectors.css — Sectors mega-menu (full-width, askvinny pattern).
   Loaded on every page that uses the canonical nav. The panel sits inside
   <nav> with position:absolute;top:100%, so it anchors below the nav
   regardless of nav padding/height. */

/* Mobile-drawer fix: each page styles #navDrawer / #tytenNavDrawer only inside
   its @media(max-width:768px) block. Outside that, the drawer fell back to
   default block layout and rendered above the page content (visible on
   desktop overscroll). Default to hidden; per-page @media rules override
   to display:flex on mobile (later cascade wins at narrow widths). */
#navDrawer,
#tytenNavDrawer{display:none}

.tyten-sectors-trigger{
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:#ccc;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  font-family:'Wix Madefor Display','Wix Madefor Text',sans-serif;
  transition:color .2s;
  display:inline-flex;
  align-items:center;
  gap:4px;
  -webkit-appearance:none;
  appearance:none;
}
.tyten-sectors-trigger:hover,
.tyten-sectors-trigger[aria-expanded="true"]{color:#fff}
/* Home page intentionally has a bigger nav (links are 18px/600 via .nav-links a). */
/* Match the trigger to its siblings on home only — identified by the unique inline padding. */
nav[style*="padding:28px 56px"] .tyten-sectors-trigger{font-size:18px;font-weight:600}
.tyten-sectors-trigger .tyten-caret{
  font-size:10px;
  line-height:1;
  transition:transform .2s;
  display:inline-block;
}
.tyten-sectors-trigger[aria-expanded="true"] .tyten-caret{transform:rotate(180deg)}

.tyten-mega-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(20,20,22,.98);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid #2a2a2e;
  border-bottom:1px solid #2a2a2e;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.6);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.tyten-mega-menu[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}

.tyten-mega-inner{
  max-width:1200px;
  margin:0 auto;
  padding:32px 48px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.tyten-mega-card{
  display:block;
  padding:24px 56px 24px 24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  text-decoration:none;
  transition:border-color .2s, background .2s, transform .2s;
  position:relative;
}
.tyten-mega-card:hover,
.tyten-mega-card:focus-visible{
  border-color:rgba(221,238,170,.4);
  background:rgba(221,238,170,.05);
  transform:translateY(-2px);
}
.tyten-mega-card:focus-visible{outline:2px solid #DDEEAA;outline-offset:2px}
.tyten-mega-eyebrow{
  font-family:'Wix Madefor Display',sans-serif;
  font-size:10px;
  font-weight:700;
  color:rgba(221,238,170,.7);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.tyten-mega-card h3{
  font-family:'Wix Madefor Display',sans-serif;
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.tyten-mega-card p{
  font-size:14px;
  color:#aaa;
  line-height:1.55;
  margin:0;
}
.tyten-mega-arrow{
  position:absolute;
  top:24px;
  right:24px;
  color:#DDEEAA;
  font-size:18px;
  opacity:0;
  transition:opacity .2s, transform .2s;
}
.tyten-mega-card:hover .tyten-mega-arrow,
.tyten-mega-card:focus-visible .tyten-mega-arrow{opacity:1;transform:translateX(4px)}

@media(max-width:768px){
  /* Mobile: dropdown trigger hidden (mobile nav is the hamburger drawer); */
  /* Sectors links live in the drawer instead. */
  .tyten-sectors-trigger{display:none}
  .tyten-mega-menu{display:none !important}
}