/*
Theme Name: Artantida
Theme URI: artantida.com
Description: Tema nuevo para el proyecto Artantida
Author: Carlos Vaquer
Author URI: carlosvaquer.com
Version: 1.0
*/

/* CSS RESET */

@font-face {
    font-family: 'JTJavelTrial';

    src: url('fonts/JTJavelTrial-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

:root {
    --main-bg-color: rgb(248, 248, 248);  
    --main-text-color: #050505; 
    --light-grey: rgb(191, 191, 191);
    --main-font: 'JTJavelTrial', sans-serif;

    --pad-xs: 0.5rem;
    --pad-s: 1rem;
    --pad-m: 1.5rem;
    --pad-l: 2rem;
    --pad-xl: 2.5rem;
    --pad-xxl: 3rem;

    --font-m: 2rem;
    --font-l: 3rem;
    --font-xl: 5rem;
    --font-xxl: 7rem;
}


/* my css */

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

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 85%;
    color: var(--main-text-color);
    font-family: var(--main-font); 
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

a {
    color: var(--main-text-color);
    text-decoration: none;
}

/* a:hover {
    color: var(--main-bg-color);
} */

ul {
    padding-inline-start: 0;
}

li {
    list-style: none;
}

button {
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    font-family: var(--main-font);
    font-size: 12px;
    background: none;
    margin: 0;
    padding: 0;
}

::-moz-selection {
    color: var(--light-grey);
    background: transparent;
}

::selection {
    color: var(--light-grey);
    background: transparent;
}

/* clases */
.z-9 {
    z-index: 9;
}

.z-99 {
    z-index: 99;
}

.z-999 {
    z-index: 999;
}

.z-9999 {
    z-index: 9999;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.balance {
    text-wrap-style: balance;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

/* ------------------------------    MENÚ     ------------------------------ */


.main-nav {
  padding: var(--pad-l);
}

.nav-container {
    display: flex;
    align-items: flex-start;
    gap: 0;
}


.nav-logo {
    width: 9rem;
    aspect-ratio: 1 / 1;
    background: white;
    border: 0.5px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.nav-logo img {
    width: 100%;
    height: auto;
}

.menu-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 8rem;
    align-self: flex-start;
    position: relative;
}

.menu-links li {
    width: 100%;
}

.menu-links a {
    width: 100%;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    text-decoration: none;
    text-transform: lowercase;
    border-right: 0.5px solid black;
    border-bottom: 0.5px solid black;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-links li:first-child a {
    border-top: 0.5px solid black;
}

.menu-links > li:not(.menu-item-artistas):hover > a,
.menu-links > li:not(.menu-item-artistas) > a:hover {
    background: black;
    color: white;
}

.menu-item-artistas > a:hover {
    background: black;
    color: white;
}


.artistas-dropdown {
    display: none;
    position: absolute;
    top: 0;              
    left: 100%;          
    list-style: none;
    background: white;
    flex-direction: row;
}

.menu-item-artistas.is-open .artistas-dropdown {
    display: flex;
}

.artistas-dropdown li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;            
    min-height: 2rem;       
    white-space: nowrap;
    color: black;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.artistas-dropdown li + li a {
    border-top: 0.5px solid black;
}

.artistas-dropdown li a:hover {
    background: black;
    color: white;
}

/* ------------------------------    FOOTER     ------------------------------ */


.site-footer {
    width: 100%;

    padding: var(--pad-l) var(--pad-l) 0 var(--pad-l);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* SOLO HOME */

.home .site-footer {
    position: fixed;

    bottom: 0;
    left: 0;
    padding: 0 var(--pad-l) var(--pad-s) var(--pad-l);
}


.footer-left,
.footer-spacer,
.footer-right a {
    background: white;
    color: black;
    text-decoration: none;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.footer-spacer {
    flex: 1;
    border-top: 0.5px solid black;
    border-bottom: 0.5px solid black;
}

.footer-left,
.footer-right a {
    border: 0.5px solid black;
}

.footer-left {
    border-right: none;
    white-space: nowrap;
}

.footer-right a:hover {
    background: black;
    color: white;
}


/* ------------------------------    HOME       ------------------------------ */

.home-backgrounds {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    z-index: -1;
}

.bg-slide {
    position: absolute;

    inset: 0;

    background-size: cover;
    background-position: center;

    opacity: 0;

    animation: bgFade 18s infinite;
}


.bg-1 {
    animation-delay: 0s;
}

.bg-2 {
    animation-delay: 6s;
}

.bg-3 {
    animation-delay: 12s;
}

/* animation */

@keyframes bgFade {

    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    38% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* ------------------------------ SINGLE ARTISTA ------------------------------ */

.single-artista {
    width: 100%;
    padding: 0 var(--pad-l) 0 calc(var(--pad-xxl) * 5);
}

.artista-layout {
    display: flex;
    align-items: flex-end;
    margin-top: -8rem;
}

/* TITLE */

.artista-title-wrap {
    display: flex;
}

.artista-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--font-xl);
}

/* IMAGE */

.artista-image-wrap {
    width: 80rem;
    height: 41.5rem;
    margin-right: var(--pad-l);

}

.artista-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* SIDEBAR */

.artista-sidebar {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-self: center;

    gap: 2.5rem;
}

/* BIO */

.artista-bio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



/* CONCIERTOS */

.artista-conciertos {
    display: flex;
    flex-direction: column;

    gap: 1rem;
}


/* BOTTOM INFO */

.artista-bottom-info {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.info-columns {
    display: flex;
    gap: 2rem;
}

.info-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 12rem;
}

.rrss-column h3 {
    text-align: end;
}

.rrss-column a {
    color: black;
    text-decoration: none;
}

.info-column a,
.rrss-column a {
    cursor: pointer;
}



/* ------------------------------
   BANDSINTOWN RESET
------------------------------ */

/* CONTENEDOR CONCIERTOS */

.conciertos-box {
    height: 22rem;

    overflow-y: auto;
}

.bit-widget-container {
    font-family: var(--main-font) !important;

    background: transparent !important;
}

/* TIPOGRAFÍA BANDSINTOWN */

.bit-widget,
.bit-widget *,
.bit-widget-container,
.bit-widget-container * {
    font-family: var(--main-font) !important;
}

.bit-widget-container * {
    background: transparent !important;

    box-shadow: none !important;
}

/* HEADER BANDSINTOWN */

.bit-widget .bit-top-track-button,
.bit-widget .bit-nav-bar,
.bit-widget .bit-logo,
.bit-widget .bit-upcoming-events-show-all-button,
.bit-rsvp {
    display: none !important;
}

.bit-widget {
    padding-top: 0 !important;
}


/* BOTÓN TICKETS */

.bit-widget .bit-button {
    transition:
        background-color 0.3s ease,
        color 0.3s ease !important;
}

.bit-widget .bit-button:hover {
    background: black !important;

    color: white !important;
}

.bit-play-my-city-button {
    transition:
        background-color 0.3s ease,
        color 0.3s ease !important;
}

.bit-play-my-city-button:hover {
    background: black !important;

    color: white !important;
}

.bit-play-my-city-button:hover * {
    color: white !important;
}


/* ----------------------------- ABOUT ------------------------------ */

.about-page {
    width: 100%;
    padding: var(--pad-xxl) var(--pad-l);
    display: flex;
    justify-content: space-between;
}

.about-left,
.about-right {
    width: 100%;
}

.about-left {
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: calc(var(--pad-xxl) * 2);
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-image {
    width: 32rem;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------ ABOUT FORM ------------------------------ */

.about-right {
    width: 100%;
    max-width: 42rem;
}


.about-form label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 0.5rem;

    padding-bottom: var(--pad-m);
}

/* INPUTS */

.about-form input,
.about-form textarea {
    width: 100%;

    background: transparent;

    border: 0.5px solid black;

    outline: none;

    padding:
        0.5rem;

    font-family: var(--main-font);

    resize: none;
}

/* TEXTAREA */

.about-form textarea {
    height: 10rem;
}

/* SUBMIT */

.form-submit {
    display: flex;
    justify-content: flex-end;
}

.about-form input[type="submit"] {
    width: auto;

    min-width: 5rem;

    background: black;
    color: white;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.about-form input[type="submit"]:hover {
    background: white;
    color: black;
}

.form-submit p {
    width: min-content;
}


/* ------------------------------    MEDIA Q       ------------------------------ */

/*DESKTOP RESPONSIVE*/
@media screen and (max-width: 1280px) {

    /* NAV */

.main-nav {
    padding: 1.5rem;
}

.nav-logo {
    width: 7rem;

    padding: 0.8rem;
}

.menu-links {
    width: 7rem;
}

.menu-links a {
    min-height: 1.8rem;
}

.artistas-dropdown li a {
    width: 7rem;
}
.single-artista {
    padding-left: 11.5rem;
}


.artista-sidebar {
    max-width: 24rem;
}



/* CONCIERTOS */

.conciertos-box {
    max-height: 15rem;
}

.bit-widget {
    font-size: var(--main-font) !important;
}

.bit-widget .bit-button {
    min-height: 2.5rem !important;

    font-size: var(--main-font) !important;
}

.artista-bottom-info {
    gap: 4rem;
}

.artista-layout {
    margin-top: -5.5rem;
}

/* ABOUT */

.about-page {
    gap: 8rem;
}
}

/*HOVER*/
@media screen and (min-width: 1024px) {

}


/*BIG SCREEN*/
@media screen and (min-width: 1920px) {

body,
html {
    font-size: 1.2rem;
}

.main-nav {
    padding: 2.5rem;
}

.nav-logo {
    width: 11rem;

    padding: 1.2rem;
}

.menu-links {
    width: 9rem;
}

.menu-links a {
    min-height: 2.2rem;
}

.artistas-dropdown li a {
    width: 9rem;
}

.artista-layout {
    padding-left: 4rem;
    margin-top: -8.1rem;
}

  .artista-image-wrap {
    width: auto; 
    height: auto;
  }
  .artista-image-wrap img {
    width: auto;
    height: 80vh;
  }

.artista-sidebar {
    width: 100%;

    height: 80vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    align-self: stretch;
    font-size: 1.2rem;
}

.bit-widget,
.bit-widget * {
    font-size: 1.2rem !important;
}

.about-page {
    align-items: center;
}

.about-left {
    max-width: 40vw;
    font-size: 1.2rem;
}

.about-right {
    max-width: 40vw;
    font-size: 1.2rem;
}

.about-image {
    width: auto;
}

.about-form input[type="submit"] {
    font-size: 1.2rem;
}

.site-footer {
    margin-top: 5rem;
}
}



/*IPAD RESPONSIVE*/
@media screen and (max-width: 1014px) and (min-width: 651px) {

    /**** GENERAL ****/

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    /* FOOTER */

    .site-footer {
        position: static;
        width: 100%;
        padding-bottom: var(--pad-l);
    }

    /* ARTISTAS */

    .single-artista {
        padding:  0 var(--pad-l);

        margin-top: 5rem;
    }

    .artista-layout {
        display: flex;

        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-end;
    }

    /* TITLE */

    .artista-title {
        font-size: 4rem;
    }

    /* IMAGE */

    .artista-image-wrap {
        width: min(58vw, 42rem);

        aspect-ratio: 4 / 5;

        height: auto;

        margin-right: 0;

        flex-shrink: 0;
    }

    .artista-image-wrap img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;
    }

    /* SIDEBAR */

    .artista-sidebar {
        width: 100%;
        padding-top: var(--pad-xxl);
        max-width: 100%;

        flex: none;

        gap: 4rem;
    }

    /* CONCERTS */

    .conciertos-box {
        max-height: 18rem;
    }

/* ABOUT */

.about-page {
    display: flex;

    flex-direction: column;

    gap: 5rem;

    padding: var(--pad-l);
}

/* LEFT */

.about-left {
    width: 100%;

    max-width: 100%;

    display: flex;
    flex-direction: column;

    gap: 4rem;
}

/* IMAGE */

.about-image {
    width: 100%;
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;

    max-width: 42rem;

    height: auto;

    display: block;
}

/* TEXT */

.about-text {
    max-width: 100%;

    font-size: 1.2rem;

    gap: 1.5rem;
}

/* RIGHT */

.about-right {
    width: 100%;

    max-width: 100%;
}

/* FORM */

.about-form {
    width: 100%;
}

.about-form input,
.about-form textarea {
    width: 100%;
}

.about-form textarea {
    min-height: 12rem;
}

.about-form input[type="submit"] {
    font-size: 1.2rem;
}



}


/*MOVILE RESPONSIVE*/
@media screen and (max-width: 650px) {

    .site-footer {
    padding: var(--pad-l);
}

    /* MENU */

    .mobile-menu-toggle {
    position: absolute;

    top: var(--pad-l);
    right: var(--pad-l);

    width: 2rem;
    height: 2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 0.2rem;

    z-index: 9999;

    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 80%;
    height: 2px;

    background: black;
}

    .nav-container {
        flex-direction: column;
    }

    .menu-links {
        display: none;
    }

    .nav-logo {
    width: 5rem;
    padding: 0.5rem;
}


.bg-3 {
    background-position: 6% center;
}

.menu-links.is-active {
    display: flex;
    border-left: 0.5px solid black;
}

.nav-container:has(.menu-links.is-active) .nav-logo {
    border-bottom: none;
}

.artistas-dropdown {
    position: relative;

    top: auto;
    left: auto;

    flex-direction: column;

    width: 100%;
}

.artistas-dropdown li a {
    width: 100%;
}

.artistas-dropdown li,
.artistas-dropdown li a {
    border-top: none !important;
}

.menu-links {
    width: calc(100vw - (var(--pad-l) * 2));
    font-size: 1.5rem;
}

.menu-links a,
.artistas-dropdown li a {
    min-height: 2.5rem;
}

/* FOOTER CONTENT */

.footer-left,
.footer-spacer,
.footer-right {
    width: auto;
    min-width: 0;
}


/* ARTISTAS */

.single-artista {
    padding: 0 var(--pad-l);
}

.artista-layout {
    display: flex;

    flex-direction: column;

    gap: 2rem;

    margin-top: 0;
}

/* HERO */

.artista-title-wrap {
    align-self: flex-end;
}

.artista-image-wrap {
    width: calc(100vw - 8rem);

    height: 28rem;

    margin-right: 0;
}

.artista-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* TITLE + IMAGE */

.artista-title-wrap,
.artista-image-wrap {
    display: inline-flex;
}

.artista-layout > .artista-title-wrap,
.artista-layout > .artista-image-wrap {
    align-self: flex-end;
}

.artista-layout {
    position: relative;
}

.artista-title-wrap {
    position: absolute;

    left: 0;
    bottom: calc(100% - 28rem);
}

/* ABOUT MOBILE */

.page-about main,
.about-page,
.about-container {
    display: flex;
    flex-direction: column;
}

.info-columns {
    flex-direction: column;
    gap: 1rem;
}

/* LOGO */

.about-logo,
.about-image,
.about-graffiti {
    order: 1;

    width: 100%;

    display: flex;
    justify-content: center;

    margin-top: 6rem;
    margin-bottom: 3rem;
}

.about-logo img,
.about-image img,
.about-graffiti img {
    width: 100%;
    max-width: 30rem;

    height: auto;
}

/* QUIENES SOMOS */

.about-text,
.about-content,
.about-description {
    order: 2;

    width: 100%;
}

/* FORM */

.about-contact,
.contact-form-wrap,
.contact-form {
    order: 3;

    width: 100%;

    margin-top: 3rem;
}

.contact-form input,
.contact-form textarea,
.wpcf7 input,
.wpcf7 textarea {
    width: 100%;
}

.contact-form textarea,
.wpcf7 textarea {
    min-height: 12rem;
}

.about-right form {
    padding-top: var(--pad-xxl);
}

}