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

/**
 * Blocks
 */

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

/**
 * 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);
     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);
     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);
    border-radius: var(--wp--custom--radius-small);
}

.is-style-icecubo-each-oval-post-byline a {
    background: var(--wp--preset--color--white-ice);
    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-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-minheight-no {min-height: unset !important;}
}