@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */
:root {
    --dm-primary: #38BDF8;               /* brand accent: links, borders, buttons */
    --dm-secondary: #0F172A;             /* dark navy: backgrounds, text on accent */
    --dm-surface: #172036;               /* raised surface: cards, social icons */
    --dm-line: rgba(255, 255, 255, .08); /* subtle divider */
}

/* =====================================================
   2. DESKTOP HEADER
   ===================================================== */

/* Theme's default menu accent lines recolored to primary blue */
.sc_layouts_menu_nav > li > a:before,
.sc_layouts_menu_nav > li > a:after,
.sc_layouts_menu_nav > li > a > span:before,
.sc_layouts_menu_nav > li > a > span:after {
    background-color: var(--dm-primary) !important;
    border-color: var(--dm-primary) !important;
}

/* Hide menu item descriptions (e.g. "Portfolio Description"), desktop and mobile */
.sc_layouts_menu_nav .sc_layouts_menu_item_description,
.sc_layouts_menu_nav .menu-item-description,
.menu_mobile .sc_layouts_menu_item_description,
.menu_mobile .menu-item-description {
    display: none !important;
}

/* "Contacts Us" button (theme Buttons widget): outlined pill */
.sc_layouts_row .sc_button.sc_button_bordered,
.elementor-location-header .sc_button.sc_button_bordered,
.sc_layouts_item .sc_item_button .sc_button {
    border: 1.5px solid var(--dm-primary) !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    transition: all .25s ease;
}
.sc_layouts_row .sc_button.sc_button_bordered:before,
.sc_layouts_row .sc_button.sc_button_bordered:after,
.elementor-location-header .sc_button.sc_button_bordered:before,
.elementor-location-header .sc_button.sc_button_bordered:after {
    background: transparent !important;
    box-shadow: none !important;
}

/* Hover state: only on devices with a real pointer (avoids sticky hover on touch) */
@media (hover: hover) {
    .sc_layouts_row .sc_button.sc_button_bordered:hover,
    .elementor-location-header .sc_button.sc_button_bordered:hover,
    .sc_layouts_item .sc_item_button .sc_button:hover {
        background: var(--dm-primary) !important;
        border-color: var(--dm-primary) !important;
        color: var(--dm-secondary) !important;
    }
    .sc_layouts_row .sc_button.sc_button_bordered:hover .sc_button_text,
    .sc_layouts_row .sc_button.sc_button_bordered:hover span {
        color: var(--dm-secondary) !important;
    }
}

/* =====================================================
   3. FULLSCREEN MENU: BASE (tablet + mobile, when opened)
   ===================================================== */
