/*
 * WWTS project CSS core.
 *
 * Keep design tokens, low-specificity element fallbacks and shared project
 * layout rules here. Site components live in assets/css/components/ and may be
 * bundled into a single production stylesheet later by the theme build step.
 */

/*
 * Design-system bridge
 * --------------------
 * Elementor Global Fonts and Global Colors remain the source of truth for
 * design-token values. WWTS exposes stable project aliases and uses them only
 * as low-level fallbacks, so Elementor Theme Style and widget/template-specific
 * styles can override them normally.
 *
 * Elementor declares --e-global-* variables on the Kit-bearing body element,
 * not on :root. Re-declaring WWTS aliases there lets them resolve against the
 * actual Kit values instead of computing root-level fallback values.
 * Keep :root aliases as fallbacks for non-Elementor contexts.
 */
:root,
body[class*="elementor-kit-"] {
    /* Typography families. */
    --wwts-font-primary: var(--e-global-typography-primary-font-family, Georgia, serif);
    --wwts-font-secondary: var(--e-global-typography-secondary-font-family, Georgia, serif);
    --wwts-font-text: var(--e-global-typography-text-font-family, Arial, sans-serif);
    --wwts-font-accent: var(--e-global-typography-accent-font-family, Arial, sans-serif);

    /* Primary typography fallbacks. */
    --wwts-primary-weight: var(--e-global-typography-primary-font-weight, 400);
    --wwts-primary-style: var(--e-global-typography-primary-font-style, normal);
    --wwts-primary-transform: var(--e-global-typography-primary-text-transform, none);
    --wwts-primary-decoration: var(--e-global-typography-primary-text-decoration, none);
    --wwts-primary-line-height: var(--e-global-typography-primary-line-height, normal);
    --wwts-primary-letter-spacing: var(--e-global-typography-primary-letter-spacing, normal);
    --wwts-primary-word-spacing: var(--e-global-typography-primary-word-spacing, normal);

    /* Text typography fallbacks. */
    --wwts-text-weight: var(--e-global-typography-text-font-weight, 400);
    --wwts-text-style: var(--e-global-typography-text-font-style, normal);
    --wwts-text-transform: var(--e-global-typography-text-text-transform, none);
    --wwts-text-decoration: var(--e-global-typography-text-text-decoration, none);
    --wwts-text-line-height: var(--e-global-typography-text-line-height, normal);
    --wwts-text-letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
    --wwts-text-word-spacing: var(--e-global-typography-text-word-spacing, normal);

    /* Accent typography fallbacks (buttons and other controls). */
    --wwts-accent-weight: var(--e-global-typography-accent-font-weight, 400);
    --wwts-accent-style: var(--e-global-typography-accent-font-style, normal);
    --wwts-accent-transform: var(--e-global-typography-accent-text-transform, none);
    --wwts-accent-decoration: var(--e-global-typography-accent-text-decoration, none);
    --wwts-accent-line-height: var(--e-global-typography-accent-line-height, normal);
    --wwts-accent-letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
    --wwts-accent-word-spacing: var(--e-global-typography-accent-word-spacing, normal);

    /* Color tokens. */
    --wwts-color-primary: var(--e-global-color-primary, #333333);
    --wwts-color-secondary: var(--e-global-color-secondary, #666666);
    --wwts-color-text: var(--e-global-color-text, #333333);
    --wwts-color-accent: var(--e-global-color-accent, #b89b6a);

    /* Shared card surface. Use for standard project cards unless a component has an explicit exception. */
    --wwts-card-surface: rgba(255, 253, 250, 0.96);
    --wwts-card-border: 1px solid rgba(85, 70, 55, 0.09);
    --wwts-card-radius: 8px;
    --wwts-card-shadow: 0 16px 34px rgba(72, 57, 43, 0.13), 0 3px 9px rgba(72, 57, 43, 0.06);
    --wwts-card-shadow-hover: 0 22px 44px rgba(72, 57, 43, 0.18), 0 6px 14px rgba(72, 57, 43, 0.09);
}

/*
 * Base typography fallbacks
 * -------------------------
 * Zero-specificity selectors are intentional: Elementor Theme Style and any
 * explicit widget/template styles should always be able to override these.
 * Font sizes are intentionally NOT set here.
 */
:where(body) {
    font-family: var(--wwts-font-text);
    font-weight: var(--wwts-text-weight);
    font-style: var(--wwts-text-style);
    text-transform: var(--wwts-text-transform);
    text-decoration: var(--wwts-text-decoration);
    line-height: var(--wwts-text-line-height);
    letter-spacing: var(--wwts-text-letter-spacing);
    word-spacing: var(--wwts-text-word-spacing);
    color: var(--wwts-color-text);
}

:where(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
    font-family: var(--wwts-font-primary);
    font-weight: var(--wwts-primary-weight);
    font-style: var(--wwts-primary-style);
    text-transform: var(--wwts-primary-transform);
    text-decoration: var(--wwts-primary-decoration);
    line-height: var(--wwts-primary-line-height);
    letter-spacing: var(--wwts-primary-letter-spacing);
    word-spacing: var(--wwts-primary-word-spacing);
    color: var(--wwts-color-primary);
}

:where(a) {
    color: var(--wwts-color-accent);
}

:where(a:hover, a:focus-visible) {
    color: var(--wwts-color-primary);
}

/*
 * Generated breadcrumbs
 * ---------------------
 * Elementor places [wwts_breadcrumbs], while Rank Math owns the generated
 * inner markup. Keep one shared treatment here so page/archive/single contexts
 * render the same breadcrumb language without component-specific duplication.
 */
.wwts-breadcrumbs .rank-math-breadcrumb {
    font-family: var(--wwts-font-text);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--e-global-color-85a8185, #736b67);
}

.wwts-breadcrumbs .rank-math-breadcrumb p {
    margin: 0;
}

.wwts-breadcrumbs .rank-math-breadcrumb a {
    color: var(--e-global-color-85a8185, #736b67);
    text-decoration: none;
    transition: color 160ms ease;
}

.wwts-breadcrumbs .rank-math-breadcrumb a:hover,
.wwts-breadcrumbs .rank-math-breadcrumb a:focus-visible {
    color: var(--wwts-color-primary);
}

.wwts-breadcrumbs .rank-math-breadcrumb .separator {
    display: inline-block;
    margin-inline: .55em;
    opacity: .48;
}

/*
 * Button fallback
 * ---------------
 * Elementor Theme Style remains authoritative for button text/background
 * colors, hover state, borders, radius, shadows and padding. Those values are
 * intentionally not duplicated here because they belong to the active Kit.
 * This layer only supplies a safe typography fallback from Global Accent and
 * an accessible keyboard-focus indication when no more specific style exists.
 */
:where(button, input[type="button"], input[type="submit"], .elementor-button) {
    font-family: var(--wwts-font-accent);
    font-weight: var(--wwts-accent-weight);
    font-style: var(--wwts-accent-style);
    text-transform: var(--wwts-accent-transform);
    text-decoration: var(--wwts-accent-decoration);
    line-height: var(--wwts-accent-line-height);
    letter-spacing: var(--wwts-accent-letter-spacing);
    word-spacing: var(--wwts-accent-word-spacing);
    cursor: pointer;
}

:where(button, input[type="button"], input[type="submit"], .elementor-button):focus-visible {
    outline: 2px solid var(--wwts-color-accent);
    outline-offset: 2px;
}

/*
 * Form-field fallback
 * -------------------
 * Native form controls do not consistently inherit document typography.
 * WWTS therefore gives text fields, selects, textareas and their labels the
 * Global Text typography as a zero-specificity fallback. Elementor Theme Style
 * remains authoritative for field/label colors, backgrounds, borders, radius,
 * padding, spacing, placeholder styling and focus states.
 */
:where(
    label,
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
) {
    font-family: var(--wwts-font-text);
    font-weight: var(--wwts-text-weight);
    font-style: var(--wwts-text-style);
    text-transform: var(--wwts-text-transform);
    text-decoration: var(--wwts-text-decoration);
    line-height: var(--wwts-text-line-height);
    letter-spacing: var(--wwts-text-letter-spacing);
    word-spacing: var(--wwts-text-word-spacing);
}

/* 
* Positioning
* ---------------------
* absolute, relative, etc.
*/
.position-relative {
    position: relative!important;
}
.position-absolute {
    position: absolute!important;
}
.position-static {
    position: static!important;
}
.position-sticky {
    position: sticky!important;
}

/*
 * Project layout shell
 * --------------------
 * Migrated from the verified Elementor Site Settings Custom CSS source.
 * Task 065 / Alexandra 04.10: centered content uses the original 1390px
 * shell. Section backgrounds and existing large Hero surfaces stay full width.
 */
:root {
    --wwts-shell-max-width: 1390px;
}

/* Hero media must not inherit the content-shell cap. Text keeps its own
 * component measure; these semantic surfaces remain independent of wwts-inner. */
.wwts-home-hero,
.wwts-casa-brand-hero,
.wwts-brand-hero {
    --wwts-shell-max-width: 100%;
}

body {
    background:
        linear-gradient(
            135deg,
            #c8beb9 0%,
            #e5dbd8 25%,
            #e5dbd8 75%,
            #c8beb9 100%
        );
    min-width: 320px;
}

.wwts-section {
    width: 100%;
    background-color: transparent;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

.wwts-section-light {
    background-color: #fffdfa;
}

/* Both Atomic containers and classic boxed containers use this semantic shell.
 * Classic .e-con-inner reads --content-width; generated per-document/Atomic
 * rules share the centered cap while retaining responsive inner gutters. */
.wwts-inner,
.elementor .wwts-inner {
    --content-width: 100% !important;
    width: 100%;
    max-width: var(--wwts-shell-max-width, 100%) !important;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 25px !important;
}

.elementor .wwts-inner.wwts-inner--transparent,
.elementor .wwts-inner.no-bg,
.elementor .wwts-home-hero__inner {
    background: transparent !important;
}

.bg-light-yellow {
    background-color: #F4EEE7;
}

.bg-dark {
    background-color: #1E1B17;
}

/* Page-level content shells and their nested classic boxed containers must
 * follow the full-width surface too. Explicit widget/text widths are preserved. */
.elementor .wwts-content-inner,
.elementor .wwts-content-inner .e-con-boxed {
    --content-width: 100% !important;
}

.elementor .wwts-content-inner {
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
}

.wwts-content-inner {
    max-width: 100%;
    background-color: #f4eee7;
    padding-top: 25px;
    padding-bottom: 25px;
}

@media (max-width: 1024px) {
    .wwts-inner,
    .wwts-content-inner {
        padding-inline: 20px !important;
    }
}

@media (max-width: 767px) {
    .wwts-inner,
    .wwts-content-inner {
        padding-inline: 15px !important;
    }

    .wwts-breadcrumbs .rank-math-breadcrumb {
        font-size: 10px;
        letter-spacing: .09em;
    }
}

@media (max-width: 767px) {
    .e-con.e-flex {
        --width: 100%;
        --flex-wrap: nowrap!important;
    }
}

.d-block {
    display: block!important;
}
.d-inline-block {
    display: inline-block!important;
}
.d-inline {
    display: inline!important;
}
.d-flex {
    display: flex!important;
}
.d-none {
    display: none!important;
}