/* ערכת העיצוב: גופנים, צבעים מהתמונות ומהלוגו, כפתורים והפס העליון.
   הצבעים של השמיים (--sky-*) מתעדכנים מתוך sky.js לפי הגלילה. */

@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("../fonts/frank-ruhl-libre.woff") format("woff");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant.woff") format("woff");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* צבעי המותג */
  --cream: #f6f0e6;      /* רקע הלוגו וקירות החדרים */
  --sand: #e8dfcf;       /* אבן טרוורטין */
  --oak: #b88a57;        /* עץ אלון */
  --gold: #c9a45f;       /* זהב הלוגו */
  --gold-text: #7a5c28;  /* זהב כהה לטקסט על רקע בהיר */
  --sage: #8fb5a5;       /* ארונות המטבחון */
  --sage-deep: #3f6657;
  --night: #0e1d36;      /* שמי הלילה */
  --night-2: #1a2f52;
  --stone: #efe5d3;      /* טרוורטין בהיר */
  --gold-light: #dcbc7c; /* זהב על רקע כהה */
  --ink: #1d2127;
  --ink-soft: #4a4f57;

  /* המנוע (scrollcraft) קורא את אלה */
  --sc-canvas: var(--cream);
  --sc-surface: #fffaf2;
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--night);
  --sc-accent-ink: var(--cream);
  --sc-font-display: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --sc-font-text: "Assistant", "Segoe UI", Arial, sans-serif;
  --sc-shadow-color: 30 30% 20%;

  /* השמיים. sky.js מעדכן את אלה לפי הגלילה */
  --sky-top: #a9cde6;
  --sky-bot: #f4efe4;
  --ground: #f6f0e6;
  --bar-bg: #f6f0e6;
  --bar-ink: #1d2127;
  --sun-x: 4%;
  --sun-lift: 0px;
  --sun-o: 1;
  --moon-o: 0;

  --bar-h: 3.75rem;
  --radius: 14px;
  --btn-radius: 4px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 0.5rem);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--oak) var(--cream);
  accent-color: var(--gold-text);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ground);
  overflow-x: clip;
  caret-color: var(--gold-text);
}
::selection { background: rgb(201 164 95 / 0.38); color: var(--night); }
.night ::selection { background: rgb(201 164 95 / 0.55); color: #fff8ec; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
.display { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 4rem); letter-spacing: -0.01em; }
.lead { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); line-height: 1.65; max-width: 38ch; }

.skip-link {
  position: absolute; top: -4rem; inset-inline-start: 1rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: var(--btn-radius); background: var(--night); color: var(--cream);
}
.skip-link:focus { top: 1rem; }
:where(a, button):focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: var(--btn-radius); }
.night :where(a, button):focus-visible, .golden :where(a, button):focus-visible { outline-color: var(--gold); }

/* ----------------------------------------------------------- כפתורים: זהב הלוגו, כמו באתר הקודם */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.7rem 1.5rem; border-radius: var(--btn-radius);
  font-family: var(--sc-font-text); font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em;
  text-decoration: none; text-align: center; border: 1.5px solid transparent;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary, .btn--gold {
  background: var(--gold); color: var(--night);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 8px 18px -8px rgb(0 0 0 / 0.32);
}
.btn--primary:hover, .btn--gold:hover { background: #d6b373; box-shadow: 0 2px 4px rgb(0 0 0 / 0.14), 0 12px 24px -10px rgb(0 0 0 / 0.36); }
.btn--outline { border-color: var(--night); color: var(--night); }
.btn--outline:hover { background: rgb(14 29 54 / 0.06); }
.night .btn--gold { box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 22px -10px rgb(0 0 0 / 0.6); }
.btn--outline-light { border-color: rgb(246 240 230 / 0.7); color: var(--cream); }
.btn--outline-light:hover { background: rgb(246 240 230 / 0.1); }
.btn--small { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.98rem; }

/* ----------------------------------------------------------- הפס העליון
   קרם כמו האתר. בתחתית הפס יש קו אופק בצבעי השמיים של השעה, והשמש נעה עליו
   מימין לשמאל לאורך היום. בלילה הפס מחשיך והירח עולה. */
.sky-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 0.75rem;
  padding-inline: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-right, 0px)) max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-left, 0px));
  background: var(--bar-bg); color: var(--bar-ink);
  box-shadow: 0 10px 24px -18px rgb(60 40 20 / 0.5);
  transition: background-color 400ms ease, color 400ms ease;
}
.sky-bar__sky {
  position: absolute; inset: auto 0 0 0; height: 3px; pointer-events: none;
  background: linear-gradient(to left, var(--sky-bot), var(--sky-top) 45%, var(--sky-bot));
}
.sky-bar__sun, .sky-bar__moon {
  position: absolute; bottom: 1.5px; inset-inline-start: var(--sun-x);
  width: 0.85rem; height: 0.85rem; margin-bottom: -0.425rem; border-radius: 50%;
}
.sky-bar__sun {
  opacity: var(--sun-o);
  transform: translateY(calc(var(--sun-lift) * -1));
  background: radial-gradient(circle at 40% 40%, #fff7df, #ffd27a 55%, #e9a24a);
  box-shadow: 0 0 0 4px rgb(255 214 140 / 0.28), 0 1px 6px 1px rgb(220 160 80 / 0.45);
}
.sky-bar__moon {
  inset-inline-start: 50%; bottom: 0.9rem; opacity: var(--moon-o);
  box-shadow: inset -0.26rem 0.1rem 0 0 #f3ead8;
}
.sky-bar__mark img { width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: 0 1px 3px rgb(60 40 20 / 0.25); }
.sky-bar__hour { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 0.95rem; white-space: nowrap; }
.sky-bar__time { font-variant-numeric: tabular-nums; font-weight: 700; direction: ltr; }
.sky-bar__label { opacity: 0.8; }
.sky-bar__nav { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); margin-inline-start: auto; }
.sky-bar__nav a { text-decoration: none; font-weight: 600; padding-block: 0.4rem; }
.sky-bar__nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.sky-bar__menu { display: none; }
.sky-bar__cta { flex: none; }
.sky-bar__cta .icon { width: 1.15rem; height: 1.15rem; }

@media (max-width: 860px) {
  .sky-bar__label { display: none; }
  .sky-bar__menu {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-start: auto;
    min-height: 2.5rem; padding: 0.4rem 0.85rem; border-radius: var(--btn-radius);
    font: 600 0.98rem var(--sc-font-text); color: inherit;
    background: transparent; border: 1.5px solid currentColor; cursor: pointer;
  }
  .sky-bar__nav {
    position: absolute; top: calc(100% + 0.5rem); inset-inline: 0.75rem;
    flex-direction: column; gap: 0; padding: 0.5rem;
    background: #fffaf2; color: var(--ink); border-radius: var(--radius);
    box-shadow: 0 4px 8px rgb(60 40 20 / 0.08), 0 18px 40px -8px rgb(60 40 20 / 0.35);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 200ms;
  }
  .sky-bar__nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sky-bar__nav a { padding: 0.85rem 1rem; border-radius: 10px; font-size: 1.1rem; }
  .sky-bar__nav a:hover { background: var(--sand); text-decoration: none; }
}
@media (max-width: 380px) {
  .sky-bar { gap: 0.5rem; }
  .sky-bar__cta { padding-inline: 0.75rem; }
}