/* ===========================================================
   Tel Aviv Gallery Beds — shared stylesheet
   RTL / Hebrew. No build step, no dependencies.
   =========================================================== */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f4f0;
  --ink: #1c1a17;
  --ink-soft: #5c574f;
  --line: #e6e1d8;
  --accent: #b07a3c;      /* warm wood tone */
  --accent-dark: #8a5e2c;
  --wa: #25d366;          /* whatsapp green */
  --radius: 14px;
  --maxw: 1120px;
  --shadow: 0 6px 24px rgba(28, 26, 23, 0.08);
  --font: "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  direction: rtl;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.2rem; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

.section { padding: 64px 0; }
.section--soft { background: var(--bg-soft); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; font-weight: 600;
  font-size: 1rem; cursor: pointer; border: 2px solid transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #1da851; }

/* WhatsApp logo icon (inline, white glyph) */
.wa-ico {
  display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" d="M16.01 3.2C9 3.2 3.3 8.9 3.3 15.92c0 2.46.7 4.85 2.02 6.92L3.2 28.8l6.13-2.07a12.7 12.7 0 0 0 6.68 1.9h.01c7.01 0 12.71-5.7 12.71-12.72 0-3.4-1.32-6.6-3.72-9A12.63 12.63 0 0 0 16.01 3.2zm0 23.2h-.01a10.5 10.5 0 0 1-5.36-1.47l-.38-.23-3.64 1.23 1.25-3.55-.25-.4a10.5 10.5 0 0 1-1.6-5.58c0-5.8 4.72-10.52 10.53-10.52 2.81 0 5.45 1.1 7.44 3.08a10.46 10.46 0 0 1 3.08 7.45c0 5.8-4.72 10.52-10.5 10.52zm5.77-7.88c-.32-.16-1.87-.92-2.16-1.03-.29-.1-.5-.16-.71.16-.21.32-.82 1.03-1 1.24-.18.21-.37.24-.69.08-.32-.16-1.34-.49-2.55-1.57a9.5 9.5 0 0 1-1.76-2.19c-.18-.32-.02-.49.14-.65.14-.14.32-.37.48-.55.16-.18.21-.32.32-.53.11-.21.05-.4-.03-.55-.08-.16-.71-1.72-.98-2.35-.26-.62-.52-.53-.71-.54l-.6-.01c-.21 0-.55.08-.84.4-.29.32-1.1 1.08-1.1 2.63 0 1.55 1.13 3.05 1.29 3.26.16.21 2.23 3.4 5.4 4.77.75.32 1.34.52 1.8.66.76.24 1.44.21 1.98.13.6-.09 1.87-.76 2.13-1.5.26-.74.26-1.37.18-1.5-.08-.13-.29-.21-.61-.37z"/></svg>');
}
.btn--wa .wa-ico { filter: none; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.center .btn-row { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; max-width: var(--maxw); margin-inline: auto;
}
.brand { font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -.5px; }
.brand span { color: var(--accent); }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: var(--ink); font-weight: 500; }
.nav-links a:hover { color: var(--accent-dark); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }

@media (max-width: 760px) {
  /* dropdown anchors to .site-header (position:sticky), pinned full-width */
  .nav-toggle { display: block; padding: 6px 10px; line-height: 1; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    box-sizing: border-box; flex-direction: column;
    align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 16px 14px; gap: 4px; display: none;
    box-shadow: 0 10px 24px rgba(28,26,23,.10);
  }
  .nav-links.open { display: flex; }
  /* bigger tap targets: each link is a full-width row */
  .nav-links a { padding: 12px 8px; border-radius: 8px; }
  .nav-links a:active { background: var(--bg-soft); }
  .nav-links .btn--primary { margin-top: 6px; text-align: center; justify-content: center; }
}

/* ---------- hero ---------- */
.hero {
  background:
    linear-gradient(180deg, rgba(28,26,23,.55), rgba(28,26,23,.55)),
    url("../images/hero.jpg") center/cover no-repeat, var(--accent-dark);
  color: #fff; padding: 96px 0;
}
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255,255,255,.92); }
/* homepage hero uses the hanging-bed photo */
.hero--home {
  background:
    linear-gradient(180deg, rgba(28,26,23,.55), rgba(28,26,23,.55)),
    url("../images/bed-double-storage.jpg") center 30%/cover no-repeat, var(--accent-dark);
}

/* ---------- grid of cards ---------- */
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(28,26,23,.12); }
.card a { text-decoration: none; color: inherit; }
.card .thumb { aspect-ratio: 4/3; background: var(--bg-soft) center/cover no-repeat; }
.card .body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card .body h3 { margin: 0; }
.card .price { color: var(--accent-dark); font-weight: 700; }
.card .meta { font-size: .9rem; color: var(--ink-soft); }

/* ---------- feature rows ---------- */
.features { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feature { text-align: center; }
.feature .ico {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px;
  background: var(--bg-soft); display: grid; place-items: center; font-size: 1.6rem;
}

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700;
}

/* ---------- detail page ---------- */
.detail { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; }
.detail .gallery img { border-radius: var(--radius); box-shadow: var(--shadow); }
.spec { list-style: none; padding: 0; margin: 18px 0; }
.spec li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec li span:first-child { color: var(--ink-soft); }
.spec li span:last-child { font-weight: 600; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; } }

/* ---------- form ---------- */
.form { display: grid; gap: 16px; max-width: 560px; }
.form label { font-weight: 600; font-size: .95rem; display: grid; gap: 6px; }
.form input, .form textarea {
  font-family: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.form textarea { min-height: 120px; resize: vertical; }

/* ---------- article / blog ---------- */
.article { max-width: 720px; margin-inline: auto; }
.article h1 { margin-bottom: .2em; }
.article .byline { color: var(--ink-soft); font-size: .95rem; margin-bottom: 28px; }
.article p, .article ul { margin-bottom: 1.1em; }
.article img { border-radius: var(--radius); margin: 24px 0; }

/* ---------- floating whatsapp ---------- */
.wa-float {
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  font-size: 1.7rem; transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.07); text-decoration: none; }
.wa-float .wa-ico { width: 60%; height: 60%; vertical-align: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #cfc8bd; padding: 48px 0 28px; margin-top: 40px; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-grid h4 { color: #fff; margin: 0 0 12px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; font-size: .9rem; }

/* ===========================================================
   Mobile polish
   =========================================================== */
@media (max-width: 760px) {
  body { font-size: 16px; }

  /* tighter vertical rhythm on phones */
  .section { padding: 44px 0; }
  .container { padding-inline: 16px; }

  /* hero: shorter and calmer on small screens */
  .hero { padding: 56px 0; }
  .hero .lead { font-size: 1.05rem; }

  .lead { font-size: 1.05rem; }

  /* buttons: comfortable thumb size; stack full-width in rows */
  .btn { padding: 14px 22px; }
  .btn-row { gap: 10px; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }

  /* cards: show more of the (portrait) bed photos on mobile */
  .grid { gap: 18px; }
  .card .thumb { aspect-ratio: 3 / 3.4; }

  /* detail page spacing */
  .detail { gap: 24px; }

  /* form fills width */
  .form { max-width: none; }

  /* floating WhatsApp: a touch bigger + safe-area aware */
  .wa-float {
    width: 56px; height: 56px; font-size: 1.6rem;
    inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 16px;
  }

  /* footer: a little breathing room */
  .site-footer { padding: 36px 0 24px; }
}

/* very small phones */
@media (max-width: 380px) {
  .brand { font-size: 1.1rem; }
  .hero { padding: 44px 0; }
  .card .thumb { aspect-ratio: 3 / 3.2; }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}