/* ═══════════════════════════════════════════════
   Advance Digital — Shared Theme System
   Used by all marketing pages (not index.html which is self-contained)
   ═══════════════════════════════════════════════ */

/* ─── TOUCH TARGETS ─── */
button, a { touch-action: manipulation; }

/* ─── FADE-UP ANIMATION ─── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(10,158,160,0.3); background:rgba(10,158,160,0.08); cursor:pointer; transition:background 0.2s, border-color 0.2s, transform 0.2s; flex-shrink:0; }
.theme-toggle:hover { background:rgba(10,158,160,0.18); border-color:var(--teal); transform:scale(1.08); }
.theme-toggle svg { width:16px; height:16px; stroke:var(--teal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:opacity 0.2s; }
.icon-sun { display:none; }
.icon-moon { display:block; }
body.light-mode .icon-sun { display:block; }
body.light-mode .icon-moon { display:none; }

/* ─── LIGHT MODE — CSS Variables ─── */
body.light-mode {
  --ink:    #1A1A2E;
  --ink-60: rgba(26,26,46,0.60);
  --ink-30: rgba(26,26,46,0.35);
  --ink-10: rgba(26,26,46,0.08);
  --ink-06: rgba(26,26,46,0.05);
  --dark:   #EDF5F5;
  --dark-2: #E0EDED;
  --dark-3: #D4E8E8;
  --cream:  #F0F7F7;
  --paper:  #FFFFFF;
  --border: rgba(10,158,160,0.18);
}

/* ─── LIGHT MODE — Navigation ─── */
body.light-mode nav {
  background: rgba(237,245,245,0.96);
  border-bottom-color: rgba(10,158,160,0.20);
}
body.light-mode .nav-links a { color: rgba(26,26,46,0.55); }
body.light-mode .nav-links a:hover { color: var(--ink); }
body.light-mode .nav-links a.nav-active { color: var(--teal-dark); }
body.light-mode .nav-dropdown-trigger { color: rgba(26,26,46,0.55); }
body.light-mode .nav-dropdown-trigger:hover,
body.light-mode .nav-dropdown:hover .nav-dropdown-trigger,
body.light-mode .nav-dropdown.open .nav-dropdown-trigger { color: var(--teal-dark); }
body.light-mode .nav-social a { color: rgba(26,26,46,0.45); }
body.light-mode .nav-social a:hover { color: var(--teal); }
body.light-mode .nav-hamburger span { background: rgba(26,26,46,0.7); }
body.light-mode nav.menu-open .nav-links { background: rgba(237,245,245,0.99); border-bottom-color: rgba(10,158,160,0.15); }
body.light-mode .nav-dropdown-menu-inner {
  background: rgba(240,247,247,0.99);
  border-color: rgba(10,158,160,0.22);
  box-shadow: 0 20px 56px rgba(10,158,160,0.12);
}
body.light-mode .nav-dropdown-item-name { color: rgba(26,26,46,0.80); }
body.light-mode .nav-dropdown-item-desc { color: rgba(26,26,46,0.40); }

/* ─── LIGHT MODE — Hero (generic) ─── */
body.light-mode .hero { background: var(--dark); }
body.light-mode .hero-title { color: #1A1A2E; }
body.light-mode .hero-sub { color: rgba(26,26,46,0.65); }
body.light-mode .hero-note { color: rgba(26,26,46,0.40); }
body.light-mode .label-light { background: rgba(10,158,160,0.10); border-color: rgba(10,158,160,0.28); color: var(--teal-dark); }
body.light-mode .btn-ghost-light { color: var(--ink-60); border-color: rgba(26,26,46,0.25); }
body.light-mode .btn-ghost-light:hover { color: var(--ink); border-color: rgba(26,26,46,0.6); }

/* ─── LIGHT MODE — Section headings ─── */
body.light-mode .section-title-light { color: #1A1A2E; }
body.light-mode .section-sub-light { color: rgba(26,26,46,0.60); }

/* ─── LIGHT MODE — Footer ─── */
body.light-mode footer { background: var(--dark); border-top-color: rgba(10,158,160,0.12); }
body.light-mode .footer-tagline { color: rgba(26,26,46,0.40); }
body.light-mode .footer-socials a { color: rgba(26,26,46,0.40); }
body.light-mode .footer-col h4 { color: rgba(26,26,46,0.45); }
body.light-mode .footer-col ul li a { color: rgba(26,26,46,0.45); }
body.light-mode .footer-col ul li a:hover { color: var(--ink); }
body.light-mode .footer-contact-a { color: rgba(26,26,46,0.45); }
body.light-mode .footer-divider { background: rgba(26,26,46,0.08); }
body.light-mode .footer-copy { color: rgba(26,26,46,0.35); }
body.light-mode .footer-contacts a { color: rgba(26,26,46,0.55); }
body.light-mode .footer-links a { color: rgba(26,26,46,0.55); }
body.light-mode .footer-links a:hover { color: var(--ink); }
body.light-mode .f-sep { background: rgba(26,26,46,0.15); }
body.light-mode .footer-body { border-top-color: rgba(10,158,160,0.12); }

/* ─── LIGHT MODE — Blog cards (shared) ─── */
body.light-mode .blog-card-img { background: linear-gradient(135deg, #D4E8E8, #C8E0E0); }

/* ─── LIGHT MODE — Footer capture section (teal bg stays) ─── */
body.light-mode .footer-capture { background: var(--teal); }

/* ─── MOBILE NAV — Ensure menu is scrollable and above content ─── */
@media (max-width: 900px) {
  nav.menu-open .nav-links {
    z-index: 101;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
}

/* ─── HAMBURGER → X ANIMATION ─── */
.nav-hamburger span { transition: transform 0.22s ease, opacity 0.22s ease; }
nav.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }