/**
 * Rushda Hakim — Global Elementor-Compatible Styles
 *
 * These styles apply site-wide AND inside Elementor's editor/preview.
 * They use specificity that Elementor can't override, and they don't
 * fight Elementor's own selectors. Safe to use with any widget.
 *
 * @package RushdaHakim
 */

/* ============================================================
   1. PROJECT PAGE CONTAINER (side margins)
   ============================================================ */

.rh-project-wrap {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.rh-project-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 6vw 100px;
}

/* Inside Elementor editor, let the container stretch */
.elementor-editor-active .rh-project-container {
    max-width: 100%;
    padding: 40px 2vw;
}

/* Full-bleed option — when an Elementor section has
   stretch=yes, it ignores the container padding */
.rh-project-container .elementor-section/stretch-width {
    margin-left: calc(-6vw);
    margin-right: calc(-6vw);
    width: calc(100% + 12vw);
}


/* ============================================================
   2. GLOBAL HEADING TYPOGRAPHY
   ============================================================ */

.rh-heading,
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
    line-height: 1.15;
    margin: 0;
    padding: 0;
}

/* Hero heading — project page title */
.rh-heading--hero,
.elementor-page .elementor-widget-heading.elementor-widget__heading--hero .elementor-heading-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 0.18em;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* Section heading — large section titles */
.rh-heading--section,
h2.elementor-heading-title {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    letter-spacing: 0.14em;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

/* Sub-heading — smaller labels, category titles */
.rh-heading--sub,
h3.elementor-heading-title {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    letter-spacing: 0.1em;
    font-weight: 400;
    margin-bottom: 1rem;
}

/* Tiny heading — meta, labels, captions */
.rh-heading--tiny,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title {
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 0.75rem;
}


/* ============================================================
   3. GLOBAL BODY / PARAGRAPH / LINK STYLES
   ============================================================ */

.elementor-page p,
.rh-project-body p,
.elementor-widget-text-editor .elementor-widget-container p {
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    color: #333;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.elementor-page a,
.elementor-widget-text-editor a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.elementor-page a:hover,
.elementor-widget-text-editor a:hover {
    border-bottom-color: #000;
}


/* ============================================================
   4. IMAGE WIDGET OVERRIDES
   ============================================================ */

.elementor-page .elementor-widget-image img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Image with no padding — edge-to-edge inside container */
.elementor-page .elementor-widget-image.rh-image--full img {
    width: calc(100% + 6vw);
    margin-left: -3vw;
}

/* Image captions */
.elementor-page figcaption,
.elementor-page .elementor-image-caption {
    font-family: "Work Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: #888;
    margin-top: 0.5rem;
    text-align: center;
}


/* ============================================================
   5. SPACING UTILITIES (apply to Elementor sections/columns)
   ============================================================ */

/* Vertical rhythm for Elementor sections inside the project */
.elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
}

/* Remove Elementor's default bottom margin */
.elementor-page .elementor-section + .elementor-section {
    margin-top: 0;
}

/* Generous section spacing */
.rh-project-body .elementor-section,
.rh-page-content .elementor-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Column text alignment helpers */
.rh-text-left .elementor-column-wrap { text-align: left; }
.rh-text-center .elementor-column-wrap { text-align: center; }
.rh-text-right .elementor-column-wrap { text-align: right; }


/* ============================================================
   6. ELEMENTOR BUTTON STYLE OVERRIDES
   ============================================================ */

.elementor-page .elementor-button,
.elementor-page a.elementor-button {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 36px;
    border: 1px solid #000;
    border-radius: 0;
    background: transparent;
    color: #000;
    transition: background 0.3s ease, color 0.3s ease;
}

.elementor-page .elementor-button:hover,
.elementor-page a.elementor-button:hover {
    background: #000;
    color: #fff;
}


/* ============================================================
   7. SEPARATOR / DIVIDER OVERRIDES
   ============================================================ */

.elementor-page .elementor-divider-separator {
    border-color: #000;
    border-width: 1px;
    width: 100%;
}

.elementor-page .elementor-divider .elementor-divider-separator {
    margin: 0 auto;
}


/* ============================================================
   8. PROJECT DETAIL — fallback non-Elementor layout
   ============================================================ */

.project-detail {
    width: 100%;
}

.project-hero {
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.project-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.project-title-section {
    padding: 60px 6vw 30px;
    text-align: center;
}

.project-title-section h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 0.18em;
    font-weight: 300;
    text-transform: uppercase;
}

.project-meta {
    padding: 0 6vw 40px;
    text-align: center;
}

.project-meta-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
}

