/* =====================================================================
   BABAKRI — BASE STYLES
   Reset, page defaults and the small shared building blocks (container,
   buttons, kicker, badge, reveal animation) used by every page/module.
   Reads all values from theme/tokens.css.
   ===================================================================== */

/* ---- 1. Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bk-header-h) + 12px); }
body, h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
ol[class], ul[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; } /* "hidden" always wins over component display styles */

/* ---- 2. Page defaults ---------------------------------------------- */
body {
  background: var(--bk-sugar);
  color: var(--bk-ink);
  font-family: var(--bk-font-body);
  font-size: var(--bk-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="ur"] body { line-height: 2; }

h1, h2, h3, h4 {
  font-family: var(--bk-font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
html[lang="ur"] :is(h1, h2, h3, h4) { line-height: 1.7; letter-spacing: 0; }

p { text-wrap: pretty; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--bk-henna); outline-offset: 3px; border-radius: 4px; }

/* ---- 3. Layout container ------------------------------------------- */
.bk-container {
  width: 100%;
  max-width: calc(var(--bk-max) + var(--bk-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--bk-gutter);
}

/* ---- 4. Section shell (vertical rhythm + alternate background) ----- */
.bk-section { position: relative; padding-block: var(--bk-section); }
.bk-section--milk { background: var(--bk-milk); }

/* ---- 5. Kicker: small label above a heading ------------------------ */
.bk-kicker {
  display: inline-flex; align-items: center; gap: var(--bk-space-2);
  font-family: var(--bk-font-body);
  font-size: var(--bk-step--1);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bk-tan);
}
.bk-kicker::before { /* a single fleck as the bullet */
  content: ""; width: 7px; height: 5px; border-radius: 50%;
  background: var(--bk-fleck); transform: rotate(-20deg);
}
html[lang="ur"] .bk-kicker { letter-spacing: 0; text-transform: none; font-size: var(--bk-step-0); }

/* ---- 5b. Section heading block: kicker + title + lead ------------- */
.bk-section-head { display: grid; gap: var(--bk-space-3); max-width: 44rem; margin-bottom: var(--bk-space-5); }
.bk-section-head h2 { font-size: var(--bk-step-3); }
.bk-section-head p { color: var(--bk-ink-soft); font-size: var(--bk-step-1); line-height: 1.55; }
html[lang="ur"] .bk-section-head p { line-height: 2; }
.bk-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---- 6. Buttons ---------------------------------------------------- */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bk-space-2);
  min-height: 46px; padding: 0.7rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--bk-radius-pill);
  font-family: var(--bk-font-body); font-size: var(--bk-step-0); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--bk-ease);
}
.bk-btn:active { transform: translateY(1px); }
.bk-btn--primary { background: var(--bk-henna); color: var(--bk-milk); }
.bk-btn--primary:hover { background: var(--bk-henna-deep); }
.bk-btn--outline { border-color: var(--bk-ink); color: var(--bk-ink); background: transparent; }
.bk-btn--outline:hover { background: var(--bk-ink); color: var(--bk-milk); }
.bk-btn--ghost { color: var(--bk-ink); background: transparent; }
.bk-btn--ghost:hover { background: var(--bk-cream); }
.bk-btn--sm { min-height: 38px; padding: 0.45rem 1rem; font-size: var(--bk-step--1); }

/* ---- 7. Badge: small pill for offer type, status, etc. ------------- */
.bk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.2rem 0.65rem; border-radius: var(--bk-radius-pill);
  background: var(--bk-cream); color: var(--bk-ink-soft);
  font-size: var(--bk-step--1); font-weight: 600; line-height: 1.5;
}
.bk-badge--open    { background: #e8ecdf; color: var(--bk-olive); }
.bk-badge--private { background: #efe3dc; color: var(--bk-henna-deep); }
.bk-badge--fixed   { background: var(--bk-cream); color: var(--bk-fleck-brown); }

/* ---- 8. Scroll reveal (driven by main.js; off for reduced motion) -- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--bk-dur) var(--bk-ease), transform var(--bk-dur) var(--bk-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---- 9. Utility: hide visually, keep for screen readers ------------ */
.bk-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}