/* =========================================================
   CKD Hub — Brand foundation
   Loaded first on every page (front end and wp-admin). Every other
   stylesheet declares this one as a dependency.

   Palette (brand kit):
     Dark Green   #08312A   RGB 8 49 42
     Accent Green #00E47C   RGB 0 228 124
     Warm Gray    #E5E3DE   RGB 229 227 222
     Light Gray   #F6F5F3   RGB 246 245 243

   Type: Boehringer Forward Head for headings, Boehringer Forward Text
   for everything else. Buttons carry a 5 px corner radius.
   ========================================================= */

/* ---- Fonts ---- */
@font-face {
  font-family: "Boehringer Forward Text";
  src: url("../fonts/BoehringerForwardText.woff2") format("woff2"), url("../fonts/BoehringerForwardText.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Text";
  src: url("../fonts/BoehringerForwardText-It.woff2") format("woff2"), url("../fonts/BoehringerForwardText-It.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Text";
  src: url("../fonts/BoehringerForwardText-Md.woff2") format("woff2"), url("../fonts/BoehringerForwardText-Md.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Text";
  src: url("../fonts/BoehringerForwardText-MdIt.woff2") format("woff2"), url("../fonts/BoehringerForwardText-MdIt.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Text";
  src: url("../fonts/BoehringerForwardText-Bd.woff2") format("woff2"), url("../fonts/BoehringerForwardText-Bd.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Text";
  src: url("../fonts/BoehringerForwardText-BdIt.woff2") format("woff2"), url("../fonts/BoehringerForwardText-BdIt.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Boehringer Forward Head";
  src: url("../fonts/BoehringerForwardHead.woff2") format("woff2"), url("../fonts/BoehringerForwardHead.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Head";
  src: url("../fonts/BoehringerForwardHead-It.woff2") format("woff2"), url("../fonts/BoehringerForwardHead-It.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Head";
  src: url("../fonts/BoehringerForwardHead-Md.woff2") format("woff2"), url("../fonts/BoehringerForwardHead-Md.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Head";
  src: url("../fonts/BoehringerForwardHead-MdIt.woff2") format("woff2"), url("../fonts/BoehringerForwardHead-MdIt.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Head";
  src: url("../fonts/BoehringerForwardHead-Bd.woff2") format("woff2"), url("../fonts/BoehringerForwardHead-Bd.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Boehringer Forward Head";
  src: url("../fonts/BoehringerForwardHead-BdIt.woff2") format("woff2"), url("../fonts/BoehringerForwardHead-BdIt.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --bi-dark-green:   #08312A;
  --bi-accent-green: #00E47C;
  --bi-warm-gray:    #E5E3DE;
  --bi-light-gray:   #F6F5F3;

  --font-text: "Boehringer Forward Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Boehringer Forward Head", "Boehringer Forward Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Buttons: 5 px corners per the brand kit (button_curve). */
  --r-btn: 5px;

  --topbar-h: 72px;
}

/* ---- Base type ----
   Bodies get the text face; every heading level gets the display face.
   Pages that load app.css or signin.css restate the family through their
   own --sans token, which now resolves to the same stack. */
body.ckd-app,
body.ckd-signin-page,
body.ckd-player-page,
body.wp-admin .ckd-admin {
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.ckd-app h1, body.ckd-app h2, body.ckd-app h3, body.ckd-app h4,
body.ckd-signin-page h1, body.ckd-signin-page h2, body.ckd-signin-page h3,
body.ckd-player-page h1, body.ckd-player-page h2, body.ckd-player-page h3,
body.wp-admin .ckd-admin h1, body.wp-admin .ckd-admin h2, body.wp-admin .ckd-admin h3, body.wp-admin .ckd-page-title,
.quiz-card .quiz-question,
.font-head {
  font-family: var(--font-head);
}
button, input, select, textarea { font-family: inherit; }

/* ---- Buttons: brand corner radius everywhere ---- */
.btn, .btn-locked, .btn-ghost, .btn-green, .btn-red, .btn-sm,
.quiz-option, .quiz-submit, .eval-star,
.wp-admin .ckd-admin .button, .wp-admin .ckd-admin .button-primary {
  border-radius: var(--r-btn) !important;
}

/* ---- Top bar ----
   CKD Hub lockup on the left, Boehringer Ingelheim on the right, on
   Dark Green. Sits above the sign-in split and above the app shell. */
.topbar {
  height: var(--topbar-h);
  background: var(--bi-dark-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  position: relative;
  z-index: 50;
}
.topbar-brand { display: inline-flex; align-items: center; text-decoration: none; }
.topbar-brand img { height: 46px; width: auto; display: block; }
.topbar-sponsor { display: inline-flex; align-items: center; }
.topbar-sponsor img { height: 40px; width: auto; display: block; }
.topbar-sponsor img { opacity: .92; }

@media (max-width: 900px) {
  :root { --topbar-h: 60px; }
  .topbar { padding: 0 16px; }
  .topbar-brand img { height: 32px; }
  .topbar-sponsor img { height: 28px; }
}
@media (max-width: 420px) {
  .topbar-sponsor img { height: 24px; }
}

/* ---- Boehringer Ingelheim identifier ----
   Built to the client's identifier artwork: the green logo on Dark Green,
   white text, and the text block set flush with the wordmark — its left
   edge lines up with "Boehringer", not with the circle symbol. In the logo
   file the wordmark starts at 1.151 × the logo's height, hence the indent.
   Proportions measured from the artwork: logo ≈ 4.4 × the text size, text
   directly under the logo, one blank line between the two paragraphs.
   Everything is in em, so each page sets one font-size and the whole block
   scales together. */
.sponsor-foot { font-size: 12px; }
.bi-id {
  --bi-logo-h: 4.4em;
  background: var(--bi-dark-green, #08312A);
  color: #fff;
  line-height: 1.3;
  padding: 2em 2.2em 2.1em;
  border-radius: 12px;
}
.bi-id-logo { display: block; height: var(--bi-logo-h); width: auto; max-width: 100%; }
.bi-id-text {
  margin-top: .3em;
  padding-left: calc(var(--bi-logo-h) * 1.151);
  /* The artwork's measure: the PV paragraph breaks before "product,". */
  max-width: calc(var(--bi-logo-h) * 1.151 + 35em);
  overflow-wrap: anywhere;
}
.bi-id-text p { margin: 0; }
.bi-id-text p + p { margin-top: 1.3em; }
.bi-id-text a { color: inherit; text-decoration: none; }
.bi-id-text a:hover,
.bi-id-text a:focus-visible { text-decoration: underline; }
/* Stored text from older builds wrapped the company name in a bold span;
   the artwork sets it in the regular weight like the rest. */
.bi-id .sponsor-name { font-weight: inherit; color: inherit; }

/* On a page that is already Dark Green the panel is the page: no box, so
   the logo lines up with the content above it. */
.sponsor-foot-dark .bi-id { background: none; padding: 0; border-radius: 0; }

.sponsor-foot .sponsor-links { margin: 1.2em 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 1.15em; }
.sponsor-foot .sponsor-links a { color: var(--green-deep, #00A85C); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sponsor-foot-dark .sponsor-links a { color: var(--green, #00E47C); }
.sponsor-foot .sponsor-links a:hover { color: var(--green-ink, #00663A); }
.sponsor-foot-dark .sponsor-links a:hover { color: #fff; }

.app-foot { margin-top: 40px; }
.app-foot .sponsor-foot { font-size: 12.5px; }

@media (max-width: 620px) {
  .bi-id { padding: 1.6em 1.5em 1.7em; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}