/*
 * uktg-tokens.css
 * Design tokens, base typography, animations, font-face declarations.
 * Load order: 1 of 6 — everything else depends on these.
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --uktg-gold:        #BFAA7C;
  --uktg-gold-soft:   #d8c6a0;
  --uktg-gold-deep:   #8f7a4f;
  --uktg-gold-link:   #6b5a32;
  --uktg-gold-hover:  #4f4326;
  --uktg-dark:        #2b2b2b;
  --uktg-ink:         #333333;
  --uktg-trust:       #00B67A;
  --uktg-ease-soft:   cubic-bezier(.22,.61,.36,1);
  --uktg-ease-spring: cubic-bezier(.16,1,.3,1);

  /* Convenience aliases used across blocks */
  --gold:      var(--uktg-gold);
  --dark:      var(--uktg-dark);
  --ink:       var(--uktg-ink);
  --trust:     var(--uktg-trust);
}


/* ==========================================================================
   2A. GLOBAL BODY FONT STACK — CLS FIX
   Inserts 'Lato Fallback' between Lato and the system fonts so the browser
   uses our metric-adjusted fallback while Lato loads, preventing reflow.
   ========================================================================== */

body {
    font-family: 'Lato', 'Lato Fallback', sans-serif;
}


/* ==========================================================================
   2. BASE / TYPOGRAPHY RESET (scoped so it doesn't blow up WP admin)
   ========================================================================== */
.bubble-stage,
.site-header,
.uktg-landing-post,
.course-chat-form,
.uktg-faq,
.uktg-salary-widget,
.uktg-team-profile,
.basket-hero,
.uktg-compare,
.uktg-diploma-wrap,
.uktg-l5c-wrap,
.uktg-l5h-wrap {
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu,
               Cantarell, Arial, sans-serif;
  box-sizing: border-box;
  color: var(--uktg-ink);
}

.bubble-stage *,
.site-header * {
  box-sizing: border-box;
}

.bubble-stage a,
.uktg-faq a,
.uktg-l5c-wrap a,
.uktg-l5h-wrap a {
  color: inherit;
  text-decoration: none;
}

.bubble-stage a:hover,
.uktg-faq a:hover,
.uktg-l5c-wrap a:hover,
.uktg-l5h-wrap a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Styled links in content blocks */
.uktg-faq a,
.uktg-l5c-inner a,
.uktg-l5h-wrap a,
.uktg-diploma-inner a {
  color: var(--uktg-gold-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.uktg-faq a:hover,
.uktg-l5c-inner a:hover,
.uktg-l5h-wrap a:hover,
.uktg-diploma-inner a:hover {
  color: var(--uktg-gold-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   3. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* Bubble float (used on most pages) */
@keyframes floatY {
  from { transform: translateY(-10px); }
  to   { transform: translateY(20px);  }
}
@keyframes floatX {
  from { transform: translateX(-6px); }
  to   { transform: translateX(8px);  }
}

/* Legacy single-axis float (Meet the Team, Home) */
@keyframes float {
  0%   { transform: translateY(0px);   }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0px);   }
}

/* Basket / term-dates bubble rise */
@keyframes float-up {
  0%   { transform: translateY(0)   scale(var(--scale,1)); opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) scale(calc(var(--scale,1) * 0.8)); opacity: 0; }
}

/* YouTube hero blob */
@keyframes uktgFloat {
  0%, 100% { transform: translate(0, 0) scale(1);     }
  50%       { transform: translate(10px, -15px) scale(1.03); }
}
@keyframes uktgFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1);      }
  50%       { transform: translate(-8px, 10px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble,
  .uktg-hero-blob,
  .stu-bubble {
    animation: none;
  }
}


/* ==========================================================================
   34. FONT AWESOME — FONT-DISPLAY OVERRIDE
   all.min.css declares @font-face blocks without font-display, causing a
   render delay on BuddyPress pages. We only use solid icons (envelope,
   bell) so we override solid weight only. 'optional' is used rather than
   'swap' because these are icons — if the font misses the load window
   the browser skips it entirely rather than flashing fallback characters.
   ========================================================================== */

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: optional;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2') format('woff2');
}

/* ==========================================================================
   35. LATO FALLBACK FONT METRIC OVERRIDES — CLS FIX
   font-display: swap causes a reflow when Lato loads because the fallback
   font (Arial on Windows, Helvetica Neue on Mac) has different metrics.
   These overrides adjust the fallback to match Lato's line metrics so the
   layout does not shift when the web font swaps in.
   Values calculated against Lato 400 normal metrics.
   ========================================================================== */

@font-face {
    font-family: 'Lato Fallback';
    src: local('Arial');
    ascent-override: 101.03%;
    descent-override: 21.99%;
    line-gap-override: 0%;
    size-adjust: 97.84%;
}

@font-face {
    font-family: 'Lato Fallback';
    src: local('Helvetica Neue');
    ascent-override: 101.03%;
    descent-override: 21.99%;
    line-gap-override: 0%;
    size-adjust: 98.52%;
}
body {
    font-family: 'Lato', 'Lato Fallback', sans-serif;
    overflow-x: clip !important;
}