/*

Theme Name: Preliminary Vacation Rental Theme
Author: Rafael Kontarsky
Description: Simple Vacation Rental Theme.
Version: 1.0
Text Domain: preliminary

*/




:root {
    /* variables to change: */
    --current-zoom: 250;

    /* variables to maybe adjust: */
    --text-fs-factor: 8.0;
    --heading-ital-fs-factor: 8.60;
    --heading-strong-fs-factor: 7.09;
    --text-lang-fs-factor: 7.0;
    --text-input-fs-factor: 6.60;
    --text-char-limit-fs-factor: 3.40;

    --ornament-s-factor: 13.65;

    /* non-changable */
    --base-zoom: 50;
    --scale-factor: calc( 1 + ( var(--current-zoom) - var(--base-zoom) ) / ( 25 * 3) );

    --total-rem-factor: calc( 1rem * var(--scale-factor) / 16 );

    --text-area-width: 100%;
}

.text {
    /*transform: scaleX(1.02872);*/
    transform-origin: center;
    text-align: center;
    font-size: calc( var(--text-fs-factor) * var(--total-rem-factor));
    line-height: 1.34;
}

.heading-mid {
    text-align: center;
    line-height: 2.0;
}

.heading-italic {
    /*transform: scaleX(1.15);*/
    transform-origin: center;
    text-align: center;
    font-weight: 400;
    font-size: calc( var(--heading-ital-fs-factor) * var(--total-rem-factor) );
    line-height: 2.0;
}

.heading-strong {
    /*transform: scaleY(1.05);*/
    transform-origin: center;
    text-align: center;
    font-weight: 900;
    font-size: calc( var(--heading-strong-fs-factor) * var(--total-rem-factor) );
    line-height: 2.0;
}

.text-lang {
    font-size: calc( var(--text-lang-fs-factor) * var(--total-rem-factor) );
}

.dotted-underlining {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 3px;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 3px;
}

body {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}


header {
    padding: 20px 0;
}

header .wp-block-blocks-ornament {
    --ornament-size: calc( var(--ornament-s-factor) * var(--total-rem-factor) );
    width: var(--ornament-size) !important;
    height: var(--ornament-size) !important;
}

footer {
    padding-top: 1rem;
    padding-bottom: 8rem;
}

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


.wrapper {
    max-width: 970px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px;
    overflow: hidden;
}


@media (max-width: 955px) {
    .wrapper {
        max-width: 100%;
        padding: 0 20px;
    }

    :root {
        --text-area-width: 90%;
    }
}

@media (max-width: 480px) {
    .wrapper {
        padding: 0 10px;
    }

    :root {
        --text-area-width: 95%;
    }
}


/* edit view */

.selectionDroplet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--wp-admin-theme-color);
    border-radius: 50% 0 50% 50%;
    cursor: pointer;
    transform: translateY(-50%) rotate(45deg);
    z-index: 4;
    
    /* Expanded hit area */
    &::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        /* No background needed, just expands click zone */
    }
}