/* WordPress-only additions for the six pages. The approved design stylesheet (main.css) is not modified. */


/* ---------- Header: quick-contact icons (phone, WhatsApp, Facebook, Instagram) ----------
   Icon-only links with accessible names. Below 1600px they sit in their own always-visible row
   under the brand, so the navigation keeps its approved size; from 1600px they join the header row.
   (1600px since the menu label "קולקציה חדשה – ״צירי זמן״", 2026-10-14; it was 1366px with "מה חדש".)
   The brand never wraps: the menu moves below it first. */
.site-header__inner { flex-wrap: wrap; }
@media (min-width: 1024px) { .site-header .brand { flex: none; white-space: nowrap; } }
.site-header__social {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px;
  flex: 0 0 100%; order: 3; margin: 0; padding: 4px 0; list-style: none;
  border-top: 1px solid var(--accent-line);
}
.site-header__social a {
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--text-on-bronze); border: 1px solid transparent; transition: border-color 0.2s, background-color 0.2s;
}
.site-header__social a:hover { border-color: var(--text-on-bronze); background: var(--bronze-hover); }
.site-header__social svg { width: 26px; height: 26px; }
/* Seven menu items (with "בניית אהילים וגופי תאורה", 14.10.2026): on narrow desktops the row is set a little
   tighter so it fits the width without wrapping. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav ul { gap: 14px; }
  .site-nav a { font-size: 1.0625rem; }
}
@media (min-width: 1600px) {
  .site-header__inner { flex-wrap: nowrap; }
  .site-nav { margin-inline-start: auto; }
  .site-header__social {
    flex: 0 0 auto; order: 0; padding: 0; border-top: 0;
    padding-inline-start: 16px; border-inline-start: 1px solid var(--accent-line);
  }
}

/* ---------- Portfolio: "פרויקטים נבחרים" cards ---------- */
.selected-projects { background: var(--surface); }
/* Rows are centred, so five cards sit as three and then two in the middle (two, two and one on tablets). */
.project-cards {
  --cols: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 3vw, 44px) var(--gap);
}
@media (min-width: 600px) { .project-cards { --cols: 2; } }
@media (min-width: 1100px) { .project-cards { --cols: 3; } }
.project-card {
  display: flex; flex-direction: column; min-width: 0;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.project-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__title { margin: 18px 0 6px; }
.project-card__link {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 600; color: var(--bronze-hover);
  text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.project-card__link:hover { color: var(--text); text-decoration-color: var(--bronze); }

/* ---------- Client project page ---------- */
.project-page { padding-block: 32px var(--section); }
@media (min-width: 900px) { .project-page { padding-top: 56px; } }
.project-page__head { max-width: 60em; margin-bottom: clamp(28px, 4vw, 48px); }
.project-page__head h1 { margin-bottom: 0.5em; }
.credits { display: flex; flex-wrap: wrap; gap: 0 clamp(28px, 4vw, 56px); margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.credits > div { padding-block: 6px; }
.credits dt { font-size: 1rem; color: var(--muted); }
.credits dd { margin: 0; font-weight: 600; }
.credits__note { margin: 14px 0 0; font-size: 1rem; color: var(--muted); }

/* Gallery: the photographs keep their own proportions and are never enlarged beyond their real size. */
.project-gallery { columns: 1; column-gap: var(--gap); }
@media (min-width: 760px) { .project-gallery { columns: 2; } }
.project-gallery--1 { columns: 1; max-width: 1100px; }
@media (min-width: 1100px) { .project-gallery--many { columns: 3; } }
.project-cards__more { margin: clamp(28px, 3vw, 44px) 0 0; text-align: center; }

/* ---------- Thank-you page ---------- */
.thank-you { padding-block: clamp(56px, 10vw, 140px); text-align: center; }
.thank-you__inner { max-width: 760px; }
.thank-you h1::after { content: ""; display: block; width: 80px; height: 2px; margin: 24px auto 28px; background: var(--accent-line); }
.thank-you .lead { margin-inline: auto; margin-bottom: 2em; }
.project-gallery__item { margin: 0 0 var(--gap); break-inside: avoid; background: var(--surface); }
.project-gallery__item img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.project-page__back { margin: clamp(28px, 4vw, 48px) 0 0; }
.project-page__desc { margin: 0 0 1.2em; max-width: 40em; }
.project-gallery__zoom { display: block; cursor: zoom-in; }

/* Enlarged view (native <dialog>): the photograph is shown whole, never cropped or tinted. */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: clamp(12px, 3vw, 40px);
  border: 0; background: rgba(48, 37, 27, 0.94);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(48, 37, 27, 0.6); }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 2 * clamp(12px, 3vw, 40px) - 64px); width: auto; height: auto; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 12px; inset-inline-end: 12px; min-height: 48px; padding: 8px 22px;
  background: var(--surface); color: var(--text); border: 1px solid var(--accent-line); border-radius: 0;
  font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer;
}
.lightbox__close:hover { border-color: var(--bronze); }

