/* ============================================================
   LENTE DESPORTIVA — Custom Styles
   Matches approved mockups exactly.
   ============================================================ */

/* ============ VARIABLES ============ */
:root {
    --ld-red: #C41E3A;
    --ld-red-dark: #9B1830;
    --ld-dark: #1A1A2E;
    --ld-dark-lighter: #242440;
    --ld-bg: #F5F5F0;
    --ld-card: #FFFFFF;
    --ld-amber: #E8A317;
    --ld-text: #2D2D2D;
    --ld-text-muted: #6B6B6B;
    --ld-text-light: #999999;
    --ld-border: #E0E0DB;
    --ld-f1: #E10600;
    --ld-football: #1E6BC4;
    --ld-tennis: #2D8B4E;
    --ld-basketball: #F57C00;
    --ld-motorsport: #7B1FA2;
    --ld-mma: #D84315;
    --ld-radius: 8px;
    --ld-radius-lg: 12px;
    --ld-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --ld-shadow-hover: 0 4px 12px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
}

/* ============ GLOBAL ============ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ HEADER ============ */
.site-header {
    z-index: 100 !important;
}

.site-title-custom a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Logo icon */
.logo-group {
    gap: 10px !important;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--ld-red);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    flex-shrink: 0;
}

/* ============ NAVIGATION ============ */
.main-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav .nav-item {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: color 0.2s;
}

.main-nav .nav-item:hover,
.main-nav .nav-item.active {
    color: #ffffff;
}

.main-nav .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    background: var(--ld-red);
    border-radius: 3px 3px 0 0;
}

/* Nav links container */
.nav-links {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 18px;
    flex-direction: column;
    gap: 4px;
}

.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    transition: all 0.3s;
}

/* Nav dots — colored per category */
.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.nav-dot-f1 { background: var(--ld-f1); }
.nav-dot-football { background: var(--ld-football); }
.nav-dot-tennis { background: var(--ld-tennis); }
.nav-dot-basketball { background: var(--ld-basketball); }
.nav-dot-motorsport { background: var(--ld-motorsport); }
.nav-dot-mma { background: var(--ld-mma); }

/* Header search */
.header-search .wp-block-search__input {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    border-radius: var(--ld-radius);
}

.header-search .wp-block-search__button {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.6) !important;
    border-radius: var(--ld-radius) !important;
}

/* ============ BREAKING NEWS BAR ============ */
.breaking-bar {
    background: var(--ld-dark-lighter);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 8px 0;
    overflow: hidden;
}

.breaking-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.breaking-bar__badge {
    background: var(--ld-amber);
    color: var(--ld-dark);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.breaking-bar__text {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

/* ============ LANGUAGE SWITCHER ============ */
.lang-switcher {
    display: flex;
    gap: 4px;
}

.lang-switcher a,
.lang-switcher span {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255,255,255,0.5);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.lang-switcher a:hover,
.lang-switcher .current-lang {
    color: #ffffff;
    background: var(--ld-red);
    border-color: var(--ld-red);
}

/* Light variant (article page) */
.lang-switcher--light a,
.lang-switcher--light span {
    color: var(--ld-text-muted);
    border-color: var(--ld-border);
}

.lang-switcher--light a:hover,
.lang-switcher--light .current-lang {
    color: #ffffff;
    background: var(--ld-red);
    border-color: var(--ld-red);
}

/* ============ CATEGORY BADGES ============ */
.cat-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    color: #ffffff;
    text-decoration: none;
}

.cat-badge--f1,
.cat-badge--formula-1 { background: var(--ld-f1); }
.cat-badge--football { background: var(--ld-football); }
.cat-badge--tennis { background: var(--ld-tennis); }
.cat-badge--basketball { background: var(--ld-basketball); }
.cat-badge--motorsport { background: var(--ld-motorsport); }
.cat-badge--mma { background: var(--ld-mma); }
.cat-badge--default { background: var(--ld-red); }

/* Ensure badge links are always white */
.cat-badge a,
.cat-badge--default a,
.cat-badge--f1 a,
.cat-badge--formula-1 a,
.cat-badge--football a,
.cat-badge--tennis a,
.cat-badge--basketball a,
.cat-badge--motorsport a,
.cat-badge--mma a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ============ CARDS ============ */
.lente-card {
    background: var(--ld-card);
    border-radius: var(--ld-radius-lg);
    overflow: hidden;
    box-shadow: var(--ld-shadow);
    transition: all 0.25s ease;
}

.lente-card:hover {
    box-shadow: var(--ld-shadow-hover);
    transform: translateY(-2px);
}

.lente-card a {
    text-decoration: none;
    color: inherit;
}

.lente-card__img {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}

.lente-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lente-card:hover .lente-card__img img {
    transform: scale(1.03);
}

.lente-card__img .cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.lente-card__body {
    padding: 16px;
}

.lente-card__body h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.lente-card__body p {
    font-size: 13px;
    color: var(--ld-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lente-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ld-text-muted);
}

.lente-card__meta .dot {
    width: 3px;
    height: 3px;
    background: currentColor;
    border-radius: 50%;
}

/* Hero sizing */
.hero-main {
    min-height: 480px;
}

.hero-main .lente-hero-card__content h2,
.hero-main .wp-block-post-title {
    font-size: 38px;
}

/* Hero side cards */
.hero-side-card {
    min-height: 232px;
}

.hero-side-card .lente-hero-card__content h3,
.hero-side-card .wp-block-post-title {
    font-size: 22px;
}

/* ============ ARCHIVE HERO ============ */

/* Hide "Category:" prefix from wp:query-title */
.archive-title {
    /* WP outputs "Category: Football" — we want just "Football" */
}

/* WordPress adds prefix text in a span — hide it */
.archive-hero .wp-block-query-title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 800 !important;
    font-size: 48px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}

