/* ==========================================================
   STAFFLANCER UI — FINAL STABLE BUILD
   - Restores Inter + typography
   - Keeps layouts stable
   - Allows case study JS transform to animate
   - Related Posts + Related Case Studies share same styling
   ========================================================== */

/* ==========================================================
   GLOBAL TOKENS
   ========================================================== */

:root{
  --sl-text: #111827;
  --sl-heading: #0b1220;
  --sl-muted: #6b7280;

  --sl-link: #2563eb;
  --sl-link-hover: #1d4ed8;

  --sl-border: #e5e7eb;
  --sl-bg: #ffffff;
  --sl-bg-soft: #f9fafb;

  /* Button tokens */
  --sl-btn: #5209E5;
  --sl-btn-hover: #5209E5;
  --sl-btn-text: #ffffff;

  /* Layout knobs */
  --sl-shell: 1180px;
  --sl-sidebar: 360px;
  --sl-content: 800px;
  --sl-sticky-top: 110px;

  --sl-card-radius: 18px;
  --sl-img-radius: 16px;

  --sl-archive-gap: 18px;
  --sl-archive-thumb-h: 200px;
}

/* ==========================================================
   GLOBAL TYPOGRAPHY (Inter everywhere)
   ========================================================== */

body{
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--sl-text);
  background: var(--sl-bg);
}

/* Force Inter across form controls + Elementor.
   (kept intentionally to prevent Elementor fallback fonts) */
body, button, input, select, optgroup, textarea,
.elementor-widget, .elementor-widget *{
  font-family: "Inter", sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: "Inter", sans-serif;
  color: var(--sl-heading);
  margin: 0 0 0.6em 0;
}
h1{ font-size: 48px; font-weight: 800; line-height: 1.1; }
h2{ font-size: 36px; font-weight: 800; line-height: 1.15; }
h3{ font-size: 28px; font-weight: 700; line-height: 1.2; }
h4{ font-size: 22px; font-weight: 700; line-height: 1.25; }
h5{ font-size: 18px; font-weight: 600; line-height: 1.3; }
h6{ font-size: 16px; font-weight: 600; line-height: 1.35; }

p{ margin: 0 0 1.2em 0; }
small{ color: var(--sl-muted); }

/* Links */
a{ color: var(--sl-link); text-decoration: none; }
a:hover{ color: var(--sl-link-hover); text-decoration: underline; }

/* Content readability */
.entry-content,
.wp-block-post-content{
  font-size: 18px;
  line-height: 1.75;
}

/* ==========================================================
   BUTTONS (Theme + WP + Elementor)
   - Use :where() to avoid fighting plugin specificity too hard
   ========================================================== */

:where(button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
.wp-element-button,
.elementor-button){
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  background: var(--sl-btn);
  color: var(--sl-btn-text);
}

:where(button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover,
.wp-element-button:hover,
.elementor-button:hover){
  background: var(--sl-btn-hover);
  color: var(--sl-btn-text);
}

/* ==========================================================
   CASE STUDY PREVIEW (Reusable)
   - IMPORTANT: do NOT use !important on transform.
     JS must control transform for scrolling animation.
   ========================================================== */

.cs-preview{
  width: min(72vw, 960px);
  margin: 0 auto;
  border-radius: 18px;
}

.ch-top{
  border: 2px solid rgba(255,255,255,.95);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(248,248,248,.98), rgba(236,236,236,.98));
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

.ch-tabs{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 0 10px;
}

.ch-tab{
  height: 34px;
  border-radius: 12px 12px 0 0;
  position: relative;
  border: 1px solid rgba(0,0,0,.08);
  border-bottom: 0;
  background: rgba(255,255,255,.65);
}

.ch-tab-active{
  width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #ffffff;
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
}

.ch-tab-inactive{
  width: 120px;
  background: rgba(255,255,255,.45);
  opacity: .75;
}

.ch-favicon{
  width: 14px; height: 14px;
  border-radius: 4px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(0,0,0,.12));
  border: 1px solid rgba(0,0,0,.10);
}

.ch-tab-title{
  font-size: 12px;
  color: rgba(0,0,0,.78);
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.ch-close{
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 9px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
}
.ch-close::before,
.ch-close::after{
  content:"";
  position:absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.6px;
  background: rgba(0,0,0,.55);
  transform-origin: center;
}
.ch-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.ch-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.ch-notch{
  position: absolute;
  bottom: -1px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.ch-notch-left{
  left: -10px;
  border-left: 1px solid rgba(0,0,0,.08);
  border-bottom-left-radius: 16px;
  transform: skewX(-12deg);
}
.ch-notch-right{
  right: -10px;
  border-right: 1px solid rgba(0,0,0,.08);
  border-bottom-right-radius: 16px;
  transform: skewX(12deg);
}

.ch-plus{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
  margin-bottom: 3px;
}
.ch-plus::before,
.ch-plus::after{
  content:"";
  position:absolute;
  top: 50%; left: 50%;
  background: rgba(0,0,0,.55);
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.ch-plus::before{ width: 12px; height: 2px; }
.ch-plus::after{ width: 2px; height: 12px; }

.ch-spacer{ flex: 1; }

.ch-window{
  display: flex;
  gap: 8px;
  padding: 0 6px 6px 0;
}
.ch-wdot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.10);
  opacity: .55;
}

.ch-toolbar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px 12px;
  border-top: 1px solid rgba(0,0,0,.07);
}

.ch-nav, .ch-right{
  display: flex;
  gap: 8px;
  align-items: center;
}

.ch-ic{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
}

