/*
 Theme Name: Digital Solution / Vupro Child
 Theme URI: https://digitalsolution.rs/   
 Description: Child theme for Hello Elementor used for Digital Solution / Vupro landing and site.
 Author: Jack Russell / Digital Solution
 Author URI: https://jackrussell.digital/
 Template: hello-biz
 Version: 1.0.0
 Text Domain: digital-solution-child
*/

/* Your existing CSS starts below this comment */

/* === Design tokens: colors & typography === */

:root {
  /* Brand (Increase-inspired) */
  --brand-blue: #0a2540;  /* Deep navy primary */
  --brand-amber: #e9ff5a; /* Neon lime highlight */

  /* Brand blues / navies scale */
  --blue-100: #e4ebf4;
  --blue-200: #ccd7eb;
  --blue-300: #9fb6d7;
  --blue-400: #6f92c2;
  --blue-500: #3e6ca5;
  --blue-600: #174a7a;
  --blue-700: #0f3254;
  --blue-800: #081f36;
  --blue-900: #040f1f;

  /* Lime highlight scale (using amber vars) */
  --amber-100: #f9ffe0;
  --amber-200: #f2ffc0;
  --amber-300: #ebff99;
  --amber-400: #e4ff73;
  --amber-500: #e9ff5a;
  --amber-600: #c4db4c;
  --amber-700: #9cac3b;
  --amber-800: #6a7a29;
  --amber-900: #3b4616;

  /* Neutrals – cool greys */
  --gray-50:  #f5f7fb;
  --gray-100: #edf1f7;
  --gray-200: #dde3ed;
  --gray-300: #c9d2e0;
  --gray-400: #aab4c6;
  --gray-500: #8a94a6;
  --gray-600: #697085;
  --gray-700: #4a5263;
  --gray-800: #2d3340;
  --gray-900: #111827;

  /* Accent colors */
  --accent-teal: #1fd0b0;
  --accent-sky:  #35c4ff;

  /* Semantic states */
  --success: #1fd0b0;
  --warning: #e9ff5a;
  --error:   #f0526c;
  --info:    #2f9de3;

  /* Backgrounds / surfaces */
  --bg-body: #edf1f7;
  --bg-card: #ffffff;
  --border-subtle: var(--gray-200);

  /* Fluid font sizes — updated */
  --fs-display: clamp(3rem, 5vw, 4.2rem); /* NEW big H1 */
  --fs-h1:      clamp(2.2rem, 3.4vw, 3rem); /* moved down from old h1 */
  --fs-h2:      clamp(1.7rem, 2.6vw, 2.2rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body:    0.95rem;
  --fs-small:   0.78rem;
}

/* === Base reset-ish === */

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

/* === Base typography === */

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--bg-body);
  color: var(--gray-900);
  line-height: 1.6;
}

/* === Global typography scale (theme is source of truth) === */

/* =========================================================
   HEADINGS & LEAD TEXT — GLOBAL TYPOGRAPHY SYSTEM
   Controlled from child theme (overrides Elementor)
   ====================================================== */

/* Base heading styling (native + Elementor) */
h1,
h2,
h3,
h4,
.elementor-heading-title {
  margin: 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

/* ---------------- H1 (HERO / PRIMARY) ---------------- */
/* All H1s, whether plain HTML or Elementor Heading set to H1 */
h1,
h1.elementor-heading-title {
  /* Bigger than before – true hero size */
  font-size: clamp(3rem, 5vw, 4.2rem) !important;
  line-height: 1.03 !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* Hero H1 – balanced width/spacing (utility) */
.h1-balanced .elementor-heading-title {
  max-width: 14ch;              /* keep it to ~2–3 lines */
  line-height: 1.03 !important; /* match hero line height */
  letter-spacing: -0.03em !important;
  margin-bottom: 0.4rem;        /* closer to the lead text */
}

/* Responsive fine-tuning ONLY for hero H1 */
@media (max-width: 768px) {
  .h1-balanced .elementor-heading-title {
    font-size: clamp(1.9rem, 5.6vw, 2.4rem) !important;
  }
}

@media (max-width: 480px) {
  .h1-balanced .elementor-heading-title {
    font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
  }
}

/* ---------------- H2 ---------------- */
/* New H2 gets the previous H1 scale for stronger section titles */
h2,
h2.elementor-heading-title {
  font-size: var(--fs-h1) !important;  /* old H1 size */
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

/* ---------------- H3 ---------------- */
/* New H3 gets the previous H2 scale */
h3,
h3.elementor-heading-title {
  font-size: var(--fs-h2) !important;  /* old H2 size */
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* ---------------- H4 ---------------- */
/* New H4 gets the previous H3 scale */
h4,
h4.elementor-heading-title {
  font-size: var(--fs-h3) !important;  /* old H3 size */
  line-height: 1.32 !important;
  font-weight: 600 !important;
}

/* ---------------- Body copy ---------------- */
p {
  margin: 0 0 0.75rem;
  font-size: var(--fs-body);
  color: var(--gray-800);
}

/* ---------------- Small text ---------------- */
small {
  font-size: var(--fs-small);
  color: var(--gray-600);
}

/* =========================================================
   LEAD / SUBHEAD — BUSINESS CLAIM UNDER H1
   Use on the wrapper: class="lead lead-tight" etc.
   ====================================================== */

/* Base lead text — premium business claim */
.lead p,
.lead div,
.lead span {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.28;
  font-weight: 600;
  color: var(--gray-900);
  max-width: 760px;
  margin: 0 0 1.1rem 0;
  letter-spacing: -0.012em;
}

/* Tight variant — sits close to H1 (hero style) */
.lead-tight p,
.lead-tight div,
.lead-tight span {
  margin-top: 0.15rem;
  margin-bottom: 0.7rem;
}

/* Loose variant — more breathing room (inner sections) */
.lead-loose p,
.lead-loose div,
.lead-loose span {
  margin-top: 0.7rem;
  margin-bottom: 1.8rem;
  line-height: 1.35;
}

/* Wide variant — for longer statements / multi-line claims */
.lead-max p,
.lead-max div,
.lead-max span {
  max-width: 900px;
}

/* Links */

a {
  color: var(--brand-blue);
  text-decoration-color: rgba(10, 37, 64, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: rgba(10, 37, 64, 1);
}

/* === Typography utilities === */

.text-brand {
  color: var(--brand-blue) !important;
}

.text-muted {
  color: var(--gray-600) !important;
}

/* =========================================================
   BUTTONS — SECONDARY GHOST VARIANT
   Add class "btn-secondary-ghost" to the Button widget
   ====================================================== */

.btn-secondary-ghost .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.9rem 2.3rem;              /* match primary size */
  border-radius: 999px;                /* pill */
  border: 2px solid var(--brand-blue) !important;

  background: transparent !important;  /* ghost */
  color: var(--brand-blue) !important; /* blue text */

  box-shadow: none !important;
  text-decoration: none;
  font-weight: 600;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

/* Hover / focus state */
.btn-secondary-ghost .elementor-button:hover,
.btn-secondary-ghost .elementor-button:focus {
  background: var(--brand-amber) !important; /* primary accent fill */
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
  transform: translateY(-1px);
}

/* Optional: remove inner extra padding Elementor sometimes adds */
.btn-secondary-ghost .elementor-button-content-wrapper {
  padding: 0;
}