/*
    Theme Name: Gym World
    Theme URI: 
    Author: Regynald Zambrano
    Author URI: https://x.com/develop_rz
    Description: Theme Diseñado para el GymWorld
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: Gym, gimnasio, flexbox, css grid, mobile first
    Text Domain: gymworld
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Staatliches&display=swap');

:root {
    /* Fonts */
    --main-font: "Raleway", sans-serif;
    --heading-font: "Staatliches", sans-serif;

    /* Colors */
    --primary-color: #ff3d00;
    --dark-gray: #2f2e2e;
    --light-gray: #ebebeb;
    --white: #ffffff;
    --black: #000000;

}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    /* 1rem = 10px */
}

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


body {
    font-family: var(--main-font);
    font-size: 1.8rem;
    line-height: 2;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    margin: 0 0 5rem 0;
    line-height: 1.2;
}

h1 {
    font-size: 6rem;
}

h2 {
    font-size: 4.8rem;
}

h3 {
    font-size: 3.6rem;
}

h4 {
    font-size: 2.4rem;
}

/* Globals */

p {
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

hr {
    border: 1px solid var(--light-gray)
}

.container {
    width: min(90%, 120rem);
    margin: 0 auto;
}

.centered-content {
    width: min(90%, 80rem);
}

/* Utilities */

.text-center {
    text-align: center;
}

.text-primary {
    color: var(--primary-color);
}

.text-white {
    color: var(--white);
}

.section {
    padding: 5rem 0;
}

.my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.button-container {
    display: flex;
    justify-content: end;
}

.form-submit .submit,
.button {
    display: block;
    padding: 1rem 3rem;
    color: var(--black);
    background-color: var(--white);
    flex: 1;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: .5rem;
    margin: 1rem 0;
    border: none;
    width: 100%;
}

@media (min-width: 768px) {
    .button {
        display: inline-block;
        flex: 0 0 auto;
        width: auto;
    }
}

.button-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Header */

body.home .header {
    padding-top: 2rem;
    height: auto;
    min-height: 70rem;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 768px) {
    body.home .header {
        height: 100vh;
        max-height: 90rem;
    }
}

.header {
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 2rem 0;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
    }
}

.tagline {
    color: var(--white);
    margin-top: 5rem;
}

@media (min-width: 768px) {
    .tagline {
        margin-top: 15rem;
    }
}

.tagline p {
    font-size: 2rem;
}

.ml2 {
    font-weight: 900;
    font-size: 3.5em;
}

.ml2 .letter {
    display: inline-block;
    line-height: 1em;
}

@media (min-width: 992px) {
    .fixed-top {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background-color: var(--dark-gray);
        padding: 1rem 5rem;
        height: 10rem;
        z-index: 100;
        transition: background-color 300ms ease-in-out;
    }

    .fixed-top .img-logo {
        width: 12rem;
    }
}

/* .menu-principal {
    display: none;
} */

.burger:hover {
    cursor: pointer;
}

@media (min-width: 768px) {
    .burger {
        display: none;
    }
}

.menu-container {
    opacity: 0;
    max-height: 0;
    transition-delay: 100ms, 300ms;
    transition-property: opacity, max-height;
    transition-timing-function: ease-in-out;
    transition-duration: 300ms;
}

@media (min-width: 768px) {
    .menu-container {
        all: unset;
    }
}

.show {
    opacity: 1;
    max-height: 35rem;
    transition-delay: 100ms, 300ms;
    transition-property: max-height, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 300ms;
}

@media (min-width: 768px) {
    .menu-principal {
        display: block;
    }

    .menu-principal .menu {
        display: flex;
    }
}

.menu-principal a {
    font-family: var(--heading-font);
    display: block;
    text-align: center;
    color: var(--white);
    font-size: 2.2rem;
    padding: .5rem 2rem;
}



@media (min-width: 768px) {
    .menu-principal a {
        position: relative;
        z-index: 1;
    }

    .menu-principal .current_page_item {
        border-bottom: 3px solid var(--primary-color);
    }

    .menu-principal a::before,
    .menu-principal a::after {
        position: absolute;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        background-color: var(--primary-color);
        z-index: -1;
        transform: scaleX(0);
        transition: transform .6s;
    }

    .menu-principal a::before {
        top: 0;
        transform-origin: left;
    }

    .menu-principal a::after {
        top: 50%;
        transform-origin: right;
    }

    .menu-principal a:hover::before {
        transform: scaleX(1);
    }

    .menu-principal a:hover::after {
        transform: scaleX(1);
    }
}

