@import url("https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,300..700;1,300..700&display=swap");
@import "tailwindcss";
@source "../templates/**/*.twig";
@source "../web/js/**/*.js";

/* Paths resolve from compiled `web/dist/tailwind.css` → `web/assets/fonts/` */
@font-face {
  font-family: "Nine Elms VF";
  src: url("../assets/fonts/NineElmsVF_W_OpszWght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nine Elms VF";
  src: url("../assets/fonts/NineElmsVFItalic_W_OpszWght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nine Elms Text VF";
  src: url("../assets/fonts/NineElmsVF_Text_W_Wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-nine-elms: "Nine Elms VF", ui-serif, Georgia, "Times New Roman", serif;
  --font-nine-elms-text:
    "Nine Elms Text VF", "Nine Elms VF", ui-serif, Georgia, "Times New Roman",
    serif;
  --font-rosario: "Rosario", ui-sans-serif, system-ui, sans-serif;

  --color-indigo: #3a32bd;
  --color-navy: #221c89;
  --color-red: #de4444;
  --color-turquoise: #00c7b4;
  --color-cream: #fff6e8;
  --color-white: #ffffff;

  /* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1240,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --text--2: clamp(0.6944rem, 0.5858rem + 0.4828vw, 0.96rem);
  --text--1: clamp(0.8333rem, 0.6833rem + 0.6667vw, 1.2rem);
  --text-0: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
  --text-1: clamp(1.2rem, 0.9239rem + 1.2273vw, 1.875rem);
  --text-2: clamp(1.44rem, 1.0703rem + 1.6432vw, 2.3438rem);
  --text-3: clamp(1.728rem, 1.2364rem + 2.1849vw, 2.9297rem);
  --text-4: clamp(2.0736rem, 1.4238rem + 2.8882vw, 3.6621rem);
  --text-5: clamp(2.4883rem, 1.6336rem + 3.7988vw, 4.5776rem);

  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1260,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --spacing-3xs: clamp(0.25rem, 0.2287rem + 0.1064vw, 0.3125rem);
  --spacing-2xs: clamp(0.5rem, 0.4787rem + 0.1064vw, 0.5625rem);
  --spacing-xs: clamp(0.75rem, 0.7074rem + 0.2128vw, 0.875rem);
  --spacing-s: clamp(1rem, 0.9574rem + 0.2128vw, 1.125rem);
  --spacing-m: clamp(1.5rem, 1.4362rem + 0.3191vw, 1.6875rem);
  --spacing-l: clamp(2rem, 1.9149rem + 0.4255vw, 2.25rem);
  --spacing-xl: clamp(3rem, 2.8723rem + 0.6383vw, 3.375rem);
  --spacing-2xl: clamp(4rem, 3.8298rem + 0.8511vw, 4.5rem);
  --spacing-3xl: clamp(6rem, 5.7447rem + 1.2766vw, 6.75rem);

  /* One-up pairs */
  --spacing-3xs-2xs: clamp(0.25rem, 0.1436rem + 0.5319vw, 0.5625rem);
  --spacing-2xs-xs: clamp(0.5rem, 0.3723rem + 0.6383vw, 0.875rem);
  --spacing-xs-s: clamp(0.75rem, 0.6223rem + 0.6383vw, 1.125rem);
  --spacing-s-m: clamp(1rem, 0.766rem + 1.1702vw, 1.6875rem);
  --spacing-m-l: clamp(1.5rem, 1.2447rem + 1.2766vw, 2.25rem);
  --spacing-l-xl: clamp(2rem, 1.5319rem + 2.3404vw, 3.375rem);
  --spacing-xl-2xl: clamp(3rem, 2.4894rem + 2.5532vw, 4.5rem);
  --spacing-2xl-3xl: clamp(4rem, 3.0638rem + 4.6809vw, 6.75rem);

  /* Custom pairs */
  --spacing-s-l: clamp(1rem, 0.5745rem + 2.1277vw, 2.25rem);

  /* Custom breakpoints */
  --breakpoint-xs: 400px;
  --breakpoint-3xl: 1920px;

  /* Fixed nav height — update here if the nav changes */
  --nav-height: 110px;
}

html {
  scroll-padding-top: var(--nav-height);
  antialias: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--color-red);
  color: var(--color-white);
}

::-moz-selection {
  background: var(--color-red);
  color: var(--color-white);
}

mark {
  background: var(--color-red);
  color: var(--color-white);
}

.swiper-slide-shadow {
  background-color: rgba(34, 28, 137, 0.1) !important;
  box-shadow: 0 4px 10px 0 rgba(34, 28, 137, 0.5);
}

.swiper-slide-visible {
  box-shadow: 0 4px 10px 0 rgba(34, 28, 137, 0.5);
}

@utility container {
  padding-inline: var(--spacing-l);
  max-width: calc(1592px + var(--spacing-l) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);

  @media (width >= 1200px) {
    padding-inline: var(--spacing-xl);
    max-width: calc(1592px + var(--spacing-xl) * 2);
  }

  @media (width >= 1500px) {
    padding-inline: var(--spacing-2xl);
    max-width: calc(1592px + var(--spacing-2xl) * 2);
  }
}

@utility text-container {
  @apply mx-auto flex w-full max-w-[700px] flex-col gap-m;
}

@utility h1 {
  @apply text-5 font-nine-elms leading-tight;
}

@utility h2 {
  @apply text-4 font-nine-elms leading-tight;
}

@utility h3 {
  @apply text-3 font-nine-elms leading-tight;
}

@utility h4 {
  @apply text-2 font-nine-elms leading-tight;
}

@utility h5 {
  @apply text-1 font-nine-elms;
}

@utility h6 {
  @apply text-0 font-nine-elms;
}

@utility p {
  @apply text-0 font-rosario;
}

@utility small {
  @apply text--1 font-rosario;
}

@utility tiny {
  @apply text--2 font-rosario;
}

@utility rich-text {
  @apply font-rosario text-0 leading-relaxed text-black;

  & h1 {
    @apply h2 text-navy;
  }

  & h2 {
    @apply h3 text-navy;
  }

  & h3 {
    @apply h4 text-navy;
  }

  & h4 {
    @apply h5 text-navy;
  }

  & h5 {
    @apply h6 text-navy;
  }

  & h6 {
    @apply h6 text-navy;
  }

  & p {
    @apply m-0 text--1 leading-[1.75];
  }

  & a {
    @apply text-indigo underline;
  }

  & strong {
    @apply font-semibold;
  }

  & ul {
    @apply list-disc pl-m;
  }

  & ol {
    @apply list-decimal pl-m;
  }

  & li {
    font-size: var(--text--1);
  }

  & li + li {
    font-size: var(--text--1);
    margin-top: var(--spacing-2xs);
  }
}

@utility dropshadow {
  box-shadow: 0 4px 10px 0 rgba(34, 28, 137, 0.5);
}

@utility shapedropshadow {
  filter: drop-shadow(0 10px 5px rgba(34, 28, 137, 0.3));
}

@utility corner-fold-dropshadow {
  filter: drop-shadow(-1px 2px 4px rgba(34, 28, 137, 0.5));
}

@utility button {
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-s);
  background-color: var(--color-turquoise);
  color: var(--color-navy);
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: 100px;
  font-family: var(--font-rosario);
  font-size: var(--text-0);
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
  will-change: transform;

  &:hover {
    @apply bg-indigo text-white font-semibold italic underline decoration-wavy decoration-turquoise decoration-2 underline-offset-4 tracking-wide -skew-x-6 skew-y-2 scale-105;

    &::after {
      content: url("/assets/icons/arrow-right-turquoise.svg");
    }
  }

  &::after {
    margin-top: 4px;
    content: url("/assets/icons/arrow-right-navy.svg");
    display: block;
  }
}

@utility button-alt {
  @apply button bg-navy text-turquoise;

  &::after {
    content: url("/assets/icons/arrow-right-turquoise.svg");
  }

  &:hover {
    @apply bg-turquoise text-navy font-semibold italic underline decoration-wavy decoration-navy decoration-2 underline-offset-4 tracking-wide -skew-x-6 skew-y-2 scale-105;

    &::after {
      content: url("/assets/icons/arrow-right-navy.svg");
    }
  }
}

@utility button-sm {
  font-size: var(--text--1);
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-s);

  &::after {
    margin-top: 2px;
    transform: scale(0.85);
    transform-origin: center;
  }
}

