/**
 * When h element is the first in the group,
 * set the margin-top here instead in theme.json so it can be overwritten in block elements through UI.
 * This is coz by default WordPress is using 'body .is-layout-constrained >' or 'body .is-layout-flow >' property
   and to overwrite it, it has to be a target as well.
 * Otherwise, through theme.jason !important would be used, but the problem is then it cannot be overwritten in UI.
 * - Alternatively, for the post titles, it could be done in templates, on each post-title block,
 * but it wouldn't impact the in-content h1 when it's the first element in a group block.
 * - With :not(.wp-block-post-title) omit the actual title of the page coz the padding on the 'main' tag will give the spacing
 *
 * - This potentially could be utilized, along the used declaration, to target the larger heading scope, 
 * but the problem is that it's impacting the Headings in the Header-Hero sections and is making a large space there,
 * also it is overriding the block spacing when it's set on the group and Heading element is inside that group.
 * :where(.is-layout-flow > *,.is-layout-constrained > *) > :where(h1,h2,h3,h4,h5,h6):not(.wp-block-post-title):not(.wp-block-query-title) {margin-top: var(--wp--preset--spacing--x-large);}
 */
:where(body .is-layout-flow,body .is-layout-constrained) > :where(h1,h2,h3,h4,h5,h6):not(.wp-block-post-title):not(.wp-block-query-title):first-child:first-child {margin-top: var(--wp--preset--spacing--x-large);}


/* Nav item - outline */
.is-style-icecubo-nav-item-outline { border: 1px solid currentColor; border-radius: var(--wp--custom--radius-large); padding: var(--wp--custom--spacing-xs) var(--wp--custom--spacing-xxxl) }

/* Menu item - Since '--wp--style--global--wide-size' is declared in %, it breaks the menu item with multiple words (also in the mega-menu). This resolves it */
.wp-block-navigation-item__content { width: max-content; }

/* If the inline image is added to the nav item, this makes it gapped from the text - Still, doesn't reflect in the Editor */
.wp-block-navigation li a.wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    gap: .3em;
}

/* Mega menu - Create columns */
@media (min-width: 600px)
{
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item {display: inline-block !important;}
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item .wp-block-navigation-item {display: block !important;}
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {display: none !important;}
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation__submenu-container {visibility: visible !important; opacity: 1 !important; width: max-content !important; height: auto !important; position: relative !important; left: 0 !important; border: 0 !important;}
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation__submenu-container {display: inline !important;}
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container,
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container > ul.wp-block-page-list {display: grid !important; grid-column-gap: 2em;}
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container,
    .is-style-icecubo-nav-submenu-mega > .wp-block-navigation__submenu-container > ul.wp-block-page-list {grid-template-columns: repeat(2, 1fr);}
    .is-style-icecubo-nav-submenu-mega.mm3 > .wp-block-navigation__submenu-container,
    .is-style-icecubo-nav-submenu-mega.mm3 > .wp-block-navigation__submenu-container > ul.wp-block-page-list {grid-template-columns: repeat(3, 1fr);}
    .is-style-icecubo-nav-submenu-mega.mm4 > .wp-block-navigation__submenu-container,
    .is-style-icecubo-nav-submenu-mega.mm4 > .wp-block-navigation__submenu-container > ul.wp-block-page-list {grid-template-columns: repeat(4, 1fr);}
    .is-style-icecubo-nav-submenu-mega.mm5 > .wp-block-navigation__submenu-container,
    .is-style-icecubo-nav-submenu-mega.mm5 > .wp-block-navigation__submenu-container > ul.wp-block-page-list {grid-template-columns: repeat(5, 1fr);}
}

/**
 * Blocks
 */

/**
 * Marking a chunk of text with a UI highlighter and adding a following class
 * In the Editor just mark it with opacity, it cannot perform the "ice-mark" effect on the highlighter
 */
[class*="ice-mark"] mark {opacity: .5;}

/* Search box - border-radius is set for all buttons, but inside the editor it isn't picking the radius on the search box */
.wp-block-search .wp-block-search__button { border-radius: var(--wp--custom--radius-large); }

/**
 * Search box - button (icon).
 * 'max-width' removes the value set by WP which doesn't give equal space around the icon.
 */
.wp-block-search.wp-block-search__button-only .wp-block-search__button { max-width: none; }

/* Preformatted text in the "Classic block" */
.wp-block-freeform.block-library-rich-text__tinymce pre { color: inherit; }

/* Code block */
.wp-block-code code { overflow-y: scroll; }

/* code tag used outside of the pre.wp-block-code wrapper, i.e. most likely inline code */
:not(.wp-block-code) > code {
    background: var(--wp--preset--color--gray-very-light);
    color: var(--wp--preset--color--darko-down);
    padding: 3px 8px;
}

/* Comment reply button - isn't picking the removal of the text decoartion from the css file */
[class*="is-style-icecubo-comment-reply-button-"] a { text-decoration: none;}

/* Small screens */
@media (max-width: 599px) {
    /* Force behavior on mobile */
    .mob-force-flexwrap {flex-wrap: wrap !important;}
    .mob-force-flexdir-columns {flex-direction: column !important;}
    .mob-force-flexdir-columns-rev {flex-direction: column-reverse !important;}
    .mob-minheight-no {min-height: unset !important;}
    .mob-display-out { display: none !important;}
}