/*
Theme Name: SJ Morse Child
Theme URI: https://sjmorse.com/
Description: Hello Elementor child — SJ Morse homepage from Figma (frame 32:3). Includes Elementor JSON + bundled Figma-exported images.
Author: SJ Morse
Template: hello-elementor
Version: 1.2.5
Text Domain: sjmorse-child
*/

/* Figma Homepage (32:3) — tokens */
:root {
    --sj-hero-overlay: rgba(60, 60, 60, 0.5);
    --sj-about-bg: #e7e7e7;
    --sj-services-bg: #333638;
    --sj-service-caption: #777e85;
    --sj-cta: #bec852;
    --sj-video-bg: #0a0000;
    --sj-projects-bg: #d9d9d9;
    --sj-footer-bg: #333638;
    --sj-footer-muted: #777e85;
}

body {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
}

/*
 * Positioning context: header is position:absolute, so it layers over the
 * first section. Body + main establish relative stacking (same pattern on
 * Home, Services, About, Projects).
 */
body.sj-morse-home,
body.sj-morse-services,
body.sj-morse-about,
body.sj-morse-projects,
body.sj-morse-quote,
body.sj-morse-contact {
    position: relative;
}

body.sj-morse-home #content.site-main,
body.sj-morse-services #content.site-main,
body.sj-morse-about #content.site-main,
body.sj-morse-projects #content.site-main {
    position: relative;
    z-index: 1;
}

/* Hide duplicate WordPress page title on all pages (Elementor layouts use their own headings). */
body.page .page-header,
body.page .entry-header,
body.page .page-title,
body.page h1.entry-title,
body.elementor-page .page-header,
body.elementor-page .entry-header,
body.elementor-page .page-title,
body.elementor-page h1.entry-title {
    display: none !important;
}

/* Theme Builder header overlays the first (hero) section — same on all Figma pages */
.sj-morse-home .elementor-location-header,
.sj-morse-services .elementor-location-header,
.sj-morse-about .elementor-location-header,
.sj-morse-projects .elementor-location-header,
.sj-morse-quote .elementor-location-header,
.sj-morse-contact .elementor-location-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: transparent !important;
}

.sj-morse-home .elementor-location-header .elementor-section,
.sj-morse-home .sj-el-header,
.sj-morse-services .elementor-location-header .elementor-section,
.sj-morse-services .sj-el-header,
.sj-morse-about .elementor-location-header .elementor-section,
.sj-morse-about .sj-el-header,
.sj-morse-projects .elementor-location-header .elementor-section,
.sj-morse-projects .sj-el-header,
.sj-morse-quote .elementor-location-header .elementor-section,
.sj-morse-quote .sj-el-header,
.sj-morse-contact .elementor-location-header .elementor-section,
.sj-morse-contact .sj-el-header {
    background: transparent !important;
}

/* Header logo + menu + tagline — white on dark heroes (Home, Services, Projects, About) */
.sj-morse-home .sj-el-header .elementor-nav-menu .elementor-item,
.sj-morse-home .sj-el-header .elementor-nav-menu a.elementor-item,
.sj-morse-services .sj-el-header .elementor-nav-menu .elementor-item,
.sj-morse-services .sj-el-header .elementor-nav-menu a.elementor-item,
.sj-morse-about .sj-el-header .elementor-nav-menu .elementor-item,
.sj-morse-about .sj-el-header .elementor-nav-menu a.elementor-item,
.sj-morse-projects .sj-el-header .elementor-nav-menu .elementor-item,
.sj-morse-projects .sj-el-header .elementor-nav-menu a.elementor-item,
.sj-morse-quote .sj-el-header .elementor-nav-menu .elementor-item,
.sj-morse-quote .sj-el-header .elementor-nav-menu a.elementor-item,
.sj-morse-contact .sj-el-header .elementor-nav-menu .elementor-item,
.sj-morse-contact .sj-el-header .elementor-nav-menu a.elementor-item {
    color: #ffffff !important;
}

