/* ============================================================
   THE LJUBLJANA TABLE — design system
   Palette et style issus de la page de garde du livret Chabbat
   (traits noirs, aplats orange/bleu/rouge/rose/vert).
   ============================================================ */

/* ---------- Fonts (local) ---------- */
@font-face { font-family:'Rubik'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("rubik-hebrew.woff2") format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("rubik-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("rubik-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Secular One'; font-style:normal; font-weight:400; font-display:swap;
  src:url("secular-one-hebrew.woff2") format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Secular One'; font-style:normal; font-weight:400; font-display:swap;
  src:url("secular-one-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Secular One'; font-style:normal; font-weight:400; font-display:swap;
  src:url("secular-one-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --ink:#141414;
  --orange:#E8920A;
  --blue:#1B3FAA;
  --red:#D42B1E;
  --pink:#E88FB0;
  --green:#5FA052;
  --yellow:#F5C518;
  --paper:#ffffff;
}

/* ---------- Base ---------- */
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Rubik',sans-serif; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:'Secular One',sans-serif; font-weight:400; text-transform:uppercase; line-height:1.1; margin:0 0 18px; }
h1 { font-size:clamp(38px,6vw,72px); line-height:1.02; letter-spacing:.01em; }
h2 { font-size:clamp(26px,3.6vw,44px); }
h3 { font-size:clamp(19px,2.4vw,24px); }
p  { font-size:17px; margin:0 0 16px; }
a  { color:var(--blue); }
img { max-width:100%; }
.container { max-width:1140px; margin:0 auto; padding:0 28px; }
.narrow { max-width:760px; margin:0 auto; }
.center { text-align:center; }
.section { padding:80px 28px; }

/* ---------- Top bar ---------- */
.topbar { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:3px solid var(--ink); }
.topbar-inner { max-width:1140px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); }
.brand-name { font-family:'Secular One',sans-serif; font-size:20px; letter-spacing:.02em; }
.brand-he { font-family:'Secular One',sans-serif; font-size:16px; color:var(--orange); }
.topnav { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.topnav a {
  color:var(--ink); text-decoration:none; font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; font-weight:500; border-bottom:2px solid transparent; padding-bottom:1px;
}
.topnav a:hover, .topnav a.active { border-bottom-color:var(--orange); }
.lang-switch { display:flex; gap:6px; align-items:center; }
.lang-pill {
  background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  border-radius:6px 12px 8px 10px; cursor:pointer;
  font-family:'Rubik',sans-serif; font-size:12px; font-weight:500; letter-spacing:.08em; padding:4px 9px;
}

/* ---------- Building blocks ---------- */
.eyebrow {
  display:inline-block; border:2.5px solid var(--ink); padding:5px 14px;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; font-weight:500; margin-bottom:22px;
  border-radius:4px 12px 5px 14px;
}
.eyebrow.on-orange { background:var(--orange); }
.eyebrow.on-yellow { background:var(--yellow); }
.eyebrow.on-blue   { background:var(--blue);   color:#fff; }
.eyebrow.on-red    { background:var(--red);    color:#fff; }
.eyebrow.on-green  { background:var(--green);  color:#fff; }
.eyebrow.on-pink   { background:var(--pink); }

.btn {
  display:inline-block; font-family:'Secular One',sans-serif; font-size:15px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:3px solid var(--ink); border-radius:14px 5px 16px 6px; padding:14px 34px;
  box-shadow:5px 5px 0 var(--ink); transition:transform .15s, box-shadow .15s;
}
.btn:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-orange { background:var(--orange); color:var(--ink); }
.btn-blue   { background:var(--blue);   color:#fff; }

.card {
  border:3px solid var(--ink); background:var(--paper); padding:44px 40px;
  border-radius:22px 8px 24px 10px;
}
.card.r2 { border-radius:8px 24px 10px 22px; }
.card.r3 { border-radius:24px 10px 22px 8px; }
.card.r4 { border-radius:10px 22px 8px 24px; }
.shadow-orange { box-shadow:8px 8px 0 var(--orange); }
.shadow-blue   { box-shadow:8px 8px 0 var(--blue); }
.shadow-red    { box-shadow:8px 8px 0 var(--red); }
.shadow-green  { box-shadow:8px 8px 0 var(--green); }
.shadow-yellow { box-shadow:8px 8px 0 var(--yellow); }
.shadow-pink   { box-shadow:8px 8px 0 var(--pink); }

.dots { display:flex; gap:14px; align-items:center; margin:24px 0; }
.dot  { width:16px; height:16px; border:2.5px solid var(--ink); border-radius:50%; display:inline-block; }
.dot-orange{background:var(--orange)} .dot-blue{background:var(--blue)} .dot-red{background:var(--red)}
.dot-pink{background:var(--pink)} .dot-green{background:var(--green)} .dot-yellow{background:var(--yellow)}

.badge-circle {
  width:110px; height:110px; border:3px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Secular One',sans-serif; font-size:34px; flex-shrink:0;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { border-bottom:3px solid var(--ink); padding:64px 28px; }
.page-hero .narrow { text-align:center; }

/* ---------- Grids ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; }
.split { display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; }
.split.rev { grid-template-columns:1fr auto; }

/* ---------- Rule list (kashrut) ---------- */
.rule { display:grid; grid-template-columns:64px 1fr; gap:24px; align-items:start; padding:28px 0; border-bottom:2px solid var(--ink); }
.rule:last-child { border-bottom:none; }
.rule-num {
  width:52px; height:52px; border:3px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Secular One',sans-serif; font-size:20px;
}
.rule h3 { margin-bottom:8px; }
.rule p { margin:0; }

/* ---------- Timeline (shabbat program) ---------- */
.timeline { display:grid; gap:0; }
.tl-step { display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start; position:relative; padding-bottom:34px; }
.tl-step:last-child { padding-bottom:0; }
.tl-mark {
  width:44px; height:44px; border:3px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Secular One',sans-serif; font-size:17px; background:var(--paper); z-index:1;
}
.tl-step::before {
  content:""; position:absolute; top:44px; bottom:0; inset-inline-start:21px; width:3px; background:var(--ink);
}
.tl-step:last-child::before { display:none; }
.tl-step h3 { margin-bottom:4px; font-size:19px; }
.tl-step p { margin:0; font-size:16px; }

/* ---------- Shabbat live widget ---------- */
.live-row { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.live-cell { text-align:center; min-width:200px; }
.live-label { font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:500; margin-bottom:6px; }
.live-value { font-family:'Secular One',sans-serif; font-size:clamp(22px,3vw,32px); }
.live-sub { font-size:14px; opacity:.75; margin-top:4px; }

/* ---------- Links list ---------- */
.linkcard { display:block; text-decoration:none; color:var(--ink); padding:30px 28px; }
.linkcard h3 { margin-bottom:8px; }
.linkcard p { margin:0 0 12px; font-size:15.5px; }
.linkcard .go { font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:2px; }

/* ---------- Forms ---------- */
label { display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; margin-bottom:7px; }
input, textarea {
  width:100%; box-sizing:border-box; background:var(--paper);
  border:2.5px solid var(--ink); border-radius:10px 4px 12px 5px;
  font-family:'Rubik',sans-serif; font-size:16px; padding:11px 14px; color:var(--ink);
}
input:focus, textarea:focus { outline:none; border-color:var(--blue); }
textarea { min-height:90px; resize:vertical; }

/* ---------- Footer ---------- */
footer { background:var(--ink); color:#fff; text-align:center; padding:56px 28px; font-size:14px; letter-spacing:.04em; }
.footer-brand { font-family:'Secular One',sans-serif; font-size:24px; letter-spacing:.04em; margin-bottom:6px; text-transform:uppercase; }
.footer-brand span { color:var(--orange); }
footer .line { opacity:.75; }
footer a { color:var(--yellow); text-decoration:none; }
.footer-nav { margin-top:18px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.footer-nav a { color:#fff; opacity:.8; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .split, .split.rev { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .section { padding:56px 20px; }
  .page-hero { padding:48px 20px; }
  .card { padding:32px 26px; }
  .topnav { gap:14px; }
}