/*
Theme Name: Mind Your Sport
Theme URI: https://mindyoursport.es/
Author: Sara Clare / Custom Development
Author URI: https://mindyoursport.es/conoceme/
Description: Tema custom server-rendered (no SPA) basado en el diseño Lovable/React original. Optimizado para SEO, rendimiento y accesibilidad.
Version: 1.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mind-your-sport
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
*/

/* ==========================================================================
   Admin Bar Fix for Sticky Header
   ========================================================================== */
.admin-bar .mys-site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .mys-site-header {
        top: 46px;
    }
}

/* ==========================================================================
   Footer Link Inheritance
   ========================================================================== */
.mys-site-footer a {
    color: inherit;
}

/* ==========================================================================
   Prose Typography (for blog content and legal pages)
   Tailwind Typography plugin replacement
   ========================================================================== */
.prose {
    color: hsl(var(--foreground));
    max-width: 65ch;
    line-height: 1.75;
}

.prose :where([class~="lead"]) {
    color: hsl(var(--muted-foreground));
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

.prose :where(a) {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.prose :where(a):hover {
    color: hsl(var(--primary-dark));
}

.prose :where(strong) {
    color: hsl(var(--foreground));
    font-weight: 600;
}

.prose :where(h1) {
    color: hsl(var(--primary));
    font-weight: 800;
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
}

.prose :where(h2) {
    color: hsl(var(--primary));
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}

.prose :where(h3) {
    color: hsl(var(--primary));
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
}

.prose :where(h4) {
    color: hsl(var(--foreground));
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.prose :where(p) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where(blockquote) {
    font-weight: 500;
    font-style: italic;
    color: hsl(var(--foreground));
    border-left-width: 0.25rem;
    border-left-color: hsl(var(--primary));
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
}

.prose :where(blockquote p:first-of-type)::before {
    content: open-quote;
}

.prose :where(blockquote p:last-of-type)::after {
    content: close-quote;
}

.prose :where(figure) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose :where(figcaption) {
    color: hsl(var(--muted-foreground));
    font-size: 0.875em;
    line-height: 1.4285714;
    margin-top: 0.8571429em;
}

.prose :where(img) {
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: var(--radius);
}

.prose :where(video) {
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: var(--radius);
}

.prose :where(code) {
    color: hsl(var(--foreground));
    font-weight: 600;
    font-size: 0.875em;
    background-color: hsl(var(--muted));
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}

.prose :where(code)::before {
    content: none;
}

.prose :where(code)::after {
    content: none;
}

.prose :where(pre) {
    color: hsl(var(--foreground));
    background-color: hsl(var(--muted));
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: var(--radius);
    padding: 0.8571429em 1.1428571em;
}

.prose :where(pre code) {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.prose :where(ol) {
    list-style-type: decimal;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose :where(ul) {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose :where(li) {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose :where(ol > li)::marker {
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

.prose :where(ul > li)::marker {
    color: hsl(var(--primary));
}

.prose :where(hr) {
    border-color: hsl(var(--border));
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
}

.prose :where(table) {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
}

.prose :where(thead) {
    border-bottom-width: 1px;
    border-bottom-color: hsl(var(--border));
}

.prose :where(thead th) {
    color: hsl(var(--foreground));
    font-weight: 600;
    vertical-align: bottom;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
}

.prose :where(tbody tr) {
    border-bottom-width: 1px;
    border-bottom-color: hsl(var(--border));
}

.prose :where(tbody tr:last-child) {
    border-bottom-width: 0;
}

.prose :where(tbody td) {
    vertical-align: baseline;
}

.prose :where(tfoot) {
    border-top-width: 1px;
    border-top-color: hsl(var(--border));
}

.prose :where(tfoot td) {
    vertical-align: top;
}

/* Prose sizes */
.prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
}

.prose-lg :where(p) {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
}

.prose-lg :where(h2) {
    font-size: 1.6666667em;
    margin-top: 1.8666667em;
    margin-bottom: 1.0666667em;
    line-height: 1.3333333;
}

.prose-lg :where(h3) {
    font-size: 1.3333333em;
    margin-top: 1.6666667em;
    margin-bottom: 0.6666667em;
    line-height: 1.5;
}

/* Max width override */
.prose.max-w-none {
    max-width: none;
}

/* ==========================================================================
   WordPress Core Styles
   ========================================================================== */

/* Pagination */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-links a {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.nav-links a:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.nav-links .current {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.nav-links .dots {
    background: transparent;
}

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: hsl(var(--background));
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: hsl(var(--foreground));
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   Animation Keyframes (from Lovable)
   ========================================================================== */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .mys-site-header,
    .mys-site-footer,
    .nav-links,
    button,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000 !important;
        background: #fff !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
    
    .prose {
        max-width: none;
    }
}

/* ==========================================================================
   Focus Visible Improvements
   ========================================================================== */
:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* ==========================================================================
   Selection Color
   ========================================================================== */
::selection {
    background-color: hsl(var(--primary) / 0.2);
    color: hsl(var(--foreground));
}

/* ==========================================================================
   Smooth Scrolling
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Logo Carousel Animation
   ========================================================================== */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

.logos-carousel {
    width: max-content;
    display: flex;
    align-items: center;
}

.logos-carousel:hover {
    animation-play-state: paused;
}