/*
Theme Name: TS Orbix — ListingHive Child
Theme URI: https://tsorbix.com
Description: TS Orbix brand-compliant child theme over ListingHive. Applies the official TS Orbix manual de marca: navy/cyan palette, Inter web typography, orbital gradient on cover areas.
Version: 1.0.1
Requires at least: 5.8
Requires PHP: 7.4
Author: TS Orbix
Author URI: https://tsorbix.com
Text Domain: tsorbix-child
Template: listinghive
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ===========================================================
   TS ORBIX — MANUAL DE MARCA (theme overrides)
   ---------------------------------------------------------------
   Color system (per TS Orbix manual):
     TS                 #223F7C  (navy, institutional anchor)
     OR gradient        #419DC5 → #377AB7  (sky → mid-blue)
     BIX gradient       #4065A3 → #223F7C  (mid-blue → navy)
     Tagline "Powered…" #3371AF
     Pure white         #FFFFFF
     Neutral grey       #ECF0F5
     Orb gradient       #375B96 → #428CBA  (logo orb)
     Orbital gradient   #091231 → #29DDDA (via #37A7E7) — cover only
     Accent CTA         #29DDDA / #16FFBB

   Typography:
     Inter (web) — display, headings, body, labels

   Web rules:
     - Content area bg: #FFFFFF or #ECF0F5
     - Navbar bg:        #091231 with negative-logo version
     - Primary CTAs:     #29DDDA or #16FFBB
     - Generous section spacing
   =========================================================== */

/* ---- Theme tokens (CSS variables) ---- */
:root {
    --tsx-primary:      #223F7C;          /* TS navy */
    --tsx-secondary:    #3371AF;          /* Tagline / mid-blue */
    --tsx-or-start:     #419DC5;
    --tsx-or-end:       #377AB7;
    --tsx-bix-start:    #4065A3;
    --tsx-bix-end:      #223F7C;
    --tsx-orb-start:    #375B96;
    --tsx-orb-end:      #428CBA;
    --tsx-accent:       #29DDDA;
    --tsx-accent-2:     #16FFBB;
    --tsx-bg:           #FFFFFF;
    --tsx-bg-soft:      #ECF0F5;
    --tsx-navy-deep:    #091231;
    --tsx-text:         #1f2d3a;

    /* Generous section rhythm */
    --tsx-section-y:    96px;
    --tsx-section-x:    32px;
}

/* ---- Inter font (Google Fonts woff2 CDN, self-hosted fallback) ---- */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--tsx-text);
    background-color: var(--tsx-bg);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Section rhythm (generous) ---- */
.entry-content > * + *,
.hp-section + .hp-section,
.hp-page__container > section + section {
    margin-top: var(--tsx-section-y);
}
.entry-content,
.hp-section {
    padding-left: var(--tsx-section-x);
    padding-right: var(--tsx-section-x);
}
.hp-section {
    padding-top: var(--tsx-section-y);
    padding-bottom: var(--tsx-section-y);
}

/* ---- Cover / orbital gradient (portadas / slides de máximo impacto) ---- */
.tsx-orbital-cover,
.hp-cover,
.hp-listing--featured.tsx-orbital {
    background: radial-gradient(ellipse at center, #29DDDA 0%, #37A7E7 40%, #091231 100%);
    color: #FFFFFF;
}
.tsx-orbital-cover h1, .tsx-orbital-cover h2, .hp-cover h1, .hp-cover h2 {
    color: #FFFFFF;
}

/* Navbar colors and logo are intentionally NOT overridden here — a plugin sets the navbar and its logo. The child theme only affects content area, buttons, headings, sections and footer. */

/* ---- Buttons & CTAs ---- */
.button,
.button--primary,
button[type="submit"],
.hp-button--primary,
.hp-button,
input[type="submit"].button--primary,
a.button--primary {
    background-color: var(--tsx-accent) !important;
    color: var(--tsx-navy-deep) !important;
    border: none !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 20px;
    transition: background-color .12s ease, transform .12s ease;
}
.button--primary:hover,
button[type="submit"]:hover,
.hp-button--primary:hover,
a.button--primary:hover,
input[type="submit"].button--primary:hover {
    background-color: var(--tsx-accent-2) !important;
    color: var(--tsx-navy-deep) !important;
}
.button--secondary,
a.button--secondary,
.hp-button--secondary {
    background-color: transparent !important;
    color: var(--tsx-primary) !important;
    border: 2px solid var(--tsx-primary) !important;
}
.button--secondary:hover,
a.button--secondary:hover,
.hp-button--secondary:hover {
    background-color: var(--tsx-primary) !important;
    color: #FFFFFF !important;
}

/* ---- Headings hierarchy (manual) ---- */
h1, .h1, .hp-section__title, .hp-page__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.1;
    color: var(--tsx-primary);
    letter-spacing: -0.01em;
}
h2, .h2, .hp-section__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.2;
    color: var(--tsx-primary);
}
h3, .h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--tsx-primary);
}
h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--tsx-primary);
}
small, .small, .hp-listing__details small {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tsx-secondary);
    font-weight: 700;
}

