/* eazy — shared site blocks: the approved contact band + footer.
   Load AFTER colors_and_type.css and fonts-extra.css, before responsive.css. */

:root {
  --m-lav-deep: #7B82B5;
  --q-ink: #4E4D4D;
}

.ez-shape { position: absolute; pointer-events: none; z-index: 0; }
/* inline eazy wordmark: Latin x-height calibrated to Hebrew cap height */
.ez-wm { display: inline-block; height: .851em; vertical-align: -.239em; width: auto; }
.ez-ring {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #4E4D4D;
  display: flex; align-items: center; justify-content: center;
  color: #4E4D4D; background: #fff;
}

/* contact band */
.tq-contact-photo { position: absolute; }
.tq-field {
  height: 52px; border: 1px solid var(--ez-line); border-radius: 999px;
  padding: 0 20px; font-family: var(--font-ui, var(--font-body)); font-size: 18px;
  background: #fff; width: 100%; box-sizing: border-box;
}
.tq-btn {
  background: linear-gradient(180deg, #FF8A47 0%, #F37327 52%, #EE6A1E 100%);
  color: #fff; border: 1px solid #C2551A; border-radius: 999px;
  padding: 12px 72px; font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1.2; cursor: pointer; border-bottom: none;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 4px rgba(120,50,20,.34),
              0 4px 0 #B04B16, 0 8px 16px rgba(90,40,15,.28);
  transition: transform .12s cubic-bezier(.2,.7,.2,1), box-shadow .12s cubic-bezier(.2,.7,.2,1);
}
.tq-btn:hover { background: linear-gradient(180deg, #FF9558 0%, #F87C32 52%, #F37327 100%); }
.tq-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 3px rgba(120,50,20,.34),
              0 1px 0 #B04B16, 0 3px 8px rgba(90,40,15,.26);
}
a.tq-btn, a.tq-btn:hover, a.tq-btn:visited { color: #fff; }

/* secondary, sand-coloured sibling of .tq-btn */
.tq-btn2 {
  background: linear-gradient(180deg, #D9BFA0 0%, #E3CDB2 52%, #EBDAC5 100%);
  color: #4E4D4D; border: 1px solid #C2A583; border-radius: 999px;
  padding: 12px 34px; font-family: var(--font-display); font-weight: 700;
  font-size: 17px; line-height: 1.2; cursor: pointer; border-bottom: none;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(140,105,65,.26),
              0 4px 0 #B2946F, 0 8px 16px rgba(110,80,45,.22);
  transition: transform .12s cubic-bezier(.2,.7,.2,1), box-shadow .12s cubic-bezier(.2,.7,.2,1);
}
.tq-btn2:hover { background: linear-gradient(180deg, #E0C8AA 0%, #EAD5BC 52%, #F1E2D0 100%); }
.tq-btn2:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #B2946F, 0 3px 8px rgba(110,80,45,.2);
}
a.tq-btn2, a.tq-btn2:hover, a.tq-btn2:visited { color: #4E4D4D; }

@media (max-width: 900px) {
  .tq-contact { grid-template-columns: 1fr !important; gap: 26px !important; padding: 0 0 32px 0 !important; }
  .tq-contact-photo { display: none !important; }
  .tq-bg { width: 230% !important; }
  footer[data-screen-label="Footer"] span[style*="margin-left:90px"] { margin-left: 0 !important; font-size: 17px !important; }
}

/* ---------- 3D buttons, site-wide ----------------------------------------
   Every pill CTA gets the raised treatment from the questionnaire page:
   an inner highlight, an inner bottom shade, a solid base edge and a soft
   drop shadow; pressing sinks it. Colour comes from the element's own
   inline background, so brand orange, lavender and WhatsApp green all keep
   their own hue — only the depth is shared. */

a[style*="border-radius:999px"][style*="ez-orange"],
button[style*="border-radius:999px"][style*="ez-orange"],
a[style*="border-radius:999px"][style*="#25D366"],
button[style*="border-radius:999px"][style*="#25D366"],
a[style*="border-radius:999px"][style*="ez-lavender"],
button[style*="border-radius:999px"][style*="ez-lavender"],
.ez-btn-3d {
  position: relative;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),
              inset 0 -2px 5px rgba(0,0,0,.22),
              0 4px 0 rgba(0,0,0,.26),
              0 8px 16px rgba(60,40,20,.24);
  transition: transform .12s cubic-bezier(.2,.7,.2,1),
              box-shadow .12s cubic-bezier(.2,.7,.2,1),
              filter .12s cubic-bezier(.2,.7,.2,1);
}
a[style*="border-radius:999px"][style*="ez-orange"]:hover,
button[style*="border-radius:999px"][style*="ez-orange"]:hover,
a[style*="border-radius:999px"][style*="#25D366"]:hover,
button[style*="border-radius:999px"][style*="#25D366"]:hover,
a[style*="border-radius:999px"][style*="ez-lavender"]:hover,
button[style*="border-radius:999px"][style*="ez-lavender"]:hover,
.ez-btn-3d:hover { filter: brightness(1.06); }

a[style*="border-radius:999px"][style*="ez-orange"]:active,
button[style*="border-radius:999px"][style*="ez-orange"]:active,
a[style*="border-radius:999px"][style*="#25D366"]:active,
button[style*="border-radius:999px"][style*="#25D366"]:active,
a[style*="border-radius:999px"][style*="ez-lavender"]:active,
button[style*="border-radius:999px"][style*="ez-lavender"]:active,
.ez-btn-3d:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -1px 3px rgba(0,0,0,.22),
              0 1px 0 rgba(0,0,0,.26),
              0 3px 8px rgba(60,40,20,.2);
}

/* outline / ghost pills stay flat but lift on hover */
a[style*="border-radius:999px"][style*="background:#fff"],
button[style*="border-radius:999px"][style*="background:#fff"] {
  transition: transform .12s cubic-bezier(.2,.7,.2,1), box-shadow .12s cubic-bezier(.2,.7,.2,1);
}
a[style*="border-radius:999px"][style*="background:#fff"]:hover,
button[style*="border-radius:999px"][style*="background:#fff"]:hover {
  box-shadow: 0 3px 0 rgba(0,0,0,.14), 0 6px 14px rgba(60,40,20,.16);
}

/* the floating WhatsApp bubble is round, not a pill — give it the same depth */
a[aria-label="וואטסאפ"][style*="border-radius:50%"] {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3),
              inset 0 -3px 6px rgba(0,0,0,.2),
              0 5px 0 #1DA851,
              0 10px 20px rgba(20,80,40,.3);
}

/* ---------- Amirnet guide pages: adopt the new visual language ----------
   Scoped to .ez-lang. Type roles only — surfaces, grounds and accents are
   set at source level on those pages (inline styles are re-serialized at
   runtime, so attribute-substring selectors never match). */

.ez-lang h1 { font-family: var(--font-display) !important; font-weight: 400 !important; color: #4E4D4D !important; line-height: 1.08 !important; }
.ez-lang h2 { font-family: var(--font-display) !important; font-weight: 300 !important; color: #4E4D4D !important; line-height: 1.06 !important; }
.ez-lang h3 { font-family: var(--font-display) !important; font-weight: 700 !important; color: #4E4D4D !important; }
.ez-lang p, .ez-lang li { font-family: var(--font-ui) !important; color: #4E4D4D !important; }
.ez-lang details { border-color: var(--ez-lavender-soft) !important; }
.ez-lang summary { font-family: var(--font-display) !important; font-weight: 400 !important; color: #4E4D4D !important; }
.ez-lang details[open] > summary { font-weight: 700 !important; }

/* student login — solid pill at the foot of the courses dropdown */
.ez-nav-sub a.ez-student-login { border-bottom: none; }
.ez-nav-sub a.ez-student-login:hover { background: #6F78B3 !important; color: #fff !important; }

/* footer: dark-grey ink for the sign-off, contact line and social rings */
footer[data-screen-label="Footer"] { color: #4E4D4D; }
footer[data-screen-label="Footer"] .ez-ring { border-color: #4E4D4D; color: #4E4D4D; background: transparent; }
footer[data-screen-label="Footer"] .ez-ring:hover { border-color: var(--ez-orange-deep); color: var(--ez-orange-deep); }
footer[data-screen-label="Footer"] .ez-foot-contact { color: #4E4D4D !important; }
footer[data-screen-label="Footer"] .ez-foot-contact i { color: #4E4D4D !important; }

/* footer legal row: dark-grey links, orange on hover */
footer[data-screen-label="Footer"] a[href="sitemap.html"],
footer[data-screen-label="Footer"] a[href="privacy.html"],
footer[data-screen-label="Footer"] a[href="accessibility.html"] { color: #4E4D4D; }
footer[data-screen-label="Footer"] a[href="sitemap.html"]:hover,
footer[data-screen-label="Footer"] a[href="privacy.html"]:hover,
footer[data-screen-label="Footer"] a[href="accessibility.html"]:hover { color: var(--ez-orange-deep); }

/* contact band sits on peach — rings and glyphs go orange there */
#contact .ez-ring { border-color: #E0A97E; color: #B06A3A; background: #fff; }
#contact .ez-ring:hover { border-color: var(--ez-orange); color: var(--ez-orange-deep); }

/* bright-orange sibling of .tq-btn — for buttons that sit on imagery */
.tq-btn-orange {
  background: linear-gradient(180deg, #FF8A47 0%, #F37327 52%, #EE6A1E 100%) !important;
  border-color: #C2551A !important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.45), inset 0 -2px 2px rgba(0,0,0,.16),
              0 4px 0 #B04B16, 0 8px 18px rgba(90,40,15,.3) !important;
}
.tq-btn-orange:hover { background: linear-gradient(180deg, #FF9558 0%, #F87C32 52%, #F37327 100%) !important; }
/* keep the centring transform while pressing */
.ez-play-btn:active { transform: translate(-50%, -50%) translateY(3px) !important; }
.ez-play-btn.tq-btn-orange:active {
  box-shadow: inset 0 2px 1px rgba(255,255,255,.3), 0 1px 0 #B04B16, 0 3px 8px rgba(90,40,15,.26) !important;
}

/* breathing room between the last section and the contact band */
#contact[data-screen-label="טופס ליד"] { margin-top: 44px; }
@media (max-width: 820px) { #contact[data-screen-label="טופס ליד"] { margin-top: 28px; } }