/* ============================================================
   Aasalille Kodud — 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:       'The Seasons', serif;
    --font-body:          'Proxima Nova', sans-serif;

    /* Tüpograafia skaala */
    --text-xs:    14px;
    --text-sm:    16px;
    --text-base:  18px;
    --text-md:    20px;
    --text-lg:    22px;
    --text-xl:    28px;
    --text-2xl:   36px;
    --text-3xl:   48px;
    --text-4xl:   64px;
    --text-hero:  clamp(48px, 6vw, 88px);
    --text-title: clamp(32px, 3.8vw, 56px);

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.08em;
    --tracking-wider:   0.14em;
    --tracking-widest:  0.28em;

    /* Reavahe */
    --leading-tight:   1.05;
    --leading-snug:    1.25;
    --leading-normal:  1.6;
    --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;   /* desktop küljevahe */
    --container-pad-md: 40px;   /* tablet */
    --container-pad-sm: 20px;   /* mobiil */

    /* 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.08);
    --shadow-md:  0 6px 24px rgba(44, 31, 20, 0.1);
    --shadow-lg:  0 16px 56px rgba(44, 31, 20, 0.12);
    --shadow-xl:  0 24px 80px rgba(44, 31, 20, 0.18);
}

/* ─── 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: 400;
    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 ──────────────────────────────────────── */

/* Display / pealkirjad — The Seasons */
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-xl); font-family: var(--font-body); font-weight: 600; }
h5 { font-size: var(--text-xs); font-family: var(--font-body); font-weight: 600;
     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; }

em { font-style: italic; color: var(--color-gold); }

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

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

/* Silt / eyebrow tekst */
.sekt-label,
.eyebrow {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-weight: 400;
    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 ───────────────────────────────── */

.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);
}

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

/* ─── 5. WORDPRESS FLEX / GRID BLOKID ────────────────────── */

/* is-layout-flex */
.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 */
.is-layout-grid {
    display: grid;
}

/* WP group gap overrides — käib main.css kaudu komponentide tasemel */
.wp-block-group.is-layout-flex  { gap: var(--space-5); }
.wp-block-columns.is-layout-flex { gap: var(--space-8); }

/* ─── 6. SEKTSIOONI ALUSREEGLID ───────────────────────────── */

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

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

/* Section padding — vertikaalne */
.sekt-pad {
    padding-block: var(--space-10);
}

/* Taustavärvid */
.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), transform var(--transition-fast);
    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 a {
    background: transparent !important;
}

.btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--color-gold);
}
.btn-primary:hover a {
    background: transparent !important;
}

.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 a {
    background: transparent !important;
}


.btn-ghost-light:hover {
    border-color: var(--color-brown-pale);
    color: var(--color-brown-pale);
}

.btn-ghost-light:hover a {
    background: transparent !important;
}

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

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    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; /* ei taha border-radiust */
    appearance: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-gold);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-light);
}

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

.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 ────────────────────────────────────── */

/* Tablet — 600px+ */
@media (min-width: 600px) {
    :root {
        --container-pad: var(--container-pad-md);
    }
}

/* Tablet suur — 768px+ */
@media (min-width: 768px) {
    :root {
        --container-pad: 48px;
    }
}

/* Desktop — 1340px+ */
@media (min-width: 1340px) {
    :root {
        --container-pad: 64px;
    }
}

/* Mobiil — kuni 599px */
@media (max-width: 599px) {
    :root {
        --container-pad: var(--container-pad-sm);
        --space-10: 64px;
        --space-11: 80px;
        --space-12: 100px;
    }

    h1 { font-size: clamp(40px, 10vw, 56px); }
    h2 { font-size: clamp(28px, 7vw, 40px); }
    h3 { font-size: var(--text-xl); }

    .is-layout-flex:not(.is-nowrap) {
        flex-direction: column;
    }

    /* WP columns mobiilis stackivad */
    .wp-block-columns {
        flex-direction: column;
    }
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

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