@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Shared BuyLowa brand system ─────────────────────────────
   Edit header, footer, brand colours and core page tone here.
   This file is shared by the homepage and trust pages.
*/

:root {
  --bl-bg: #eff3ec;
  --bl-header: #0d2618;
  --bl-header-soft: #12351f;
  --bl-text: #101827;
  --bl-muted: #667085;
  --bl-white: #ffffff;
  --bl-brand: #74c69d;
  --bl-brand-light: #b7e4c7;
  --bl-brand-dark: #0d2618;
  --bl-border-dark: rgba(255, 255, 255, 0.12);
  --bl-link-light: rgba(255, 255, 255, 0.74);
  --bl-link-light-hover: #ffffff;
}

/* ── Shared header ─────────────────────────────────────────── */

.site-header {
  background: var(--bl-header);
  color: var(--bl-white);
  border-bottom: 1px solid var(--bl-border-dark);
  box-shadow: none;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo-link,
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  color: var(--bl-white);
  text-decoration: none;
}

.logo-mark {
  display: none;
}

.logo-text,
.brand-word {
  font-family: 'Sora', Inter, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bl-white);
}

.logo-text span,
.brand-word span {
  color: inherit;
}

.logo-link:hover .logo-text,
.logo-link:hover .brand-word,
.brand-logo:hover .brand-word {
  color: var(--bl-brand-light);
}

.header-search {
  flex: 1;
  max-width: 520px;
  position: relative;
}

.header-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: var(--bl-white);
  box-shadow: none;
}

.header-search input:hover,
.header-search input:focus {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.3);
}

.header-search input::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.header-search .search-icon {
  color: rgba(255, 255, 255, 0.5);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btn-post-deal {
  background: var(--bl-brand);
  color: var(--bl-brand-dark);
  border-radius: 7px;
  box-shadow: none;
  font-weight: 800;
}

.btn-post-deal:hover {
  background: var(--bl-brand-light);
  transform: none;
}

.header-user-btn {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: transparent;
  color: var(--bl-white);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.header-user-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Trust page nav in the shared header */

.header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
}

.header-nav a {
  color: var(--bl-link-light);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.header-nav a:hover {
  color: var(--bl-link-light-hover);
}

/* ── Shared footer ─────────────────────────────────────────── */

.site-footer {
  margin-top: 28px;
  background: var(--bl-header);
  color: var(--bl-white);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand strong {
  font-family: 'Sora', Inter, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bl-white);
}

.footer-brand span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 0;
}

.footer-links a {
  color: var(--bl-link-light);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--bl-link-light-hover);
}

@media (max-width: 700px) {
  .header-inner {
    padding: 14px 16px;
    gap: 12px;
  }

  .header-nav {
    width: 100%;
    margin-left: 0;
    gap: 10px 14px;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 16px;
  }
}

@media (max-width: 600px) {

  .logo-text,
  .brand-word {
    font-size: 18px;
  }

  .header-search input {
    font-size: 16px;
  }
}