/* @import '../../themes/garofoli/dist/css/tokens.min.css'; */

/** Variables */
:root {
    --color-pure-white: #FFFFFF;
    --color-pure-black: #000000;
    --color-white: #FBFAF6;
    --color-black: #0A0C06;
    --color-gray-100: #E5E4E2;
    --color-gray-200: #CAC9C5;
    --color-gray-300: #A8A7A0;
    --color-gray-400: #85847C;
    --color-gray-500: #6B6A61;
    --color-gray-600: #010101;
    --color-gray-700: #454540;
    --color-gray-800: #3A3935;
    --color-gray-900: #32322F;
    --color-sand: #A08E7A;
    --color-accent: #ED1C24;
    --color-primary: #ED1C24;
    --color-secondary: var(--color-sand);
    --color-success: var(--color-green);
    --color-info: var(--color-cyan);
    --color-warning: var(--color-yellow);
    --color-danger: var(--color-red);
    --color-light: var(--color-gray-100);
    --color-dark: var(--color-gray-800);

    --spacer-xxl: clamp(120px, calc(var(--navigation-height, 80px) * 1.05), 4.25em);
    --spacer-xl: clamp(100px, calc(var(--navigation-height, 80px) * 0.9), 4em);
    --spacer-lg: clamp(80px, calc(var(--navigation-height, 80px) * 0.75), 3em);
    --spacer-md: clamp(60px, calc(var(--navigation-height, 80px) * 0.5), 2.5em);
    --spacer-sm: clamp(40px, calc(var(--navigation-height, 80px) * 0.25), 2em);
    --spacer-xs: clamp(20px, calc(var(--navigation-height, 80px) * 0.15), 1.5em);
    --spacer-xxs: clamp(16px, calc(var(--navigation-height, 80px) * 0.05), 1em);
    --spacer-navigation: var(--navigation-height, 80px);
    --spacer-section: clamp(15px, 1em, 16px);
}

/**
 * Layout Gutenberg (senza wp-block-library / global-styles lato front).
 * Allineato a theme.json settings.layout.contentSize.
 * La larghezza content si applica solo alle radici di layout, non ai blocchi foglia
 * (heading, paragraph, image, button, …) né ai discendenti già dentro un contenitore vincolato.
 */
:root {
    --builder-layout-content-size: var(
        --wp--style--global--content-size,
        clamp(1200px, 100% - calc(var(--wp--preset--spacing--xl, 80px) * 2), 2400px)
    );
    --builder-layout-wide-size: var(--wp--style--global--wide-size, 1320px);
    tab-size: 8ch;
}

:is(
    .block-editor-content,
    [data-block-builder="gutemberg"],
    section.editor-content,
    .term-editor-content,
    body.homepage,
    body.page-template-homepage,
    .editor-styles-wrapper
) {
    overflow-x: clip;
}

/* Radici di layout: solo il primo antenato idoneo per sezione, non i figli annidati. */
:is(body, .editor-styles-wrapper)
    :is(.container, .wp-block-group, .wp-block-columns):not(.alignfull):not(
        :is(.container, .wp-block-group, .wp-block-columns)
            :is(.container, .wp-block-group, .wp-block-columns)
    ) {
    box-sizing: border-box;
    margin-inline: auto;
    width: 100%;
    max-width: var(--builder-layout-content-size);
}

/* :is(body, .editor-styles-wrapper)
    :is(.wp-block-group, .wp-block-columns):not(.alignfull):not(
        :is(.wp-block-group, .wp-block-columns)
            :is(.wp-block-group, .wp-block-columns)
    ) {
    box-sizing: border-box;
    margin-inline: auto;
    width: 100%;
    max-width: var(--builder-layout-content-size);
} */

/*
 * Reset esplicito: gruppi/container annidati non-constrained riempiono il genitore.
 * Esclude is-layout-constrained così max-width responsive (es. 100ch) resta valido.
 */
:is(body, .editor-styles-wrapper)
    :is(.container, .wp-block-group, .wp-block-columns)
    :is(.container, .wp-block-group, .wp-block-columns):not(.alignfull):not(
        .is-layout-constrained
    ):not(.wp-block-group-is-layout-constrained):not(.wp-block-columns-is-layout-constrained) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/*
 * Gutenberg vincola i figli diretti di layout constrained (--wp--style--global--content-size).
 * La riga flex interna deve estendersi a tutta la larghezza del container esterno.
 */
:is(body, .editor-styles-wrapper)
    :is(.is-layout-constrained, .wp-block-group-is-layout-constrained)
    > :is(.wp-block-group, .wp-block-columns, .container, .wp-block-group__inner-container):not(
        .alignfull
    ):not(.alignwide),