/* ---------- Instagram link at the end of the portfolio ---------- */
.portfolio-more { padding-block: clamp(28px, 4vw, 48px); margin: 0 auto; text-align: center; background: var(--surface); max-width: none; }
.portfolio-more a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  font-weight: 600; color: var(--bronze-hover);
  text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.portfolio-more a:hover { color: var(--text); text-decoration-color: var(--bronze); }
.portfolio-more svg { flex: none; width: 22px; height: 22px; color: var(--bronze); }

.project-contact__form { max-width: 860px; margin-top: 36px; text-align: start; }

/* Floating widgets on small screens: the accessibility button and the reCAPTCHA badge share the
   bottom-left corner, one above the other, instead of sitting over the form fields.
   The footer's legal line is stacked on the right so nothing lies underneath them at the end of the page. */
@media (min-width: 768px) {
  body:has(.grecaptcha-badge) .site-footer__legal { padding-inline-end: 92px; }
}
@media (max-width: 767px) {
  #cwas-a11y-widget { --cwas-trigger-top-mobile: calc(100% - 134px) !important; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; gap: 0; padding-inline-end: 84px; }
  .site-footer__contact ul { padding-inline-end: 0; }
}

/* ---------- Content update 2026-10-14: layouts for the approved texts ----------
   Built only from the approved tokens (colours, rules, spacing) and the existing components. */

/* Bulleted lists inside text (the global reset removes list markers). */
.bullets { margin: 0 0 1em; padding-inline-start: 1.3em; list-style: disc; }
.bullets li { margin-bottom: 0.35em; padding-inline-start: 0.2em; }
.bullets li::marker { color: var(--bronze); }
.prose .bullets { max-width: 40em; }

/* Heroes with several paragraphs: the first is the lead, the rest regular text. */
.hero__body p { max-width: 34em; }
.hero__body p:last-child { margin-bottom: 0; }
.hero__text .hero__body .lead { line-height: 1.8; }

/* Titles and text blocks (restoration: "מה ניתן לחדש ולשחזר?"; custom-build page topics). */
.topics { display: grid; border-top: 1px solid var(--line); }
.topic { padding: 24px 0; border-bottom: 1px solid var(--line); }
.topic h2, .topic h3 { font-size: clamp(1.5rem, 1.38rem + 0.5vw, 1.875rem); margin: 0 0 0.45em; }
.topic p { max-width: 36em; }
.topic p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .topics { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); }
}

