/*
Theme Name: Robots-Piscina
Theme URI: https://robots-piscina.com/
Author: Robots-Piscina.com
Description: Tema HydroTech Modern para Robots-Piscina.com — reseñas y comparativas de robots limpiafondos. Construido con Tailwind (CDN) + ACF Pro.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: robots-piscina
*/

/* HydroTech tokens — also defined in tailwind config, kept here for non-Tailwind contexts (editor, admin) */
:root {
    --rp-surface: #f7f9fb;
    --rp-surface-container-lowest: #ffffff;
    --rp-surface-container-low: #f2f4f6;
    --rp-surface-container: #eceef0;
    --rp-surface-container-high: #e6e8ea;
    --rp-surface-variant: #e0e3e5;
    --rp-on-surface: #191c1e;
    --rp-on-surface-variant: #43474d;
    --rp-outline: #74777e;
    --rp-outline-variant: #c4c6ce;
    --rp-primary: #000f22;
    --rp-on-primary: #ffffff;
    --rp-primary-container: #0a2540;
    --rp-primary-fixed: #d2e4ff;
    --rp-primary-fixed-dim: #b0c8eb;
    --rp-secondary: #00677f;
    --rp-secondary-container: #00ccf9;
    --rp-secondary-fixed: #b7eaff;
    --rp-secondary-fixed-dim: #4cd6ff;
    --rp-error: #ba1a1a;
}

/* ====================================================================
 *  Self-hosted fonts (no Google Fonts, no external requests).
 *  woff2 files live in assets/fonts/.
 * ==================================================================*/

/* Inter — body + UI (Latin + Latin-Ext for Spanish accents) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/inter-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/inter-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope — headlines (geometric, structured, open-source).
 * Used wherever the design system says "Metropolis": the upstream
 * Metropolis repo is offline and Metropolis isn't on Google Fonts;
 * Manrope is the closest geometric sans-serif and is published under
 * the Open Font License. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/manrope-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/manrope-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/manrope-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/manrope-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Material Symbols Outlined — subset to the icons actually used across the
 * theme + ACF-driven content (category cards, guía criterios, etc.). Result is
 * ~44 KB instead of the full ~1.1 MB. Regenerate via the Google Fonts CSS API
 * with the icon_names parameter when new icons are added. */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('assets/fonts/material-symbols-outlined.woff2?v=2') format('woff2');
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

html { font-family: 'Inter', system-ui, sans-serif; }
body { background: var(--rp-surface); color: var(--rp-on-surface); }

::selection { background: var(--rp-secondary); color: #fff; }

html { scroll-behavior: smooth; }

/* Prose styles for blog posts / guides */
.rp-prose > :first-child {
    margin-top: 0;
}
.rp-prose h2 {
    font-family: 'Metropolis', sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rp-primary);
    margin: 48px 0 16px;
}
.rp-prose h3 {
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--rp-primary);
    margin: 32px 0 12px;
}
.rp-prose p,
.rp-prose ul,
.rp-prose ol {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: var(--rp-on-surface-variant);
    margin-bottom: 16px;
}
.rp-prose ul { list-style: disc; padding-left: 24px; }
.rp-prose ol { list-style: decimal; padding-left: 24px; }
.rp-prose a { color: var(--rp-secondary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.rp-prose a:hover { color: var(--rp-primary); }
.rp-prose strong { color: var(--rp-primary); font-weight: 700; }
.rp-prose blockquote {
    border-left: 3px solid var(--rp-secondary-container);
    padding-left: 16px;
    color: var(--rp-on-surface-variant);
    font-style: italic;
    margin: 24px 0;
}

/* Tight prose — used in card-style boxes (methodology, callouts) where we
 * want HTML paragraphs/lists but no big top/bottom spacing. */
.rp-prose-tight p,
.rp-prose-tight ul,
.rp-prose-tight ol { margin-bottom: 8px; }
.rp-prose-tight ul,
.rp-prose-tight ol { padding-left: 20px; }
.rp-prose-tight ul { list-style: disc; }
.rp-prose-tight ol { list-style: decimal; }
.rp-prose-tight strong { color: var(--rp-primary); font-weight: 700; }
.rp-prose-tight a { color: var(--rp-secondary); text-decoration: underline; }
.rp-prose-tight :last-child { margin-bottom: 0; }

/* Inline figures inside the long-form review prose — used to drop in-pool /
 * detail shots between H2 sections. */
.rp-prose figure {
    margin: 32px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rp-outline-variant);
    background: var(--rp-surface-container-low);
}
.rp-prose figure img {
    display: block;
    width: 100%;
    height: auto;
}
.rp-prose figcaption {
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--rp-on-surface-variant);
    text-align: center;
    background: var(--rp-surface-container-low);
}

/* Editorial tables inside long-form prose (blog posts, robot reviews).
 * Wrapped in .rp-table-wrap (added via the_content filter) for horizontal
 * scroll on narrow viewports without forcing the page itself to scroll. */
.rp-table-wrap {
    margin: 28px 0;
    border-radius: 12px;
    border: 1px solid var(--rp-outline-variant);
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 1px 0 0 rgba(0, 15, 34, 0.04);
}
.rp-prose .rp-table-wrap > table,
.rp-prose > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rp-on-surface);
    margin: 0;
}
.rp-prose > table {
    /* Bare table (no wrapper yet on edit-screen previews) still looks tidy. */
    margin: 28px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rp-outline-variant);
    background: #fff;
}
.rp-prose .rp-table-wrap thead th,
.rp-prose > table thead th {
    background: var(--rp-primary);
    color: var(--rp-on-primary);
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rp-primary-container);
}
.rp-prose .rp-table-wrap thead th + th,
.rp-prose > table thead th + th {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.rp-prose .rp-table-wrap tbody td,
.rp-prose > table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rp-outline-variant);
    vertical-align: top;
}
.rp-prose .rp-table-wrap tbody td:first-child,
.rp-prose > table tbody td:first-child {
    font-weight: 600;
    color: var(--rp-primary);
}
.rp-prose .rp-table-wrap tbody tr:nth-child(even) td,
.rp-prose > table tbody tr:nth-child(even) td {
    background: var(--rp-surface-container-low);
}
.rp-prose .rp-table-wrap tbody tr:hover td,
.rp-prose > table tbody tr:hover td {
    background: rgba(0, 204, 249, 0.08);
}
.rp-prose .rp-table-wrap tbody tr:last-child td,
.rp-prose > table tbody tr:last-child td {
    border-bottom: 0;
}
.rp-prose .rp-table-wrap caption,
.rp-prose > table caption {
    caption-side: top;
    text-align: left;
    padding: 12px 14px;
    background: var(--rp-surface-container-low);
    border-bottom: 1px solid var(--rp-outline-variant);
    font-size: 13px;
    color: var(--rp-on-surface-variant);
    font-style: italic;
}

/* In-text affiliate buy callout — distinct from regular links so the user
 * sees it as a CTA inside the prose. */
.rp-prose a.rp-buy {
    display: inline;
    color: var(--rp-secondary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.rp-prose a.rp-buy:hover {
    color: var(--rp-primary);
}