/* site.css — shared palette + responsive rules for becfaye.com */
:root {
  --bf-cream: #FFF9F1;
  --bf-sand:  #F4EBDD;
  --bf-brown: #623F32;
  --bf-brown-deep: #4A3326;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bf-cream); color: var(--bf-brown); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, svg { max-width: 100%; }
textarea:focus, input:focus { border-color: var(--bf-terracotta) !important; }
image-slot { border-radius: inherit; }

/* nav: show links on desktop, toggle on mobile */
.bf-nav-toggle { display: flex; }
.bf-nav-desc { display: none; }
@media (min-width: 980px) {
  .bf-nav-links { display: flex !important; }
  .bf-nav-toggle { display: none !important; }
  .bf-nav-desc { display: block; }
}

/* responsive grids */
@media (max-width: 860px) {
  .bf-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bf-hero-grid .bf-hero-tag { left: 12px !important; }
  .bf-split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .bf-mc-band { grid-template-columns: 1fr !important; }
  .bf-pathgrid { grid-template-columns: 1fr !important; }
  .bf-tgrid { grid-template-columns: 1fr !important; }
  .bf-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  .bf-secrets { grid-template-columns: 1fr !important; }
  .bk-hero { grid-template-columns: 1fr !important; gap: 36px !important; }
  .bk-embed { height: 660px !important; }
  .bk-embed iframe { height: 100% !important; }
  .bf-foot-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bf-decor { display: none !important; }
  .bf-two { grid-template-columns: 1fr !important; gap: 32px !important; }
}
/* phones: scale headings, tighten spacing */
@media (max-width: 680px) {
  h1 { font-size: clamp(29px, 8.4vw, 40px) !important; letter-spacing: -0.6px !important; line-height: 1.14 !important; }
  h2 { font-size: clamp(24px, 6.6vw, 32px) !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(19px, 5.2vw, 23px) !important; }
  blockquote { font-size: clamp(20px, 6vw, 28px) !important; }
  /* standard content sections: calmer vertical rhythm + edge padding */
  .bf-section { padding-top: 62px !important; padding-bottom: 62px !important; padding-left: 20px !important; padding-right: 20px !important; }
  /* interior-page hero + custom bands (content wrapper is the last child) */
  header > div:last-child { padding-top: 52px !important; padding-bottom: 56px !important; }
  .bk-hero h1 { line-height: 1.5 !important; }
  .bk-embed { height: 620px !important; }
  .bk-embed iframe { height: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── mobile hardening ─────────────────────────────────────────────── */
/* never let a wide child create a sideways scroll */
html { overflow-x: hidden; max-width: 100%; }
img { height: auto; }
/* long unbroken strings (emails, URLs) must wrap, not push the page wide */
p, h1, h2, h3, li, a, blockquote { overflow-wrap: break-word; }
/* iOS zooms the viewport when a focused input is under 16px — never let it */
input, textarea, select { font-size: 16px; max-width: 100%; }
/* embeds (Calendly) stay inside the viewport */
iframe { max-width: 100%; border: 0; }

@media (max-width: 680px) {
  /* iOS refuses to stay put below 16px — override the inline type on fields */
  input, textarea, select { font-size: 16px !important; }
  /* tap targets clear the 44px minimum (buttons + nav/footer links only —
     inline links inside prose stay in the text flow) */
  button, [role="button"], input[type="submit"] { min-height: 48px; }
  .bf-nav-links a, .bf-foot-grid a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* no-JS / crawler fallback — real content for anything that doesn't run React */
.bf-noscript { max-width: 680px; margin: 0 auto; padding: 64px 24px; font-family: var(--font-body), system-ui, sans-serif; color: var(--bf-brown); }
.bf-noscript h1 { font-family: var(--font-display), Georgia, serif; font-size: 34px; line-height: 1.18; color: var(--bf-brown-deep); margin: 0 0 18px; }
.bf-noscript p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.bf-noscript nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 24px 0; }
.bf-noscript a { color: var(--bf-brown-deep); text-decoration: underline; text-underline-offset: 3px; }
.bf-noscript a:hover { color: var(--bf-terracotta); }