/* ShieldBin overrides for QBee - dark theme + nav fixes */
:root {
  --color-primary: #ff4c41;
  --color-primary-light: #ffaca7;
  --color-primary-dark: #da0d00;
  --color-bg: #0f1115;
  --color-surface: #16181d;
  --color-text: #e8eaed;
  --color-text-muted: #b0b4bb;
  --color-border: #2a2d34;
  --radius: 6px;
}

body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

header, .container-wrap { background: var(--color-surface); }
.container { color: var(--color-text); }

/* nav desktop */
#navbar .site-menu ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
#navbar .site-menu ul li a { color: var(--color-text); text-decoration: none; font-weight: 600; }
#navbar .site-menu ul li a:hover { color: var(--color-primary); }

/* mobile toggle overlay */
#navbar-sm { background: var(--color-surface); }
#navbar-sm a { color: var(--color-text); }

/* buttons */
.button, .btn, .cta {
  background: var(--color-primary);
  color: #fff !important;
  border-radius: var(--radius);
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  text-decoration: none;
}
.button:hover, .btn:hover, .cta:hover { background: var(--color-primary-dark); }

/* cards / blocks */
section, .block, .feature { background: transparent; color: var(--color-text); }

/* footer */
footer { background: var(--color-surface); color: var(--color-text-muted); margin: 0; padding: 24px 0; }
footer a { color: var(--color-primary); }

/* disable any overlay that blocks clicks */
#navbar { position: relative; z-index: 20; }
#navbar .site-menu { pointer-events: auto; }

/* Headings contrast */
h1, .content h1 { color: var(--color-primary); font-weight: 800; }
h2, .content h2 { color: #f5f5f7; font-weight: 800; }
h3, .content h3 { color: #f5f5f7; font-weight: 700; }
.content h1, .content h2, .content h3 { margin-top: 0.6em; margin-bottom: 0.35em; }

/* Hero banner for home - separate hero section */
body.home-hero main > section.default-section:first-of-type {
  position: relative;
  margin: 0;
  padding: 0;
}
body.home-hero main > section.default-section:first-of-type .container-wrap {
  position: relative;
  padding: 0;
  margin: 0;
}
/* Hero background - only covers CTA portion */
body.home-hero main > section.default-section:first-of-type .container-wrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 360px;
  background: linear-gradient(180deg, rgba(30,34,42,0.65) 0%, rgba(22,24,29,0.9) 60%, rgba(15,17,21,1) 100%), url("/user/themes/qbee/images/shieldbin_header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
/* Hero CTA content - overlaid on hero */
body.home-hero main > section.default-section:first-of-type .content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 360px 24px;
  text-align: center;
}
body.home-hero main > section.default-section:first-of-type .content h1 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin-bottom: 16px;
}
body.home-hero main > section.default-section:first-of-type .content > p:first-of-type {
  color: #e9ebf0;
  font-size: 1.125em;
  margin-bottom: 24px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* Content below hero (after hr) - normal section */
body.home-hero main > section.default-section:first-of-type .content hr {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  height: 0;
}
body.home-hero main > section.default-section:first-of-type .content > hr ~ * {
  width: 80vw;
  max-width: 80vw;
  margin-left: calc(50% - 40vw);
  margin-right: auto;
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  margin-top: 0;
  padding-top: 48px;
  padding-left: 24px;
  padding-right: 24px;
}
  margin-right: auto;
}
body.home-hero main > section.default-section:first-of-type .content > hr ~ h2 {
  color: var(--color-primary);
  text-align: left;
}
body.home-hero main > section.default-section:first-of-type .content > hr ~ ul {
  text-align: left;
}
body.home-hero section.default-section { margin: 0; padding: 0; }

/* Remove gaps before footer */
body.home-hero section.default-section:last-of-type { margin-bottom: 0; padding-bottom: 0; }
body.home-hero footer { margin-top: 0; }