/* ===== Font Faces ===== */
@font-face {
  font-family: 'Commuters Sans';
  src: url('/static/fonts/commuters-sans/dharma-type-commuters-sans-light.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Usual';
  src: url('/static/fonts/usual/usual-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Usual';
  src: url('/static/fonts/usual/usual-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Variables ===== */
:root {
  --navy: #000442;
  --navy-light: #0f134d;
  --navy-lighter: #1f224b;
  --navy-lightest: #65678c;
  --yellow: #ffcb0a;
  --yellow-darker: #cca208;
  --turquoise: #0be8e6;
  --magenta: #ed1e79;
  --grey: #cccdd9;
  --grey-light: #e0e1e8;
  --grey-lighter: #f1f1f3;
  --grey-lightest: #f5f5f7;
  --grey-darkest: #1f224b;
}

/* ===== Base Elements ===== */
html {
  height: 100%;
}

body {
  font-family: 'Usual', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--navy);
}

/* Headings — use !important to override Tailwind CDN preflight reset */
h1, h2 {
  font-family: 'Commuters Sans', sans-serif !important;
  color: var(--navy);
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}

h3, h4 {
  font-family: 'Usual', sans-serif !important;
  font-weight: 500 !important;
  color: var(--navy);
  line-height: 1.5rem;
}

h5 {
  font-family: 'Usual', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  font-size: 0.9375em !important;
  line-height: 16px;
  letter-spacing: 0.2em;
}

/* Mobile heading sizes */
h1 {
  font-size: 1.875em !important;
  line-height: 2rem !important;
}
h2 {
  font-size: 1.4375em !important;
  line-height: 1.5rem !important;
}

/* Tablet+ heading sizes */
@media (min-width: 721px) {
  h1 {
    font-size: 3.0625em !important;
    line-height: 3rem !important;
  }
  h2 {
    font-size: 1.875em !important;
    line-height: 2rem !important;
  }
  h3 {
    font-size: 1.2125em !important;
  }
  h4 {
    font-size: 0.9375em !important;
  }
}

/* Paragraphs */
p {
  font-family: 'Usual', sans-serif;
  font-weight: 400;
  color: var(--navy);
  opacity: 0.9;
  font-size: 0.875em;
  line-height: 1.5rem;
}
p.large {
  font-size: 1em;
}
p.small {
  font-size: 0.75em;
  line-height: 1rem;
}
@media (min-width: 721px) {
  p {
    font-size: 0.9375em;
  }
  p.large {
    font-size: 1.1875em;
  }
}

/* Links */
a {
  font-family: 'Usual', sans-serif;
  font-weight: 400;
  text-decoration: none;
}

/* Dark text overrides */
.o-text--dark,
.o-text--dark h1,
.o-text--dark h2,
.o-text--dark h3,
.o-text--dark h4,
.o-text--dark p,
.o-text--dark a,
h1.o-text--dark,
h2.o-text--dark,
h3.o-text--dark,
p.o-text--dark {
  color: white;
  opacity: 0.9;
}

h4.o-text--dark {
  color: white;
  opacity: 0.9;
}

h5.o-text--dark {
  color: white;
  opacity: 0.6;
}

/* ===== Buttons ===== */
.o-button {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  margin: 0.125rem;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
}
@media (min-width: 721px) {
  .o-button {
    font-size: 0.9375em;
  }
}

.o-button__primary {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
  color: var(--navy);
  background-color: var(--yellow);
  border: 1px solid var(--yellow);
}
.o-button__primary:hover {
  background-color: transparent;
  border-color: var(--yellow-darker);
}
.o-button__primary:active {
  background-color: #ffd53a;
  border-color: #ffd53a;
}
@media (min-width: 721px) {
  .o-button__primary {
    font-size: 0.9375em;
  }
}

.o-button__secondary {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
  background-color: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.o-button__secondary:hover {
  background-color: var(--navy);
  color: white;
  border-color: var(--navy);
}
.o-button__secondary:active {
  background-color: transparent;
  color: var(--navy);
}
@media (min-width: 721px) {
  .o-button__secondary {
    font-size: 0.9375em;
  }
}

.o-button__secondary-dark {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}
.o-button__secondary-dark:hover {
  background-color: white;
  color: var(--navy);
  border-color: white;
}
@media (min-width: 721px) {
  .o-button__secondary-dark {
    font-size: 0.9375em;
  }
}

.o-button--small {
  padding: 0.6875em 1.4375em;
}

/* Legacy btn- aliases (used in some templates) */
.btn-primary {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
  color: var(--navy);
  background-color: var(--yellow);
  border: 1px solid var(--yellow);
}
.btn-primary:hover {
  background-color: transparent;
  border-color: var(--yellow-darker);
}

.btn-secondary {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
  background-color: var(--navy);
  color: white;
  border: 1px solid var(--navy);
}
.btn-secondary:hover {
  background-color: var(--navy-light);
}

.btn-outline {
  display: inline-block;
  border-radius: 0.25rem;
  text-align: center;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0.75em 1.875em;
  font-size: 0.875em;
  line-height: 1em;
  border: 1px solid var(--navy);
  color: var(--navy);
  background-color: transparent;
}
.btn-outline:hover {
  background-color: var(--navy);
  color: white;
}

/* ===== Navbar ===== */
.c-navbar__container {
  width: 100%;
  top: 0;
  z-index: 20;
  position: sticky;
  background-color: white;
}

.c-navbar {
  top: 0;
  z-index: 10;
  position: relative;
}

.c-navbar--dark {
  background-color: var(--navy);
}
.c-navbar--dark .c-navbar__container {
  background-color: var(--navy);
}

.c-navbar__main {
  height: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: sticky;
}

.c-navbar__logo {
  margin-right: 2.5rem;
}

.c-navbar__spacer {
  flex-grow: 1;
}

.navitem {
  position: relative;
  transition: all 0.15s;
  min-width: fit-content;
  font-family: 'Usual', sans-serif;
  font-weight: 500;
  margin: 0 0.75rem;
}

.navitem::after {
  content: "";
  font-weight: bold;
  background-color: var(--navy-lightest);
  height: 2px;
  display: block;
  position: absolute;
  bottom: -4px;
  transition: transform 0.5s;
  transform: scaleX(0);
  width: 100%;
}

.c-navbar--dark .navitem::after {
  background-color: white;
}

.navitem:hover::after,
.navitem--active::after {
  transform: scaleX(1);
}

.c-navbar__bottom-divider--light {
  color: var(--grey-light);
  border-color: var(--grey-light);
}

.c-navbar__bottom-divider--dark {
  display: none;
}

/* Navbar responsive */
.c-navbar {
  padding: 0 1.25rem;
}

@media (min-width: 721px) {
  .c-navbar {
    padding: 0 2.5rem;
  }
  .c-navbar__search {
    width: 14rem;
    align-self: flex-start;
    margin-top: 1.25rem;
    transition: width 200ms ease-in-out;
  }
}

@media (min-width: 923px) {
  .c-navbar {
    padding: 0 5rem;
  }
}

/* Side menu (mobile) */
.c-side-menu {
  background-color: var(--navy);
  top: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 50;
  height: 100%;
  overflow-x: hidden;
  width: 20rem;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.c-side-menu--open {
  transform: translateX(0);
}

.c-side-menu__overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  z-index: 40;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
}

.c-side-menu__overlay--visible {
  display: block;
}

.c-side-menu__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6rem 1.5rem 3rem;
}

/* ===== Sub-footer ===== */
.c-sub-footer {
  background-position: bottom;
  background-repeat: no-repeat;
  padding-bottom: 5rem;
}

.c-sub-footer--light {
  background-color: var(--grey-lighter);
  background-size: cover;
  background-image: url('/static/img/sub-footer-lines-light.svg');
}

.c-sub-footer--dark {
  background-color: var(--navy-light);
  background-size: cover;
  background-image: url('/static/img/sub-footer-lines-dark.svg');
}

.c-sub-footer__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-sub-footer__item {
  text-align: center;
  margin: 0 2.25rem;
  margin-top: 4rem;
}

.c-sub-footer__cta {
  margin-top: 2.5rem;
}

.c-sub-footer__secondary-header {
  margin-bottom: 1rem;
}

.c-sub-footer__primary-header {
  margin-bottom: 1.5rem;
}

@media (min-width: 721px) {
  .c-sub-footer {
    padding: 2.5rem 2.5rem 0;
    height: 34rem;
  }
  .c-sub-footer__content {
    flex-direction: row;
    justify-content: center;
  }
  .c-sub-footer__item {
    margin-top: 0;
    max-width: 493px;
  }
}

@media (min-width: 923px) {
  .c-sub-footer {
    padding: 6.5rem 5rem 0;
  }
  .c-sub-footer__primary-header {
    height: 3.5rem;
  }
}

/* ===== Bottom Footer ===== */
.c-bottom-footer {
  display: flex;
  background-color: var(--navy);
}

.c-bottom-footer__text {
  color: white;
  opacity: 0.7;
}

.c-bottom-footer__text-main {
  font-size: 15px;
  line-height: 24px;
}

.c-bottom-footer__spacer {
  flex-grow: 1;
}

.c-bottom-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.c-bottom-footer__link {
  color: white;
  opacity: 0.6;
  text-align: left;
  text-decoration: none;
  transition: opacity 0.15s;
}
.c-bottom-footer__link:hover {
  opacity: 0.8;
}

/* Mobile bottom footer */
.c-bottom-footer {
  flex-direction: column;
  padding: 3rem 2rem 5rem;
  align-items: center;
}
.c-bottom-footer__logo {
  margin-bottom: 1.5rem;
  order: 1;
}
.c-bottom-footer__text {
  margin-bottom: 1.5rem;
  order: 3;
}
.c-bottom-footer__links {
  margin-bottom: 2.5rem;
  order: 2;
}
.c-bottom-footer__crossbeam-logo {
  order: 4;
}
.c-bottom-footer__spacer {
  display: none;
}
.c-bottom-footer__link {
  margin-right: 1rem;
}

/* Tablet+ bottom footer */
@media (min-width: 721px) {
  .c-bottom-footer {
    flex-direction: row;
    align-items: center;
    padding: 0 2.5rem;
    height: 6.5rem;
  }
  .c-bottom-footer__logo {
    margin-bottom: 0;
    margin-right: 1rem;
  }
  .c-bottom-footer__text {
    margin-bottom: 0;
    order: 2;
    display: flex;
    flex-direction: column;
  }
  .c-bottom-footer__spacer {
    display: block;
    order: 3;
  }
  .c-bottom-footer__links {
    margin-bottom: 0;
    order: 4;
  }
  .c-bottom-footer__crossbeam-logo {
    order: 5;
  }
  .c-bottom-footer__link {
    margin-right: 1.5rem;
  }
}

@media (min-width: 923px) {
  .c-bottom-footer {
    padding: 0 5rem;
  }
}

/* ===== Homepage ===== */

/* Hero */
.c-main-intro {
  position: relative;
  width: 100%;
  background-color: var(--navy);
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 2.5rem;
  overflow: hidden;
  background-image: url('/static/img/fun-lines__intro--mobile.svg');
  height: 600px;
}

.c-main-intro__content {
  position: absolute;
  margin-left: 2rem;
  margin-right: 3.75rem;
  z-index: 10;
}

.c-main-intro__sub-header {
  margin-top: 1.5rem;
}

.c-main-intro__inline-search {
  margin-top: 2rem;
}

.c-main-intro__hero-img {
  position: absolute;
  top: 0;
  height: 32.8125rem;
  max-width: 41.6875rem;
  left: 70%;
  pointer-events: none;
}

@media (min-width: 721px) {
  .c-main-intro {
    background-position: bottom;
    overflow: visible;
    padding-top: 11rem;
    height: 57.3125rem;
    background-image: url('/static/img/fun-lines__intro.svg');
  }
  .c-main-intro__content {
    margin-left: 7%;
    width: 45%;
  }
  .c-main-intro__hero-img {
    height: 821px;
    min-width: 821px;
    left: 55%;
  }
  .c-main-intro__sub-header {
    margin-top: 2rem;
  }
  .c-main-intro__cta {
    margin-top: 2.5rem;
  }
}

@media (min-width: 923px) {
  .c-main-intro__content {
    margin-left: 13%;
    width: 39%;
  }
}

/* Stats section */
.c-main-stats {
  background-color: var(--navy-light);
  padding: 4rem 2rem 5rem;
}

.c-main-stats__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.c-main-stats__header {
  margin-top: 1rem;
}

.c-main-stats__stats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.c-main-stats__stats-section {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-main-stats__stat {
  margin-top: 1.5rem;
  font-family: 'Commuters Sans', sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -0.03em;
  color: white;
}

.c-main-stats__stat-label {
  margin-top: 0.5rem;
}

@media (min-width: 721px) {
  .c-main-stats {
    background-color: var(--navy);
    padding: 7rem 2rem 8rem;
  }
  .c-main-stats__content {
    margin: 0 auto;
    width: 622px;
  }
  .c-main-stats__stats {
    flex-direction: row;
    width: 100%;
  }
}

/* Crossbeam CTA section (reuses stats styling) */
.c-crossbeam-cta {
  background-color: var(--navy-light);
  padding: 4rem 2rem 5rem;
}

/* Featured partnership */
.c-featured-partnership {
  background-color: var(--navy-light);
  padding: 9rem 0;
}

.c-featured-partnership__content {
  padding: 0 13%;
}

/* Newest partnerships */
.c-newest-partnerships {
  background-color: var(--navy);
}

.c-newest-partnerships__content {
  padding: 0 2rem 5rem;
}

@media (min-width: 721px) {
  .c-newest-partnerships__content {
    margin: 0 auto;
    padding-bottom: 8rem;
    width: 622px;
  }
}

@media (min-width: 923px) {
  .c-newest-partnerships__content {
    width: 1080px;
  }
}

/* ===== Company Logo ===== */
.company-logo {
  width: 48px;
  height: 48px;
  border-radius: 0.375rem;
  object-fit: contain;
  background: white;
  border: 1px solid var(--grey-light);
}
.company-logo-sm {
  width: 32px;
  height: 32px;
  border-radius: 0.25rem;
  object-fit: contain;
  background: white;
  border: 1px solid var(--grey-light);
}

/* ===== Score Badge ===== */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}
.score-high { background-color: #16a34a; }
.score-mid { background-color: var(--yellow); color: var(--navy); }
.score-low { background-color: var(--grey); color: var(--navy); }

/* ===== Partnership Type Badges ===== */
.type-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.type-technology {
  background-color: rgba(237, 30, 121, 0.1);
  color: #c4166a;
}
.type-channel {
  background-color: rgba(11, 232, 230, 0.1);
  color: #059e9d;
}

/* ===== Graph Container ===== */
.graph-container {
  width: 100%;
  height: 550px;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Graph tooltip */
.graph-tooltip {
  background: white;
  border: 1px solid var(--grey-light);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 50;
  min-width: 160px;
}
.graph-tooltip .tooltip-name {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.graph-tooltip .tooltip-meta {
  font-size: 0.75rem;
  color: #666;
}

/* ===== Data Table ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--grey-light);
}
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--grey-light);
  font-size: 0.875rem;
}
.data-table tr:hover td {
  background-color: #fafafa;
}
.data-table .sortable {
  cursor: pointer;
  user-select: none;
}
.data-table .sortable:hover {
  color: var(--navy);
}

/* Dark table variant */
.data-table--dark th {
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: var(--navy-lighter);
}
.data-table--dark td {
  color: white;
  border-bottom-color: var(--navy-lighter);
}
.data-table--dark tr:hover td {
  background-color: var(--navy-lighter);
}
.data-table--dark a {
  color: white;
}

/* ===== Loading Skeleton ===== */
.skeleton {
  background: linear-gradient(90deg, var(--grey-lighter) 25%, #e8e8ec 50%, var(--grey-lighter) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Stat Number ===== */
.stat-number {
  font-family: 'Commuters Sans', monospace;
  font-weight: 400;
}

/* ===== Search Dropdown ===== */
.search-dropdown {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ===== Input Styles ===== */
input {
  outline: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* ===== Utility ===== */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}