@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700&display=swap');

/* =========================================
   4. תפריט עליון (Header) - תיקון גובה וצבעים
   ========================================= */

/* הגדרות בסיס לכל המצבים – body .navbar כדי לנצח את Bootstrap .sticky-top (position: sticky) */
body .navbar,
body .navbar.sticky-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important; /* מעל כל המקטעים כדי שלא ייעלם בגלילה */
    transition: all 0.3s ease;
    padding: 10px 0;
    margin-top: 0 !important;
}

/* --- מצב A: הדר חד סולידי (דפים פנימיים/בלוג) --- */
/* רווח רק בתוכן הראשי (main), לא ב-body – כדי שהלוגו והתפריט יישארו ממש בראש */
body.header-solid {
    padding-top: 1 !important;
}

body.header-solid main#main-content {
    padding-top: 80px !important; /* מקום להדר הקבוע */

}

body.header-solid .navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.header-solid .navbar-brand span, 
body.header-solid .navbar-brand i,
body.header-solid .nav-link {
    color: #333 !important;
    text-shadow: none !important;
}

/* --- מצב B: הדר שקוף + עדין (דף בית עם Hero) --- */
body.header-transparent {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* מצב התחלתי (לפני גלילה) - זכוכית עדינה */
body.header-transparent:not(.scrolled) .navbar {
    /* הורדתי משמעותית את הכהות (מ-0.2 ל-0.05) */
    background-color: rgba(0, 0, 0, 0.05) !important; 
    
    /* ריככתי את ה-Blur (מ-8px ל-4px) למראה טבעי יותר */
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* קו דקיק וכמעט בלתי נראה */
    
    /* Scrim behind the header text.
       The old gradient started at 0.4 and faded to nothing across the bar, so
       at the vertical middle, which is exactly where the site name sits, it was
       already down to roughly 0.2. White text on a light hero photo was
       unreadable, and neither the blur nor switching the blur off helped:
       blurring softens a photo, it does not darken it.
       This holds the scrim through the text band and only then fades, which
       lifts white on light to a readable contrast and stays unnoticeable on a
       dark hero image. */
    background-image: linear-gradient(to bottom,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.42) 55%,
        rgba(0,0,0,0.18) 85%,
        transparent 100%);
}

/* טקסטים לבנים במצב שקוף */
body.header-transparent:not(.scrolled) .navbar-brand span,
body.header-transparent:not(.scrolled) .navbar-brand i,
body.header-transparent:not(.scrolled) .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    /* Two shadows: a tight one for edge definition, and a wider soft one that
       still carries where the scrim is thinnest. */
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.55);
}

/* --- מצב C: גלילה (Sticky) --- */
/* כשיורדים למטה - ההדר הופך ללבן */
body.header-transparent.scrolled .navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 8px 0; /* הקטנה קלה נוספת בגלילה */
}

body.header-transparent.scrolled .navbar-brand span,
body.header-transparent.scrolled .navbar-brand i,
body.header-transparent.scrolled .nav-link {
    color: #333 !important;
    text-shadow: none !important;
}

/* --- תיקון מיקום Hero --- */
body.header-transparent .hero-section,
body.header-transparent .video-hero-section {
    margin-top: 0 !important;
    padding-top: 140px !important; /* התאמתי לגובה החדש */
    min-height: 100vh;
}

/* --- גודל לוגו בהדר (גדול יותר ללוגואים רחבים) --- */
.navbar-brand img {
    max-height: 80px;
    width: auto;
}
@media (max-width: 991px) {
    .navbar-brand img {
        max-height: 60px;
    }
}

/* --- התאמות למובייל (Mobile Fixes) --- */
@media (max-width: 991px) {
    body.header-solid main#main-content {
        padding-top: 70px !important;
    }
    
    /* הקופסה של התפריט הנפתח */
    .navbar-collapse {
        background: #ffffff !important; /* תמיד רקע לבן */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        margin-top: 10px;
        position: relative;
        z-index: var(--z-dropdown); /* שימוש במשתנה החדש */
    }
    
    /* הקישורים בתוך התפריט */
    /* התיקון: שרשור של מספר מחלקות כדי ליצור "סלקטור-על" שינצח את הלבן של ההדר השקוף */
    body .navbar .navbar-collapse .navbar-nav .nav-link {
        color: #333333 !important; 
        border-bottom: 1px solid #f0f0f0;
        padding: 10px;
        text-shadow: none !important;
        font-weight: 500 !important;
    }

    /* תיקון כפתור ההמבורגר (Toggler) */
    /* כשההדר שקוף (למעלה) - הכפתור צריך להיות לבן */
    body.header-transparent:not(.scrolled) .navbar-toggler {
        border-color: rgba(255,255,255,0.4);
    }
    
    /* החלפת האייקון ללבן כשהרקע שקוף */
    body.header-transparent:not(.scrolled) .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* כשההדר נגלל (הופך ללבן) - הכפתור חוזר להיות כהה */
    body.header-transparent.scrolled .navbar-toggler-icon,
    body.header-solid .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}









