/*
Theme Name: Inspiro
Description: Used to style the TinyMCE editor.
*/
/**
 * Table of Contents:
 *
 * 1.0 - Body
 * 2.0 - Typography
 * 3.0 - Elements
 * 4.0 - Alignment
 * 5.0 - Caption
 * 6.0 - Galleries
 * 7.0 - Media Elements
 * 8.0 - RTL
 */
/*--------------------------------------------------------------
## Layout Container Variables
--------------------------------------------------------------*/
:root {
    --container-width: 1200px;
    --container-width-narrow: 950px;
    --container-padding: 30px;
}

:root {
    --inspiro-primary-color: #0bb4aa;
    --inspiro-dark-color: #101010;
    --inspiro-light-grey-color: #f2f4f6;
    --inspiro-color-background-body: #fff;
    --inspiro-color-link-hover: #000;
}

.wp-block[data-align=full] {
    max-width: none;
}

.editor-styles-wrapper a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
}

.editor-styles-wrapper .has-text-color a:where(:not(.wp-element-button)) {
    color: inherit;
}

.editor-inner-blocks .wp-block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.editor-styles-wrapper .wp-block {
    line-height: 1.6;
}

.editor-post-title__block .editor-post-title__input {
    font-family: "Onest", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wp-block {
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wpzoom-blocks_portfolio-block .wpz-portfolio-button__link,
.wp-block-post-title,
.wp-block-heading,
.wp-block-button .wp-block-button__link {
    font-family: "Onest", sans-serif;
}

/** === Title === */
.editor-post-title__block .editor-post-title__input {
    font-weight: 700;
    text-rendering: optimizeLegibility;
    font-smoothing: antialiased;
    color: #222;
}

.wpzoom-blocks_portfolio-block .wpz-portfolio-button__link {
    border-radius: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.2s ease all;
}

.portfolio-dark.wpzoom-blocks_portfolio-block .wpz-portfolio-button__link {
    background: none;
    border: 2px solid #fff;
}
.portfolio-dark.wpzoom-blocks_portfolio-block .wpz-portfolio-button__link:focus, .portfolio-dark.wpzoom-blocks_portfolio-block .wpz-portfolio-button__link:hover {
    background: #fff;
    color: #000 !important;
    border-color: #fff;
}

.wp-element-button, .wp-block-button__link {
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
    padding: 0.667em 1.333em;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */
.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align=full] > .wp-block-group,
.is-root-container .wp-block[data-align=full] > .wp-block-cover {
    padding-right: 30px;
    padding-left: 30px;
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align=full] {
    margin-right: -30px;
    margin-left: -30px;
    width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align=full],
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align=full] > *:not(.wp-block-group) .wp-block[data-align=full] {
    margin-right: auto !important;
    margin-left: auto !important;
    width: inherit;
}

.editor-styles-wrapper .has-global-padding > .alignfull {
    margin-left: -30px;
    margin-right: -30px;
}

.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
    background: none;
    border: 2px solid;
}

/* Center the caption for wide and full-width images, matching the front end. */
.editor-styles-wrapper .wp-block-image.alignwide > figcaption,
.editor-styles-wrapper .wp-block-image.alignfull > figcaption,
.editor-styles-wrapper .wp-block[data-align=wide] .wp-block-image > figcaption,
.editor-styles-wrapper .wp-block[data-align=full] .wp-block-image > figcaption {
    text-align: center;
}

/* This targets the title wrapper only when our custom body class is present */
.inspiro-hide-page-title .editor-visual-editor__post-title-wrapper {
    opacity: 0.2;
    transition: opacity 0.3s ease;
}