/* ==========================================
   1. הגדרות בסיס ופונטים
   ========================================== */
@font-face {
    font-family: 'Gadi Almog';
    src: url('gadi-almog-webfont.woff2') format('woff2'),
         url('gadi-almog-webfont.woff') format('woff'),
         url('gadi-almog-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 85px;
}

body, input, textarea, button {
    background-color: #0a0a0a;
    color: #ffffff;
    font-family: 'Cascadia Mono', monospace;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==========================================
   2. סרגל ניווט (Navbar)
   ========================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: #121212;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
}

.logo {
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.25s ease;
}

.nav-links a.cta-link {
    background: #ffffff;
    color: #0a0a0a;
    padding: 8px 18px;
    border-radius: 4px;
    margin-right: 0;
    font-weight: 700;
}

.nav-links a.cta-link:hover { background: #d4d4d4; }
.nav-links a.nav-music:hover,
.nav-links a.nav-acting:hover,
.nav-links a.nav-shows:hover,
.nav-links a.nav-lectures:hover,
.nav-links a.nav-mentoring:hover,
.nav-links a.nav-about:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.hamburger-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.hamburger-btn span {
    width: 25px;
    height: 2px;
    background-color: #ffffff;
}

/* ==========================================
   4. באנר ראשי (Hero)
   ========================================== */
.hero {
    margin-top: 75px;
    padding: 100px 0 80px 0;
    text-align: center;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
    overflow: hidden;
}

.staff-container {
    position: relative;
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.staff-lines {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 110px;
    z-index: 1;
    pointer-events: none;
}

.line {
    height: 3px;
    background: #ffffff;
    opacity: 0.18;
    width: 100%;
}

.title-wrapper { position: relative; z-index: 3; }
.title-container { display: inline-flex; align-items: center; gap: 25px; }

.hero-title {
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-size: 9.5rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    direction: rtl;
    user-select: none;
}

.hero-title .space { width: 25px; }

.hero-title span:not(.space) {
    display: inline-block;
    /* מרווח פנימי עם מרווח שלילי מקביל - הפריסה לא משתנה, אבל התיבה של כל אות גדולה מעט מהאות עצמה,
       כך שהדפדפן לא חותך חלקים של האות שבולטים מעבר לתיבה שלה (למשל הרגל של האות נ' באנימציה) */
    padding: 0.15em 0.4em 0.3em;
    margin: -0.15em -0.4em -0.3em;
    overflow: visible;
    animation: letterWave 2s infinite ease-in-out;
    animation-delay: calc(0.12s * var(--i));
}

@keyframes letterWave {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); color: #ffffff; }
}

.side-notes { display: flex; align-items: center; gap: 12px; }

.happy-note-svg {
    width: 48px;
    height: 58px;
    color: #ffffff;
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.25));
    transition: transform 0.3s ease;
}

.happy-note-svg:hover {
    transform: scale(1.3) rotate(10deg);
    color: #ffffff;
    cursor: pointer;
}

.note-1 { animation: happyDance 2.4s infinite ease-in-out; animation-delay: 0s; }
.note-2 { animation: happyDance 2.4s infinite ease-in-out; animation-delay: 0.5s; }
.note-3 { animation: happyDance 2.4s infinite ease-in-out; animation-delay: 1s; }

