/* ============================================================
   YOUR IT AND TECH MATES — Universal UX Polish Layer
   Applies over both clay-theme.css and case-study-master.css
   Version: 1.0 | May 2026
   ============================================================ */

/* ── 1. BASE RENDERING & SMOOTHNESS ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── 2. FOCUS STYLES — WCAG AA accessible ─────────────────── */
:focus { outline: none; }

:focus-visible {
  outline: 3px solid #ff6b3d;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip to content */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  padding: 10px 18px;
  background: #1c0e08;
  color: #fff !important;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  font-size: .9rem;
  transition: left 0s;
}
.skip-link:focus {
  left: 14px;
}

/* ── 3. TYPOGRAPHY REFINEMENTS ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

p, li {
  overflow-wrap: break-word;
  max-width: 75ch;
}

/* Prevent orphan words in headings */
.yitm-title, .hero-h1, .page-h1, .s-title, .yitm-h2 {
  text-wrap: balance;
}

/* ── 4. IMAGE POLISH ────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Smooth image loading */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .4s ease;
}
img[loading="lazy"].loaded,
img:not([loading]) {
  opacity: 1;
}

/* Prevent layout shift */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* ── 5. BUTTON MICRO-INTERACTIONS ──────────────────────────── */
/* Apply to all known button patterns across both systems */
.btn, .btn-primary, .btn-secondary, .btn-call, .btn-wa,
.yitm-btn, .yitm-btn-primary, .yitm-btn-secondary,
.case-global-btn, a[class*="btn-"],
button[class*="btn"] {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              box-shadow .18s ease,
              background-color .15s ease,
              border-color .15s ease !important;
  will-change: transform;
  cursor: pointer;
}

.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-call:hover, .btn-wa:hover,
.yitm-btn:hover, a[class*="btn-"]:hover {
  transform: translateY(-2px) !important;
}

.btn:active, .btn-primary:active, .btn-secondary:active,
.yitm-btn:active, a[class*="btn-"]:active {
  transform: translateY(0) scale(.98) !important;
  transition-duration: .08s !important;
}

/* ── 6. CARD HOVER STATES ──────────────────────────────────── */
/* Cross-link cards */
.cross-link-card {
  transition: transform .2s cubic-bezier(.34,1.2,.64,1),
              box-shadow .2s ease,
              border-color .2s ease !important;
  will-change: transform;
  text-decoration: none !important;
}
.cross-link-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(43,39,35,.12), 0 4px 12px rgba(43,39,35,.07) !important;
  border-color: rgba(255,107,61,.35) !important;
  text-decoration: none !important;
}

/* Case study service cards */
.yitm-service-card {
  transition: transform .2s cubic-bezier(.34,1.2,.64,1),
              box-shadow .2s ease,
              border-color .2s ease !important;
  will-change: transform;
}
.yitm-service-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.1) !important;
  border-color: rgba(var(--accent-rgb, 37,99,235),.25) !important;
  text-decoration: none !important;
}

/* Service area cards */
.service-card, .hub-local-panel, .hub-service-panel,
.process-step, .cause-card {
  transition: transform .2s cubic-bezier(.34,1.2,.64,1),
              box-shadow .2s ease !important;
}
.service-card:hover, .hub-local-panel:hover,
.hub-service-panel:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(43,39,35,.1) !important;
}

/* FAQ items */
.faq-item {
  transition: background-color .18s ease, border-color .18s ease !important;
}

/* ── 7. NAVIGATION POLISH ──────────────────────────────────── */
/* Smooth nav link underline animation */
.case-global-nav a,
.h-nav a {
  position: relative;
  transition: color .18s ease, background-color .18s ease, transform .18s ease !important;
}

.case-global-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: #ff6b3d;
  border-radius: 2px;
  transition: left .2s ease, right .2s ease;
}
.case-global-nav a:hover::after,
.case-global-nav a[aria-current="page"]::after {
  left: 8px;
  right: 8px;
}

/* ── 8. HEADER SCROLL SHADOW ───────────────────────────────── */
.case-global-header,
.site-header {
  transition: box-shadow .25s ease, background-color .25s ease !important;
}

/* ── 9. INLINE LINK POLISH ─────────────────────────────────── */
.yitm-post a:not([class]),
.yitm-inline-link {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .15s ease, text-decoration-color .15s ease !important;
}

main a:not([class*="btn"]):not([class*="card"]):not([class*="nav"]):not([class*="logo"]) {
  text-underline-offset: 2px;
}

/* ── 10. FORM & INPUT IMPROVEMENTS ────────────────────────── */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid #ff6b3d;
  outline-offset: 2px;
  border-color: #ff6b3d !important;
}

/* ── 11. BREADCRUMB REFINEMENTS ────────────────────────────── */
.yitm-breadcrumbs a,
.bc a {
  text-underline-offset: 2px;
  transition: color .15s ease !important;
}

/* ── 12. FAQ ACCORDION POLISH ──────────────────────────────── */
/* Clay-theme FAQs */
.faq-question {
  transition: color .15s ease !important;
}

.faq-answer {
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1) !important;
}

/* yitm FAQ details */
.yitm-faq details {
  transition: background-color .2s ease !important;
}
.yitm-faq summary {
  list-style: none;
  cursor: pointer;
  transition: color .15s ease !important;
}
.yitm-faq summary::-webkit-details-marker { display: none; }
.yitm-faq summary::marker { display: none; }

