/* ============================================================
   Site-wide responsive base — applied on EVERY page.
   Goal: full adaptation to user screen size, no horizontal
   scroll on mobile, comfortable reading on every device.
   Loaded as a stylesheet (not deferred) so it applies at first paint.
   ============================================================ */

/* ----- 1. Hard guard: never allow horizontal overflow ----- */
html {
  overflow-x: hidden !important;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  margin: 0;
  position: relative;
}

/* Box-sizing everywhere — prevents padding from pushing widths */
*, *::before, *::after { box-sizing: border-box; }

/* Anything Tailwind-rendered with a screen-width class shouldn't exceed viewport */
[class*="w-screen"] { max-width: 100vw !important; }
[class*="min-w-"]:not([class*="min-w-0"]) { min-width: 0 !important; }

/* ----- 2. Media never breaks layout ----- */
img, svg, video, iframe, canvas, embed, object, picture {
  max-width: 100%;
  height: auto;
}
iframe { width: 100%; }

/* ----- 3. Long unbreakable strings (URLs, emails, Hebrew) ----- */
p, li, dd, dt, blockquote, h1, h2, h3, h4, h5, h6, a, span, strong, em {
  overflow-wrap: anywhere;
  word-break: normal;
}
pre, code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ----- 4. Table-like content scrolls within itself instead of stretching the page ----- */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- 5. Flex/grid rows must be allowed to wrap on small screens ----- */
@media (max-width: 640px) {
  .flex:not(.flex-col):not(.flex-nowrap) { flex-wrap: wrap; }
  .grid { grid-auto-flow: row; }

  /* Side gutters everywhere */
  main, header, footer, section, article, nav { padding-left: 1rem; padding-right: 1rem; }

  /* Typography scale-down on phones */
  h1, .text-5xl, .text-6xl { font-size: clamp(1.6rem, 6vw, 2.25rem) !important; line-height: 1.2 !important; }
  h2, .text-4xl { font-size: clamp(1.35rem, 5.2vw, 1.85rem) !important; line-height: 1.25 !important; }
  h3, .text-3xl { font-size: clamp(1.15rem, 4.6vw, 1.5rem) !important; line-height: 1.3 !important; }

  /* Big horizontal padding -> trim a bit */
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Buttons that sit in a row should stack and span available width */
  .flex.gap-4 > a, .flex.gap-4 > button,
  .flex.gap-3 > a, .flex.gap-3 > button { flex: 1 1 100%; min-width: 0; }
  /* …but NOT inside the top nav — links there must stay on one row */
  nav .flex.gap-4 > a, nav .flex.gap-4 > button,
  nav .flex.gap-3 > a, nav .flex.gap-3 > button {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* ----- 6. Top nav: never overflow on small screens ----- */
nav { width: 100%; }
nav > * { min-width: 0; }
nav .max-w-5xl, nav .max-w-6xl { width: 100%; }

/* ----- 7. Containers should respect viewport ----- */
.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl,
.max-w-2xl, .max-w-xl, .max-w-lg {
  max-width: min(var(--lipker-mw, 100%), 100vw);
}

/* Cards/wrappers with shadow that have padding — protect from edge clipping */
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { max-width: 100%; }

/* ----- 8. Fixed bottom bars (cookies, mobile CTAs) shouldn't push width ----- */
.fixed.bottom-0.left-0.right-0 { left: 0 !important; right: 0 !important; max-width: 100vw; }

/* ----- 9. Forms feel native on mobile ----- */
input, select, textarea, button {
  max-width: 100%;
  font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
}
form { max-width: 100%; }

/* ----- 10. Article body padding ----- */
@media (max-width: 640px) {
  article { padding: 1.25rem !important; }
  article .p-8, article .p-10, article .p-12 { padding: 1.25rem !important; }
  .rounded-2xl { border-radius: 1rem; }
}

/* ----- 11. Hero headers shouldn't be cramped on mobile ----- */
@media (max-width: 640px) {
  header.bg-gradient-to-br, header.bg-blue-900, header[class*="bg-gradient"] {
    padding: 2.5rem 1rem !important;
  }
}

/* ----- 12. Prose blocks shouldn't bust out of the card ----- */
.prose { max-width: 100% !important; }

/* ----- 13. CTAs in stacked rows — full width on phones ----- */
@media (max-width: 640px) {
  a.inline-flex, button.inline-flex { width: auto; max-width: 100%; }
  .flex.flex-col.sm\:flex-row > a,
  .flex.flex-col.sm\:flex-row > button { width: 100%; }
}

/* ----- 14. Top-nav links styled as subtle buttons (mobile + desktop) ----- */
nav.bg-blue-900 > div {
  flex-wrap: wrap;
}
/* The link group inside the nav: keep דף הבית/אודות/מאמרים on one row */
nav.bg-blue-900 > div > div.flex,
nav > div > div.flex {
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  align-items: center;
  justify-content: center;
}
/* Center the whole nav (logo on top, buttons centered below on mobile) */
@media (max-width: 640px) {
  nav.bg-blue-900 > div,
  nav > div.max-w-5xl,
  nav > div.max-w-6xl {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    gap: 0.6rem !important;
  }
  nav.bg-blue-900 a.font-bold {
    text-align: center;
    width: 100%;
  }
}
nav.bg-blue-900 a:not([class*="bg-green"]):not([class*="bg-yellow"]) {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9999px;
  background: rgba(255,255,255,0.04);
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
nav.bg-blue-900 a:not([class*="bg-green"]):not([class*="bg-yellow"]):hover,
nav.bg-blue-900 a:not([class*="bg-green"]):not([class*="bg-yellow"]):focus-visible {
  background: rgba(234,179,8,0.18);
  border-color: rgba(234,179,8,0.55);
  color: #fde68a;
}
/* Active page (when marked with text-yellow-300) gets a soft solid look */
nav.bg-blue-900 a.text-yellow-300 {
  background: rgba(234,179,8,0.18);
  border-color: rgba(234,179,8,0.55);
  color: #fde68a !important;
}
/* Logo / brand: keep it as plain text, not pill */
nav.bg-blue-900 a.font-bold {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1rem;
}
@media (max-width: 480px) {
  nav.bg-blue-900 { padding: 0.6rem 0.5rem !important; }
  nav.bg-blue-900 a:not([class*="bg-green"]):not([class*="bg-yellow"]) {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
  }
  nav.bg-blue-900 a.font-bold { font-size: 0.95rem; }
  /* Soften the WhatsApp pill in the nav so it matches the others */
  nav.bg-blue-900 a[class*="bg-green"] {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.78rem !important;
  }
}

/* ----- 15. The two FABs (a11y + WhatsApp) belong inside viewport ----- */
.lipker-a11y-fab, .lipker-wa-fab {
  max-width: none;
}