/* ==========================================================================
   VigourSoft – page structure layer
   Loaded last (after elementor-sync.css), on the live site and in the
   Elementor editor preview. One spacing system and one alignment rule set for
   every page, whether it is built in Elementor or by a theme template.

     between two sections ............ 72px desktop / 56px tablet / 48px mobile
     last section -> footer .......... same as between two sections
     header -> first section ......... 36px / 28px / 22px
     section heading -> its content .. 28px / 24px / 20px

   Two-column sections (heading + note, hero + side panel, CTA text + button)
   line their columns up with each other.
   To undo: remove vs_enqueue_structure() in functions.php.
   ========================================================================== */

:root {
  --vs-space-page-top: 36px;
  --vs-space-section: 72px;
  --vs-space-head: 28px;
  --vs-space-filter: 28px;
  --vs-section-gap: 72px;
  --vs-head-gap: 28px;
  --vs-eyebrow-size: 11px;
  --vs-eyebrow-lh: 16px;
  --vs-eyebrow-gap: 14px;
  --vs-hero-pad: 36px;
}
@media (max-width: 1024px) {
  :root { --vs-space-page-top: 28px; --vs-space-section: 56px; --vs-space-head: 24px; --vs-space-filter: 24px; --vs-section-gap: 56px; --vs-head-gap: 24px; --vs-hero-pad: 30px; }
}
@media (max-width: 767px) {
  :root { --vs-space-page-top: 22px; --vs-space-section: 48px; --vs-space-head: 20px; --vs-space-filter: 20px; --vs-section-gap: 48px; --vs-head-gap: 20px; --vs-hero-pad: 22px; }
}

/* Nothing may push the page sideways on a phone or tablet. */
html, body { max-width: 100%; overflow-x: clip; }

/* --------------------------------------------------------------------------
   1. Section rhythm on theme templates
   -------------------------------------------------------------------------- */

/* Last section -> footer */
html body .vs-footer { margin-top: var(--vs-space-section) !important; }

/* Success Story / Case Study / Insight detail pages: hero -> content */
html body .vs-ss > .vs-ss-hero { margin-bottom: var(--vs-space-section) !important; }

/* Case Studies listing (theme template) */
html body .vs-case-studies.vs-case-studies > .vs-hero-box { margin-bottom: var(--vs-space-section) !important; }
html body .vs-case-studies.vs-case-studies > .vs-section-head,
html body .vs-case-studies.vs-case-studies > .vs-pill-group { margin-bottom: var(--vs-space-head) !important; }
html body .vs-case-studies.vs-case-studies > .vs-case-story:has(+ .vs-cta-box) { margin-bottom: var(--vs-space-section) !important; }
html body .vs-case-studies.vs-case-studies > .vs-cta-box { margin-top: 0 !important; }

/* Topic pages (Cloud, Data Platform, ...): page title -> blog section */
html body .vs-page-wrap > h1:first-child { margin: 0 0 var(--vs-space-head) !important; }
html body .vs-page-wrap > h1:first-child:has(~ .vs-tb) { margin-bottom: calc(var(--vs-space-section) - 3px) !important; }
html body .vs-page-wrap > h1:first-child ~ .vs-tb { margin-top: 0 !important; }
html body .vs-tb > .vs-section-head { margin-bottom: var(--vs-space-head) !important; }
html body .vs-tb { margin-bottom: 0 !important; }

/* GCC page: hero -> sections -> CTA, all one gap; heading -> content */
html body .elementor-562 > .vs-gcc-hero.vs-gcc-hero { margin: 0 0 var(--vs-space-section) !important; }
html body .elementor-562 .v-box.vigour-master-container.vigour-master-container { gap: var(--vs-space-section) !important; }
html body .elementor-562 > .vs-cta-box.vs-cta-box { margin: var(--vs-space-section) 0 0 !important; }
html body .elementor-562 .vigour-master-container :is(.v-challenges-header, .v-solutions-header, .v-gcc-header, .v-scale-header, .v-stats-header, .v-choose-header).v-box { margin-bottom: var(--vs-space-head) !important; }

