/* eazy – mobile adaptation (applies under 820px; desktop untouched)
   NOTE: selectors appear twice — with and without a space after ':' — because
   the DC runtime serializes inline styles with a space, while the static export keeps the authored form. */
@media (max-width: 820px) {
  header[data-screen-label="Header"] nav { display: none !important; }
  header[data-screen-label="Header"] > div:last-of-type:not(:first-child) { display: none !important; }
  header[data-screen-label="Header"] > span[dir="ltr"] { display: none !important; }
  header[data-screen-label="Header"] > div > div:last-child:not(:first-child) { display: none !important; }
  header[data-screen-label="Header"] a[href="#contact"], header[data-screen-label="Header"] a[href^="tel:"] { display: none !important; }
  header[data-screen-label="Header"] { padding: 10px 16px !important; }
  /* mobile header: logo on the left, burger on the right, bigger logo */
  header[data-screen-label="Header"], header[data-screen-label="Header"] > div { flex-direction: row-reverse !important; }
  header[data-screen-label="Header"] img[alt="eazy"] { width: 66px !important; height: 66px !important; }
  ez-mobile-chrome .ezc-burger { left: auto !important; right: 14px !important; top: 23px !important; width: 48px !important; height: 48px !important; font-size: 26px !important; }
  header[data-screen-label="Header"] a[href="index.html"]:first-child { margin-right: 0 !important; margin-left: 0 !important; }

  section, footer, article { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="padding:"][style*="64px"],
  div[style*="padding: "][style*="64px"] { padding-left: 20px !important; padding-right: 20px !important; }

  h1 { font-size: 38px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; }
  h1, h2 { text-align: center !important; }
  section > p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  section[data-screen-label] { scroll-margin-top: 72px; }

  /* readable minimum: nothing under 20px on mobile */
  [style*="font-size:12"],
  [style*="font-size: 12"],
  [style*="font-size:13"],
  [style*="font-size: 13"],
  [style*="font-size:14"],
  [style*="font-size: 14"],
  [style*="font-size:15"],
  [style*="font-size: 15"],
  [style*="font-size:16"],
  [style*="font-size: 16"],
  [style*="font-size:17"],
  [style*="font-size: 17"],
  [style*="font-size:18"],
  [style*="font-size: 18"],
  [style*="font-size:19"],
  [style*="font-size: 19"] {
    font-size: 20px !important; line-height: 1.55 !important;
  }
  /* footer + privacy note: footer-heading size */
  footer span, footer a, footer [style] { font-size: 16px !important; }
  label[style*="font-size:13px"], label[style*="font-size: 13px"],
  label[style*="font-size:13px"] span, label[style*="font-size: 13px"] span,
  label[style*="font-size:13px"] a, label[style*="font-size: 13px"] a { font-size: 16px !important; line-height: 1.5 !important; }
  label[style*="font-size:13px"] i, label[style*="font-size: 13px"] i { font-size: 12px !important; }

  /* grids collapse to one column */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1px 1fr"],
  [style*="grid-template-columns: 1fr 1px 1fr"],
  [style*="grid-template-columns:1fr 260px"],
  [style*="grid-template-columns: 1fr 260px"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns: 1.15fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns:1.25fr"],
  [style*="grid-template-columns: 1.25fr"],
  [style*="grid-template-columns:.9fr 1.1fr"],
  [style*="grid-template-columns: .9fr 1.1fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns:70px"],
  [style*="grid-template-columns: 70px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(10"],
  [style*="grid-template-columns: repeat(10"] { grid-template-columns: repeat(5, 1fr) !important; }

  img { max-width: 100%; height: auto; }
  img[src*="dot-cluster"] { display: none !important; }
  img[style*="height:360px"], img[style*="height: 360px"] { height: auto !important; width: 64vw !important; margin: 0 auto; }
  img[style*="width:400px"], img[style*="width: 400px"] { width: 64vw !important; }
  img[style*="width:340px"], img[style*="width: 340px"] { width: 58vw !important; }
  [style*="min-height:360px"],
  [style*="min-height: 360px"] { min-height: 0 !important; }

  section [style*="display:flex"], section [style*="display: flex"],
  footer [style*="display:flex"], footer [style*="display: flex"] { flex-wrap: wrap; }
  aside { display: none !important; }

  table { display: block; overflow-x: auto; white-space: nowrap; }

  a[aria-label="וואטסאפ"][style*="position:fixed"], a[aria-label="וואטסאפ"][style*="position: fixed"] { display: none !important; }

  /* product paths: separate cards on mobile */
  [style*="1fr 1px 1fr"] > div[style*="background:var(--ez-line)"],
  [style*="1fr 1px 1fr"] > div[style*="background: var(--ez-line)"] { display: none !important; }
  #products [style*="1fr 1px 1fr"] > div:first-child { border: 1px solid var(--ez-line); border-radius: 12px; padding: 22px; background: #fff; }
  #products [style*="1fr 1px 1fr"] > div:last-child { border: 1px solid var(--ez-line); border-radius: 12px; padding: 22px; background: var(--ez-lavender-tint); }

  /* compare page: table becomes stacked cards on mobile */
  section[data-screen-label="השוואה"] div:has(> table) { display: none !important; }
  [data-ez-mobile-compare] { display: grid !important; gap: 14px; }

  /* popups breathe on small screens */
  #ez-exit-popup { padding: 16px !important; }
  #ez-exit-popup > div { padding: 26px 20px 22px !important; }

  html, body { overflow-x: hidden !important; }
  body { padding-bottom: 78px; font-size: 20px; }

  /* footer link columns: two per row instead of five squeezed */
  footer [style*="grid-template-columns:auto 1fr 1fr"], footer [style*="grid-template-columns: auto 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* desktop: larger, airier main nav */
@media (min-width: 821px) {
  header nav { font-size: 19px !important; gap: 46px !important; }
  header nav a { font-size: 18px !important; }
  header .ez-nav-sub a { font-size: 17px !important; }
}

/* dropdown menus: open on tap / keyboard focus, not only hover */
.ez-nav:focus-within .ez-nav-sub { display: flex !important; }

@media (hover: none) {
  .ez-nav { flex-wrap: wrap; }
  .ez-nav .ez-nav-sub {
    display: flex !important; position: static !important;
    border: 0 !important; box-shadow: none !important;
    padding: 0 !important; min-width: 0 !important;
    margin-right: 12px; gap: 0 !important;
  }
  .ez-nav .ez-nav-sub a { padding: 7px 0 !important; font-size: 15.5px !important; color: var(--ez-fg-2) !important; }
  .ez-nav > i { display: none !important; }
}

/* 821-1200px: nav needs the whole row — drop the phone + CTA, let the nav shrink */
@media (min-width: 821px) and (max-width: 1200px) {
  header[data-screen-label="Header"] a[href^="tel:"],
  header[data-screen-label="Header"] a[href="#contact"] { display: none !important; }
  header[data-screen-label="Header"] { padding-left: 28px !important; padding-right: 28px !important; }
  header[data-screen-label="Header"] > div { gap: 20px !important; }
  header nav { min-width: 0 !important; flex-wrap: wrap !important; row-gap: 6px !important; }
}

/* desktop nav: centered in the row, Avigul display type */
@media (min-width: 821px) {
  header[data-screen-label="Header"] > div { justify-content: space-between !important; }
  header[data-screen-label="Header"] nav { flex: 1 1 auto !important; justify-content: center !important; }
  header[data-screen-label="Header"] nav,
  header[data-screen-label="Header"] nav a { font-family: var(--font-ui) !important; font-size: 19px !important; font-weight: 500 !important; }
  /* the current page's item — marked with href="#" or the orange inline colour */
  /* the current page's item is coloured, not bolded */
  header[data-screen-label="Header"] nav a { font-weight: 400 !important; }
}

/* mobile: icon rings and small icon blocks centre over their text */
@media (max-width: 820px) {
  .ez-ring { margin-right: auto !important; margin-left: auto !important; }
  .ez-method-row > div,
  [data-screen-label="איך זה עובד"] .ez-method-row > div { justify-items: center !important; text-align: center !important; }
  .ez-card { justify-items: center !important; text-align: center !important; }
  .ez-card > span:first-child { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .ez-feat { justify-items: center !important; text-align: center !important; }
  /* header: never a CTA or phone on mobile — the bottom bar owns both */
  header[data-screen-label="Header"] a[href="#contact"],
  header[data-screen-label="Header"] a[href^="tel:"],
  header[data-screen-label="Header"] a[href="contact.html"] { display: none !important; }
}

/* leave room under the footer for the fixed bottom bar */
@media (max-width: 900px) {
  body { padding-bottom: 104px !important; }
  footer[data-screen-label="Footer"] { padding-bottom: 34px !important; }
}

/* mobile: the personal-area button lives at the bottom of the burger menu */
@media (max-width: 820px) {
  header[data-screen-label="Header"] .ez-student-login { display: none !important; }
}

/* narrow-desktop band — must stay LAST so it wins source order over the
   (min-width:821px) nav rules above (same specificity, both !important). */
@media (min-width: 821px) and (max-width: 1200px) {
  header[data-screen-label="Header"] nav { gap: 14px !important; }
  header[data-screen-label="Header"] nav, header[data-screen-label="Header"] nav a { font-size: 17px !important; }
}

/* mobile: no breadcrumb — the burger menu carries the hierarchy */
@media (max-width: 820px) {
  [data-screen-label="ברדקרמב"] { display: none !important; }
}

/* ---- mobile: contact band + footer centring -------------------------- */
@media (max-width: 820px) {
  /* consent check must sit inside its circle */
  #contact label > span:first-child { width: 24px !important; height: 24px !important; }
  #contact label > span:first-child i { font-size: 13px !important; }
  /* contact details centre as a column, each row centred on itself */
  #contact .tq-contact > div:last-child { justify-items: center !important; justify-self: center !important; }
  #contact .tq-contact > div:last-child > a,
  #contact .tq-contact > div:last-child > span { justify-content: center !important; width: 100%; }
  /* footer: logo row, social row and contact row all centred */
  footer[data-screen-label="Footer"] > div > div { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 16px !important; }
  footer[data-screen-label="Footer"] a[href="index.html"] { justify-content: center !important; }
  footer[data-screen-label="Footer"] .ez-foot-contact { justify-content: center !important; flex-wrap: wrap; }
}

/* ---- mobile: contact band + footer, approved on amirnet-user ---------- */
@media (max-width: 820px) {
  #contact .tq-contact > div:last-child{display:none !important}
  /* the fixed bottom bar was covering the footer's last rows */
  body{padding-bottom:0 !important}
  /* the fixed bar sits over the page end — the footer carries its own runway */
  footer[data-screen-label="Footer"]{padding-bottom:120px !important}
  /* social rings row: centre it, the inline flex was leaning left */
  footer[data-screen-label="Footer"] > div > div:first-child > span:nth-child(2){justify-content:center !important;width:auto !important;max-width:100%;flex-wrap:wrap;align-self:center !important;margin:0 auto !important}
  /* the contact line has no class here — centre it as the row's last child */
  footer[data-screen-label="Footer"] > div > div:first-child > span:last-child{justify-content:center !important;width:auto !important;max-width:100%;flex-wrap:wrap;align-self:center !important;margin:0 auto !important}
  footer[data-screen-label="Footer"] .ez-foot-contact{justify-content:center !important;width:100%}
  footer[data-screen-label="Footer"] > div > div:last-child{flex-direction:row !important;flex-wrap:nowrap !important;gap:8px !important;font-size:13px !important;white-space:nowrap}
  footer[data-screen-label="Footer"] > div > div:last-child a{font-size:13px !important}
  }

}

/* ---- mobile: hero panels must share the column width ------------------ */
@media (max-width: 820px) {
  .ez-hero-grid, .q-hero { width: 100%; min-width: 0; }
  .ez-hero-grid > *, .q-hero > * { min-width: 0 !important; max-width: 100% !important; }
  .ez-hero-media, .q-art { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .ez-hero-media > img, .q-art { display: block; }
  .ez-hero-media > img { max-width: 100% !important; }
}