/* ==========================================================================
   Brian Thau for Likud — shared stylesheet
   Serves the English (LTR) and Hebrew (RTL) pages from one file.
   No build step, no dependencies.
   ========================================================================== */

:root{
  --flag:#0038B8;          /* Israeli flag blue */
  --navy:#0A1F44;          /* deep text navy */
  --sky:#EEF3FB;           /* light section wash */
  --line:#C9D6EE;
  --white:#FFFFFF;
  --ink:#1B2A4A;
  --maxw:1060px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{
  font-family:'Heebo',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Rubik',sans-serif;color:var(--navy)}
a{color:var(--flag)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
img{max-width:100%}

/* Skip link (a11y).
   Hidden ABOVE the viewport, never to the side: a large negative inline offset
   creates ~10,000px of horizontal overflow, which in an RTL document scrolls
   the real content out of view entirely. Vertical offset has no such effect. */
.skip{
  position:absolute;inset-inline-start:0;top:-100px;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
  font-family:'Rubik';font-weight:700;text-decoration:none;
}
.skip:focus{top:0}

/* Signature: flag-stripe device */
.stripes{height:14px;background:linear-gradient(to bottom,var(--flag) 0 5px,var(--white) 5px 9px,var(--flag) 9px 14px)}
.divider{max-width:120px;margin:0 auto 18px}
.divider .stripes{height:10px;background:linear-gradient(to bottom,var(--flag) 0 3px,transparent 3px 7px,var(--flag) 7px 10px)}

/* ---------- Language switch ---------- */
.langbar{background:var(--white);border-bottom:1px solid var(--line)}
.langbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:8px;padding-bottom:8px}
.langbar a{
  font-family:'Rubik';font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:#5A6B90;text-decoration:none;padding:4px 10px;border-radius:999px;border:1px solid transparent;
}
.langbar a:hover{color:var(--flag);border-color:var(--line)}
.langbar a[aria-current="true"]{color:var(--flag);border-color:var(--line);background:var(--sky)}

/* ---------- Hero ---------- */
header.hero{background:var(--sky);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:56px 0}
.kicker{display:inline-block;font-family:'Rubik';font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flag);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:18px}
h1{font-size:clamp(2.4rem,5.4vw,3.9rem);font-weight:900;line-height:1.05;letter-spacing:-.01em}
h1 .for{color:var(--flag)}
.sub{font-size:clamp(1.05rem,2vw,1.25rem);margin:18px 0 28px;max-width:34ch;color:#33466E}
.btn{
  display:inline-block;font-family:'Rubik';font-weight:700;font-size:1.05rem;
  background:var(--flag);color:var(--white);text-decoration:none;
  padding:15px 32px;border:none;border-radius:8px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,56,184,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,56,184,.32)}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.photo-frame{position:relative}
.photo-frame img{
  width:100%;height:auto;display:block;border-radius:12px;
  box-shadow:0 16px 40px rgba(10,31,68,.22);
  border-bottom:6px solid var(--flag);
}

/* ---------- Intro ---------- */
.intro{padding:56px 0;text-align:center}
.intro p{max-width:62ch;margin:0 auto;font-size:1.15rem;color:#2A3B60}
.intro strong{color:var(--navy)}

/* ---------- Platform ---------- */
.platform{background:var(--sky);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:22px 22px 20px;border-top:4px solid var(--flag);
}
.card h3{font-size:1.02rem;font-weight:800;letter-spacing:.02em;margin-bottom:6px}
.card p{font-size:.96rem;color:#3A4C72}

/* ---------- Signup ---------- */
.signup{background:var(--navy);color:var(--white);padding:64px 0}
.signup .divider .stripes{background:linear-gradient(to bottom,var(--white) 0 3px,transparent 3px 7px,var(--white) 7px 10px);opacity:.9}
.signup h2{color:var(--white);text-align:center;font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;max-width:22ch;margin:0 auto 12px}
.signup .support{color:#C7D4F0;text-align:center;max-width:52ch;margin:0 auto 32px}
form{max-width:520px;margin:0 auto;display:grid;gap:12px}
.field label{display:block;font-family:'Rubik';font-weight:500;font-size:.85rem;color:#AABCE4;margin-bottom:5px}
.field input{
  width:100%;padding:13px 14px;border-radius:8px;border:1px solid #3A5089;
  background:#122A5C;color:var(--white);font-size:1rem;font-family:'Heebo';
}
.field input::placeholder{color:#7288B8}
.field input:focus-visible{outline:3px solid #7FA3F5;outline-offset:1px;border-color:#7FA3F5}
.signup .btn{width:100%;margin-top:6px;background:var(--white);color:var(--flag);box-shadow:none}
.signup .btn:hover{box-shadow:0 6px 16px rgba(0,0,0,.3)}
.consent{font-size:.78rem;color:#8FA3CC;text-align:center;margin-top:10px}
.formerr{
  display:none;background:#5B1A1A;border:1px solid #A03A3A;color:#FFD9D9;
  border-radius:8px;padding:12px 14px;font-size:.9rem;text-align:center;
}
.formerr.show{display:block}
/* Honeypot — hidden from humans, tempting to bots.
   Clip-based rather than offset-based, for the same RTL-overflow reason as .skip. */
.hp{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.confirm{
  display:none;text-align:center;background:#12408F;border:1px solid #3A5089;
  border-radius:10px;padding:26px 22px;max-width:520px;margin:0 auto;font-size:1.05rem;
}
.confirm.show{display:block}

/* ---------- Blog teaser (landing) ---------- */
.blog{padding:64px 0}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{border:1px solid var(--line);border-radius:10px;padding:22px;background:var(--white);display:flex;flex-direction:column}
.post .date{font-family:'Rubik';font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flag)}
.post h3{font-size:1.05rem;margin:8px 0 6px}
.post p{font-size:.93rem;color:#3A4C72;margin-bottom:12px}
.post .more{font-family:'Rubik';font-weight:700;font-size:.9rem;text-decoration:none;margin-top:auto}
.post .more:hover{text-decoration:underline}
.blog-note{text-align:center;color:#5A6B90;font-size:.9rem;margin-top:24px}

/* ---------- Blog index + article pages ---------- */
.pagehead{background:var(--sky);border-bottom:1px solid var(--line);padding:52px 0 44px;text-align:center}
.pagehead h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.pagehead .sub{margin:14px auto 0;max-width:52ch;text-align:center}
.backlink{
  display:inline-block;font-family:'Rubik';font-weight:700;font-size:.85rem;
  text-decoration:none;margin-bottom:22px;
}
.postlist .backlink{margin-bottom:26px}
.backlink:hover{text-decoration:underline}

.article{padding:48px 0 64px}
.article .wrap{max-width:720px}
/* display:block so the label starts a new line under the back-link */
.article .date{display:block;font-family:'Rubik';font-weight:500;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flag)}
.article h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:10px 0 22px;line-height:1.15}
.article p{font-size:1.09rem;margin-bottom:20px;color:#2A3B60}
.article h2{font-size:1.35rem;margin:34px 0 12px}
.article ul{margin:0 0 20px;padding-inline-start:22px}
.article li{font-size:1.06rem;margin-bottom:9px;color:#2A3B60}
.article blockquote{
  border-inline-start:4px solid var(--flag);background:var(--sky);
  padding:16px 20px;border-radius:0 8px 8px 0;margin:0 0 22px;
  font-size:1.09rem;color:var(--navy);
}

.postlist{display:grid;gap:18px;padding:52px 0 64px}
.postlist .post{padding:26px}
.postlist .post h2{font-size:1.25rem;margin:8px 0 8px}
.postlist .post p{font-size:1rem}

.cta-strip{background:var(--navy);color:#fff;padding:44px 0;text-align:center}
.cta-strip h2{color:#fff;font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:8px}
.cta-strip p{color:#C7D4F0;margin-bottom:22px}
.cta-strip .btn{background:#fff;color:var(--flag);box-shadow:none}

/* ---------- Footer ---------- */
footer{background:var(--navy);color:#AABCE4;padding:40px 0 90px;font-size:.9rem}
footer .wrap{display:grid;gap:10px;text-align:center}
footer a{color:#D7E2F8;text-decoration:none}
footer a:hover{text-decoration:underline}
.socials{display:flex;gap:20px;justify-content:center;align-items:center;margin:10px 0 4px}
.socials a{color:#AABCE4;display:inline-flex;transition:color .15s ease,transform .15s ease}
.socials a:hover{color:#fff;transform:translateY(-2px)}
.disclosure{font-size:.78rem;color:#6E82AF;margin-top:6px}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.sticky-cta .btn{width:100%;text-align:center;padding:14px}

/* ---------- Hebrew / RTL adjustments ----------
   Hebrew has no uppercase and no tracking convention — letter-spacing and
   text-transform on Latin display type actively hurt Hebrew legibility. */
[dir="rtl"] h1,
[dir="rtl"] .card h3{letter-spacing:normal}
[dir="rtl"] .kicker,
[dir="rtl"] .post .date,
[dir="rtl"] .article .date,
[dir="rtl"] .langbar a{letter-spacing:normal;text-transform:none}
[dir="rtl"] .langbar .wrap{justify-content:flex-start}
[dir="rtl"] .article blockquote{border-radius:8px 0 0 8px}
/* Hebrew body copy reads better slightly larger and looser */
[dir="rtl"] body{line-height:1.75}
[dir="rtl"] .sub{max-width:36ch}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .cards{grid-template-columns:1fr 1fr}.posts{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .hero-grid{grid-template-columns:1fr;gap:26px;padding:34px 0 44px}
  .hero-copy{order:2;text-align:center}
  .photo-frame{order:1;max-width:340px;margin:0 auto}
  .sub{margin-left:auto;margin-right:auto}
  .cards,.posts{grid-template-columns:1fr}
  .sticky-cta{display:block}
  footer{padding-bottom:110px}
  .article{padding:34px 0 48px}
}