/* Knowledge Unlatched — brand tokens & typography.
 * Mirrors src/styles.css from the React source. Tailwind (CDN) supplies
 * the utility classes; this file owns the design tokens, fonts, and the
 * named color classes (text-navy, bg-aqua, ring-leaf, …) referenced in
 * markup throughout the theme.
 */
header.sticky {
    background: #ffffff;
}
/*main ul {
    list-style: disc !important;
    margin-top: 10px !important;
    padding: revert !important;
}*/

.entry-content ul,
.page-content ul,
.prose ul {
    list-style: disc;
    margin-top: 10px;
    padding-left: 1.5rem;
}
.d-none{display: none;}
/*@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&display=swap");*/

:root {
  --navy: #0f172a;
  --navy-deep: #0b1220;
  --aqua: #0d9488;
  --aqua-soft: #ccfbf1;
  --aqua-dark: #0f766e;
  --leaf: #16a34a;
  --leaf-soft: #dcfce7;
  --leaf-dark: #15803d;
  --paper: #fafafa;
}

html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-serif {
  font-family: "Source Serif 4", ui-serif, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.bg-aqua-accessible {
    background-color: #0f766e;
}
/* Accessible small text */
/*.text-xs.text-zinc-500,
.text-\[10px\].text-zinc-500,
.text-\[11px\].text-zinc-500 {
    color: #3f3f46;
}*/
/* Brand color utility classes (used as additive helpers alongside Tailwind). */
.text-navy { color: var(--navy); }
.text-navy-deep { color: var(--navy-deep); }
.text-aqua { color: var(--aqua-dark); }
.text-leaf { color: var(--leaf-dark); }
.text-paper { color: var(--paper); }

.bg-navy { background-color: var(--navy); }
.bg-navy-deep { background-color: var(--navy-deep); }
.bg-aqua { background-color: var(--aqua); }
.bg-aqua-soft { background-color: var(--aqua-soft); }
.bg-leaf { background-color: var(--leaf); }
.bg-leaf-soft { background-color: var(--leaf-soft); }
.bg-paper { background-color: var(--paper); }

.border-navy { border-color: var(--navy); }
.border-aqua { border-color: var(--aqua); }
.border-leaf { border-color: var(--leaf); }
.ring-aqua { --tw-ring-color: var(--aqua); }
.ring-leaf { --tw-ring-color: var(--leaf); }

.hover\:bg-aqua:hover { background-color: var(--aqua); }
.hover\:bg-aqua\/90:hover { background-color: color-mix(in srgb, var(--aqua) 90%, transparent); }
.hover\:bg-leaf\/90:hover { background-color: color-mix(in srgb, var(--leaf) 90%, transparent); }
.hover\:text-aqua:hover { color: var(--aqua); }
.hover\:text-navy:hover { color: var(--navy); }
.hover\:border-aqua:hover { border-color: var(--aqua); }
.hover\:ring-aqua\/30:hover { --tw-ring-color: color-mix(in srgb, var(--aqua) 30%, transparent); }

.bg-aqua\/5  { background-color: color-mix(in srgb, var(--aqua) 5%, transparent); }
.bg-aqua\/10 { background-color: color-mix(in srgb, var(--aqua) 10%, transparent); }
.bg-aqua\/40 { background-color: color-mix(in srgb, var(--aqua) 40%, transparent); }
.bg-leaf\/5  { background-color: color-mix(in srgb, var(--leaf) 5%, transparent); }
.bg-leaf\/10 { background-color: color-mix(in srgb, var(--leaf) 10%, transparent); }
.bg-leaf\/40 { background-color: color-mix(in srgb, var(--leaf) 40%, transparent); }
.bg-navy\/95 { background-color: color-mix(in srgb, var(--navy) 95%, transparent); }
.bg-navy\/70 { background-color: color-mix(in srgb, var(--navy) 70%, transparent); }
.text-paper\/80 { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.text-aqua\/60 { color: color-mix(in srgb, var(--aqua) 60%, transparent); }
.bg-aqua\/60 { background-color: color-mix(in srgb, var(--aqua) 60%, transparent); }
.border-aqua\/40 { border-color: color-mix(in srgb, var(--aqua) 40%, transparent); }

main a{
  color: var(--aqua-dark);
}
/* Multicolor stripe bar (Annual Reviews style). */
.ku-stripe {
  height: 0.5rem;
  width: 100%;
  background-image: url("../images/ar-color-bar.png");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}

/* Hero leaf mosaic + watermark padlock layer. */
.ku-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
}
.ku-hero__orbs > div {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 9999px;
  filter: blur(120px);
  opacity: 0.1;
  pointer-events: none;
}
.ku-hero__orbs .orb-aqua { background: var(--aqua); right: -80px; top: -80px; }
.ku-hero__orbs .orb-leaf { background: var(--leaf); left: -80px; bottom: -80px; }
.ku-hero__mosaic {
  position: absolute; right: 0; top: 0; height: 100%;
  width: 55%;
  /*background-image: url("../images/ku-leaf-mosaic.webp");*/
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.75;
}
@media (min-width: 768px) { .ku-hero__mosaic { width: 48%; } }
@media (min-width: 1024px) { .ku-hero__mosaic { width: 44%; } }
.ku-hero__fade {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--navy), color-mix(in srgb, var(--navy) 95%, transparent), transparent);
  pointer-events: none;
}
@media (min-width: 768px) {
  .ku-hero__fade {
    background: linear-gradient(to right, var(--navy), color-mix(in srgb, var(--navy) 70%, transparent), transparent);
  }
}
.ku-hero__padlock {
  position: absolute;
  left: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
  height: 120%;
  width: auto;
  color: var(--leaf);
  opacity: 0.08;
  pointer-events: none;
}

/* FAQ collapse */
.ku-faq__panel { display: none; padding: 0 1.5rem 1.5rem; font-size: 0.875rem; color: #52525b; line-height: 1.6; }
.ku-faq__item.is-open .ku-faq__panel { display: block; }
.ku-faq__item.is-open .ku-faq__chev { transform: rotate(180deg); }
.ku-faq__chev { transition: transform 0.2s ease; }

/* Mobile nav */
.ku-mobile-nav { display: none; }
.ku-mobile-nav.is-open { display: block; }

/* Prose-light for About */
.prose-zinc p { margin: 0; }
.prose-zinc p + p { margin-top: 1.25rem; }


/* ===========================
   Desktop Navigation Dropdown
=========================== */
.ku-menu,.ku-menu ul{list-style:none !important;margin:0 !important;padding:0 !important}
.ku-menu{display:flex;align-items:center;gap:1.5rem}
.ku-menu>li{position:relative}
.ku-menu>li>a{display:flex;align-items:center;height:80px;text-decoration:none}
.ku-menu .sub-menu{position:absolute;left:0;top:100%;min-width:280px;background:#fff;border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(12px);transition:.25s;z-index:9999}
.ku-menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ku-menu .sub-menu a{display:block;padding:12px 20px;text-decoration:none}
.mobile-menu,.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu a{display:block;padding:14px 20px;border-bottom:1px solid #eee;text-decoration:none}
.mobile-menu .sub-menu{padding-left:18px}


/* Accessibility contrast overrides */
main .text-aqua {
    color: #0f766e !important;
}

main .text-leaf {
    color: #166534 !important;
}

main .text-zinc-500 {
    color: #3f3f46 !important;
}

header .text-zinc-500 {
    color: #3f3f46 !important;
}