/* ---- Links ---- */
a { color: var(--tsx-secondary); }
a:hover { color: var(--tsx-primary); }

/* ---- Soft sections (#ECF0F5) ---- */
.hp-section--soft,
.hp-page__container .hp-section.tsx-soft {
    background-color: var(--tsx-bg-soft);
}

/* ---- Footer (white) ---- */
.footer,
.site-footer,
footer[role="contentinfo"] {
    background-color: #FFFFFF;
    color: #1F2D3A;
    padding: 64px 24px 24px;
}
.footer, .footer p, .footer li, .footer span, .footer small,
.site-footer, .site-footer p, .site-footer li, .site-footer span, .site-footer small,
footer[role="contentinfo"], footer[role="contentinfo"] p, footer[role="contentinfo"] li,
footer[role="contentinfo"] span, footer[role="contentinfo"] small,
.footer .widget, .footer .widget p, .footer .widget li, .footer .widget span,
.site-footer .widget, .site-footer .widget p, .site-footer .widget li {
    color: #1F2D3A !important;
}
.footer a, .site-footer a,
footer[role="contentinfo"] a,
.site-footer .footer-navbar__menu a,
.site-footer .footer-navbar a,
.footer .footer-navbar__menu a,
.footer .footer-navbar a,
footer[role="contentinfo"] .footer-navbar__menu a {
    color: #1F2D3A !important;
}
/* Match the parent selector specificity (3 levels) so the menu link
   color wins over the parent's `.footer-navbar__menu ul li a{color:rgba(15,23,39,.45)}`,
   which renders almost white on the new white footer background. */
.site-footer .footer-navbar__menu ul li a,
.footer .footer-navbar__menu ul li a,
footer[role="contentinfo"] .footer-navbar__menu ul li a {
    color: #1F2D3A !important;
}
.footer a:hover, .site-footer a:hover,
footer[role="contentinfo"] a:hover,
.site-footer .footer-navbar__menu a:hover,
.site-footer .footer-navbar__menu ul li a:hover,
.footer .footer-navbar__menu a:hover,
.footer .footer-navbar__menu ul li a:hover,
footer[role="contentinfo"] .footer-navbar__menu a:hover {
    color: var(--tsx-accent) !important;
}
.footer .widget-title, .site-footer .widget-title,
footer[role="contentinfo"] .widget-title,
.site-footer .footer-navbar__copyright,
.footer .footer-navbar__copyright {
    color: #1F2D3A !important;
}
.site-footer .footer-navbar__menu,
.footer .footer-navbar__menu,
footer[role="contentinfo"] .footer-navbar__menu {
    color: #1F2D3A;
}
.tsx-footer-copy {
    margin-top: 32px;
    padding: 16px 24px;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(31,45,58,0.70) !important;
    letter-spacing: 0.02em;
    background-color: #FFFFFF;
    width: 100%;
}

/* ---- Form controls ---- */
input[type="text"], input[type="email"], input[type="search"],
input[type="number"], input[type="url"], textarea, select {
    border: 1px solid var(--tsx-bg-soft);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    background: #FFFFFF;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--tsx-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(65, 157, 197, 0.18);
}

/* ---- Listings / cards (orb palette for featured) ---- */
.hp-listing--featured,
.is-featured {
    border: 2px solid var(--tsx-or-end);
    box-shadow: 0 8px 28px rgba(34, 63, 124, 0.10);
}
.hp-listing__title a {
    color: var(--tsx-primary);
    font-weight: 700;
}

