/*
 * pequenoscompis.es — Personalizaciones CSS para Kadence Theme
 * Editar este archivo en el repositorio: plugins/pc-custom-styles/css/custom.css
 * Se despliega automáticamente con git push nicalia master
 */

/* ============================================================
   PALETA DE COLOR — Cálida y cercana, orientada a mascotas
   ============================================================ */
:root {
    --pc-brand:          #3a7d44;   /* verde bosque — transmite naturaleza */
    --pc-brand-dark:     #2d6235;
    --pc-brand-light:    #e8f5eb;
    --pc-accent:         #f4a225;   /* naranja cálido — energía, alegría */
    --pc-accent-dark:    #d4891a;
    --pc-text:           #2c2c2c;
    --pc-text-soft:      #555;
    --pc-bg:             #fafafa;
    --pc-border:         #e0e0e0;
    --pc-white:          #ffffff;
    --pc-radius-sm:      6px;
    --pc-radius:         10px;
    --pc-radius-lg:      16px;
    --pc-shadow:         0 2px 16px rgba(0,0,0,.07);
    --pc-shadow-hover:   0 6px 24px rgba(0,0,0,.12);
    --pc-transition:     .22s ease;
}

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */
body {
    color: var(--pc-text);
    background-color: var(--pc-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    color: var(--pc-text);
}

p { line-height: 1.75; }

/* Links — forzamos color en todos los estados para evitar azul/morado del navegador */
a,
a:link,
a:visited {
    color: var(--pc-brand);
    transition: color var(--pc-transition);
    text-decoration-color: transparent;
}
a:hover,
a:focus {
    color: var(--pc-brand-dark);
    text-decoration-color: var(--pc-brand-dark);
}

/* Links dentro del contenido del artículo — subrayado sutil */
.entry-content a,
.entry-content a:visited {
    color: var(--pc-brand);
    text-decoration: underline;
    text-decoration-color: rgba(58,125,68,.35);
    text-underline-offset: 3px;
}
.entry-content a:hover {
    color: var(--pc-brand-dark);
    text-decoration-color: var(--pc-brand-dark);
}

/* ============================================================
   HEADER — Más limpio y con identidad propia
   ============================================================ */
.site-header,
#masthead {
    background: var(--pc-white) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo */
.site-branding .custom-logo,
.site-header .site-logo img {
    max-height: 56px;
    width: auto;
}

/* ============================================================
   NAVEGACIÓN PRINCIPAL
   ============================================================ */

/* Menú desktop */
.main-navigation ul li a,
.kadence-navigation ul li a,
#site-navigation ul li a {
    font-size: .95rem;
    font-weight: 600;
    color: var(--pc-text) !important;
    padding: .5em 1em;
    border-radius: var(--pc-radius-sm);
    transition: background var(--pc-transition), color var(--pc-transition);
    text-decoration: none;
}

.main-navigation ul li a:hover,
.kadence-navigation ul li a:hover,
#site-navigation ul li a:hover {
    background: var(--pc-brand-light);
    color: var(--pc-brand) !important;
}

/* Elemento activo */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.kadence-navigation ul li.current-menu-item > a {
    color: var(--pc-brand) !important;
    border-bottom: 2px solid var(--pc-brand);
}

/* Submenús */
.main-navigation ul ul,
.kadence-navigation ul ul {
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    padding: .4em 0;
    min-width: 220px;
}

.main-navigation ul ul li a,
.kadence-navigation ul ul li a {
    font-size: .875rem;
    font-weight: 500;
    padding: .5em 1.25em;
    border-radius: 0;
}

.main-navigation ul ul li a:hover,
.kadence-navigation ul ul li a:hover {
    background: var(--pc-brand-light);
    color: var(--pc-brand) !important;
}

/* Flecha de submenú */
.main-navigation ul li.menu-item-has-children > a::after {
    content: " ▾";
    font-size: .75em;
    opacity: .6;
}

/* ============================================================
   MENÚ MÓVIL
   ============================================================ */
@media (max-width: 1023px) {
    .main-navigation,
    .kadence-navigation {
        background: var(--pc-white);
        border-top: 2px solid var(--pc-brand);
        padding: .5em 0;
    }

    .main-navigation ul li a,
    .kadence-navigation ul li a {
        padding: .65em 1.25em;
        border-bottom: 1px solid var(--pc-border);
        border-radius: 0;
    }

    .main-navigation ul li:last-child a,
    .kadence-navigation ul li:last-child a {
        border-bottom: none;
    }

    .menu-toggle,
    .kadence-menu-toggle {
        background: none;
        border: 2px solid var(--pc-brand);
        border-radius: var(--pc-radius-sm);
        color: var(--pc-brand);
        padding: .4em .75em;
        font-weight: 700;
        cursor: pointer;
        transition: background var(--pc-transition), color var(--pc-transition);
    }

    .menu-toggle:hover,
    .kadence-menu-toggle:hover {
        background: var(--pc-brand);
        color: var(--pc-white);
    }
}

