/* ============================================================
   Elevon Kinnisvara — theme.css
   Globaalsed reeglid, muutujad, tüpograafia, layout
   ============================================================ */

/* ─── 1. CSS MUUTUJAD ─────────────────────────────────────── */

:root {

    /* Värvid */
    --color-bg:           #F5F0E8;
    --color-bg-alt:       #EDE5D8;
    --color-bg-dark:      #2C1F14;
    --color-bg-white:     #FDFAF5;

    --color-brown-dark:   #2C1F14;
    --color-brown-mid:    #5C3D2A;
    --color-brown-light:  #9B7148;
    --color-brown-pale:   #C4A882;
    --color-gold:         #B8922A;

    --color-text:         #2C1F14;
    --color-text-mid:     #5C3D2A;
    --color-text-light:   #9B7B6A;
    --color-text-inv:     #FDFAF5;

    --color-border:       #DDD5C5;
    --color-border-dark:  rgba(44, 31, 20, 0.12);

    --color-saadaval:     #4A7C59;
    --color-broneeritud:  #C4712A;
    --color-myydud:       #9B9289;
    --color-tulemas:      #C4A882;

    /* Fondid */
    --font-display:       'Cormorant Garamond', serif;
    --font-body:          'Jost', sans-serif;

    /* Tüpograafia skaala */
    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-md:    18px;
    --text-lg:    22px;
    --text-xl:    28px;
    --text-2xl:   36px;
    --text-3xl:   52px;
    --text-4xl:   68px;
    --text-hero:  clamp(52px, 6vw, 92px);
    --text-title: clamp(36px, 4vw, 60px);

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.12em;
    --tracking-widest:  0.25em;

    /* Reavahe */
    --leading-tight:   1.05;
    --leading-snug:    1.25;
    --leading-normal:  1.65;
    --leading-relaxed: 1.85;

    /* Spacing skaala */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   24px;
    --space-6:   32px;
    --space-7:   48px;
    --space-8:   64px;
    --space-9:   80px;
    --space-10:  100px;
    --space-11:  120px;
    --space-12:  160px;

    /* Layout */
    --container-max:    1340px;
    --container-pad:    64px;
    --container-pad-md: 40px;
    --container-pad-sm: 20px;

    /* Transitions */
    --transition-fast:   0.2s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.5s ease;
    --transition-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows */
    --shadow-sm:  0 2px 8px rgba(44, 31, 20, 0.06);
    --shadow-md:  0 6px 24px rgba(44, 31, 20, 0.09);
    --shadow-lg:  0 16px 56px rgba(44, 31, 20, 0.11);
    --shadow-xl:  0 24px 80px rgba(44, 31, 20, 0.16);
}

/* ─── 2. RESET & ALUS ─────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 300;
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol { list-style: none; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ─── 3. TÜPOGRAAFIA ──────────────────────────────────────── */

h1, h2, h3,
.is-display,
.wp-block-heading {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-2xl); }
h4 {
    font-size: var(--text-lg);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0;
}
h5 {
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}
h6 {
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

/* Cormorant italic — elegantne accent */
em {
    font-style: italic;
    color: var(--color-gold);
}

p {
    margin-bottom: var(--space-5);
    line-height: var(--leading-relaxed);
}
p:last-child { margin-bottom: 0; }

.wp-block-paragraph {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    font-weight: 300;
    color: var(--color-text-mid);
}

/* Eyebrow / silt */
.sekt-label,
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: 14px;
}
.sekt-label::before,
.eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}

/* ─── 4. LAYOUT ───────────────────────────────────────────── */

.container,
.wp-block-group.is-layout-constrained > *,
.wp-block-cover__inner-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.is-layout-constrained {
    --wp--style--global--content-size: var(--container-max);
    --wp--style--global--wide-size:    var(--container-max);
}

/* ─── 5. WP FLEX / GRID ───────────────────────────────────── */

.is-layout-flex             { display: flex; flex-wrap: wrap; }
.is-layout-flex.is-nowrap   { flex-wrap: nowrap; }
.is-layout-flex.is-vertical { flex-direction: column; }
.is-layout-grid             { display: grid; }

.wp-block-group.is-layout-flex   { gap: var(--space-5); }
.wp-block-columns.is-layout-flex { gap: var(--space-8); }

/* ─── 6. SEKTSIOONI ALUS ──────────────────────────────────── */

.wp-block-group,
section { position: relative; }

.is-fullscreen,
.wp-block-cover {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sekt-pad { padding-block: var(--space-10); }

.bg-cream      { background-color: var(--color-bg); }
.bg-cream-alt  { background-color: var(--color-bg-alt); }
.bg-dark       { background-color: var(--color-bg-dark); color: var(--color-text-inv); }
.bg-white      { background-color: var(--color-bg-white); }

/* ─── 7. NUPUD ────────────────────────────────────────────── */

.btn,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 32px;
    border: none;
    cursor: pointer;
    transition:
        background var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
    white-space: nowrap;
}

.btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--color-brown-light);
    color: var(--color-bg-white);
}
.btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--color-gold);
}

.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1.5px solid var(--color-brown-light);
    color: var(--color-brown-light);
    padding: 13px 30px;
}
.btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--color-brown-light);
    color: var(--color-bg-white);
}

.btn-ghost-light {
    background: transparent;
    border: 1px solid rgba(253, 250, 245, 0.25);
    color: rgba(253, 250, 245, 0.75);
    padding: 13px 28px;
}
.btn-ghost-light:hover {
    border-color: var(--color-brown-pale);
    color: var(--color-brown-pale);
}

/* ─── 8. VORMID ───────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-text);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    padding: 14px 16px;
    width: 100%;
    outline: none;
    transition: border-color var(--transition-base);
    border-radius: 0;
    appearance: none;
}
input:focus,
select:focus,
textarea:focus      { border-color: var(--color-gold); }
input::placeholder,
textarea::placeholder { color: var(--color-text-light); }

/* ─── 9. REVEAL ───────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible  { opacity: 1; transform: translateY(0); }
.reveal-d1       { transition-delay: 0.1s; }
.reveal-d2       { transition-delay: 0.2s; }
.reveal-d3       { transition-delay: 0.3s; }
.reveal-d4       { transition-delay: 0.4s; }

/* ─── 10. BREAKPOINTID ────────────────────────────────────── */

@media (min-width: 600px) {
    :root { --container-pad: 40px; }
}
@media (min-width: 768px) {
    :root { --container-pad: 48px; }
}
@media (min-width: 1340px) {
    :root { --container-pad: 64px; }
}

@media (max-width: 599px) {
    :root {
        --container-pad: 20px;
        --space-10: 64px;
        --space-11: 80px;
        --space-12: 100px;
    }
    h1 { font-size: clamp(42px, 10vw, 60px); }
    h2 { font-size: clamp(30px, 7vw, 44px); }
    h3 { font-size: var(--text-xl); }

    .is-layout-flex:not(.is-nowrap) { flex-direction: column; }
    .wp-block-columns                { flex-direction: column; }
    .wp-block-column                 { flex-basis: 100% !important; }
}

@media (min-width: 600px) and (max-width: 767px) {
    .wp-block-columns.tablet-stack { flex-direction: column; }
}