/*
 * Setup and Sell — shared type scale and cross-page component normalization.
 * Linked LAST in <head> on every page so it wins the cascade over Divi's
 * per-page et-cache CSS. One place to tune type for mobile / tablet / desktop.
 */

/* ---- Type scale tokens ---------------------------------------------- */
/* Floors match Divi's mobile sizes; caps match its 1350px desktop jump.
   The vw mid-points turn that abrupt min-width:1350px jump into a smooth
   ramp across phone -> tablet -> desktop. */
:root {
  --fs-h1:   clamp(30px, 4.5vw, 54px);
  --fs-h2:   clamp(26px, 3.4vw, 46px);
  --fs-h3:   clamp(20px, 2vw, 24px);
  --fs-section: clamp(22px, 2.5vw, 34px);   /* in-content section headings (gradient titles, feature cards, article h2) */
  --fs-lead: clamp(19px, 2.2vw, 29px);
  --fs-body: 16px;
  --fs-small: 14px;
}

/* ---- Page-level heading ramps ---------------------------------------- */
/* Scoped to #main-content so header (divimenus) and footer headings keep
   their own module sizes. */
#main-content h1 { font-size: var(--fs-h1); }
#main-content h2 { font-size: var(--fs-h2); }

/* ---- Body base: one declaration ends the 14px/16px load-order race --- */
body { font-size: var(--fs-body); }

/* ---- Hero typewriter headline (home / about / ai / maplat / webdev) --- */
.dnxte_text_animation_0 .dnxt-headline,
.dnxte_text_animation_0 .dnxt-text-heading,
.dnxte_text_animation_0 .dnxt-animation-b-text,
.dnxte_text_animation_0 .dnxt-animation-a-text,
.dnxte_text_animation_0 .dnxt-text-before,
.dnxte_text_animation_0 .dnxt-text-two,
.dnxte_text_animation_0 .dnxt-words-wrapper,
.dnxte_text_animation_0 .dnxt-words-wrapper b,
.dnxte_text_animation_0 .dnxt-words-wrapper b.is-visible,
.dnxte_text_animation_0 .dnxt-words-wrapper b.is-hidden {
  font-size: clamp(26px, 3.5vw, 48px) !important;
  line-height: 1.25 !important;
}
.dnxte_text_animation_0 .dnxt-words-wrapper,
.dnxte_text_animation_0 .dnxt-words-wrapper b,
.dnxte_text_animation_0 .dnxt-words-wrapper b.is-visible,
.dnxte_text_animation_0 .dnxt-words-wrapper b.is-hidden {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Hero box subline (same pages) */
.ss-hero-shared-box .et_pb_text_0 p,
.ss-hero-shared-box .et_pb_text_0 .heading {
  font-size: clamp(16px, 2.2vw, 24px) !important;
  line-height: 1.5 !important;
}

/* Section / feature-card headings — gradient titles and hover-float cards.
   #main-content prefix beats the per-page et-cache module "!important"
   h1/h2 sizes so these render identically whichever tag Divi used. */
#main-content .dnxt-grdnt-text-animation,
#main-content .dnxt-grdnt-text-animation_font,
#main-content .dnxt-hover-float .dnxt-text-two {
  font-size: var(--fs-section) !important;
  line-height: 1.3 !important;
}

/* ---- Cross-page body copy: the stragglers ---------------------------- */
/* Home text_1 used 3vw/3vh/4vh (vh does not track width and reflows between
   portrait and landscape); maplat text_3 used 1rem; webdev text_3 used 18px.
   Every other big copy module is 29px — pull these three up to the same
   fluid lead role. Privacy's text_0 (its legal copy) is intentionally NOT
   matched and stays at body size. */
#main-content .et_pb_text_1,
#main-content .et_pb_text_3 {
  font-size: var(--fs-lead) !important;
}

/* ---- Lightbox exit button (was 30px on home, 22px elsewhere) --------- */
.mfp-wrap .mfp-close,
.mfp-image-holder .mfp-close,
.dnxte-msnary-mfp-config .mfp-close,
button.mfp-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 0.92 !important;
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  width: 48px !important;
  height: 48px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #51A1BA !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-indent: 0 !important;
  cursor: pointer !important;
  z-index: 2147483647 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.mfp-wrap .mfp-close:hover,
.mfp-image-holder .mfp-close:hover,
.dnxte-msnary-mfp-config .mfp-close:hover,
button.mfp-close:hover {
  background-color: #4FB7EA !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
}
.mfp-close:empty::before {
  content: '✕' !important;
}

/* Hide lightbox captions/counter (was missing on home) */
.mfp-bottom-bar,
.mfp-counter,
.mfp-title,
.dnxte-mfe-caption {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* DiviMenus / modal popup close X (identical on all pages -> shared) */
.dd-popup-c {
  position: relative !important;
}
.dd-modal-exit-btn {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  text-align: center !important;
  background: #190D24 !important;
  color: #ffffff !important;
  border: 2px solid #F4DB59 !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  transition: all 0.2s ease !important;
}
.dd-modal-exit-btn:hover {
  background: #EF5555 !important;
  border-color: #EF5555 !important;
  color: #fff !important;
}

/* ---- Page-load spinner: mobile logo's S-circle, pulsing --------------- */
/* #ss-loader sits at the top of <body> on every page; the inline boot script
   beside it removes the overlay at DOMContentLoaded (4s failsafe). Pulse,
   never spin — rotating the S letterform looks wobbly. */
#ss-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #190D24;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}
.ss-loader-mark {
  width: 110px;
  height: 110px;
  /* Crop the 300x300 mobile logo to just the circle: scale 190% then
     position 50% 18% centers the S-circle inside the box, wordmark cropped off. */
  background: url("/wp-content/uploads/2023/01/300x300.png") no-repeat;
  background-size: 190% auto;
  background-position: 50% 18%;
  border-radius: 50%;
  animation: ssLoadPulse 1.15s ease-in-out infinite;
}
@keyframes ssLoadPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}