/* Amit FAQ Lighthouse · "שאלות לפני שמתחילים"
   Everything is scoped under .amf. Colours can be changed through the variables below
   (Appearance > Customize > Additional CSS). */

.amf{
  --amf-ink:#0A161D;
  --amf-ink2:#46565D;
  --amf-accent:#B0156C;
  --amf-line:rgba(10,22,29,.12);
  --amf-light:255,218,165;
  --amf-font:"Heebo","Assistant","Arial Hebrew",system-ui,sans-serif;
  --amf-ease:cubic-bezier(.23,1,.32,1);
  position:relative;
  padding-block:clamp(100px,11vw,170px);
  color:var(--amf-ink);
  font-family:var(--amf-font);
  font-size:18px;
  line-height:1.7;
  direction:rtl;
  text-align:right;
  overflow:hidden;
  overflow:clip; /* theme: clip (not hidden) so the lighthouse can stay sticky beside the questions */
}
.amf *,.amf *::before,.amf *::after{box-sizing:border-box}
.amf h2,.amf p{margin:0;padding:0;font-family:var(--amf-font);color:inherit;text-transform:none;border:0;background:none}

.amf .amf-wrap{position:relative;z-index:1;max-width:1240px;margin-inline:auto;padding-inline:clamp(18px,4vw,64px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:start}
.amf .amf-side{position:sticky;top:clamp(60px,10vh,120px)}
.amf .amf-h{font-size:clamp(36px,4.4vw,66px);font-weight:800;line-height:1.04;letter-spacing:-.03em;max-width:9ch}
.amf .amf-sub{margin-top:18px;max-width:22rem;font-size:clamp(17px,1.3vw,20px);font-weight:300;color:var(--amf-ink2)}

/* the lighthouse */
.amf .amf-tower{position:relative;width:clamp(150px,13vw,190px);margin-top:clamp(28px,4vw,48px);margin-inline-start:6px}
.amf .amf-tower svg{display:block;width:100%;height:auto;overflow:visible}
.amf .amf-st{fill:none;stroke:var(--amf-ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.amf .amf-band{fill:var(--amf-accent);opacity:.9}
.amf .amf-glass{fill:rgba(var(--amf-light),.35)}
.amf .amf-lamp{fill:rgb(var(--amf-light))}
.amf .amf-halo{transform-origin:center;transform-box:fill-box;animation:amf-halo 4.5s ease-in-out infinite}
@keyframes amf-halo{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.amf .amf-sea{fill:none;stroke:rgba(10,22,29,.35);stroke-width:1;stroke-linecap:round}
.amf .amf-sea path{animation:amf-swell 7s ease-in-out infinite}
.amf .amf-sea path:nth-child(2){animation-delay:-2.3s}
.amf .amf-sea path:nth-child(3){animation-delay:-4.6s}
@keyframes amf-swell{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}

/* the beam, from the lamp across the questions */
.amf .amf-beam{position:absolute;z-index:0;top:0;left:0;width:0;height:clamp(150px,16vw,230px);transform-origin:100% 50%;pointer-events:none;
  background:linear-gradient(270deg,rgba(var(--amf-light),.75) 0%,rgba(var(--amf-light),.32) 35%,rgba(var(--amf-light),0) 92%);
  -webkit-clip-path:polygon(100% 47%,0 0,0 100%,100% 53%);clip-path:polygon(100% 47%,0 0,0 100%,100% 53%);filter:blur(2px);opacity:0;transition:opacity 1.2s ease}
.amf.is-ready .amf-beam{opacity:1}

/* the questions */
.amf .amf-list{position:relative;z-index:1}
.amf details.amf-item{position:relative;margin:0;padding:0;border:0;border-top:1px solid var(--amf-line);background:none}
.amf details.amf-item:last-child{border-bottom:1px solid var(--amf-line)}
.amf details.amf-item::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(var(--amf-light),.5),rgba(var(--amf-light),.12) 55%,transparent 85%);opacity:0;transition:opacity .8s ease}
.amf details.amf-item.is-lit::before{opacity:1}
.amf summary{position:relative;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0;padding:24px 4px;font-family:var(--amf-font);font-size:clamp(18px,1.5vw,21px);font-weight:500;line-height:1.4;color:var(--amf-ink);background:none;border:0}
.amf summary::-webkit-details-marker{display:none}
.amf summary::marker{content:""}
.amf summary:focus-visible{outline:2px solid var(--amf-accent);outline-offset:2px}
.amf .amf-chev{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(10,22,29,.25);color:var(--amf-accent);transition:transform .5s var(--amf-ease),background-color .4s,box-shadow .4s}
.amf .amf-chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.amf details[open] .amf-chev{transform:rotate(45deg);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(176,21,108,.4)}
.amf .amf-ans{position:relative;overflow:hidden}
.amf .amf-ans p{padding:0 4px 14px;max-width:38rem;font-weight:300;color:var(--amf-ink2);font-size:clamp(17px,1.25vw,18.5px);line-height:1.7}
.amf .amf-ans p:last-child{padding-bottom:28px}

/* phones: a small lighthouse beside the heading, no beam */
@media (max-width:860px){
  .amf .amf-wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .amf .amf-side{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
  .amf .amf-tower{grid-row:1/3;grid-column:2;width:92px;margin:0}
  .amf .amf-beam{display:none}
  .amf .amf-h{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .amf *{animation:none!important}
  .amf .amf-beam{transition:none}
}