/*
 * Vylor Design System — Global Styles
 *
 * Defines the foundational design tokens and base element styles for the Vylor website,
 * built on Adobe Edge Delivery Services. Includes color, typography, spacing, layout,
 * and corner radius tokens derived from the Vylor Design System in Figma.
 *
 * Font families: Roboto Flex (body)
 * Breakpoints: 768 px (tablet), 1024 px (small desktop), 1440 px (large desktop)
 */

:root {
  /* Color: Neutral */
  --color-almost-black: #1b1b1b;
  --color-graphite-95: #363636;
  --color-grey-900: #1f1f1f;
  --color-grey-800: #4d4d4d;
  --color-grey-700: #6d6d6d;
  --color-grey-600: #818181;
  --color-grey-500: #acacac;
  --color-grey-400: #c9c9c9;
  --color-grey-300: #ebebeb;
  --color-grey-200: #f2f2f2;
  --color-grey-100: #f7f7f7;
  --color-white: #fff;

  /* Color: Primary */
  --color-primary: #2b2b2b;
  --color-primary-inverse: #fff;

  /* Color: Secondary */
  --color-secondary-membrane: #7a7;
  --color-secondary-cytoplasm: #cbff74;

  /* Color: Accent */
  --color-accent-adhesive: #fff4ac;
  --color-accent-genome: #477de3;
  --color-accent-signal: #ff5212;
  --color-accent-parchment: #fff6ed;

  /* Color: Miscellaneous */
  --color-blue: #107abc;
  --color-cytoplasm-brighter: #9EFF00;
  --color-green-1: #008236;
  --color-green-2: #47ac4e;
  --color-orange-1: #ff8c4e;
  --color-orange-2: #f7bc48;
  --color-red: #d40000;

  /* Color: Semantic */
  --color-error: var(--color-red);
  --color-success: var(--color-green-1);
  --color-warning: var(--color-orange-2);
  --color-info: var(--color-blue);
  --background-color: var(--color-white);
  --text-color: var(--color-almost-black);
  --body-text-color-default: var(--color-white);
  --light-color: var(--color-grey-100);
  --dark-color: var(--color-primary);
  --link-color: var(--color-secondary-cytoplasm);
  --link-hover-color: var(--color-secondary-cytoplasm);

  /* Font Families */
  --body-font-family: 'Roboto Flex', roboto-flex-fallback, roboto, sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-demi: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* Typography: Letter Spacing */
  --heading-letter-spacing: 0;
  --display-letter-spacing: -2px;

  /* Typography: Display — Mobile base (375 px) */
  --display-font-size: 48px;
  --display-line-height: 53px;

  /* Typography: Headings — Mobile base (375 px) */
  --heading-font-size-h1: 44px;
  --heading-line-height-h1: 53px;
  --heading-font-size-h2: 40px;
  --heading-line-height-h2: 48px;
  --heading-font-size-h3: 32px;
  --heading-line-height-h3: 38px;
  --heading-font-size-h4: 24px;
  --heading-line-height-h4: 29px;
  --heading-font-size-h5: 22px;
  --heading-line-height-h5: 26px;
  --heading-font-size-h6: 20px;
  --heading-line-height-h6: 24px;

  /* Typography: Body (mobile & tablet; XL/L update at desktop) */
  --body-font-size-xl: 22px;
  --body-line-height-xl: 28px;
  --body-font-size-l: 18px;
  --body-line-height-l: 26px;
  --body-font-size-m: 16px;
  --body-line-height-m: 24px;
  --body-font-size-s: 14px;
  --body-line-height-s: 21px;
  --body-font-size-label: 14px;
  --body-line-height-label: 21px;

  /* Spacing Scale */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-18: 72px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Semantic Spacing — Mobile base */
  --spacing-button-gap: 32px;
  --spacing-section-gap-special: 32px;
  --spacing-section-gap-standard: 48px;
  --spacing-jumper-medium: 24px;
  --spacing-jumper-large: 40px;
  --spacer-s: 24px;
  --spacer-m: 32px;
  --spacer-l: 48px;

  /* Padding */
  --padding-xxs: var(--spacing-1);
  --padding-xs: var(--spacing-2);
  --padding-s: var(--spacing-3);
  --padding-m: var(--spacing-4);
  --padding-l: var(--spacing-6);
  --padding-xl: var(--spacing-8);
  --padding-xxl: var(--spacing-12);
  --padding-xxxl: var(--spacing-16);

  /* Margin */
  --margin-xxs: var(--spacing-1);
  --margin-xs: var(--spacing-2);
  --margin-s: var(--spacing-3);
  --margin-m: var(--spacing-4);
  --margin-l: var(--spacing-6);
  --margin-xl: var(--spacing-8);
  --margin-xxl: var(--spacing-12);
  --margin-xxxl: var(--spacing-16);

  /* Corner Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;

  /* Layout / Grid — Mobile (4 col) */
  --nav-height: 72px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --grid-margin: 20px;
  --max-width: 1312px;
  --container-3col-width: 986px;

  /* Scale */
  --image-hover-scale: 1.05;

  /* Carousel prev/next Controls - brand carousel, featured news, image card grid */
  --navigation-btn-clip-size: 15px;
  --navigation-btn-padding: 10px;
  --navigation-btn-width: 43px;
  --navigation-btn-height: 40px;
}

