/**
 * Theme Name: Itziar Santin
 * Template: blankslate
 */

@font-face {
    font-family: 'Myriad Pro';
    src: url('fonts/MyriadPro-Regular.woff2') format('woff2'),
    url('fonts/MyriadPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/SourceSans3-Roman.woff2') format('woff2'),
    url('fonts/SourceSans3-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cascadia Mono';
    src: url('fonts/CascadiaMono-Regular.woff2') format('woff2'),
    url('fonts/CascadiaMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
* { box-sizing: border-box; }

:root {
    --primary-color: #17665c;
    --secondary-color: #5eaa70;
    --tertiary-color: #efe8cb;
    --fourth-color: #F8DE70;
    font-size: 22px;
    font-weight: 100;
    line-height: 1.3;
}
body {
    margin: 0;
    font-family: 'Cascadia Mono', mono, sans;
    max-width: 100vw;
    overflow-x: hidden;
}
@media screen and (max-width: 768px) {
    :root {
        font-size: 16px;
        text-align: center;
    }
}
.is-layout-flex {
    display: flex;
}
/**
 * Some header styling
 */

header#header { /* 1366 / 2 = 683*/
    padding: 0 max(calc(50vw - 683px), 20px);
    background: image-set(attr(data-bg));
    background-size: cover;
    background-position: center;
    padding-bottom: 120px;
    display: grid;
    grid-template-areas: "logo spacer languages"
                         "menu menu menu";
    align-items: center;
}
#header #site-title { grid-area: logo; }
#header #site-header-area { grid-area: languages; }
#header #menu { grid-area: menu; }

header#header h1 {
    margin: 0;
    padding: 0;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
nav ul li a {
    display: inline-block;
    padding: 0.5rem 1rem; 
    text-decoration: none;
    color: #000000;
    width: 100%;

}
nav ul li.current-menu-item a, 
nav ul li a:hover {
    background-color: #f7de77ff;
}
nav ul li ul {
    display: none;
    position: absolute;
    flex-direction: column;
    background: white;
    z-index: 9;
    border: 2px solid #1c5870ff;
    border-top: 0;
    align-items: flex-start;
}
nav ul li:hover ul {
    display: block;
}
nav .wp-block-polylang-language-switcher li.current-lang {
    display: none;
}
nav .wp-block-polylang-language-switcher a {
    color: #fff;
    text-decoration: none;
    text-shadow: 2px 2px 2px var(--primary-color);
}
nav#menu {
    background: white;
    padding: 4px 2rem;
    border-radius: 50px;
    border: 2px solid #1c5870ff;
    box-shadow: 0 4px 15px var(--primary-color);
}
nav#menu ul li.current-menu-item a, 
nav#menu ul li a:hover {
    background-color: #f7de77ff;
}
nav#menu ul.menu > li:last-child {
    margin-left: auto;
}
nav#menu ul.menu > li:last-child a {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    text-transform: uppercase;
    border-radius: 50px;
    justify-self: end;
    box-shadow: 4px 4px 10px var(--primary-color);
    padding: 0.3rem 1rem;
}
nav#menu .pll-parent-menu-item {
    display: none;
}
/**
 * Responsive menu with a burger button
 */