.project-intro {
    max-width: 800px;
    margin: 0 auto;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
}

.project-content-blocks {
    padding: 0 6vw 80px;
}

.project-content-blocks img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* Elementor content sits between intro and nav */
.rh-elementor-content {
    padding: 40px 0 0;
}

.rh-elementor-content > .elementor {
    max-width: 100%;
}

/* Spacing above the nav when Elementor content is present */
.rh-elementor-content + .project-nav {
    margin-top: 0;
}

/* ── Previous / Next project navigation ──────────────────────── */

.project-nav {
    display: flex;
    width: 100%;
    border-top: 1px solid #e0e0e0;
}

.project-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 50vh;
    overflow: hidden;
    text-decoration: none;
}

/* When there's only one (first or last project), it goes full width */
.project-nav-item:only-child {
    width: 100%;
}

.project-nav-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s ease;
    z-index: 0;
}

.project-nav-item:hover img {
    transform: scale(1.03);
}

/* Dark overlay so text is always readable */
.project-nav-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    z-index: 1;
    transition: background 0.3s ease;
}

.project-nav-item:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
}

.project-nav-label,
.project-nav-name {
    position: relative;
    z-index: 2;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.project-nav-label {
    margin-top: auto;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.7;
    padding: 0 2rem;
}

.project-nav-name {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 300;
    padding: 0 2rem 2rem;
}

/* Previous = left-aligned text, Next = right-aligned text */
.project-nav-prev {
    border-right: 1px solid #e0e0e0;
}

.project-nav-next {
    margin-left: auto;
}

.project-nav-next .project-nav-label,
.project-nav-next .project-nav-name {
    text-align: right;
}


/* ============================================================
   9. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .rh-project-container {
        padding: 60px 5vw 60px;
    }

    .project-title-section,
    .project-meta,
    .project-content-blocks {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .project-meta-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .rh-project-container .elementor-section/stretch-width {
        margin-left: calc(-5vw);
        margin-right: calc(-5vw);
        width: calc(100% + 10vw);
    }

    .project-nav {
        flex-direction: column;
    }

    .project-nav-item {
        width: 100%;
        height: 40vh;
    }

    .project-nav-prev {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .project-nav-next .project-nav-label,
    .project-nav-next .project-nav-name {
        text-align: left;
    }
}


/* ============================================================
   10. ELEMENTOR GLOBAL STYLES INJECTION
   ============================================================ */

/* These target Elementor's Global Styles panel elements */
:root {
    --rh-primary-font: "Work Sans", sans-serif;
    --rh-heading-weight: 300;
    --rh-heading-transform: uppercase;
    --rh-heading-spacing: 0.12em;
    --rh-body-color: #333;
    --rh-heading-color: #000;
    --rh-accent-color: #666;
    --rh-bg-color: #fff;
    --rh-max-width: 1280px;
}

/* ── Content Wrapper ─────────────────────────────────────────── */
.rh-wrapper,
.elementor-section .rh-wrapper {
    width: 100%;
    max-width: var(--rh-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Override Elementor's default section padding inside wrapper */
.rh-wrapper > .elementor-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Override Elementor's default font stack */
.elementor-page {
    --e-global-typography-primary-font-family: "Work Sans", sans-serif;
    --e-global-color-primary: #000000;
}