/* ===========================
   Global CSS – Snowfox Child
   =========================== */

/* --- Design tokens --- */
:root{
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* --- Header utilities --- */
:root{ --header-h: 180px; }
@media (max-width: 767px){
  :root{ --header-h: 120px; }
}
/* add this class to the first (hero) container on pages that use a transparent header */
.hero-pad{ padding-top: var(--header-h); }
/* keep clear of WP admin bar */
body.admin-bar .t-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .t-header{ top: 46px; }
}

/* --- Typography rhythm --- */
body{ line-height:1.5; }
h1{ line-height:1.15; }
h2{ line-height:1.2; }
h3{ line-height:1.25; }
h4, h5, h6{ line-height:1.3; }
p{ margin:0 0 .75em; }
.container p:last-child{ margin-bottom:0; }
.hero-title{ line-height:1.08; }
ul{ padding-inline-start: 20px; }

/* Zero out bottom margin on the last paragraph in Elementor blocks */
.elementor .elementor-widget-text-editor p:last-child,
.elementor .elementor-widget-container > p:last-child,
.elementor .e-con p:last-child,
.elementor .elementor-column p:last-child{
  margin-bottom: 0;
}

/* --- Small utilities --- */
.orange-text{ color:#ff5842; }

/* ===========================
   Tabs (Discover / Highlights)
   =========================== */
.iss-tabs .tab-pane{ display:none; }
.iss-tabs:not(.has-active) .tab-pane:first-of-type{ display:block; } /* fallback before JS */
.iss-tabs .tab-pane.is-active{ display:block; }
.iss-tabs .tab-trigger{
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:12px 0;
}
.iss-tabs .tab-trigger:last-child{ border-bottom:none; }
.iss-tabs .tab-trigger.is-active .label{ color:#fff; }
.iss-tabs .tab-trigger.is-active .icon{ transform:translateX(4px); }
.iss-tabs .tab-pane.is-active{ animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:.001; transform:translateY(4px)} to{opacity:1; transform:none} }

/* ===========================
   Case Study Card (Loop Item)
   =========================== */
.cs-card{
  border-radius:24px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  background:#fff;
  /* Elementor containers are flex by default, but this helps if a template changes */
  display:flex;
}

.cs-media{ width:40%; min-height:480px; }
.cs-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.cs-content{ width:60%; padding:40px; border-left:1px solid rgba(0,0,0,.08); }

.cs-quote{
  font-size:clamp(20px, 1.4vw + 12px, 32px);
  line-height:1.25; margin:0 0 20px;
  white-space: normal; word-break: normal; overflow-wrap: anywhere;
}

.cs-person{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.cs-person img{ width:64px; height:64px; border-radius:999px; object-fit:cover; }

/* Tablet: stack the card so the slide stays wide enough */
@media (max-width:1024px){
  .cs-card{ flex-direction: column !important; }
  .cs-media{ width:100%; min-height:300px; }
  .cs-content{
    width:100%;
    padding:28px;
    border-left:none;
    border-top:1px solid rgba(0,0,0,.08);
  }
}

/* Phone: slightly shorter hero image + tighter padding */
@media (max-width:767px){
  .cs-card{ flex-direction: column !important; }
  .cs-media{ width:100%; min-height:220px; }
  .cs-content{ width:100%; padding:20px; }
}

/* ===========================
   Loop Carousel – Offset Slides mode
   (No custom peek/centering JS or CSS needed)
   =========================== */

/* Optional: gentle emphasis on the active slide */
.elementor-widget-loop-carousel .swiper-slide{
  transition: transform .25s ease, opacity .25s ease;
  opacity:.85;
  transform: scale(.985);
}
.elementor-widget-loop-carousel .swiper-slide.swiper-slide-active{
  opacity:1;
  transform: scale(1);
}

/* ===========================
   Edge-to-edge utility (use on any section)
   =========================== */

/* Make a section span the full viewport width, ignoring site wrapper */
.edge-bleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
/* Optional padding when bleeding */
.edge-bleed.edge-pad{
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* ===========================
   Buttons / misc (kept from your file)
   =========================== */

/* Button with custom left icon + Elementor's built-in right icon */
.dual-icon-btn .elementor-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;            /* space between text and the right icon */
  padding-left: 46px;   /* gap + buffer */
}
/* Left circular badge WITH the SVG inside it */
.dual-icon-btn .elementor-button::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("/wp-content/uploads/Icon-Client.svg"); /* your SVG */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
/* Tidy spacing for Elementor's built-in right icon */
.dual-icon-btn .elementor-button .elementor-button-icon{ margin-left: 12px; }
.dual-icon-btn .elementor-button-icon svg{ width: 6px; }

/* Role Tiles Split Text Top + Bottom */
.sf-role .elementor-flip-box__layer__inner{ display:flex; flex-direction:column; min-height:100%; }
.sf-role .elementor-flip-box__layer__inner > :last-child{ margin-top:auto; }

/* Role Tiles Rounded Corners */
.sf-role .elementor-flip-box__front, .sf-role .elementor-flip-box__back{ border-radius: 25px; }

/* Role Tiles Bubble Words */
.flip-bubble{ padding: 10px 25px; background: #CECECE80; border-radius: 9999px; }

/* Role Tiles Height */
.sf-role .elementor-flip-box{ min-height: 500px; }

/* Back: stack, with the last two items at the bottom */
.sf-role .elementor-flip-box__back .elementor-flip-box__layer__inner{ display:flex; flex-direction:column; min-height:100%; }
.sf-role .elementor-flip-box__back .elementor-flip-box__layer__inner > :nth-last-child(2){ margin-top:auto; }

/* Back: make the button align left and not auto-center */
.sf-role .elementor-flip-box__back .elementor-flip-box__button.elementor-button.elementor-size-sm{
  align-self:flex-start; margin: 0;
}

/* Mobile menu overlay (kept) */
.sf-mobile-menu .elementor-menu-toggle.elementor-active+.elementor-nav-menu__container{
  z-index: 1; display: flex; flex-direction: column; justify-content: center;
  position: fixed; margin-top: 0!important; top: 0!important; left: 0!important;
  padding: 20px; height: 100vh!important; width: 100vw!important;
}
.sf-mobile-menu .elementor-menu-toggle.elementor-active{ position: fixed; top: 6vh; right: 4vw; }
.sf-mobile-menu .elementor-menu-toggle{ z-index: 2; }
.sf-mobile-menu .elementor-active.elementor-menu-toggle svg{ fill: #000!important; }

.sf-mobile-menu .elementor-nav-menu a {
    justify-content: space-between;
}

/* Testimonial Name + Role - Remove Margin */
.testimonial-title .elementor-icon-box-title {
    margin: 0px;
}

/* Hide Dropdown Icon Main Menu */
.e-n-menu-dropdown-icon {
    display: none !important;
}

/* Cap Sizes in Image Carousel */
.client-logo-carousel .swiper-slide img {
  max-height: 60px;
  max-width: 130px;
  width: auto;
  height: auto;
}

/* Image Carousel Smooth Scroll */
.client-logo-carousel .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

/* Disable pointer interaction completely on Logo Carousel */
.client-logo-carousel .swiper-container,
.client-logo-carousel .swiper-wrapper,
.client-logo-carousel .swiper-slide {
  pointer-events: none;
  cursor: default;
}

/* Left and right fades */
.client-logo-carousel::before,
.client-logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 180px;               /* adjust fade width as needed */
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Left fade */
.client-logo-carousel::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(47, 43, 43, 1),      /* solid background */
    rgba(47, 43, 43, 0)       /* fade to transparent */
  );
}

/* Right fade */
.client-logo-carousel::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(47, 43, 43, 1),
    rgba(47, 43, 43, 0)
  );
}

