/*======================================
Theme Name: neletasane
Theme URI: https://divicake.com/
Description: Fotograaf Nele Tasane koduleht
www.neletasane.ee
Version: 1.1
Author: Urho Rättel
Author URI: https://www.facebook.com/urho.rattel
Template: Divi
======================================*/


/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {

    /* =========================
       FONT FAMILIES
    ========================= */

    --font-body: 'Inter Tight', sans-serif;
    --font-heading: 'Clash Display', sans-serif;


    /* =========================
       FONT WEIGHTS
    ========================= */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;


    /* =========================
       TYPOGRAPHY TOKENS
       Fluid range: 320px → 2560px
       slope = (max − min) / (160rem − 20rem)
       intercept = min − slope × 20rem
    ========================= */

    --text-body-md:       clamp(0.875rem, 0.2679vw + 0.8214rem, 1.25rem);    /* 14px → 20px */
    --text-body-md-caps:  clamp(0.75rem,  0.1786vw + 0.7143rem, 1rem);       /* 12px → 16px */
    --text-body-small:    clamp(0.625rem, 0.1786vw + 0.5893rem, 0.875rem);   /* 10px → 14px */
    --text-display:       clamp(1.875rem, 1.5179vw + 1.5714rem, 4rem);       /* 30px → 64px */
    --text-h1:            clamp(2.5rem,   3.9286vw + 1.7143rem, 8rem);       /* 40px → 128px */
    --text-h2:            clamp(1.25rem,  0.6250vw + 1.1250rem, 2.125rem);   /* 20px → 34px */
    --text-link-xl:       clamp(1.375rem, 1.3393vw + 1.1071rem, 4.375rem);   /* 22px → 70px */
    --text-link-sm:       clamp(0.75rem,  0.0893vw + 0.7321rem, 0.875rem);   /* 12px → 14px */
    --text-nav-link:      clamp(0.75rem,  0.0893vw + 0.7321rem, 0.875rem);   /* 12px → 14px */
    --text-button:        clamp(0.75rem,  0.1786vw + 0.7143rem, 1rem);       /* 12px → 16px */


    /* =========================
       SPACING SYSTEM
    ========================= */

    --space-2xs: clamp(0.25rem, 0.1786vw + 0.2143rem, 0.5rem);
    --space-xs:  clamp(0.5rem,  0.3571vw + 0.4286rem, 1rem);
    --space-sm:  clamp(0.75rem, 0.5357vw + 0.6429rem, 1.5rem);
    --space-md:  clamp(1rem,    0.7143vw + 0.8571rem, 2rem);
    --space-lg:  clamp(1.5rem,  1.0714vw + 1.2857rem, 3rem);
    --space-xl:  clamp(2rem,    1.4286vw + 1.7143rem, 4rem);
    --space-2xl: clamp(3rem,    2.1429vw + 2.5714rem, 6rem);


    /* =========================
       CONTAINER SYSTEM
    ========================= */

    --container-width: 2560px;
    --container-padding: clamp(1rem, 0.6rem + 2vw, 3rem);


    /* =========================
       LETTER SPACING
    ========================= */

    --tracking-caps:        0.08em;
    --tracking-heading:    -0.02em;
    --tracking-nav:         0.01em;
    --tracking-module-link: 0.045rem;

}


/* =========================================================
   2. FONT FACE SETUP
========================================================= */

/* =========================
   CLASH DISPLAY
========================= */

