/*
 * Samanvi Mega Menu — Styles
 *
 * SCOPE:  All rules are wrapped in @media (min-width: 769px).
 *         Mobile (≤768px) receives zero bytes of mega menu CSS.
 *         The mobile nav drawer (sam-drawer) is completely separate HTML
 *         and is not affected by any rule here.
 *
 * TOKENS: Match the theme's design system (home.css / footer-mockup.html).
 */

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP ONLY
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {

/* ── CSS Variables ── */
:root {
  --smm-top:        68px;   /* updated dynamically by JS to match real header height */
  --smm-teal:       #00a896;
  --smm-teal-dark:  #028090;
  --smm-blue:       #1f4e8a;
  --smm-black:      #091628;
  --smm-panel-bg:   #ffffff;
  --smm-border:     rgba(0,0,0,.08);
  --smm-divider:    rgba(0,0,0,.07);
  --smm-text:       #091628;
  --smm-text-sec:   #4a6278;
  --smm-text-muted: #8aa3b8;
  --smm-icon-bg:    #f1f5f9;
  --smm-icon-brd:   rgba(0,0,0,.07);
  --smm-hover-bg:   rgba(31,78,138,.05);
  --smm-ease:       cubic-bezier(.22,.68,0,1.2);
}

/* ─────────────────────────────────
   SCRIM
───────────────────────────────── */
.smm-scrim {
  position: fixed;
  inset: 0;
  top: var(--smm-top);
  background: rgba(9,22,40,.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.smm-scrim.smm-scrim--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─────────────────────────────────
   NAV TRIGGER (the <a> in <li>)
───────────────────────────────── */
/* Make the trigger look identical to other GP nav links */
.smm-nav-item .smm-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  user-select: none;
  /* GP already sets padding + line-height on .main-nav ul li a */
}

.smm-trigger .smm-chevron {
  width: 13px;
  height: 13px;
  transition: transform .2s var(--smm-ease);
  flex-shrink: 0;
  margin-left: 1px;
}

/* Open state — chevron rotates */
.smm-nav-item.smm-open .smm-chevron {
  transform: rotate(-180deg);
}

/* Suppress GP's position:absolute sub-menu rules for our item */
.smm-nav-item > ul.sub-menu,
.smm-nav-item ul.sub-menu {
  display: none !important;
}

/* ─────────────────────────────────
   PANEL SHELL
───────────────────────────────── */
.smm-panel {
  position: fixed;
  top: var(--smm-top);
  left: 0;
  right: 0;
  z-index: 999;
  pointer-events: none;

  /* Entry animation */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s, transform .26s var(--smm-ease);
}

.smm-panel.smm-panel--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner card — white, centered, rounded */
.smm-panel-inner {
  max-width: 1240px;
  margin: 10px auto 0;
  background: var(--smm-panel-bg);
  border: 1px solid var(--smm-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 6px rgba(0,0,0,.04),
    0 16px 48px rgba(0,0,0,.11),
    0 1px 0 rgba(255,255,255,.8) inset;
}

/* Teal accent line at the very top */
.smm-accent-line {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--smm-teal) 30%, var(--smm-blue) 70%, transparent 100%);
  opacity: .45;
}

/* ─────────────────────────────────
   BODY (columns flex row)
───────────────────────────────── */
.smm-body {
  display: flex;
  align-items: stretch;
  padding: 26px 28px 22px;
  gap: 0;
}

/* ─────────────────────────────────
   COLUMN
───────────────────────────────── */
.smm-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smm-col + .smm-col {
  padding-left: 20px;
  border-left: 1px solid var(--smm-divider);
}

/* Column header label */
.smm-col-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smm-text-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--smm-divider);
  margin-bottom: 4px;
}

/* ─────────────────────────────────
   SERVICE ITEM LINK
───────────────────────────────── */
.smm-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--smm-text);
  transition: background .14s;
}
.smm-item:hover {
  background: var(--smm-hover-bg);
}

