/* ============================================================
   brand.css — שכבת המותג של אלעד וייטמן  (v1, 2026-07-28)
   ------------------------------------------------------------
   מה זה: שכבה דקה שנטענת מעל שלושת האתרים ומאחדת אותם ויזואלית
   בלי לגעת בעיצוב הפנימי שלהם.

     eladweitman.com              (WordPress)
     photography.eladweitman.com  (קוד)
     portfolio-bundle.*           (React/Vite)

   עקרון: האתרים נשארים כמו שהם. השכבה היא **המסגרת** —
   סרט מותג עליון + פוטר מאוחד + נגיעות זהב אופציונליות.
   אנחנו לא כופים דארק על אתר בהיר. מסגרת אחת, תוכן משלו.

   טעינה (שתי שורות בכל אתר):
     <link rel="stylesheet" href="https://hub.eladweitman.com/brand/brand.css">
     <script defer src="https://hub.eladweitman.com/brand/brand.js"></script>

   מקור האמת לטוקנים: **portfolio-bundle** (src/styles.css) + **ad-builder**
   (assets/render.py). שני אלה כבר מסכימים: Futurism + זהב עתיק מעומעם.
   photography.* כבר מגיש Futurism ב-woff2 בעצמו.

   ⚠️ ההאב (css/style.css) משתמש ב-Discovery ובזהב ענבר #e8b64c — זה
   הכלי הפנימי, לא המותג מול הלקוח. **לא ללכת לפיו כאן.**
   ============================================================ */


/* ─── פונט המותג — Futurism ────────────────────────────────
   אותו פונט של שלושת הנכסים מול-הלקוח ושל המודעות.

   מוצהר בשם נפרד — FuturismEW — ולא 'Futurism', בכוונה:
   אתר מארח שכבר מגיש Futurism משלו (photography.* ו-portfolio-bundle
   עושים בדיוק את זה) ישתמש בעותק שלו, ורק אתר שאין לו ייפול לכאן.
   הסדר ב---ew-font קובע: 'Futurism' קודם, 'FuturismEW' אחריו.
   כך אין הורדה כפולה ואין דריסה של הצהרת האתר המארח.

   נטען מההאב, דורש CORS על /fonts/* (ראה _headers).
   אם לא נטען — נופל לפונט המערכת. לא שובר כלום.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'FuturismEW';
  src: url('https://hub.eladweitman.com/fonts/Futurism-Light.woff') format('woff');
  font-weight: 100 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FuturismEW';
  src: url('https://hub.eladweitman.com/fonts/Futurism-Bold.woff') format('woff');
  font-weight: 600 900; font-style: normal; font-display: swap;
}


/* ─── טוקני המותג ─────────────────────────────────────────
   מקודמים ב-ew- כדי שלא יתנגשו במשתנים של האתר המארח.
   הערכים לקוחים מ-portfolio-bundle — האתר הדגל מול הלקוח.
   ------------------------------------------------------------ */

:root {
  --ew-black:    #0d0c0a;   /* שחור חמים — bg של portfolio-bundle */
  --ew-surface:  #14120f;   /* כרטיס */
  --ew-gold:     #c9a86c;   /* זהב עתיק — האקצנט היחיד. במודעות: #C9A961 */
  --ew-gold-dim: #8f7748;   /* זהב מעומעם — קווים, מצב רגיל */
  --ew-text:     #ece7de;
  --ew-muted:    #b5ac9d;
  --ew-line:     rgba(236, 231, 222, 0.14);
  --ew-font:     'Futurism', 'FuturismEW', system-ui, sans-serif;
  --ew-radius:   2px;       /* פינות חדות — שפת portfolio-bundle. לא pills. */
  --ew-ribbon-h: 46px;
}


/* ─── 1. סרט המותג ────────────────────────────────────────
   סטטי בראש המסמך — לא fixed. החלטה מכוונת: אתר מארח עם
   הדר קבוע משלו יתנגש ב-fixed, וזו בדיוק הסיבה ששכבה
   כזו שוברת אתרים. הסרט מזהה את המותג ברגע ההגעה (שם זה
   נחוץ) וגולל החוצה. הפוטר מחזיק את הקישור המתמשך.
   ------------------------------------------------------------ */

.ew-ribbon {
  all: initial;
  display: block;
  box-sizing: border-box;
  direction: rtl;
  font-family: var(--ew-font);
  background: var(--ew-black);
  border-bottom: 1px solid rgba(201, 168, 108, 0.22);
  width: 100%;
  position: relative;
  z-index: 2147483000;   /* מעל כל דבר של האתר המארח */
}

.ew-ribbon * { box-sizing: border-box; }

.ew-ribbon__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1240px;
  min-height: var(--ew-ribbon-h);
  margin: 0 auto;
  padding: 0 22px;
}

/* חתימת המותג — תמיד מובילה למותג-האם */
.ew-ribbon__mark {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ew-text);
  white-space: nowrap;
}
.ew-ribbon__mark:hover { color: var(--ew-gold); }
.ew-ribbon__mark::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ew-gold);
  flex-shrink: 0;
}

