:root {
  --brand: #14aeee;
  --featured: #f0a202;
  --page-bg: #e4e0ef;
  --header-bg: #1a133b;
  --header-text: #ffffff;
  --ink: #2b2350;
  --muted: #615f6b;
  --surface: #ffffff;
  --surface-2: #f0eef6;
  --border: #d5d1e3;
  --radius: 0.5rem;
  --danger: #fd4d5c;
  /* Clear fixed SaaSpik header (desktop nav is tall) */
  --header-offset: 7.25rem;
}

@media (max-width: 991px) {
  :root {
    --header-offset: 5.25rem;
  }
}

body.site-app,
body.site-app #main_content {
  background: var(--page-bg);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 0.5rem 0.9rem;
  z-index: 10000;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.site-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}

.logo-text {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-text .main-logo,
.logo-text .sticky-logo {
  display: inline;
  color: var(--header-text);
}

/* Solid dark header (no hero banner) */
.site-header.header-dark.header-app {
  background: var(--header-bg);
  box-shadow: 0 8px 24px rgba(14, 3, 52, 0.28);
}

.site-header.header-dark.header-app.pix-header-fixed {
  background: var(--header-bg);
  box-shadow: 0 10px 28px rgba(14, 3, 52, 0.35);
}

.site-header.header-dark.header-app .logo-text .site-brand {
  color: var(--header-text);
}

.site-header.header-dark.header-app .site-main-menu li a {
  color: rgba(255, 255, 255, 0.92);
}

.site-header.header-dark.header-app .site-main-menu li a:hover,
.site-header.header-dark.header-app .site-main-menu li a.current_page {
  color: var(--brand);
}

.site-header.header-dark.header-app .site-main-menu li a:after {
  background: var(--brand);
}

.site-header.header-dark.header-app .header-inner .site-nav .nav-right .nav-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 30px;
  box-shadow: none;
}

.site-header.header-dark.header-app .header-inner .site-nav .nav-right .nav-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.site-header.header-dark.header-app .toggle-menu .bar {
  background: #fff;
}

.site-header.header-dark.header-app .logout-form .nav-logout {
  color: rgba(255, 255, 255, 0.92);
}

.site-header.header-dark.header-app .logout-form .nav-logout:hover {
  color: var(--brand);
}

@media (max-width: 991px) {
  .site-header.header-dark.header-app .site-nav {
    background: #fff;
  }

  .site-header.header-dark.header-app .site-nav .site-brand,
  .site-header.header-dark.header-app .site-nav .site-main-menu li a,
  .site-header.header-dark.header-app .site-nav .logout-form .nav-logout {
    color: var(--ink);
  }

  .site-header.header-dark.header-app .site-nav .site-main-menu li a:hover {
    color: var(--brand);
  }

  .site-header.header-dark.header-app .site-nav .site-main-menu li .logout-form {
    display: block;
    margin: 0;
  }

  .site-header.header-dark.header-app .site-nav .site-main-menu li .logout-form .nav-logout {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 35px;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
  }

  .site-header.header-dark.header-app .site-nav .site-main-menu li .logout-form .nav-logout:hover {
    color: var(--brand);
  }

  .site-header.header-dark.header-app .header-inner .site-nav .nav-right .nav-btn {
    border-color: var(--brand);
    color: var(--brand);
  }
}

.site-slogan {
  margin: 0;
  padding: calc(var(--header-offset) + 0.85rem) 1rem 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.site-main {
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  min-height: 50vh;
  position: relative;
  z-index: 1;
}

.site-messages {
  margin-bottom: 1rem;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: #e8f7fd;
  border: 1px solid #b6e4f7;
  color: var(--ink);
}

.logout-form,
.inline-form {
  display: inline;
  margin: 0;
}

.logout-form .nav-logout {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  line-height: inherit;
}

#footer.footer-app {
  background: #d8d3e8;
  border-top: 1px solid #c9c2db;
  position: relative;
}

#footer.footer-app .footer-inner {
  padding: 2.75rem 0 2.25rem;
}

#footer.footer-app .footer-logo.site-brand {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

#footer.footer-app .footer-disclaimer {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 22rem;
}

#footer.footer-app .widget.footer-widget .widget-title {
  color: var(--ink);
  font-size: 1.05rem;
}

#footer.footer-app .footer-menu li a {
  color: var(--muted);
  font-size: 0.9rem;
}

#footer.footer-app .footer-menu li a:hover {
  color: var(--brand);
}

/* Baseline controls outside specialized form/job CSS */
.site-main a[role="button"],
.site-main button[type="submit"],
.site-main input[type="submit"] {
  cursor: pointer;
}

.site-main button,
.site-main a[role="button"] {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.site-main button.secondary,
.site-main button.outline,
.site-main a.secondary {
  background: transparent;
  color: var(--brand);
}

.form-error {
  color: var(--danger);
}