:is(body, .editor-styles-wrapper)
    :is(.is-layout-constrained, .wp-block-group-is-layout-constrained)
    > .wp-block-group__inner-container
    > :is(.wp-block-group, .wp-block-columns, .container):not(.alignfull):not(.alignwide) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* Wide: solo sulle radici di layout con alignwide (es. group/columns in pattern). */
:is(body, .editor-styles-wrapper)
    :is(.wp-block-group, .wp-block-columns).alignwide:not(.alignfull):not(
        :is(.container, .wp-block-group, .wp-block-columns)
            :is(.wp-block-group, .wp-block-columns)
    ) {
    max-width: var(--builder-layout-wide-size);
}

/* Immagini: non sovrascrivere wide/full con le regole size-full sotto */
/* :is(.block-editor-content, [data-block-builder="gutemberg"], section.editor-content, .term-editor-content, body.homepage, body.page-template-homepage) figure.wp-block-image.alignwide {
    width: min(var(--wp--style--global--wide-size, 1320px), 100vw);
    max-width: min(var(--wp--style--global--wide-size, 1320px), 100vw);
}

:is(.block-editor-content, [data-block-builder="gutemberg"], section.editor-content, .term-editor-content, body.homepage, body.page-template-homepage) figure.wp-block-image.alignfull {
    width: 100vw;
    max-width: 100vw;
} */

/** Gutenberg Styles */
body .wp-block-heading {
    white-space: pre-wrap;
}

body span.garofoli-font-heading {
    font-family: var(--wp--preset--font-family--heading) !important;
    font-size: 1.05em;
    line-height: 0.9;
    translate: 0 0.035em;
}

body span.garofoli-font-body {
    font-family: var(--wp--preset--font-family--body) !important;
}

body .has-small-font-size{
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body .has-small-font-size{
        font-size: clamp(14px, 3vw, 16px) !important;
    }
}

body .has-medium-font-size{
    font-size: 15px !important;
}

@media (min-width: 768px) {
    body .has-medium-font-size{
        font-size: clamp(18px, 5vw, 24px) !important;
    }
}

body .has-large-font-size{
    font-size: 24px !important;
}

@media (min-width: 768px) {
    body .has-large-font-size{
        font-size: clamp(24px, 10vw, 32px) !important;
    }
}

body .has-x-large-font-size{
    font-size: 32px !important;
}

@media (min-width: 768px) {
    body .has-x-large-font-size{
        font-size: clamp(32px, 15vw, 48px) !important;
    }
}

/** Core::Image (esclusi wide/full, gestiti sopra) */
body .is-layout-flow > figure.wp-block-image.size-full:not(.alignwide):not(.alignfull){
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

body .is-layout-flex{
    align-items: unset;
}

/** Core::Paragraph */
body .wp-block-paragraph{
    white-space: pre-wrap;
    text-wrap: auto;
}

body .wp-block-paragraph.has-indentation::before{
    content: '\9 ';
}

/** Core::Components */
.wp-block-list{
    font-size: var(--font-size, var(--wp--preset--font-size--body, clamp(14px, 1vw, 16px)));
}

ol.wp-block-list{
    list-style-type: decimal;
}

ul.wp-block-list{
    list-style-type: disc;
}

.wp-block-table{
    font-size: var(--font-size, var(--wp--preset--font-size--body, clamp(14px, 1vw, 16px)));
}

/** Core::Image (esclusi wide/full) */
figure.wp-block-image.size-full:not(.alignwide):not(.alignfull){
    margin-left: 0;
    width: 100%;
    max-width: 100%;
}

/** Core::Image — img always fills the figure wrapper */
figure.wp-block-image img {
    display: block;
    width: 100% !important;
    height: auto;
    max-width: 100%;
}

figure.wp-block-image figcaption {
    position: absolute;
    inset: auto var(--spacer-xs) var(--spacer-xs) var(--spacer-xs);
    margin: 0;
    color: var(--wp--preset--color--white, #FFF);
}

/** Core::Embedded */
.wp-block-embed.is-type-video{
    width: 100%;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper{
    display: contents;
}

.wp-block-embed.is-type-video.wp-embed-aspect-16-9{
    aspect-ratio: 16/9;
}

.wp-block-embed.is-type-video.wp-embed-aspect-4-3{
    aspect-ratio: 4/3;
}

.wp-block-embed.is-type-video iframe{
    height: 100% !important;
    width: 100% !important;
}