/* ========================================================================
   MOBILE OPTIMIZATION (Up to 768px)
   ======================================================================== */
@media (max-width: 768px) {
    /* 1. Base Adjustments */
    :root {
        --section-padding: 60px 0;
    }
    
    section { padding: var(--section-padding); }

    .container { padding: 0 1rem; }

    /* 2. Typography */
    .hero {
        /* Reduce padding: 100px top for header space, 60px bottom */
        padding: 100px 0px 60px; 
        
        /* Ensure the radial gradient doesn't look like a spot on small screens */
        background: radial-gradient(circle at top, #f5f3ff 0%, #fff 80%);
    }

    .hero h1 {
        /* Assuming a large H1, we scale it down for mobile readability */
        font-size: 2.3rem;
        line-height: 1.2;
        margin-bottom: 20px;
        letter-spacing: -0.02em;
    }

    .hero p {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: 0;
        padding: 0 10px; /* Prevents text from hitting screen edges */
    }

    /* Stack buttons on very small screens if they are side-by-side */
    .hero .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .hero .btn-magic {
        width: 100%; /* Full width for easier thumb-tapping */
        max-width: 320px;
    }

    .section-title { font-size: 28px; }

    /* 3. Navigation - Mobile Menu Fix */
    header { height: 70px; }
    
    nav ul { 
        display: none; /* בדרך כלל כאן תטמיע המבורגר, לבינתיים נשאיר רק לוגו ו-CTA */
    }

    .nav-cta {
        padding: 10px 20px !important;
        font-size: 14px;
    }

    /* 4. Magic Input Card (The Hero Input) */
    .magic-card { padding: 24px 16px; }
    
    .magic-input-group {
        flex-direction: column; /* הופך את האינפוט והכפתור לאחד מעל השני */
        gap: 12px;
    }

    .magic-input-group input {
        height: 60px;
        width: 100%;
        font-size: 16px;
    }

    .btn-magic { width: 100%; justify-content: center; }

    /* 5. Intelligence Section (The Terminal) */
    .intel-grid { 
        grid-template-columns: 1fr; 
        gap: 40px; 
        text-align: center;
    }

    .terminal-window {
        height: 300px;
        padding: 15px;
        font-size: 12px;
    }


    .icon-box { margin-bottom: 20px; }

    /* 7. Code Viewer & Tabs */
    .code-tabs {
        width: 100%;
        overflow-x: auto; /* מאפשר גלילה אופקית בטאבים אם הם רבים */
        white-space: nowrap;
        justify-content: flex-start;
    }

    .code-display {
        padding: 20px;
        font-size: 13px;
        overflow-x: auto; /* קריטי כדי שהקוד לא ירחיב את האתר */
    }

    .price-card {
        padding: 40px 24px;
    }

    .price-card .cost { font-size: 42px; }

    /* 9. Comparison Table - Scrollable */
    .table-wrapper {
        width: 100%;
        overflow-x: auto; /* מאפשר גלילה לצדדים בטבלה */
        -webkit-overflow-scrolling: touch;
    }

    .compare-table {
        min-width: 600px; /* מבטיח שהטבלה לא תתכווץ יותר מדי */
    }

    /* 10. Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-brand p { margin: 0 auto; }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .lead-text {
        font-size: 1.2rem;
    }
    .entry-content h2, .entry-content h3{
        line-height: 1.6;
    }
}

/* ========================================================================
   RESPONSIVE REFINEMENT (Mobile & Tablet)
   ======================================================================== */

@media (max-width: 900px) {
    /* --- Purchase & Checkout --- */
    .grid-2 {
        grid-template-columns: 1fr; /* הופך את עמוד הרכישה לטור אחד */
        gap: 40px;
    }

    .purchase-info h1 {
        font-size: 2.5rem; /* מקטין כותרת ענקית במובייל */
        text-align: center;
    }

    .purchase-info .back-link {
        text-align: center;
    }

    .benefit-item {
        max-width: 500px;
        margin: 0 auto 25px;
    }

    /* --- Account Section --- */
    .account-bento-grid {
        grid-template-columns: 1fr; /* פירוק ה-Bento לטור אחד */
    }

    .table-box {
        grid-column: span 1;
        padding: 20px;
        overflow-x: auto; /* מאפשר גלילה לטבלת הגרסאות */
    }

    .version-table {
        min-width: 500px; /* מבטיח שהטבלה לא תתכווץ מדי */
    }

    /* --- About & Affiliate Hero --- */
    .hero-affiliate-form {
        flex-direction: column; /* שדות הטופס אחד מעל השני */
        padding: 20px;
    }

    .hero-affiliate-form .btn-magic {
        width: 100%;
        justify-content: center;
        padding: 18px;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 15px;
    }

    /* --- Timeline (Story) --- */
    .timeline {
        margin-left: 20px; /* צמצום השוליים במובייל */
        padding-left: 30px;
    }

    .timeline-item::before {
        left: -39px; /* התאמת הנקודה לקו המקוצר */
    }

    /* --- Values Grid --- */
    .values-grid {
        grid-template-columns: 1fr; /* קלפי הערכים עוברים לטור אחד */
        gap: 20px;
    }

    /* --- Comparison Table --- */
    .table-wrapper {
        border-radius: 12px;
        margin: 30px -15px; /* "מתיחת" הטבלה לקצוות המסך במובייל */
        width: calc(100% + 30px);
    }

    .compare-table th, .compare-table td {
        padding: 15px;
        font-size: 0.9rem;
    }

    /* --- FAQ --- */
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* התאמות למסכים קטנים מאוד (iPhone SE וכדומה) */
@media (max-width: 480px) {
    .purchase-info h1 {
        font-size: 2rem;
    }

    .checkout-card {
        padding: 25px 20px;
    }

    .btn-checkout, .btn-stripe-sim {
        padding: 15px;
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }
    
    code {
        font-size: 0.9rem; /* מניעת חריגה של קוד הרישיון */
        word-break: break-all;
    }
    
    .license-copy-wrapper {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }
    
    .btn-copy {
        width: 100%;
    }
}


/* ========================================================================
   FINAL RESPONSIVE BATCH (Team, Docs, Legal, Contact, FAQ, Changelog)
   ======================================================================== */

@media (max-width: 1024px) {
    /* --- Documentation Layout --- */
    .docs-layout {
        grid-template-columns: 1fr; /* ביטול הסיידבר הקבוע */
    }
    
    .docs-sidebar {
        display: none; /* במציאות תרצה להפוך אותו לתפריט נפתח (Drawer) */
    }
    
    .docs-content {
        padding: 60px 25px;
        max-width: 100%;
    }

    .docs-content h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    /* --- Team Grid --- */
    .team-grid {
        grid-template-columns: 1fr; /* חבר צוות אחד בשורה */
        gap: 50px;
    }

    /* --- Contact Page --- */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .info-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px;
    }

    /* --- Legal & Policy Pages --- */
    .container-slim {
        padding: 0 20px;
    }

    .legal-content h2 {
        font-size: 1.4rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .highlight-info {
        padding: 30px 20px;
    }

    /* --- FAQ (Accordion) --- */
    .faq-question h4 {
        font-size: 1rem;
        padding-right: 15px; /* מקום לאייקון */
    }

    .faq-answer-content {
        font-size: 0.95rem;
    }

    /* --- Changelog (Timeline) --- */
    .timeline {
        padding-left: 25px;
        margin-left: 10px;
    }

    .log-entry::before {
        left: -34px; /* התאמה של העיגול לקו המצומצם */
    }

    .log-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    /* --- Error 404 Page --- */
    .error-text h1 {
        font-size: 2.5rem;
    }

    .error-actions {
        flex-direction: column;
        padding: 0 20px;
    }

    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* התאמות עדינות למכשירים קטנים מאוד */
    .section-title {
        font-size: 2rem;
    }

    .code-block {
        padding: 15px;
        font-size: 0.8rem;
        overflow-x: auto;
    }

    .info-note {
        padding: 15px;
    }

    .change-list li {
        font-size: 0.9rem;
    }

    /* מניעת חריגה של תיבות קוד וטקסט טכני */
    pre, code {
        word-wrap: break-word;
        white-space: pre-wrap;
    }
}


/* ========================================================================
   MOBILE ARCHITECTURE (Max-width: 1024px)
   ======================================================================== */

@media (max-width: 1024px) {
    
    /* 1. Global Spacing & Layout */
    .freedom-byok, .context-intelligence, .acf-integration, .seo-conversion {
        padding: 80px 10px; /* Tighter padding for mobile */
    }

    .byok-grid, .context-wrapper, .acf-grid, .seo-grid {
        grid-template-columns: 1fr !important; /* Force vertical stacking */
        gap: 60px;
        text-align: center;
    }

    /* 2. BYOK Typography & Buttons */
    .byok-title {
        font-size: 3rem; /* Scaled down from 4.5rem */
        line-height: 1.1;
    }

    .byok-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .feature-rows {
        align-items: center; /* Center icons/text on mobile */
    }

    .link-secondary {
        display: block; /* Stack secondary link under the main button */
        margin: 20px 0 0 0;
    }

    /* 3. Visual Mockups (The Critical Fix) */
    .site-preview-container, .optimization-hub {
        height: auto !important; /* Allow container to grow with content */
        min-height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 40px 15px;
        overflow: visible; /* Prevent shadows from being cut off */
    }

    /* Reset all absolute cards to stack naturally */
    .site-card, .yoast-status-card, .form-gen-card, .api-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto;
        transform: none !important; /* Stop floating animations if they break flow */
    }

    .scanner-beam {
        display: none; /* Hide scanner beam on mobile to reduce visual noise */
    }

    /* 4. ACF Field Mapper Mobile */
    .field-row {
        flex-direction: column; /* Stack Field Label -> Arrow -> AI Label */
        gap: 12px;
        padding: 20px;
    }

    .field-link {
        transform: rotate(90deg); /* Turn the arrow to point down */
        padding: 10px 0;
    }

    /* 5. Feature Bullets */
    .bullet {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .c-feature {
        border-left: none;
        border-top: 3px solid var(--ocm-accent);
        padding: 20px 0 0 0;
        margin: 0 auto;
    }

    .cookie-consent{
        left: 0;
        right: 0;
        max-width: 95%;
        margin: 0 auto;
    }
    .data-specs {
        justify-content: center;
    }
    .bento-section {
        padding: 70px 0;
    }
    .pricing-section {
        padding: 70px 0;
    }
}

/* ========================================================================
   X-SMALL DEVICES (Max-width: 480px)
   ======================================================================== */

@media (max-width: 480px) {
    .byok-title {
        font-size: 2.4rem;
    }

    .protocol-label {
        font-size: 0.7rem;
        justify-content: center;
    }

    .btn-ocm-primary {
        width: 100%; /* Full width buttons for easier thumb tapping */
        padding: 18px 20px;
    }
    
    .key-display {
        font-size: 0.8rem;
        flex-direction: column;
   }
}

@media (max-width: 991px) {
    .pricing-grid {
        display: flex !important;
        grid-template-columns: none;
        gap: 0;
        padding-bottom: 60px;
        padding: 0;
    }

    .pricing-swiper {
        overflow: visible !important;
    }

    .swiper-slide {
        height: auto;
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 0.4;
        transform: scale(0.9);
    }

    .swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }

    .price-card {
        padding: 40px 30px;
        margin: 0;
    }

    .price-card .cost {
        font-size: 52px;
    }

    .pricing-pagination .swiper-pagination-bullet-active {
        background: var(--ocm-primary);
        width: 24px;
        border-radius: 10px;
    }
}

@media (min-width: 992px) {
    .pricing-grid {
        transform: none !important;
    }
}


/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-brand {
        grid-column: span 2;
        margin-bottom: 20px;
    }
}

@media (max-width: 580px) {
    .site-footer {
        padding: 60px 0 30px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: start;
        gap: 40px;
        margin-bottom: 0;
    }
    .footer-brand, .footer-brand .footer-tagline {
        max-width: 100%;
        margin: 0 auto 30px;
        text-align: center;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer-terms-menu {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 20px;
    }
    .footer-brand .logo {
        text-align: center;
    }
}


/* ========================================================================
   MOBILE RESPONSIVE REFINEMENTS (Max-width: 768px)
   ======================================================================== */

@media (max-width: 768px) {

    /* 2. Typography Scaling */
    h1, .about-hero h1, .product_title {
        font-size: 1.5rem !important; /* Scale down large titles */
        letter-spacing: -1px;
    }

    .hero-subtitle, .byok-lead {
        font-size: 1.1rem;
    }

    /* 3. Post & Product Layouts */
    .post-grid-layout, 
    .woocommerce-full-width .product,
    .context-wrapper {
        grid-template-columns: 1fr !important; /* Force single column */
        gap: 40px;
        padding: 0;
    }

    /* 4. Full-Width Breakouts Reset */
    .post-image-breakout, .post-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        left: 0 !important;
        padding: 40px 15px;
    }

    .featured-img-box {
        height: 300px; /* Fixed height for mobile readability */
        border-radius: 20px;
    }

    /* 5. WooCommerce Elements */
    .woocommerce div.product form.cart {
        flex-direction: column; /* Stack Quantity and Button */
        align-items: stretch;
    }

    .woocommerce div.product form.cart div.quantity {
        margin-right: 0;
        margin-bottom: 15px;
        justify-content: center; /* Center numbers in mobile */
    }

    .single_add_to_cart_button {
        width: 100%; /* Full width button for better thumb-reach */
        text-align: center;
    }

    /* 6. Timeline & Values Grid */
    .timeline::before {
        left: 20px; /* Move line to the left */
    }

    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-left: 45px;
        margin-bottom: 50px;
    }

    .timeline-item .time {
        text-align: left !important;
        font-size: 32px;
        margin-bottom: 10px;
    }

    .timeline-item .content {
        width: 100%;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    /* 7. Footer Adjustments */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand .footer-tagline {
        margin: 0 auto 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }

    .summary .price {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }
    .woocommerce div.product div.images {
        margin-bottom: 0;
    }
    .woocommerce-product-details__short-description {
        font-size: 1rem;
        margin-bottom: 0;
    }
}

/* 8. Small Devices Extra Polish (Max-width: 480px) */
@media (max-width: 480px) {
    .about-hero {
        padding: 120px 0 40px;
    }
    
    .entry-content {
        font-size: 1rem; /* Better reading experience on small screens */
    }

    .entry-content h2, .entry-content h3 {
        font-size: 1.4rem !important;
    }
}

/** * 8. Mobile Adjustments
 */
@media (max-width: 768px) {
    .woocommerce-products-header__title {
        font-size: 2.5rem;
    }
    
    ul.products {
        grid-template-columns: 1fr !important; /* Stack on mobile */
        padding: 0 20px !important;
    }
    
    ul.products li.product {
        padding: 20px !important;
    }
}

/* Mobile Alignment */
@media (max-width: 768px) {
    .woocommerce-ordering {
        justify-content: center;
        width: 100%;
    }
    .woocommerce-ordering select {
        width: 100%;
        max-width: 100%;
    }
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .archive-hero {
        padding: 60px 20px;
    }
}