/*
Theme Name:   The Groyne
Theme URI:    https://thegroyne.com
Description:  Tema para thegroyne.com, hijo de GeneratePress
Author:       Ruben Ulloa
Author URI:   https://thegroyne.com
Template:     generatepress
Version:      2.2.0
*/

/*--------------------------------------------------------------
1. VARIABLES Y BASE
--------------------------------------------------------------*/
:root {
    --color-background: #000000;
    --color-surface: #1e1e1e;
    --color-text: #e1e1e1;
    --color-text-strong: #ffffff;
    --color-accent: #ff4800;
    --color-meta: #888888;
    --font-body: "Source Sans Pro", -apple-system, sans-serif;
    --font-headings: "Roboto Condensed", sans-serif;
    --light-bg: #f0f2f5;
    --light-surface: #ffffff;
    --light-text: #333333;
    --light-text-strong: #000000;
    --light-accent: #007bff;
    --light-meta: #555555;
}

html {
    background-color: var(--color-background);
}

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-text-strong);
}

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

a:hover, a:focus {
    text-decoration: underline;
}

.grid-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/*--------------------------------------------------------------
2. ESTRUCTURA Y CONTENEDORES
--------------------------------------------------------------*/
.site-content, .sidebar .widget, .page-header, .comment-body {
    background-color: var(--color-surface);
}

#primary {
    flex-grow: 1;
    min-width: 0;
}

#right-sidebar {
    width: 300px;
    flex-shrink: 0;
}

.main-content-grid, #page-container {
    display: flex;
    gap: 30px;
}

.full-width-section {
    width: 100%;
    padding: 20px 0;
}
.note-box {width: 90%; background-color: #eeeeee;margin: 20px auto; padding: 10px;}
/*--------------------------------------------------------------
3. CABECERA, MENÚ Y PUBLICIDAD
--------------------------------------------------------------*/
.top-ad-banner {
    padding: 10px 0;
    text-align: center;
}
.ad-label {
    display: block; font-size: 10px; color: var(--color-meta); text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px; text-align: center;
}
.site-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid #333;}
.site-header .inside-header {
    display: flex; justify-content: space-between; align-items: center; padding: 20px;}
.site-branding .header-logo { width: 180px; height: auto; display: block; }
.custom-main-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.custom-main-menu ul li a {
    font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--color-text); opacity: 0.8; transition: opacity 0.2s ease;
}
.custom-main-menu ul li a:hover { opacity: 1; }
#thegroyne-top-ad .single  {max-height; 90px;}