/* Collection page: eyebrow above the title, intro, one block per work. */
.page-head--collection .eyebrow { letter-spacing: 0.08em; font-weight: 600; color: var(--bronze-hover); }
.collection-intro .prose p:first-child { font-size: 1.06em; }
.work { scroll-margin-top: calc(var(--header-h, 88px) + 16px); }
.work .project__text p { max-width: 36em; }
.work__media { align-self: start; width: 100%; max-width: 460px; justify-self: center; }
.work__media--wide { max-width: none; }
.work__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-self: start; }
/* One column on phones; images never widen the column (no sideways scrolling). */
.work .project__head { grid-template-columns: minmax(0, 1fr); }
.work .project__head > *, .work__pair > * { min-width: 0; }
@media (min-width: 900px) {
  .work .project__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.project__head--text { grid-template-columns: minmax(0, 1fr) !important; }
/* Four images ("יצירות בעבודה"): two per row, one row of four on wide screens, never three and one. */
@media (min-width: 900px) { .gallery--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gallery--4 { grid-template-columns: repeat(4, 1fr); } }
.project__head--text .project__text { max-width: 46em; }

/* About: chapter titles inside the text, and the line under the title. */
.about__tagline { margin-top: -0.2em; }
.about__text .prose h2 { margin: 1.8em 0 0.6em; padding-top: 1.2em; border-top: 1px solid var(--line); }

/* Contact: the introduction paragraphs and the signature. */
.contact__intro p { max-width: 44em; }
.contact__sign { margin-top: 1.2em; color: var(--muted); font-weight: 600; }

/* Contact: the studio on the map (Business Profile details in "פרטי קשר ופוטר").
   The box keeps its size while the map frame loads. */
.studio-map { background: var(--surface); }
.studio-map__frame { aspect-ratio: 4 / 3; width: 100%; border: 1px solid var(--line); background: var(--bg); }
.studio-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 599px) { .studio-map__frame { aspect-ratio: 1 / 1; } }

/* Contact: Google reviews carousel (inc/reviews.php). One card on phones, two on tablets, three on desktop. */
.reviews__summary { color: var(--muted); }
.reviews__controls { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.reviews__btn {
  min-width: 48px; min-height: 48px; padding: 6px 14px;
  border: 1px solid var(--accent-line); background: var(--surface); color: var(--text);
  font: 600 1.0625rem/1 var(--font-body); cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.reviews__btn span { font-size: 1.35rem; }
.reviews__btn:hover:not(:disabled) { border-color: var(--bronze); background: var(--bronze); color: var(--text-on-bronze); }
.reviews__btn:disabled { opacity: 0.4; cursor: default; }
.reviews__btn[hidden] { display: none; }
.reviews__track {
  --per: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap: var(--gap); margin: 0; padding: 0 0 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
@media (min-width: 700px) { .reviews__track { --per: 2; } }
@media (min-width: 1100px) { .reviews__track { --per: 3; } }
.reviews__card {
  /* position: keeps the screen-reader texts inside the scrolling track (otherwise they widen the page). */
  position: relative; display: flex; flex-direction: column; scroll-snap-align: start; min-width: 0;
  padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-top: 3px solid var(--bronze); background: var(--surface);
}
.reviews__rating { margin: 0 0 12px; }
.reviews__stars { color: var(--bronze); font-size: 1.2rem; letter-spacing: 0.12em; }
.reviews__stars-off { color: var(--line); }
.reviews__text { margin: 0; }
.reviews__text p {
  margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden;
}
@media (max-width: 699px) { .reviews__text p { -webkit-line-clamp: 6; line-clamp: 6; } }
.reviews__card.is-open .reviews__text p { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.reviews__more {
  align-self: flex-start; margin-top: 8px; padding: 4px 0; border: 0; background: none;
  color: var(--bronze-hover); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.reviews__more[hidden] { display: none; }
.reviews__by { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: auto 0 0; padding-top: 18px; }
.reviews__name { font-weight: 700; }
.reviews__by time { color: var(--muted); font-size: 0.95em; }
.reviews__source { margin: 20px 0 0; color: var(--muted); font-size: 1rem; }
.reviews__source a { color: var(--bronze-hover); }
@media (prefers-reduced-motion: reduce) { .reviews__track { scroll-behavior: auto; } }

/* Portfolio: the text between the project cards and the gallery. */
.portfolio-intro .prose p, .portfolio-intro.prose p { max-width: 46em; }
.portfolio-intro { border-top: 0; }