.featured-image {
    margin-bottom: 3rem;
}

/* Footer */

.footer .menu-principal a {
    color: var(--black);
    text-align: center;
    font-size: 2.4rem;
    padding: 0 1rem;
}

.footer-content {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.footer .menu-principal a::before,
.footer .menu-principal a::after {
    display: none;
}

.copyright {
    text-align: center;
    font-family: var(--heading-font);
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
}

@media (min-width: 768px) {
    .copyright {
        font-size: 2.4rem;
        margin: 0;
    }
}

/* Clases */

.grid-list {
    margin-top: 4rem;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .grid-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .7));
    position: relative;
    overflow: hidden;
}

/* Categories in Cards */
.card .post-categories {
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: flex;
    gap: 2rem;
}

.card .post-categories li {
    background-color: var(--primary-color);
    padding: .5rem 1rem;
    border-radius: .5rem;
}

.card .post-categories a {
    color: var(--white);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.6rem;
}

.card:hover img {
    transform: scale(1.1);
}

.card img {
    display: block;
    position: relative;
    z-index: -1;
    height: 40rem;
    object-fit: cover;
    transition: transform 300ms ease;
}

.card .content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem;
}

.card .content h3,
.card .content p,
.card .content .meta a {
    color: var(--white);
}

.card .content h3 {
    margin: 0;
}

.card .meta {
    font-size: 1.4rem;
    font-weight: 700;

}

.card .meta span {
    color: var(--primary-color);
}

/* Sidebar */

@media (min-width: 768px) {
    .with-sidebar {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
    }
}

.class-info {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
}

.classes-sidebar li {
    border-bottom: 1px solid var(--light-gray);
    padding: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

.classes-sidebar li:last-of-type {
    border-bottom: none;
}

.classes-sidebar li .class-content h3 {
    margin: 0;
    font-size: 2.6rem;
}

.classes-sidebar li .class-content a {
    color: var(--primary-color);
}

.classes-sidebar li .class-content p {
    font-size: 1.2rem;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 300px);
    gap: 2rem;

}

@media (min-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }
}

.image-gallery li:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
}

.image-gallery li:nth-child(6) {
    grid-column: 1 / 2;
    grid-row: 4 / 6;
}

@media (min-width: 768px) {
    .image-gallery li:nth-child(4) {
        grid-column: 4 / 5;
        grid-row: 1 / 3;
    }

    .image-gallery li:nth-child(6) {
        grid-column: 2 / 3;
        grid-row: 2 / 4;
    }

}

.image-gallery li img {
    height: 300px;
    object-fit: cover;

}

.image-gallery li:nth-child(4) img,
.image-gallery li:nth-child(6) img {
    height: 620px;
}

/* meta info */
.meta-info {
    background-color: var(--light-gray);
    padding: 2rem;
}

@media (min-width: 992px) {
    .meta-info {
        display: flex;
        justify-content: space-between;
    }


}

.meta-info p,
.meta-info a {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black);
}

.meta-info span {
    color: var(--primary-color);
}

.meta-info .category {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.meta-info .post-categories {
    display: flex;
    gap: 1rem;
}

/* Contact Form */


.wpcf7-form label {
    font-weight: 700;
}

.wpcf7-form .wpcf7-form-control {
    width: 100%;
    border: 1px solid var(--light-gray);
    padding: 1rem;
}

.wpcf7-form .wpcf7-submit {
    background-color: var(--primary-color);
    font-size: 2rem;
    font-family: var(--heading-font);
    color: var(--white);
    cursor: pointer;
}

.wpcf7-form .wpcf7-not-valid-tip {
    background-color: rgb(200, 6, 6);
    color: var(--white);
    padding: .5rem;
    margin: .5rem 0;
    display: block;
    font-size: 1.4rem;
}

.wpcf7-form .wpcf7-spinner {
    display: block;
    margin: 2rem auto 0 auto;
    background-color: var(--primary-color);
    opacity: 1;
}

.mapa {
    margin-bottom: 5rem;
}

/* Social Networks */

/* Redes Sociales */
.social-media-section {
    text-align: center;
    padding: 4rem 0;
    background-color: var(--light-gray);
    margin-bottom: 5rem;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--heading-font);
    font-size: 2.4rem;
    color: var(--dark-gray);
    transition: all 0.3s ease;
}