/* המסר — נעלם במובייל, הוא נחמד ולא קריטי */
.ew-ribbon__tagline {
  font-size: 13px;
  font-weight: 300;
  color: var(--ew-muted);
  white-space: nowrap;
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--ew-line);
}

/* שלושת השערים */
.ew-ribbon__gates {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.ew-ribbon__gates::-webkit-scrollbar { display: none; }

.ew-ribbon__gate {
  display: block;
  padding: 7px 13px;
  border-radius: var(--ew-radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ew-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.ew-ribbon__gate:hover {
  color: var(--ew-text);
  background: rgba(255, 255, 255, 0.05);
}
/* השער שאתה נמצא בו כרגע */
.ew-ribbon__gate[aria-current='page'] {
  color: var(--ew-gold);
  background: rgba(201, 168, 108, 0.10);
}

@media (max-width: 860px) {
  .ew-ribbon__tagline { display: none; }
  .ew-ribbon__inner { gap: 12px; padding: 0 14px; }
  .ew-ribbon__gates { margin-inline-start: 0; }
  .ew-ribbon__gate { padding: 7px 10px; font-size: 13px; }
}


/* ─── 2. פוטר מאוחד ───────────────────────────────────────
   נספח בסוף המסמך, מתחת לפוטר של האתר המארח. זה החלק
   שנשאר איתו — ערוץ יצירת קשר אחד וקישור צולב לשלושת הקווים.
   ------------------------------------------------------------ */

.ew-foot {
  all: initial;
  display: block;
  box-sizing: border-box;
  direction: rtl;
  font-family: var(--ew-font);
  background: var(--ew-black);
  color: var(--ew-text);
  border-top: 1px solid rgba(201, 168, 108, 0.22);
  padding: 52px 22px 34px;
}
.ew-foot * { box-sizing: border-box; }

.ew-foot__inner { max-width: 1240px; margin: 0 auto; }

.ew-foot__claim {
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.22;
  margin: 0 0 10px;
  color: var(--ew-text);
}
.ew-foot__claim em {
  font-style: normal;
  color: var(--ew-gold);
}
.ew-foot__sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ew-muted);
  margin: 0 0 34px;
  max-width: 46ch;
}

.ew-foot__gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 38px;
}
.ew-foot__card {
  display: block;
  padding: 20px 20px 18px;
  border: 1px solid var(--ew-line);
  border-radius: var(--ew-radius);
  background: var(--ew-surface);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.ew-foot__card:hover {
  border-color: rgba(201, 168, 108, 0.45);
  transform: translateY(-2px);
}
.ew-foot__card b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ew-text);
  margin-bottom: 5px;
}
.ew-foot__card span {
  display: block;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ew-muted);
}

.ew-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-top: 22px;
  border-top: 1px solid var(--ew-line);
}
.ew-foot__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ew-muted);
  text-decoration: none;
}
.ew-foot__link:hover { color: var(--ew-gold); }
.ew-foot__cta {
  padding: 10px 22px;
  border-radius: var(--ew-radius);
  background: var(--ew-gold);
  color: var(--ew-black);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.ew-foot__cta:hover { background: #dcbe86; }
.ew-foot__legal {
  margin-inline-start: auto;
  font-size: 12.5px;
  font-weight: 300;
  color: #55534d;
}

@media (max-width: 700px) {
  .ew-foot { padding: 38px 16px 26px; }
  .ew-foot__legal { margin-inline-start: 0; width: 100%; }
}


/* ─── 3. נגיעות זהב — אופט-אין ────────────────────────────
   לא מוחלות אוטומטית. מוסיפים ידנית מחלקה על אלמנט
   באתר המארח כשרוצים שהוא ידבר בשפת המותג.
   כך אתר בהיר נשאר בהיר, ומקבל את הזהב רק היכן שבחרנו.
   ------------------------------------------------------------ */

.ew-gold          { color: var(--ew-gold) !important; }
.ew-rule          { border-color: rgba(201, 168, 108, 0.42) !important; }

/* כפתור בשפת המותג */
.ew-btn {
  display: inline-block;
  font-family: var(--ew-font);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: var(--ew-radius);
  background: var(--ew-gold);
  color: var(--ew-black) !important;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
}
.ew-btn:hover { background: #dcbe86; }

.ew-btn--ghost {
  background: transparent;
  color: var(--ew-gold) !important;
  border: 1px solid rgba(201, 168, 108, 0.45);
}
.ew-btn--ghost:hover { background: rgba(201, 168, 108, 0.10); }

/* קו זהב דק מתחת לכותרת — הנגיעה הכי זולה וכי מזוהה */
.ew-underline {
  position: relative;
  padding-bottom: 14px;
}
.ew-underline::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 54px;
  height: 2px;
  background: var(--ew-gold);
}

/* מצב מלא — לאתר שכן רוצה להיות דארק לגמרי (בסופו של דבר
   photography.*). נוסף ידנית על <html data-ew-theme="dark">. */
[data-ew-theme='dark'] {
  background: var(--ew-black);
  color: var(--ew-text);
}


/* ─── הדפסה ומעדיפי-תנועה-מופחתת ─────────────────────────── */

@media print {
  .ew-ribbon, .ew-foot { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ew-foot__card { transition: none; }
  .ew-foot__card:hover { transform: none; }
}