/*
Theme Name: wiris
Author: Bisiesto Estudio
Author URI: https://bisiesto.es
Theme URI:
Tags: full-site-editing, block-patterns
Text Domain: wiris
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 100.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Colors theme */
html:root {
    --wp--preset--color--black: #3a352e;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--grey-med: #d8d8d8;
    --wp--preset--color--grey-light: #DBD8CE;
    --wp--preset--color--grey: #B3B0A8;
    --wp--preset--color--grey-dark: #8A8781;
    --wp--preset--color--beige: #fefaef;
    --wp--preset--color--green: #90ca5b;
    --wp--preset--color--green-dark: #007b52;
    --wp--preset--color--blue-light: #0085f7;
    --wp--preset--color--blue-dark: #364ea2;
    --wp--preset--color--pink: #ff4a60;
    --wp--preset--color--violet: #6F3C78;
    --wp--preset--color--red: #ed0c2a;
    --wp--preset--color--red-light: #ffedef;
    --wp--preset--color--orange: #f76f00;
    --wp--preset--color--yellow: #F7B500;
    --wp--preset--color--transparent: transparent;
    --wp--preset--color--contrast: #0b0b0b;
    --wp--preset--color--primary: #18212f;
}

/* Gradients */
html:root {
    --wp--preset--gradient--primary-white: linear-gradient(#0095cb 49.9%,
            #fff 50%);
    --wp--preset--gradient--white-primary: linear-gradient(#fff 49.9%,
            #0095cb 50%);
}

/* Duotone */
html:root {
    --wp--preset--duotone--secondary-primary: #0095cb, #006095;
    --wp--preset--duotone--primary-contrast: #006095, #f0f0f0;
}

/* Typo */
html:root {
    --wp--preset--font-family--system: "Karla", sans-serif;
    --wp--preset--font-family--serif: "Moranga", sans-serif;
    --wp--preset--font-family--monospace: "Karla", sans-serif;
}

/* Fonts */
@font-face {
    font-display: swap;
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/Fraunces.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/Fraunces.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Karla";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/Karla-Bold.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Karla";
    font-style: normal;
    font-weight: 500;
    src: url("./assets/fonts/Karla-Medium.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Karla";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/Karla-Regular.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Karla";
    font-style: normal;
    font-weight: 300;
    src: url("./assets/fonts/Karla-Light.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Moranga";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/Moranga_Medium.otf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Moranga";
    font-style: italic;
    font-weight: 400;
    src: url("./assets/fonts/Moranga_Medium_It.otf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Moranga";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/Moranga_Bold.otf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Moranga";
    font-style: italic;
    font-weight: 700;
    src: url("./assets/fonts/Moranga_Bold.otf") format("truetype");
}

html:root {
    --wp--preset--font-size--xx-large: 2rem;
    --wp--preset--font-size--x-large: 1.5rem;
    --wp--preset--font-size--large: 1.2rem;
    --wp--preset--font-size--medium: 1rem;
    --wp--preset--font-size--small: 0.75rem;
    --wp--preset--font-size-h1: 2.4rem;
    --wp--preset--font-size-h2: 1.8rem;
    --wp--preset--font-size-h3: 1.5rem;
    --wp--preset--font-size-h4: 1.2rem;
    --wp--preset--font-size-h5: 0.8rem;
}

html:root {
    --wp--preset--line-height--xx-large: 2.4rem;
    --wp--preset--line-height--x-large: 2rem;
    --wp--preset--line-height--large: 2rem;
    --wp--preset--line-height--medium: 1.5rem;
    --wp--preset--line-height--small: 1.125rem;
    --wp--preset--line-height-h1: 2.8rem;
    --wp--preset--line-height-h2: 2.2rem;
    --wp--preset--line-height-h3: 1.8rem;
    --wp--preset--line-height-h4: 1.5rem;
    --wp--preset--line-height-h5: 1.2rem;
}

h1 {
    font-size: var(--wp--preset--font-size-h1);
    line-height: var(--wp--preset--line-height-h1);
}

h2 {
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
}

h3 {
    font-size: var(--wp--preset--font-size-h3);
    line-height: var(--wp--preset--line-height-h3);
}

h4 {
    font-size: var(--wp--preset--font-size-h4);
    line-height: var(--wp--preset--line-height-h4);
}

h5 {
    font-size: var(--wp--preset--font-size-h5);
    line-height: var(--wp--preset--line-height-h5);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--wp--preset--font-family--serif);
}

/* Design */
html:root {
    --wp--custom--layout--content-size: 740px;
    --wp--custom--layout--wide-size: 1280px;
}

html:root :where(.wp-element-button, .wp-block-button__link) {
    border-width: 2px;
    box-shadow: none;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--large);
    font-family: 'Fraunce', sans-serif;
}

html:root :where(.wp-element-button, .wp-block-button__link):hover {
    background-color: var(--wp--preset--color--grey);
    border-color: var(--wp--preset--color--grey);
}

html:root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link) {
    color: var(--wp--preset--color--black);
}

html:root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link):hover {
    background-color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--black);
}

html:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
    border-color: var(--wp--preset--color--primary);
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: auto;
}

.alignwide {
    margin-left: calc(50% - calc(var(--wp--custom--layout--wide-size)/2));
    margin-right: calc(50% - calc(var(--wp--custom--layout--wide-size)/2));
    max-width: var(--wp--custom--layout--wide-size);
    width: auto;
}

html .wp-block-separator {
    border-top: none;
    background: var(--wp--preset--color--grey-light);
    height: 1px;
}

/* Spacing */
html:root {
    --wp--preset--spacing--60: 3.75rem;
    --wp--preset--spacing--50: 3.125rem;
    --wp--preset--spacing--40: 2.5rem;
    --wp--preset--spacing--30: 1.875rem;
    --wp--preset--spacing--20: 1.125rem;
    --wp--preset--spacing--13: 0.813rem;
}

/* Light mode */
html::backdrop,
html:root {
    --sans-font:
        -apple-system, Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
        "Helvetica Neue", sans-serif;
    --mono-font:
        Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --standard-border-radius: 0.75rem;
    --bg: var(--wp--preset--color--white);
    --accent-bg: var(--wp--preset--color--beige);
    --text: var(--wp--preset--color--black);
    --text-light: #585858;
    --border: #898ea4;
    --accent: var(--wp--preset--color--grey-dark);
    --code: #d81b60;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
    --wp--preset--color--base: #ffffff;
}

/* End light mode */

/* Dark mode */
@media (prefers-color-scheme: dark) {

    html::backdrop,
    html:root {
        color-scheme: dark;
        --bg: var(--wp--preset--color--white);
    }
}

/* End dark mode */

/* Styles intended only for the front.*/
html {
    scroll-behavior: smooth;
}

html body {
    font-family: 'Karla', sans-serif;
}

main {
    padding-top: 0;
}

section {
    margin: 0;
    padding: 0;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

html body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    grid-template-columns:
        1fr min(var(--wp--custom--layout--content-size), 90%) 1fr;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--large);
    line-height: var(--wp--preset--line-height--large);
}

img,
video {
    opacity: 1;
    border-radius: 0;
}

article,
dialog,
fieldset {
    border: none;
}

section:last-child {
    border-top: 0;
}

body a:where(:not(.wp-element-button)),
body a:where(:not(.wp-element-button)):visited {
    color: inherit;
}

.wp-block-button.is-style-arrow .wp-element-button,
.wp-block-button.is-style-arrow .wp-block-button__link {
    position: relative;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: 1px 0;
    padding-right: 28px;
    color: var(--text);
}

.wp-block-button.is-style-arrow .wp-element-button::after,
.wp-block-button.is-style-arrow .wp-block-button__link::after {
    position: absolute;
    content: url("./assets/images/ic_arrow.svg");
}

.wp-block-button.is-style-arrow .wp-element-button::before,
.wp-block-button.is-style-arrow .wp-block-button__link::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 5px;
    height: 2px;
    background-color: var(--text);
    transition: bottom 0.2s ease-in-out;
}

.wp-block-button.is-style-arrow .wp-element-button:hover::before,
.wp-block-button.is-style-arrow .wp-block-button__link:hover::before {
    bottom: 1px;
}

/* Header */
.header-general {
    display: grid;
    grid-template-columns:
        1fr min(var(--wp--custom--layout--wide-size), 90%) 1fr;
    border: 0;
    background-color: var(--wp--preset--color--white);
    padding: 1rem 0;
}

.header-general .home-link img {
    max-width: 180px;
    border-radius: 0;
}

.inner-header-general {
    display: flex;
    align-items: center;
}

.menu ul.nav {
    display: flex;
    justify-content: end;
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
}

.header-general .menu-main {
    flex: 1;
}

.header-general .menu-main a {
    color: var(--wp--preset--color--black);
}

.header-general .logo-header {
    margin-right: 2.5rem;
}

.header-general .logo-header > a{
    display: flex;
    align-items: center;
}

.header-general .menu-second,
.header-general .menu-ctas {
    margin-left: 5px;
    margin-right: 5px;
}

.header-general .menu a {
    font-family: var(--wp--preset--font-family--serif);
    text-decoration: none;
}

.header-general .menu a {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
}

.header-general .menu .nav .page_item:not(:last-child),
.header-general .menu .nav .menu-item:not(:last-child) {
    margin-right: 18px;
}

/* End Header */

