/* NeuroPype brand layer — overrides stock UIkit 3 to match the live site.
 *
 * The top section is the SHARED brand layer, kept identical to the marketing
 * site's site/static/css/brand.css (edit both together). Below it is the
 * app-only section for /login, /purchase, /account and password-reset pages
 * (license labels, flash alerts, the Stripe card element, etc.).
 *
 *   ink      #2a2a2a   (headings)        ink-strong #303033 (primary buttons/sections)
 *   ink-2    #242427   (secondary)       muted      #7a8188 (body text)
 *   line     #e5e5e7   (borders/hr)      wash       #f7f7f7 (muted sections)
 *   accent   #518f91   (TEAL — links + navbar hover; the real brand accent)
 *   ok #3dc372  err #e44e56
 *   Fonts: Raleway (headings/buttons/nav), Open Sans (body)
 */

:root {
  --np-ink:        #2a2a2a;
  --np-ink-strong: #303033;
  --np-ink-2:      #242427;
  --np-muted:      #7a8188;
  --np-line:       #e5e5e7;
  --np-wash:       #f7f7f7;
  --np-accent:     #518f91;
  --np-faint:      #c4c1c1;
  --np-ok:         #3dc372;
  --np-err:        #e44e56;
  --np-font-head:  "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --np-font-body:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Base ---------------------------------------------------------- */
html {
  font-family: var(--np-font-body);
  font-size: 15px;
  line-height: 1.625;
  color: var(--np-muted);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sticky footer — keep the footer at the bottom of the viewport on short pages. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* Logo wordmark ("NeuroPype" set next to the mark on auth pages). */
.np-wordmark { font-family: var(--np-font-head); font-weight: 600; color: var(--np-ink); letter-spacing: .5px; }

/* Brand teal for primary-colored elements (e.g. account link icons). */
.uk-text-primary { color: var(--np-accent) !important; }

/* /account link columns: larger link text, more readable sub-labels. */
.np-acct-links a { font-size: 18px; }
.np-acct-legend { color: #666; }

/* License-card detail text — a touch darker than uk-text-meta for readability. */
.np-card-meta { color: #666; }

/* OS download icons (Windows / macOS / Linux). */
.np-os-icon { width: 28px; height: 28px; vertical-align: middle; }
.np-os-dl img { width: 28px; height: 28px; vertical-align: middle; opacity: .7; transition: opacity .15s; }
.np-os-dl:hover img { opacity: 1; }

/* ---- Headings ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-card-title, .uk-logo {
  font-family: var(--np-font-head);
  color: var(--np-ink);
}
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
  margin: 0 0 20px;
  font-weight: 400;          /* h1–h3 are light Raleway on the live site */
  text-transform: none;
}
h1, .uk-h1 { font-size: 42px; line-height: 1.2; }
h2, .uk-h2 { font-size: 36px; line-height: 1.3; }
h3, .uk-h3 { font-size: 28px; line-height: 1.4; }
/* h4–h6 are the small uppercase "eyebrow" style. */
h4, .uk-h4 { font-size: 20px; line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
h5, .uk-h5 { font-size: 15px; line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
h6, .uk-h6 { font-size: 11px; line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }

.uk-card-title  { font-size: 28px; line-height: 1.4; font-weight: 400; }
.uk-text-lead   { font-family: var(--np-font-head); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--np-ink); }
.uk-heading-small { font-size: 48px; line-height: 1.2; }

@media (max-width: 959px) {
  h1, .uk-h1 { font-size: 36px; }
  h2, .uk-h2 { font-size: 32px; }
  .uk-heading-small { font-size: 38px; }
}

/* ---- Links (teal) ------------------------------------------------- */
a, .uk-link { color: var(--np-accent); text-decoration: none; }
a:hover, .uk-link:hover { color: var(--np-ink); text-decoration: underline; }

/* ---- Buttons (squared, Raleway, uppercase) ------------------------ */
.uk-button {
  font-family: var(--np-font-head);
  font-weight: 500;
  font-size: 11px;
  line-height: 38px;
  padding: 0 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 0;
  border: 1px solid transparent;
  transition: .1s ease-in-out;
}
.uk-button-primary            { background: var(--np-ink-strong); color: #fff; }
.uk-button-primary:hover,
.uk-button-primary:focus      { background: transparent; color: var(--np-ink-strong); border-color: var(--np-ink-strong); }
.uk-button-default            { background: var(--np-wash); color: var(--np-muted); }
.uk-button-default:hover,
.uk-button-default:focus      { background: transparent; color: var(--np-ink); border-color: var(--np-line); }
.uk-button-secondary          { background: var(--np-ink-2); color: #fff; }
.uk-button-secondary:hover,
.uk-button-secondary:focus    { background: transparent; color: var(--np-ink-2); border-color: var(--np-ink-2); }
.uk-button-large { padding: 0 40px; line-height: 53px; }

/* ---- Cards (flat: border only, no radius/shadow) ------------------ */
.uk-card-body  { padding: 40px; }
.uk-card-large > .uk-card-body, .uk-card-large .uk-card-body { padding: 70px; }
.uk-card-default {
  background: #fff;
  color: var(--np-muted);
  border: 1px solid var(--np-line);
  border-radius: 0;
  box-shadow: none;
}
.uk-card-default .uk-card-title { color: var(--np-ink); }
.uk-card-default.uk-card-hover:hover { background: #fff; border-color: var(--np-ink-strong); box-shadow: none; }

/* ---- Sections ----------------------------------------------------- */
.uk-section-muted     { background: var(--np-wash); }
.uk-section-primary   { background: var(--np-ink-strong); }
.uk-section-secondary { background: var(--np-ink-2); }

/* ---- Container ---------------------------------------------------- */
.uk-container { max-width: 1280px; }

/* ---- Navbar ------------------------------------------------------- */
.uk-navbar-container:not(.uk-navbar-transparent) { background: #fff; }
/* Push the menu to the far right (UIkit's default). Replace `auto` with a fixed
   value (e.g. 40px) to pull the menu back toward the logo instead. */
.uk-navbar-right { margin-left: auto; }
.uk-navbar-nav > li > a {
  min-height: 48px;
  padding: 0 15px;
  font-family: var(--np-font-head);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #3e3e40;
}
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li > a.uk-open { color: var(--np-accent); }
.uk-logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--np-ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.uk-logo:hover { color: var(--np-ink); }
/* Compact header (48px). */
.uk-navbar-item, .uk-navbar-toggle { min-height: 48px; }
/* Pin the logo size in CSS — the HTML height attr gets overridden by UIkit's
   flex navbar, which otherwise lets the SVG stretch to the header height. */
.uk-logo img { height: 32px; width: auto; }

/* ---- Forms / misc ------------------------------------------------- */
hr { border-top: 1px solid var(--np-line); }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: var(--np-accent); }
.uk-form-label {
  font-family: var(--np-font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--np-muted);
}

/* =====================================================================
 * App-only — account / purchase / login / password-reset pages.
 * (Not part of the shared layer above; the marketing site doesn't need these.)
 * ===================================================================== */

/* Account section headings. */
.uk-heading-divider { border-bottom: 1px solid var(--np-line); padding-bottom: 12px; }
.uk-heading-line > span::before,
.uk-heading-line > span::after { border-bottom: 1px solid var(--np-line); }

/* License details list. */
.uk-description-list > dt {
  font-family: var(--np-font-head);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--np-muted);
}
.uk-description-list > dd { color: var(--np-ink); margin-bottom: 10px; }

/* License status labels (square, Raleway — like the rest of the chrome). */
.uk-label {
  border-radius: 0;
  font-family: var(--np-font-head);
  letter-spacing: 1px;
  font-weight: 600;
  padding: 4px 10px;
}
.uk-label-success { background-color: var(--np-ok); }
.uk-label-danger  { background-color: var(--np-err); }

/* Cancel-subscription button. */
.uk-button-danger { background: #fff; color: var(--np-err); border-color: var(--np-line); }
.uk-button-danger:hover,
.uk-button-danger:focus { background: var(--np-err); color: #fff; border-color: var(--np-err); }

/* Flash alerts. */
.uk-alert { border-left: 3px solid currentColor; }

/* Stripe card element. */
#card-element { border: 1px solid var(--np-line); padding: 10px 12px; background: #fff; }

/* App footer (dark, matches the marketing site footer). */
.np-footer a { color: #d6d8da; text-decoration: none; }
.np-footer a:hover { color: #fff; text-decoration: underline; }
.np-footer .np-footer-brand img { height: 18px; width: auto; opacity: .65; vertical-align: middle; }