/*
Theme Name: Luxe Decor Child
Theme URI: https://luxe-decor.ae/
Description: Custom child theme for Luxe Decor, built on Hello Elementor.
Author: Luxe Decor
Template: hello-elementor
Version: 1.0.5
Text Domain: luxe-decor-child
*/

/* =========================================================
   LUXE DECOR — GLOBAL DESIGN TOKENS
   Palette v2: light, soft, refined.
   Page-specific styling and watermarks do NOT belong here.
   ========================================================= */
:root {
    /* Core palette */
    --luxe-primary: #29332F;
    --luxe-secondary: #78948B;
    --luxe-text: #29332F;
    --luxe-accent: #C6A875;

    /* Light surfaces */
    --luxe-porcelain: #F8FAF7;
    --luxe-linen: #F5F2EC;
    --luxe-mist-sage: #EAF0EC;
    --luxe-soft-sage: #DDE8E3;
    --luxe-sand: #E8DDCC;
    --luxe-white: #FFFFFF;

    /* Supporting tones */
    --luxe-deep-sage: #4F6B63;
    --luxe-muted: #68756F;
    --luxe-line: #DCE5E0;

    /* Conversion */
    --luxe-booking: #E9785F;
    --luxe-booking-hover: #D8644E;

    /* Backward-compatible aliases for previously built Luxe sections. */
    --luxe-charcoal: var(--luxe-primary);
    --luxe-ivory: var(--luxe-porcelain);
    --luxe-stone: var(--luxe-soft-sage);
    --luxe-taupe: var(--luxe-sand);
    --luxe-champagne: var(--luxe-accent);
    --luxe-olive: var(--luxe-secondary);

    --luxe-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --luxe-font-body: "Manrope", Arial, Helvetica, sans-serif;

    --luxe-content-width: 1280px;
    --luxe-radius-sm: 8px;
    --luxe-radius-md: 12px;
    --luxe-transition: 220ms ease;
}

/* =========================================================
   GLOBAL ELEMENTOR PAGE RULES
   Full width + hide Hello/WordPress page title
   ========================================================= */

/*
 * Normal Elementor-built pages span the full browser width.
 * Individual Elementor containers control their own inner max-width.
 * WooCommerce pages are intentionally not forced by these rules.
 */
body.elementor-page:not(.woocommerce-page) .site-main,
body.elementor-page:not(.woocommerce-page) main.site-main,
body.elementor-page:not(.woocommerce-page) .page-content,
body.elementor-page:not(.woocommerce-page) .site-main > .page-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Remove default Hello Elementor outer page spacing on Elementor pages. */
body.elementor-page:not(.woocommerce-page) .site-main {
    padding-inline: 0;
}

/*
 * Hide the default theme-generated page title/header.
 * Designed H1 widgets placed inside Elementor remain visible.
 */
body.elementor-page .page-header,
body.elementor-page header.page-header,
body.elementor-page .entry-header {
    display: none !important;
}

/* Prevent accidental horizontal overflow from full-width visual sections. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}


/* =========================================================
   LUXE DECOR — GLOBAL PAGE CANVAS / GAPLESS CUSTOM SECTIONS
   Keeps the site canvas ivory so Elementor wrapper gaps never
   appear as white lines between custom Luxe HTML sections.
   WooCommerce pages are intentionally excluded.
   ========================================================= */
body.elementor-page:not(.woocommerce-page),
body.elementor-page:not(.woocommerce-page) #page,
body.elementor-page:not(.woocommerce-page) .site-main,
body.elementor-page:not(.woocommerce-page) main.site-main,
body.elementor-page:not(.woocommerce-page) .page-content,
body.elementor-page:not(.woocommerce-page) .elementor {
    background-color: var(--luxe-ivory);
}

/*
 * Our service/page sections are built as full-width custom HTML widgets.
 * When those widgets are stacked inside the same Elementor container,
 * remove Elementor's parent gap so one section meets the next cleanly.
 * This is deliberately scoped to containers holding Luxe custom sections.
 */
body.elementor-page:not(.woocommerce-page)
.e-con:has(> .elementor-element.elementor-widget-html > .elementor-widget-container > [class^="luxe-"]) {
    --gap: 0px;
    gap: 0;
    row-gap: 0;
}

body.elementor-page:not(.woocommerce-page)
.elementor-widget-html:has(> .elementor-widget-container > [class^="luxe-"]) {
    margin-block: 0 !important;
}

/* Keep empty/default Elementor wrappers transparent so the ivory canvas shows. */
body.elementor-page:not(.woocommerce-page)
.e-con:not([data-settings*='background_']) {
    background-color: transparent;
}

/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */
html {
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.elementor-widget-button,
.elementor-nav-menu,
.woocommerce,
.woocommerce-page {
    font-family: var(--luxe-font-body);
}

body {
    color: var(--luxe-text);
    background: var(--luxe-porcelain);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
    font-family: var(--luxe-font-heading);
    color: var(--luxe-text);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-top: 0;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(2.7rem, 4.7vw, 4.9rem);
    line-height: 0.98;
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(2.15rem, 3.3vw, 3.55rem);
    line-height: 1.04;
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(1.55rem, 2.1vw, 2.25rem);
    line-height: 1.12;
}

h4,
.elementor-widget-heading h4.elementor-heading-title {
    font-size: clamp(1.25rem, 1.55vw, 1.6rem);
    line-height: 1.18;
}

h5,
.elementor-widget-heading h5.elementor-heading-title {
    font-size: 1.1rem;
    line-height: 1.25;
}

h6,
.elementor-widget-heading h6.elementor-heading-title {
    font-size: 0.95rem;
    line-height: 1.3;
    font-family: var(--luxe-font-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

a {
    color: inherit;
    transition: color var(--luxe-transition), opacity var(--luxe-transition);
}

a:hover,
a:focus {
    color: var(--luxe-champagne);
}

/* =========================================================
   BUTTON TYPOGRAPHY / BASE INTERACTION
   ========================================================= */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: var(--luxe-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: none;
}

/* =========================================================
   FORM TYPOGRAPHY
   ========================================================= */
input,
select,
textarea {
    font-family: var(--luxe-font-body);
    font-size: 1rem;
}

/* =========================================================
   GLOBAL WIDTH HELPER
   ========================================================= */
.luxe-content-width {
    width: min(calc(100% - 40px), var(--luxe-content-width));
    margin-inline: auto;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
:focus-visible {
    outline: 2px solid var(--luxe-deep-sage);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   MOBILE TYPOGRAPHY REFINEMENTS
   ========================================================= */
@media (max-width: 767px) {
    body {
        font-size: 15.5px;
        line-height: 1.6;
    }

    h1,
    .elementor-widget-heading h1.elementor-heading-title {
        font-size: clamp(2.45rem, 11vw, 3.35rem);
        line-height: 0.98;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.02;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: clamp(1.45rem, 6vw, 1.95rem);
    }

    .luxe-content-width {
        width: min(calc(100% - 28px), var(--luxe-content-width));
    }
}