/* MG Stone Tec — shared stylesheet (Hebrew site, adapted from AR/EN design system) */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&display=swap');

:root {
  --bg: #121212;
  --bg-alt: #1a1a1a;
  --panel: #1e1e1e;
  --border: #2c2c2c;
  --text: #f2f0ec;
  --text-dim: #b8b3a8;
  --accent: #c9a227;
  --accent-dim: #8a701c;
  --max-w: 1140px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

body {
  line-height: 1.65;
  font-size: 16px;
}

body.lang-ar {
  font-family: 'Cairo', 'Tahoma', sans-serif;
  direction: rtl;
}

body.lang-en {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  direction: ltr;
}

body.lang-he {
  font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
  direction: rtl;
}

/* Hebrew typography adjustments — the "eyebrow" label (e.g. "MG STONE TEC")
   read as too small and disconnected from the headline below it, so we make
   it a stronger, more prominent kicker instead of a faint caption. */
body.lang-he .eyebrow {
  letter-spacing: 1px;
  font-size: 1rem;
  font-weight: 700;
}

body.lang-he .hero .eyebrow {
  font-size: 1.15rem;
  letter-spacing: 1.5px;
}

body.lang-he .hero h1 {
  font-size: 2.85rem;
}

body.lang-he .card .model,
body.lang-he .brand-block-head .est {
  letter-spacing: 0.2px;
}

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

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
/* The gradient lives on header.site itself (which has no max-width) so it
   spans the full page width, edge to edge — the inner .wrap divs only
   center the logo/nav/contact content within that band. Both tiers share
   the one continuous light gradient, matching the reference site where the
   whole header — including the nav links — sits on the light backdrop. */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, #f7f2e4, #e9dcb0);
  border-bottom: 1px solid var(--border);
}

header.site .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(58,50,32,0.15);
}

.brand {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.brand span { color: var(--accent-dim); }

/* Header-only wordmark: sits beside the logo image in the light top-bar, so
   it needs dark text rather than the light color .brand uses in the (dark)
   footer. */
.header-brand {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1a1712;
}

.header-brand span { color: var(--accent-dim); }

.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

.quick-contact {
  font-size: 0.9rem;
  color: #3a3220;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: color .15s;
}
.quick-contact:hover { color: var(--accent); }

/* Tier 2: nav (right) + phone number (left), own row so neither has to
   compete with the logo/wordmark for horizontal space. */
header.site .nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 19px;
  flex-wrap: wrap;
}

nav.main-nav a {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #1a1712;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: #000;
  border-color: var(--accent-dim);
}

/* Mobile nav toggle (hamburger) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1a1712;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  header.site .nav-row {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 20px;
  }
  header.site .nav-row.open { display: flex; }
  nav.main-nav {
    flex-direction: column;
    gap: 16px;
  }
  header.site .quick-contact { align-self: flex-start; }
}

/* On narrow screens the top-bar (brand text + logo + lang-switch + hamburger)
   has no room for both the text wordmark and the logo image without wrapping
   into an oversized, disproportionate line. The logo image alone already
   carries the brand, so hide the text wordmark below 640px and let the
   remaining three items sit comfortably on one line. */
@media (max-width: 640px) {
  .header-brand { display: none; }
}

.lang-switch {
  font-size: 1.3rem;
  font-weight: 700;
  color: #3a3220;
  border: 1px solid rgba(58,50,32,0.3);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
}

.lang-switch a { color: #3a3220; }
.lang-switch a.active { color: #8a6a12; font-weight: 700; }
.lang-switch .sep { margin: 0 6px; opacity: .4; }

.mobile-toggle { display: none; }

/* Hero */
.hero {
  padding: 90px 0 70px;
  background:
    linear-gradient(180deg, rgba(18,18,18,0.35), rgba(18,18,18,0.95)),
    repeating-linear-gradient(135deg, #1c1c1c 0px, #1c1c1c 2px, #181818 2px, #181818 40px);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.hero .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: 2.6rem;
  line-height: 1.25;
  margin: 0 0 20px;
  font-weight: 800;
}

.hero p.lead {
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto 34px;
}

.btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform .15s, background .15s, color .15s;
}

.btn-primary {
  background: var(--accent);
  color: #161616;
}
.btn-primary:hover { background: #dab53a; transform: translateY(-1px); }

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Sections */
section { padding: 72px 0; }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.section-head h2 { font-size: 1.9rem; margin: 0 0 14px; font-weight: 800; }
.section-head p { color: var(--text-dim); margin: 0; }

/* Grid of cards */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent-dim); transform: translateY(-3px); }

.card .icon {
  width: 46px; height: 46px;
  margin-bottom: 18px;
  color: var(--accent);
}

.card h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; }
.card .model { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase; }
.card p { color: var(--text-dim); margin: 0; font-size: 0.95rem; }