@keyframes happyDance {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    30% { transform: translateY(-16px) rotate(-10deg) scale(1.1); color: #ffffff; }
    60% { transform: translateY(6px) rotate(6deg) scale(0.95); }
}

/* ==========================================
   5. סקציות וכרטיסיות רגילות
   ========================================== */
.container {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
}

.section { padding: 50px 0; }
.section-dark { background-color: #0a0a0a; }
.section-gray { background-color: #0a0a0a; }

.section-header {
    border-bottom: 1px solid #262626;
    padding-bottom: 12px;
    margin-bottom: 30px;
}

.section-header h2 {
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
}

.section-header p { color: #ffffff; font-size: 0.9375rem; }

.section-header h2 .section-num {
    font-family: 'Cascadia Mono', monospace;
    font-size: 0.9375rem;
}

.section-header h2 .prebooking-link {
    font-weight: 700;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 6px;
    transition: opacity 0.2s ease;
}

.section-header h2 .prebooking-link:hover { opacity: 0.7; }

/* מקום לאיורים - להוספת ציורים/איורים בצדי האתר.
   פשוט שמו קובץ תמונה בנתיב שמופיע ב-src של תגית ה-img המתאימה, בתיקיית images.
   אם לא מעלים תמונה, המקום פשוט לא יוצג (בלי מסגרת ריקה).

   שינוי הגודל: לכל איור יש style="--illustration-size: XXXpx" ישירות בקוד ה-HTML -
   פשוט שני את המספר הזה כדי להגדיל/להקטין את האיור הספציפי הזה, בלי לגעת ב-CSS.

   צד: illustration-left ממקם בצד שמאל (פיזי) של האתר, illustration-right בצד ימין.
   ברירת המחדל אם לא מציבים תמונה בפועל - האיור פשוט לא יופיע, כדי שלא יהיה ריבוע שבור. */
.illustration-slot {
    display: block;
    position: absolute;
    width: var(--illustration-size, 180px);
    /* מגביל את הרוחב בפועל לשטח הפנוי בשוליים בלבד, כך שהאיור לא יחרוג
       מעבר לגבול האתר גם אם --illustration-size גדול משטח השוליים הזמין */
    max-width: calc((100vw - 1050px) / 2 - 34px);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

/* איור שממוקם ליד תיבת יצירת הקשר (רוחב תיבה שונה - 580px ולא 1050px) -
   מגביל אותו לפי השוליים האמיתיים של התיבה הצרה יותר */
.contact-box .illustration-slot {
    max-width: calc((100vw - 580px) / 2 - 34px);
}

.illustration-slot[src=""],
.illustration-slot:not([src]) {
    display: none;
}

/* צד שמאל (פיזי) - מוצב בשוליים שמשמאל לתוכן.
   המרחק מהתוכן ניתן לשליטה עם --illustration-gap ישירות בקוד ה-HTML, בדיוק כמו --illustration-size -
   למשל style="--illustration-size: 200px; --illustration-gap: 60px;" ירחיק את האיור יותר מהתוכן. */
.illustration-left {
    right: 100%;
    margin-right: var(--illustration-gap, 16px);
}

/* צד ימין (פיזי) - מוצב בשוליים שמימין לתוכן */
.illustration-right {
    left: 100%;
    margin-left: var(--illustration-gap, 16px);
}

/* מיקום אנכי: ברירת המחדל - קצה עליון של האזור המכיל.
   לשליטה מדויקת במיקום האנכי, אפשר להוסיף --illustration-top ישירות בקוד ה-HTML -
   למשל style="--illustration-top: 60px;" יזיז את האיור 60px מהקצה העליון של האזור,
   ואפשר גם ערך שלילי (למשל -40px) כדי להזיז אותו מעל לקצה. */
.illustration-slot { top: var(--illustration-top, 0); }

/* שתי אפשרויות נוחות מוכנות מראש - אמצע ותחתית. אם בשימוש, הן גוברות על --illustration-top */
.illustration-align-middle { top: 50%; transform: translateY(-50%); }
.illustration-align-bottom { top: auto; bottom: 0; }

/* המכל שהאיור מתמקם לפיו (שמאל/ימין) - האזורים הרלוונטיים באתר */
.section-header,
.page-title-box,
.contact-box,
.grid {
    position: relative;
}

/* איור פינתי בתוך אזור שתופס את כל הרוחב (כמו הפוטר), למשל "בתחתית האתר בצד שמאל" -
   כאן ממקמים לפי מרחק מפינת האזור עצמו ולא לפי illustration-left/right */
footer { position: relative; }

/* מיקום מדויק בפינה נשלט עם --illustration-left / --illustration-bottom, אותו עיקרון -
   למשל style="--illustration-left: 80px; --illustration-bottom: 0px;" */
.illustration-corner-bottom-left {
    position: absolute;
    left: var(--illustration-left, 20px);
    bottom: var(--illustration-bottom, 20px);
    top: auto;
    right: auto;
    margin: 0;
    /* גם כאן - לא לחרוג מרוחב המסך בפועל, בלי קשר לגודל שנקבע */
    max-width: min(var(--illustration-size, 180px), 34vw);
}

@media (max-width: 1300px) {
    /* אין מקום בשוליים במסכים צרים - האיורים בצדדים לא מוצגים כדי לא ליצור חפיפה */
    .illustration-slot { display: none; }
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    align-items: stretch;
}

/* רשת עם כרטיס בודד שצריך להיות ממורכז ולא צמוד לצד ימין/שמאל */
.grid-single-center {
    grid-template-columns: 1fr;
    justify-content: center;
}

.grid-single-center .card {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: #ffffff;
    background: #1e1e1e;
    border: 1px solid #333333;
    border-radius: 6px;
    overflow: visible;
    transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

.card:hover { z-index: 5; }

.img-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    position: relative;
    flex-shrink: 0;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.8) contrast(1.1) sepia(0.15);
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.card:hover .img-box img {
    filter: brightness(1) contrast(1) sepia(0);
}

.card-title {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.card-title h3 { font-size: 1.125rem; font-weight: 600; }
.arrow { font-size: 1.125rem; color: #ffffff; transition: transform 0.2s, color 0.2s; }

/* ==========================================
   קו תחתון שמתארך מתחת לכותרת במעבר עכבר - אפקט אחיד לכל הכותרות הקליקביליות באתר
   ========================================== */
.card-title h3,
.clip-info h3,
.album-item-details h3,
.song-details h3,
.track-title {
    position: relative;
    display: inline-block;
}

.card-title h3::after,
.clip-info h3::after,
.album-item-details h3::after,
.song-details h3::after,
.track-title::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.35s ease;
}

.card:hover .card-title h3::after,
.clip-card:hover .clip-info h3::after,
.album-item-card:hover .album-item-details h3::after,
.song-card:hover .song-details h3::after,
.audio-track-card:hover .track-title::after {
    width: 100%;
}


.music-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    align-items: stretch;
}

.acting-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 35px;
    align-items: stretch;
}

/* ==========================================
   6. סרגל Google Carousel עם חצים
   ========================================== */
.carousel-subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin: 25px 0 12px;
}

.carousel-subtitle:first-of-type { margin-top: 0; }

/* מחלקת עזר כללית למירכוז טקסט (למשל כותרת משנה שצריכה להיות באמצע ולא צמודה לימין) */
.text-center { text-align: center; }

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.google-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.google-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.google-card {
    flex: 0 0 140px;
    background: #181818;
    border: 1px solid #282828;
    border-radius: 8px;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
}

.google-thumb { width: 100%; height: 150px; background: #000; }
.google-thumb img { width: 100%; height: 100%; object-fit: cover; }

.google-info { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.google-name { font-size: 0.8125rem; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.google-meta { font-size: 0.6875rem; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* חצי ניווט */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(18, 18, 18, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.125rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    backdrop-filter: blur(4px);
    /* חשוב: סימני החץ (❮ ❯) הם תווים "ממוראים" (mirrored) לפי תקן ה-Unicode bidi,
       כך שבתוך עמוד RTL הדפדפן הופך אותם אוטומטית ומציג אותם הפוך מכוונתם.
       קביעת כיוון ltr כאן מבטלת את ההיפוך ומבטיחה שהחץ שמוצג הוא אכן הצורה שנכתבה בקוד. */
    direction: ltr;
}

.carousel-arrow:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0a0a0a;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn { left: -15px; }
.next-btn { right: -15px; }

/* ==========================================
   7. אודות, צור קשר ופוטר
   ========================================== */
.about-content {
    background: #1e1e1e;
    border: 1px solid #333333;
    padding: 30px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.8;
    color: #ffffff;
}

.contact-box {
    text-align: center;
    max-width: 580px;
    margin: 60px auto;
    background: #121212;
    border: 1px solid #333333;
    padding: 40px;
    border-radius: 6px;
}

.contact-box h2 {
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-size: 2.125rem;
    color: #ffffff;
}

.contact-box p { color: #ffffff; margin-bottom: 20px; font-size: 0.9375rem; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form input, .form textarea {
    padding: 14px;
    border: 1px solid #333333;
    border-radius: 4px;
    font-size: 0.875rem;
    background: #1e1e1e;
    color: #ffffff;
}
.form input:focus, .form textarea:focus { outline: none; border-color: #ffffff; }

.form button {
    padding: 14px;
    background: #ffffff;
    color: #0a0a0a;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.form button:hover { background: #d4d4d4; transform: translateY(-2px); }
.form button:disabled { opacity: 0.6; cursor: default; transform: none; }

.contact-form-status { min-height: 1.2em; font-size: 0.9375rem; margin: 0; }
.contact-form-status.success { color: #4ade80; font-weight: 700; }
.contact-form-status.error { color: #f87171; font-weight: 700; }

footer {
    text-align: center;
    padding: 30px;
    color: #ffffff;
    font-size: 0.875rem;
    border-top: 1px solid #262626;
    background: #121212;
}

footer .credit { margin-top: 6px; font-size: 0.8125rem; color: #ffffff; }

/* ==========================================
   8. מודאל פופ-אפ ונגישות
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: #1e1e1e;
    border: 1px solid #404040;
    max-width: 440px;
    width: 90%;
    position: relative;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;
}

.modal-text-body { padding: 35px 25px; }

.close-btn {
    position: absolute;
    top: 12px; left: 12px;
    font-size: 1.375rem;
    background: #262626;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer;
}

.badge {
    background: #ffffff;
    color: #0a0a0a;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

.modal-date, .modal-location { color: #ffffff; font-weight: 500; margin-bottom: 4px; }

.modal-cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 24px;
    background: #ffffff;
    color: #0a0a0a;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
}

.accessibility-btn {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 44px; height: 44px;
    background: #ffffff;
    color: #0a0a0a;
    border: none;
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1500;
    transition: transform 0.2s ease, background 0.2s ease;
}

.accessibility-btn:hover {
    transform: scale(1.08);
    background: #d4d4d4;
}

.accessibility-menu {
    position: fixed;
    bottom: 75px; right: 20px;
    background: #1e1e1e;
    border: 1px solid #404040;
    padding: 12px;
    border-radius: 6px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accessibility-menu.hidden { display: none; }

.accessibility-menu h4 { color: #ffffff; font-size: 0.875rem; margin-bottom: 4px; }

.accessibility-menu button {
    padding: 6px 10px;
    background: #262626;
    color: #ffffff;
    border: 1px solid #404040;
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

.accessibility-menu button:hover { background: #333333; }

.accessibility-menu button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #262626;
}

/* מצב ניגודיות גבוהה */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast .section-dark,
body.high-contrast .section-gray,
body.high-contrast .navbar,
body.high-contrast footer,
body.high-contrast .card,
body.high-contrast .about-content,
body.high-contrast .contact-box,
body.high-contrast .accessibility-menu,
body.high-contrast .modal-content,
body.high-contrast .song-card,
body.high-contrast .album-item-card,
body.high-contrast .hero {
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #ffffff !important;
}

body.high-contrast p,
body.high-contrast span,
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast a,
body.high-contrast .logo,
body.high-contrast .nav-links a {
    color: #ffffff !important;
}

body.high-contrast a { text-decoration: underline; }

body.high-contrast .img-box img,
body.high-contrast .wedding-gallery-item img {
    filter: none !important;
    opacity: 1 !important;
}

body.high-contrast .accessibility-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

/* מצב היפוך צבעים - שחור על גבי לבן */
body.inverted-colors {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}

body.inverted-colors .section-dark,
body.inverted-colors .section-gray,
body.inverted-colors .navbar,
body.inverted-colors footer,
body.inverted-colors .card,
body.inverted-colors .google-card,
body.inverted-colors .clip-card,
body.inverted-colors .about-content,
body.inverted-colors .contact-box,
body.inverted-colors .accessibility-menu,
body.inverted-colors .modal-content,
body.inverted-colors .modal-overlay,
body.inverted-colors .song-card,
body.inverted-colors .album-item-card,
body.inverted-colors .audio-track-card,
body.inverted-colors .form input,
body.inverted-colors .form textarea,
body.inverted-colors .hero {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #0a0a0a !important;
}

body.inverted-colors p,
body.inverted-colors span,
body.inverted-colors h1,
body.inverted-colors h2,
body.inverted-colors h3,
body.inverted-colors h4,
body.inverted-colors a,
body.inverted-colors .logo,
body.inverted-colors .nav-links a {
    color: #0a0a0a !important;
}

body.inverted-colors .nav-links a.cta-link,
body.inverted-colors .cta-link,
body.inverted-colors .modal-cta,
body.inverted-colors .badge,
body.inverted-colors .form button,
body.inverted-colors .accessibility-btn {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
}

body.inverted-colors .line {
    background: #0a0a0a !important;
}

body.inverted-colors .happy-note-svg {
    color: #0a0a0a !important;
}

body.inverted-colors .happy-note-svg circle[fill="#0a0a0a"],
body.inverted-colors .happy-note-svg path[stroke="#0a0a0a"] {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

body.inverted-colors .clip-play-icon {
    background: rgba(10, 10, 10, 0.85) !important;
    color: #ffffff !important;
}

body.inverted-colors .stream-btn {
    background: transparent !important;
    color: #0a0a0a !important;
    border-color: #0a0a0a !important;
}

body.inverted-colors .stream-btn:hover {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* ==========================================
   9. עיצובים מיוחדים לעמודי משנה (Albums & Songs)
   ========================================== */
.page-albums-container {
    margin-top: 75px;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* שורה עליונה בעמודי משנה: כפתור חזרה + נתיב ניווט (breadcrumbs) באותה שורה.
   margin-right שלילי מושך את השורה ימינה, מעבר לקצה הימני של התוכן הממורכז (1050px),
   כך שהיא מתיישרת קרוב יותר לקצה הימני האמיתי של המסך (כמו הלוגו בסרגל הניווט).
   min() מבטיח שבמסכים צרים (שבהם אין בכלל שוליים לדחוף לתוכם) זה לא יזיז כלום. */
.breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-right: min(0px, calc((1050px - 100vw) / 2 + 20px));
}

/* כפתור "חזרה לעמוד הראשי" - אליפסה לבנה, האלמנט הבולט ביותר בשורה */
.back-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #0a0a0a;
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.back-pill-btn:hover {
    background: #d4d4d4;
    transform: translateY(-1px);
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0;
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
}

.page-title-box {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #262626;
    padding-bottom: 20px;
}

.page-title-box h2 {
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-size: 2.375rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.page-title-box p {
    color: #ffffff;
    font-size: 1rem;
}

.explore-more-title {
    margin-top: 55px;
}

.explore-more-title h2 {
    font-size: 1.5rem;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: stretch;
}

/* עיצוב עמוד אלבומים (albums.html) */
.albums-detailed-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.album-item-card {
    display: flex;
    background: #121212;
    border: 1px solid #262626;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.album-item-card:hover {
    border-color: #ffffff;
}

.album-item-cover {
    width: 220px;
    min-width: 220px;
    background: #000;
}

.album-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-item-details {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.album-item-details h3 {
    font-size: 1.5rem;
    color: #ffffff;
}

.release-year {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: bold;
}

.album-desc {
    color: #ffffff;
    font-size: 0.9375rem;
    margin-bottom: 10px;
}

/* עיצוב עמוד שירים (songs.html) */
.songs-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.song-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #121212;
    border: 1px solid #262626;
    padding: 18px 24px;
    border-radius: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.song-card:hover {
    background: #181818;
    border-color: #ffffff;
}

.song-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.song-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 6px;
    overflow: hidden;
    background: #1e1e1e;
    border: 1px solid #262626;
}

.song-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.song-details h3 {
    font-size: 1.125rem;
    color: #ffffff;
    margin-bottom: 4px;
}

.song-meta {
    font-size: 0.8125rem;
    color: #ffffff;
}

/* עיצוב עמוד "הלחנה לילדים" - רשימת קבצי אודיו */
.audio-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.8;
}

.audio-track-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.audio-track-card {
    background: #121212;
    border: 1px solid #262626;
    padding: 16px 22px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    transition: border-color 0.2s ease;
}

.audio-track-card:hover { border-color: #ffffff; }

.audio-track-card .track-number {
    font-size: 1.125rem;
    font-weight: bold;
    color: #ffffff;
    min-width: 30px;
}

.audio-track-card .track-title {
    font-size: 1rem;
    color: #ffffff;
    min-width: 140px;
    flex: 0 0 auto;
}

.audio-track-card audio {
    flex: 1 1 260px;
    min-width: 220px;
    height: 38px;
}

/* כפתורי סטרימינג (Spotify, YouTube, Apple Music) */
.streaming-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stream-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1e1e1e;
    color: #ffffff;
    border: 1px solid #333333;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.25s ease;
}

.stream-btn:hover {
    transform: translateY(-2px);
    background: #ffffff;
    color: #0a0a0a;
}

.stream-btn.spotify { padding: 6px 14px; width: auto; border-radius: 4px; font-size: 0.8125rem; font-weight: bold; }
.stream-btn.spotify:hover { background: #1db954; color: #ffffff; border-color: #1db954; }

.stream-btn.apple { padding: 6px 14px; width: auto; border-radius: 4px; font-size: 0.8125rem; font-weight: bold; }
.stream-btn.apple:hover { background: #fc3c44; color: #ffffff; border-color: #fc3c44; }

.stream-btn.youtube { padding: 6px 14px; width: auto; border-radius: 4px; font-size: 0.8125rem; font-weight: bold; }
.stream-btn.youtube:hover { background: #ff0000; color: #ffffff; border-color: #ff0000; }

/* עיצוב עמוד חתונות וטקסים (weddings.html) */
.wedding-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.8;
}

.wedding-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.wedding-gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #262626;
    background: #000;
    transition: border-color 0.3s ease;
}

.wedding-gallery-item:hover {
    border-color: #ffffff;
    z-index: 2;
}

.wedding-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transition: filter 0.4s ease;
}

.wedding-gallery-item:hover img {
    filter: brightness(1);
}

.wedding-gallery-item .wedding-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 14px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
}

.lecture-text {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: right;
    color: #ffffff;
    font-size: 1.0625rem;
    line-height: 2;
}

.lecture-text p { margin-bottom: 16px; }

.lecture-gallery,
.wedding-cta {
    text-align: center;
    margin-top: 50px;
}

.lecture-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 10px; }
.lecture-gallery-item { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid #262626; background: #000; transition: border-color 0.3s ease; }
.lecture-gallery-item:hover { border-color: #ffffff; z-index: 2; }
.lecture-gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: filter 0.4s ease; }
.lecture-gallery-item:hover img { filter: brightness(1); }

.wedding-cta a {
    display: inline-block;
    padding: 14px 32px;
    background: #ffffff;
    color: #0a0a0a;
    text-decoration: none;
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-weight: 700;
    border-radius: 4px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wedding-cta a:hover {
    background: #d4d4d4;
    transform: translateY(-2px);
}

/* עיצוב עמוד קליפים (clips.html) */
.clips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.clip-card {
    display: block;
    text-decoration: none;
    color: #ffffff;
    background: #121212;
    border: 1px solid #262626;
    border-radius: 8px;
    overflow: visible;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

/* מעבר עכבר: כל הכרטיס - גם התמונה וגם הטקסט - גדל מעט וצל לבן מופיע מאחוריו */
.clip-card:hover {
    border-color: #ffffff;
    z-index: 5;
}

.clip-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.clip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
    transition: filter 0.4s ease;
}

.clip-card:hover .clip-thumb img {
    filter: brightness(0.9);
}

.clip-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.clip-info { padding: 16px 18px; }
.clip-info h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.clip-info p { font-size: 0.8125rem; color: #ffffff; }

/* קטעים שממתינים לקובץ/קישור תקין (למשל קישורי וואטסאפ שלא ניתן להטמיע) */
.clip-card.clip-pending {
    cursor: default;
}

.clip-thumb-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 2.25rem;
}

.clip-pending-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.7rem;
    padding: 4px 11px;
    border-radius: 20px;
    z-index: 2;
}

.clip-pending-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    margin-top: 4px;
}

/* כותרת תת-קטגוריה בתוך עמוד (תיקיות הקטעים ב"גרייניק ואלתרמן") */
.clip-category-title {
    font-family: 'Gadi Almog', 'Cascadia Mono', monospace;
    font-size: 1.375rem;
    color: #ffffff;
    margin: 50px 0 20px;
    padding-right: 14px;
    border-right: 4px solid #ffffff;
}

.clip-category-title:first-of-type {
    margin-top: 35px;
}

/* עיצוב עמודי הופעה עם קליפ מוטמע (solo-show.html / keren-show.html) */
.show-clip-wrapper {
    max-width: 850px;
    margin: 35px auto 40px;
}

.clip-embed {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid #262626;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
    cursor: pointer;
}

.clip-embed:hover {
    border-color: #ffffff;
}

.clip-embed iframe,
.clip-embed video,
.clip-embed img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.clip-embed video { object-fit: contain; background: #000; }
.clip-embed img { object-fit: cover; }

.clip-embed .clip-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    transition: background 0.25s ease;
}

/* מעבר עכבר על הסרטון: כפתור ה-play נהיה בהיר יותר (לבן מלא) */
.clip-embed:hover .clip-play-icon {
    background: #ffffff;
}

.clip-play-icon.is-hidden {
    display: none;
}

.show-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.8;
}

/* ==========================================
   10. התאמה למכשירים ניידים (Responsive)
   ========================================== */
@media (max-width: 900px) {
    .hamburger-btn { display: flex; }
    
    .nav-links {
        display: none;
        position: fixed;
        top: 75px; left: 0; right: 0;
        background: #121212;
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid #262626;
    }
    
    .nav-links.active { display: flex; }
    .nav-links a { margin: 6px 0; }
    
    .grid, .music-layout, .acting-main-grid, .explore-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 3.125rem; }
    .google-card { flex: 0 0 120px; }
    .google-thumb { height: 130px; }

    .prev-btn { left: 0px; }
    .next-btn { right: 0px; }

    /* רספונסיביות לעמודי משנה */
    .album-item-card { flex-direction: column; }
    .album-item-cover { width: 100%; height: 200px; }
    
    .song-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .streaming-buttons {
        width: 100%;
        justify-content: flex-end;
    }

    .breadcrumb-row {
        gap: 12px;
    }

    .back-pill-btn {
        padding: 8px 18px;
        font-size: 0.875rem;
    }

    .breadcrumbs {
        font-size: 0.75rem;
    }
}
/* ==========================================
   11. התאמה מלאה לטלפון ולטאבלט
   הכללים כאן רק משנים גדלים ומרווחים במסכים קטנים - הסדר של הכרטיסיות והתוכן נשאר בדיוק כמו שהוא.
   ========================================== */

/* טאבלט וטלפון (עד 900px) - כרטיסיות הניווט מסודרות 2 בשורה במקום אחת מתחת לשנייה */
@media (max-width: 900px) {
    .music-layout,
    .explore-grid,
    .grid:not(.grid-single-center) {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* כרטיס אחרון שנשאר לבד בשורה (למשל 3 כרטיסים) - ממורכז ובאותו גודל כמו השאר */
    .music-layout > .card:last-child:nth-child(odd),
    .explore-grid > .card:last-child:nth-child(odd),
    .grid:not(.grid-single-center) > .card:last-of-type:nth-of-type(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 7px);
    }

    /* חיצי הקרוסלה לא נחוצים במגע - מחליקים עם האצבע */
    .carousel-arrow { display: none; }
}

/* טלפון (עד 600px) */
@media (max-width: 600px) {
    html { scroll-padding-top: 70px; }

    .container { padding: 0 16px; }

    /* סרגל עליון נמוך יותר */
    .navbar {
        height: 60px;
        padding: 0 16px;
        border-radius: 0 0 18px 18px;
    }
    .logo { font-size: 1.4rem; }
    .nav-links { top: 60px; padding: 12px 16px 18px; }
    .nav-links a { padding: 10px 12px; font-size: 1rem; }
    .nav-links a.cta-link { text-align: center; }

    /* באנר ראשי - כותרת בגודל שמתאים לרוחב המסך */
    .hero {
        margin-top: 60px;
        padding: 36px 0 28px;
    }
    .staff-container { height: 150px; }
    .staff-lines { height: 60px; }
    .line { height: 2px; }
    .title-container { gap: 6px; }
    .hero-title { font-size: clamp(2.1rem, 10.5vw, 3.125rem); }
    .hero-title .space { width: 0.25em; }
    .side-notes { gap: 3px; }
    .happy-note-svg { width: 20px; height: 26px; }

    /* כותרות הסקציות בעמוד הראשי */
    .section { padding: 32px 0; }
    .section-header { margin-bottom: 20px; padding-bottom: 10px; }
    .section-header h2 { font-size: 1.6rem; line-height: 1.3; }
    .section-header h2 .section-num { font-size: 0.8125rem; }
    .section-header p { font-size: 0.875rem; }

    /* כרטיסיות - כותרת קטנה יותר כך שתיכנס יפה בכרטיס צר */
    .card-title { padding: 10px 12px; gap: 6px; }
    .card-title h3 { font-size: 0.875rem; line-height: 1.35; }
    .arrow { font-size: 0.9375rem; flex-shrink: 0; }
    .grid-single-center .card-title h3 { font-size: 1rem; }

    /* קרוסלות */
    .carousel-subtitle { font-size: 1rem; margin: 18px 0 8px; }
    .carousel-container { margin-bottom: 14px; }
    .google-carousel { gap: 10px; }

    /* אודות וצור קשר */
    .about-content { padding: 18px; font-size: 0.9375rem; line-height: 1.75; }
    .contact-box {
        margin: 36px 16px;
        padding: 26px 18px;
    }
    .contact-box h2 { font-size: 1.6rem; }
    /* גודל 16px בשדות הטופס - מונע זום אוטומטי באייפון כשלוחצים על שדה */
    .form input, .form textarea { font-size: 1rem; }

    footer { padding: 22px 16px 70px; }

    /* כפתור הנגישות קטן יותר כדי שלא יסתיר תוכן */
    .accessibility-btn { width: 40px; height: 40px; bottom: 14px; right: 14px; font-size: 1rem; }
    .accessibility-menu { bottom: 62px; right: 14px; }

    /* עמודי משנה */
    .page-albums-container { margin-top: 60px; padding-top: 20px; padding-bottom: 40px; }
    .breadcrumb-row { margin-bottom: 18px; gap: 10px; }
    .page-title-box { margin-bottom: 24px; padding-bottom: 14px; }
    .page-title-box h2 { font-size: 1.75rem; line-height: 1.3; }
    .page-title-box p { font-size: 0.875rem; }
    .explore-more-title { margin-top: 36px; }
    .explore-more-title h2 { font-size: 1.25rem; }

    /* אלבומים */
    .albums-detailed-list { gap: 18px; }
    .album-item-cover { height: auto; aspect-ratio: 16 / 10; }
    .album-item-details { padding: 16px; gap: 8px; }
    .album-item-details h3 { font-size: 1.25rem; }
    .album-desc { font-size: 0.875rem; margin-bottom: 4px; }

    /* כפתורי סטרימינג */
    .streaming-buttons { flex-wrap: wrap; gap: 8px; }
    .stream-btn.spotify,
    .stream-btn.apple,
    .stream-btn.youtube { padding: 6px 10px; font-size: 0.75rem; white-space: nowrap; }

    /* שירים */
    .songs-list { gap: 12px; }
    .song-card { padding: 14px 16px; gap: 12px; }
    .song-info { gap: 14px; }
    .song-thumb { width: 52px; height: 52px; min-width: 52px; }
    .song-details h3 { font-size: 1rem; }
    .song-meta { font-size: 0.75rem; line-height: 1.5; }

    /* רשימות אודיו */
    .audio-intro { font-size: 0.9375rem; margin-bottom: 24px; }
    .audio-track-list { gap: 12px; }
    .audio-track-card { padding: 12px 14px; gap: 10px; }
    .audio-track-card .track-number { font-size: 1rem; min-width: 24px; }
    .audio-track-card .track-title { font-size: 0.9375rem; min-width: 0; flex: 1 1 auto; }
    .audio-track-card audio { flex: 1 1 100%; min-width: 0; width: 100%; }

    /* קליפים וסרטונים */
    .clips-grid { grid-template-columns: 1fr; gap: 16px; }
    .clip-info { padding: 12px 14px; }
    .clip-info h3 { font-size: 0.9375rem; }
    .clip-play-icon { width: 46px; height: 46px; font-size: 1rem; }
    .clip-category-title { font-size: 1.2rem; margin: 32px 0 14px; }
    .clip-category-title:first-of-type { margin-top: 24px; }
    .show-clip-wrapper { margin: 22px auto 26px; }
    .clip-embed .clip-play-icon { width: 54px; height: 54px; font-size: 1.125rem; }

    /* טקסטים ארוכים (הרצאה, הופעות, חתונות) */
    .lecture-text { font-size: 0.9375rem; line-height: 1.85; margin-bottom: 28px; }
    .lecture-text p { margin-bottom: 12px; }
    .show-text, .wedding-intro { font-size: 0.9375rem; line-height: 1.75; }
    .wedding-intro { margin-bottom: 24px; }

    /* גלריות תמונות */
    .wedding-gallery, .lecture-gallery { grid-template-columns: 1fr; gap: 14px; }
    .lecture-gallery { margin-top: 30px; }

    /* כפתורי קריאה לפעולה */
    .wedding-cta { margin-top: 32px; }
    .wedding-cta a { padding: 13px 22px; max-width: 100%; line-height: 1.5; }
}