/* =========================================================================
 * sb-base.css — reset, layout primitives, header/nav/footer, buttons.
 * Scoped under `.sb-*`; safe to load alongside Elementor without collisions.
 * Mobile-first (NFR-001). WCAG 2.2 AA focus visibility throughout.
 * ========================================================================= */

/* ---- Reset-ish (light touch; Hello Elementor ships a minimal reset) ------ */
.sb-app *,
.sb-header *,
.sb-footer * { box-sizing: border-box; }

.sb-main { display: block; }

body.sb-app {
  color: var(--sb-text);
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-base);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- Accessibility utilities ---- */
.sb-screen-reader,
.sb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sb-skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 1000;
  background: var(--sb-primary);
  color: #fff;
  padding: var(--sb-sp-3) var(--sb-sp-4);
  border-radius: 0 0 var(--sb-radius) 0;
  text-decoration: none;
}
.sb-skip-link:focus { left: 0; }

/* Global visible focus (WCAG 2.2 — focus not obscured, clearly visible) */
.sb-app a:focus-visible,
.sb-app button:focus-visible,
.sb-app input:focus-visible,
.sb-app select:focus-visible,
.sb-app textarea:focus-visible,
.sb-app [tabindex]:focus-visible,
.sb-header a:focus-visible,
.sb-header button:focus-visible,
.sb-footer a:focus-visible {
  outline: none;
  box-shadow: var(--sb-focus);
  border-radius: var(--sb-radius-sm);
}

/* ---- Layout ---- */
.sb-container {
  width: 100%;
  max-width: var(--sb-container);
  margin-inline: auto;
  padding-inline: var(--sb-sp-4);
}
.sb-container--narrow { max-width: var(--sb-container-narrow); }

.sb-section { padding-block: var(--sb-sp-7); }
.sb-section--tight { padding-block: var(--sb-sp-6); }
.sb-section--alt { background: var(--sb-bg-alt); }

/* ---- Typography ---- */
.sb-app h1, .sb-app h2, .sb-app h3, .sb-app h4 {
  font-family: var(--sb-font-head);
  color: var(--sb-ink-900);
  line-height: var(--sb-lh-tight);
  margin: 0 0 var(--sb-sp-3);
  font-weight: var(--sb-fw-bold);
}
.sb-app h1 { font-size: var(--sb-fs-2xl); }
.sb-app h2 { font-size: var(--sb-fs-xl); }
.sb-app h3 { font-size: var(--sb-fs-lg); }
.sb-app p { margin: 0 0 var(--sb-sp-4); }
.sb-app a { color: var(--sb-green-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sb-app a:hover { color: var(--sb-green-800); }

.sb-lead { font-size: var(--sb-fs-md); color: var(--sb-text-muted); }
.sb-eyebrow {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: var(--sb-fs-xs); font-weight: var(--sb-fw-semibold);
  color: var(--sb-green-600);
}

/* ---- Icons ---- */
.sb-icon { display: inline-block; vertical-align: middle; flex: none; }

/* =========================================================================
 * Header + navigation
 * ========================================================================= */
.sb-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--sb-border);
}
.sb-header__inner {
  display: flex; align-items: center; gap: var(--sb-sp-4);
  min-height: var(--sb-header-h);
}

.sb-brand {
  display: inline-flex; align-items: center; gap: var(--sb-sp-2);
  color: var(--sb-green-700); text-decoration: none; font-weight: var(--sb-fw-bold);
}
.sb-brand__name { font-family: var(--sb-font-head); font-size: var(--sb-fs-md); color: var(--sb-ink-900); }
.sb-logo { color: var(--sb-green-700); }

.sb-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sb-sp-5);
}
.sb-nav__list {
  display: flex; align-items: center; gap: var(--sb-sp-5);
  list-style: none; margin: 0; padding: 0;
}
.sb-nav__link {
  color: var(--sb-ink-700); text-decoration: none; font-weight: var(--sb-fw-medium);
  padding-block: var(--sb-sp-2);
  border-bottom: 2px solid transparent;
}
.sb-nav__link:hover { color: var(--sb-green-700); border-bottom-color: var(--sb-green-400); }
.sb-nav__actions { display: flex; align-items: center; gap: var(--sb-sp-3); }

