/**
 * Theme Name: Monkey Edu Theme
 * Version:           1.0.0
 * Author:            Alberto Rodríguez
 * Tested up to:      6.7.2
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.0.1/css/all.min.css");

:root {
    --y-50: #fdf6e7;
    --y-75: #f6dc9c;
    --y-100: #f2cd73;
    --y-200: #edb837;
    --y-300: #e9a90e;
    --y-400: #a3760a;
    --y-500: #8e6709;
    --fill-color: #FDFDFD;
    --banner-black: #1E1E1E;
    --time-color: #808080;
    --footer-color: #F0F4F5;
}

body{
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    background-color: var(--fill-color);
}

body .content-stretch p{
    line-height: 1.5em;
}

footer {
    position: relative;
    display: block;
    width: 100%;
    background-color: var(--footer-color);
    padding: 2em 0;
}

header .logo-container{
    text-align: center;
    width:100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background-color: white;
}
.title-container{
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    min-height: 240px;
    background: url("/wp-content/themes/monkey-edu-theme/images/back-principal.png") no-repeat 0 0;
    background-size: cover;
}
.title-container > div {position:relative;top:4.5em;}

.title-container h1 {
    position: relative;
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}
.title-container .category a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.title-container .category a:hover {
    text-decoration: underline;
}

.title-container h2 {
    position: relative;
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    margin-top: 0.5em;
}

h4{
    position: relative;
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 0;
}

h5{
    margin: 0;
    font-size: 1em;
}

footer .footer-menu li a{
    position: relative;
    display: block;
    text-decoration: none;
    color: black;
    margin-top: 1em;
}

footer .footer-menu li a:hover{
    text-decoration: underline;
}

footer .footer-menu li a::before{
    font-family:"Font Awesome 7 Free";
    content: '\f08e';
    margin-right: 0.5em;
    font-weight: var(--fa-style,900);
    color: var(--y-300);
}

.banner-promo {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.5em 1em;
    text-align: center;
    background: var(--banner-black);
    color: white;
}

.banner-promo .btn{margin-left:2em;}

.btn, a.wp-block-latest-posts__read-more, form input[type="submit"]{
    position: relative;
    display: inline-block;
    background: var(--y-200) !important;
    color: black;
    padding: 0.5em 4em !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer !important;
    border: none;
}

.btn:hover, a.wp-block-latest-posts__read-more:hover, form input[type="submit"]:hover{
    background: var(--y-300) !important;
}

a.wp-block-latest-posts__read-more {
    position: relative;
    display: block;
    width: auto;
    margin-top: 1.5em;
    text-align: center;
}

.btn i.fas{
    position: absolute;
    right:5px;
}

.content {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: block;
    padding: 3em 0;
}

.content-stretch{
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    display: block;
    padding: 3em 0;
}

.wp-block-latest-posts__list, .articles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-block-latest-posts__list li, .articles li {
    flex: 1 1 calc(33.333% - 20px); /* 3 columnas */
    box-sizing: border-box;
    padding: 1.5em;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
}

.wp-block-latest-posts__list li a.wp-block-latest-posts__post-title, .articles li a {
    font-size: 1.2em;
    font-weight: 700;
    text-decoration: none;
    color: black;
}

.wp-block-latest-posts__list li a.wp-block-latest-posts__post-title:hover, .articles li a:hover{
    text-decoration-line: underline;
}

.wp-block-latest-posts__list li time, .articles li time{
    color: var(--time-color);
    margin-top: 0.5em;
    position: relative;
    display: block;
    font-size: 0.9em;
}

.title-container time{
    color: #444;
    font-size: 0.9em;
}

.title-container a.tag-link {
    color: #444;
    font-size: 1em;
    text-decoration: none;
    margin-right: 0.5em;
    font-weight: bold;
    font-family: 'Ubuntu Mono';
}

.title-container a.tag-link::before{
    content:'#';
    margin-right: 0.25em;
}

.title-container a.tag-link:hover {
    text-decoration: underline;
}

time::before {
    font-family:"Font Awesome 7 Free";
    content: '\f133';
    margin-right: 0.25em;
}

.w-50 {
    width: calc(50% - 2px);
    position: relative;
    display: inline-block;
    vertical-align: top;
}

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

footer .text-right img{
    display: block;
    margin-left: auto;
    margin-top: 0.75em;
}

footer .footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .wp-block-latest-posts__list li {
        flex: 1 1 100%;
    }
    .w-50 {
        width: 100%;
    }
}

form {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 350px;
    text-align: left;
}

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

form ul li{
    margin-top: 1em;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="submit"]{
    width: 100%;
    line-height: 1.5em;
    padding: 0.25em 0.5em;
    font-size: 1em;
    border: 1px solid #999;
    border-radius: 4px;
    margin-top: 0.5em;
    font-family: Ubuntu, Arial, sans-serif;
}

form input[type="submit"] {
    margin-top: 1em;
    border: none;
}

form input[type="checkbox"] {
    width: auto;
}

form label{
    position: relative;
    display: block;
    font-size: 0.9em;
    text-align: left;
}

form input[type="checkbox"]+label {
    display: inline-block;
}

.pms-account-navigation {
    position: relative;
    display: block;
}

.pms-account-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pms-account-navigation ul li{
    position: relative;
    display: inline-block;
    width: auto;

    margin-right: 0.25em;

}

.pms-account-navigation li a{
    position: relative;
    display: block;
    padding: 0.5em 1em;
    color: black;
    text-decoration: none;
    font-size: 1em;
    border-bottom: 2px solid var(--time-color);
}

.pms-account-navigation li a:hover{
    background: #EFEFEF;
}

a.pms-account-navigation-link--active {
    border-bottom: 2px solid var(--y-300)!important;
}

table {
    width: 100%;
    margin-top: 1em;
}

table thead tr {
    background: var(--y-200);
}

table thead tr th, table tbody tr td  {
    padding: 0.5em 1em;
    text-align: left;
}

table.pms-account-subscription-details-table {
    width: auto;
}

table.pms-account-subscription-details-table tbody tr td:first-child {
    font-weight: bold;
}

.breadcrumb,.breadcrumbs {
    margin-bottom: 1em;
    color: var(--y-400);
    font-size: 0.9em;
}

.breadcrumb > span,.breadcrumbs > span{margin-right: 0.25em;margin-left: 0.25em}
.breadcrumb > span:first-child,.breadcrumbs > span:first-child{margin-left: 0}
.breadcrumb span.current-item,.breadcrumbs span.current-item{color: black!important}

.breadcrumb a,.breadcrumbs a {
    color: var(--y-400);
    text-decoration: none;
}

.breadcrumb a:hover, .breadcrumbs a:hover{
    text-decoration: underline;
}

hr{margin: 2em 0;}
.wp-block-separator{border-top: 1px solid;}

code {
	background: #ECECEC;
	border-radius: 4px;
	font-family: 'Ubuntu Mono';
	padding: 0.25em;
}

pre code {
    
    padding: 1em;
    line-height: 1.5em;
    
}