/* =========================================================================
   UR28 · יורו 2028 · style.css  (v2)
   שפה עיצובית: פורטל ספורט צפוף + "חוט שדרה" בצבעי ארבע המארחות.
   ========================================================================= */

:root{
  --paper:#EDF0F4;
  --card:#FFFFFF;
  --ink:#0F1620;
  --ink-2:#3C4854;
  --muted:#6C7885;
  --line:#DFE4EA;
  --line-2:#C6CDD6;

  --navy:#141F45;
  --navy-2:#26386E;
  --red:#CE1126;    /* אנגליה */
  --blue:#0B5EB8;   /* סקוטלנד */
  --green:#0A9455;  /* ויילס */
  --orange:#FF883E; /* אירלנד */
  --israel:#0038B8;
  --amber:#B8860B;

  --r:5px;
  --font:'Heebo','Assistant',Arial,sans-serif;
  --num:'Saira Condensed','Heebo',sans-serif;
  --shadow:0 1px 2px rgba(15,22,32,.07);
  --shadow-2:0 3px 12px rgba(15,22,32,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--navy-2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== חוט השדרה: ארבע המארחות ===== */
.spine{display:flex;height:4px}
.spine i{flex:1}
.spine i:nth-child(1){background:var(--red)}
.spine i:nth-child(2){background:var(--blue)}
.spine i:nth-child(3){background:var(--green)}
.spine i:nth-child(4){background:var(--orange)}

/* ================= HEADER ================= */
.masthead{position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.mh-top{background:var(--navy)}
.mh-in{max-width:1180px;margin:0 auto;padding:0 14px;height:56px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;flex-shrink:0}
.logo:hover{text-decoration:none}
.logo .mark{
  width:36px;height:36px;background:#fff;color:var(--navy);border-radius:var(--r);
  display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:22px;letter-spacing:-.5px;
}
.logo .wm{font-weight:900;font-size:23px;letter-spacing:-.6px;line-height:1}
.logo .wm b{color:#F2C230;font-weight:900}
.logo .tag{display:block;font-size:10.5px;font-weight:400;color:rgba(255,255,255,.55);letter-spacing:.02em}
.mh-date{margin-inline-start:auto;font-size:12.5px;color:rgba(255,255,255,.6);white-space:nowrap}
.mh-cta{background:var(--red);color:#fff;font-size:13px;font-weight:700;padding:7px 13px;border-radius:var(--r);white-space:nowrap}
.mh-cta:hover{background:#e11a2e;text-decoration:none}

.mainnav{background:#0C1531}
.mainnav ul{max-width:1180px;margin:0 auto;padding:0 14px;display:flex;list-style:none;overflow-x:auto;scrollbar-width:none}
.mainnav ul::-webkit-scrollbar{display:none}
.mainnav a{display:block;color:rgba(255,255,255,.72);font-size:14px;font-weight:500;padding:11px 14px;white-space:nowrap;border-bottom:3px solid transparent}
.mainnav a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.mainnav a.on{color:#fff;border-bottom-color:var(--red);font-weight:700}

.ticker{background:#fff;border-bottom:1px solid var(--line)}
.ticker .in{max-width:1180px;margin:0 auto;padding:0 14px;display:flex;align-items:center;gap:12px;height:38px;overflow:hidden;font-size:13.5px}
.ticker .tag{background:var(--red);color:#fff;font-weight:700;font-size:11px;letter-spacing:.05em;padding:3px 8px;border-radius:2px;flex-shrink:0}
.ticker .items{display:flex;gap:22px;white-space:nowrap;overflow:hidden;flex:1}
.ticker .items a{color:var(--ink-2)}
.ticker .items a:hover{color:var(--red);text-decoration:none}
.ticker .items i{color:var(--line-2);font-style:normal}

/* ================= LAYOUT ================= */
.shell{max-width:1180px;margin:0 auto;padding:16px 14px 44px;display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:16px;align-items:start}
.rail{position:sticky;top:114px;display:grid;gap:14px}

/* ================= HERO ================= */
.hero{border-radius:var(--r);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-2)}
.hero-main{
  background:var(--navy);color:#fff;padding:24px;
  display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:24px;align-items:center;
}
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#F2C230;letter-spacing:.03em}
.kicker b{width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 0 3px rgba(206,17,38,.28)}
.hero h1{font-size:clamp(25px,3.5vw,34px);font-weight:900;line-height:1.22;letter-spacing:-.5px;margin:10px 0}
.hero .lead{font-size:15.5px;color:rgba(255,255,255,.76);max-width:620px}
.hero .lead b{color:#fff;font-weight:700}

.hero-panel{
  position:relative;overflow:hidden;
  border-inline-start:1px solid rgba(255,255,255,.16);
  padding-inline-start:22px;
}
.hero-panel .wm{
  position:absolute;inset-inline-end:-18px;top:-32px;
  font-family:var(--num);font-weight:700;font-size:150px;line-height:1;
  color:rgba(255,255,255,.055);pointer-events:none;user-select:none;
}
.hp-label{position:relative;font-size:11px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.hero-date{position:relative;display:flex;align-items:baseline;gap:9px;margin-top:4px;font-family:var(--num);line-height:1}
.hero-date .d{font-size:38px;font-weight:700;letter-spacing:-.5px}
.hero-date .arw{color:var(--red);font-size:22px;font-weight:700}
.hp-year{position:relative;font-family:var(--num);font-size:20px;font-weight:600;color:rgba(255,255,255,.5);margin-top:1px}
.hero-hosts{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.hero-hosts span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.78)}
.hero-hosts img{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex-shrink:0}

.facts{display:grid;grid-template-columns:repeat(4,1fr);background:#0C1531;border-top:1px solid rgba(255,255,255,.1)}
.facts div{padding:11px 14px 10px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.09)}
.facts div:first-child{border-inline-start:0}
.facts .k{font-size:11px;color:rgba(255,255,255,.48);font-weight:500}
.facts .v{font-family:var(--num);font-size:24px;font-weight:700;color:#fff;line-height:1.15;margin-top:2px}
.facts .hi{background:rgba(206,17,38,.16);box-shadow:inset 0 -3px 0 var(--red)}
.facts .hi .k{color:rgba(255,255,255,.7)}
.facts .hi .v{color:#FF8794}

/* ================= MODULES ================= */
.mod{--acc:var(--navy);background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
.mod.acc-israel{--acc:var(--israel)}
.mod.acc-red{--acc:var(--red)}
.mod.acc-green{--acc:var(--green)}
.mod.acc-orange{--acc:var(--orange)}
.mod.acc-blue{--acc:var(--blue)}
.mod-h{display:flex;align-items:center;gap:10px;padding:13px 14px 11px;border-bottom:2px solid var(--acc);background:#fff}
.mod-h:before{content:"";width:5px;height:19px;background:var(--acc);border-radius:1px;flex-shrink:0}
.mod-h h2{font-size:19px;font-weight:900;letter-spacing:-.3px;line-height:1.25}
.mod-h .sub{margin-inline-start:auto;font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.mod-b{padding:15px}
.mod-f{border-top:1px solid var(--line);padding:10px 14px;background:#F7F9FB;font-size:12.5px;color:var(--muted);line-height:1.55}
.mod-f b{color:var(--ink-2)}
.mod-sub-h{background:#F2F5F8;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 14px;font-weight:900;font-size:15px}

.rail .mod-h{background:var(--navy);border-bottom:0;padding:11px 13px}
.rail .mod-h:before{background:#F2C230;height:16px;width:4px}
.rail .mod-h h2{color:#fff;font-size:15px;font-weight:700}

/* ================= TABLES ================= */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 11px;text-align:right;font-size:14px;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:#F2F5F8;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--line-2)}
tbody tr:nth-child(even){background:#FAFBFC}
tbody tr:hover{background:#F1F5FA}
tbody tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto}
tr.me{background:#EAF0FF!important;box-shadow:inset 3px 0 0 var(--israel)}
tr.me:hover{background:#DFE8FF!important}
tr.me td{font-weight:700}
td.c,th.c{text-align:center}
.flag{width:21px;height:15px;border-radius:2px;box-shadow:0 0 0 1px var(--line);display:inline-block;vertical-align:-2px;margin-inline-end:7px;object-fit:cover}

/* ================= FIXTURES ================= */
.fx-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:11px 13px;background:#F7F9FB;border-bottom:1px solid var(--line)}
.fx-toolbar button{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-family:var(--font);font-size:13px;font-weight:500;padding:6px 12px;border-radius:99px;cursor:pointer;transition:.14s}
.fx-toolbar button:hover{border-color:var(--navy);color:var(--navy)}
.fx-toolbar button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.fx-toolbar select{margin-inline-start:auto;border:1px solid var(--line-2);border-radius:var(--r);padding:6px 9px;font-family:var(--font);font-size:13px;background:#fff;color:var(--ink-2)}

.fx-day{
  position:sticky;top:96px;z-index:5;
  background:var(--navy);color:#fff;padding:6px 13px;font-size:12.5px;font-weight:700;
}
.fx-day .dow{color:rgba(255,255,255,.55);font-weight:400}

.fx{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 13px;border-bottom:1px solid var(--line);
  border-inline-start:3px solid var(--st,var(--line-2));transition:background .12s;
}
.fx:nth-child(even){background:#FAFBFC}
.fx:hover{background:#F1F5FA}
.fx .g{
  width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--st,var(--navy));color:#fff;font-family:var(--num);font-weight:700;font-size:18px;
}
.fx .g.sm{font-size:12px;font-weight:600}
.fx .teams{font-size:15.5px;font-weight:700;letter-spacing:-.2px}
.fx .teams span{color:var(--muted);font-weight:400;padding:0 6px}
.fx .sub{font-size:12px;color:var(--muted);margin-top:1px}
.fx .sub b{color:var(--st,var(--navy));font-weight:700}
.fx .v{text-align:end;font-size:12.5px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:7px}
.fx .v em{font-style:normal;display:block;color:var(--ink-2);font-weight:600;font-size:13px}
.fx .v img{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px var(--line)}

.st-group{--st:var(--navy)}
.st-r16{--st:var(--blue)}
.st-qf{--st:var(--green)}
.st-sf{--st:var(--orange)}
.st-final{--st:var(--red)}

/* ================= 24 SLOTS ================= */
.slots-h{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 12px}
.slots-h button{border:1px solid var(--line-2);background:#fff;font-family:var(--font);font-size:13px;padding:6px 11px;border-radius:var(--r);cursor:pointer;color:var(--ink-2);transition:.14s}
.slots-h button:hover{border-color:var(--navy)}
.slots-h button.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}
.slots{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.slot{
  height:34px;border-radius:3px;display:grid;place-items:center;
  font-family:var(--num);font-size:13px;font-weight:600;color:#fff;
  transition:background .3s ease;
}
.s-win{background:var(--navy)}
.s-run{background:#7684A8}
.s-host{background:var(--green)}
.s-po{background:var(--red)}
.slots-lg{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:11px;font-size:12.5px;color:var(--ink-2)}
.slots-lg i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-inline-end:6px;vertical-align:-1px}
.slots-note{margin-top:11px;padding:11px 13px;background:#F5F7FA;border-inline-start:3px solid var(--navy);font-size:13.5px;color:var(--ink-2);min-height:54px}

/* ================= RAIL WIDGETS ================= */
.cd-sw{display:flex;gap:5px;margin-bottom:10px}
.cd-sw button{flex:1;border:1px solid var(--line-2);background:#fff;font-family:var(--font);font-size:12.5px;padding:5px;border-radius:var(--r);cursor:pointer;color:var(--ink-2)}
.cd-sw button.on{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;text-align:center}
.cd div{background:var(--navy);color:#fff;border-radius:var(--r);padding:9px 2px 7px;position:relative;overflow:hidden}
.cd div:after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--red)}
.cd div:nth-child(2):after{background:var(--blue)}
.cd div:nth-child(3):after{background:var(--green)}
.cd div:nth-child(4):after{background:var(--orange)}
.cd .n{font-family:var(--num);font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cd .l{font-size:10.5px;color:rgba(255,255,255,.6);margin-top:3px}
.cd-cap{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}

.next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center}
.next .vs{display:flex;align-items:center;gap:4px;flex-shrink:0}
.next .vs img{width:29px;height:21px;border-radius:2px;box-shadow:0 0 0 1px var(--line);flex-shrink:0}
.next .vs i{font-style:normal;color:var(--muted);font-size:10.5px;font-weight:700;padding:0 1px}
.next .t{font-weight:900;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next .d{font-size:12px;color:var(--muted);line-height:1.45;margin-top:1px}
.ha{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;white-space:nowrap}
.ha-home{background:#E4F3EA;color:var(--green)}
.ha-away{background:#E7EEF9;color:var(--blue)}

.news li{list-style:none;padding:10px 13px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.news li:last-child{border-bottom:0}
.news li:hover{background:#F7F9FB}
.news a{color:var(--ink);font-weight:600}
.news .dt{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

.keys{list-style:none}
.keys li{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.keys li:last-child{border-bottom:0}
.keys .dd{font-family:var(--num);font-weight:600;font-size:15px;color:var(--navy);min-width:70px}
.keys .now{color:var(--red)}

.livebar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:8px 13px;background:#F7F9FB;border-top:1px solid var(--line)}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(10,148,85,.16)}
.dotlive.off{background:var(--muted);box-shadow:none}

/* ================= TIMELINE ================= */
.tl{list-style:none}
.tl li{display:grid;grid-template-columns:26px 150px 1fr;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);align-items:start}
.tl li:last-child{border-bottom:0}
.tl .pip{width:11px;height:11px;border-radius:50%;border:2px solid var(--line-2);background:#fff;margin:5px auto 0}
.tl li.next .pip{border-color:var(--red);background:var(--red);box-shadow:0 0 0 4px rgba(206,17,38,.14)}
.tl .w{font-family:var(--num);font-size:15px;font-weight:600;color:var(--navy)}
.tl li.next .w{color:var(--red)}
.tl .t{font-weight:700;font-size:15px}
.tl .x{font-size:13.5px;color:var(--muted)}

/* ================= TEXT ================= */
.prose p{margin-bottom:11px;color:var(--ink-2);font-size:15px}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink)}
.note{background:#FFF8E6;border-inline-start:3px solid var(--amber);padding:10px 12px;font-size:13.5px;color:#5A4712;margin-top:12px}
.note.red{background:#FDECEE;border-color:var(--red);color:#7A1220}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#F7F9FB}
.faq summary:after{content:"+";color:var(--red);font-weight:900;font-size:18px;flex-shrink:0;line-height:1.2}
.faq details[open] summary{background:#F7F9FB}
.faq details[open] summary:after{content:"-"}
.faq .a{padding:2px 14px 14px;color:var(--ink-2);font-size:14.5px}

/* signup */
.signup{display:flex;gap:7px;flex-wrap:wrap}
.signup input{flex:1;min-width:170px;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 11px;font-family:var(--font);font-size:14px}
.signup input:focus{outline:none;border-color:var(--navy)}
.signup button{background:var(--red);color:#fff;border:0;border-radius:var(--r);padding:10px 18px;font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer}
.signup button:hover{background:#e11a2e}
.msg{font-size:13px;font-weight:700;margin-top:8px;min-height:18px}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}

/* ads */
.ad{margin-bottom:16px;text-align:center;background:#E5E9EE;border:1px solid var(--line);border-radius:var(--r);padding:9px}
.ad .lb{font-size:10px;color:var(--muted);letter-spacing:.09em;margin-bottom:5px}
.ad ins{display:block;min-height:100px}
.ad.rail ins{min-height:250px}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.7);padding:0 0 28px;font-size:13.5px}
footer .in{max-width:1180px;margin:0 auto;padding:0 14px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 16px}
footer nav a{color:rgba(255,255,255,.82)}
footer .fine{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;font-size:12px;color:rgba(255,255,255,.48);line-height:1.7}

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .rail{position:static}
  .hero-main{grid-template-columns:1fr;gap:18px}
  .hero-panel{border-inline-start:0;border-top:1px solid rgba(255,255,255,.14);padding-inline-start:0;padding-top:16px}
  .hero-panel .wm{inset-inline-end:0;top:auto;bottom:-24px;font-size:120px}
  .hero-hosts{grid-template-columns:repeat(4,auto);justify-content:start;gap:14px}
}
@media(max-width:620px){
  html{scroll-padding-top:120px}
  .mh-date{display:none}
  .hero-main{padding:18px 16px}
  .hero-date .d{font-size:32px}
  .hero-hosts{grid-template-columns:1fr 1fr;gap:6px 10px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts div:nth-child(3){border-inline-start:0}
  .facts div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .slots{grid-template-columns:repeat(8,1fr)}
  .tl li{grid-template-columns:20px 1fr;gap:8px}
  .tl .w{grid-column:2}
  .tl li>div:last-child{grid-column:2}
  .fx{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .fx .g{width:30px;height:30px;font-size:15px}
  .fx .v{grid-column:2;text-align:start;justify-content:flex-start}
  .fx-day{top:92px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}