/* Featured section */
.featured-cols {
    align-items: stretch !important;
}

/* Side cards: fill height equally */
.featured-side-col .wp-block-query {
    height: 100%;
}

.featured-side-col .wp-block-post-template {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}

.featured-side-col .featured-side-card {
    flex: 1;
    min-height: 0;
}

/* Hero cards: ensure image fills as background with gradient overlay */
.lente-hero-card {
    position: relative;
    border-radius: var(--ld-radius-lg);
    overflow: hidden;
    display: block;
}

.lente-hero-card .wp-block-post-featured-image {
    position: absolute !important;
    inset: 0;
    z-index: 0;
}

.lente-hero-card .wp-block-post-featured-image a,
.lente-hero-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lente-hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.lente-hero-card__content {
    position: relative;
    z-index: 2;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: inherit;
    height: 100%;
}

.lente-hero-card__content .wp-block-post-title,
.lente-hero-card__content .wp-block-post-title a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.lente-hero-card__content .wp-block-post-excerpt,
.lente-hero-card__content .wp-block-post-excerpt__excerpt {
    color: rgba(255,255,255,0.7) !important;
}

.lente-hero-card__content .wp-block-post-author-name,
.lente-hero-card__content .wp-block-post-date {
    color: rgba(255,255,255,0.5) !important;
}

.lente-hero-card__content .wp-block-post-terms a {
    color: #ffffff !important;
}

/* ============ ARTICLE SINGLE ============ */

/* Author chip */
.author-chip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ld-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
}

/* Meta pills */
.meta-pill {
    padding: 4px 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
}

/* ============ ARTICLE BODY ============ */
.article-content p {
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.article-content h2 {
    margin-top: 40px;
    margin-bottom: 16px;
}

.article-content blockquote,
.article-content .wp-block-quote {
    border-left: 4px solid var(--ld-red) !important;
    margin: 32px 0;
    padding: 20px 24px;
    background: var(--ld-card);
    border-radius: 0 var(--ld-radius) var(--ld-radius) 0;
    box-shadow: var(--ld-shadow);
}

.article-content blockquote p {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 8px;
}

.article-content blockquote cite {
    font-size: 13px;
    color: var(--ld-text-muted);
    font-style: normal;
    font-weight: 600;
}

.article-content figure {
    margin: 32px 0;
    border-radius: var(--ld-radius-lg);
    overflow: hidden;
}

.article-content figcaption {
    padding: 10px 0;
    font-size: 12px;
    color: var(--ld-text-light);
    font-style: italic;
}

/* Article featured image (non-hero fallback) */
.article-featured-img {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 24px;
}

.article-featured-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 21/9;
    object-fit: cover;
    border-radius: 12px;
}

/* Sources box */
.sources-box {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    padding: 20px 24px;
    margin: 32px 0;
}

.sources-box h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--ld-text-muted);
}

.sources-box ul {
    list-style: none;
    padding: 0;
}

.sources-box li {
    padding: 6px 0;
    border-bottom: 1px solid var(--ld-border);
    font-size: 13px;
}

.sources-box li:last-child {
    border-bottom: none;
}

/* Tags */
.article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--ld-border);
}

.article-tags a {
    padding: 5px 12px;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ld-text-muted);
    text-decoration: none;
    transition: all 0.2s;
}

