/* border-box all the things! */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* break the long text */
body * {
    word-break: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Links and inputs transition */
a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
    transition: all .2s ease-in-out;
}

input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"], [type="file"]),
select,
textarea,
.wp-block-search__input {
    background-color: transparent;
    color: inherit;
    border: 1px solid currentColor;
    font-size: var(--wp--preset--font-size--extra-small);
    padding: calc(.667em + 2px);
    width: 100%;
}

input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"], [type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-search__input:focus-visible {
    outline: 1px solid currentColor;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
    width: auto;
}

input[type=button],
input[type=email],
input[type=search],
input[type=submit],
input[type=text],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

::placeholder {
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.6;
}

/* WP built-in highlighting mark */
mark {padding: 1px 6px;}

/* Eliminate the horizontal scrollbar when a long text in the preformatted tag is used */
pre { overflow: auto; }

/* 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;
}

/**
 * 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
 */
: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);}

/**
 * text-decoration in links is important for accessibility. However,
 * remove the text decoration from the links that are already highlighted
 */
 body.blog main h2 a,
 body.archive main h2 a,
 body.search main h2 a,
 .wp-block-query-pagination a,
 .wp-block-post-terms a,
 .wp-block-post-navigation-link a,
 .remove-text-decor a,
 a.button {
     text-decoration: none;
}

/* Boxed page/post template */
[class*="template-boxed"] main { width: 78%; }

/* Footer - links */
footer a:hover { opacity: .6; }
/* Footer - eliminate the top margin, coz when 'main' tag has a background, white-space would be present */
body:not([class*="template-boxed"], [class*="template-blank"]) footer { margin-top: 0; }

/* If the last element in the post content is floating, it's necessary to clear the next elm */
.post-footer, .wp-block-comments, footer {clear: both;}

/**
 * Add a class to the last block to eliminate the template's space at bottom.
 * Needs to be done manually in the UI
 */
.ice-cut-template-space-bottom.ice-cut-template-space-bottom {margin-bottom: -3.5rem !important;}

/**
 * Blocks
 */

/**
 * @Since 1.1.9
 * Moving here from an individual .css file for the paragraphs, headings and post-title,
 * coz it's using the same css classes
 * and it's hard to imagine the page without the paragraphs, headings and/or post-title
 */
/* Headings & Post title */
.is-style-icecubo-accent-text-small-1 {text-shadow: var(--wp--custom--text-shadow-small) var(--wp--preset--color--gray-light);}
.is-style-icecubo-accent-text-small-2 {text-shadow: var(--wp--custom--text-shadow-small-2) var(--wp--preset--color--gray-light);}
.is-style-icecubo-accent-text-huge-1 {text-shadow: .1em .1em 0 var(--wp--preset--color--gray-light);}
.is-style-icecubo-accent-text-huge-2 {text-shadow: 5px 5px 0 var(--wp--preset--color--gray-very-light);}
.is-style-icecubo-underline-overline {display: flex; flex-direction: column; line-height: 1.75;}
.is-style-icecubo-underline-overline::before, .is-style-icecubo-underline-overline::after {content: ""; width: 10vh; border-top: 1px solid;}
.is-style-icecubo-underline-color-primary::after {content: ""; display: block; border-bottom: 5px solid var(--wp--preset--color--primary); position: relative; top: 4px;}
.is-style-icecubo-aside-lines {display: flex; align-items: center;}
.is-style-icecubo-aside-lines::before, .is-style-icecubo-aside-lines::after {content: ''; border-top: 1px solid; margin: 0 20px; flex: 1 0 20px;}
.is-style-icecubo-asterisk-over:before { content: ''; height: 3rem; background: currentColor; clip-path: path('M11.93.684v8.039l5.633-5.633 1.216 1.23-5.66 5.66h8.04v1.737H13.2l5.701 5.701-1.23 1.23-5.742-5.742V21h-1.737v-8.094l-5.77 5.77-1.23-1.217 5.743-5.742H.842V9.98h8.162l-5.701-5.7 1.23-1.231 5.66 5.66V.684h1.737Z'); display: block;}
.is-style-icecubo-star-over:before { content: '\2605'; display: block; margin-bottom: var(--wp--custom--spacing-s);}

/* Paragraph */
.is-style-icecubo-highlight-p {box-shadow: var(--wp--custom--button-shadow);}
[class*="is-style-icecubo-tearbox-"] {box-shadow: var(--wp--custom--button-shadow); border-radius: var(--wp--custom--radius-middle); margin: 2em auto 1em; width: fit-content;}
.is-style-icecubo-tearbox-left-p {border-top-left-radius: 0;}
.is-style-icecubo-tearbox-right-p {border-top-right-radius: 0;}

