/* ---------------- ICONS ---------------- */
[data-icon-type] {
    display: grid;
    align-items: center;
    justify-items: center;
    fill: var(--clr-neutral-100);
}

[data-icon-type]:hover {
    fill: var(--clr-accent-primary);
}

[data-icon-type="logo-main"] {
    fill: var(--clr-accent-primary);
}

[data-icon-type="logo-main"]:hover {
    fill: var(--clr-neutral-100);
}

[data-icon-circled] {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 100vh;
    border: 2px solid var(--clr-accent-primary);
}

[data-icon-circled] svg {
    width: 1.125rem;
    height: 1.125rem;
}
/* ---------------- END OF ICONS ---------------- */

/** 
** ICON LINK 
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-with-icon-link {
    color: var(--icon-link-color, inherit);
    font-size: var(--icon-link-font-size, var(--size-step--1));
    text-decoration: var(--icon-link-text-decoration, underline);
    text-decoration-color: var(--icon-link-text-decoration-color, var(--text-decoration-color, var(--color-secondary)));
    text-decoration-thickness: var(--icon-link-text-decoration-thickness, var(--text-decoration-thickness));
}

.wm-with-icon-link[data-with-icon-variant="hidden-label"] {
    color: var(--icon-link-hidden-label-color, var(--color-light-glare));
    background-color: var(--icon-link-hidden-label-bg, var(--color-dark-grey));
}

.wm-with-icon-link svg {
    width: auto;
    height: var(--icon-link-svg-height, 1.75ex);
}

.wm-with-icon-link:hover svg {
    color: var(--icon-link-hover-svg-color, currentColor);
}

.wm-with-icon-link[data-with-icon-variant="hidden-label"] svg {
    --icon-link-svg-height: 2ex;
}

/* -------------- END OF ICON LINK ------------- */

/** 
** BUTTON 
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-button {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    white-space: nowrap;
}

.wm-button[data-button-type] svg {
    width: 48px;
    height: 48px;
    border: 3px solid var(--clr-neutral-100);
    border-radius: 100vh;
    fill: var(--clr-neutral-100);
    padding: 0.6rem;
    transition: fill 350ms ease, border-color 350ms ease;
}

.wm-button[data-button-type]:hover svg {
    fill: var(--clr-accent-primary);
    border-color: var(--clr-accent-primary);
}

.wm-button[data-button-type="downwards"] svg {
    transform: rotate(90deg);
}

.wm-button[data-button-type="backwards"] svg {
    transform: rotate(180deg); 
}
/* -------------- END OF BUTTON ------------- */

/** 
** KEY VALUE GROUP
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-key-value-group {
    --key-value-group-calculated-block-padding: var(--key-value-group-block-padding, var(--space-s));

    display: grid;
    grid-template-columns: var(--key-value-group-grid-template-columns, max-content) 1fr;
    gap: 0;
    align-items: stretch;
}

.wm-key-value-group dt {
    grid-column: 1;
    align-content: center;
    margin: 0;
    font-family: var(--key-value-group-dt-font-family, var(--font-display));
    font-size: var(--key-value-group-dt-font-size, var(--size-step--1));
}

.wm-key-value-group :is(dt, dd) {
    padding-block: var(--key-value-group-calculated-block-padding);
}

.wm-key-value-group dd {
    grid-column: 2;
    align-content: center;
    margin: 0;
    padding-inline-start: var(--key-value-group-dd-inline-padding, var(--space-s));
    font-style: var(--key-value-group-dd-font-style, italic);
    font-size: var(--key-value-group-dd-font-size, var(--size-step--1));
    text-align: var(--key-value-group-dd-text-align, right);
}

.wm-key-value-group dd+dd {
    padding-block: 0;
}

.wm-key-value-group dd:has(+ dt) {
    padding-block-end: var(--key-value-group-calculated-block-padding);
}

.wm-key-value-group :is(dd + dt, dd + dt + dd) {
    border-block-start: var(--key-value-group-border-block-start, var(--stroke));
}

.wm-key-value-group :is(dt + dd + dd) {
    margin-block-start: calc(var(--key-value-group-calculated-block-padding) * -1);
}

.wm-key-value-group[data-key-value-group-variant="large-titles"] {
    --key-value-group-dt-font-size: var(--key-value-group-dt-large-font-size, var(--size-step-5));
}

.wm-key-value-group[data-key-value-group-variant="mega-titles"] {
    --key-value-group-dt-font-size: var(--key-value-group-dt-mega-font-size, var(--size-step-7));
}

[data-key-value-group-variant*="titles"] dt {
    letter-spacing: var(--heading-kerning);
    line-height: var(--leading-fine);
    text-transform: unset;
}
/* -------------- END OF KEY VALUE GROUP ------------- */

/** 
** HERO SECTION
*
*/
[data-section="fw-hero"] {
    --flow-gap: 1.25rem;
    --flow-button-gap: 1.25rem;
    display: grid;
    grid-template-areas: "container";
}

[data-section="fw-hero"]>* {
    grid-area: container;
}

[data-section="fw-hero"] .wm-image {
    position: relative;
    z-index: -1;
}

[data-section="fw-hero"] .wm-image::after {
    --overlay-opacity: 0.6;
    --overlay-color: var(--clr-primary-500);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--overlay-color);
    opacity: var(--overlay-opacity);
}

[data-section="fw-hero"] .wm-image>* {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 40.625rem;
}

[data-section="fw-hero"]>.wm-content {
    align-self: end;
    padding: clamp(1rem, 0.3881rem + 3.0593vw, 3rem) clamp(0rem, -0.9178rem + 4.5889vw, 3rem);
}
/* -------------- END OF HERO SECTION ------------- */

/** 
** PRODUCT LINES ARCHIVE
*
*/
.wm-product-lines-cover {
    display: grid;
    grid-template-areas: "container";
}

.wm-product-lines-cover>* {
    grid-area: container;
}

.wm-product-lines-cover>.wm-frame {
    position: relative;
    z-index: -1;
}

.wm-product-lines-cover>.wm-frame::after {
    --overlay-opacity: 0;
    --overlay-color: var(--clr-primary-500);

    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--overlay-color);
    opacity: var(--overlay-opacity);
}

.wm-product-lines-cover>.wm-content {
    place-self: center;
    max-width: 75%;
}

.wm-with-icon-link svg {
    width: auto;
    height: var(--icon-link-svg-height, 1.75ex);
}

.wm-with-icon-link[data-with-icon-variant="hidden-label"] svg {
    --icon-link-svg-height: 2ex;
}
/* -------------- END OF PRODUCT LINES ARCHIVE ------------- */