/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra
Author: Tablet Academy
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/


/* =========================================================
   ELEMENTOR PAGE FIXES
   ========================================================= */

/* Fix Digital Capability section desktop flex direction */
.e-eb63cd9-8b94c76 {
    flex-direction: column !important;
    align-items: center !important;
}

/* Hide Astra page title */
h1.entry-title {
    display: none !important;
}


/* =========================================================
   ELEMENTOR HEADER
   ========================================================= */

/*
 * The header is now built in Elementor rather than Astra.
 * Allow Max Mega Menu dropdowns to escape the header
 * without being clipped.
 */
.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .elementor-element,
.elementor-location-header .elementor-widget-container {
    overflow: visible !important;
}


/* =========================================================
   TA / MAX MEGA MENU
   ========================================================= */


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

#mega-menu-wrap-primary {
    background: transparent !important;
    width: 100% !important;
    position: static !important;
}

#mega-menu-wrap-primary #mega-menu-primary {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Top-level items */
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-item {
    position: static !important;
}


/* Top-level links */
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-item
> a.mega-menu-link {

    display: flex !important;
    align-items: center !important;

    height: auto !important;
    line-height: normal !important;

    padding: 18px 14px !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    color: #ffffff !important;
    background: transparent !important;

    text-decoration: none !important;

    transition: color 0.2s ease !important;
}


/* Hover / current / open */
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-item
> a.mega-menu-link:hover,

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-current-menu-item
> a.mega-menu-link,

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-current-menu-ancestor
> a.mega-menu-link,

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-toggle-on
> a.mega-menu-link {
    color: #FE4402 !important;
}


/* Keep Max Mega Menu arrows aligned */
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-item
> a.mega-menu-link
.mega-indicator {
    margin-left: 7px !important;
}


/* =========================================================
   MEGA MENU POSITIONING CONTEXT
   ========================================================= */

/*
 * Elementor now owns the header layout.
 *
 * The mega menu remains static here so the dropdown can
 * be positioned independently of each individual nav item.
 */
#mega-menu-wrap-primary,
#mega-menu-primary {
    position: static !important;
}


/* =========================================================
   MEGA MENU PANEL
   Width is controlled by responsive JS in functions.php
   ========================================================= */

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu {

    min-width: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 2px solid #EFEFEF !important;
    border-top: 0 !important;

    border-radius: 0 0 10px 10px !important;

    padding: 22px 28px !important;

    min-height: 0 !important;
    height: auto !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06) !important;

    /*
     * Do not hide the dropdown at the Elementor header level.
     * This only clips anything extending outside the actual
     * mega-menu panel.
     */
    overflow: hidden !important;

    z-index: 99999 !important;
}


/* =========================================================
   MEGA MENU SECTION TITLE
   ========================================================= */

html body
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .ta-mega-section-heading {

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    color: #222222 !important;

    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}


/* =========================================================
   REMOVE OLD GENERATED DIAMOND / DOT
   ========================================================= */

/*
 * The old stylesheet inserted "◇" before the heading.
 * The plugin now supplies the actual chosen icon instead.
 */
html body
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .ta-mega-section-heading::before,

html body
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .ta-mega-section-heading::after {

    content: none !important;
    display: none !important;
}


/* =========================================================
   SECTION HEADING ICON
   ========================================================= */

.ta-mega-section-heading-icon {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 18px !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #222222 !important;
}


/* Dashicon version */
.ta-mega-section-heading-icon.dashicons {
    width: 18px !important;
    height: 18px !important;

    font-size: 18px !important;
    line-height: 18px !important;

    color: #222222 !important;
}