/* Partner brand block */
.brand-block { margin-bottom: 56px; }
.brand-block:last-child { margin-bottom: 0; }
.brand-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
  margin-bottom: 26px;
}
.brand-block-head h3 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.brand-block-head .est { color: var(--accent); font-size: .85rem; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.brand-block-intro { color: var(--text-dim); max-width: 780px; margin: 0 0 26px; }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-grid .card { padding: 20px 18px; }
.brand-grid .card h3 { font-size: 1rem; }
.brand-grid .card p { font-size: .88rem; }

/* Card with a product photo behind a dark overlay */
.card-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--panel);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-photo .model,
.card-photo h3,
.card-photo p {
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,1);
}
.card-photo p { color: rgba(242,240,236,0.95); }
.card-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.5) 100%);
  pointer-events: none;
}
.card-photo { position: relative; }
.card-photo > * { position: relative; z-index: 1; }

/* Two-column feature */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}
.split h2 { font-size: 1.8rem; margin-top: 0; }
.split p { color: var(--text-dim); }
.split ul { padding: 0; margin: 22px 0 0; list-style: none; }
.split ul li {
  padding: 10px 0 10px 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.split ul li:first-child { border-top: none; }
.split ul li .dot { color: var(--accent); font-weight: 900; }

.stat-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px;
}
.stat-box .num { font-size: 2.4rem; font-weight: 800; color: var(--accent); }
.stat-box .lbl { color: var(--text-dim); margin-top: 6px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* CTA band */
.cta-band {
  text-align: center;
  background: linear-gradient(135deg, #1d1a10, #171717);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band h2 { font-size: 1.7rem; margin: 0 0 14px; }
.cta-band p { color: var(--text-dim); margin: 0 0 30px; }

/* Footer */
footer.site {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.9rem;
}
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
footer.site a { color: var(--text-dim); }
footer.site a:hover { color: var(--accent); }
footer.site .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* Page header (inner pages) */
.page-header {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  text-align: center;
}
.page-header .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.page-header h1 { font-size: 2.1rem; margin: 0; font-weight: 800; }
.page-header p { color: var(--text-dim); margin: 14px auto 0; max-width: 640px; }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-item .icon { width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.contact-item h3 { margin: 0 0 6px; font-size: 1rem; }
.contact-item p, .contact-item a { color: var(--text-dim); margin: 0; }
.contact-item a:hover { color: var(--accent); }

.map-note {
  margin-top: 24px;
  color: var(--text-dim);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* Testimonials */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-card .quote {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 20px;
  flex-grow: 1;
}
.testimonial-card .quote::before { content: "\201C"; color: var(--accent); font-size: 1.6rem; font-weight: 800; }
.testimonial-name { font-weight: 700; font-size: 0.95rem; }
.testimonial-co { color: var(--accent); font-size: 0.82rem; margin-top: 2px; }

/* From-the-field photo gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
  transition: transform .15s, border-color .15s;
}
.gallery-item:hover { transform: translateY(-3px); border-color: var(--accent-dim); }

/* Card + PDF-download pairing */
.card-wrap { display: flex; flex-direction: column; gap: 10px; }
.pdf-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  transition: border-color .15s, color .15s;
}
.pdf-link:hover { border-color: var(--accent); color: var(--accent); }
.pdf-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Video grid (סרטונים מהשטח) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.video-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
.video-item iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Hub / category listing pages */
.hub-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Note badge */
.note-badge {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 20px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Stone Week popup — enlarge on mobile so it covers much more of the screen */
@media (max-width: 640px) {
  #sw2026-overlay { padding: 8px !important; }
  #sw2026-overlay > div {
    max-width: 97vw !important;
    width: 97vw !important;
    min-height: 82vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 50px 26px 42px !important;
    box-sizing: border-box !important;
  }
  #sw2026-overlay > div div[style*="font-size:2.6rem"] { font-size: 3.4rem !important; }
  #sw2026-overlay > div div[style*="font-size:1.05rem"] { font-size: 1.3rem !important; }
  #sw2026-overlay > div p[style*="font-size:.95rem"] { font-size: 1.2rem !important; line-height: 1.8 !important; }
  #sw2026-overlay > div a[href] { padding: 18px 38px !important; font-size: 1.2rem !important; }
}