/*
Theme Name: Khalil Please Answer
Theme URI: https://khalilpleaseanswer.com
Author: Alexia Tsouni & Haim Schwarczenberg
Description: Official theme for the documentary film "Khalil, Please Answer"
Version: 1.7.7
License: All rights reserved
*/
/*
 * Changelog v1.7.6:
 * - .tagline font-size reduced by 20%: clamp(26px,2.6vw,38px) → clamp(20.8px,2.08vw,30.4px)
 * - .tagline padding-top increased by 20px (16px → 36px) — box expands upward.
 * - .tagline padding-right increased by 100px (20px → 120px) — box expands rightward.
 * - Arabic block: UNCHANGED. Nothing else changed.
 *
 * Changelog v1.7.7:
 * - Header mobile breakpoints: two-state layout (>=425px vs <=424px).
 * - Meta line: desktop full text + mobile short text (no duplicates).
 * - Arabic title: inline on >=425px, moved below meta on <=424px.
 * - Hamburger positioning: no absolute overlap on mobile.
 */

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

html {
    height: 100%;
    background: #2b4963 url('background.jpg') no-repeat bottom center fixed;
    background-size: cover;
}
body {
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: white;
    background: transparent;
}

/* ======= HEADER ======= */
header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    padding: 0 5%;
    height: 80px;
    padding-top: 25px;
}
.topbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    width: 100%;
}
.header-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    position: relative;
    top: 5px;
}
.brand-wrap {
    display: inline-block;
    width: fit-content;
    position: relative;
}
h1 {
    font-family: 'Centaur', serif;
    font-size: 3.1rem;
    font-weight: bold;
    color: black;
    line-height: 1;
    white-space: nowrap;
}

/* ===== ARABIC — DO NOT TOUCH ===== */
.brand-wrap .title-ar {
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    white-space: nowrap;
    font-family: 'Adobe Arabic', serif;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}
/* ===== END ARABIC ===== */

.meta-row { margin-top: 3px; white-space: nowrap; display: flex; align-items: flex-end; gap: 10px; }
.meta-row .meta-en {
    font-family: 'Centaur', serif;
    font-size: 1rem;
    color: black;
    opacity: 0.85;
}
.meta-en--short { display: none; }

/* Arabic title in header (inline, right side of meta row) */
.meta-row .title-ar--inline {
    margin-left: auto;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    white-space: nowrap;
    font-family: 'Adobe Arabic', serif;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}

/* Arabic title for ultra-narrow mobile (below meta) */
.title-ar--mobile {
    display: none;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: left;
    white-space: nowrap;
    font-family: 'Adobe Arabic', serif;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}

/* ======= DESKTOP NAV — UPDATED FOR DYNAMIC MENU ======= */
.header-nav {
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% + 55px)) translateY(4px);
    display: flex;
    align-items: center;
}
.header-nav ul {
    list-style: none;
    display: flex;
    gap: 15px; 
    margin: 0; padding: 0;
}
.header-nav ul li {
    display: flex;
    align-items: center;
}
.header-nav ul li a {
    color: white;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
    font-family: Arial, sans-serif;
    font-size: 1.08rem;
    white-space: nowrap;
}
.header-nav ul li a:hover { opacity: 1; }

/* הקו המפריד בין הכפתורים הדינמיים */
.header-nav ul li + li::before {
    content: '|';
    color: white;
    opacity: 0.3;
    margin-right: 15px;
    font-size: 0.9rem;
}

