/*
  Studio Elena — shared design tokens
  One typographic scale, one spacing scale, one breakpoint system,
  used by every page so text roles and rhythm match everywhere.

  Breakpoints (enforced in each page's JS isMobile/isTablet/isDesktop):
    mobile  < 768px
    tablet  768px – 1023px
    desktop >= 1024px
*/
:root {
  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 130px;

  /* Container */
  --container-max: 1400px;
  --container-pad: clamp(20px, 5vw, 80px);
  --section-pad-y: clamp(var(--space-5), 8vw, var(--space-7));

  /* Typography scale — size / line-height / tracking only.
     font-family, font-weight and color stay wherever they already are. */
  --fs-eyebrow: clamp(11px, 1.2vw, 12px);
  --tr-eyebrow: 0.2em;

  --fs-h1: clamp(38px, 7vw, 72px);
  --lh-h1: 1.08;
  --tr-h1: -0.03em;

  --fs-h2: clamp(34px, 4vw, 50px);
  --lh-h2: 1.05;
  --tr-h2: -0.02em;

  --fs-h3: clamp(20px, 2.2vw, 26px);
  --lh-h3: 1.2;
  --tr-h3: -0.01em;

  --fs-body-lg: clamp(17px, 2vw, 21px);
  --lh-body-lg: 1.55;

  --fs-body: clamp(15px, 1.2vw, 16.5px);
  --lh-body: 1.5;

  --fs-small: clamp(13px, 1vw, 14px);
  --lh-small: 1.45;

  --fs-caption: 12px;
  --lh-caption: 1.4;

  /* List rhythm shared by every bulleted list on the site */
  --list-gap: var(--space-2);
  --list-marker-gap: 12px;
}

/* ====== Touch targets ====== */
.tap-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ====== Shared list rhythm ======
   Reused on top of each page's own list class (.services-list, .pricing-list,
   .ab-list, .ab-check-list, case-study lists) — keeps existing markers/colors,
   just tokenizes gap + line rhythm + hanging indent for wrapped lines. */
.dc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
}
.dc-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--list-marker-gap);
  line-height: var(--lh-body);
}
.dc-list > li > svg,
.dc-list > li > .dc-list-marker {
  flex: 0 0 auto;
  margin-top: 0.35em;
}
.dc-list > li > *:last-child {
  flex: 1 1 auto;
}

/* ====== Mobile navigation ====== */
.hamburger-btn {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 60;
}
.hamburger-btn span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.hamburger-btn span:nth-child(1) { top: 15px; }
.hamburger-btn span:nth-child(2) { top: 21px; }
.hamburger-btn span:nth-child(3) { top: 27px; }
.hamburger-btn[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: 96px var(--container-pad) var(--space-4);
  box-sizing: border-box;
  overflow-y: auto;
  animation: mobileNavIn 0.22s ease both;
}
@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav-panel li { border-bottom: 1px solid #ECECEC; }
.mobile-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  text-decoration: none;
}

@media (max-width: 1023px) {
  .hamburger-btn { display: block; }
  header nav > ul.dc-desktop-nav { display: none !important; }
}