/* Tablet — 768 px+ */
@media (min-width: 768px) {
  :root {
    /* Display */
    --display-font-size: 56px;
    --display-line-height: 62px;

    /* Headings */
    --heading-font-size-h1: 48px;
    --heading-line-height-h1: 58px;
    --heading-font-size-h2: 44px;
    --heading-line-height-h2: 53px;
    --heading-font-size-h3: 36px;
    --heading-line-height-h3: 43px;
    --heading-font-size-h4: 28px;
    --heading-line-height-h4: 34px;
    --heading-font-size-h5: 24px;
    --heading-line-height-h5: 29px;
    --heading-font-size-h6: 22px;
    --heading-line-height-h6: 27px;

    /* Semantic Spacing */
    --spacing-jumper-medium: 32px;
    --spacing-jumper-large: 44px;

    /* Grid */
    --grid-columns: 8;
    --grid-margin: 32px;
  }
}

/* Small Desktop — 1024 px+ */
@media (min-width: 1024px) {
  :root {
    /* Display */
    --display-font-size: 76px;
    --display-line-height: 84px;
    --desktop-nav-height: 124px;

    /* Headings */
    --heading-font-size-h1: 72px;
    --heading-line-height-h1: 80px;
    --heading-font-size-h2: 56px;
    --heading-line-height-h2: 67px;
    --heading-font-size-h3: 40px;
    --heading-line-height-h3: 48px;
    --heading-font-size-h4: 32px;
    --heading-line-height-h4: 38px;
    --heading-font-size-h5: 28px;
    --heading-line-height-h5: 34px;
    --heading-font-size-h6: 24px;
    --heading-line-height-h6: 29px;

    /* Body */
    --body-font-size-xl: 24px;
    --body-line-height-xl: 30px;
    --body-font-size-l: 20px;
    --body-line-height-l: 28px;

    /* Semantic Spacing */
    --spacing-section-gap-special: 44px;
    --spacing-section-gap-standard: 56px;
    --spacing-jumper-medium: 36px;
    --spacing-jumper-large: 48px;

    /* Grid */
    --grid-columns: 12;
    --grid-gutter: 24px;
    --grid-margin: 50px;
  }
}

/* Large Desktop — 1440 px+ */
@media (min-width: 1440px) {
  :root {
    /* Semantic Spacing */
    --spacing-jumper-medium: 40px;
    --spacing-jumper-large: 56px;

    /* Grid */
    --grid-margin: 114px;
    --grid-max-width: 1212px;
  }
}

/* fallback font */
@font-face {
  font-family: roboto-flex-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

html {
  scrollbar-gutter: stable;
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-primary);
  color: var(--body-text-color-default);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--body-font-family);
  letter-spacing: var(--heading-letter-spacing);
  scroll-margin: 40px;
}

h1 {
  font-size: var(--heading-font-size-h1);
  line-height: var(--heading-line-height-h1);
  font-weight: var(--font-weight-demi);
}

h2 {
  font-size: var(--heading-font-size-h2);
  line-height: var(--heading-line-height-h2);
  font-weight: var(--font-weight-medium);
}

h3 {
  font-size: var(--heading-font-size-h3);
  line-height: var(--heading-line-height-h3);
  font-weight: var(--font-weight-medium);
}

h4 {
  font-size: var(--heading-font-size-h4);
  line-height: var(--heading-line-height-h4);
  font-weight: var(--font-weight-demi);
}