/* Icon box */
.smm-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--smm-icon-bg);
  border: 1px solid var(--smm-icon-brd);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .14s, border-color .14s;
}
.smm-item:hover .smm-item-icon {
  background: rgba(0,168,150,.1);
  border-color: rgba(0,168,150,.25);
}
.smm-item-icon svg {
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: color .14s;
}
.smm-item:hover .smm-item-icon svg {
  color: var(--smm-teal-dark);
}

/* Text stack */
.smm-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.smm-item-name {
  font-size: .855rem;
  font-weight: 600;
  color: var(--smm-text);
  line-height: 1.3;
}
.smm-item-desc {
  font-size: .765rem;
  font-weight: 400;
  color: var(--smm-text-sec);
  line-height: 1.4;
}

/* ─────────────────────────────────
   FEATURED CARD (right column)
───────────────────────────────── */
.smm-featured {
  flex: 0 0 248px;
  padding-left: 20px;
  border-left: 1px solid var(--smm-divider);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card */
.smm-fc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,168,150,.06), rgba(31,78,138,.04));
  border: 1px solid rgba(0,168,150,.18);
  text-decoration: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.smm-fc:hover {
  border-color: rgba(0,168,150,.35);
  background: linear-gradient(135deg, rgba(0,168,150,.09), rgba(31,78,138,.07));
  box-shadow: 0 4px 20px rgba(0,168,150,.1);
}

.smm-fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,168,150,.1);
  border: 1px solid rgba(0,168,150,.22);
  color: var(--smm-teal-dark);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  width: fit-content;
}

.smm-fc-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .96rem;
  font-weight: 700;
  color: var(--smm-black);
  line-height: 1.3;
}

.smm-fc-desc {
  font-size: .76rem;
  color: var(--smm-text-sec);
  line-height: 1.5;
}

.smm-fc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--smm-teal-dark);
  margin-top: 2px;
}
.smm-fc-link .smm-arrow-ico {
  width: 11px;
  height: 11px;
  transition: transform .15s;
}
.smm-fc:hover .smm-fc-link .smm-arrow-ico {
  transform: translateX(3px);
}

/* Quick links */
.smm-ql {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.smm-ql-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--smm-text-muted);
  padding: 4px 4px 4px;
}
.smm-ql-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .81rem;
  font-weight: 500;
  color: var(--smm-text-sec);
  text-decoration: none;
  transition: background .13s, color .13s;
}
.smm-ql-link:hover {
  background: var(--smm-hover-bg);
  color: var(--smm-blue);
}
.smm-ql-link .smm-arrow-ico {
  width: 11px;
  height: 11px;
  opacity: .4;
  flex-shrink: 0;
}
.smm-ql-link:hover .smm-arrow-ico {
  opacity: .8;
}

/* ─────────────────────────────────
   PANEL FOOTER BAR
───────────────────────────────── */
.smm-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px 14px;
  border-top: 1px solid var(--smm-divider);
}

.smm-pf-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  color: var(--smm-text-muted);
}

/* Live pulse dot */
.smm-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smm-teal);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,168,150,.15);
  animation: smm-pulse 2.2s ease-in-out infinite;
}
@keyframes smm-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,168,150,.15); }
  50%       { box-shadow: 0 0 0 5px rgba(0,168,150,.08); }
}

.smm-pf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.smm-pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .14s;
  white-space: nowrap;
  /* <button> element resets — prevents browser/GP default styling */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: inherit;
}
.smm-pf-btn--ghost {
  color: var(--smm-text-sec);
  border: 1px solid var(--smm-border);
  background: transparent;
}
.smm-pf-btn--ghost:hover {
  color: var(--smm-blue);
  background: var(--smm-hover-bg);
  border-color: rgba(31,78,138,.2);
}
.smm-pf-btn--solid {
  color: #fff;
  background: linear-gradient(135deg, var(--smm-blue), #2760aa);
  border: none;
  box-shadow: 0 2px 10px rgba(31,78,138,.25);
}
.smm-pf-btn--solid:hover {
  background: var(--smm-teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,168,150,.35);
}

} /* end @media (min-width: 769px) */

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE SAFETY  (redundant guard — mobile nav CSS already hides
   #site-navigation, but panels + scrim are in <body> so we hide them here)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .smm-panel,
  .smm-scrim {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}