/*
Theme Name: Marta theme
Theme URI:
Author: Marta Arévalo Prieto
Author URI: https://marevaloprieto.ieti.site/
Description: Tema exclusivo para el super blog para los más flikis de juegos de cartas
Tags: Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: martaTheme is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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

/* ----------- CSS general ----------------------- */

code{
	background: rgb(250, 173, 185);
	border: 1px solid yellow;
    color:black
}

:root{
	/* colores primarios*/
	--blueDark: #232526; /* para el header y el contenedor principal*/
	--blueNavi: #353F40; /* para el nav y el aside */
	--blueOcean: #444DF2;
	--blueLight: #07B0F2;
	--blueNeon: #05DBF2;
	--purpleDark: #730255;
	--purple: #660273;
	--violet: #6241D9;
	--pink: #F2B3E1;

	--background: #0D0D0D; /* para el fondo entero */

	/* colores de texto*/
	--textPrimari: #e0e0e0; /* text normal */
	--textSecondary: #A6A6A6; /* text no tant important*/
	--textGold: #F2F2F2; /* text resaltat o components resaltats*/

	--borderColor: #262626; /* */

	/* tipografía*/
	--titleFamily: 'InterDisplay', sans-serif; /* títulos */
	--normalFamily: 'Inter', system-ui, sans-serif; /* lletra normal */

	/* medidas*/
	--bigTitle: 700;
	--mediumTitle: 25px;
	--normalText: 16px;

	--container-max-width: 1200px;
	--border-radius: 8px;
}

html, body{
	background: var(--background);
	color: var(--textPrimari);

	font-family: var(--normalFamily);
	font-size: var(--normalText);
	line-height: 1.6;
}

body{ /* no cal, es por si se ve la página al 100 de la vista o no*/
	max-width: var(--container-max-width); 
	margin:0 auto;
	padding: 0 20px;
}

/* MARK: GENERAL */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--normalFamily);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--textGold);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

a {
    text-decoration: none;
    color: var(--textPrimari);
    position: relative;
    display: inline-block;
}

a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--textPrimari);
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

a:hover::after {
    width: 100%;
    left: 0;
}

/* MARK: HEADER*/
#header{
	display: flex;
	align-items: center;

	gap: 20px;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: var(--border-radius);

	background-color: var(--blueDark);
}

#header .custom-logo-link {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

/* para que no haga el estilo de al línea debajo */
#header a.custom-logo::after {
    content: none;
}

#header .custom-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#header .site-branding {
    flex-grow: 1;
}

#header .site-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;

	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--textGold);
}

#header .site-description {
	font-size: 1rem;
    color: var(--textSecondary);
}

/* MARK: NAVIGATION*/
#navigation {
    padding: 15px 20px;
    margin-bottom: 20px;

	border-radius: var(--border-radius);
	background: var(--blueNavi);
}

#navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* para que no haga el estilo de al línea debajo */
#navigation #menu-menu-principal a::after {
    content: none;
}

#navigation a {
    padding: 8px 16px;
    border-radius: var(--border-radius);

	text-decoration: none;
	color: var(--textPrimari);
    transition: all 0.3s ease;
}

#navigation a:hover {
    background: var(--textGold);
    color: var(--blueDark);
}

/* MARK: SEARCH NAV*/
.searchform {
    display: flex;
    
    margin-bottom: 20px;
	gap: 10px;
}

.searchform input[type="text"] {
    padding: 8px 2px;

    border: none;
    border-radius: var(--border-radius);

	color: var(--textPrimari);
    background: rgba(255, 255, 255, 0.1);
}

.searchform input[type="submit"] {
    padding: 8px 16px;

    border: none;
    border-radius: var(--border-radius);

	color: var(--blueDark);
    background: var(--textGold);
    
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.searchform input[type="submit"]:hover {
    background: var(--textPrimari);
}

/* MARK: MAIN*/
.container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

main {
    padding: 30px;
    border-radius: var(--border-radius);

	background: var(--blueDark);
}

.post img.wp-post-image,
.post img.attachment-large,
.post img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

/* el container sin sidebar */
.container:has(#page-sidebarless) {
    display: block;
    width: 100%;
    max-width: 100%;
}

#page-sidebarless {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 30px;
    border-radius: var(--border-radius);
    background: var(--blueDark);
}

/* MARK: SIDEBAR*/
aside {
    padding: 20px;

    border-radius: var(--border-radius);
	background: var(--blueNavi);
}

aside h2 {
    padding-bottom: 10px;
    margin-bottom: 20px;

	border-bottom: 2px solid var(--textGold);
	color: var(--textGold);
}

aside ul li {
    margin-bottom: 10px;
}

aside a {
    text-decoration: none;
	color: var(--textPrimari);

	transition: color 0.3s ease;
}

aside a:hover {
    color: var(--textGold);
}

/* MARK: SECTION - últimos post*/
.home section {
    padding: 30px;
    margin-top: 40px;
	
	border-radius: var(--border-radius);
	background: var(--blueNavi);
}

.home section h3 {
    margin-bottom: 30px;
}

.home section ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;

	margin-bottom: 20px;
}

