@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --paragraph-size: 18px;
  --ookgaaf-page-h1-font: "Montserrat", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ookgaaf-page-h1-size-desktop: 74px;
  --ookgaaf-page-h1-weight: 500;
  --ookgaaf-page-h2-font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ookgaaf-page-h2-size-desktop: 40px;
  --ookgaaf-page-h2-weight: 400;
  --ookgaaf-eyebrow-font: "Segoe UI", Arial, sans-serif;
  --ookgaaf-eyebrow-size: 12px;
  --ookgaaf-eyebrow-weight: 600;
  --ookgaaf-logo-width-desktop: 205px;
  --ookgaaf-logo-width-mobile: 150px;
  --ookgaaf-logo-offset-desktop: 5px;
  --ookgaaf-logo-offset-mobile: 2px;
}

p {
  font-size: var(--paragraph-size) !important;
}

h1 {
  font-family: var(--ookgaaf-page-h1-font) !important;
  font-weight: var(--ookgaaf-page-h1-weight, 500) !important;
}

h2 {
  font-family: var(--ookgaaf-page-h2-font) !important;
  font-weight: var(--ookgaaf-page-h2-weight, 500) !important;
}

.button:not(.secondary):not(.button-secondary),
.button-primary {
  background: var(--action-color, var(--accent, var(--purple))) !important;
}

.button:not(.secondary):not(.button-secondary):hover,
.button-primary:hover {
  background: color-mix(in srgb, var(--action-color, var(--accent, var(--purple))) 78%, white) !important;
}

.button:not(.secondary):not(.button-secondary):active,
.button-primary:active {
  background: color-mix(in srgb, var(--action-color, var(--accent, var(--purple))) 68%, #111318) !important;
  transform: translateY(1px) !important;
}

.button-secondary,
.secondary {
  border: 1px solid #48505f !important;
  background: transparent !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

.button-secondary:hover,
.secondary:hover {
  border-color: var(--action-color, var(--accent, var(--purple))) !important;
  background: transparent !important;
  color: var(--action-color, var(--accent, var(--purple))) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-color, var(--accent, var(--purple))) 24%, transparent) !important;
}

.button-secondary:active,
.secondary:active {
  border-color: color-mix(in srgb, var(--action-color, var(--accent, var(--purple))) 68%, #111318) !important;
  background: color-mix(in srgb, var(--action-color, var(--accent, var(--purple))) 18%, transparent) !important;
  color: color-mix(in srgb, var(--action-color, var(--accent, var(--purple))) 68%, #e5e7eb) !important;
  box-shadow: none !important;
  transform: translateY(1px) !important;
}

.brand img,
.og-brand img,
.brand-logo {
  display: block;
  width: var(--ookgaaf-logo-width-desktop) !important;
  height: auto !important;
  transform: translateY(var(--ookgaaf-logo-offset-desktop)) !important;
}

@media (max-width: 640px) {
  .brand img,
  .og-brand img,
  .brand-logo {
    width: var(--ookgaaf-logo-width-mobile) !important;
    transform: translateY(var(--ookgaaf-logo-offset-mobile)) !important;
  }
}

.og-nav a,
.og-drop button,
.nav a,
.drop button,
.trainer-nav a,
.site-header nav a {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
}

.og-eyebrow,
.og-page-eyebrow,
.og-section-kicker,
.eyebrow,
.key-label {
  margin: 0 !important;
  color: var(--purple, #9c7cff) !important;
  font-family: var(--ookgaaf-eyebrow-font) !important;
  font-size: var(--ookgaaf-eyebrow-size) !important;
  font-weight: var(--ookgaaf-eyebrow-weight) !important;
  line-height: 1.3 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.text-link,
.theory-page a:not(.button),
.content a:not(.button),
.note a {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
}

.text-link:hover,
.theory-page a:not(.button):hover,
.content a:not(.button):hover,
.note a:hover {
  color: #fff !important;
  text-decoration-thickness: 2px !important;
}

.site-header,
.og-header,
.header {
  min-height: 80px !important;
}

.site-header nav a[aria-current="page"],
.og-nav a[aria-current="page"],
.trainer-nav a[aria-current="page"] {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.site-menu-toggle {
  display: none;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-menu-toggle span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #f4f5f6;
}

@media (max-width: 640px) {
  h1 {
    font-size: 48px !important;
  }

  h2 {
    font-size: 26px !important;
  }

  .og-hub,
  .site-header,
  .og-header,
  .header,
  .subdomain-title,
  .hero,
  .theory-page,
  .trainer-shell,
  .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-header,
  .og-header,
  .header {
    position: relative;
    min-height: 64px !important;
    height: 64px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    align-items: center !important;
  }

  .site-menu-toggle { display: block; }

  .site-header nav,
  .og-header > .og-nav,
  .header > .nav {
    display: none;
    position: absolute;
    z-index: 30;
    top: 56px;
    right: 12px;
    width: 190px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid #303642;
    border-radius: 12px;
    background: #1b1f27;
    box-shadow: 0 16px 35px #0007;
  }

  .site-header nav.is-open,
  .og-header > .og-nav.is-open,
  .header > .nav.is-open { display: flex; }

  .site-header nav a,
  .og-nav > a,
  .og-drop > button,
  .nav > a,
  .drop > button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    text-align: left;
    border-radius: 8px;
  }

  .og-drop-menu,
  .drop-menu {
    position: static !important;
    width: 100%;
    box-shadow: none !important;
  }
}