/* ==========================================================================
   SOCIALUP DESIGN SYSTEM - BASE ARCHITECTURAL STYLES
   /css/base.css
   Warm paper canvas, subtle dot grid, condensed headlines & mono labels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Canvas: Warm Paper & Editorial Dot Grid
   -------------------------------------------------------------------------- */
html {
  background-color: var(--paper, #F3F1EC);
  color: var(--ink, #101114);
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--paper, #F3F1EC) !important;
  background-image: radial-gradient(var(--line, #D9D6CE) 1.25px, transparent 1.25px) !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
  color: var(--ink, #101114) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
}

/* Mobile GPU Performance & Touch Optimization */
@media (max-width: 860px), (pointer: coarse) {
  body {
    background-attachment: scroll !important;
  }
}

/* --------------------------------------------------------------------------
   2. Navigation Header: Clean White Frosted Glass
   -------------------------------------------------------------------------- */
.main-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line, #E2E8F0);
  box-shadow: 0 4px 24px rgba(16, 17, 20, 0.03);
}

.main-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--line, #E2E8F0);
}

.nav-link {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--ink, #101114) !important;
}

.nav-link:hover {
  color: var(--blue, #2563eb) !important;
}

/* --------------------------------------------------------------------------
   3. Apple San Francisco Display Headlines
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.su-vault-headline,
.work-client-title,
.service-card-title,
.bento-card-title,
.approach-card-title,
.leadership-name {
  font-family: var(--font-display) !important;
  font-stretch: normal !important;
  letter-spacing: -0.025em !important;
  color: var(--ink-soft, #3F3F3C) !important;
  text-transform: uppercase !important;
}

.hero-title {
  font-size: clamp(3.2rem, 7.5vw, 6.2rem) !important;
  line-height: 0.96 !important;
  font-weight: 900 !important;
  margin-bottom: 1.5rem !important;
}

.section-title {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
}

/* --------------------------------------------------------------------------
   4. Technical Mono Labels & Metadata (SF Mono)
   -------------------------------------------------------------------------- */
.hero-eyebrow,
.section-badge,
.su-vault-tags-mono,
.su-vault-title-tag,
.su-vault-footer-bar,
.category-pill,
.work-category-tag,
.work-metric-badge,
.su-stat-highlight,
.metric-count,
.metric-label,
.su-m-item,
.client-tag,
.footer-col h4,
.form-label-mono {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.hero-eyebrow {
  color: var(--blue, #2563eb) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}

.section-badge {
  background: transparent !important;
  border: 1px solid var(--line, #D9D6CE) !important;
  color: var(--ink, #101114) !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   5. Editorial Card Surfaces & Containers
   -------------------------------------------------------------------------- */
.service-card,
.work-card,
.bento-card,
.approach-card,
.review-card,
.faq-item {
  background: #FFFFFF !important;
  border: 1px solid var(--line, #D9D6CE) !important;
  box-shadow: 0 4px 20px -4px rgba(16, 17, 20, 0.05) !important;
}

.service-card:hover,
.work-card:hover,
.bento-card:hover {
  border-color: var(--blue, #2563eb) !important;
  box-shadow: 0 16px 36px -6px rgba(37, 99, 235, 0.12) !important;
}

/* --------------------------------------------------------------------------
   6. Clean Buttons & Interactive CTAs
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--blue, #2563eb) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(16, 17, 20, 0.12) !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover {
  background-color: var(--blue-deep, #1d4ed8) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(16, 17, 20, 0.18) !important;
}

.btn-outline {
  border: 1px solid var(--line, #D9D6CE) !important;
  color: var(--ink, #101114) !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

.btn-outline:hover {
  border-color: var(--blue, #2563eb) !important;
  color: var(--blue, #2563eb) !important;
}

.btn-outline:hover {
  border-color: var(--blue, #2563eb) !important;
  color: var(--blue, #2563eb) !important;
}

/* --------------------------------------------------------------------------
   7. Footer: Clean White Architectural Anchor
   -------------------------------------------------------------------------- */
.site-footer,
.main-footer {
  background-color: #FFFFFF !important;
  color: var(--ink, #101114) !important;
  border-top: 1px solid var(--line, #D9D6CE) !important;
}

.main-footer .footer-col h4,
.site-footer .footer-col h4 {
  color: var(--ink, #101114) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.main-footer .footer-brand-info p,
.site-footer .footer-brand-info p,
.main-footer .footer-col p,
.site-footer .footer-col p,
.main-footer .footer-col span,
.site-footer .footer-col span {
  color: #475569 !important;
}

.main-footer .footer-link,
.site-footer .footer-link {
  color: #64748B !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.main-footer .footer-link:hover,
.site-footer .footer-link:hover {
  color: var(--blue, #2563EB) !important;
}

.main-footer .social-icon-btn,
.site-footer .social-icon-btn {
  background: #F8FAFC !important;
  border: 1px solid var(--line, #D9D6CE) !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
}

.main-footer .social-icon-btn:hover,
.site-footer .social-icon-btn:hover {
  background: var(--blue, #2563EB) !important;
  border-color: var(--blue, #2563EB) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

.main-footer .footer-bottom,
.site-footer .footer-bottom {
  border-top: 1px solid var(--line, #D9D6CE) !important;
  color: #64748B !important;
}

.main-footer .legal-link,
.site-footer .legal-link {
  color: #64748B !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.main-footer .legal-link:hover,
.site-footer .legal-link:hover {
  color: var(--ink, #101114) !important;
}

/* --------------------------------------------------------------------------
   Mobile Usability, Touch Targets & Hardware Acceleration
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Prevent tap delay and optimize touch responsiveness */
  a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
  }

  /* Standard 44px minimum touch targets */
  .btn,
  .btn-primary,
  .btn-accent,
  .hero-cta-btn,
  .mobile-toggle-btn,
  .mobile-drawer-close {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 16px !important;
  }

  /* Prevent text jumping and horizontal viewport blowout */
  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }

  /* Smooth momentum touch scrolling for drawers & modals */
  .mobile-drawer,
  .modal-dialog,
  .su-chat-modal-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Footer mobile stacked padding */
  .main-footer,
  .site-footer {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}