/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */
.post-entry,
article.type-post {
    background: var(--pc-white);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    padding: 1.5em;
    margin-bottom: 1.5em;
    transition: box-shadow var(--pc-transition), transform var(--pc-transition);
}

.post-entry:hover,
article.type-post:hover {
    box-shadow: var(--pc-shadow-hover);
    transform: translateY(-2px);
}

.entry-title a {
    color: var(--pc-text) !important;
    font-size: 1.3rem;
    text-decoration: none;
    transition: color var(--pc-transition);
}
.entry-title a:hover { color: var(--pc-brand) !important; }

/* ============================================================
   IMÁGENES DESTACADAS
   ============================================================ */
.post-thumbnail img,
.wp-post-image {
    border-radius: var(--pc-radius);
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.wp-block-button__link,
.button,
.btn,
button[type="submit"] {
    background: var(--pc-brand) !important;
    color: var(--pc-white) !important;
    border: none;
    border-radius: var(--pc-radius-sm);
    padding: .65em 1.5em;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--pc-transition), transform var(--pc-transition);
    text-decoration: none;
}

.wp-block-button__link:hover,
.button:hover,
.btn:hover,
button[type="submit"]:hover {
    background: var(--pc-brand-dark) !important;
    transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--pc-brand) !important;
    color: var(--pc-brand) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--pc-brand) !important;
    color: var(--pc-white) !important;
}

/* ============================================================
   TABLAS
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: .9rem;
    border-radius: var(--pc-radius);
    overflow: hidden;
    box-shadow: var(--pc-shadow);
}

table th {
    background: var(--pc-brand);
    color: var(--pc-white);
    padding: .75em 1em;
    font-weight: 700;
    text-align: left;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

table td {
    padding: .65em 1em;
    border-bottom: 1px solid var(--pc-border);
}

table tbody tr:nth-child(even) { background: var(--pc-brand-light); }
table tbody tr:hover { background: #ddf0e2; }

/* ============================================================
   BLOCKQUOTES
   ============================================================ */
blockquote {
    border-left: 4px solid var(--pc-accent);
    background: #fff9ec;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
    font-style: normal;
    color: var(--pc-text-soft);
}
blockquote p { margin: 0; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.widget-area .widget {
    background: var(--pc-white);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    padding: 1.25em;
    margin-bottom: 1.5em;
}

.widget-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pc-text-soft);
    border-bottom: 2px solid var(--pc-brand);
    padding-bottom: .5em;
    margin-bottom: .75em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
    background: #1e3a22;
    color: rgba(255,255,255,.8);
    padding: 2.5em 0 1.5em;
    margin-top: 3em;
}

/* Footer links — todos los estados para evitar azul/morado */
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
#colophon a,
#colophon a:link,
#colophon a:visited {
    color: rgba(255,255,255,.75) !important;
    text-decoration: none;
    transition: color var(--pc-transition);
}
.site-footer a:hover,
.site-footer a:focus,
#colophon a:hover,
#colophon a:focus {
    color: var(--pc-accent) !important;
}
.site-footer .widget-title { color: var(--pc-white); border-bottom-color: var(--pc-accent); }

/* Widgets del footer — sin cajas, texto directo sobre el fondo */
.site-footer .widget-area .widget,
.site-footer .widget,
#colophon .widget,
#colophon .widget-area .widget,
.site-footer [class*="wp-block"],
#colophon [class*="wp-block"],
.site-footer .kadence-column,
#colophon .kadence-column,
.site-footer *,
#colophon * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Todo el texto dentro del footer — blanco */
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div,
.site-footer strong,
#colophon p,
#colophon li,
#colophon span,
#colophon strong {
    color: rgba(255,255,255,.85) !important;
}

.site-footer .widget-title,
#colophon .widget-title {
    color: var(--pc-white) !important;
    border-bottom: 1px solid var(--pc-accent) !important;
    padding-bottom: .4em;
    margin-bottom: .75em;
}

/* Logo Amazon — fondo blanco para que se vea sobre el verde oscuro */
.site-footer img,
#colophon img {
    background: #ffffff !important;
    border-radius: var(--pc-radius-sm) !important;
    padding: .6em 1em !important;
    display: inline-block !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb-trail,
.kadence-breadcrumbs {
    font-size: .8rem;
    color: var(--pc-text-soft);
    margin-bottom: 1em;
    padding: .5em 0;
}
.breadcrumb-trail a,
.kadence-breadcrumbs a { color: var(--pc-brand); }

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.pagination .page-numbers,
.nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    height: 2.2em;
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border);
    color: var(--pc-text);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--pc-transition), color var(--pc-transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current,
.nav-links a:hover {
    background: var(--pc-brand);
    border-color: var(--pc-brand);
    color: var(--pc-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    blockquote { padding: .75em 1em; }
}