/* Footer */
.footer-general {
    background-color: var(--wp--preset--color--beige);
    grid-column: 1 / -1;
    padding-top: 3rem;
    margin-top: 0;
    border: 0;
    min-height: 100vh;
    background-image: url('./assets/images/bg_footer.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

/* End Footer */

/* Blog */
.header-blog {
    padding: 1rem 0;
    background-color: var(--wp--preset--color--yellow);
}

body.post-type-archive-products .header-blog,
body.tax-products-type .header-blog{
    background-color: #423C78;
    color: var(--wp--preset--color--white);
}

.header-blog .inner-header-blog {
    max-width: var(--wp--custom--layout--content-size);
    margin-left: auto;
    margin-right: auto;
}

.header-blog .title {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.header-blog .subtitle {
    margin-top: 0;
    margin-bottom: 0;
}

.grid-cards-post {
    display: grid;
    grid-template-columns: repeat(1, minmax(auto, 1fr));
    /*grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));*/
    gap: 3rem;
    margin-bottom: 4.5rem;
    margin-top: 4.5rem;
}

.card-post {
    position: relative;
    margin-bottom: 0;
    min-height: 10rem;
    padding: 0;
    background-color: var(--wp--preset--color--white);
}

.card-post>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    gap: 1rem;
    align-items: center;
}

.card-post::after {
    position: absolute;
    content: "";
    bottom: -1.5rem;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--wp--preset--color--grey-light);
}

.grid-cards-post .card-post:last-child::after {
    display: none;
}

.card-post .meta-post {
    padding: 1rem;
}

.card-post .image {
    border-radius: 2rem;
    height: 10rem;
    background-color: var(--wp--preset--color--grey-light);
    overflow: hidden;
}

.card-post .image img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
}

.card-post a {
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 700;
    text-decoration: none;
    color: var(--wp--preset--color--black);
}

.header-single {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.header-single>div:not(.header-single-overlay):not(.header-meta) {
    display: flex;
    align-items: center;
    max-width: var(--wp--custom--layout--content-size);
    margin-left: auto;
    margin-right: auto;
    min-height: 40vh;
    height: 100%;
}

.header-single .header-meta {
    position: relative;
    z-index: 1;
    max-width: var(--wp--custom--layout--content-size);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1rem;
    color: var(--wp--preset--color--white);
}

.header-single h1 {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--white);
}

.post-single {
    margin-top: 4rem;
    margin-bottom: 8rem;
}

.header-single-overlay {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
}

/* End Blog */

/* Product Categories */
.product-categories {
    margin-top: 1.5rem;
}

.categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-item {
    margin: 0;
}

.category-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    text-decoration: none;
    border-radius: 2rem;
    font-family: var(--wp--preset--font-family--system);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--wp--preset--color--grey-light);
}
.category-link:visited{
    color: var(--wp--preset--color--black) !important;
}

.category-link:hover {
    background-color: var(--wp--preset--color--grey-light);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--grey-dark);
    transform: translateY(-1px);
}

.category-count {
    color: var(--wp--preset--color--black);
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.category-link:hover .category-count {
    color: var(--wp--preset--color--black);
    opacity: 0.8;
}

.rating > span{
    border-radius: 0.25rem;
    font-size: 1rem;
    font-style: italic;
}

.rating .number {
    padding: 0.25rem 0.5rem;
}

.rating-1 .number {
    background-color: #78683c;
    color: var(--wp--preset--color--white);
}
.rating-2 .number {
    background-color: #857341;
    color: var(--wp--preset--color--white);
}
.rating-3 .number {
    background-color: #927e45;
    color: var(--wp--preset--color--white);
}
.rating-4 .number {
    background-color: #9f8a49;
    color: var(--wp--preset--color--black)
}
.rating-5 .number {
    background-color: #ac954d;
    color: var(--wp--preset--color--black)
}
.rating-6 .number {
    background-color: #b9a051;
    color: var(--wp--preset--color--black)
}
.rating-7 .number {
    background-color: #c6ab55;
    color: var(--wp--preset--color--black)
}
.rating-8 .number {
    background-color: #d3b659;
    color: var(--wp--preset--color--black)
}
.rating-9 .number {
    background-color: #e0c15d;
    color: var(--wp--preset--color--black)
}
.rating-10 .number {
    background-color: #cd9f22;
    color: var(--wp--preset--color--black)
}



/* Alignwide */
@media (max-width: 1280px) {
    html:root {
        --wp--custom--layout--wide-size: 100vw;
    }
}

/* Responsive para categorías */
@media (max-width: 768px) {
    .header-general {
        grid-template-columns: 1fr min(var(--wp--custom--layout--wide-size), 100%) 1fr;
    }
    .logo-header,
    .header-general .menu ul.nav{
        padding-left: 1rem;
    }
    .header-single{
        padding: 0 1rem;
    }
    .header-general .home-link img{
        max-width: 140px;
    }
    .header-general .logo-header{
        text-align: left;
    }
    .header-general .menu ul.nav {
        display: flex;
        justify-content: start;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-top: 1rem;
    }
    .header-general .menu ul.nav::-webkit-scrollbar {
        display: none;
    }
    .header-general .menu a{
        white-space: nowrap;
    }
    .categories-list {
        gap: 0.5rem;
    }
    .header-blog{
        padding: 1rem;
    }
    .category-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    .inner-header-general{
        display: block;
    }
    .card-post>div{
        grid-template-columns: repeat(1, minmax(auto, 1fr));
    }
    .footer-general {
        min-height: 50vh;
        background-position: bottom;
        background-size: contain;
    }
}