/* ===========================
   valantic-theme.css – Valantic brand overrides
   Loaded per-project via ProjectCSSFile.
   =========================== */


/* ── Font faces (Maven Pro, 6 weights) ────────────────── */
/* Absolute paths because this CSS is served from /media/css/ via ProjectCSSFile */
@font-face {
  font-family: "Maven Pro";
  src: url("/static/decision/fonts/mavenpro/MavenPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maven Pro";
  src: url("/static/decision/fonts/mavenpro/MavenPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maven Pro";
  src: url("/static/decision/fonts/mavenpro/MavenPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maven Pro";
  src: url("/static/decision/fonts/mavenpro/MavenPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maven Pro";
  src: url("/static/decision/fonts/mavenpro/MavenPro-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maven Pro";
  src: url("/static/decision/fonts/mavenpro/MavenPro-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ── Variable overrides ───────────────────────────────── */
:root {
  --fg: #100C2A;
  --muted: #5a5a5a;
  --accent: #ff5a00;
  --line: #e8e8e8;
  --shadow: 0px 0px 30px rgba(16, 12, 42, .08);

  /* Brand palette */
  --Vibrant-Purple: #4B26B7;
  --coral-red-peach: linear-gradient(278deg, #FF744F 45.18%, #FF4B4B 82.87%);
  --Coral-Red-Peach: #FF6A5C;
  --Black: #100C2A;
  --Lavender: #A78DB6;
  --Silver: #CDCDCD;
}


/* ── Font-family overrides ────────────────────────────── */
html, body {
  font-family: "Maven Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

h1, h2, h3 {
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: "Maven Pro";
}

p, li {
  font-family: "Maven Pro", sans-serif;
}

.site-footer {
  font-family: "Maven Pro", sans-serif;
}

.vbtn1, .vbtn2, .cta {
  font-family: "Maven Pro", sans-serif;
}

.vbtn1-small, .vbtn2-small {
  font-family: "Maven Pro", sans-serif;
}

.brand {
  font-family: "Maven Pro", sans-serif;
}


/* ── Heading gradient ─────────────────────────────────── */
h1, h2 {
  background: var(--coral-red-peach, linear-gradient(278deg, #FF744F 45.18%, #FF4B4B 82.87%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h3 {
  color: var(--Black, #100C2A);
}


/* ── Link color ───────────────────────────────────────── */
a {
  color: #0b57d0;
}


/* ── Shadow (Tailwind-style utility) ──────────────────── */
.shadow {
  --tw-shadow: 0px 0px 30px rgba(16, 12, 42, .08);
  --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-shadow);
}


/* ── Button color variants ────────────────────────────── */
.vbtn--primary-purple {
  --btn-bg: var(--Vibrant-Purple, #4B26B7);
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #F2F2F2;
  --btn-focus-ring: var(--Lavender, #A78DB6);
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

.vbtn--accent-coral {
  --btn-bg: var(--Coral-Red-Peach, #FF6A5C);
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #FCE5DF;
  --btn-focus-ring: #F29C86;
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

.vbtn--info-blue {
  --btn-bg: #3453E1;
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #E5EBFF;
  --btn-focus-ring: #9BB3FF;
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

.vbtn--dark-navy {
  --btn-bg: #1F2A44;
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.15);
  --btn-focus-border: #E2E5EF;
  --btn-focus-ring: #A5B0CD;
  --btn-disabled-bg: var(--Silver, #CDCDCD);
  --btn-text-color: #ffffff;
}

.vbtn--light {
  --btn-bg: #FFFFFF;
  --btn-hover-overlay: rgba(16, 12, 42, 0.06);
  --btn-active-overlay: rgba(16, 12, 42, 0.12);
  --btn-focus-border: #E0E0E0;
  --btn-focus-ring: #A7B2C8;
  --btn-disabled-bg: #F0F0F0;
  --btn-text-color: #111111;
}

.vbtn--outline-dark {
  --btn-bg: transparent;
  --btn-hover-overlay: rgba(16, 12, 42, 0.04);
  --btn-active-overlay: rgba(16, 12, 42, 0.08);
  --btn-focus-border: #111111;
  --btn-focus-ring: #A5A5A5;
  --btn-disabled-bg: transparent;
  --btn-text-color: #111111;
  border: 1.5px solid #111111;
}

.vbtn--outline-dark:hover:not(:disabled):not(.disabled) {
  color: #ffffff;
}

.vbtn--outline-dark:disabled,
.vbtn--outline-dark.disabled {
  border-color: #CDCDCD;
  color: #CDCDCD;
}


/* ── Node-page button overrides ──────────────────────── */
.vbtn--node-primary {
  --btn-bg: var(--Coral-Red-Peach, #FF6A5C);
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.20);
  --btn-focus-border: #FCE5DF;
  --btn-focus-ring: #F29C86;
}

.vbtn--node-secondary {
  --btn-bg: #1F2A44;
  --btn-hover-overlay: rgba(16, 12, 42, 0.20);
  --btn-active-overlay: rgba(255, 255, 255, 0.15);
  --btn-focus-border: #E2E5EF;
  --btn-focus-ring: #A5B0CD;
}

.vbtn--node-tertiary {
  border-color: #100C2A;
  --btn-text-color: #100C2A;
  --btn-hover-overlay: rgba(16, 12, 42, 0.04);
  --btn-active-overlay: rgba(16, 12, 42, 0.08);
  --btn-focus-border: #111111;
  --btn-focus-ring: #A5A5A5;
}


/* ── Brand link-arrow button ──────────────────────────── */
.vbtn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--Coral-Red-Peach, #FF6A5C);
  text-decoration: none;
  cursor: pointer;
}

.vbtn-link-arrow:hover {
  text-decoration: underline;
}
.vbtn-link-arrow.disabled {
  color: #CDCDCD;
  cursor: default;
  text-decoration: none;
}


/* ── Legacy button colors ─────────────────────────────── */
.vbtn1 {
  background: var(--Vibrant-Purple, #4B26B7);
}

.vbtn2 {
  background: var(--coral-red-peach, #FF6A5C);
}

.cta {
  border: 1px solid #000;
  background: #000;
}

.vbtn1-small {
  background: var(--Vibrant-Purple, #4B26B7);
}

.vbtn2-small {
  background: var(--coral-red-peach, #FF6A5C);
}


/* ── Hero: two-column layout with blob image ─────────── */
.page-home .page-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 48px);
}

.shape {
  clip-path: url(#shape-30-70-c);
  -webkit-clip-path: url(#shape-30-70-c);
}

.page-home .page-hero__image-wrapper {
  position: relative;
  max-width: 520px;
  justify-self: start;
  margin-top: -9.5%;
  transition: max-width 0.3s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

.page-home .page-hero__image {
  max-height: 638px;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: clip-path, transform;
  image-rendering: auto;
  -webkit-transform: translate3d(0, 0, 0);
  filter: blur(0.3px);
  -webkit-filter: blur(0.3px);
}

@media (max-width: 980px) {
  .page-home .page-hero {
    grid-template-columns: 1fr;
  }
  .page-home .page-hero__image-wrapper {
    order: -1;
    justify-self: center;
    margin-top: 0;
    max-width: 80%;
  }
  .page-home .page-hero__image {
    border-radius: var(--radius);
  }
}

@media (max-width: 480px) {
  .page-home .page-hero__image-wrapper {
    max-width: 90%;
  }
}


/* ── Support card brand styling ──────────────────────── */
.support-card {
  background: #FFF4F2;
  border-color: #FFD9D3;
}
.support-card:hover {
  border-color: #FFC4BB;
}


/* ── Language text brand styling ──────────────────────── */
.lang-text {
  color: var(--Black, #100C2A);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: "Maven Pro", sans-serif;
}