.home section article {
    display: flex;
    flex-direction: column;

	margin-bottom: 30px;
	padding: 10px;
	height: 100%;
	
	border-radius: var(--border-radius);
	background: rgba(255, 255, 255, 0.05);

	transition: transform 0.3s ease;
}

.home section article:hover {
    transform: translateY(-5px);
}

.home section article img.wp-post-image {
	width: 100%;
    height: auto;
	margin-bottom: 1rem;

    border-radius: var(--border-radius);
}


/* MARK: ARTICLE - los post*/
#single article {
    padding: 20px;
    margin-bottom: 30px;

	border-radius: var(--border-radius);
	background: rgba(255, 255, 255, 0.05);
}

#single article img.wp-post-image {
    width: 100%;
    height: auto;
	margin-bottom: 1rem;

    border-radius: var(--border-radius);
}

/* MARK: COMMENTS*/
#comments { /* título*/
    margin-top: 40px;
    padding-top: 20px;

    border-top: 2px solid var(--textPrimari);
}

.commentlist .comment { /* cada comentario y su hijo*/
    padding: 20px;
    margin-bottom: 20px;

	border-radius: var(--border-radius);
	background: rgba(255, 255, 255, 0.05);
}

.commentlist .comment a{
	text-decoration: none;
	color: var(--textSecondary);
}

.commentmetadata a{
    cursor:pointer;
}

.commentmetadata a::after {
    content: none;
}

.commentlist .comment .reply{
	margin-bottom: 10px;
}

.commentlist .comment .comment-author img{
	margin-right: 10px;
}

.post-navigation {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--textPrimari);
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    padding: 1.25rem;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.post-navigation a {
    display: block;
    text-decoration: none;
    color: var(--textPrimari);
}

.post-navigation a::after {
    display: none;
}

.post-navigation .meta-nav {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--textSecondary);
    margin-bottom: 0.5rem;
}

.post-navigation .post-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--textGold);
    line-height: 1.4;
}

.post-navigation .nav-next {
    text-align: right;
}

@media (max-width: 640px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .post-navigation .nav-next {
        text-align: left;
    }
}


/* MARK: FORM COMMENT*/
#respond {
    margin-top: 40px;
    padding: 20px;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.05);
}

#respond form {
    max-width: 100%;
    box-sizing: border-box;
}

#respond .comment-form-comment,
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-cookies-consent {
    margin-bottom: 20px;
    max-width: 100%;
    box-sizing: border-box;
}

#respond textarea,
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--borderColor);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.1);
    color: var(--textPrimari);
    font-family: var(--normalFamily);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

#respond textarea:focus,
#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond input[type="url"]:focus {
    outline: none;
    border-color: var(--textGold);
    background: rgba(255, 255, 255, 0.15);
}

#respond label {
    display: block;
    margin-bottom: 5px;
    color: var(--textPrimari);
    font-family: var(--normalFamily);
    font-size: 0.9rem;
}

#respond .form-submit {
    margin-top: 30px;
    text-align: right;
}

#respond .form-submit input[type="submit"] {
    padding: 12px 24px;
    border: 2px solid var(--textGold);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--textGold);
    font-family: var(--normalFamily);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#respond .form-submit input[type="submit"]:hover {
    background: var(--textGold);
    color: var(--blueDark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 242, 242, 0.2);
}

#respond .form-submit input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

#respond .comment-form-cookies-consent label {
    display: inline;
    margin-left: 10px;
}


/* MARK: archive .php*/



/* MARK: FOOTER*/
#footer {
    padding: 40px 20px;
    margin-top: 40px;
    border-radius: var(--border-radius);
    background: var(--blueDark);
    color: var(--textPrimari);
}

#footer p {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--textSecondary);
}

#footer p a {
    color: var(--textGold);
    font-weight: 500;
    transition: color 0.3s ease;
}

#footer p a:hover {
    color: var(--blueNeon);
}

#footer nav {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#footer .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer .menu li {
    margin: 0;
}

#footer .menu a {
    font-size: 0.875rem;
    color: var(--textSecondary);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
}

#footer .menu a:hover {
    color: var(--textGold);
    background: rgba(255, 255, 255, 0.05);
}

#footer .menu a::after {
    display: none;
}

/* MARK: 404 ERROR PAGE */
.error404 main#page-sidebarless {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--blueDark);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
}

.error404 #page-sidebarless h1 {
    font-size: 2.5rem;
    color: var(--textGold);
    margin-bottom: 2rem;
    line-height: 1.2;
    animation: fadeIn 0.8s ease-out;
}

.error404 #page-sidebarless p {
    font-size: 1.2rem;
    color: var(--textPrimari);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error404 #page-sidebarless a {
    color: var(--blueOcean);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.error404 #page-sidebarless a:hover {
    color: var(--blueNeon);
}


/* MEDIA QUERYS*/
@media (max-width: 768px) {
	.container {
		grid-template-columns: 1fr;
	}

	#navigation ul {
		flex-direction: column;
	}

	.home section ul {
		grid-template-columns: 1fr;
	}

    #footer .menu {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    #footer .menu a {
        padding: 0.75rem 1.5rem;
        width: 100%;
        text-align: center;
    }
}