/* ======= LANGUAGE BUTTONS ======= */
/* איפוס מוחלט של הרשימה לשורה אחת ללא בולטים */
.header-lang ul {
    list-style: none !important;
    display: flex !important; /* מחזיר אותם לשורה אחת */
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* הגדרת כל פריט שפה */
.header-lang li {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* הקו המפריד - עם מרווחים קטנים וסימטריים של 6 פיקסלים */
.header-lang li:not(:last-child)::after {
    content: "|" !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
}

/* עיצוב הקישורים (EN, GR) */
.header-lang a {
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-family: Arial, sans-serif !important;
    font-size: 0.95rem !important;
    opacity: 0.7 !important;
    line-height: 1 !important;
}

.header-lang a:hover {
    opacity: 1 !important;
}

/* ======= HAMBURGER ======= */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: white;
    padding: 0;
    line-height: 1;
    z-index: 999;
}

/* ======= MOBILE NAV PANEL ======= */
/* פאנל התפריט הנייד - צר ומעוצב */
.mobile-nav-panel {
    display: none;
    position: fixed;
    top: 0; 
    right: 0;
    width: 140px; /* רוחב צר ומאוזן */
    height: 100vh;
    background: rgba(11, 24, 34, 0.98);
    z-index: 250;
    flex-direction: column;
    padding: 80px 20px 30px 20px;
    gap: 25px;
    transition: all 0.3s ease;
}

.mobile-nav-panel.is-open {
    display: flex;
}

/* הגדרת הקישורים בתפריט הנייד */
.mobile-nav-panel a, 
.mobile-nav-panel a:visited {
    color: #cccccc; /* אפור בהיר כברירת מחדל (גם אם ביקרו בקישור) */
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    opacity: 1; /* מוודא שהטקסט ברור */
}

/* מצב ריחוף - הטקסט הופך ללבן בוהק */
.mobile-nav-panel a:hover,
.mobile-nav-panel a:active {
    color: #ffffff; /* לבן נקי */
    opacity: 1;
}

/* כפתור ה-X לסגירה */
.close-menu-btn {
    position: absolute;
    top: 25px;
    right: 20px;
    background: none;
    border: none;
    color: #cccccc;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease;
}

.close-menu-btn:hover {
    color: #ffffff;
}

.mobile-nav-panel hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 5px 0;
}

/* ======= FOOTER ======= */
footer {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 100;
    padding: 14px 5% 16px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0b1822;
    opacity: 0.65;
}
.footer-copyright { font-size: 0.8rem; opacity: 0.5; font-family: Arial, sans-serif; }
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: white; font-size: 1.2rem; opacity: 0.6; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 1; }

/* ======= SCROLL AREA ======= */
.scroll-area {
    position: fixed !important;
    left: 0;
    width: 100%;
    
    /* זה המרחק של ה"חלון" מהתקרה - הגדלתי ל-280 כדי שיהיה שינוי דרסטי */
    top: 130px !important; 
    
    /* הגובה חייב להיות מחושב כדי שהטקסט לא ייצא מהמסך למטה */
    height: calc(100vh - 240px - 100px) !important; 
    
    overflow-y: scroll !important;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-area::-webkit-scrollbar { display: none; }

/* ======= CUSTOM SCROLLBAR ======= */
.custom-scrollbar {
    position: fixed;
    left: 5px;
    top: 150px !important;
    bottom: 200px !important;
    height: auto !important;
    width: 3px;
    z-index: 200;
    pointer-events: none;
}
.scrollbar-track {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}
.scrollbar-thumb {
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
}

/* ======= SCROLL CONTENT ======= */
.scroll-content {
    padding: 0 4% 120px 4%;
    max-width: 660px;
    margin-left: 10px;
}

/* ======= TAGLINE ======= */
.tagline {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(20.8px, 2.08vw, 30.4px);
    line-height: 1.25;
    text-align: left;
    color: #ffffff;
    border-radius: 2px;
    padding: 16px 10px 16px calc(clamp(60px, 8vw, 122px) + 100px);
    margin-top: 40px;
    margin-left: -7px;
    margin-bottom: 0;
    position: relative;
    top: 0px;
    width: fit-content;
    max-width: min(72vw, 860px);
    white-space: nowrap;
}
.tagline::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    top: -70px;
    right: -10px;
    background: rgba(95, 130, 168, 0.35);
    border-radius: 2px;
    pointer-events: none;
}

/* ======= ABOUT / PAGE CONTENT TEXT ======= */
.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 110px;
    margin-bottom: 50px;
    margin-left: 15px;
    max-width: 500px;
    color: rgba(255,255,255,0.92);
}
.about-text p,
.about-text .wp-block-paragraph { margin-bottom: 1em; }
.about-text h2, .about-text h3 { margin-bottom: .6em; margin-top: 1.2em; }
.entry-content p, .entry-content ul, .entry-content ol,
.entry-content h2, .entry-content h3 { margin-bottom: 1em; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.about-text .credits {
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 1rem;
}
.about-text .disclaimer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: #eee;
    font-weight: 500;
}

