/**
 * NPX Homepage Custom Styles
 * Pixel-perfect styling to match design screenshots
 */

/* ==========================================================================
   Hero Section
   ========================================================================== */

.npx-hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Ensure Text Column is cleaner */
.npx-hero .wp-block-column:first-child {
    padding-right: 40px;
    /* Space between text and image */
}

.npx-hero__title span {
    font-weight: 400;
}

.npx-hero__subtitle {
    color: #000;
    /* Darker text as per screenshot */
    max-width: 90%;
    line-height: 1.5;
}

/* Hero Actions - Desktop */
.npx-hero .wp-block-buttons {
    margin-top: 30px;
    display: flex;
    /* Required for gap to work */
    align-items: center;
    /* User controls gap in editor */
}

.npx-hero .wp-block-button {
    margin-bottom: 0;
    margin-right: 0 !important;
    /* Reset margins in favor of Editor gap */
}

.npx-hero .wp-block-button__link {
    font-weight: 600;
    /* Bold buttons */
    transition: all 0.2s ease;
    /* Padding handled by theme.json for editability */
}

/* Primary Button Hover */
.npx-hero .wp-block-button:not(.is-style-text) .wp-block-button__link:hover {
    background-color: #0052CC !important;
    transform: translateY(-2px);
}

/* Secondary Button - Text Link Style (Targeting is-style-text) */
.npx-hero .wp-block-button.is-style-text .wp-block-button__link {
    background: transparent;
    /* Remove forced 0 padding to allow editor control */
    /* padding-left: 0 !important; */
    /* padding-right: 0 !important; */
    color: #000;
    border: none !important;
    /* Ensure no border */
}

.npx-hero .wp-block-button.is-style-text .wp-block-button__link:hover {
    background-color: transparent !important;
    text-decoration: underline;
    color: #0071E3;
    /* Primary Blue Hover */
}

/* Hero Image - Desktop */
.npx-hero__image figure {
    margin: 0;
}

.npx-hero__image img {
    max-width: 100%;
    /* Ensure it fills column */
    height: auto;
    display: block;
    object-fit: contain;
    /* Optional: Add drop shadow to match "product on white" look if needed, but not in screenshot usually */
    margin-left: auto;
    /* Push to right if smaller */
    margin-right: auto;
}

/* ==========================================================================
   Traceability Section
   ========================================================================== */

.npx-traceability__title {
    margin-bottom: 24px;
}

.npx-traceability__image img {
    border-radius: 12px;
}

.npx-traceability .npx-button--primary .wp-block-button__link:hover {
    background-color: #0052CC !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Header (sticky handled globally in frontend.css)
   ========================================================================== */

.npx-header__logo img {
    height: 32px;
    width: auto;
}

.npx-header__nav .wp-block-navigation__container {
    gap: 32px;
}

.npx-header__nav .wp-block-navigation-item a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.2s ease;
}

.npx-header__nav .wp-block-navigation-item a:hover {
    color: #0071E3;
}

.npx-header__icon-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.npx-header__icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.npx-compliance-banner__text {
    margin: 0;
}

.npx-footer-links .wp-block-column {
    min-width: 0;
}

.npx-footer__column-title {
    margin-top: 0;
}

.npx-footer__links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.npx-footer__links li {
    margin-bottom: 0;
}

.npx-footer__links a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.npx-footer__links a:hover {
    color: #0071E3;
}

.is-style-no-bullets {
    list-style-type: none !important;
}

.is-style-no-bullets li {
    padding-left: 0;
}

/* ==========================================================================
   Global Button Styles
   ========================================================================== */

.wp-block-button__link {
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

.wp-block-button.npx-button--primary .wp-block-button__link {
    background-color: #0071E3;
    border: none;
}

.wp-block-button.npx-button--secondary .wp-block-button__link {
    background: transparent;
    color: #000;
    border: 1px solid #D2D2D7;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.wp-block-heading {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 782px) {
    .npx-hero {
        min-height: auto;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        overflow-x: hidden;
        /* Fix horizontal overflow */
    }

    .npx-hero__title {
        font-size: 36px !important;
        margin-bottom: 16px !important;
        line-height: 1.2 !important;
    }

    .npx-hero__subtitle {
        margin-bottom: 24px !important;
    }

    .npx-hero .wp-block-columns {
        flex-direction: column-reverse;
        /* Image on top logic? No, typically Image on top or text on top. Screenshot 4 shows text on top. Let's keep normal column flow but stack them. User said "currently it looks like 3rd screenshot", wait. */
        /* Actually, for standard mobile hero, usually image is top or bottom depending on design. Let's stick to column direction, so first col (Text) then second col (Image). */
        flex-direction: column;
        gap: 40px;
    }

    /* Fix the specific overflow issue caused by nowrap buttons */
    /* Using correct selector based on HTML structure */
    .npx-hero .wp-block-buttons {
        flex-wrap: wrap !important;
        justify-content: center;
        /* Center buttons on mobile */
        gap: 16px !important;
    }

    /* Center Text Content */
    .npx-hero .wp-block-column:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-right: 0 !important;
        /* Reset desktop padding */
    }

    .npx-hero__actions .wp-block-button {
        width: 100%;
        max-width: 350px;
        /* Prevent full width visual stretch */
    }

    /* Reduce padding for primary button on mobile - Targeted by background class since npx-button--primary is missing */
    .npx-hero .wp-block-button__link.has-primary-background-color {
        padding: 12px 14px !important;
    }

    /* Ensure image fits */
    .npx-hero__image {
        max-width: 80%;
        /* Don't be too huge */
        margin: 0 auto;
    }

    /* Other sections... */
    .npx-traceability {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .npx-traceability__title {
        font-size: 32px !important;
    }

    .npx-traceability .wp-block-columns {
        flex-direction: column-reverse;
        /* Keep this logic for traceability if correct */
    }

    .npx-footer-links {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .npx-footer-links .wp-block-columns {
        flex-wrap: wrap;
    }

    .npx-footer-links .wp-block-column {
        flex-basis: 50% !important;
        margin-bottom: 32px;
    }
}

@media (max-width: 600px) {
    .npx-footer-links .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ==========================================================================
   Container Utilities
   ========================================================================== */

.npx-container,
.wp-block-group.alignfull>.wp-block-group__inner-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.npx-hero__content {
    animation: fadeIn 0.6s ease-out;
}