/* Blog heading font weight */
.blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
	font-weight: 500;
}

/* Blog heading color */
.blog-content h2 {
    color: var(--e-global-color-accent);
}

/* Underline links in blog posts */
.blog-content a {
	text-decoration: underline;
}

/* Mega menu role icon margin */
.role-nav .elementor-icon-box-icon {
    margin-top: 13px;
}

/* Mega menu tab titles margin */
.tabs-nav .e-n-tabs-heading {
    margin-top: 32px;
}

/* Cap Sizes */
.client-logo-carousel--transparent .swiper-slide img {
  max-height: 60px;
  max-width: 130px;
  width: auto;
  height: auto;
}

/* Smooth Scroll */
.client-logo-carousel--transparent .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

/* Disable pointer interaction */
.client-logo-carousel--transparent .swiper-container,
.client-logo-carousel--transparent .swiper-wrapper,
.client-logo-carousel--transparent .swiper-slide {
  pointer-events: none;
  cursor: default;
}

/* TRANSPARENT EDGE FADES USING MASK */
.client-logo-carousel--transparent {
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 88%,
    transparent 100%
  );
}

/* Remove the old dark overlays */
.client-logo-carousel--transparent::before,
.client-logo-carousel--transparent::after {
  display: none;
}

.sf-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  /* nice touch for iOS */
  -webkit-overflow-scrolling: touch;
}

.sf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
  margin: 0 auto;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
  /* make sure it does not collapse too small on mobile */
  min-width: 540px;
}

.sf-table th {
  color: #fff;
  font-weight: 600;
  padding: 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-table td {
  padding: 1.1rem 1rem;
  color: #d5d3d2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sf-table tr:last-child td {
  border-bottom: none;
}

/* keep divider only after first column */
.sf-table th:first-child,
.sf-table td:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* highlight column */
.sf-table th:nth-child(3),
.sf-table td:nth-child(3) {
  background: linear-gradient(
    180deg,
    rgba(255, 88, 66, 0.4) 0%,
    rgba(255, 88, 66, 0.25) 100%
  );
  color: #fff;
  font-weight: 600;
}

/* soften middle column */
.sf-table td:nth-child(2) {
  color: #c0bebb;
}

.sf-table td strong {
  font-weight: 700;
}

/* --- Mobile table width optimisation --- */
@media (max-width: 767px) {
  .sf-table {
    min-width: 300px; /* so it fits nicely in viewport */
    table-layout: fixed; /* evenly distribute column widths */
  }

  .sf-table th,
  .sf-table td {
    word-wrap: break-word;
    white-space: normal;
  }

  /* tighter, more balanced column widths */
  .sf-table th:nth-child(1),
  .sf-table td:nth-child(1) {
    width: 120px;
  }

  .sf-table th:nth-child(2),
  .sf-table td:nth-child(2) {
    width: 90px;
  }

  .sf-table th:nth-child(3),
  .sf-table td:nth-child(3) {
    width: 120px;
  }
}