/* =========================================
   GLOBAL.CSS — Shared utility classes
   and repeated component patterns.

   Load order (every page):
   preloader → variables → reset → global
   → main → navigation → [page].css

   RULE: If a pattern appears in 3+ CSS files
   identically, it lives here. Page CSS keeps
   only what is unique to that page.
   ========================================= */


/* ══════════════════════════════════════════
   1. CARD BASE
   Shared structure for all interactive cards.
   Apply .card to the element, then add
   page-specific sizing/padding in [page].css
══════════════════════════════════════════ */

.card {
  background:      var(--bg-elevated);
  border:          1px solid var(--border);
  border-radius:   var(--radius-lg);
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  overflow:        hidden;
  transition:
    transform    var(--t-card) ease,
    box-shadow   var(--t-card) ease,
    border-color var(--t-card) ease;
}

.card:hover {
  transform:    translateY(var(--card-hover-y));
  box-shadow:   var(--card-hover-shadow);
  border-color: var(--card-hover-border);
}


/* ══════════════════════════════════════════
   2. HOVER LIFT UTILITY
   For cards that can't use .card directly
   (e.g. already have a specific class chain).
   Apply .hover-lift to get the standard effect.
══════════════════════════════════════════ */

.hover-lift {
  transition:
    transform    var(--t-card) ease,
    box-shadow   var(--t-card) ease,
    border-color var(--t-card) ease;
}

.hover-lift:hover {
  transform:    translateY(var(--card-hover-y));
  box-shadow:   var(--card-hover-shadow);
  border-color: var(--card-hover-border);
}


/* ══════════════════════════════════════════
   3. KICKER / SECTION LABEL
   Blue pill label with leading line.
   Used on every section intro.
══════════════════════════════════════════ */

.kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  font-weight:    600;
  color:          var(--blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  20px;
}

.kicker::before {
  content:       "";
  flex-shrink:   0;
  width:         20px;
  height:        1.5px;
  background:    var(--blue);
  border-radius: 2px;
}


/* ══════════════════════════════════════════
   4. TAG LABEL — inline category tags
   Used on cards: blog-card__tag,
   cs-card__category, audit badge, etc.
══════════════════════════════════════════ */

.tag {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--blue);
}

.tag--muted {
  color: var(--text-muted);
}


/* ══════════════════════════════════════════
   5. SECTION HEADING ACCENT
   The blue <span> inside section h2/h3.
   Apply to the parent, span inherits colour.
══════════════════════════════════════════ */

.accent-heading span {
  color: var(--blue);
}


/* ══════════════════════════════════════════
   6. BUTTON SYSTEM
   Base .btn + modifier classes.
   Replaces audit-cta__btn, about-cta__btn,
   res-cta__btn, cp-cta__btn, etc.
══════════════════════════════════════════ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         13px 26px;
  border-radius:   var(--radius-pill);
  font-family:     var(--font-primary);
  font-size:       14px;
  font-weight:     500;
  letter-spacing:  0.01em;
  text-decoration: none;
  cursor:          pointer;
  border:          1.5px solid transparent;
  white-space:     nowrap;
  transition:
    background   var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color        var(--t-fast) ease,
    transform    var(--t-fast) ease,
    box-shadow   var(--t-fast) ease;
}

/* Primary — solid blue */
.btn--primary {
  background:   var(--blue);
  color:        #ffffff;
  border-color: var(--blue);
}

.btn--primary:hover {
  background:   var(--blue-dark);
  border-color: var(--blue-dark);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px rgba(26,70,201,0.25);
}

/* Ghost — outline, dark text */
.btn--ghost {
  background:   transparent;
  color:        var(--text-primary);
  border-color: var(--border-hover);
}

.btn--ghost:hover {
  border-color: var(--blue);
  color:        var(--blue);
}

/* Ghost light — outline on dark backgrounds */
.btn--ghost-light {
  background:   transparent;
  color:        rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.22);
}

.btn--ghost-light:hover {
  background:   rgba(255,255,255,0.10);
  color:        #ffffff;
  border-color: rgba(255,255,255,0.45);
}

/* Size modifiers */
.btn--sm { padding: 9px 18px;  font-size: 12px; }
.btn--lg { padding: 16px 32px; font-size: 15px; }


/* ══════════════════════════════════════════
   7. AVAILABILITY DOT
   Pulsing green dot used in nav, contact,
   about pages.
══════════════════════════════════════════ */

.avail-badge {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-size:   12px;
  font-weight: 500;
  color:       var(--green);
}

.avail-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--green);
  flex-shrink:   0;
  animation:     pulseGreen 2s ease-in-out infinite;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0   rgba(29,158,117,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(29,158,117,0);   }
}


/* ══════════════════════════════════════════
   8. SECTION WRAPPER
   Standard max-width + horizontal padding.
   Responsive at all breakpoints.
══════════════════════════════════════════ */

.section-wrap {
  width:      100%;
  max-width:  1440px;
  margin:     0 auto;
  padding:    0 64px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .section-wrap { padding: 0 40px; }
}

@media (max-width: 768px) {
  .section-wrap { padding: 0 20px; }
}


/* ══════════════════════════════════════════
   9. ARROW LINK
   Inline arrow that moves on hover.
   Used in cards, nav items, related content.
══════════════════════════════════════════ */

.arrow-link {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  color:       var(--blue);
  font-size:   13px;
  font-weight: 500;
  text-decoration: none;
  transition:  gap var(--t-fast) ease;
}

.arrow-link:hover { gap: 10px; }

/* Arrow icon inside any card that moves on parent hover */
.card-arrow {
  position:   absolute;
  top:        20px;
  right:      20px;
  font-size:  16px;
  color:      #ccc;
  transition:
    color     var(--t-fast) ease,
    transform var(--t-fast) ease;
}

.card:hover .card-arrow,
.hover-lift:hover .card-arrow {
  color:     var(--blue);
  transform: translate(3px, -3px);
}


/* ══════════════════════════════════════════
   10. METRIC / STAT DISPLAY
   Large number + label pattern used in
   case studies, homepage stats, audit scores.
══════════════════════════════════════════ */

.metric {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.metric__value {
  font-size:      2.4rem;
  font-weight:    700;
  letter-spacing: -0.05em;
  line-height:    1;
  color:          var(--blue);
}

.metric__label {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.45;
}


/* ══════════════════════════════════════════
   11. DIVIDER
   Simple 1px horizontal rule using border token.
══════════════════════════════════════════ */

.divider {
  width:      100%;
  height:     1px;
  background: var(--border);
  border:     none;
  margin:     0;
}


/* ══════════════════════════════════════════
   12. REDUCED MOTION — global override
   animations.css also has this, but keeping
   it here ensures it applies to global patterns.
══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .card,
  .hover-lift,
  .btn,
  .arrow-link,
  .avail-dot {
    transition: none !important;
    animation:  none !important;
  }

  .card:hover,
  .hover-lift:hover {
    transform: none;
  }
}