/* ============================================================
   Digital-Reach Media — shared.css
   Custom styles shared across all pages.
   Tailwind utility classes handle everything else.
   ============================================================ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Material Symbols default settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Soft ambient shadow */
.soft-shadow { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04); }

/* Smooth transition utility */
.transition-soft { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* Bento card hover lift */
.bento-hover { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.bento-hover:hover { transform: translateY(-4px); box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.06); }

/* Hide scrollbar (testimonial slider) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   Hamburger icon — 3 bars → X animation
   ============================================================ */
.hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #000;
  margin-bottom: 6px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.hamburger-bar:last-child { margin-bottom: 0; }

#hamburger.is-open .hamburger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#hamburger.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#hamburger.is-open .hamburger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   Mobile navigation panel — slide-down via max-height
   ============================================================ */
.mobile-nav-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-panel.is-open { max-height: 480px; }

/* ============================================================
   Document pages (Privacy, Terms) — sidebar nav
   ============================================================ */
.doc-sidebar-link {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #45474a;
  border-left: 2px solid transparent;
  padding-left: 16px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.doc-sidebar-link:hover,
.doc-sidebar-link.active {
  color: #000;
  border-left-color: #4a607c;
}

.doc-section { scroll-margin-top: 100px; }