/* --------------------------------------------------------------------------
   2. Section heading blocks: one eyebrow style everywhere
   -------------------------------------------------------------------------- */
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-eyebrow.vs-eyebrow,
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-eyebrow.vs-eyebrow p {
  font-size: var(--vs-eyebrow-size) !important;
  line-height: var(--vs-eyebrow-lh) !important;
  font-weight: 500 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: var(--vs-muted) !important;
}
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-eyebrow.vs-eyebrow { margin: 0 0 var(--vs-eyebrow-gap) !important; padding: 0 !important; }
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-eyebrow.vs-eyebrow p { margin: 0 !important; }
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-head-h2 { margin-top: 0 !important; }

/* Heading on the left, note on the right: the note starts on the same line
   as the heading (not the small eyebrow above it). */
@media (min-width: 981px) {
  html body .elementor .elementor-element.vs-section-head.vs-section-head > .elementor-container { align-items: flex-start !important; }
  html body .elementor .elementor-element.vs-section-head.vs-section-head > .elementor-container > .vs-head-right > .elementor-widget-wrap {
    padding-top: calc(var(--vs-eyebrow-lh) + var(--vs-eyebrow-gap)) !important;
    padding-bottom: 0 !important;
    align-content: flex-start !important;
  }
}
/* Stacked (tablet / phone): the note follows the heading at one fixed distance. */
@media (max-width: 980px) {
  html body .elementor .elementor-element.vs-section-head.vs-section-head > .elementor-container { row-gap: 0 !important; }
  html body .elementor .elementor-element.vs-section-head.vs-section-head > .elementor-container > .vs-head-right > .elementor-widget-wrap { padding: 12px 0 0 !important; }
}
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-head-note,
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-head-note p { margin-top: 0 !important; }
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-head-note p:last-child,
html body .elementor .elementor-element.vs-section-head.vs-section-head .vs-head-h2 :last-child { margin-bottom: 0 !important; }

/* Topic pages build their heading outside Elementor: same eyebrow. */
html body .vs-tb .vs-section-head .vs-eyebrow,
html body .vs-tb .vs-section-head .vs-eyebrow p {
  font-size: var(--vs-eyebrow-size) !important; line-height: var(--vs-eyebrow-lh) !important; font-weight: 500 !important;
  letter-spacing: 1.6px !important; text-transform: uppercase; color: var(--vs-muted) !important; margin: 0 !important;
}
html body .vs-tb .vs-section-head .vs-eyebrow { margin-bottom: var(--vs-eyebrow-gap) !important; }

/* --------------------------------------------------------------------------
   3. Hero blocks: same inner space, columns start on the same line
   -------------------------------------------------------------------------- */