@media (max-width: 1279px) {

    /* ---------- Panel ---------- */
    .menu_mobile.opened {
        --mm-btn-fs: 15px;               /* button font size, overridden on tablet */
        overflow-y: auto !important;
    }
    .menu_mobile.opened,
    .menu_mobile.opened .menu_mobile_inner {
        background: var(--dm-secondary) !important;
    }
    .menu_mobile.opened .menu_mobile_inner {
        box-sizing: border-box;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;              /* mobile browsers: excludes dynamic toolbar */
        overflow: visible !important;
        padding: 24px 20px !important;
    }

    /* Flatten theme wrappers so their margins/positioning no longer apply */
    .menu_mobile.opened .menu_mobile_content_wrap,
    .menu_mobile.opened .menu_mobile_content_wrap_inner {
        display: contents !important;
    }

    /* Neutralize the theme's default position, size and scroll behavior */
    .menu_mobile.opened .menu_mobile_nav_area,
    .menu_mobile.opened .menu_mobile_nav_area > ul,
    .menu_mobile.opened .menu_mobile_widgets_area,
    .menu_mobile.opened .menu_mobile_widgets_area [class*="widget"] {
        position: static !important;
        inset: auto !important;
        float: none !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
    }
    .menu_mobile.opened [class*="scrollbar"],
    .menu_mobile.opened [class*="simplebar"],
    .menu_mobile.opened .scroll-wrapper,
    .menu_mobile.opened .scroll-content {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .menu_mobile.opened .scroll-element,
    .menu_mobile.opened .simplebar-track {
        display: none !important;
    }

    /* ---------- Header: logo on the left, Close on the right ---------- */
    .menu_mobile.opened .menu_mobile_header_wrap {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .menu_mobile.opened .menu_mobile_header_wrap img {
        width: 180px !important;
        max-width: 180px !important;
        height: auto !important;
        max-height: none !important;
    }
    .menu_mobile.opened .menu_mobile_close {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 20px !important;
        border: 1px solid rgba(255, 255, 255, .3) !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600;
        line-height: 1 !important;
    }
    .menu_mobile.opened .menu_mobile_close * {
        font-size: 13px !important;
    }

    /* ---------- Menu list ---------- */
    .menu_mobile.opened .menu_mobile_nav_area ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    .menu_mobile.opened .menu_mobile_nav_area > ul > li {
        position: relative;
        margin: 0 !important;
        border: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .menu_mobile.opened .menu_mobile_nav_area > ul > li > a {
        display: block;
        padding: 12px 48px 12px 0 !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 700;
        line-height: 1.2 !important;
        transition: color .25s ease;
    }

    /* Disable the theme's default accent lines inside the mobile menu */
    .menu_mobile.opened .menu_mobile_nav_area li > a:before,
    .menu_mobile.opened .menu_mobile_nav_area li > a:after,
    .menu_mobile.opened .menu_mobile_nav_area li > a > span:before,
    .menu_mobile.opened .menu_mobile_nav_area li > a > span:after {
        display: none !important;
    }

    /* ---------- Active item: blue text ----------
       An item is detected as active by:
       1. WordPress classes (current-menu-item, etc.) or .dm-active (from JS)
       2. Home, when on the front page
       3. Portfolio (Custom Link) on the /portfolio/ archive and on project
          detail pages, matched by its href, so it does not depend on
          classes generated by WordPress */

    /* Text color */
    .menu_mobile.opened .menu_mobile_nav_area > ul > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .dm-active) > a,
    .menu_mobile.opened .menu_mobile_nav_area > ul > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .dm-active) > a > span,
    body.home .menu_mobile.opened .menu_mobile_nav_area > ul > li.menu-item-home > a,
    body.home .menu_mobile.opened .menu_mobile_nav_area > ul > li.menu-item-home > a > span,
    :is(body.post-type-archive-cpt_portfolio, body.single-cpt_portfolio) .menu_mobile.opened .menu_mobile_nav_area > ul > li > a:is([href$="/portfolio"], [href$="/portfolio/"]),
    :is(body.post-type-archive-cpt_portfolio, body.single-cpt_portfolio) .menu_mobile.opened .menu_mobile_nav_area > ul > li > a:is([href$="/portfolio"], [href$="/portfolio/"]) > span {
        color: var(--dm-primary) !important;
    }

    /* Submenu arrow */
    .menu_mobile.opened .open_child_menu {
        color: rgba(255, 255, 255, .5) !important;
    }
    .menu_mobile.opened li.current-menu-item .open_child_menu,
    .menu_mobile.opened li.current_page_item .open_child_menu {
        color: var(--dm-primary) !important;
    }

    /* ---------- Widget area: "Contacts Us" button ---------- */

    /* Every Custom HTML wrapper must be visible */
    .menu_mobile.opened .menu_mobile_widgets_area,
    .menu_mobile.opened .menu_mobile_widgets_area .widgets_additional_menu_mobile_fullscreen_inner,
    .menu_mobile.opened .menu_mobile_widgets_area .widget_area_inner,
    .menu_mobile.opened .menu_mobile_widgets_area aside.widget,
    .menu_mobile.opened .menu_mobile_widgets_area .textwidget,
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_card {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        clip: auto !important;
    }

    .menu_mobile.opened .dm_mm_card {
        background: transparent;
        padding: 0;
    }
    .menu_mobile.opened .menu_mobile_widgets_area h6,
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_mail {
        display: none !important;        /* shown again on tablet, see section 5 */
    }

    /* Button: follows the design system (pill, primary, Space Grotesk) */
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: auto !important;
        box-sizing: border-box;
        padding: 14px 26px !important;
        border: 0 !important;
        border-radius: 999px;
        background: var(--dm-primary) !important;
        color: var(--dm-secondary) !important;
        font: 700 var(--mm-btn-fs) / 1 "Space Grotesk", sans-serif !important;
        letter-spacing: .01em;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: background-color .25s ease;
    }
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }

    /* ---------- Social icons ---------- */
    .menu_mobile.opened .socials_mobile {
        position: static !important;
        display: flex !important;
        justify-content: center;
        gap: 10px;
        margin: 0 !important;
        padding: 20px 0 0 !important;
        border-top: 1px solid var(--dm-line);
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .menu_mobile.opened .socials_mobile a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50%;
        background: var(--dm-surface) !important;
        color: #fff !important;
    }

    /* ---------- Hover: only on devices with a real pointer ---------- */
    @media (hover: hover) {
        .menu_mobile.opened .menu_mobile_close:hover {
            border-color: var(--dm-primary) !important;
            color: var(--dm-primary) !important;
        }
        .menu_mobile.opened .menu_mobile_nav_area > ul > li > a:hover,
        .menu_mobile.opened .open_child_menu:hover {
            color: var(--dm-primary) !important;
        }
        .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_btn:hover {
            background: #7dd3fc !important;
        }
        .menu_mobile.opened .socials_mobile a:hover {
            background: var(--dm-primary) !important;
            color: var(--dm-secondary) !important;
        }
    }
}