/* All mix colors - Headings, Post title, paragraph */
[class*="is-style-icecubo-mix-colors"] {background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.is-style-icecubo-mix-colors {background: linear-gradient(199deg, var(--wp--preset--color--shade-3) 40%, var(--wp--preset--color--friend-dark) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.is-style-icecubo-mix-colors-light {background: linear-gradient(199deg, var(--wp--preset--color--shade-2) 40%, var(--wp--preset--color--friend-light) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.is-style-icecubo-mix-colors-glow   {background: linear-gradient(199deg, var(--wp--preset--color--shade-3) 40%, var(--wp--preset--color--primaryish) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.is-style-icecubo-mix-colors-glow-2 {background: linear-gradient(199deg, var(--wp--preset--color--shade-3) 40%, var(--wp--preset--color--primaryish-light) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.is-style-icecubo-mix-colors-glow-3 {background: linear-gradient(199deg, var(--wp--preset--color--shade-3) 40%, var(--wp--preset--color--highlight-2) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.is-style-icecubo-mix-colors-focus {background: radial-gradient(var(--wp--preset--color--shade-1) 25%, var(--wp--preset--color--darko) 75%);}
.is-style-icecubo-mix-colors-to-light {background: linear-gradient(to right, var(--wp--preset--color--primary), var(--wp--preset--color--primaryish-light));}

/* Marking a chunk of text with a UI highlighter and adding a following class */
[class*="ice-mark"] mark {background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;text-shadow: none !important;}
.ice-mark-mix mark {background: linear-gradient(199deg, var(--wp--preset--color--shade-3) 40%, var(--wp--preset--color--friend-dark) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.ice-mark-mix-light mark {background: linear-gradient(199deg, var(--wp--preset--color--shade-2) 40%, var(--wp--preset--color--friend-light) 50%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--highlight-1) 100%);}
.ice-mark-to-light mark {background: linear-gradient(to right, var(--wp--preset--color--primary), var(--wp--preset--color--primaryish-light));}
.ice-mark-focus mark {background: radial-gradient(var(--wp--preset--color--shade-1) 25%, var(--wp--preset--color--darko) 75%);}
.ice-mark-pick mark {background: radial-gradient(currentColor, var(--wp--preset--color--darko) 75%)}

/**
 * Search box - button (icon).
 * This code, except the 'max-width' is already avaliable in the editor (default by WP).
 * '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 {
    align-items: center;
    border-radius: initial;
    display: flex;
    height: auto;
    justify-content: center;
    border-radius: var(--wp--custom--radius-large);
    max-width: none;
}
/*...Also the padding for the search button is necessary */
.wp-block-search__button {padding: .75em 1.75em}

/**
 * Group/cover block.
 * Almost every page has a group block, so target block variation styling
 * from here instead separately from group and cover css files.
 */
.is-style-icecubo-rotate-left {transform: rotate(-4deg);}
.is-style-icecubo-rotate-right {transform: rotate(4deg);}
@media (min-width: 600px) {
    .is-style-icecubo-rotate-left {transform: rotate(-13deg);}
    .is-style-icecubo-rotate-right {transform: rotate(13deg);}
}

/**
 * Post byline styling
 * - Instead of setting each css file for the post-author, post-date, terms, navigation-link, pagination,
 *   style it here
 */
.is-style-icecubo-square-post-byline {
     background: var(--wp--preset--color--white-ice);
     color: var(--wp--preset--color--darko-down-bottom);
     border-radius: var(--wp--custom--radius-small);
     padding-left: var(--wp--custom--spacing-s);
     padding-right: var(--wp--custom--spacing-s);
}

.is-style-icecubo-oval-post-byline {
     background: var(--wp--preset--color--white-ice);
     color: var(--wp--preset--color--darko-down-bottom);
     border-radius: var(--wp--custom--radius-middle);
     padding-left: var(--wp--custom--spacing-s);
     padding-right: var(--wp--custom--spacing-s);
}

.is-style-icecubo-outline-post-byline {
    border: 1px solid currentColor;
    border-radius: var(--wp--custom--radius-middle);
    padding-left: var(--wp--custom--spacing-s);
    padding-right: var(--wp--custom--spacing-s);
}

.is-style-icecubo-square-post-byline.wp-block-query-pagination,
.is-style-icecubo-oval-post-byline.wp-block-query-pagination,
.is-style-icecubo-outline-post-byline.wp-block-query-pagination {
    padding-left: var(--wp--custom--spacing-xl);
    padding-right: var(--wp--custom--spacing-xl);
}

/**
 * As addition to post byline, each term styling
 */
.is-style-icecubo-each-square-post-byline a {
    background: var(--wp--preset--color--white-ice);
    color: var(--wp--preset--color--darko-down-bottom);
    border-radius: var(--wp--custom--radius-small);
}

.is-style-icecubo-each-oval-post-byline a {
    background: var(--wp--preset--color--white-ice);
    color: var(--wp--preset--color--darko-down-bottom);
    border-radius: var(--wp--custom--radius-middle);
}

.is-style-icecubo-each-outline-post-byline a {
    border: 1px solid currentColor;
    border-radius: var(--wp--custom--radius-middle);
}

.is-style-icecubo-square-post-byline.wp-block-post-terms,
.is-style-icecubo-oval-post-byline.wp-block-post-terms,
.is-style-icecubo-each-square-post-byline.wp-block-post-terms a,
.is-style-icecubo-each-oval-post-byline.wp-block-post-terms a {
    font-weight: bold;
}

.is-style-icecubo-each-square-post-byline.wp-block-post-terms a,
.is-style-icecubo-each-oval-post-byline.wp-block-post-terms a,
.is-style-icecubo-each-outline-post-byline.wp-block-post-terms a {
    padding: var(--wp--custom--spacing-xxs) var(--wp--custom--spacing-xs);
}

.is-style-icecubo-each-square-post-byline.wp-block-query-pagination > a,
.is-style-icecubo-each-oval-post-byline.wp-block-query-pagination > a,
.is-style-icecubo-each-outline-post-byline.wp-block-query-pagination > a {
    padding: var(--wp--custom--spacing-xxs) var(--wp--custom--spacing-xl);
}

.is-style-icecubo-each-square-post-byline.wp-block-query-pagination .wp-block-query-pagination-numbers a,
.is-style-icecubo-each-oval-post-byline.wp-block-query-pagination .wp-block-query-pagination-numbers a,
.is-style-icecubo-each-outline-post-byline.wp-block-query-pagination .wp-block-query-pagination-numbers a {
    padding: var(--wp--custom--spacing-xxs) var(--wp--custom--spacing-s);
}

/* 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-minheight-no {min-height: unset !important;}
    .mob-display-out { display: none !important;}
}