/* Nav toggle (mobile) */
.sb-nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm);
  background: #fff; cursor: pointer;
  position: relative;
}
.sb-nav-toggle__bar,
.sb-nav-toggle__bar::before,
.sb-nav-toggle__bar::after {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; background: var(--sb-ink-700);
  transform: translate(-50%, -50%);
  transition: var(--sb-transition);
}
.sb-nav-toggle__bar::before { content: ""; transform: translate(-50%, -8px); }
.sb-nav-toggle__bar::after  { content: ""; transform: translate(-50%, 6px); }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar { background: transparent; }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar::before { transform: translate(-50%, -50%) rotate(45deg); }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Language switcher */
.sb-langswitch { display: inline-flex; gap: 2px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-pill); padding: 2px; }
.sb-langswitch__item {
  font-size: var(--sb-fs-xs); font-weight: var(--sb-fw-semibold);
  padding: 3px 8px; border-radius: var(--sb-radius-pill);
  color: var(--sb-text-muted); text-decoration: none; line-height: 1.4;
}
.sb-langswitch__item.is-current { background: var(--sb-green-700); color: #fff; }

/* =========================================================================
 * Buttons
 * ========================================================================= */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sb-sp-2);
  font-family: inherit; font-size: var(--sb-fs-base); font-weight: var(--sb-fw-semibold);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: var(--sb-sp-3) var(--sb-sp-5);
  border-radius: var(--sb-radius); border: 1px solid transparent;
  min-height: 44px; /* touch target (NFR-001) */
  transition: background var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), transform var(--sb-transition);
}
.sb-btn:active { transform: translateY(1px); }
.sb-btn--primary { background: var(--sb-primary); color: var(--sb-primary-contrast); }
.sb-btn--primary:hover { background: var(--sb-primary-hover); color: #fff; }
.sb-btn--secondary { background: var(--sb-amber-500); color: #241a06; }
.sb-btn--secondary:hover { background: var(--sb-amber-400); }
.sb-btn--ghost { background: transparent; color: var(--sb-green-700); border-color: var(--sb-border); }
.sb-btn--ghost:hover { background: var(--sb-green-050); border-color: var(--sb-green-400); }
.sb-btn--block { width: 100%; }
.sb-btn--lg { font-size: var(--sb-fs-md); padding: var(--sb-sp-4) var(--sb-sp-6); }
.sb-btn[disabled], .sb-btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }
.sb-nav__search .sb-icon { margin-right: 2px; }

/* =========================================================================
 * Footer
 * ========================================================================= */
.sb-footer { background: var(--sb-green-900); color: #d9e4dd; margin-top: var(--sb-sp-8); }
.sb-footer__inner {
  display: grid; gap: var(--sb-sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--sb-sp-7);
}
.sb-brand--footer { color: #fff; }
.sb-brand--footer .sb-brand__name { color: #fff; }
.sb-brand--footer .sb-logo { color: var(--sb-green-400); }
.sb-footer__tagline { color: #9fb3a8; margin-top: var(--sb-sp-2); font-size: var(--sb-fs-sm); }
.sb-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sb-sp-2); }
.sb-footer__link { color: #cdd9d2; text-decoration: none; }
.sb-footer__link:hover { color: #fff; text-decoration: underline; }
.sb-footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.sb-footer__bar-inner { padding-block: var(--sb-sp-4); }
.sb-copyright { margin: 0; font-size: var(--sb-fs-sm); color: #9fb3a8; }

/* =========================================================================
 * Responsive: nav collapses under 900px
 * ========================================================================= */
@media (max-width: 900px) {
  .sb-nav-toggle { display: block; }
  .sb-nav {
    position: fixed; inset: var(--sb-header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: var(--sb-sp-3);
    background: #fff; border-bottom: 1px solid var(--sb-border);
    padding: var(--sb-sp-4); margin-left: 0;
    box-shadow: var(--sb-shadow);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--sb-transition), transform var(--sb-transition), visibility var(--sb-transition);
    max-height: calc(100vh - var(--sb-header-h)); overflow-y: auto;
  }
  .sb-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .sb-nav__list { flex-direction: column; align-items: stretch; gap: var(--sb-sp-1); }
  .sb-nav__link { padding: var(--sb-sp-3) 0; border-bottom: 1px solid var(--sb-surface-3); }
  .sb-nav__actions { flex-wrap: wrap; }
  .sb-nav__actions .sb-btn { flex: 1 1 auto; }
}

@media (min-width: 720px) {
  .sb-footer__inner { grid-template-columns: 1.5fr 1fr; }
}
@media (min-width: 640px) {
  .sb-app h1 { font-size: var(--sb-fs-3xl); }
}