/*
Theme Name: Sustaina Child
Description: Custom child theme for the Sustaina logistics website, based on Blocksy.
Author: Sustaina
Template: blocksy
Version: 1.0.0
Text Domain: sustaina
*/


/* ===========================
   Single Service Page
   =========================== */

    /* Import Manrope font */
    @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
    
    .sustaina-single-service {
        background-color: #0b1628;
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        min-height: 100vh;
    }
    
    /* Remove Blocksy default content padding */
    .sustaina-single-service .entry-content,
    .sustaina-single-service .content-wrap {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Page inner wrapper - matches Figma padding */
    .service-page-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 100px 89px 100px 89px;
        max-width: 1440px;
        margin: 0 auto;
        box-sizing: border-box;
        width: 100%;
    }
    
    /* ── Breadcrumb ── */
    .breadcrumb-nav {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        align-self: stretch;
        text-decoration: none;
    }
    
    .breadcrumb-back {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }
    
    .breadcrumb-arrow {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        filter: brightness(0) invert(1);
    }
    
    .breadcrumb-services {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 24px;
        font-weight: 400;
        line-height: normal;
        text-decoration: none;
    }
    
    .breadcrumb-back:hover .breadcrumb-services {
        opacity: 0.8;
    }
    
    .breadcrumb-sep {
        color: #ffffff;
        font-size: 24px;
        font-weight: 400;
        opacity: 0.4;
        line-height: normal;
    }
    
    .breadcrumb-current {
        color: #30AEA4;
        font-family: 'Manrope', sans-serif;
        font-size: 24px;
        font-weight: 600;
        line-height: normal;
    }
    
    /* ── Service Header ── */
    .service-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-self: stretch;
    }
    
    .service-title {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 56px;
        font-weight: 600;
        line-height: normal;
        margin: 0;
    }
    
    .service-tagline {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 24px;
        font-weight: 400;
        line-height: normal;
        margin: 0;
    }
    
    /* ── Hero Image ── */
    .service-hero-image {
        align-self: stretch;
        width: 100%;
    }
    
    .service-main-image {
        width: 100%;
        aspect-ratio: 1260 / 391;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: 4px;
    }
    
    /* ── Service Content ── */
    .service-content {
        align-self: stretch;
        width: 100%;
    }
    
    .service-content p {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.7;
        margin-bottom: 24px;
    }
    
    .service-content p:last-child {
        margin-bottom: 0;
    }
    
    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .service-page-inner {
            padding: 80px 48px;
        }
    
        .service-title {
            font-size: 42px;
        }
    
        .breadcrumb-services,
        .breadcrumb-sep,
        .breadcrumb-current {
            font-size: 18px;
        }
    }
    
    @media (max-width: 768px) {
        .service-page-inner {
            padding: 60px 24px;
            gap: 28px;
        }
    
        .service-title {
            font-size: 32px;
        }
    
        .service-tagline {
            font-size: 18px;
        }
    
        .breadcrumb-nav {
            gap: 20px;
        }
    
        .breadcrumb-services,
        .breadcrumb-sep,
        .breadcrumb-current {
            font-size: 16px;
        }
    
        .service-main-image {
            aspect-ratio: 16 / 9;
        }
    
        .service-content p {
            font-size: 16px;
        }
    }

    /* ============================================
   Sustaina Buttons — Global Reusable
   ============================================ */
    
    .sustaina-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 48px;
        padding: 12px 24px;
        border-radius: 26px;
        text-decoration: none;
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #E4F6F5;
        cursor: pointer;
        overflow: hidden;
        isolation: isolate;
        border: none;
        outline: none;
        transition: color 0.3s ease;
    }
    
    .sustaina-btn:hover,
    .sustaina-btn:focus {
        color: #E4F6F5;
        text-decoration: none;
        outline: none;
    }
    
    /* ── Button text ── */
    .sustaina-btn__text {
        position: relative;
        z-index: 2;
        color: #E4F6F5;
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        white-space: nowrap;
        pointer-events: none;
    }
    
    /* ── Icon wrapper ──
       Larger than the icon to give
       ellipses room to breathe */
    .sustaina-btn__icon-wrap {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        pointer-events: none;
    }
    
    /* ── Arrow icon ── */
    .sustaina-btn__icon {
        position: relative;
        z-index: 3;
        width: 12px;
        height: 12px;
        filter: brightness(0) invert(1);
        flex-shrink: 0;
        transition:
            transform 0.3s ease-out,
            width 0.3s ease-out,
            height 0.3s ease-out;
    }
    
    .sustaina-btn:hover .sustaina-btn__icon {
        transform: translate(4px, 0);
        width: 10px;
        height: 10px;
    }
    
    /* ── Ellipses
       Shown as right-half circles beside arrow
       Hidden at scale(0), grow to scale(1) on hover ── */
    .sustaina-btn__ellipse-inner,
    .sustaina-btn__ellipse-outer {
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 65%;
        translate: -50% -50%;
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
        clip-path: inset(0 0 0 50%);
        transition:
            opacity 0.3s ease-out,
            transform 0.3s ease-out;
    }
    
    .sustaina-btn__ellipse-inner {
        width: 22px;
        height: 22px;
        border: 0.7px solid #E4F6F5;
        z-index: 2;
    }
    
    .sustaina-btn__ellipse-outer {
        width: 34px;
        height: 34px;
        border: 0.9px solid #E4F6F5;
        z-index: 1;
    }
    
    .sustaina-btn:hover .sustaina-btn__ellipse-inner,
    .sustaina-btn:hover .sustaina-btn__ellipse-outer {
        opacity: 1;
        transform: scale(1);
    }
    
    /* ── Fill layer
       Slides in from right to left on hover ── */
    .sustaina-btn__fill {
        position: absolute;
        inset: 0;
        border-radius: 26px;
        z-index: 1;
        transform: translateX(101%);
        transition: transform 0.35s ease-out;
        pointer-events: none;
    }
    
    /* ============================================
       Teal Button
       ============================================ */
    
    .sustaina-btn--teal {
        background: #30AEA4;
        min-width: 182px;
    }
    
    .sustaina-btn--teal .sustaina-btn__fill {
        background: #289D93;
    }
    
    .sustaina-btn--teal:hover .sustaina-btn__fill {
        transform: translateX(0);
    }
    
    /* ============================================
   Glass Button
   ============================================ */

