/*
  base.css — Global Resets and Foundations
  ----------------------------------------
  Applies universal box model, base element defaults, and accessible text settings.
  Avoids layout-specific or visual-heavy styles.
*/

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  scroll-behavior: smooth;

  background-color: #eceff4;         /* Use default background token */
  color: #12141e;                  /* Default readable body text */
  font-family: 'kodivo-font', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;             /* Global font family */
  font-size: 1rem;            /* Base font size */
  line-height: 1.5;      /* Standard vertical rhythm */
  letter-spacing: 0;
}

body {
  position: relative;                        /* Prevent layout overflow with fixed elements */
  min-height: 100vh;                         /* Ensure full-height pages */
  -webkit-font-smoothing: antialiased;       /* Enhance text rendering */
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;                    /* Consistent box model */
}

/*
  Section spacers between key modules (tono-site)
  ------------------------------------------------
  Create equal shared space using half-spacers inside each module:
  - previous module appends ::after (bottom half, inherits its background)
  - next module prepends ::before (top half, inherits its background)
  This ensures colors match even with per-instance theme overrides.
*/

/* Reasons Grid → Timeline: add top half before reasons, bottom half after reasons */
.reasons-grid-container > .mod-instance[data-module-key="text-content/reasons-grid"] > section::before,
.reasons-grid-container > section::before {
  content: '';
  display: block;
  height: calc(clamp(3rem, 7.5vw, 6rem) / 2);
  background: inherit;
}
.reasons-grid-container > .mod-instance[data-module-key="text-content/reasons-grid"] > section::after,
.reasons-grid-container > section::after {
  content: '';
  display: block;
  height: calc(clamp(3rem, 7.5vw, 6rem) / 2);
  background: inherit;
}

/* Timeline halves (works with or without mod-instance wrapper) */
.timeline-demo-container > .mod-instance[data-module-key="timeline/demo-2"] > .timeline-section::before,
.timeline-demo-container > .timeline-section::before {
  content: '';
  display: block;
  height: calc(clamp(3rem, 7.5vw, 6rem) / 2);
  background: inherit;
}
.timeline-demo-container > .mod-instance[data-module-key="timeline/demo-2"] > .timeline-section::after,
.timeline-demo-container > .timeline-section::after {
  content: '';
  display: block;
  height: calc(clamp(3rem, 7.5vw, 6rem) / 2);
  background: inherit;
}

/* FAQ halves */
.faq-tab-container > .mod-instance[data-module-key="faq-tab/simple2"] > .faq-section::before,
.faq-tab-container > .faq-section::before {
  content: '';
  display: block;
  height: calc(clamp(3rem, 7.5vw, 6rem) / 2);
  background: inherit;
}
.faq-tab-container > .mod-instance[data-module-key="faq-tab/simple2"] > .faq-section::after,
.faq-tab-container > .faq-section::after {
  content: '';
  display: block;
  height: calc(clamp(3rem, 7.5vw, 6rem) / 2);
  background: inherit;
}
/* Centralize Contact top half-gap here with higher specificity to beat module CSS */
html body .contact-section { padding-top: calc(1rem + clamp(3rem, 7.5vw, 6rem) / 2); }
@media (min-width: 768px) {
  html body .contact-section { padding-top: calc(3rem + clamp(3rem, 7.5vw, 6rem) / 2); }
}
@media (max-width: 1200px) {
  html body .contact-section { padding-top: calc(3rem + clamp(3rem, 7.5vw, 6rem) / 2); }
}
/* Ensure tablet range uses its own base top padding plus half-gap */
@media (min-width: 481px) and (max-width: 1024px) {
  html body .contact-section { padding-top: calc(1.5rem + clamp(3rem, 7.5vw, 6rem) / 2); }
}

/* (Moved): For Services → Reasons, show the gap at the start of Reasons only. */