/*--------------------------------------------------------------
4. PORTADA: HERO Y REVIEWS
--------------------------------------------------------------*/
.hero-section { background-color: var(--color-background); }
.featured-hero-flex { display: flex; gap: 10px; height: 500px; }
.hero-post-large { flex: 2; }
.hero-posts-small-column { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.hero-post-large, .hero-post-small {
    position: relative; background-size: cover; background-position: center; border-radius: 4px;
    overflow: hidden; display: flex; flex-direction: column; padding: 20px;
    text-decoration: none; transition: transform 0.2s ease-in-out; background-color: var(--color-surface);
}
.hero-post-large:hover, .hero-post-small:hover { transform: scale(1.02); z-index: 10; }
.hero-post-small { flex: 1; }
.hero-post-content { position: absolute; bottom: 20px; left: 20px; right: 20px; }
.hero-post-title { font-size: 32px; line-height: 1.2; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }
.hero-post-title-small { font-size: 16px; line-height: 1.3; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }

.reviews-section { background-color: var(--color-surface); border-top: 1px solid #333; border-bottom: 1px solid #333; }
.reviews-grid { display: flex; gap: 20px; }
.review-post { flex: 1; display: flex; flex-direction: column; }
.review-post-image-link img { border-radius: 4px; margin-bottom: 15px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.review-post-content { display: flex; flex-direction: column; flex-grow: 1; }
.review-post-title { font-size: 16px; line-height: 1.4; font-weight: 700; margin: 0 0 10px 0; flex-grow: 1; }
.review-post-meta { font-size: 12px; color: var(--color-meta); text-transform: uppercase; margin-top: auto; }


/*--------------------------------------------------------------
5. LISTADOS DE ARTÍCULOS (INDEX Y ARCHIVES)
--------------------------------------------------------------*/
.list-article { display: flex; align-items: stretch; gap: 20px; padding: 15px 0; border-bottom: 1px solid #333; }
.list-article-category {
    writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase;
    font-size: 12px; letter-spacing: 1px; color: var(--color-meta); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; padding: 0 20px;
    border-right: 1px solid #444; margin-right: 20px;
}
.list-article-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.list-article-title { font-size: 22px; line-height: 1.3; margin: 0 0 5px 0; }
.list-article-title a { color: var(--color-text-strong); }
.list-article-meta { font-size: 14px; color: var(--color-meta); }
.list-article-image { margin-left: auto; flex-shrink: 0; align-self: center; }
.list-article-image img { width: 150px; height: 150px; object-fit: cover; border-radius: 4px; }
.entry-title a:hover, .list-article-title a:hover { color: var(--color-accent); }


/*--------------------------------------------------------------
6. PAGINACIÓN Y FOOTER
--------------------------------------------------------------*/
.paging-navigation, .the-posts-navigation { margin-top: 40px; padding-top: 20px; border-top: 1px solid #333; }
.paging-navigation .nav-links { display: flex; justify-content: center; gap: 10px; }
.paging-navigation .page-numbers {
    background-color: var(--color-surface); color: var(--color-text); padding: 10px 15px;
    border-radius: 4px; text-decoration: none; border: 1px solid #333; transition: background-color 0.2s ease;
}
.paging-navigation .page-numbers.current, .paging-navigation .page-numbers:hover { background-color: var(--color-accent); color: var(--color-text-strong); border-color: var(--color-accent); }
.site-footer { background-color: var(--color-surface); padding: 20px 0; margin-top: 40px; border-top: 1px solid #333; }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.copyright-bar { font-size: 13px; color: var(--color-meta); }
.footer-social-links { display: flex; gap: 15px; }
.footer-social-links a svg { width: 18px; height: 18px; fill: var(--color-meta); transition: fill 0.2s ease; }
.footer-social-links a:hover svg { fill: var(--color-text-strong); }


/*--------------------------------------------------------------
7. TEMA CLARO PARA ENTRADAS (SINGLE POST)
--------------------------------------------------------------*/
body.single-post { background-color: var(--light-bg); }
body.single-post .site-content,
body.single-post .sidebar .widget { background-color: transparent; }
body.single-post .inside-article { background-color: var(--light-surface); }
body.single-post .site-header, body.single-post .site-footer { background-color: var(--color-surface); }
body.single-post .site-header a, body.single-post .site-footer a { color: var(--color-text); }
body.single-post .custom-main-menu ul li a:hover { color: var(--color-accent); }
body.single-post .footer-social-links a:hover svg { fill: var(--color-accent); }
body.single-post, body.single-post .inside-article, body.single-post .sidebar .widget { color: var(--light-text); }
body.single-post h1, body.single-post h2, body.single-post h3, body.single-post .entry-title, body.single-post .post-author-meta a { color: var(--light-text-strong); }
body.single-post a { color: var(--light-accent); }
body.single-post a:hover { color: #0056b3; }
body.single-post .entry-meta a, body.single-post .post-header-meta-cats a { color: var(--light-meta); }
body.single-post .post-dek { color: var(--light-text); border-left-color: var(--light-accent); }
body.single-post .sidebar .widget ul li { border-bottom-color: #eee; }
body.single-post .sidebar .widget ul li a { color: var(--light-text); }
body.single-post .paging-navigation, body.single-post .the-posts-navigation { border-top-color: #eee; }

/*--------------------------------------------------------------
8. LAYOUT DE ENTRADA INDIVIDUAL (SINGLE POST)
--------------------------------------------------------------*/
.single-post-hero { padding: 40px 0; }
.post-header-meta-cats a { margin-right: 15px; font-size: 12px; }
.single .entry-title { font-size: 48px; line-height: 1.1; margin-bottom: 30px; max-width: 80%; }
.post-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; }
.post-header-aside { position: sticky; top: 50px; }
.post-dek { font-size: 20px; line-height: 1.6; border-left: 3px solid var(--light-accent); padding-left: 20px; }
.post-author-meta { font-size: 14px; margin-top: 20px; }
.single-content-wrapper { max-width: 840px; margin: 40px auto; }
.entry-content { max-width: 100%; margin: 0; margin-left: 20%; }
.entry-footer-meta { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }

/*--------------------------------------------------------------
8. BOTONES DE COMPARTIR (VERSIÓN COMPLETA)
--------------------------------------------------------------*/
.post-sharing-links {
    margin: 40px 0;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 10px; /* Reducimos el espacio entre botones */
    flex-wrap: wrap; /* Permite que los botones bajen en pantallas estrechas */
}
body.home .post-sharing-links, body.archive .post-sharing-links {
    border-top-color: #333;
}

.sharing-label {
    font-family: var(--font-headings);
    text-transform: uppercase;
    font-size: 14px;
    color: var(--light-meta);
    font-weight: 700;
    margin-right: 5px;
}
body.home .sharing-label, body.archive .sharing-label {
    color: var(--color-meta);
}

.share-button {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.share-button:hover {
    transform: scale(1.05);
    opacity: 0.9;
    text-decoration: none !important;
}

.share-twitter { background-color: #1DA1F2; }
.share-facebook { background-color: #1877F2; }
.share-whatsapp { background-color: #25D366; }
.share-threads { background-color: #000000; border: 1px solid #fff; } /* Estilo para Threads */
.share-copy-link { background-color: #6c757d; } /* Un gris para el botón de copiar */

/*--------------------------------------------------------------
9. SIDEBAR Y WIDGETS
--------------------------------------------------------------*/
.sidebar .widget { padding: 20px; }
.widget-title { font-size: 20px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; color: var(--color-text-strong); }
body.single-post .widget-title { color: var(--light-text-strong); }
.sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget ul li { padding: 8px 0; border-bottom: 1px solid #333; }
.sidebar .widget ul li:last-child { border-bottom: none; }
.sidebar .widget ul li a { color: var(--color-text); }

/*--------------------------------------------------------------
10. RESPONSIVE DESIGN
--------------------------------------------------------------*/
@media (max-width: 1024px) {
    .featured-hero-flex { flex-direction: column; height: auto; }
    .hero-post-large { min-height: 400px; }
    .hero-posts-small-column { flex-direction: row; }
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
    #page-container { flex-direction: column; }
    #right-sidebar { width: 100%; }
}
@media (max-width: 782px) {
    .site-header .inside-header { flex-direction: column; gap: 20px; }
    .custom-main-menu { display: none; }
    .top-ad-banner, .reviews-section { display: none; }
    #right-sidebar { display: none; }
    .main-content-grid, #page-container { flex-direction: column; gap: 0; }
    .post-header-grid { grid-template-columns: 1fr; }
    .post-header-aside { position: static; }
    .single .entry-title { font-size: 36px; max-width: 100%; }
    .single-content-wrapper { max-width: 100%; padding: 0 20px; margin-top: 20px; }
	.entry-content { margin: 0;}
	#thegroyne-top-ad {height; 90px;}

}
@media (max-width: 480px) {
    .hero-posts-small-column { flex-direction: column; }
    .hero-post-title, .hero-post-title-small { font-size: 18px !important; }
    .hero-post-large .hero-post-title { font-size: 28px !important; }
    .reviews-grid { grid-template-columns: 1fr; }
    .list-article { flex-direction: column; align-items: flex-start; }
    .list-article-category { display: none; }
    .list-article-image { margin-top: 15px; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-left: 0; }
    .list-article-image img { width: 100%; height: auto; }
}