/*
 Theme Name:   Twenty Twenty-Five Child (Hub Garage)
 Theme URI:    https://itzik.hub.co.il
 Description:  תבנית בת מותאמת אישית למוסך איציק לוי
 Author:       Hub Asset Management
 Template:     twentytwentyfive
 Version:      1.1.0
 Text Domain:  twentytwentyfive-child
*/

/* Design tokens */
:root{
  --hub-brand: #1677ff;
  --hub-bg: #0e1116;
  --hub-surface: rgba(28, 33, 41, 0.72);
  --hub-border: rgba(255,255,255,0.10);
  --hub-text: rgba(255,255,255,0.92);
  --hub-muted: rgba(255,255,255,0.68);
  --hub-radius: 22px;
  --hub-font-scale: 1;
}

html { font-size: calc(16px * var(--hub-font-scale)); }
body { background: var(--hub-bg); color: var(--hub-text); }

.hub-container{ max-width: 1200px; margin: 0 auto; padding-inline: 24px; }

/* Background grain */
.hub-grain{
  position: relative;
  isolation: isolate;
}
.hub-grain::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .08;
  pointer-events:none;
  mix-blend-mode: overlay;
  z-index: 0;
}
.hub-grain > *{ position: relative; z-index: 1; }

/* Surfaces */
.hub-card{
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

.hub-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--hub-text);
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
}

.hub-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .9rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--hub-text);
  font-weight: 800;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  text-decoration: none;
}
.hub-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.hub-btn--brand{ background: var(--hub-brand); border-color: rgba(255,255,255,.10); color: #fff; }
.hub-btn--ghost{ background: rgba(255,255,255,.05); }
.hub-btn--small{ padding: .65rem .9rem; border-radius: 14px; font-size: .95rem; }

/* Nav */
.hub-topbar{
  position: sticky; top:0; z-index: 999;
  background: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hub-nav a{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-weight: 800;
}
.hub-nav a:hover{ color:#fff; }

.hub-bottombar{
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 999;
  padding: 10px 12px;
  background: rgba(10, 12, 16, 0.72);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.08);
  display:none;
}
@media (max-width: 900px){
  body{ padding-bottom: 78px; }
  .hub-bottombar{ display:flex; gap:10px; }
}

/* Floating left rail */
.hub-float-left{
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(10, 12, 16, 0.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}
.hub-float-left a{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration:none;
}
.hub-float-left a:hover{ filter: brightness(1.08); }

/* A11y widget (right) */
.hub-a11y{
  position: fixed;
  right: 14px;
  top: 55%;
  transform: translateY(-50%);
  z-index: 999;
}
.hub-a11y__toggle{
  width: 52px; height: 52px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10, 12, 16, 0.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
}
.hub-a11y__panel{
  margin-top: 10px;
  width: 220px;
  padding: 12px;
  border-radius: 18px;
  display:none;
}
.hub-a11y__panel.is-open{ display:block; }
.hub-a11y__row{ display:flex; gap:10px; margin-top: 10px; }
.hub-a11y__btn{
  flex:1;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-weight: 800;
  cursor:pointer;
}

/* Optional contrast */
.hub-contrast body{ background: #000; }
.hub-contrast .hub-card{ background: rgba(0,0,0,.85); border-color: rgba(255,255,255,.25); }
.hub-links a{ outline: 2px dashed rgba(255,255,255,.6); outline-offset: 4px; }

/* Woo tweaks */
.woocommerce .products ul, .woocommerce ul.products{ margin-top: 20px; }
.woocommerce ul.products li.product{
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: 18px;
  padding: 16px;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--hub-brand);
  color: #fff;
  border-radius: 14px;
  border: 0;
  font-weight: 900;
}