/* =========================================
   תיקון והתאמת לוגו (Logo Fix)
   ========================================= */



/* --- תיקון וידאו הירו (YouTube Background) --- */
.video-hero-section {
    position: relative;
    overflow: hidden;
}

.video-bg-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.video-bg-container iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; height: 100vh;
    min-width: 177.77vh; 
    min-height: 56.25vw;
    opacity: 0.8; 
}


/* AEO Component Styling */
.answer-block-section {
    position: relative;
    background-color: #ffffff;
}

/* הדגשה עדינה לקופסת התשובה הקצרה */
.answer-block-section .bg-light {
    background-color: #f8f9fc !important; /* כחלחל אפרפר עדין מאוד */
}

/* במצב עריכה - טיפ למשתמש */
body[contenteditable="true"] .answer-block-section::after {
    content: "💡 טיפ ל-AI: כתוב עובדות יבשות. בלי שיווק.";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    background: #fff3cd;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #ffeeba;
    color: #856404;
    pointer-events: none;
}


/* ריווח נוח לקריאה בחלק המורחב */
.answer-block-section ul li {
    margin-bottom: 10px;
}
/* הדגשת תחילת בולט */
.answer-block-section ul li strong {
    color: var(--primary-dark);
}

/* תיקון כרטיסיות שירותים */
.features-section .card, 
.features-section .p-4 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* הצמדה למעלה במקום מירכוז אנכי שיכול לחתוך */
    overflow: visible !important; /* מבטל הסתרה אם היתה */
}

/* =========================================================
   Ultimate Fix for Features Cards (Height & Overflow)
   ========================================================= */

/* 1. איתחול מבנה העמודות */
.features-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* מותח את כל העמודות לאותו גובה */
}

.features-section .row > div[class*='col-'] {
    display: flex; /* הופך את העמודה לקונטיינר פלקס */
    margin-bottom: 30px; /* רווח בין שורות */
}

/* 2. עיצוב הכרטיסייה עצמה */
.features-section .p-4.bg-white {
    /* מבטיח שהכרטיס תופס את כל המקום בעמודה */
    width: 100%;
    
    /* הגדרת גובה גמישה - קריטי! */
    height: 100%; 
    min-height: auto;
    
    /* מבנה פנימי */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    /* מניעת חיתוך בכל מחיר */
    overflow: visible !important;
    
    /* ריווח פנימי נדיב */
    padding-bottom: 40px !important;
    box-sizing: border-box;
}

/* 3. ביטול הגבלות גובה על אלמנטים פנימיים (למקרה של Copy-Paste) */
.features-section .p-4.bg-white > div,
.features-section .p-4.bg-white p,
.features-section .p-4.bg-white span,
.features-section .p-4.bg-white font {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important; /* שובר שורות ארוכות */
}

/* 4. טיפול במצב ריחוף (למניעת קפיצות) */
.features-section .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateZ(0); /* האצת חומרה */
}

.features-section .hover-lift:hover {
    transform: translateY(-5px);
    z-index: 5; /* מעלה מעל השכנים */
    position: relative; /* נדרש ל-Z-Index */
}




/* public/assets/css/modern.css - תיקון גבולות */

.section-wrapper {
    position: relative !important;
    overflow: visible !important;
    z-index: auto !important; /* מאפשר ל-z-index של הכפתורים לנצח */
}

/* התאמה למצב עריכה כדי למנוע הסתרה ע"י הניווט הצף */
body[contenteditable="true"] .navbar {
    z-index: 1000 !important; 
}


/* ==========================================================================
   תיקון מיקום כפתורים במקטע הראשון (HERO) - MODERN
   ========================================================================== */

/* 1. הורדת כפתורי הניהול השמאליים (גרירה + מחיקה) */
main > .section-wrapper:first-child .section-controls {
    top: 140px !important;       /* מוריד אותם מתחת להדר */
    z-index: 100000 !important;  /* מבטיח שהם יהיו מעל הכל ולחיצים */
}

/* ==========================================================================
   תיקון התנגשות כפתורי עריכה ב-Hero (Modern)
   ========================================================================== */

