/*
 * Theme Name:        Playas Costa del Sol — Kadence Child
 * Theme URI:         https://playascostadelsol.com
 * Description:       Child theme de Kadence para el portal playascostadelsol.com. No modificar el tema padre.
 * Author:            Tu Meta Digital
 * Author URI:        https://tumetadigital.com
 * Template:          kadence
 * Version:           1.0.0
 * Requires at least: 6.4
 * Requires PHP:      8.1
 * License:           GPL-2.0-or-later
 * Text Domain:       playascostadelsol
 */

/* =============================================================================
   VARIABLES GLOBALES
   ============================================================================= */

:root {

    /* ── Colores principales ─────────────────────────────────────────────────── */
    --pcs-ocean:        #0A7EA4;
    --pcs-ocean-deep:   #065270;
    --pcs-ocean-light:  #4DB8D8;
    --pcs-sand:         #F5EDD6;
    --pcs-sand-dark:    #E8D9B0;
    --pcs-coral:        #E8604C;
    --pcs-sun:          #F5A623;
    --pcs-green:        #1A7A5E;
    --pcs-ink:          #1A1A2E;
    --pcs-ink-soft:     #3D3D5C;
    --pcs-ink-muted:    #7B7B9E;
    --pcs-white:        #FAFAF8;

    /* ── Tipografía ──────────────────────────────────────────────────────────── */
    --pcs-font-display: 'Playfair Display', Georgia, serif;
    --pcs-font-body:    'DM Sans', 'Nunito Sans', sans-serif;
    --pcs-font-mono:    'JetBrains Mono', monospace;

    /* ── Espaciado y forma ───────────────────────────────────────────────────── */
    --pcs-radius:       12px;
    --pcs-radius-lg:    20px;
    --pcs-shadow:       0 4px 24px rgba(10, 82, 112, 0.10);
    --pcs-shadow-lg:    0 12px 48px rgba(10, 82, 112, 0.16);

    /* ── Transiciones ────────────────────────────────────────────────────────── */
    --pcs-transition:   0.22s ease;

    /* ── Layout ──────────────────────────────────────────────────────────────── */
    --pcs-max-width:    1200px;
    --pcs-gutter:       1rem;
}

/* =============================================================================
   RESET Y BASE
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--pcs-font-body);
    font-size:        16px;
    font-weight:      400;
    line-height:      1.65;
    color:            var(--pcs-ink);
    background-color: var(--pcs-white);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height:    auto;
    display:   block;
}

a {
    color:           var(--pcs-ocean);
    text-decoration: none;
    transition:      color var(--pcs-transition);
}

a:hover,
a:focus-visible {
    color: var(--pcs-ocean-deep);
}

a:focus-visible {
    outline:        2px solid var(--pcs-ocean);
    outline-offset: 3px;
    border-radius:  3px;
}

ul,
ol {
    list-style: none;
}

button {
    cursor:     pointer;
    background: none;
    border:     none;
    font-family: inherit;
}

/* =============================================================================
   TIPOGRAFÍA
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--pcs-font-display);
    font-weight:    700;
    line-height:    1.2;
    color:          var(--pcs-ink);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; font-family: var(--pcs-font-body); }
h5 { font-size: 0.95rem; font-weight: 600; font-family: var(--pcs-font-body); }
h6 { font-size: 0.875rem; font-weight: 600; font-family: var(--pcs-font-body); }

p {
    margin-bottom: 1.25rem;
    max-width:     68ch; /* Legibilidad óptima */
}

p:last-child {
    margin-bottom: 0;
}

strong, b { font-weight: 600; }
em, i      { font-style: italic; }

code,
kbd,
pre {
    font-family: var(--pcs-font-mono);
    font-size:   0.875em;
}

/* Separadores de sección */
hr {
    border:     none;
    border-top: 1px solid var(--pcs-sand-dark);
    margin:     2rem 0;
}

/* =============================================================================
   CLASES UTILITARIAS
   ============================================================================= */

/* ── Contenedor principal ────────────────────────────────────────────────────── */
.pcs-container {
    width:      100%;
    max-width:  var(--pcs-max-width);
    margin:     0 auto;
    padding:    0 var(--pcs-gutter);
}

.pcs-container--narrow {
    max-width: 800px;
}

.pcs-container--wide {
    max-width: 1440px;
}

/* ── Sección ─────────────────────────────────────────────────────────────────── */
.pcs-section {
    padding: 3rem 0;
}

.pcs-section--lg {
    padding: 5rem 0;
}

/* ── Badge genérico ──────────────────────────────────────────────────────────── */
.pcs-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.2rem 0.65rem;
    border-radius:   100px;
    font-family:     var(--pcs-font-body);
    font-size:       0.75rem;
    font-weight:     600;
    letter-spacing:  0.03em;
    text-transform:  uppercase;
    white-space:     nowrap;
    line-height:     1.4;
}

.pcs-badge--ocean {
    background: var(--pcs-ocean);
    color:      var(--pcs-white);
}

.pcs-badge--sand {
    background: var(--pcs-sand-dark);
    color:      var(--pcs-ink-soft);
}

.pcs-badge--green {
    background: var(--pcs-green);
    color:      var(--pcs-white);
}

.pcs-badge--coral {
    background: var(--pcs-coral);
    color:      var(--pcs-white);
}

.pcs-badge--sun {
    background: var(--pcs-sun);
    color:      var(--pcs-ink);
}

