/*
Theme Name: Gridline Sports Light SP
Version: 1.7.25
Description: Two-row header with utility links (login/register/contact) + user icon, hard-link navigation, hero + alternating rows, Rubik.
Text Domain: gridline-sports-light-sp
*/
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --hero-bg:#f5f4f2;
  --text:#0b1220;
  --muted:#586073;
  --accent:#e10600;
  --border:#e6e7ea;
  --radius: 8px;
  --maxw: 1600px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; background:var(--bg); color:var(--text); font-family:'Rubik','Heebo','Noto Sans Hebrew',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:#0d1b36; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:16px}

/* Header */
.header{background:var(--surface)}
.topbar{background:#fff; border-bottom:1px solid #eee}
.topbar .container{display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:12px}
.topbar .secondary{display:flex; gap:18px; align-items:center}
.topbar a{font-weight:700; font-size:14px; color:#0d1b36}
.topbar a:hover{text-decoration:none; color:#111}
.userbox{display:flex; align-items:center; gap:8px; color:#0d1b36; font-weight:700}
.userbox .avatar{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; background:#f1f3f6; border:1px solid #e5e7eb}
.userbox .menu{display:flex; gap:14px}
.userbox a{color:#0d1b36}

/* Navbar */
.navbar-wrap{
  background:#0b0f19;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 6px, transparent 6px, transparent 22px);
  border-bottom:1px solid #1b2230;
}
.navbar{display:flex; align-items:center; gap:18px; min-height:56px}
.logo-small img{height:28px; width:auto}
.header-actions{margin-inline-start:auto; display:flex; gap:8px; align-items:center}

/* Search icon + dropdown */
.search-toggle{background:transparent;border:none;cursor:pointer;display:inline-grid;place-items:center;width:38px;height:38px;border-radius: 8px}
.search-toggle:hover{background:rgba(255,255,255,.06)}
.search-dropdown{position:absolute; inset-inline-start:16px; top:100%; transform:translateY(8px); background:#0b0f19; border:1px solid #1b2230; border-radius: 8px; padding:10px; display:none; z-index:50; box-shadow:0 16px 34px rgba(0,0,0,.4)}
.search-dropdown input{background:#0b0f19; color:#fff; border:1px solid #2b2f3a; padding:10px 12px; border-radius: 8px; min-width:320px}
.header.search-open .search-dropdown{display:block}
.search-form-inline{display:none}

/* Menu */
.nav{padding:0}
.nav .menu, .nav ul{list-style:none;margin:0;padding:0}
.nav .menu{display:flex;flex-wrap:wrap;gap:26px;justify-content:flex-end}
.nav .menu>li{position:relative}
.nav .menu>li>a{display:block;padding:14px 6px;font-weight:800;color:#fff;border-bottom:2px solid transparent;text-decoration:none;letter-spacing:.2px}
.nav .menu>li:hover>a,.nav .menu>li.current-menu-item>a,.nav .menu>li.current-menu-ancestor>a{border-bottom-color:var(--accent);color:#fff}
.nav .menu>li.menu-item-has-children>a::after{content:"▾";font-size:12px;margin-inline-start:6px;opacity:.7}
.nav .sub-menu{position:absolute;top:100%;inset-inline-end:0;min-width:240px;display:none;background:#0e1423;border:1px solid #1b2230;border-radius: 8px;padding:8px 0;box-shadow:0 16px 30px rgba(0,0,0,.4);z-index:1000}
.nav .sub-menu a{color:#dbe3ff}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:block}
.nav .sub-menu .sub-menu{top:0;inset-inline-end:100%}
.menu-toggle{display:none}
@media(max-width:980px){
  .menu-toggle{display:inline-block;background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius: 8px;margin:10px 0}
  .nav .menu{width:100%;flex-direction:column;gap:0;border-top:1px solid #1b2230;display:none}
  .menu-open .nav .menu{display:flex}
  .nav .menu>li>a{padding:12px 0;border-bottom:1px solid #1b2230}
  .nav .sub-menu{position:static;display:none;border:none;box-shadow:none;padding:0;background:transparent}
  .nav li.open>.sub-menu{display:block}
}

/* HERO SECTION */
.hero-section{background:var(--hero-bg); padding:18px 0}
.hero-wrap{display:grid; grid-template-columns:2.4fr 1fr; gap:18px; align-items:stretch}
@media(max-width:1200px){ .hero-wrap{grid-template-columns:2fr 1fr} }
@media(max-width:980px){ .hero-wrap{grid-template-columns:1fr} }
.hero-feature{
  position:relative; border:1px solid var(--border); border-radius: 8px; overflow:hidden;
  box-shadow:var(--shadow); background:#000; min-height: clamp(360px, 42vw, 600px); height:100%; max-height:600px;
}
.hero-feature .bg{position:absolute; inset:0; pointer-events:none}
.hero-feature .bg img{width:100%; height:100%; max-height:600px; object-fit:cover; display:block; filter:brightness(.94)}
.hero-feature .overlay{
  position:absolute; inset-inline:0; inset-block:auto 0; padding:24px 22px 26px;
  background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.0) 58%); color:#fff; pointer-events:none;
}
.hero-feature .cat{display:inline-block; background:var(--accent); color:#fff; padding:7px 10px; border-radius:999px; font:800 12px/1 'Rubik',sans-serif; margin-bottom:10px}
.hero-feature h2{margin:0; font:900 clamp(22px,4vw,44px)/1.2 'Rubik',sans-serif; text-shadow:0 4px 10px rgba(0,0,0,.45)}

/* Left list aligned to hero height */
.hero-list{display:grid; grid-template-rows:repeat(5, 1fr); height:100%; max-height:600px; gap:14px; align-content:stretch}
.hero-item{display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center; background:#fff; border:1px solid var(--border); border-radius: 8px; padding:10px; box-shadow:var(--shadow); height:100%}
.hero-item .thumb{width:96px; height:64px; border-radius: 8px; overflow:hidden; background:#eee; border:1px solid var(--border)}
.hero-item .thumb img{width:100%; height:100%; max-height:600px; object-fit:cover; display:block}
.hero-item .title{margin:0; font:800 15px/1.3 'Rubik',sans-serif; color:#0d1b36}
.hero-item .meta{font:500 12px/1.2 'Rubik',sans-serif; color:#6b7280; margin-top:2px}

/* Alternating rows under hero */
.alt-list{margin:24px 0 10px; display:flex; flex-direction:column; gap:18px}
.alt-row{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.alt-row.reverse{grid-template-columns:1fr 1fr 2fr}
@media(max-width:980px){ .alt-row, .alt-row.reverse{grid-template-columns:1fr} }
.alt-big{position:relative; border:1px solid var(--border); border-radius: 8px; overflow:hidden; box-shadow:var(--shadow); background:#000; min-height: clamp(360px, 42vw, 600px)}
.alt-big .bg{position:absolute; inset:0; pointer-events:none}
.alt-big .bg img{width:100%; height:100%; max-height:600px; object-fit:cover; display:block}
.alt-big .overlay{position:absolute; inset-inline:0; inset-block:auto 0; padding:18px; background:linear-gradient(to top, rgba(0,0,0,.7), transparent 60%); color:#fff; pointer-events:none}
.alt-big .overlay h3{margin:0; font:900 clamp(18px,2.6vw,30px)/1.2 'Rubik',sans-serif}
.alt-small{background:#fff; border:1px solid var(--border); border-radius: 8px; overflow:hidden; box-shadow:var(--shadow)}
.alt-small .thumb{aspect-ratio:16/9; background:#eee}
.alt-small .thumb img{width:100%; height:100%; max-height:600px; object-fit:cover; display:block}
.alt-small .body{padding:12px}
.meta{font-size:12px; color:#6b7280}

/* Sidebar */
.sidebar .widget{background:#fff; border:1px solid var(--border); border-radius: 8px; padding:14px; margin-bottom:16px}

/* RTL */
body{direction:rtl}
.navbar{flex-direction:row-reverse}
.logo-small{order:2}
.header-actions{order:1}
.nav{order:0}
.topbar .container{flex-direction:row-reverse}
.topbar .secondary{flex-direction:row-reverse}
.userbox{flex-direction:row-reverse}
.userbox .menu{flex-direction:row-reverse}


/* Hover zoom-in on images */
.hero-feature .bg img,
.alt-big .bg img,
.alt-small .thumb img,
.hero-item .thumb img {
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}
a.hero-feature:hover .bg img,
a.alt-big:hover .bg img,
.alt-small:hover .thumb img,
a.hero-item:hover .thumb img {
  transform: scale(1.045);
  filter: brightness(.97);
}
@media (prefers-reduced-motion: reduce) {
  .hero-feature .bg img,
  .alt-big .bg img,
  .alt-small .thumb img,
  .hero-item .thumb img {
    transition: none;
  }
}

/* Titles for every card: small cards get overlay */
.alt-small{position:relative; display:block; text-decoration:none; color:inherit}
.alt-small .overlay{
  position:absolute; inset-inline:0; inset-block:auto 0; padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.0) 60%);
  color:#fff; pointer-events:none;
}
.alt-small .overlay h4{margin:0; font:800 16px/1.25 'Rubik',sans-serif}
.alt-small .overlay .meta{margin-top:4px; font:500 12px/1 'Rubik',sans-serif; opacity:.9}

/* Recent posts grid */
.recent-widget{}
.recent-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
@media(max-width:1200px){
  .recent-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .recent-grid{grid-template-columns:1fr}
}
.recent-card{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit}
.recent-card .thumb{
  aspect-ratio:1/1; background:#eee; border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.recent-card .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease}
.recent-card:hover .thumb img{transform:scale(1.04)}
.recent-card .title{
  font:800 14px/1.25 'Rubik',sans-serif; color:#0d1b36; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Recent block as one container with 3x3 hero-like mini cards */
.recent-block{}
.recent-grid-heroish{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media(max-width:1200px){ .recent-grid-heroish{grid-template-columns:repeat(2, 1fr)} }
@media(max-width:640px){ .recent-grid-heroish{grid-template-columns:1fr} }

.recent-grid-heroish .mini-item{
  display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center;
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:10px; box-shadow:var(--shadow);
  text-decoration:none; color:inherit;
}
.recent-grid-heroish .mini-item .thumb{width:96px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:#eee}
.recent-grid-heroish .mini-item .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease}
.recent-grid-heroish .mini-item:hover .thumb img{transform:scale(1.04)}
.recent-grid-heroish .mini-item .title{display:block; font:800 15px/1.3 'Rubik',sans-serif; color:#0d1b36; margin:0 0 2px}
.recent-grid-heroish .mini-item .meta{display:block; font:500 12px/1.2 'Rubik',sans-serif; color:#6b7280}

/* =============================
   Video Highlights Section
============================= */
.video-section{
  background:#0b0f19;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 6px, transparent 6px, transparent 22px);
  padding:22px 0 28px;
  border-block:1px solid #151b28;
}
.video-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.video-title{font:900 26px/1 'Rubik',sans-serif; color:#fff; letter-spacing:.3px}
.video-actions{display:flex; align-items:center; gap:10px}
.video-actions .view-all{background:transparent; color:#fff; border:1px solid #2a3242; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:800}
.video-actions .view-all:hover{background:#121726}
.video-row{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory}
.video-row::-webkit-scrollbar{height:10px}
.video-row::-webkit-scrollbar-thumb{background:#2a3242; border-radius:8px}
.video-card{flex:0 0 360px; background:#0e1423; border:1px solid #1b2230; border-radius:8px; overflow:hidden; color:#fff; scroll-snap-align:start}
@media(max-width:980px){ .video-card{flex-basis:300px} }
.video-thumb{position:relative; aspect-ratio:16/9; background:#111}
.video-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.video-card:hover .video-thumb img{transform:scale(1.045)}
.play-badge{
  position:absolute; inset-inline-start:12px; inset-block-end:12px; width:44px; height:44px;
  border-radius:999px; display:grid; place-items:center; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.4)
}
.play-badge svg{fill:#fff}
.video-body{padding:10px 12px 12px}
.video-body h4{margin:0; font:800 16px/1.25 'Rubik',sans-serif; color:#fff}
.video-body .meta{font:500 12px/1 'Rubik',sans-serif; color:#c7d2fe; opacity:.85; margin-top:4px}
.video-nav{display:flex; gap:8px}
.video-arrow{background:#11152b; border:1px solid #2a3242; color:#fff; width:36px; height:36px; border-radius:8px; display:grid; place-items:center; cursor:pointer}
.video-arrow:hover{background:#0f1430}

/* Adjust video section spacing and scrollbar */
.video-section{margin-top:40px;}
.video-row::-webkit-scrollbar{display:none;}
.video-title{font-size:32px;}

/* v1.7.16 – video head RTL and aligned controls */
.video-head{
  direction: rtl;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.video-title{margin:0; text-align:right}
.video-actions{display:flex; align-items:center; gap:8px; direction:ltr}
.video-actions .view-all{
  height:38px; line-height:38px; padding:0 14px; display:inline-block;
  border-radius:8px;
}
.video-nav{display:flex; gap:8px}
.video-arrow{width:38px; height:38px; border-radius:8px; display:grid; place-items:center}
/* RTL scroll start from right */
.video-row{direction: rtl;}

/* v1.7.17 – increase vertical spacing for visual comfort */
.hero-section{margin-top:32px; margin-bottom:48px;}
.video-section{margin-top:60px; margin-bottom:60px;}

/* footer block replaced */
.site-footer{background:#000;color:#c9d2e9;border-top:1px solid #151b28;margin-top:60px;}
.footer-top{padding:28px 0}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:22px; align-items:start;
}
@media(max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand{display:flex; flex-direction:column; gap:12px}
.footer-brand .logo img{height:32px; width:auto}
.footer-brand p{margin:0; color:#a6b0c7; font:400 14px/1.5 'Rubik',sans-serif}
.footer-col h4{margin:0 0 10px; color:#fff; font:900 15px/1 'Rubik',sans-serif}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-links a{color:#dbe3ff; text-decoration:none; font-weight:700}
.footer-links a:hover{text-decoration:underline}
.footer-social{display:flex; gap:10px; margin-top:6px}
.footer-social a{width:36px; height:36px; border-radius:8px; border:1px solid #2a3242; display:grid; place-items:center; color:#fff; text-decoration:none}
.footer-social a:hover{background:#10162b}
.footer-bottom{border-top:1px solid #151b28; padding:12px 0; color:#94a3b8; font:500 13px 'Rubik',sans-serif}
.footer-bottom .row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer-bottom .links{display:flex; gap:14px}
/* RTL alignment */
.site-footer .container{direction:rtl}
.footer-bottom .links{flex-direction:row-reverse}

/* =============================
   Latest News Section (white)
============================= */
.latest-news-section{
  background:#fff;
  padding:40px 0;
  margin-top:60px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.latest-news-title{direction:rtl; text-align:right; color:#000; font:900 32px/1 'Rubik',sans-serif; margin:0 0 10px; position:relative; display:block;}
  content:'';
  display:block;
  width:64px;
  height:3px;
  background:#e10600; /* F1 red accent */
  margin-top:10px;
  margin-inline-start:auto; /* align to right in RTL */
  border-radius:8px;
}

/* v1.7.21 – mobile spacing tuning */
@media(max-width:980px){
  .hero-section{margin-top:20px; margin-bottom:32px;}
  .video-section{margin-top:40px; margin-bottom:40px;}
  .latest-news-section{padding:28px 0; margin-top:40px;}
  .latest-news-title{direction:rtl; text-align:right; color:#000; font:900 32px/1 'Rubik',sans-serif; margin:0 0 10px; position:relative; display:block;}
}
@media(max-width:640px){
  .hero-section{margin-top:16px; margin-bottom:24px;}
  .video-section{margin-top:28px; margin-bottom:32px;}
  .latest-news-section{padding:22px 0; margin-top:28px;}
  .latest-news-title{direction:rtl; text-align:right; color:#000; font:900 32px/1 'Rubik',sans-serif; margin:0 0 10px; position:relative; display:block;}
}

/* =============================
   Footer (v1.7.22)
============================= */
.site-footer{background:#000 !important; color:#c9d2e9; border-top:1px solid #151b28; margin-top:60px; width:100%;}
.footer-top{padding:0; min-height:250px; display:flex; align-items:center;}
.site-footer .container{direction:rtl}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:22px; align-items:start; width:100%;}
@media(max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-top{min-height:unset; padding:24px 0;} }
@media(max-width:640px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand .logo img{height:32px; width:auto}
.footer-col h4{margin:0 0 10px; color:#fff; font:900 15px/1 'Rubik',sans-serif}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-links a{color:#dbe3ff; text-decoration:none; font-weight:700}
.footer-links a:hover{text-decoration:underline}
.footer-social{display:flex; gap:10px; margin-top:6px}
.footer-social a{width:36px; height:36px; border-radius:8px; border:1px solid #2a3242; display:grid; place-items:center; color:#fff; text-decoration:none}
.footer-social a:hover{background:#10162b}
.footer-bottom{border-top:1px solid #151b28; padding:12px 0; color:#94a3b8; font:500 13px 'Rubik',sans-serif}
.footer-bottom .row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer-bottom .links{display:flex; gap:14px; flex-direction:row-reverse}

/* =============================
   Drivers strip + Standings
============================= */
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; direction:rtl; margin-bottom:12px}
.section-head h3{margin:0; font:900 26px/1 'Rubik',sans-serif; color:#000; text-align:right}
.section-actions{display:flex; align-items:center; gap:8px; direction:ltr}
.section-actions .view-all{background:#fff; color:#0d1b36; border:1px solid var(--border); padding:8px 12px; border-radius:8px; font-weight:800; text-decoration:none}
.section-actions .view-all:hover{background:#f6f7fb}
.section-row{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.section-row::-webkit-scrollbar{height:10px}
.section-row::-webkit-scrollbar-thumb{background:#d5dae7; border-radius:8px}

.driver-card{flex:0 0 220px; background:#fff; border:1px solid var(--border); border-radius:8px; scroll-snap-align:start; overflow:hidden; text-decoration:none; color:#0d1b36}
.driver-pic{aspect-ratio:3/4; background:#eee}
.driver-pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.driver-card:hover .driver-pic img{transform:scale(1.045)}
.driver-body{padding:10px 12px}
.driver-name{font:900 18px/1.2 'Rubik',sans-serif; margin:0}
.driver-sub{font:500 12px/1 'Rubik',sans-serif; color:#6b7280; margin-top:4px}

.standings-wrap{background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px}
.standings-wrap .sp-league-table, .standings-wrap table{width:100%}
/* align SportsPress default to theme */
.standings-wrap table thead th{font:900 12px/1 'Rubik',sans-serif; color:#6b7280; text-transform:uppercase}
.standings-wrap table td, .standings-wrap table th{padding:14px 12px; border-color:#eee}
.standings-actions{display:flex; justify-content:center; margin-top:12px}
.standings-actions .view-all{background:#fff; color:#0d1b36; border:1px solid var(--border); padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:900}
.standings-actions .view-all:hover{background:#f6f7fb}

/* v1.7.24 – team-colored driver cards */
.driver-card.colored{
  padding:6px;
  border:0;
  border-radius:12px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(135deg, var(--team) 0%, color-mix(in srgb, var(--team) 80%, #000) 100%);
  color:#fff;
  box-shadow: var(--shadow);
}
.driver-card.colored .driver-pic{border-radius:10px; background:#0b0f19}
.driver-card.colored .driver-body{color:#fff}
.driver-card.colored .driver-sub{color:rgba(255,255,255,.85)}

/* v1.7.25 – team border + badge */
.driver-card.colored{position:relative}
.driver-card.colored .driver-pic{
  position:relative;
  border:2px solid var(--team);
  overflow:hidden;
}
.team-badge{
  position:absolute;
  inset-inline-start:10px;
  inset-block-start:10px;
  width:34px; height:34px;
  border-radius:999px;
  background:#0008;
  border:2px solid #fff;
  display:grid; place-items:center;
  z-index:2;
  overflow:hidden;
}
.team-badge img{width:100%; height:100%; object-fit:cover; display:block}
.team-badge .abbr{
  font:900 11px/1 'Rubik',sans-serif;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}