/* ============================================================
   SITE CHROME — self-contained header + footer (non-home pages)
   Unique class names so no page CSS can conflict.
   ============================================================ */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  height:76px; background:#ffffff; padding:0 40px;
  border-bottom:1px solid #e7e7e7; position:relative; box-sizing:border-box;
}
.site-logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:#111111; line-height:1; }
.site-logo-mark { width:40px; height:40px; background:#ffc400; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.site-logo-mark img { height:32px; width:auto; display:block; }
.site-logo-text { font-size:26px; font-weight:900; line-height:1; color:#111111; display:flex; flex-direction:column; }
.site-logo-text span { font-size:19px; letter-spacing:5px; font-weight:700; line-height:1.05; }
.site-job-counter { font-size:12px; font-weight:800; color:#555555; display:inline-flex; align-items:center; gap:5px; line-height:1; white-space:nowrap; }
.site-job-counter .site-count-num { color:#111111; font-size:14px; }
.site-nav { display:flex; align-items:center; gap:22px; margin-left:auto; font-size:14px; font-weight:800; line-height:1; }
.site-nav a { color:#111111; text-decoration:none; white-space:nowrap; }
.site-nav a.btn-outline { border:2px solid #111111; padding:9px 18px; border-radius:999px; }
.site-nav a.btn-yellow { background:#ffc400; color:#050607; padding:9px 18px; border-radius:999px; }

/* hamburger */
.nav-toggle { display:none; }

@media (max-width:900px) {
  body { overflow-x:hidden; }
  .site-header { height:64px; padding:0 16px; }
  .site-logo-mark { width:36px; height:36px; }
  .site-logo-mark img { height:27px; }
  .site-logo-text { font-size:19px; }
  .site-logo-text span { font-size:14px; letter-spacing:4px; }
  .site-job-counter { display:none; }
  .nav-toggle {
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:44px; height:44px; margin-left:auto; flex:none; padding:10px;
    background:transparent; border:0; cursor:pointer;
  }
  .nav-toggle .hbar { display:block; width:22px; height:2px; background:#111111; border-radius:2px; }
  .site-nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:#ffffff; padding:10px 16px 16px; z-index:300;
    box-shadow:0 18px 34px rgba(0,0,0,.18); border-bottom:3px solid #ffc400;
  }
  .site-header.open .site-nav { display:flex; }
  .site-header.open .site-nav a { display:block; padding:14px 8px; font-size:16px; font-weight:800; color:#111111; border-bottom:1px solid #ececec; }
  .site-header.open .site-nav a:last-child { border-bottom:0; }
  .site-header.open .site-nav a.btn-outline { text-align:center; border-radius:8px; margin-top:8px; border:2px solid #111111; }
  .site-header.open .site-nav a.btn-yellow { text-align:center; border-radius:8px; margin-top:8px; background:#ffc400; color:#050607; }
}

/* ---------------- FOOTER ---------------- */
.site-footer { background:#0b0d0f; color:#ffffff; padding:36px 40px; margin-top:28px; width:100%; box-sizing:border-box; }
.site-foot-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; align-items:start; }
.site-foot-brand { color:#ffffff; }
.site-foot-logo { font-size:24px; font-weight:900; color:#ffffff; line-height:1; display:flex; flex-direction:column; }
.site-foot-logo span { font-size:19px; letter-spacing:5px; font-weight:700; line-height:1.1; }
.site-foot-brand p { color:rgba(255,255,255,.7); font-size:14px; line-height:1.6; margin:14px 0 0; }
.site-foot-social { display:flex; gap:14px; margin-top:18px; }
.site-foot-social a {
  width:42px; height:42px; border:1px solid #ffffff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#ffffff;
  font-size:16px; text-decoration:none; flex:none;
}
.site-foot-social a:hover { background:#ffffff; color:#0b0d0f; }
.site-foot-col strong { display:block; color:#ffffff; font-size:15px; margin-bottom:14px; }
.site-foot-col a { display:block; color:#ffffff; font-size:14px; margin-bottom:12px; text-decoration:none; }
.site-foot-col a:hover { opacity:.7; }

@media (max-width:900px) {
  .site-footer { padding:34px 20px; }
  .site-foot-grid { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:600px) {
  .site-foot-grid { grid-template-columns:1fr; gap:30px; }
}

/* ---------------- FORMS ---------------- */
@media (max-width:900px) {
  input, select, textarea { font-size:16px !important; }
  .form-input, .form-group input, .form-group select, .form-group textarea { width:100%; }
  .form-group { margin-bottom:16px; }
  button, .button, .btn-login, .btn-contact, .btn-primary { min-height:46px; }
}

/* ---------------- CONTENT BODIES ---------------- */
@media (max-width:900px) {
  .login-body, .signup-body, .contact-body, .terms-body, .privacy-body {
    padding:20px 16px 44px !important; grid-template-columns:1fr !important;
  }
  .login-card-wrap, .signup-card-wrap, .contact-card-wrap,
  .terms-card, .privacy-card, .login-side-card, .signup-side-card { padding:22px 18px !important; }
  .wrap { width:100%; max-width:100%; padding-left:16px; padding-right:16px; box-sizing:border-box; }
  .cards { grid-template-columns:1fr !important; gap:18px !important; }
}
@media (max-width:900px) {
  .signup-page h1 { font-size:28px !important; letter-spacing:1.5px !important; }
  .signup-page .page-body { padding:0 !important; }
}
@media (max-width:560px) {
  .signup-page h1 { font-size:24px !important; }
  .signup-page .page-body p { font-size:15px !important; }
}
img { max-width:100%; height:auto; }

/* ---------------- HEADER BUTTONS (black border, white text) ---------------- */
.site-nav a.btn-outline, .site-nav a.btn-yellow {
  background: transparent !important; color: #111111 !important;
  border: 2px solid #111111 !important;
}
.site-header.open .site-nav a.btn-outline, .site-header.open .site-nav a.btn-yellow {
  background: transparent !important; color: #111111 !important;
  border: 2px solid #111111 !important;
}

/* ---------------- NAV: every item has a square border ---------------- */
.site-nav a {
  border: 2px solid #111111 !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  color: #111111 !important;
  background: transparent !important;
}
.site-header.open .site-nav a {
  border: 2px solid #111111 !important;
  border-radius: 0 !important;
}

/* Mobile drawer: centre every nav item */
.site-header.open .site-nav a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Uniform spacing between drawer items */
.site-header.open .site-nav { gap: 10px !important; }
.site-header.open .site-nav a { margin: 0 !important; padding: 12px 8px !important; }

/* Construction-style header buttons (template applied, our words, compact size) */
.site-nav a, .site-header.open .site-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  background: #F2B705 !important; color: #111111 !important;
  border: 2px solid #111111 !important; border-radius: 3px !important;
  padding: 8px 16px !important;
  font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  box-shadow: 3px 3px 0 #111111;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; line-height: 1.2; margin: 0 !important;
}
.site-nav a:hover, .site-header.open .site-nav a:hover { background: #FFD12A !important; transform: translate(2px,2px); box-shadow: 1px 1px 0 #111111; }
.site-nav a:active, .site-header.open .site-nav a:active { transform: translate(3px,3px); box-shadow: 0 0 0 #111111; }

/* Ensure LOG IN / SIGN UP get the yellow construction fill too */
.site-nav a.btn-outline, .site-nav a.btn-yellow,
.site-header.open .site-nav a.btn-outline, .site-header.open .site-nav a.btn-yellow {
  background: #F2B705 !important;
  color: #111111 !important;
}
.site-nav a.btn-outline:hover, .site-nav a.btn-yellow:hover,
.site-header.open .site-nav a.btn-outline:hover, .site-header.open .site-nav a.btn-yellow:hover {
  background: #FFD12A !important;
}

/* Header buttons = main page Search Jobs style */
.site-nav a, .site-header.open .site-nav a {
  background: #ffc400 !important; color: #050607 !important;
  border: 0 !important; border-radius: 4px !important;
  font-family: Arial, Helvetica, sans-serif; font-weight: 900 !important;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  padding: 10px 18px !important; text-decoration: none;
  box-shadow: none !important; transition: all .2s ease !important;
}
.site-nav a:hover, .site-header.open .site-nav a:hover {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}

/* LOG IN / SIGN UP = Search Jobs style (wins over earlier btn rules) */
.site-nav a.btn-outline, .site-nav a.btn-yellow,
.site-header.open .site-nav a.btn-outline, .site-header.open .site-nav a.btn-yellow {
  background: #ffc400 !important; color: #050607 !important;
  border: 0 !important; border-radius: 4px !important; box-shadow: none !important;
}
.site-nav a.btn-outline:hover, .site-nav a.btn-yellow:hover,
.site-header.open .site-nav a.btn-outline:hover, .site-header.open .site-nav a.btn-yellow:hover {
  background: #ffc400 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}