@utility button-alt-sm {
  @apply button-alt button-sm;
}

@utility button-alt-sm-prev {
  @apply button-alt-sm flex-row-reverse;

  &::after {
    transform: scaleX(-1) scale(0.85);
  }
}

@utility button-outline {
  @apply button;
  background-color: transparent;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);

  &::after {
    content: url("/assets/icons/arrow-right-navy.svg");
  }

  &:hover {
    background-color: var(--color-navy);
    color: var(--color-turquoise);

    &::after {
      content: url("/assets/icons/arrow-right-turquoise.svg");
    }
  }

  &.swiper-button-disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;

    &:hover {
      background-color: transparent;
      color: var(--color-navy);

      &::after {
        content: url("/assets/icons/arrow-right-navy.svg");
      }
    }
  }
}

@utility button-outline-sm {
  @apply button-outline button-sm;
}

@utility button-outline-sm-prev {
  @apply button-outline-sm flex-row-reverse;

  &::after {
    transform: scaleX(-1) scale(0.85);
  }
}

/*
 * Work page filter sidebar — active state indicator
 * Applied by work.js via JS class toggling; defined here so Tailwind v4 scans it.
 */
@utility filter-btn-active {
  color: var(--color-navy);
  font-weight: 600;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@utility logo-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;

  &:hover {
    animation-play-state: paused;
  }
}

