/*
Theme Name: Vantem Consulting Services
Theme URI: https://vantemcs.com
Author: Vantem Consulting Services
Author URI: https://vantemcs.com
Description: A modern, sleek custom theme for Vantem Consulting Services — HR & Administrative Solutions for growing businesses. Built with Tailwind CSS (CDN) and GSAP entrance animations.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vantem
*/

/* ==========================================================================
   Design tokens (mirrors the Tailwind config in header.php)
   Base brand colors: Orange #F37526 / Dark Blue #00028C
   Everything else below is a tint, shade, or opacity derived from those two.
   ========================================================================== */
:root{
  --vantem-orange: #F37526;
  --vantem-orange-dark: #C85A16;
  --vantem-orange-tint: #FDE8DB;
  --vantem-blue: #00028C;
  --vantem-blue-deep: #00015E;
  --vantem-blue-mid: #1E22A8;
  --vantem-blue-tint: #E9EAFB;
  --vantem-blue-tint-2: #F4F5FD;
  --vantem-ink: #0B0B3B;
  --vantem-offwhite: #FAFAF9;
}

/* ==========================================================================
   Base
   ========================================================================== */
html{ scroll-behavior: smooth; }

body{
  background-color: var(--vantem-offwhite);
  color: var(--vantem-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.font-display{ font-family: 'Space Grotesk', 'Inter', sans-serif; }

/* Visible keyboard focus everywhere (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--vantem-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection{ background: var(--vantem-orange); color: #fff; }

/* ==========================================================================
   Logo blending — the source JPEG has a solid BLACK background behind the
   orange/navy emblem. `screen` blend-mode makes black pixels disappear
   (screen of black + any background = that background), so the trick is to
   always screen-blend the logo onto a small badge that is itself navy —
   that way the black square vanishes identically whether the header is in
   its transparent (on-hero) state or its scrolled (light) state, without
   ever washing the logo's own color out. See .vantem-logo-badge below.
   ========================================================================== */
.vantem-logo-badge{
  background-color: var(--vantem-blue-deep);
  transition: background-color .4s ease;
}
.vantem-logo{
  mix-blend-mode: screen;
  filter: brightness(1.05) contrast(1.05);
  -webkit-filter: brightness(1.05) contrast(1.05);
}

/* ==========================================================================
   Sweeping curved section dividers — the site's signature structural motif.
   Reused at the base of the hero, the stats band, and the contact section.
   ========================================================================== */
.vantem-divider{
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

/* ==========================================================================
   Hamburger -> X transform
   ========================================================================== */
.vantem-burger span{
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s ease, opacity .25s ease, width .35s ease;
}
.vantem-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.vantem-burger.is-open span:nth-child(2){ opacity: 0; }
.vantem-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav panel */
#mobile-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
#mobile-menu.is-open{ max-height: 32rem; }

/* ==========================================================================
   Service card elevation
   ========================================================================== */
.vantem-card{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.vantem-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0,2,140,0.18);
  border-color: var(--vantem-orange);
}

/* Signature corner-arc accent on cards & package panels — a quarter circle
   nodding to "organized structure", used sparingly (one per card, one corner). */
.vantem-arc{
  position: absolute;
  width: 64px;
  height: 64px;
  top: 0;
  right: 0;
  border-top-right-radius: 1rem;
  background: radial-gradient(circle at top right, rgba(243,117,38,0.16), transparent 70%);
  pointer-events: none;
}

/* ==========================================================================
   Stat counters
   ========================================================================== */
.vantem-stat-num{ font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Pre-animation state hooks for GSAP (avoids FOUC/flash-before-animate) */
.gsap-hero-line,
.gsap-fade-up{
  opacity: 0;
}

/* Founder / hero portrait framing */
.vantem-portrait{
  box-shadow: 0 30px 60px -15px rgba(0,1,94,0.45);
}

/* Header scroll transition */
#site-header{
  transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}