@font-face {
    font-family: 'Clash Display';
    src:
        url('fonts/ClashDisplay-Medium.woff2') format('woff2'),
        url('fonts/ClashDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* =========================
   INTER TIGHT
========================= */

@font-face {
    font-family: 'Inter Tight';
    src:
        url('fonts/inter-tight-latin-400-normal.woff2') format('woff2'),
        url('fonts/inter-tight-latin-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src:
        url('fonts/inter-tight-latin-500-normal.woff2') format('woff2'),
        url('fonts/inter-tight-latin-500-normal.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src:
        url('fonts/inter-tight-latin-600-normal.woff2') format('woff2'),
        url('fonts/inter-tight-latin-600-normal.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   3. BASE RESET
========================================================= */

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--text-body-md);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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


/* =========================================================
   4. DIVI TYPOGRAPHY RESET
========================================================= */

body,
.et_pb_text_inner,
.et_pb_text_inner p,
.et_pb_module,
.et_pb_button,
.et_pb_text,
.et_pb_text p {
    font-family: var(--font-body);
}


/* =========================================================
   5. HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4,
.et_pb_text_inner h5,
.et_pb_text_inner h6 {
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--tracking-heading);
}

h1,
.text-h1 {
    font-size: var(--text-h1);
    line-height: 1;
}

h2,
.text-h2 {
    font-size: var(--text-h2);
    line-height: 1.2;
}

.text-display {
    font-size: var(--text-display);
    line-height: 1.1;
}


/* =========================================================
   6. BODY TYPOGRAPHY
========================================================= */

body,
p,
.text-body-md {
    font-size: var(--text-body-md);
    line-height: 1.5;
}

.text-body-md-caps {
    font-size: var(--text-body-md-caps);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.text-body-small {
    font-size: var(--text-body-small);
    line-height: 1.5;
}


/* =========================================================
   7. LINKS
========================================================= */

.text-link-xl {
    font-size: var(--text-link-xl);
}

.text-link-sm {
    font-size: var(--text-link-sm);
}

.text-nav-link {
    font-size: var(--text-nav-link);
}


/* =========================================================
   8. BUTTON TYPOGRAPHY
========================================================= */

.text-button,
.et_pb_button {
    font-size: var(--text-button);
}


/* =========================================================
   9. FONT WEIGHT UTILITIES
========================================================= */

.font-regular  { font-weight: var(--fw-regular); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }


/* =========================================================
   10. FONT FAMILY UTILITIES
========================================================= */

.font-body    { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }


/* =========================================================
   11. CAPS UTILITIES
========================================================= */

.text-caps {
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}


/* =========================================================
   12. CONTAINER SYSTEM
========================================================= */

.container-xl,
.et-l--header,
.et-l--body,
.et-l--footer {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
}

.container-padding {
    padding-inline: var(--container-padding);
}


/* =========================================================
   13. DIVI BUTTON FIXES
========================================================= */

.et_pb_button {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    border: none;
    box-shadow: none;
}


/* =========================================================
   14. RESPONSIVE SAFETY
========================================================= */

.et-l--body {
    overflow-x: hidden;
}

.et_pb_section,
.et_pb_row {
    width: 100%;
}


/* =========================================================
   15. NAV LINK CAPS
========================================================= */

.text-nav-link {
    font-size: var(--text-nav-link);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/***nav:link-gap-START***/
.et_pb_row .et_pb_menu__menu li {
    padding-left: 8px;
    padding-right: 8px;
}
/***nav:link-gap-END***/


/* =========================================================
   16. NAV BORDER BOTTOM + HOVER
========================================================= */

.et-menu-nav .et-menu li a {
    padding-inline: 4px !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
}

.et-menu-nav .et-menu li a:hover {
    color: #FD5C01 !important;
    border-bottom-color: #FD5C01 !important;
}


/* =========================================================
   17. BODY LARGE
========================================================= */

.body-large,
.body-large p,
.et_pb_text_inner .body-large p {
    font-size: var(--text-h2);
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-medium);
    line-height: 1.1;
}


/* =========================================================
   18. VERTICAL MENU
========================================================= */

/***vertical-menu-START***/

.et_pb_column_3_tb_header .et-menu-nav .et-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0px !important;
}

.et_pb_column_3_tb_header .et-menu-nav .et-menu li {
    display: block !important;
    float: none !important;
}

/***vertical-menu-END***/


/* =========================================================
   19. MODULE LINK (et_pb_link moodul)
========================================================= */

.et_pb_link.module-link .et_pb_link_text,
[class*="tb_footer"].module-link .et_pb_link_text,
[class*="tb_header"].module-link .et_pb_link_text {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: var(--fw-medium) !important;
    font-size: var(--text-nav-link) !important;
    line-height: 1.1 !important;
    letter-spacing: var(--tracking-module-link) !important;
    text-transform: uppercase !important;
    position: relative;
    display: inline-block;
}

.et_pb_link.module-link .et_pb_link_text::after,
[class*="tb_footer"].module-link .et_pb_link_text::after,
[class*="tb_header"].module-link .et_pb_link_text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.et_pb_link.module-link:hover .et_pb_link_text::after,
[class*="tb_footer"].module-link:hover .et_pb_link_text::after,
[class*="tb_header"].module-link:hover .et_pb_link_text::after {
    background-color: #FD5C01;
}


/* =========================================================
   20. MENU STRETCH FIX (logo + hamburger täislaius)
========================================================= */

[class*="et_pb_menu"][class*="tb_header"] .et_pb_menu_inner_container.et_flex_module {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 1 1 auto !important;
}

[class*="et_pb_menu"][class*="tb_header"] {
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   21. IMAGE UTILITIES
========================================================= */

/*** Hide image titles on hover ***/
img {
    pointer-events: none;
}

/*** Hover zoom – lisa klass .et-zoom-in moodulile ***/

.et-zoom-in.et_pb_image img,
.et-zoom-in .et_pb_image_wrap img,
.et-zoom-in a img {
    transition: transform 1s ease;
}

.et-zoom-in.et_pb_image:hover img,
.et-zoom-in .et_pb_image_wrap:hover img,
.et-zoom-in a:hover img {
    transform: scale(1.1);
    transition: transform 3s ease;
}

.et-zoom-in,
.et-zoom-in a {
	overflow: hidden;
}