html body .elementor .elementor-element.vs-hero-box.vs-hero-box,
html body .elementor .elementor-element.vs-gcc-hero.vs-gcc-hero,
html body .vs-case-studies > .vs-hero-box.vs-hero-box {
  padding-top: var(--vs-hero-pad) !important;
  padding-bottom: var(--vs-hero-pad) !important;
}
@media (min-width: 981px) {
  html body .elementor .elementor-element:is(.vs-hero-box, .vs-gcc-hero):not(.elementor-element-50826e5) > .elementor-container { align-items: flex-start !important; }
  html body .elementor .elementor-element:is(.vs-hero-box, .vs-gcc-hero) > .elementor-container > :is(.vs-side-panel, .vs-form-panel, .vs-tech-panel).elementor-column {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   4. Call-to-action rows: text and button centred on each other
   -------------------------------------------------------------------------- */
html body .elementor .elementor-element.vs-cta-box.vs-cta-box > .elementor-container { align-items: center !important; }
html body .elementor .elementor-element.vs-cta-box.vs-cta-box > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: center !important; }

/* --------------------------------------------------------------------------
   5. Responsive guards
   -------------------------------------------------------------------------- */
/* Home "Core competencies" title row: the title wraps instead of running off
   the screen on tablets. */
html body .elementor .v-comp-wrapper .e-con.e-flex > .e-con:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
html body .elementor .v-comp-wrapper .e-con.e-flex > .v-comp-view-all { flex: 0 0 auto !important; }

/* 6. Measured fine-tuning per block lives in structure-tuned.css (generated). */

/* Theme-built heading blocks (Case Studies listing): same eyebrow + note rules. */
html body .vs-case-studies .vs-section-head .vs-eyebrow,
html body .vs-case-studies .vs-section-head .vs-eyebrow p {
  font-size: var(--vs-eyebrow-size) !important; line-height: var(--vs-eyebrow-lh) !important; font-weight: 500 !important;
  letter-spacing: 1.6px !important; text-transform: uppercase; color: var(--vs-muted) !important; margin: 0 !important;
}
html body .vs-case-studies .vs-section-head .vs-eyebrow { margin-bottom: var(--vs-eyebrow-gap) !important; }
html body .vs-case-studies .vs-section-head .vs-head-note p:last-child,
html body .vs-case-studies .vs-section-head .vs-head-h2 :last-child { margin-bottom: 0 !important; }
@media (min-width: 981px) {
  html body .vs-case-studies .vs-section-head > .elementor-container { align-items: flex-start !important; }
  html body .vs-case-studies .vs-section-head .vs-head-right > .elementor-widget-wrap { padding-top: calc(var(--vs-eyebrow-lh) + var(--vs-eyebrow-gap)) !important; padding-bottom: 0 !important; }
}
@media (max-width: 980px) {
  html body .vs-case-studies .vs-section-head > .elementor-container { row-gap: 0 !important; }
  html body .vs-case-studies .vs-section-head .vs-head-right > .elementor-widget-wrap { padding: 12px 0 0 !important; }
}

/* Plain text pages (Privacy Policy): no extra space under the last paragraph. */
html body [data-elementor-type="wp-page"] > .elementor-element:last-child .elementor-widget:last-child .elementor-widget-container > :last-child,
html body [data-elementor-type="wp-page"] > .elementor-element:last-child .elementor-widget-text-editor:last-child p:last-child { margin-bottom: 0 !important; }
html body .vs-page-wrap > :not(.elementor):last-child { margin-bottom: 0 !important; }

/* Phones: small labels stay readable (min 11px). */
@media (max-width: 767px) {
  html body .elementor :is(.vs-stat-label, .vs-cell-label, .vs-cell-label-caps, .vs-cell-kicker, .vs-sub),
  html body .elementor :is(.vs-stat-label, .vs-cell-label, .vs-cell-label-caps, .vs-cell-kicker, .vs-sub) :is(p, span, .elementor-heading-title) { font-size: 11px !important; }
  html body .elementor .vs-impact-desc,
  html body .elementor .vs-impact-desc :is(p, span) { font-size: 12px !important; line-height: 1.5 !important; }
}

/* Hero figures: when they wrap onto two rows, the rows share the same columns. */
@media (max-width: 767px) {
  html body .elementor .elementor-element.vs-stat-row.vs-stat-row > .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
  }
  html body .elementor .elementor-element.vs-stat-row.vs-stat-row > .elementor-container > .elementor-column { width: auto !important; min-width: 0 !important; }
}

/* --------------------------------------------------------------------------
   Logo (image): same size in header and footer, light / dark versions swap
   with the theme toggle. Set in Appearance > Customize (Site Identity logo +
   "Logo for dark mode").
   -------------------------------------------------------------------------- */
:root { --vs-logo-h: 36px; }
@media (max-width: 1180px) { :root { --vs-logo-h: 30px; } }   /* full menu + logo must share one row */
@media (max-width: 980px) { :root { --vs-logo-h: 34px; } }    /* menu folds away: room for a larger logo */
@media (max-width: 640px) { :root { --vs-logo-h: 30px; } }
@media (max-width: 380px) { :root { --vs-logo-h: 28px; } }
html body :is(.vs-header, .vs-footer) .vs-logo img.vs-logo-img {
  height: var(--vs-logo-h) !important;
  max-height: none !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}
html body :is(.vs-header, .vs-footer) .vs-logo { line-height: 0; }
html body :is(.vs-header, .vs-footer) .vs-logo .vs-logo-dark { display: none !important; }
html[data-theme="dark"] body :is(.vs-header, .vs-footer) .vs-logo .vs-logo-light { display: none !important; }
html[data-theme="dark"] body :is(.vs-header, .vs-footer) .vs-logo .vs-logo-dark { display: block !important; }
html body :is(.vs-header, .vs-footer) .vs-logo:hover img.vs-logo-img { transform: none; }