/* הבקרה מצומדת ל-start (ב-RTL: ימין) וצמודה לפינה */

/* פס הבקרה: רוחב מלא, מתחת להדר השקוף – כפתור ימין, סרגל גובה שמאל (דסקטופ בלבד) */
main > .section-wrapper:first-child .hero-section .position-absolute.top-0.start-0.hero-edit-controls,
main > .section-wrapper:first-child .video-hero-section .position-absolute.top-0.start-0 {
    left: 10px !important;
    right: 10px !important;
    top: 110px !important;
    transform: none !important;
    width: auto !important;
    z-index: 100001 !important;
}
.hero-section .hero-edit-controls {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.hero-section .hero-edit-controls .hero-height-slider,
.hero-section .hero-edit-controls .bg-white.p-2 {
    flex-shrink: 0;
}
.hero-section .hero-edit-controls .bg-white.p-2 {
    margin: 0 !important;
}
/* הזזת סרגל הגובה ימינה כדי שלא יסתיר את לחצן הגרירה של המקטע (רווח קבוע) */
.hero-section .hero-edit-controls .hero-height-slider {
    margin-inline-end: 56px !important;
    padding-bottom: 4px !important;
}
.hero-section .hero-edit-controls .hero-height-slider .form-range {
    margin-bottom: 0;
}
[dir="rtl"] .hero-section .hero-edit-controls .hero-height-slider {
    margin-left: 56px !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   תיקון תפריט כפתור ב-Hero (Z-Index & Overflow)
   ========================================================================== */

/* 1. הגדרת עדיפות למעטפת של המקטע הראשון (הירו) */
/* זה מבטיח שכל מה שיוצא ממנו (כמו תפריט) יעלה מעל המקטע שמתחתיו */
main > .section-wrapper:first-child {
    z-index: 21 !important; 
    position: relative;
}

/* 2. Hero overflow: תמונת LCP (hero-lcp) נחתכת ל־cover; במצב עריכה נשאר visible לכלי העורך */
.hero-section.hero-lcp:not(.hero-section-editing) {
    overflow: hidden !important;
}
.hero-section:not(.hero-lcp),
.hero-section.hero-section-editing {
    overflow: visible !important;
}

/* תיבת כפתורי עריכה (Background & Height) ב-Hero – התאמה למובייל */
@media (max-width: 768px) {
    .hero-section .position-absolute.top-0.start-0.hero-edit-controls {
        left: 8px !important;
        right: 8px !important;
        top: 70px !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }
    /* סרגל הגובה מוסתר במובייל – נשאר רק בדסקטופ */
    .hero-section .hero-edit-controls .hero-height-slider {
        display: none !important;
    }
    .hero-section .hero-center-content,
    .hero-section .hero-center-content h1,
    .hero-section .hero-center-content p {
        position: relative;
        z-index: 1;
    }
    .hero-section .hero-edit-controls .hero-height-slider,
    .hero-section .hero-edit-controls .bg-white.p-2 {
        transform: scale(0.85) !important;
        transform-origin: top left;
        opacity: 0.5;
        transition: opacity 0.2s ease;
    }
    [dir="rtl"] .hero-section .hero-edit-controls .hero-height-slider,
    [dir="rtl"] .hero-section .hero-edit-controls .bg-white.p-2 {
        transform-origin: top right;
    }
    .hero-section .hero-edit-controls .hero-height-slider:hover,
    .hero-section .hero-edit-controls .bg-white.p-2:hover {
        opacity: 1;
    }
}

/* =========================================
   Design Pack: Creative (single alternative to Modern)
   ========================================= */

/* --- A. Header: relative, solid white, centered logo + nav below --- */
body.style-creative .navbar,
body.style-creative .navbar.sticky-top {
    position: relative !important;
    top: auto !important;
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.style-creative .navbar .container {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    justify-content: center;
}
body.style-creative .navbar-brand {
    margin-bottom: 0.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.style-creative .navbar-collapse {
    justify-content: center !important;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 15px;
    width: 100%;
}
body.style-creative .navbar-collapse .navbar-nav {
    margin-right: 0 !important;
    margin-left: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap;
}
body.style-creative .navbar-collapse .nav-link {
    font-weight: 600;
    color: #333 !important;
    text-shadow: none;
    border-radius: 6px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
body.style-creative .navbar-collapse .nav-link:hover {
    color: var(--primary-color, #3b82f6) !important;
    background: color-mix(in srgb, var(--primary-color, #3b82f6) 8%, transparent);
}

/* --- Nav link hover: underline animation (centered menu) --- */
body.style-creative .nav-item .nav-link {
    position: relative;
    transition: color 0.3s ease;
}
body.style-creative .nav-item .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 50%;
    background-color: var(--primary-color, #3b82f6);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
body.style-creative .nav-item .nav-link:hover::after {
    width: 80%;
}
body.style-creative .nav-item .nav-link:hover {
    color: var(--primary-color, #3b82f6) !important;
}

body.style-creative .navbar-brand span,
body.style-creative .navbar-brand i {
    color: #333 !important;
    text-shadow: none;
}
body.style-creative {
    padding-top: 0 !important;
}
body.style-creative main#main-content {
    padding-top: 0 !important;
}

/* =========================================
   FIX: Creative Pack - Black Menu & Top Waves
   ========================================= */

/* 1. Mobile Menu Visibility (Black Hamburger – base64 SVG so icon always renders) */
@media (max-width: 991px) {
    body.style-creative .navbar-collapse {
        background-color: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }
    body.style-creative .navbar-toggler {
        background-color: #333 !important;
        border: 2px solid #333 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        margin-top: 12px;
    }
    body.style-creative .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHJlY3QgeD0iNSIgeT0iNyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNmZmYiLz48cmVjdCB4PSI1IiB5PSIxMyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNmZmYiLz48cmVjdCB4PSI1IiB5PSIyMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNmZmYiLz48L3N2Zz4=") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 24px 24px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    body.style-creative .navbar-nav .nav-link {
        color: #333 !important;
        border-bottom: 1px solid #f9f9f9;
    }
    body.style-creative.header-transparent .navbar {
        background-color: #ffffff !important;
        /* background-image paints above background-color, so the scrim has to
           be cleared here too. Without this the white bar this rule asks for
           still gets a dark wash over it, and the dark nav links below turn
           unreadable. */
        background-image: none !important;
    }
}

/* --- Typography: serif headings, sans-serif body --- */
body.style-creative h1,
body.style-creative h2,
body.style-creative h3,
body.style-creative .navbar-brand {
    font-family: 'Frank Ruhl Libre', serif !important;
    letter-spacing: 0.5px;
}
body.style-creative p,
body.style-creative a,
body.style-creative button {
    font-family: 'Rubik', sans-serif;
}

/* 2. Smooth waves at the TOP (hanging from header, gentle curve) */
body.style-creative .hero-section,
body.style-creative .video-hero-section {
    clip-path: none !important;
    padding-bottom: 100px !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* Smooth sine-style wave SVG (no sharp angles) – overlap header to remove white gap */
body.style-creative .hero-section::before,
body.style-creative .hero-section::after,
body.style-creative .video-hero-section::before,
body.style-creative .video-hero-section::after {
    content: "";
    display: block !important;
    position: absolute;
    top: -24px;
    left: 0;
    width: 100%;
    height: 56px;
    background-repeat: repeat-x;
    background-size: 2000px 56px;
    pointer-events: none;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,90 350,10 500,50 C650,90 850,10 1000,50 L1000,100 L0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

body.style-creative .hero-section::before,
body.style-creative .video-hero-section::before {
    z-index: 4;
    opacity: 0.55;
    animation: wave-slide 28s linear infinite;
    height: 64px;
    background-size: 2000px 64px;
}

body.style-creative .hero-section::after,
body.style-creative .video-hero-section::after {
    z-index: 5;
    opacity: 1;
    animation: wave-slide 18s linear infinite reverse;
}

@keyframes wave-slide {
    0% { background-position-x: 0; }
    100% { background-position-x: 2000px; }
}

/* Same waves at the BOTTOM of Hero (flow into next section) */
body.style-creative .hero-waves-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    pointer-events: none;
    z-index: 4;
}

body.style-creative .hero-waves-bottom::before,
body.style-creative .hero-waves-bottom::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background-repeat: repeat-x;
    background-size: 2000px 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,90 350,10 500,50 C650,90 850,10 1000,50 L1000,100 L0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    /* no flip: curve at top (hero side), fill flows down into next section */
}

body.style-creative .hero-waves-bottom::before {
    z-index: 4;
    opacity: 0.55;
    animation: wave-slide 28s linear infinite;
    height: 64px;
    background-size: 2000px 64px;
}

body.style-creative .hero-waves-bottom::after {
    z-index: 5;
    opacity: 1;
    animation: wave-slide 18s linear infinite reverse;
}

/* --- C. Contact section: גל כ־::before מעל הסקשן (שחור על רקע בהיר) כדי שייראה --- */
body.style-creative section.bg-dark-custom {
    position: relative !important;
    overflow: visible !important;
    padding-top: 0 !important;
    /* רק גרדיאנט – בלי גל ברקע (כדי שלא יהיה פס שחור) */
    background-image: radial-gradient(circle at center, #222 0%, #000 100%) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: cover !important;
    background-color: #000 !important;
}
/* גל קטן כמפריד – גובה 50px כדי שלא יכסה את הסקשן שמעל */
body.style-creative section.bg-dark-custom::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -50px !important;
    height: 50px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,40 Q120,25 240,40 Q360,55 480,40 Q600,25 720,40 Q840,55 960,40 Q1080,25 1200,40 Q1320,55 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    pointer-events: none !important;
}
body.style-creative section.bg-dark-custom .container {
    padding-top: 1rem !important;
}

/* =========================================
   FIX: Text-Image Section Mobile Overflow
   ========================================= */

@media (max-width: 768px) {
    .text-image-section .lead,
    .text-image-section p,
    .text-image-section div[data-field="text"] {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        display: block !important;
    }
    .text-image-section .col-md-6 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
}

/* =========================================
   FIX: Text-Video Mobile Overflow (Aggressive)
   ========================================= */

@media (max-width: 768px) {
    .content-fix {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .section-text-video .row,
    .text-video-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .content-fix h2,
    .content-fix .lead,
    .content-fix div[data-field="text"],
    .content-fix p {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* =========================================
   FIX: Text-Video Overflow & Layout Reset (Mobile)
   ========================================= */

@media (max-width: 768px) {
    .text-video-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    .text-video-section .col-md-6,
    .text-video-section .content-fix {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        transform: none !important;
        opacity: 1 !important;
        position: static !important;
    }
    .text-video-section h2,
    .text-video-section div,
    .text-video-section p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }
}

/* =========================================
   FIX: Mobile Hero Clean Layout (No Black Gap)
   ========================================= */

@media (max-width: 768px) {
    .hero-section:not(.hero-lcp), .video-hero-section {
        height: auto !important;
        min-height: 400px !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        padding: 80px 15px 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.style-creative .hero-section,
    body.style-creative .video-hero-section {
        padding-bottom: 50px !important;
    }
    .hero-section:not(.hero-lcp) .container, .video-hero-section .container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        padding: 0 !important;
        display: block !important;
        height: auto !important;
    }
    .hero-section:not(.hero-lcp) h1, .video-hero-section h1 {
        font-size: 2rem !important;
        margin-bottom: 15px;
    }
    .hero-section:not(.hero-lcp) p, .video-hero-section p {
        font-size: 1.1rem !important;
        margin-bottom: 25px;
    }
    .hero-section.hero-lcp h1 {
        font-size: 1.75rem !important;
        margin-bottom: 12px;
    }
    .hero-section.hero-lcp p {
        font-size: 1rem !important;
        margin-bottom: 18px;
    }
}

/* ==========================================================================
   FIX: Mobile Editor UI Optimization (Hero Section)
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. Fix Background & Height Controls: row, below header, button right / slider left */
    body[contenteditable="true"] main > .section-wrapper:first-child .hero-section .position-absolute.top-0.start-0.hero-edit-controls,
    body[contenteditable="true"] main > .section-wrapper:first-child .hero-section .position-absolute.top-0.start-0,
    body[contenteditable="true"] main > .section-wrapper:first-child .video-hero-section .position-absolute.top-0.start-0 {
        top: 70px !important;
        left: 8px !important;
        right: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        transform: none !important;
        z-index: 100005 !important;
    }

    /* 2. Fix the Button's Settings Gear Icon */
    body[contenteditable="true"] .hero-section .d-inline-block.position-relative > .btn-dark.rounded-circle,
    body[contenteditable="true"] .video-hero-section .d-inline-block.position-relative > .btn-dark.rounded-circle {
        top: -15px !important;
        left: -10px !important;             /* Anchor to top-left of the button */
        right: auto !important;
        transform: none !important;         /* Remove 'translate-middle' which distorts on mobile */
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 15 !important;
    }

    /* 3. Fix the Button Settings Dropdown Menu */
    body[contenteditable="true"] .hero-section [id^="btn-opts-"],
    body[contenteditable="true"] .video-hero-section [id^="btn-opts-"] {
        top: 110% !important;               /* Push below the button */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Center exactly under the button */
        min-width: 200px !important;
        width: auto !important;
        margin-top: 10px !important;
        z-index: 1000 !important;
    }
}