@utility logo-marquee-fade {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

@utility challenge-cards-grid-item {
  padding: var(--spacing-m);
  flex: 0 1 100%;
  max-width: 100%;
  box-sizing: border-box;

  @media (width >= 40rem) {
    padding: 0;
    flex: 0 1 calc((100% - var(--spacing-xl)) / 2);
    max-width: calc((100% - var(--spacing-xl)) / 2);
  }

  @media (width >= 48rem) {
    flex: 0 1 calc((100% - var(--spacing-xl) * 2) / 3);
    max-width: calc((100% - var(--spacing-xl) * 2) / 3);
  }

  @media (width >= 80rem) {
    flex: 0 1 calc((100% - var(--spacing-xl) * 4) / 5);
    max-width: calc((100% - var(--spacing-xl) * 4) / 5);
  }
}

/* Mobile swiper slides — widths owned by Swiper, not the desktop grid utility */
.challenge-cards-swiper .challenge-cards-swiper-item {
  flex: none;
  max-width: none;
  width: 100%;
  height: auto;
  padding: var(--spacing-m);
  box-sizing: border-box;
}

.challenge-cards-swiper.swiper {
  overflow: visible;
}

.challenge-cards-swiper .swiper-slide {
  height: auto;
}

/*
 * Deck tilt: set --card-rotate, --card-translate, --card-delay per card (Twig).
 * --card-translate-scale tones down vertical offset by breakpoint (no JS).
 */
@utility challenge-card-deck {
  --card-translate-scale: 0.35;
  --card-rotate-scale: 0.35;

  transform: rotate(calc(var(--card-rotate, 0deg) * var(--card-rotate-scale)))
    translateY(calc(var(--card-translate, 0px) * var(--card-translate-scale)));
  transition: transform 0.5s ease-in-out;
  transition-delay: var(--card-delay, 0s);

  @media (width >= 40rem) {
    --card-translate-scale: 0.35;
    --card-rotate-scale: 0.35;
  }

  @media (width >= 48rem) {
    --card-translate-scale: 0.75;
    --card-rotate-scale: 0.75;
  }

  @media (width >= 80rem) {
    --card-translate-scale: 1;
    --card-rotate-scale: 1;
  }
}