/* Shared colour tokens */
:root {
  --color-brand-blue: #004494;
  --color-brand-navy: #1a1a4b;
  --color-accent-pink: #ff0090;
  --color-on-brand: #ffffff;
  --color-button-text: var(--color-on-brand);
  --color-button-focus: #d91bc8;

  /* Base Button Token Definitions */
  --btn-font-family: inherit;
  --btn-font-size: 1rem;
  --btn-font-weight: 600;
  --btn-padding: 15px 40px;
  --btn-border-radius: 50px;
  --btn-transition:
    transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease,
    background-image 0.3s ease;

  /* Primary Button Token Definitions (Discover More) */
  --color-button-primary-start: #ff0090;
  --color-button-primary-end: #b317a9;
  --color-button-primary-start-hover: #ff1aa3;
  --color-button-primary-end-hover: #c419ba;
  --color-button-primary-start-active: #e60082;
  --color-button-primary-end-active: #9f1396;

  --color-button-gradient-primary: linear-gradient(
    135deg,
    var(--color-button-primary-start) 0%,
    var(--color-button-primary-end) 100%
  );
  --color-button-gradient-primary-hover: linear-gradient(
    135deg,
    var(--color-button-primary-start-hover) 0%,
    var(--color-button-primary-end-hover) 100%
  );
  --color-button-gradient-primary-active: linear-gradient(
    135deg,
    var(--color-button-primary-start-active) 0%,
    var(--color-button-primary-end-active) 100%
  );

  --shadow-brand-button-primary: 0 10px 20px rgba(179, 23, 169, 0.24);
  --shadow-brand-button-primary-hover: 0 12px 24px rgba(179, 23, 169, 0.32);
  --shadow-brand-button-primary-active: 0 5px 12px rgba(179, 23, 169, 0.28);

  /* Secondary Button Token Definitions (Read More, Show More) */
  --color-button-secondary-start: #8d117f;
  --color-button-secondary-end: #c81cb8;
  --color-button-secondary-start-hover: #9d148e;
  --color-button-secondary-end-hover: #d920c7;
  --color-button-secondary-start-active: #7d0f71;
  --color-button-secondary-end-active: #b718a8;

  --color-button-gradient-secondary: linear-gradient(
    90deg,
    var(--color-button-secondary-start) 0%,
    var(--color-button-secondary-end) 100%
  );
  --color-button-gradient-secondary-hover: linear-gradient(
    90deg,
    var(--color-button-secondary-start-hover) 0%,
    var(--color-button-secondary-end-hover) 100%
  );
  --color-button-gradient-secondary-active: linear-gradient(
    90deg,
    var(--color-button-secondary-start-active) 0%,
    var(--color-button-secondary-end-active) 100%
  );

  --shadow-brand-button-secondary: 0 6px 14px rgba(143, 20, 136, 0.18);
  --shadow-brand-button-secondary-hover: 0 8px 18px rgba(143, 20, 136, 0.26);
  --shadow-brand-button-secondary-active: 0 4px 10px rgba(143, 20, 136, 0.2);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  color: #ffffff;
  background: var(--color-brand-navy);
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--color-button-focus);
  outline-offset: 3px;
}

/* Reusable Base Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-button-text);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: normal;
  border: none;
  outline: none;
  transition: var(--btn-transition);

  &:focus-visible {
    outline: 3px solid var(--color-button-focus);
    outline-offset: 3px;
  }
}

/* Primary Button Modifier (Discover More) */
.btn--primary,
.btn-primary {
  background-color: var(--color-button-primary-end);
  background-image: var(--color-button-gradient-primary);
  box-shadow: var(--shadow-brand-button-primary);

  &:hover {
    transform: translateY(-3px);
    background-color: var(--color-button-primary-end-hover);
    background-image: var(--color-button-gradient-primary-hover);
    box-shadow: var(--shadow-brand-button-primary-hover);
  }

  &:active {
    transform: translateY(0);
    background-color: var(--color-button-primary-end-active);
    background-image: var(--color-button-gradient-primary-active);
    box-shadow: var(--shadow-brand-button-primary-active);
  }
}

/* Secondary Button Modifier (Read More, Show More) */
.btn--secondary,
.btn-secondary {
  background-color: var(--color-button-secondary-end);
  background-image: var(--color-button-gradient-secondary);
  box-shadow: var(--shadow-brand-button-secondary);

  &:hover {
    transform: translateY(-2px);
    background-color: var(--color-button-secondary-end-hover);
    background-image: var(--color-button-gradient-secondary-hover);
    box-shadow: var(--shadow-brand-button-secondary-hover);
  }

  &:active {
    transform: translateY(0);
    background-color: var(--color-button-secondary-end-active);
    background-image: var(--color-button-gradient-secondary-active);
    box-shadow: var(--shadow-brand-button-secondary-active);
  }
}

/* RESET */
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "Poppins", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 81px;
}

section {
  scroll-margin-top: 80px; /* Pushes the section down so the navbar doesn't cover it */
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* Start transparent */
  background-color: transparent;

  /* The pure CSS scroll trigger */
  animation: turn-white linear both;
  animation-timeline: scroll();
  animation-range: 0px 150px; /* Changes from 0px to 150px of scrolling */
}

.site-header {
  .navbar {
    .nav-actions {
      .hamburger {
        .bar {
          animation: turn-dark-bg linear both;
          animation-timeline: scroll();
          animation-range: 0px 150px;
        }
      }

      .lang-dropdown {
        .current-lang,
        .languagepicker,
        .languagepicker li a {
          animation: turn-dark linear both;
          animation-timeline: scroll();
          animation-range: 0px 150px;
        }
      }
    }
  }
}

/* 3. The animation that switches the background to white */
@keyframes turn-white {
  to {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds a clean, modern shadow when white */
  }
}

@keyframes turn-dark {
  to {
    color: #212832;
  }
}

@keyframes turn-dark-bg {
  to {
    background-color: #212832;
  }
}

/* Keep the fixed navigation readable in browsers without scroll-driven
   animation support. */
@supports not (animation-timeline: scroll()) {
  .site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .site-header .navbar .nav-actions .hamburger .bar {
    background-color: #212832;
  }

  .site-header .navbar .nav-actions .lang-dropdown .current-lang,
  .site-header .navbar .nav-actions .lang-dropdown .languagepicker,
  .site-header .navbar .nav-actions .lang-dropdown .languagepicker li a {
    color: #212832;
  }
}

.anchor-spacer {
  display: block;
  height: 80px;
  position: absolute;
}