/* ── 13. HERO SECTION ENTRY ANIMATION ──────────────────────── */
@keyframes yitm-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes yitm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.yitm-hero .yitm-badge,
.hero .eyebrow, .hero .hero-badge-pill {
  animation: yitm-fade-in .4s ease both;
}
.yitm-title, .hero-h1, .page-h1 {
  animation: yitm-fade-up .5s .1s ease both;
}
.yitm-subtitle, .hero-intro {
  animation: yitm-fade-up .5s .2s ease both;
}
.yitm-cta-row, .hero-ctas {
  animation: yitm-fade-up .5s .3s ease both;
}

/* ── 14. STICKY CTA BAR ─────────────────────────────────────── */
.yitm-posticky-bar {
  transition: transform .3s cubic-bezier(.4,0,.2,1),
              opacity .3s ease !important;
  transform: translateY(100%);
  opacity: 0;
}
.yitm-posticky-bar.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ── 15. MOBILE TYPOGRAPHY SCALE ───────────────────────────── */
@media (max-width: 480px) {
  /* Tighter but readable on very small screens */
  .yitm-title { font-size: clamp(26px, 8vw, 34px) !important; letter-spacing: -.025em !important; }
  .yitm-h2    { font-size: clamp(20px, 6vw, 26px) !important; }
  .yitm-subtitle { font-size: 16px !important; }
  .yitm-mini-value { font-size: 20px !important; }
  .yitm-post { padding-left: 14px !important; padding-right: 14px !important; }

  /* Clay hero */
  .hero-h1, .page-h1 { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── 16. TABLET / MEDIUM SCREEN GAPS ───────────────────────── */
@media (max-width: 768px) {
  /* Cross-links drop to 1 column cleanly */
  .cross-links {
    grid-template-columns: 1fr !important;
  }

  /* Case study related grid: 1 col */
  .case-related-case-studies .yitm-service-links {
    grid-template-columns: 1fr !important;
  }

  /* Nav overflow handled */
  .case-global-nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .case-global-nav::-webkit-scrollbar { display: none; }

  /* Prevent sidebar overlap */
  .yitm-layout { grid-template-columns: 1fr !important; }
  .yitm-sidebar { position: static !important; }
}

@media (min-width: 500px) and (max-width: 900px) {
  /* 2-col grid at tablet for cross-links */
  .cross-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── 17. SCROLLBAR STYLING ─────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(43,39,35,.2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(43,39,35,.35); }

/* ── 18. SELECTION COLOUR ──────────────────────────────────── */
::selection {
  background: rgba(255,107,61,.18);
  color: #171411;
}

/* ── 19. CL-LABEL BADGE POLISH ─────────────────────────────── */
.cl-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,107,61,.09);
  color: #de5228;
  border: 1px solid rgba(255,107,61,.18);
  margin-bottom: 8px;
  width: fit-content;
}

.cl-title {
  font-size: 1rem;
  font-weight: 800;
  color: #171411;
  line-height: 1.3;
  margin-bottom: 6px;
}

.cl-desc {
  font-size: .84rem;
  color: #5f5850;
  line-height: 1.55;
}

/* ── 20. YITM SERVICE CARD GRID — consistent height ────────── */
.case-related-case-studies .yitm-service-links {
  align-items: stretch;
}
.case-related-case-studies .yitm-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.case-related-case-studies .yitm-service-more {
  margin-top: auto;
  padding-top: 10px;
}

/* ── 21. TRUST BANNER POLISH ───────────────────────────────── */
.yitm-trust-banner {
  border-radius: 16px !important;
  margin: 0 0 8px !important;
  font-size: 15px !important;
}

/* ── 22. URGENCY BAR READABILITY ───────────────────────────── */
.urg {
  font-size: .84rem !important;
  letter-spacing: .01em !important;
}

/* ── 23. PRINT STYLES ──────────────────────────────────────── */
@media print {
  .case-global-header,
  .site-header,
  .case-global-footer,
  .site-footer,
  .yitm-posticky-bar,
  .sticky-mobile-bar,
  .case-ad-slot,
  .skip-link,
  .urg,
  .contact-pref-banner {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .75em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }

  .yitm-post, main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .yitm-hero, .yitm-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  h1, h2, h3 { break-after: avoid; }
  img { max-width: 60% !important; }
}

/* ── 24. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 25. CONTENT OVERFLOW GUARD ────────────────────────────── */
pre, code, table {
  max-width: 100%;
  overflow-x: auto;
}

/* ── 26. FOOTER LINK SPACING ───────────────────────────────── */
.case-global-footer-links a,
.site-footer a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* ── 27. MOBILE CTA STACKING ────────────────────────────────── */
@media (max-width: 500px) {
  .yitm-cta-row,
  .yitm-bottom-cta-row,
  .cta-row, .hero-ctas {
    flex-direction: column !important;
  }
  .yitm-cta-row .yitm-btn,
  .yitm-bottom-cta-row .yitm-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── 28. BREADCRUMB OVERFLOW ────────────────────────────────── */
.yitm-breadcrumbs,
.bc .wrap {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.yitm-breadcrumbs::-webkit-scrollbar,
.bc .wrap::-webkit-scrollbar { display: none; }

/* ── 29. QUICK NAV PILL STYLE ───────────────────────────────── */
.quick-nav__links a {
  transition: background-color .15s ease, color .15s ease,
              transform .15s ease, border-color .15s ease !important;
}
.quick-nav__links a:hover {
  background: rgba(255,107,61,.08) !important;
  border-color: rgba(255,107,61,.25) !important;
  color: #de5228 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── 30. CHIP / BADGE CONSISTENCY ───────────────────────────── */
.yitm-chip,
.yitm-suburb-chip {
  transition: background-color .15s ease, border-color .15s ease !important;
}