/* ---- Misc ---- */
::selection { background: var(--tsx-or-start); color: #FFFFFF; }

/* Footer navbar layout — column-reverse so the legal menu (in
   .footer-navbar__end) appears on the first row and the copyright
   (in .footer-navbar__start) appears on the second row, even though
   .footer-navbar__start is the first child in the parent theme's HTML.
   Each child takes 100% of the row so the alignment per row is
   independent: menu right-aligned, copyright center-aligned. */
.site-footer .footer-navbar,
.footer .footer-navbar,
footer[role="contentinfo"] .footer-navbar {
    flex-direction: column-reverse;
    align-items: stretch;
}
.site-footer .footer-navbar__end,
.footer .footer-navbar__end,
footer[role="contentinfo"] .footer-navbar__end {
    width: 100%;
    justify-content: flex-end;
    padding-bottom: 8px;
}
.site-footer .footer-navbar__start,
.footer .footer-navbar__start,
footer[role="contentinfo"] .footer-navbar__start {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}

/* Force white on ALL descendants of footer-navbar — parent theme sets
   color: rgba(15,23,39,.45) on the container which is inherited by
   every element inside. Need to override the inherited value itself. */
.site-footer .footer-navbar,
.site-footer .footer-navbar *,
.footer .footer-navbar,
.footer .footer-navbar *,
footer[role="contentinfo"] .footer-navbar,
footer[role="contentinfo"] .footer-navbar * {
    background-color: #FFFFFF !important;
    color: #1F2D3A !important;
    border-color: #E5E7EB !important;
}

/* Links inside the white footer navbar need dark text (override
   the global a color: #3371AF rule from the previous block). */
.site-footer .footer-navbar a,
.site-footer .footer-navbar a:hover,
.footer .footer-navbar a,
.footer .footer-navbar a:hover,
footer[role="contentinfo"] .footer-navbar a,
footer[role="contentinfo"] .footer-navbar a:hover {
    color: var(--tsx-primary) !important;
}
.site-footer .footer-navbar a:hover,
.footer .footer-navbar a:hover,
footer[role="contentinfo"] .footer-navbar a:hover {
    color: var(--tsx-accent) !important;
}

/* ===========================================================
   FOOTER LAYOUT FIX — menú arriba (derecha), copyright abajo (centrado)
   -----------------------------------------------------------
   Reorganiza .footer-navbar en columna:
     - .footer-navbar__end  (menú de links) → arriba, alineado a la derecha
     - .footer-navbar__start (copyright)    → debajo, centrado
   Fuerza fondo blanco en todo el footer (sin azul visible).
   =========================================================== */

.site-footer {
    background-color: #FFFFFF !important;
}

/* Contenedor principal: columna para apilar menú + copyright */
.site-footer .footer-navbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #FFFFFF !important;
    padding: 0 0 24px;
}

/* Menú (footer-navbar__end): ARRIBA, alineado a la derecha */
.site-footer .footer-navbar__end {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    order: 1;
    margin-bottom: 20px;
}

.site-footer .footer-navbar__menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .footer-navbar__menu ul li {
    margin: 0;
}

.site-footer .footer-navbar__menu ul li a {
    color: #1F2D3A !important;
    font-weight: 600;
    text-decoration: none;
}

.site-footer .footer-navbar__menu ul li a:hover {
    color: var(--tsx-accent) !important;
    text-decoration: underline;
}

/* Copyright (footer-navbar__start): DEBAJO, centrado */
.site-footer .footer-navbar__start {
    display: flex;
    justify-content: center;
    width: 100%;
    order: 2;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

.site-footer .footer-navbar__copyright {
    text-align: center;
    color: rgba(31,45,58,0.70) !important;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1.6;
    max-width: 720px;
}

/* Mobile: menú centrado, copyright centrado */
@media (max-width: 767px) {
    .site-footer .footer-navbar__end,
    .site-footer .footer-navbar__menu ul {
        justify-content: center;
    }
    .site-footer .footer-navbar__menu ul {
        gap: 0 1.25rem;
    }
}

/* Forzar blanco en todos los descendientes del footer-navbar */
.site-footer .footer-navbar,
.site-footer .footer-navbar * {
    background-color: transparent !important;
}