.ch-back::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 9px; height: 9px;
  border-left: 2px solid rgba(0,0,0,.62);
  border-bottom: 2px solid rgba(0,0,0,.62);
  transform: translate(-40%,-50%) rotate(45deg);
}

.ch-forward{ opacity: .45; }
.ch-forward::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 9px; height: 9px;
  border-right: 2px solid rgba(0,0,0,.62);
  border-top: 2px solid rgba(0,0,0,.62);
  transform: translate(-60%,-50%) rotate(45deg);
}

.ch-reload::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 13px; height: 13px;
  border: 2px solid rgba(0,0,0,.62);
  border-right-color: transparent;
  border-radius: 999px;
  transform: translate(-50%,-50%) rotate(20deg);
}
.ch-reload::after{
  content:"";
  position:absolute;
  top: 50%; left: 58%;
  width: 6px; height: 6px;
  border-right: 2px solid rgba(0,0,0,.62);
  border-top: 2px solid rgba(0,0,0,.62);
  transform: translate(-50%,-95%) rotate(20deg);
}

.ch-star::before{
  content:"★";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color: rgba(0,0,0,.62);
  font-size: 14px;
}

.ch-menu::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 3px; height: 3px;
  background: rgba(0,0,0,.62);
  border-radius: 999px;
  transform: translate(-50%,-50%);
  box-shadow: 0 -6px 0 rgba(0,0,0,.62), 0 6px 0 rgba(0,0,0,.62);
}

.ch-omnibox{
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
  overflow: hidden;
}

.ch-lock{
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 2px solid rgba(0,0,0,.55);
  position: relative;
}
.ch-lock::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -5px;
  width: 8px;
  height: 6px;
  border: 2px solid rgba(0,0,0,.55);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  transform: translateX(-50%);
}

.ch-url{
  font-size: 12.5px;
  letter-spacing: .15px;
  color: rgba(0,0,0,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Viewport */
.cs-viewport{
  position: relative;
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(255,255,255,.95);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  aspect-ratio: 16 / 10;
  height: min(84vh, 864px);
  max-width: min(72vw, 960px);
  box-shadow: 0 40px 90px rgba(0,0,0,.18);
}

/* IMPORTANT: transform is NOT forced with !important.
   JS must be able to update it. */
.cs-shot{
  width: 100%;
  height: auto;
  display: block;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.cs-fade{
  position:absolute;
  left:0; right:0;
  height:56px;
  pointer-events:none;
  z-index:5;
}
.cs-fade-top{
  top:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0));
}
.cs-fade-bottom{
  bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0));
}

@media (max-width: 768px){
  .cs-preview{ width: min(92vw, 520px); }
  .cs-viewport{
    height: min(62vh, 520px);
    max-width: min(92vw, 520px);
  }
  .ch-tab-active{ width: 190px; }
  .ch-tab-inactive{ display:none; }
  .ch-right{ display:none; }
  .ch-window{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .cs-shot{ transform: none !important; }
}

/* ==========================================================
   Sticky helpers
   ========================================================== */

/* Prevent horizontal page jiggle WITHOUT breaking sticky */
html, body{
  max-width: 100%;
  overflow-x: visible;
}
body{ overflow-x: clip; }

/* Sticky Core Services (Desktop only) */
@media (min-width: 1025px) {
  .core-services-sticky {
    position: sticky;
    top: var(--sl-sticky-top);
    align-self: flex-start;
    height: fit-content;
    z-index: 10;
  }
}

/* Related Case Studies: equal image size regardless of uploaded dimensions */
.sl-related--case-study .sl-related-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* change to 4/3 if you want taller like your screenshot */
  overflow: hidden;
  border-radius: 20px;
  background: #f2f4f7;
}

.sl-related--case-study .sl-related-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================
   Pagination (shared) — Case Studies + Blog (same design)
   ========================================================== */
.sl-pagination { margin-top: 28px; }

.sl-pagination ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.sl-pagination a,
.sl-pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.12);
}

.sl-pagination a:hover{
  text-decoration: none;
}

.sl-pagination .current{
  font-weight: 700;
}

/* ==========================================================
   BLOG Pagination ONLY (WordPress default .nav-links)
   - Matches your Case Studies pagination style
   - Does NOT affect .sl-pagination--case-studies
   ========================================================== */

body.blog .nav-links,
body.archive .nav-links,
body.category .nav-links,
body.tag .nav-links,
body.search .nav-links{
  margin-top: 28px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

body.blog .nav-links .page-numbers,
body.archive .nav-links .page-numbers,
body.category .nav-links .page-numbers,
body.tag .nav-links .page-numbers,
body.search .nav-links .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.12);
}

body.blog .nav-links .page-numbers.current,
body.archive .nav-links .page-numbers.current,
body.category .nav-links .page-numbers.current,
body.tag .nav-links .page-numbers.current,
body.search .nav-links .page-numbers.current{
  font-weight: 700;
}

body.blog .nav-links .page-numbers:hover,
body.archive .nav-links .page-numbers:hover,
body.category .nav-links .page-numbers:hover,
body.tag .nav-links .page-numbers:hover,
body.search .nav-links .page-numbers:hover{
  text-decoration: none;
}

/* ==========================================================
   UTILITIES
   ========================================================== */

.sl-container-1200{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}



/* CTA inside mobile menu */
.sl-cta-menu-item{
  padding: 14px 16px;
}

.sl-cta-menu-item .elementor-button,
.sl-cta-menu-item a.elementor-button{
  width: 100%;
  justify-content: center;
  border-radius: 999px;
}