.social-link i {
    font-size: 3rem;
    color: var(--primary-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-link:hover i {
    transform: scale(1.2);
    color: var(--dark-gray);
}

.social-link:hover span {
    color: var(--primary-color);
}

/* Pagina Principal */

.welcome p {
    max-width: 80rem;
    margin: 0 auto;
}

.areas {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .areas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .areas {
        grid-template-columns: repeat(4, 1fr);
    }
}

.area {
    height: 25rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area::after {
    content: '';
    background-image: linear-gradient(rgb(0 0 0 / .75), rgb(0 0 0 / .75));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.area img {
    height: 25rem;
    object-fit: cover;
}

@media (min-width: 768px) {

    .area,
    .area img {
        height: 30rem;
    }
}

.area p {
    position: absolute;
    color: var(--white);
    z-index: 2;
    font-weight: 700;
}

@media (min-width: 768px) {
    .area p {
        opacity: 0;
        transition: opacity .5s ease-out;
    }

    .area:hover p {
        opacity: 1;
    }
}


/* Instructores */

.instructor {
    margin: 2rem 0;
    border-bottom: 1px solid var(--light-gray);
}

.instructor:last-of-type {
    border-bottom: none;
}

@media (min-width: 992px) {
    .instructor {
        position: relative;
    }
}

.instructor .content {
    padding: 3rem;
}

@media (min-width: 992px) {
    .instructor .content {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgb(0 0 0 / .75);
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--white);
        opacity: 0;
        transition: opacity .5s ease-out;
        transition-delay: .2s;
    }

    .instructor .content:hover {
        opacity: 1;
    }
}

.instructor h3 {
    margin-bottom: 2rem;
}

.instructor .especialidad {
    margin-top: 2rem;
}

.instructor img {
    height: 40rem;
    object-fit: cover;
}

.instructor .etiqueta {
    background-color: var(--primary-color);
    color: var(--white);
    text-transform: uppercase;
    font-family: var(--heading-font);
    margin-right: 2rem;
    border-radius: .5rem;
    padding: .5rem 2rem;
}

.instructor .etiqueta:last-of-type {
    margin-right: 0;
}

/* Testimoniales */

.testimonials {
    background: linear-gradient(rgb(0 0 0 / .75),
            rgb(0 0 0 / .75)), url(img/testimonial-bg.jpg);
    background-size: cover;
    background-position: center center;
    padding: 12rem 0;
}

.testimonials-container {
    width: min(95%, 80rem);
    margin: 0 auto;
}

.testimonial {
    color: var(--white);
}

.testimonial blockquote {
    position: relative;
    padding-left: 12rem;
}

.testimonial blockquote::before {
    content: '';
    position: absolute;
    background-image: url(img/quote.svg);
    background-repeat: no-repeat;
    width: 10rem;
    height: 9rem;
    top: 0;
    left: 0;
}

.testimonial-footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 768px) {
    .testimonial-footer {
        justify-content: flex-end;
    }
}

.testimonial-footer img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

.testimonial-footer p {
    font-weight: 700;
    color: var(--primary-color);
}

/* Formularios (Forms) */

.comments {
    width: min(95%, 60rem);
    margin: 5rem auto 0 auto;
}

.comment-reply-title {
    color: var(--primary-color);
    text-align: center;
}

.logged-in-as a {
    color: var(--primary-color);
}

.comment-form-comment label {
    font-weight: 700;
    margin: 2rem 0;
    display: block;
}

.comments input[type="text"] ,
.comment-form-comment textarea {
    border: 1px solid var(--light-gray);
    width: 100%;
    padding: 1rem;
}

.form-submit .submit {
    background-color: var(--primary-color);
    color: var(--white);
}

.comments input[type="text"] {
    margin: .5rem 0;
}

.comments-list .comment {
    background-color: var(--light-gray);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: .5rem;
}

.comments-list a {
    color: var(--primary-color);
}

.comments-list cite {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
}

.comments-list .children .comment {
    background-color: var(--white);
    margin: 2rem 0;
}

/* Pagination */

.pagination .screen-reader-text {
    visibility: hidden;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.nav-links a {
    font-size: 1.4rem;
    color: var(--primary-color);
    font-weight: 700;
    padding: .5rem;
}

.nav-links .current {
    font-size: 1.4rem;
    padding: .5rem;
}