/* ==========================================================================
   THINKER RK — GLOBAL CODE FOUNDATION
   Reusable, site-wide CSS only. Page-specific styling lives in its own
   page-scoped file (trk-hero.css, trk-trust.css, etc.) and must never be
   duplicated here. Everything below is justified by a genuinely global rule
   in the approved HTML source (present in every page's shared <style> block).
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --trk-gold: #F1AD1D;
  --trk-gold-light: #F8C65C;
  --trk-black: #0B0B0B;
  --trk-white: #FFFFFF;
  --trk-off-white: #F8F8F8;

  --trk-space-xs: clamp(12px, 1.5vw, 18px);
  --trk-space-sm: clamp(16px, 2vw, 26px);
  --trk-space-md: clamp(20px, 3vw, 38px);
  --trk-space-lg: clamp(28px, 4vw, 56px);
  --trk-space-xl: clamp(40px, 6vw, 88px);
  --trk-space-2xl: clamp(56px, 8vw, 112px);

  --trk-container-editorial: 1280px;
  --trk-container-listing: 1080px;
  --trk-container-wide: 1440px;

  --trk-radius-sm: 8px;
  --trk-radius-md: 14px;
  --trk-radius-lg: 20px;
  --trk-radius-xl: 22px;
  --trk-radius-full: 999px;

  --trk-shadow-card: 0 18px 40px rgba(0,0,0,.1);
  --trk-shadow-card-lift: 0 20px 44px rgba(0,0,0,.12);
  --trk-shadow-fab: 0 8px 24px rgba(0,0,0,.12);

  --trk-ease-standard: cubic-bezier(.16,1,.3,1);
  --trk-transition-fast: .18s ease;
  --trk-transition-medium: .3s ease;
  --trk-transition-slow: .7s var(--trk-ease-standard);
  --trk-transition-cinematic: 1.6s var(--trk-ease-standard);

  --trk-breakpoint-header-nav: 1180px; /* documentation only, see note at bottom */
}

/* ---------- 2. Reset / base (matches every page's shared <style> block in the source) ---------- */
html { scroll-behavior: smooth; }
body.trk-site {
  margin: 0;
  background: #fff;
  color: var(--trk-black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.trk-site * { box-sizing: border-box; }
body.trk-site img { max-width: 100%; }
body.trk-site a { color: var(--trk-black); text-decoration: none; }
body.trk-site a:hover { color: #B87F06; }
::selection { background: var(--trk-gold); }

/* ---------- 3. Typography ---------- */
/* Family/size/weight per level are already configured in Elementor Global
   Fonts (Site Settings) — intentionally not duplicated here per this step's
   instructions. This section is reserved for the global type system only if
   a future correction to those Elementor globals is needed. */

/* ---------- 4. Layout utilities ---------- */
.trk-container-editorial { max-width: var(--trk-container-editorial); margin: 0 auto; }
.trk-container-listing { max-width: var(--trk-container-listing); margin: 0 auto; }
.trk-container-wide { max-width: var(--trk-container-wide); margin: 0 auto; }

/* ---------- 5. Buttons (the two shared button treatments used throughout the source) ---------- */
.trk-btn-primary .elementor-button {
  background: var(--trk-gold);
  color: var(--trk-black);
  border-radius: var(--trk-radius-sm);
  transition: background var(--trk-transition-fast);
}
.trk-btn-primary .elementor-button:hover { background: var(--trk-gold-light); color: var(--trk-black); }
.trk-btn-outline-dark .elementor-button {
  background: transparent;
  color: var(--trk-black);
  border: 1px solid var(--trk-black);
  border-radius: var(--trk-radius-sm);
  transition: background var(--trk-transition-fast), color var(--trk-transition-fast);
}
.trk-btn-outline-dark .elementor-button:hover { background: var(--trk-black); color: #fff; }

/* ---------- 6. Links ---------- */
/* Covered by the base reset in section 2 (a / a:hover). */

/* ---------- 7. Cards (shared hairline-border, hover-lift treatment) ---------- */
.trk-card {
  border: 1px solid #EDEDED;
  border-radius: var(--trk-radius-md);
  background: #fff;
  transition: box-shadow var(--trk-transition-medium), transform var(--trk-transition-medium);
}
.trk-card:hover { box-shadow: var(--trk-shadow-card-lift); }

/* ---------- 8. Media ---------- */
.trk-media-frame { position: relative; overflow: hidden; border-radius: var(--trk-radius-xl); }
.trk-media-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- 9. Forms baseline ---------- */
/* Reserved — no global form styling exists in the source beyond the Contact
   page's own field treatment, which is page-specific and will live in its
   own contact.css when that page is built. */

/* ---------- 10. Focus / accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--trk-black);
  outline-offset: 2px;
}

/* ---------- 11. Animation utilities ---------- */
/* These are the source's actual named global keyframes. Defining them here
   once, site-wide, so no page/section re-declares a duplicate. Utility
   classes are provided but NOT applied to anything automatically — only
   elements that explicitly opt in (via these classes) will animate. */
@keyframes rkPageIn { from { transform: translateY(8px); } to { transform: none; } }
@keyframes rkHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rkMenuIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rkCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rkMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes rkPulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.3); opacity: 0; } }

.trk-page-in { animation: rkPageIn .5s ease forwards; }
.trk-hero-in { animation: rkHeroIn .5s cubic-bezier(.16,1,.3,1) both; }
.trk-menu-in { animation: rkMenuIn .4s cubic-bezier(.16,1,.3,1) both; }
.trk-card-in { animation: rkCardIn .5s cubic-bezier(.16,1,.3,1) both; }
.trk-marquee { animation: rkMarquee 34s linear infinite; }
.trk-pulse { animation: rkPulse 2.4s ease infinite; }

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 13. Elementor compatibility ---------- */
/* Elementor Containers apply layout to an inner .e-con-inner wrapper, not the
   outer element a css_classes setting targets. Any future page/section CSS
   that needs to control a Container's own flex/grid layout (not just style
   its content) must target "&.e-con > .e-con-inner", matching the pattern
   already established in trk-header.css and trk-hero.css. Documented here so
   this lesson isn't re-learned per section. */

/* ---------- 14. Global responsive utilities ---------- */
/* The 1180px header breakpoint remains intentionally scoped to trk-header.css
   only (not a global Elementor breakpoint change) — see --trk-breakpoint-header-nav
   token above for the documented value future header-adjacent work should reference. */

/* ---------- Global custom cursor (desktop only, non-touch, reduced-motion aware) ---------- */
/* Approved as SITE-WIDE per the Header decision (overriding the source HTML's
   Home-only default), including the fix for the HTML's own inconsistency where
   Work/Project carry data-cursor attributes without the cursor being initialized. */
.trk-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 999px;
  background: var(--trk-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px/1 Inter, sans-serif;
  letter-spacing: .12em;
  color: var(--trk-black);
  white-space: nowrap;
  overflow: hidden;
  width: 10px; height: 10px;
  transition: width .2s ease, height .2s ease, background .2s ease;
  transform: translate3d(-100px,-100px,0);
}