#menu-toggle { display: none; }
#menu-toggle + label { display: none; }
@media screen and (max-width: 768px) {
    header#header {
        grid-template-areas: "main-header main-header-2" "rest rest";
        justify-content: center;
        padding-bottom: 40px;
    }
    #header #site-title { grid-area: main-header; order: 1;}
    #header #site-header-area { display: none; }
    #header #menu-toggle,
    #header #menu-toggle+label { grid-area: main-header-2; order: 2}
    #header #menu { grid-area: rest; }
    #header #site-title {
        background-color: white;
        border-radius: 20px;
        height: 65px;
        margin: 2rem auto;
        text-align: left;
        border: 1px solid var(--primary-color);
        box-shadow: 4px 4px 10px var(--primary-color);
        padding-right: 3rem;
        width: calc(100vw - 4rem);
    }
    #header #site-title img {
        height: 60px;
        width: auto;
        margin-right: 60px;
    }
    nav#menu {
        background: transparent;
        border: none;
        box-shadow: none;
    }
    #site-title {
        position: relative;
        z-index: 9;
    }
    #menu-toggle + label {
        display: block;
        width:0;
        margin-left: -3rem;
    }
    #menu-toggle + label::before {
        color: var(--primary-color);
        content: '≡';
        display: block;
        padding: 4px;
        text-align: center;
        width: 1rem;
        position: relative;
        z-index: 10;
        font-size: 2rem;
    }
    #menu-toggle:checked + label::before {
        content: '✕';
    }
    #menu-toggle + label + nav {
        display: none;
    }
    #menu-toggle:checked + label + nav {
        display: block;
        position: absolute;
        padding-top: calc(60px + 7rem);
        background: var(--fourth-color);
        border: none;
        border-radius: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8;
    }
    nav#menu .menu-menuprincipal-container,
    nav#menu ul.menu {
        height: 100%;
    }
    nav#menu ul.menu li a {
        padding: 0.2rem 0rem;
    }
    nav#menu ul.menu {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    nav#menu ul.menu > li:last-child {
        width: 100vw;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    nav#menu ul.menu > li:last-child a {
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        padding-left: 2rem;
    }
    nav#menu ul.menu ul.sub-menu {
        display: flex;
        position: relative;
        background: none;
        border: none;
        margin-left: 3em;
        list-style: "-";
        font-size: 0.9em;
    }
    nav#menu .pll-parent-menu-item {
        display: block;
        position: absolute;
        bottom: 3rem;
    }
    nav#menu .pll-parent-menu-item a[href="#pll_switcher"],
    nav#menu ul.menu .pll-parent-menu-item li.current-lang {
        display: none;
    }
    nav#menu ul.menu .pll-parent-menu-item .sub-menu {
        list-style: none;
        flex-direction: row;
        gap: 1rem;
        margin: 0;
    }
    nav#menu ul.menu .pll-parent-menu-item .sub-menu li a{
        color: var(--primary-color);
        border: 1px solid;
        border-radius: 6px;
        background-color: #fff;
        text-transform: uppercase;
        padding: 0.2rem 0.3rem;
    }
}

/**
 * Body styles
 */
#container {
    padding-top: 60px;
    background-image: url(img/fondo.jpg);
    background-size: 100% auto;
}
#container p {
    margin-top: 2em;
}
#container article .entry-content > * {
    padding-left:  max(calc(50vw - 683px), 20px);
    padding-right: max(calc(50vw - 683px), 20px);
    overflow-y: hidden;
}
#container article .entry-content > .size-full {
    padding: 0;
}
#container h1 {
    margin: 0;
    text-align: center;
    font-family: 'Myriad Pro 3', sans;
    text-transform: uppercase;
    font-size: 2.8rem;
    color: var(--secondary-color);
}
#container h2 {
    text-align: center;
    color: var(--primary-color);
    font-weight: 100;
    font-size: 2rem;
    margin: 0.3rem 0 1rem 0;
}
#container .translation-schema {
    text-align: center;
    color: var(--primary-color);
    font-weight: 100;
    margin: 0.3rem 0 1rem 0;
}
#container .translation-schema em, 
#container .translation-schema strong {
    font-style: normal;
    color: var(--secondary-color);
    background: url(img/flecha-derecha.svg) no-repeat;
    color: transparent;
    background-position: 50%;
    width: 2rem;
    display: inline-block;
}
#container .translation-schema strong {
    background-image: url(img/flechas-dobles.svg);
}
#container h3 {
    font-size: 2.8rem;
    font-weight: 100;
}
#container .large {
    color: var(--primary-color);
    font-size: 1.4rem;
}
#container section, #container section ul {
    clear: both;
    margin-bottom: 2em;
}
#container figure {
    padding: 2rem;
    background-color: white;
}
#container figure.alignright {
    float: right;
}
#container figure.half-way {
    max-width: 33%;
    margin: 0 0 2rem 2rem;
}

#container .columns  {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    text-align: left;
}
#container .columns  p {
    margin-top: 0;
}

#container section.intro figure.half-way {
    max-width: 50%;
}