.sustaina-btn--glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Corner arc border —
   45deg = top-right and bottom-left corners */
.sustaina-btn--glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 26px;
    padding: 1px;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.65) 18%,
        rgba(255, 255, 255, 0)    35%,
        rgba(255, 255, 255, 0)    65%,
        rgba(255, 255, 255, 0.65) 82%,
        rgba(255, 255, 255, 0.65) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: none;
}

/* No border change on hover — border stays static */
.sustaina-btn--glass:hover::before {
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.65) 18%,
        rgba(255, 255, 255, 0)    35%,
        rgba(255, 255, 255, 0)    65%,
        rgba(255, 255, 255, 0.65) 82%,
        rgba(255, 255, 255, 0.65) 100%
    );
}

/* Extremely subtle fill — barely visible sweep */
.sustaina-btn--glass .sustaina-btn__fill {
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: none;
}

.sustaina-btn--glass:hover .sustaina-btn__fill {
    transform: translateX(0);
}

/* Remove ::after entirely — no border blink on button */
.sustaina-btn--glass::after {
    display: none;
}

/* Grid line blink below button —
   uses a box-shadow on the bottom
   to simulate the vertical grid line brightening */
.sustaina-btn--glass {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition:
        box-shadow 0.35s ease-out,
        color 0.3s ease;
}

.sustaina-btn--glass:hover {
    color: #E4F6F5;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5);
    animation: grid-line-blink 0.4s ease-out forwards;
}

@keyframes grid-line-blink {
    0%   { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0);   }
    30%  { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7); }
    65%  { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2); }
    100% { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); }
}
    
    /* ============================================
       CTA Section
       ============================================ */
    
    .sustaina-cta-section {
        position: relative;
        width: 100%;
        min-height: 556px;
        background: linear-gradient(180deg, #131D77 0%, #1A2BB7 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-family: 'Manrope', sans-serif;
    }
    
    /* ── Grid overlay ── */
    .cta-grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }
    
    /* Vertical columns */
    .cta-grid-cols {
        position: absolute;
        inset: 0;
        display: flex;
    }
    
    .cta-grid-col {
        flex: 1;
        border-right: 1px solid rgba(255, 255, 255, 0.09);
        height: 100%;
    }
    
    .cta-grid-col:last-child {
        border-right: none;
    }
    
    /* Horizontal rows */
    .cta-grid-rows {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
    }
    
    .cta-grid-row {
        flex: 1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        width: 100%;
    }
    
    .cta-grid-row:last-child {
        border-bottom: none;
    }
    
    /* ── Inner content ── */
    .cta-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 80px 40px;
        text-align: center;
        max-width: 860px;
        width: 100%;
    }
    
    /* ── Title — two lines ── */
    .cta-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        font-family: 'Satoshi', 'Manrope', sans-serif;
        font-size: 40px;
        font-weight: 500;
        line-height: 55px;
        background: linear-gradient(357deg, #B2E4E1 38.25%, #FAFBF8 82.61%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .cta-title__line1,
    .cta-title__line2 {
        display: block;
    }
    
    /* ── Description ── */
    .cta-description {
        color: #ffffff;
        font-size: 24px;
        font-weight: 500;
        line-height: 40px;
        margin: 0;
    }
    
    /* ── Buttons row ── */
    .cta-buttons {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 8px;
    }
    
    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .cta-description {
            font-size: 20px;
        }
    }
    
    @media (max-width: 768px) {
        .cta-title {
            font-size: 28px;
            line-height: 40px;
        }
    
        .cta-description {
            font-size: 18px;
            line-height: 30px;
        }
    
        .cta-inner {
            padding: 60px 24px;
        }
    
        .sustaina-btn {
            font-size: 16px;
            height: 44px;
        }
    
        .sustaina-btn__text {
            font-size: 16px;
        }
    
        .sustaina-btn--teal {
            min-width: auto;
        }
    }