/*
-------------------------------------------
* Components Styles - Applied to back-end and front-end
-------------------------------------------
*/

:root {
    /* Arrow Icon */
    --icon-arrow: url('../assets/icons/arrow-right.svg');
}

/* Reset margin for all headings inside components */
h1, h2, h3, h4, h5, h6, p, ul, ol, table, figure {
    margin-block-start: 0!important;
}


/* Spacer Component - Used for default Spacer block
-------------------------------------------*/
body .wp-block-spacer.spacer-big {
    height: var(--theme-content-spacing)!important;
    max-height: var(--theme-content-spacing)!important;
    background:transparent!important; /* For testing only */
}


/*
-------------------------------------------
* ARROW LINK
-------------------------------------------
*/
body .link-arrow {
    display:flex;
    width:fit-content;
    position: relative;
    padding-right: 54px!important;
}

/* Arrow */
body .link-arrow::after {
	content: "";
	position: absolute;
	right: 27px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 18px;
	height: 18px;
	background-color: currentColor;
    transition: transform 0.25s ease;

	/* SVG as mask */
	-webkit-mask: var(--icon-arrow) no-repeat center / contain;
	mask: var(--icon-arrow) no-repeat center / contain;
}
@media (max-width: 576px) {
    body .link-arrow::after {
        width: 16px;
        height: 16px;
    }
}
/* Hover animation */
body .link-arrow:hover::after {
	transform: translateY(-50%) rotate(0deg);
}
/* General Link with Arrow for button */
.general-link-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.general-link-arrow::after {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    transform: rotate(45deg);
    width: 18px;
    height: 18px;
    background-color: currentColor;
    transition: transform 0.25s ease;
    pointer-events: none;

    /* SVG as mask */
    -webkit-mask: var(--icon-arrow) no-repeat center / contain;
    mask: var(--icon-arrow) no-repeat center / contain;
}
@media (max-width: 576px) {
    .general-link-arrow::after {
        width: 16px;
        height: 16px;
    }
}
.general-link-arrow:hover::after {
    transform: rotate(0deg);
}

/*
-------------------------------------------
* BUTTONS
-------------------------------------------
*/
body .wp-block-buttons {
    --button-outline-border-width: 1px;
    --button-border-radius: 4px;

    /* Fill Button */
    --button-fill-background-color: #EDDAC1;
    --button-fill-background-color-hover: #EED4B1;
    --button-fill-text-color: #252525;
    --button-fill-text-color-hover: #714F30;

    /* Outline Button */
    --button-outline-text-color: #806A56; 
    --button-outline-border-color: #806A56;
    --button-outline-background-color: transparent;
    --button-outline-background-color-hover:rgba(233, 219, 201, 0.2);

    /* Outline Button Light */
    --button-outline-light-text-color: #EDDAC1;
    --button-outline-light-border-color: #EDDAC1;

}

/* FILL Button Style (default)
------------------------------*/
body .wp-block-button__link {

    /* Default Button Style */
    display: inline-block;
    position:relative;
    min-height:64px;
    line-height:120%;
    font-size:14px;
    text-transform:uppercase;
    text-decoration:none;
    padding: 20px 32px 20px 32px!important;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    box-sizing: border-box;

    /* Fill Button Style */
    background-color: var(--button-fill-background-color);
    color: var(--button-fill-text-color);
    border: none;
}
/* Fill Button Hover */
body .wp-block-button .wp-block-button__link:hover,
body .wp-block-button.is-style-fill-arrow .wp-block-button__link:hover {
    background-color: var(--button-fill-background-color-hover)!important;
    color: var(--button-fill-text-color-hover)!important;
}

/* OUTLINE Buttons Style
------------------------------*/
body .wp-block-button.is-style-outline .wp-block-button__link,
body .wp-block-button.is-style-outline-arrow .wp-block-button__link {
    background-color: var(--button-outline-background-color)!important;
    color: var(--button-outline-text-color)!important;
    /* Requires forcing */
    border-width: 1px!important;
    border-style: solid!important;
    border-color: var(--button-outline-border-color)!important;
}
/* Outline Button Hover */
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .wp-block-button.is-style-outline-arrow .wp-block-button__link:hover {
    color: var(--button-outline-text-color)!important;
    background-color: var(--button-outline-background-color-hover)!important;
}


/* ARROW Buttons Style
------------------------------*/

body .wp-block-button.is-style-fill-arrow .wp-block-button__link,
body .wp-block-button.is-style-outline-arrow .wp-block-button__link {
    padding-right:54px!important;
}

/* Arrow */
body .wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 27px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 22px;
	height: 22px;
	background-color: currentColor;
    transition: transform 0.25s ease;

	/* SVG as mask */
	-webkit-mask: var(--icon-arrow) no-repeat center / contain;
	mask: var(--icon-arrow) no-repeat center / contain;
}

/* Hover animation */
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateY(-50%) rotate(0deg);
}


/*-------------------------------------------
* END OF BUTTONS
-------------------------------------------*/

/* Subtitle with Before and After Lines */
.is-style-subtitle-before-after {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
@media (min-width: 576px) {
    .is-style-subtitle-before-after::before,
    .is-style-subtitle-before-after::after {
        content: "";
        width: 12px;
        height: 1px;
        background-color: #EDDAC1;
    }
}

/* Section Title with Bottom and Left Borders */
.is-style-title-bottom-left-borders {
    border-bottom: 1px solid #DEDEDE;
    border-left: 1px solid #DEDEDE;
    width: 416px;
    padding: 24px;
}
@media (max-width: 576px) {
    .is-style-title-bottom-left-borders {
        padding: 16px;
        width: 100%;
    }
}