#container .wp-block-gallery {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: 70%;
    margin: 2rem auto;
}
#container figure.wp-block-gallery, 
#container figure.wp-block-gallery figure{
    border: 0;
    background: none;
    padding: 0;
}
@media screen and (max-width: 768px) {
    #container h1 {
        font-size: 1.4rem;
    }
    #container h2 {
        font-size: 1.3rem;
    }
    #container h3 {
        font-size: 1.2rem;
    }
    #container .large {
        font-size: 1.1rem;
    }
    #container figure.half-way {
        max-width: calc(100% + 40px);
        padding: 0.5rem 0;
        background-color: white;
        margin: 0 -20px;
    }

    #container section.intro figure.half-way {
        max-width: calc(100% + 40px);
    }
    #container .columns  {
        flex-direction: column;
    }
}

#container section.clients {
    background-color: #bce27a;
    color: var(--primary-color);
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
#container section.clients .wp-block-gallery {
    justify-content: space-around;
}
#container section.clients .wp-block-gallery figure {
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 10px;
    margin: 0!important;
    flex: none;
}
#container section.clients .wp-block-gallery figure img {
    object-fit: contain;
}
.wp-block-gallery.has-nested-images figure.wp-block-image>a, .wp-block-gallery.has-nested-images figure.wp-block-image>div { flex-grow: 0; }

.translation-types {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin: 3rem;
}
.translation-types h3.on-a-note {
    background-image: url(img/nota.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 9em;
    height: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5em 2em 1.5em 3em;
    transform: rotate(-10deg);
}
.translation-types ul {
    list-style: square;
    text-align: left;
}
.translation-types ul li {
    margin-bottom: 0.3em;
}
@media screen and (max-width: 768px) {
    .translation-types {
        flex-direction: column;
        margin: 1rem 0;
    }
}

.strong-block {
    background: var(--primary-color);
    color: var(--tertiary-color);
    font-size: 1.4rem;
    padding-top: 3rem;
    padding-bottom: 2em;
    box-shadow: 0 4px 15px var(--primary-color);
}
.strong-block > * {
    flex: 1;
}
.strong-block a {
    display: inline-block;
    background-color: #f7de77;
    padding: 4px;
    color: var(--primary-color);
    text-decoration: none;
}
#container .strong-block h2 {
    color: #F6DE79;
}

#container article .contact-block {
    padding: 0;
    text-align: center;
    color: var(--primary-color);
    max-width: 35rem;
    margin: 0 auto;
    margin-bottom: 2rem;
    background-color: var(--tertiary-color);
    border: 1px solid var(--primary-color);
    border-radius: 20px;
}
.contact-block h3 {
    color: var(--primary-color);
    background-color: #bce27a;
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    margin: 0;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}
#container .contact-block p {
    padding: 0 5rem;
    font-size: 1.4rem;
    margin-top: 0;
}
.contact-block p a {
    display: inline-block;
    text-transform: uppercase;
    background-color: #f7de77;
    padding: 6px;
    color: var(--primary-color);
    text-decoration: none;
    border: 1px solid var(--primary-color);
}

.listing-block {
    color: var(--primary-color);
    font-size: 1.4rem;
}
.listing-block ul {
    padding: 2rem 0;
    list-style: none;
    text-align: left;
}
.listing-block li {
    background: #f7de77;
    border: 1px solid var(--primary-color);
    padding: 1rem 2rem;
    border-radius: 20px;
    font-size: 1.4rem;
    margin-bottom: 20px;
}
.listing-block li:nth-child(2n) {
    background: #efe8cb;
    border-color: var(--secondary-color);
    /*color: var(--secondary-color)*/;
}
.listing-block li .description {
    font-size: 1rem;
}

.taped-blocks  {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}
/* for the tapes */
.taped-blocks {
    padding-top: 40px;
}
.taped-blocks .taped-block {
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    padding: 1rem;
    min-width: 30%;
    flex: 1;
    background-color: #BCE27B;
    color: var(--primary-color);
    position: relative;
}
#container .taped-blocks .taped-block .is-layout-flex {
    align-items: stretch;
    gap: 10px; 
}
#container .taped-blocks .taped-block figure {
    background-color: transparent;
    width: auto;
    padding: 0;
    margin: 0;
}
#container .taped-blocks .taped-block figure img {
    height: 100%;
}
#container .taped-blocks .taped-block h3 {
    margin: 0;
    font-size: 1.6rem;
}
.taped-blocks .taped-block:first-child {
    background-color: var(--primary-color);
    color: #F6DE79;
}
.taped-blocks .taped-block:first-child h3 {
    color: #EDE7CA;
}
.taped-blocks .taped-block:last-child {
    background-color: #5FAA71;
    color: #EDE7CA;
}
.taped-blocks .taped-block:last-child h3 {
    color: #F6DE79;
}