/* Current page — brand accent (must beat the white rules above on hero pages) */
.sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-el-header .elementor-nav-menu .elementor-item.highlighted,
.sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item,
.sj-el-header .elementor-nav-menu .current-menu-ancestor > .elementor-item,
.sj-morse-home .sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-morse-home .sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item,
.sj-morse-services .sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-morse-services .sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item,
.sj-morse-about .sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-morse-about .sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item,
.sj-morse-projects .sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-morse-projects .sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item,
.sj-morse-quote .sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-morse-quote .sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item,
.sj-morse-contact .sj-el-header .elementor-nav-menu .elementor-item.elementor-item-active,
.sj-morse-contact .sj-el-header .elementor-nav-menu .current-menu-item > .elementor-item {
    color: #bec852 !important;
}

/* Hamburger + close icon on dark heroes */
.sj-morse-home .sj-el-header .elementor-menu-toggle,
.sj-morse-services .sj-el-header .elementor-menu-toggle,
.sj-morse-about .sj-el-header .elementor-menu-toggle,
.sj-morse-projects .sj-el-header .elementor-menu-toggle,
.sj-morse-quote .sj-el-header .elementor-menu-toggle,
.sj-morse-contact .sj-el-header .elementor-menu-toggle {
    color: #ffffff !important;
}

/*
 * Mobile / tablet dropdown: Elementor defaults to a white panel while the
 * theme forces white link color — links disappear. Use dark panel + accent active.
 */
@media (max-width: 1024px) {
    .sj-el-header .elementor-nav-menu--dropdown,
    .sj-el-header .elementor-nav-menu--dropdown.elementor-nav-menu__container,
    .sj-el-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        background-color: #333638 !important;
    }

    .sj-el-header .elementor-nav-menu--dropdown .elementor-item,
    .sj-el-header .elementor-nav-menu--dropdown a.elementor-item {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .sj-el-header .elementor-nav-menu--dropdown .elementor-item:hover,
    .sj-el-header .elementor-nav-menu--dropdown a.elementor-item:hover,
    .sj-el-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
    .sj-el-header .elementor-nav-menu--dropdown .elementor-item.highlighted,
    .sj-el-header .elementor-nav-menu--dropdown .current-menu-item > .elementor-item {
        color: #bec852 !important;
        background-color: rgba(0, 0, 0, 0.15) !important;
    }

    .sj-el-header .elementor-menu-toggle {
        color: #ffffff !important;
    }
}

.sj-morse-home .sj-header-tagline,
.sj-morse-services .sj-header-tagline,
.sj-morse-about .sj-header-tagline,
.sj-morse-projects .sj-header-tagline,
.sj-morse-quote .sj-header-tagline,
.sj-morse-contact .sj-header-tagline {
    color: #ffffff;
}

.sj-el-header,
.sj-el-header.elementor-section {
    background: transparent !important;
    box-shadow: none !important;
}

.sj-header-tagline {
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.sj-el-footer .sj-copyright-line,
.sj-el-footer .elementor-widget-shortcode p {
    color: #f5f5f5;
    text-align: center;
    font-size: 14px;
    margin: 0;
}

/*
 * Figma hero (two layers on .elementor-background-overlay):
 * 1) Rectangle 1440×876 — #3C3C3C @ 50%
 * 2) Top band 350px — linear #000 → #D9D9D9 @ 0%
 * Not Quote/Contact.
 */
body.sj-morse-home .sj-figma-home-hero > .elementor-background-overlay,
body.sj-morse-about .sj-abt-hero > .elementor-background-overlay,
body.sj-morse-services .sj-svc-page-hero > .elementor-background-overlay,
body.sj-morse-projects .sj-prj-hero > .elementor-background-overlay {
    opacity: 1 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    background-image: linear-gradient(
            180deg,
            #000000 0%,
            rgba(217, 217, 217, 0) 100%
        ),
        linear-gradient(rgba(60, 60, 60, 0.5), rgba(60, 60, 60, 0.5)) !important;
    background-size: 100% 350px, 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: top center, center !important;
}

/* Homepage typography and service cards: see figma-32-3.css (Figma 32:3 measurements). */

.sj-services-figma .elementor-image-box-img {
    margin: 0 !important;
}

.sj-services-figma .elementor-image-box-img img {
    display: block;
    object-fit: cover;
}

@media (max-width: 767px) {
    .sj-hero-h .elementor-heading-title {
        font-size: clamp(48px, 12vw, 90px) !important;
    }
}