/* =====================================================
   4. MOBILE (<= 767px): single column, locked order
   Order: header > menu > widget (button) > social icons
   ===================================================== */
@media (max-width: 767px) {
    .menu_mobile.opened .menu_mobile_inner {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }
    .menu_mobile.opened .menu_mobile_header_wrap img {
        width: 140px !important;
        max-width: 140px !important;
    }
    .menu_mobile.opened .menu_mobile_header_wrap  { order: 1; }
    .menu_mobile.opened .menu_mobile_nav_area     { order: 2; }
    .menu_mobile.opened .menu_mobile_widgets_area { order: 3; align-self: flex-start; }
    .menu_mobile.opened .socials_mobile           { order: 4; margin-top: auto !important; }
}

/* =====================================================
   5. TABLET (768px - 1279px): two columns + "Have a Project?" card
   Grid layout:
       header   header
       nav      widgets
       socials  socials
   ===================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
    .menu_mobile.opened {
        --mm-btn-fs: 16px;
    }
    .menu_mobile.opened .menu_mobile_inner {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header  header"
            "nav     widgets"
            "socials socials";
        align-content: start;
        gap: 32px;
        padding: 32px 40px !important;
    }
    .menu_mobile.opened .menu_mobile_header_wrap  { grid-area: header; }
    .menu_mobile.opened .menu_mobile_nav_area     { grid-area: nav; }
    .menu_mobile.opened .menu_mobile_widgets_area { grid-area: widgets; align-self: start; }
    .menu_mobile.opened .socials_mobile {
        grid-area: socials;
        align-self: end;
        justify-content: flex-start;
        margin-top: 24px !important;
    }

    .menu_mobile.opened .menu_mobile_nav_area > ul > li > a {
        padding: 14px 56px 14px 16px !important;
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    /* Card */
    .menu_mobile.opened .dm_mm_card {
        padding: 24px;
        border-radius: 24px;
        background: var(--dm-surface);
    }
    .menu_mobile.opened .menu_mobile_widgets_area h6 {
        display: block !important;
        margin: 0 0 6px !important;
        color: rgba(255, 255, 255, .55) !important;
        font-size: 11px !important;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_mail,
    .menu_mobile.opened .dm_mm_mail:before,
    .menu_mobile.opened .dm_mm_mail:after {
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_mail {
        display: block !important;
        margin: 0 0 20px;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 700;
    }
    .menu_mobile.opened .menu_mobile_widgets_area .dm_mm_btn {
        padding: 16px 30px !important;
    }
}