/* ======= VIDEO ======= */
.video-wrapper { width: 100%; background: #000; margin-bottom: 60px; margin-left: 30px; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ======= DONATE ======= */
.donate-section { display: flex; justify-content: center; margin-left: 30px; }
.donate-btn {
    display: inline-block;
    background: #b32d2d;
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    font-family: 'Centaur', serif;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 2px;
    text-transform: uppercase;
}

/* =============================================
   BREAKPOINT 1: tablet/narrow-desktop — ≤1250px
   Switches desktop nav → hamburger.
   ============================================= */
@media (max-width: 1350px) {
    .header-nav  { display: none !important; }
    .header-lang { display: none !important; }
    .hamburger-btn { display: block !important; }
}
@media (max-width: 460px) {
    h1 {
        font-size: 1.4rem !important; /* הקטנה נוספת למניעת חפיפה */
    }

    /* הסתרת הערבית מהשורה של ההמבורגר */
    .title-ar--inline {
        display: none !important;
    }

    /* העברת הערבית לצד שמאל מתחת לתיאור */
    .title-ar--mobile {
        display: block !important;
        position: absolute;
        left: 0;        /* הצמדה לשמאל */
        top: 65px;      /* יורד מתחת לשורת ה-Docu */
        text-align: left !important;
        width: auto;
        padding-left: 0;
    }
    
    .header-left {
        max-width: 70%;
    }
}

@media (max-width: 767px) {

    /* ===== META LINE (Docu instead of Documentary) ===== */
    .meta-en--full  { display: none; }
    .meta-en--short { display: inline; }

    /* ===== TAGLINE BOX ===== */
    .tagline {
        font-size: clamp(16px, 4.2vw, 26px);
        line-height: 1.25;

        /* full visual width with safe margins */
        width: calc(100vw - 10vw);
        max-width: calc(100vw - 10vw);

        margin-left: 5vw;
        margin-right: 5vw;

        padding: 18px 18px;   /* reduce inner padding so text has more room */
        text-align: center;
        white-space: normal;
        

    }



    /* ===== SCROLL CONTENT AREA (edge-to-edge) ===== */
    .scroll-content {
        width: 100%;
        max-width: none;          /* cancel desktop clamp */
        margin-left: 0;
        padding: 0 5vw 120px 5vw; /* side margins + bottom space */
    }

    /* ===== ABOUT TEXT (full width + smaller) ===== */
    .about-text {
        width: 100%;
        max-width: none;          /* cancel var(--tagline-width) */
        margin-left: 0;
        margin-right: 0;
        margin-top: clamp(60px, 12vw, 140px);

        font-size: 12px;          /* requested reduction */
        line-height: 1.6;
    
       margin-left: 0;
    }

    /* ===== MOBILE CONTENT WIDTH (edge-to-edge) ===== */
    .scroll-content {
        max-width: none;          /* remove the 420px cap from the 767px rule */
        width: 100%;
        margin-left: 0;           /* cancel left offset */
        padding-left: 5%;
        padding-right: 5%;
    }

    /* ===== MOBILE ABOUT TEXT SIZE + FULL WIDTH ===== */
    .about-text {
        max-width: none;          /* cancel var(--tagline-width, ...) */
        width: 100%;
        margin-left: 0;
        font-size: 12px;          /* your request: ~14 -> 12 */
        line-height: 1.7;         /* keeps it readable at 12px */
    }


/* ======= FOOTER SOCIAL SVG FIX ======= */
.footer-social .social-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.2s;
    text-decoration: none;
}
.footer-social .social-link:hover{ opacity: 1; }
.footer-social .social-link svg{
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

/* About width follows tagline width (wraps words, never cuts) */
.about-text{
    max-width: var(--tagline-width, 500px);
}
/* ביטול בולטים בתפריט המובייל */
.mobile-nav-panel ul, 
.mobile-nav-panel li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* הגדרת הקישורים בתפריט המובייל - חזרה לעיצוב המקורי */
.mobile-nav-panel li a {
    display: block !important;
    color: #cccccc !important;
    text-decoration: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.1rem !important; /* הגדלת הפונט חזרה */
    padding: 12px 0 !important;   /* רווח בין הכפתורים */
    transition: color 0.2s ease !important;
}

.mobile-nav-panel li a:hover {
    color: #ffffff !important;
}

/* סידור השפות בתחתית התפריט הנייד */
.mobile-lang-switcher ul {
    display: flex !important;
    gap: 15px !important;
    margin-top: 10px !important;
}