h5 {
  font-size: var(--heading-font-size-h5);
  line-height: var(--heading-line-height-h5);
  font-weight: var(--font-weight-medium);
}

h6 {
  font-size: var(--heading-font-size-h6);
  line-height: var(--heading-line-height-h6);
  font-weight: var(--font-weight-demi);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: var(--spacing-4);
  border-radius: var(--radius-8);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: var(--spacing-10) var(--spacing-4);
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  display: flex;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-6);
  align-items: center;
  gap: var(--spacing-2);
  background-color: var(--color-secondary-cytoplasm);
  color: var(--color-almost-black);
  font-size: var(--body-font-size-m);
  font-style: normal;
  font-weight: var(--font-weight-demi);
  line-height: var(--body-line-height-m);
  letter-spacing: 0;
  width: fit-content;
  height: auto;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}


a.button:hover,
button.button:hover {
  background-color: var(--color-cytoplasm-brighter);
}

a.button:focus-visible,
button.button:focus-visible {
  outline: var(--radius-1) solid var(--color-accent-parchment);
  outline-offset: var(--radius-2);
}

a.button[aria-disabled="true"],
a.button[aria-disabled="true"]:hover,
a.button[aria-disabled="true"]:focus-visible,
button.button:disabled,
button.button:disabled:hover,
button.button:disabled:focus-visible {
  background: linear-gradient(0deg, rgb(43 43 43 / 70%) 0%, rgb(43 43 43 / 70%) 100%), var(--color-secondary-cytoplasm);
}

a.button.primary,
button.button.primary {
  color: var(--color-white);
  background-color: var(--color-primary);
}

a.button.primary:hover,
button.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:focus-visible {
  color: var(--color-cytoplasm-brighter);
}

a.button.primary[aria-disabled="true"],
a.button.primary[aria-disabled="true"]:hover,
a.button.primary[aria-disabled="true"]:focus-visible,
button.button.primary:disabled,
button.button.primary:disabled:hover,
button.button.primary:disabled:focus-visible {
  color: var(--color-cytoplasm-brighter);
}

a.button.secondary,
button.button.secondary {
  color: var(--color-secondary-cytoplasm);
  background: rgb(from var(--color-primary) r g b / 80%);
  border: var(--radius-1) solid var(--color-secondary-cytoplasm);
  backdrop-filter: blur(5px);
}

a.button.secondary:hover,
button.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:focus-visible {
  border-color: var(--color-cytoplasm-brighter);
  color: var(--color-cytoplasm-brighter);
  background: var(--color-primary);
}

a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
a.button.secondary[aria-disabled="true"]:focus-visible,
button.button.secondary:disabled,
button.button.secondary:disabled:hover,
button.button.secondary:disabled:focus-visible {
  color: var(--color-cytoplasm-brighter);
  border-color: var(--color-cytoplasm-brighter);
}

a.button.accent,
button.button.accent {
  color: var(--color-secondary-cytoplasm);
  background-color: transparent;
  padding: 0;
}

a.button.accent:hover,
button.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:focus-visible {
  color: var(--color-cytoplasm-brighter);
}

a.button.accent[aria-disabled="true"],
a.button.accent[aria-disabled="true"]:hover,
a.button.accent[aria-disabled="true"]:focus-visible,
button.button.accent:disabled,
button.button.accent:disabled:hover,
button.button.accent:disabled:focus-visible {
  color: var(--color-cytoplasm-brighter);
}

a.button:any-link::after,
button.button::after {
  content: "";
  width: var(--spacing-6);
  height: var(--spacing-6);
  background-color: currentcolor;
  mask: url("../icons/arrow.svg") no-repeat center;
  mask-size: contain;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

a.button:hover::after,
button.button:hover::after {
  transform: translateX(var(--spacing-1));
}

a.button.no-icon::after,
button.button.no-icon::after{
  display: none;
}

a.button.no-icon,
button.button.no-icon {
  padding-right: var(--spacing-6);
}

a.button.accent.no-icon
button.button.accent.no-icon {
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  a.button:any-link,
  button.button,
  a.button:any-link::after,
  button.button::after {
    transition: none;
  }
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: var(--spacing-section-gap-standard) 0;
}

main > .section > div {
  max-width: var(--grid-max-width);
  margin: auto;
  padding: 0 var(--grid-margin);
}

main > .section:first-of-type {
  margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: var(--spacing-section-gap-standard) 0;
}