/* ── Botones ─────────────────────────────────────────────────────────────────── */
.pcs-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.75rem 1.5rem;
    border-radius:   var(--pcs-radius);
    font-family:     var(--pcs-font-body);
    font-size:       0.9375rem;
    font-weight:     600;
    line-height:     1.2;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--pcs-transition),
                     color var(--pcs-transition),
                     transform var(--pcs-transition),
                     box-shadow var(--pcs-transition);
    white-space:     nowrap;
    border:          2px solid transparent;
}

.pcs-btn:focus-visible {
    outline:        2px solid var(--pcs-ocean);
    outline-offset: 3px;
}

.pcs-btn:active {
    transform: translateY(1px);
}

/* Botón primario (azul océano) */
.pcs-btn--primary {
    background: var(--pcs-ocean);
    color:      var(--pcs-white);
    box-shadow: 0 2px 12px rgba(10, 126, 164, 0.30);
}

.pcs-btn--primary:hover,
.pcs-btn--primary:focus-visible {
    background: var(--pcs-ocean-deep);
    color:      var(--pcs-white);
    box-shadow: 0 4px 20px rgba(10, 126, 164, 0.40);
    transform:  translateY(-1px);
}

/* Botón outline (borde océano, fondo transparente) */
.pcs-btn--outline {
    background:   transparent;
    color:        var(--pcs-ocean);
    border-color: var(--pcs-ocean);
}

.pcs-btn--outline:hover,
.pcs-btn--outline:focus-visible {
    background: var(--pcs-ocean);
    color:      var(--pcs-white);
    transform:  translateY(-1px);
}

/* Variantes de tamaño */
.pcs-btn--sm {
    padding:   0.5rem 1rem;
    font-size: 0.8125rem;
}

.pcs-btn--lg {
    padding:   1rem 2rem;
    font-size: 1rem;
}

/* Botón coral (CTA afiliación) */
.pcs-btn--coral {
    background: var(--pcs-coral);
    color:      var(--pcs-white);
    box-shadow: 0 2px 12px rgba(232, 96, 76, 0.30);
}

.pcs-btn--coral:hover,
.pcs-btn--coral:focus-visible {
    background: #c94030;
    color:      var(--pcs-white);
    transform:  translateY(-1px);
}

/* ── Helpers de texto ────────────────────────────────────────────────────────── */
.pcs-text-ocean   { color: var(--pcs-ocean); }
.pcs-text-muted   { color: var(--pcs-ink-muted); }
.pcs-text-sand    { color: var(--pcs-sand-dark); }
.pcs-text-display { font-family: var(--pcs-font-display); }
.pcs-text-mono    { font-family: var(--pcs-font-mono); }
.pcs-text-sm      { font-size: 0.875rem; }
.pcs-text-xs      { font-size: 0.75rem; }

/* ── Helpers de layout ───────────────────────────────────────────────────────── */
.pcs-visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

.pcs-flex       { display: flex; }
.pcs-flex-col   { display: flex; flex-direction: column; }
.pcs-flex-wrap  { flex-wrap: wrap; }
.pcs-items-center { align-items: center; }
.pcs-gap-sm     { gap: 0.5rem; }
.pcs-gap        { gap: 1rem; }
.pcs-gap-lg     { gap: 1.5rem; }

/* ── Superficies ─────────────────────────────────────────────────────────────── */
.pcs-surface {
    background:    var(--pcs-white);
    border-radius: var(--pcs-radius);
    box-shadow:    var(--pcs-shadow);
    padding:       1.5rem;
}

.pcs-surface--sand {
    background:    var(--pcs-sand);
    border-radius: var(--pcs-radius);
    padding:       1.5rem;
}

/* =============================================================================
   OVERRIDES KADENCE
   Ajustes mínimos para que el tema padre respete nuestra tipografía y colores.
   ============================================================================= */

/* Fuente body global */
body.kadence-body {
    font-family: var(--pcs-font-body);
}

/* ── Cabecera Kadence ──────────────────────────────────────────────────────── */

/* Fondo azul océano en la banda principal */
.site-header-wrap,
.site-main-header-wrap,
#masthead,
.site-header {
    background-color: var(--pcs-ocean) !important;
}

/* Nombre del sitio en blanco (fallback antes de subir logo) */
.site-header .site-branding .site-title a,
.site-title a,
.kadence-site-name-inner a,
.kadence-header-branding a,
.header-branding .site-title a {
    font-family: var(--pcs-font-display);
    font-weight: 900;
    color: #ffffff !important;
    text-decoration: none;
    letter-spacing: -0.02em;
}

/* Menú principal */
.main-navigation a,
.kadence-menu-container a,
.kadence-nav a,
#site-navigation a,
.header-navigation .menu > li > a {
    font-family: var(--pcs-font-body);
    font-weight: 600;
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none;
    transition: color 0.15s;
}

.main-navigation a:hover,
.kadence-menu-container a:hover,
.header-navigation .menu > li > a:hover {
    color: var(--pcs-sand) !important;
}

/* Ítem activo del menú */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a,
.header-navigation .current-menu-item > a {
    color: var(--pcs-sand) !important;
}

/* Toggle móvil */
.kadence-mobile-toggle-open,
.kadence-mobile-toggle-wrap button,
.menu-toggle {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.4) !important;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer-wrap,
.site-footer-row-wrap,
.footer-middle-section-wrap,
.footer-bottom-section-wrap {
    background-color: var(--pcs-ocean-deep);
    color: rgba(245,237,214,0.8);
}

.site-footer-wrap a,
.footer-bottom-section-wrap a {
    color: rgba(245,237,214,0.85);
    text-decoration: none;
}
.site-footer-wrap a:hover,
.footer-bottom-section-wrap a:hover {
    color: var(--pcs-sand);
}