/* Custom image icon */
.ta-mega-section-heading-icon img {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    max-width: 18px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Heading text */
.ta-mega-section-heading-text {
    display: inline-block !important;
}


/* =========================================================
   INTERNAL MEGA MENU STRUCTURE
   ========================================================= */

#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
.mega-menu-row,

#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
.mega-menu-column,

#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
ul.mega-sub-menu {

    min-height: 0 !important;
    height: auto !important;
}


/* Main content row */
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .mega-menu-row
> .mega-sub-menu {

    display: flex !important;

    align-items: flex-start !important;

    width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEFT NAVIGATION AREA
   ========================================================= */

#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .mega-menu-row
> .mega-sub-menu
> .mega-menu-column:first-child {

    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* Two-column service grid */
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .mega-menu-row
> .mega-sub-menu
> .mega-menu-column:first-child
> .mega-sub-menu {

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    column-gap: 20px !important;
    row-gap: 6px !important;

    width: 100% !important;

    box-sizing: border-box !important;
}


/* Individual service item */
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .mega-menu-row
> .mega-sub-menu
> .mega-menu-column:first-child
> .mega-sub-menu
> .mega-menu-item {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   SERVICE LINKS
   ========================================================= */

#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .mega-menu-column:first-child
a.mega-menu-link {

    display: block !important;

    width: 100% !important;
    height: auto !important;

    box-sizing: border-box !important;

    padding: 9px 10px !important;

    margin: 0 !important;

    border-radius: 5px !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    color: #111111 !important;

    background: transparent !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease !important;
}


/* Service hover */
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> .mega-menu-column:first-child
a.mega-menu-link:hover {

    background: #F4F4F4 !important;

    color: #FE4402 !important;
}


/* =========================================================
   SERVICE DESCRIPTIONS
   ========================================================= */

#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
.mega-menu-description {

    display: block !important;

    margin-top: 3px !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    color: #666666 !important;

    white-space: normal !important;
}


/* =========================================================
   DYNAMIC ARTICLE LIST
   ========================================================= */

.ta-mega-articles {

    display: flex !important;

    flex-direction: column !important;

    gap: 18px !important;

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ARTICLE CARD
   ========================================================= */

.ta-mega-article {

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    gap: 12px !important;

    width: 100% !important;

    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ARTICLE IMAGE
   ========================================================= */

.ta-mega-article-image {

    display: block !important;

    flex: 0 0 135px !important;

    width: 135px !important;
    min-width: 135px !important;
}

.ta-mega-article-image img {

    display: block !important;

    width: 135px !important;
    height: 88px !important;

    object-fit: cover !important;

    border-radius: 5px !important;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.ta-mega-article-content {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    width: auto !important;

    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

.ta-mega-article-title {

    display: block !important;

    margin: 0 0 3px 0 !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    color: #111111 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;

    text-decoration: none !important;
}

.ta-mega-article-title:hover {
    color: #FE4402 !important;
}


/* =========================================================
   ARTICLE EXCERPT
   ========================================================= */

.ta-mega-article-excerpt {

    margin: 0 0 4px 0 !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    color: #555555 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* =========================================================
   READ MORE
   ========================================================= */

.ta-mega-article-more {

    display: inline-block !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    color: #FE4402 !important;

    white-space: nowrap !important;

    text-decoration: none !important;
}

.ta-mega-article-more:hover {

    color: #FE4402 !important;

    text-decoration: underline !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) and (min-width: 901px) {

    #mega-menu-primary
    > li.mega-menu-megamenu
    > ul.mega-sub-menu {

        padding: 20px 24px !important;
    }

    .ta-mega-article-image {

        flex-basis: 120px !important;

        width: 120px !important;
        min-width: 120px !important;
    }

    .ta-mega-article-image img {

        width: 120px !important;
        height: 78px !important;
    }
}


/* =========================================================
   SMALL TABLET
   Stack navigation above articles
   ========================================================= */

@media (max-width: 900px) and (min-width: 768px) {

    #mega-menu-primary
    > li.mega-menu-megamenu
    > ul.mega-sub-menu
    > .mega-menu-row
    > .mega-sub-menu {

        display: flex !important;

        flex-direction: column !important;

        gap: 22px !important;
    }

    #mega-menu-primary
    > li.mega-menu-megamenu
    > ul.mega-sub-menu
    .mega-menu-column {

        width: 100% !important;

        max-width: 100% !important;

        flex: 0 0 100% !important;
    }

    .ta-mega-article-image {

        flex-basis: 120px !important;

        width: 120px !important;
        min-width: 120px !important;
    }

    .ta-mega-article-image img {

        width: 120px !important;
        height: 78px !important;
    }
}


/* =========================================================
   MOBILE
   Let Max Mega Menu use its mobile layout
   ========================================================= */

@media (max-width: 767px) {

    #mega-menu-wrap-primary,
    #mega-menu-primary {

        position: relative !important;
    }


    #mega-menu-wrap-primary #mega-menu-primary {

        display: block !important;
    }


    #mega-menu-primary
    > li.mega-menu-megamenu
    > ul.mega-sub-menu {

        width: 100% !important;
        max-width: 100% !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        padding: 16px !important;

        border-radius: 0 !important;

        box-shadow: none !important;
    }


    /* Service grid becomes one column */

    #mega-menu-primary
    > li.mega-menu-megamenu
    > ul.mega-sub-menu
    > .mega-menu-row
    > .mega-sub-menu
    > .mega-menu-column:first-child
    > .mega-sub-menu {

        grid-template-columns: 1fr !important;

        column-gap: 0 !important;
    }


    /* Smaller article cards */

    .ta-mega-article {

        gap: 12px !important;
    }

    .ta-mega-article-image {

        flex-basis: 100px !important;

        width: 100px !important;
        min-width: 100px !important;
    }

    .ta-mega-article-image img {

        width: 100px !important;
        height: 70px !important;
    }
}


/* =========================================================
   OUTER BLACK HERO
   ========================================================= */

.home-hero {

    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;

    overflow: hidden !important;
}


/* =========================================================
   RIGHT COLLAGE CONTAINER
   ========================================================= */

.hero-collage {

    position: relative;

    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;

    overflow: hidden !important;
}


/* HTML WIDGET WRAPPERS */

.hero-collage .elementor-widget-html,
.hero-collage .elementor-widget-container {

    height: 650px !important;
    max-height: 650px !important;

    overflow: hidden !important;
}


/* =========================================================
   COLLAGE
   ========================================================= */

.scrolling-collage {

    position: relative;

    display: flex;
    gap: 18px;

    width: 100%;
    height: 650px;
    max-height: 650px;

    overflow: hidden !important;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 7%,
        black 93%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 7%,
        black 93%,
        transparent 100%
    );
}


/* =========================================================
   COLUMNS
   ========================================================= */

.image-column {

    width: 50%;
    height: 650px;
    max-height: 650px;

    overflow: hidden !important;
}


/*
 * Slightly offset the second column.
 * Stops the images looking like a rigid grid.
 */
.column-two {
    padding-top: 55px;
}


/* =========================================================
   IMAGE TRACKS
   ========================================================= */

.image-track {

    display: flex;
    flex-direction: column;

    gap: 18px;

    width: 100%;

    will-change: transform;
}


/* =========================================================
   IMAGES - GENERAL STYLE
   ========================================================= */

.image-track img {

    width: 100%;

    display: block;
    flex-shrink: 0;

    object-fit: cover;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   COLUMN ONE - DIFFERENT IMAGE HEIGHTS
   ========================================================= */

.column-one .image-track img:nth-child(4n + 1) {
    height: 170px;
    flex-basis: 170px;
}

.column-one .image-track img:nth-child(4n + 2) {
    height: 230px;
    flex-basis: 230px;
}

.column-one .image-track img:nth-child(4n + 3) {
    height: 190px;
    flex-basis: 190px;
}

.column-one .image-track img:nth-child(4n + 4) {
    height: 215px;
    flex-basis: 215px;
}


/* =========================================================
   COLUMN TWO - DIFFERENT IMAGE HEIGHTS
   ========================================================= */

.column-two .image-track img:nth-child(4n + 1) {
    height: 215px;
    flex-basis: 215px;
}

.column-two .image-track img:nth-child(4n + 2) {
    height: 175px;
    flex-basis: 175px;
}

.column-two .image-track img:nth-child(4n + 3) {
    height: 235px;
    flex-basis: 235px;
}

.column-two .image-track img:nth-child(4n + 4) {
    height: 185px;
    flex-basis: 185px;
}


/* =========================================================
   ANIMATION
   ========================================================= */

.column-one .image-track {
    animation: collageDown 32s linear infinite;
}

.column-two .image-track {
    animation: collageDown 38s linear infinite;
}

@keyframes collageDown {

    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}


/* =========================================================
   OPTIONAL HOVER EFFECT
   ========================================================= */

.image-track img {

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.image-track img:hover {

    transform: scale(1.02);
    filter: brightness(1.08);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .column-one .image-track,
    .column-two .image-track {

        animation: none !important;
    }
}