.taped-blocks .taped-block::before {
    content: "";
    display: block; 
    position: absolute;
    width: 155px;
    height: 43px;
    background-color: #f7de77bd;
    transform: rotate(-24deg);
    top: -16px;
    left: -28px;
}
.taped-blocks .taped-block:nth-child(2n)::after {
    content: "";
    display: block; 
    position: absolute;
    width: 155px;
    height: 43px;
    background-color: #f7de77bd;
    transform: rotate(7deg);
    top: -16px;
    right: -18px;
}
.taped-blocks .taped-block:first-child::before {
    transform: rotate(-2deg);
    top: -35px;
    left: 20%;
}
.taped-blocks .taped-block:last-child::before {
    top: -30px;
    left: 35%;
    transform: rotate(4deg);
}

h2.postit {
    background: var(--fourth-color);
    background: linear-gradient(45deg,rgba(249, 224, 121, 1) 0%, rgba(254, 234, 153, 1) 100%);
    padding: 3rem 1rem 2rem 1rem;
    position: relative;
}
section.with-postit {
    gap: 20px;
    align-items: flex-start;
}
h2.postit:before {
    display: block;
    content: "";
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    height: 15%;
    background-color: #ec8b1554;
}

@media screen and (max-width: 768px) {
    .translation-types h3.on-a-note {
        padding: 2.5em;
    }
    .strong-block  {
        flex-direction: column;
    }
    .strong-block, 
    .listing-block,
    #container .contact-block > div p {
        font-size: 1.1rem;
    }
    #container .contact-block > div p {
        padding: 20px;
    }
    .listing-block li {
        font-size: 1.1rem!important;
    }
    .taped-blocks  {
        flex-direction: column;
    }
    #container .taped-blocks .taped-block .is-layout-flex {
        align-items: center;
    }
    #container .wp-block-gallery {
        gap: 10px;
        width: 100%;

    }
    .with-postit {
        flex-direction: column;
    }
}

section.slider {
    background-color: var(--fourth-color);
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: grid;
    gap: 20px;
    grid-template-areas: "foto content" "foto controls";
    grid-template-rows: 1fr 60px;
    grid-template-columns: 650px 1fr;
    align-items: start;
}
section.slider > div {
    display: none;
}
section.slider > div.active {
    display: block;
    color: var(--primary-color);
    text-align: center;
}
section.slider figure {
    grid-area: foto;
}
section.slider div {
    grid-area: content;
}
section.slider div.controls {
    display: flex;
    grid-area: controls;
    gap: 2rem;
}
section.slider div.controls button {
    border: none;
    color: transparent;
    background: transparent no-repeat 50%;
    background-size: contain;
    width: 6rem;
}
section.slider div.controls .prev button {
    background-image: url(img/flecha-izq.svg);
}
section.slider div.controls .next button { 
    background-image: url(img/flecha-derecha.svg);
}

@media screen and (max-width: 768px) {
    section.slider {
        grid-template-areas: "foto" "content" "controls";
        grid-template-rows: auto;
        grid-template-columns: auto;
    }
}
/**
 * Footer
 */
footer {
    color: var(--primary-color);
    background: #f7de77 url(img/pie-de-pagina.jpg);
    background-size: cover;
    box-shadow: 0 -4px 10px #ccc;
    padding: 1rem 0;
}
footer nav ul.menu {
    justify-content: center;
}
footer nav ul.menu li a {
    color: var(--primary-color);
    border-bottom: 2px solid transparent;
}
footer .footer-logo {
    align-items: center;
    gap: 2rem;
}
footer .footer-logo p {
    padding: 4px 2rem;
    background: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    box-shadow: 0 4px 15px var(--primary-color);
}

footer nav ul li a:before {
    content: '';
    display: inline-block;
    background-size: contain;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
}
footer nav ul li.info a:before {
    background: transparent url(img/aviso-legal.svg) no-repeat 0 0;
}
footer nav ul li.privacy a:before {
    background: transparent url(img/politica-de-privacidad.svg) no-repeat 0 0;
}
footer nav ul li a:hover,
footer nav ul li.current-menu-item a {
    background: transparent;
    border-bottom: 2px solid;
}