.article-tags a:hover {
    border-color: var(--ld-red);
    color: var(--ld-red);
}

/* Share bar */
.share-bar {
    display: flex;
    gap: 8px;
    padding: 20px 0;
    border-top: 1px solid var(--ld-border);
    border-bottom: 1px solid var(--ld-border);
    margin: 32px 0;
}

.share-btn {
    padding: 8px 16px;
    border-radius: var(--ld-radius);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ld-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.share-btn:hover {
    border-color: var(--ld-text-muted);
    color: var(--ld-text);
}

/* ============ LIST CARDS (Latest section) ============ */
.list-card {
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.list-card .wp-block-post-featured-image {
    border-radius: var(--ld-radius);
    overflow: hidden;
}

.list-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============ FEATURED ARCHIVE LAYOUT ============ */
.featured-main {
    min-height: 380px;
}

.featured-main .lente-hero-card__content h2,
.featured-main .wp-block-post-title {
    font-size: 30px;
}

.featured-side-card {
    min-height: 182px;
}

.featured-side-card .lente-hero-card__content h3,
.featured-side-card .wp-block-post-title {
    font-size: 18px;
}

/* ============ SIDEBAR BOXES ============ */
.sidebar-box {
    background: var(--ld-card);
    border-radius: var(--ld-radius-lg);
    padding: 20px;
    box-shadow: var(--ld-shadow);
}

.sidebar-box h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Most Read / Trending — numbered list */
.most-read-list .wp-block-post-template {
    counter-reset: most-read;
}

.most-read-item {
    counter-increment: most-read;
}

.most-read-item::before {
    content: counter(most-read);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--ld-border);
    line-height: 1;
    min-width: 24px;
}

.most-read-item:last-child {
    border-bottom: none !important;
}

.most-read-item h5 a {
    text-decoration: none;
}

.most-read-item h5 a:hover {
    color: var(--ld-red) !important;
}

/* Newsletter box */
.newsletter-box {
    background: var(--ld-dark) !important;
    color: #ffffff;
}

.newsletter-box h4 {
    color: #ffffff;
}

.newsletter-box p {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.newsletter-box input[type="email"] {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--ld-radius);
    color: #ffffff;
    font-size: 13px;
}

.newsletter-box input[type="email"]::placeholder {
    color: rgba(255,255,255,0.35);
}

.newsletter-box input[type="email"]:focus {
    border-color: var(--ld-red);
    outline: none;
}

/* ============ SECTION HEADERS ============ */
.section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ============ PAGINATION ============ */
.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 40px;
}

.wp-block-query-pagination-numbers .page-numbers {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ld-radius);
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--ld-text-muted);
    text-decoration: none;
    transition: all 0.2s;
}

.wp-block-query-pagination-numbers .page-numbers:hover {
    border-color: var(--ld-text-muted);
    color: var(--ld-text);
}

.wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--ld-red);
    border-color: var(--ld-red);
    color: #ffffff;
}

/* ============ FOOTER ============ */
.site-footer .footer-links {
    list-style: none !important;
    padding: 0 !important;
}

.site-footer .footer-links li {
    margin-bottom: 8px;
}

.site-footer .footer-links a {
    color: rgba(255,255,255,0.5) !important;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.site-footer .footer-links a:hover {
    color: #ffffff !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .hero-main {
        min-height: 380px;
    }

    .hero-side-card {
        min-height: 200px;
    }

    .featured-main {
        min-height: 280px;
    }

    .article-hero .wp-block-cover {
        min-height: 360px !important;
    }

    .article-hero .wp-block-cover__inner-container {
        min-height: 360px;
    }

    .article-hero .wp-block-cover__inner-container h1 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    /* Hamburger visible */
    .nav-toggle {
        display: flex;
    }

    /* Nav links hidden by default, shown when open */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--ld-dark);
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .main-nav {
        flex-wrap: wrap;
    }

    .main-nav.is-open .nav-links {
        display: flex;
    }

    .main-nav.is-open .nav-links .nav-item {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Animate hamburger to X when open */
    .main-nav.is-open .nav-toggle__bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .main-nav.is-open .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    .main-nav.is-open .nav-toggle__bar:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }
}

@media (max-width: 640px) {
    .hero-main {
        min-height: 300px;
    }

    .hero-main .lente-hero-card__content h2,
    .hero-main .wp-block-post-title {
        font-size: 26px;
    }

    .featured-main {
        min-height: 240px;
    }

    .article-content p {
        font-size: 16px;
    }

    .lang-switcher {
        display: none;
    }

    .breaking-bar__text {
        font-size: 12px;
    }
}