/*
 * The PDC theme: Forgejo's light theme in the PICU Data Collaborative's
 * colors and fonts, taken from pedsdata.org. Set as the default theme in
 * templates/forgejo.env.j2 (DEFAULT_THEME); people can still pick another
 * one in their settings.
 *
 * Installed by config-management/forgejo/playbook.yml into Forgejo's custom
 * folder. Changes here are undone by the next configure run.
 */

/* Everything Forgejo's light theme sets; the rules below only change what
   PDC's branding needs. */
@import url("./theme-forgejo-light.css");

/* Fonts, served by Forgejo itself so browsers never contact Google.
   Poppins (headings) and Lato (text), both SIL Open Font License. */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }

:root {
  /* PDC's colors. The four tile colors come from the logo; the blue is
     pedsdata.org's buttons and links; ink and gray its headings and text. */
  --pdc-tile-blue: #425fa3;
  --pdc-tile-orange: #f49320;
  --pdc-tile-red: #ec4139;
  --pdc-tile-green: #04a04c;
  --pdc-ink: #2c313f;
  --pdc-gray: #73757d;

  /* Forgejo's main color (buttons, links, active tabs), in PDC blue, with
     the lighter and darker steps Forgejo uses for hover and highlights. */
  --color-primary: #3e69dc;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #3559c4;
  --color-primary-dark-2: #2e4ead;
  --color-primary-dark-3: #284497;
  --color-primary-dark-4: #213981;
  --color-primary-light-1: #5a80e2;
  --color-primary-light-2: #7896e7;
  --color-primary-light-3: #96adec;
  --color-primary-light-4: #b4c4f1;
  --color-primary-light-5: #d2dbf6;
  --color-primary-light-6: #e7ecfa;
  --color-primary-light-7: #f3f6fd;
  --color-primary-alpha-10: #3e69dc19;
  --color-primary-alpha-20: #3e69dc33;
  --color-primary-alpha-30: #3e69dc4b;
  --color-primary-alpha-40: #3e69dc66;
  --color-primary-alpha-50: #3e69dc80;
  --color-primary-alpha-60: #3e69dc99;
  --color-primary-alpha-70: #3e69dcb3;
  --color-primary-alpha-80: #3e69dccc;
  --color-primary-alpha-90: #3e69dce1;
  --color-accent: var(--color-primary-light-1);

  /* A white top bar, as on pedsdata.org. */
  --color-nav-bg: #ffffff;

  /* Lato for all text, Poppins for headings (below). */
  --fonts-proportional: "Lato", -apple-system, "Segoe UI", system-ui, "Noto Sans", Roboto, "Helvetica Neue", Arial;
}

h1, h2, h3, h4, .ui.header, .pdc-hero h1 {
  font-family: "Poppins", var(--fonts-regular);
}

/* The logo's four colors as a stripe along the top of every page. */
#navbar {
  position: relative;
  padding-top: 4px;
}

#navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right,
    var(--pdc-tile-blue) 0 25%, var(--pdc-tile-orange) 25% 50%,
    var(--pdc-tile-red) 50% 75%, var(--pdc-tile-green) 75% 100%);
}

/* The site name next to the logo in the top bar. The name itself is set in
   templates/custom/header.tmpl, from Forgejo's APP_NAME. */
#navbar-logo::after {
  margin-left: 0.6em;
  font-family: "Poppins", var(--fonts-regular);
  font-weight: 600;
  font-size: 16px;
  color: var(--pdc-ink);
  white-space: nowrap;
}

/* Forgejo's Help link points to Forgejo's own documentation, not PDC's:
   hidden in the top bar and in the user menu. */
#navbar a[href^="https://forgejo.org/docs"] {
  display: none !important;
}

/* ---- The sign-in page (templates/user/auth/signin.tmpl) ------------- */

/* The whole sign-in page has a light gray background, as in the mockup;
   the top bar and footer stay as they are. */
body:has(.pdc-signin) {
  background: var(--color-secondary-bg);
}

.pdc-signin-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 32px;
}

@media (max-width: 900px) {
  .pdc-signin-grid { grid-template-columns: 1fr; margin: 24px auto; gap: 24px; padding: 0 16px; }
  .pdc-hero h1 { font-size: 30px; }
  .pdc-hero p { font-size: 17px; }
}

.pdc-hero h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  color: var(--pdc-ink);
  margin: 0 0 16px;
}

.pdc-hero p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--pdc-gray);
  margin: 0 0 24px;
}

.pdc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdc-chips li {
  background: #ffffff;
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--pdc-ink);
}

.pdc-chips li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--pdc-chip);
}

/* The sign-in card: Forgejo's own sign-in box, restyled. Its plain
   "Sign in" header is replaced by the logo and heading from
   templates/custom/signin_mid.tmpl. */
.pdc-signin .ui.top.attached.header { display: none; }

.pdc-signin .ui.attached.segment {
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  padding: 36px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(44, 49, 63, 0.06);
}

.pdc-card-intro { text-align: center; margin-bottom: 24px; }
.pdc-card-intro img { height: 72px; display: block; margin: 0 auto 18px; }
.pdc-card-intro h2 { font-weight: 600; font-size: 22px; color: var(--pdc-ink); margin: 0 0 6px; }
.pdc-card-intro p { font-size: 15px; color: var(--pdc-gray); margin: 0; }

/* "Sign in with PDC", in PDC blue, with the tile grid as its icon (the
   sign-in source's icon, set by the playbook). */
.pdc-signin .oauth-login-link {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 14px !important;
  font-weight: 700;
  font-size: 16px;
  gap: 10px;
}

.pdc-signin .oauth-login-link:hover { background: var(--color-primary-dark-1) !important; }

.pdc-signin .oauth-login-link img {
  background: #ffffff;
  border-radius: 4px;
  padding: 2px;
}

.pdc-signin-help {
  text-align: center;
  font-size: 13px;
  color: var(--pdc-gray);
  margin-top: 18px;
}

/* ---- Footer: PDC's links (templates/custom/extra_links_footer.tmpl) -- */

.page-footer .pdc-footer-link { color: var(--color-text-light-1); }