/**
 * Marquee effect 
 */
.marquee {
    --gap: 1rem;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee p{
    flex-shrink: 0;
    font-size: 2rem;
    display: flex;
    justify-content: space-around;
    white-space: nowrap;
    min-width: 100%;
    gap: var(--gap);
    animation: marquee linear 20s infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}
/**
 * Popup
 */
#contact-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(10px);
}
#contact-popup-overlay.visible {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#contact-popup-overlay a.custom-logo-link {
    max-width: 1200px;
    width: 100%;
    text-align: left;
}
#contact-popup-overlay form {
    display: flex;
    align-items: center;
    gap: 2rem;
}
#contact-popup-overlay #contact-popup {
    position: relative;
    max-width: 1200px;
    min-height: 60vh;
    background-color: #EDE7CA;
    color: var(--primary-color);
    border-radius: 1rem;
    padding: 1rem;
}
#contact-popup-overlay #contact-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--primary-color);
    border-radius: 50px;
    border: 2px solid var(--secondary-color);
    background-color: #BCE27B;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    line-height: 0.75em;
    cursor: pointer;
}
#contact-popup-overlay form fieldset.hidden-fields-container {
    border: none;
    display: none;
}
#contact-popup-overlay form .intro {
    flex: 1;
    color: var(--secondary-color);
}
#contact-popup-overlay form .intro h2 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin: 0;
}
#contact-popup-overlay form .form {
    flex: 2;
}
#contact-popup-overlay form .form p {
    margin: 0;
}
#contact-popup-overlay form input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--primary-color);
    font-size: 0.8rem;
}
#contact-popup-overlay form textarea {
    width: 100%;
    border: none;
    border-radius: 1rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    box-shadow: -4px -4px 10px #5eaa7070;
    font-size: 0.8rem;
}
#contact-popup-overlay form .form p:last-child {
    display: flex;
    font-size: 0.7rem;
    margin-top: 1rem;
    gap: 2rem;
    color: var(--secondary-color);
}
#contact-popup-overlay form .form p:last-child label {
    display: flex;
    align-items: flex-start;
    gap: 1em;
}
#contact-popup-overlay form .form p:last-child label input {
    appearance: none;
    border: 1px solid var(--secondary-color);
    background: #fff;
    width: 2rem;
    height: 1rem;
    position: relative;
}
#contact-popup-overlay form .form p:last-child label input:checked:after {
    content: "✓";
    display: block;
    position: absolute;
    color: var(--secondary-color);
    font-size: 1.5rem;
    top: -0.6em;
    left: 0.1em;
}
#contact-popup-overlay form .form p:last-child label span {
    display: block;
}
#contact-popup-overlay form .form p:last-child a {
    color: var(--secondary-color);
    font-weight: bold;
}
#contact-popup-overlay form .form input[type=submit] {
    border: 2px solid var(--secondary-color);
    background-color: #BCE27B;
    color: var(--primary-color);
    text-transform: uppercase;
    padding: 0.5rem;
    font-size: 1.5rem;
}
#contact-popup-overlay form .form input[type=file] {
    border: none;
}
#contact-popup-overlay form .form input[type=file]:before {
    content: '';
    display: inline-block;
    background: url(img/icono-archivos.svg) no-repeat;
    background-size: contain;
    width: 1.5em;
    height: 1.5em;
    z-index: 2;
    position: relative;
    top: 0.3em;
}
#contact-popup-overlay form .form input[type=file]::file-selector-button {
    background-color: #F6DE79;
    padding-left: 2em;
    margin-left: -2em;
    z-index: 1;
    font-weight: bold;
    border: none;
    color: var(--secondary-color);
}
.screen-reader-response {
    display: none;
}
#contact-popup-overlay .wpcf7-response-output {
    position: absolute;
    top: 50%;
    left: 25%;
    background: var(--tertiary-color);
    border: 2px solid var(--primary-color);
    padding: 1em;
}
@media screen and (max-width: 768px) {
    #contact-popup-overlay {
        overflow: auto;
    }
    #contact-popup-overlay form {
        flex-direction: column;
    }
    #contact-popup-overlay form .form p:last-child {
        flex-direction: column;
    }
}