/*
Theme Name: Jornal do Futuro Theme
Author: Lucas Salvador Bernardo
Description: Reporting tomorrow. Building what's next.
Version: 1.0
*/

/* ==========================================
   1. VARIÁVEIS E CONFIGURAÇÕES GLOBAIS
   ========================================== */
:root {
    --leaf: #67bc99;
    --light-leaf: #86dcb9;
    --navy: #1C1331;
    --ink: #0e2a24;
    --forest: #1c6b52;
    --forest-dark: #134a38;
    --paper: #faf8f3;
    --line: #484848;
    --blue-line: #1c13314d;
    --sun: #f2a541;
    --clay: #e07a52;
    --sky: #dbe9e4;
    --clound: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--paper);
}

h1, h2, h3, p, .brand {
    font-family: 'Ubuntu', serif;
}

a {
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
}

/* Utilitários de Cor */
.bg-leaf { background-color: var(--leaf); }
.bg-navy { background-color: var(--navy); }
.text-leaf { color: var(--leaf); }

/* ==========================================
   2. NAVBAR E MENU
   ========================================== */
.navbar-custom {
    background: var(--navy);
    border-bottom: 1px solid var(--line);
    padding: .9rem 0;
    margin-bottom: 30px;
}

.brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--forest-dark);
    line-height: 1.05;
}

.brand small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .6rem;
    letter-spacing: .12em;
    color: var(--forest);
    text-transform: uppercase;
}

.nav-link-custom {
    color: var(--leaf);
    font-size: .9rem;
    font-weight: 600;
    margin: 0 .55rem;
}
.nav-link-custom:hover { color: var(--light-leaf); }

.nav-search {
    padding-left: 0.85rem; 
    font-size: 0.85rem;
    width: 200px; 
    border-color: var(--line);
}

.btn-assine {
    background: var(--leaf);
    color: var(--ink);
    border-radius: 30px;
    padding: .45rem 1.2rem;
    font-size: .85rem;
    font-weight: 600;
}
.btn-assine:hover { background: var(--light-leaf); color: var(--ink); }

.btn-entrar {
    font-size: .88rem;
    font-weight: 600;
    color: var(--leaf);
}
.btn-entrar:hover { color: var(--light-leaf); }

/* Remove outline/shadow padrão do botão hambúrguer */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================
   3. HERO SECTION E CARROSSEL
   ========================================== */
.hero-full-wrapper {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hero {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    min-height: 360px;
    margin-top: -34px;
    background: linear-gradient(100deg, var(--clound) 0%, var(--clound) 34%, rgb(207 215 213 / 45%) 46%, rgba(19, 74, 56, 0) 60%);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--leaf);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero h1 {
    color: var(--ink);
    font-weight: 600;
    font-size: 2.15rem;
    max-width: 640px;
    line-height: 1.15;
    margin: .6rem 0 1rem;
}

.hero p {
    color: var(--ink);
    max-width: 520px;
    font-size: .95rem;
}

.hero-split-wrapper {
    position: relative;
    width: 100%;
    min-height: 500px;
}

.hero-img-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-text-container {
    z-index: 2;
}

.hero-image-wrapper img {
    border-radius: 10px;
}

/* Indicadores do Carrossel do Hero */
.hero-carousel .carousel-indicators {
    z-index: 10 !important;
}

.hero-carousel .carousel-indicators button {
    pointer-events: auto !important;
    cursor: pointer;
    background-color: var(--leaf);
    width: 30px;
    height: 4px;
    border-radius: 2px;
    border: none;
    opacity: 0.5;
}

.hero-carousel .carousel-indicators .active {
    opacity: 1;
    width: 45px;
}

.btn-hero-primary {
    background: var(--leaf);
    color: var(--ink);
    font-weight: 700;
    border-radius: 5px;
    padding: .55rem 1.3rem;
    font-size: .85rem;
}

.btn-hero-secondary {
    color: var(--leaf);
    font-weight: 600;
    font-size: .85rem;
}

.hero-coords {
    position: absolute;
    bottom: 3.2rem;
    right: 5.2rem;
    color: var(--leaf);
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    font-size: 14px;
}

.hero-badge {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
}

.hero-mobile-height {
    height: 380px;
}

/* ==========================================
   4. SEÇÕES, LABELS E CARDS DE TÓPICOS
   ========================================== */
.section-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    margin: 0;
}
.section-label i { color: var(--leaf); }

.ver-todas {
    font-size: .85rem;
    font-weight: 600;
    color: var(--leaf);
}

.topic-card {
    background: #fff;
    border-right: 1px solid var(--line);
    border-radius: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    transition: .15s;
    cursor: pointer;
    width: auto;
    min-width: 120px;
}
.topic-card:hover { border-color: var(--light-leaf); transform: translateY(-2px); }

.topic-icon {
    width: 38px;
    height: 38px;
    border-radius: 20px;
    background: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest-dark);
    flex-shrink: 0;
    font-size: 1rem;
}

.topic-card .t-title {
    font-weight: 700;
    font-size: .88rem;
    margin: 0;
    color: var(--ink);
}

.topic-card .t-sub {
    font-size: .75rem;
    color: #6b7a75;
    margin: 0;
}

/* ==========================================
   5. CARDS DE NOTÍCIAS E POSTS
   ========================================== */
.news-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    height: 100%;
}

.news-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.news-card .body {
    padding: 1rem;
}

.news-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--forest);
}

.news-title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
    margin: .35rem 0 .5rem;
    line-height: 1.3;
}

.news-meta {
    font-size: .72rem;
    color: #8a948f;
}

/* Configuração de Zoom e Arredondamento de Posts */
.carousel-item,
.latest-post-card {
    cursor: pointer;
}

.post-thumbnail-wrapper img {
    border-radius: 10px;
}

.default-small-border {
    border-radius: 10px;
}

.latest-post-card img {
    border-radius: 15px;
}

.latest-post-card a.overflow-hidden,
.carousel-item a.overflow-hidden,
.latest-post-card .overflow-hidden,
.carousel-item .overflow-hidden {
    overflow: hidden !important;
    border-radius: 15px !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

.latest-post-card img,
.carousel-item img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.latest-post-card:hover img,
.carousel-item:hover img {
    transform: scale(1.06);
}

.pg-title{
    color: var(--leaf) !important;
}
/* ==========================================
   6. STATS, ADS E NEWSLETTER
   ========================================== */
.stats-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem;
    height: 100%;
}
.stats-card .num {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--forest-dark);
    margin: 0;
}
.stats-card .lbl {
    font-size: .72rem;
    color: #6b7a75;
    margin-bottom: .4rem;
}
.stats-card .link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--forest);
}

.stat-blue { background: #eaf3f5; }
.stat-clay { background: #fbe9e2; }
.stat-sky { background: #e9f2ee; }

.ad-banner {
    background: linear-gradient(120deg, #fbe4d5, #f4c9c9);
    border-radius: 16px;
    padding: 1.3rem 1.5rem;
    height: 100%;
}
.ad-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a5a3a;
}
.ad-banner h5 {
    font-weight: 700;
    margin: .3rem 0 .6rem;
}

.form-control-pill {
    border-radius: 30px 0 0 30px;
    border: 1px solid #d8b7a8;
}

.btn-pill-clay {
    background: var(--clay);
    color: #fff;
    border-radius: 0 30px 30px 0;
    font-weight: 600;
}

.feature-banner {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    min-height: 220px;
    background: linear-gradient(90deg, rgba(19, 74, 56, .55), rgba(19, 74, 56, .15)), url('https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?q=80&w=1400&auto=format&fit=crop') center/cover;
    display: flex;
    align-items: center;
}
.feature-banner .content {
    color: #fff;
    padding: 2rem;
    max-width: 480px;
}
.feature-eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sun);
}

.btn-outline-cream {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 30px;
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem 1.1rem;
}
.btn-outline-cream:hover { background: #fff; color: var(--forest-dark); }

.newsletter-box {
    background: var(--sky);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

.btn-forest-sm {
    background: var(--forest);
    color: #fff;
    border-radius: 0 30px 30px 0;
    font-weight: 600;
    font-size: .85rem;
}

/* ==========================================
   7. FOOTER
   ========================================== */
footer {
    background: var(--navy);
    border-top: 1px solid var(--line);
    margin-top: 2rem;
    padding-top: 2rem;
    font-size: .85rem;
}

footer h6 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7a75;
    margin-bottom: .8rem;
}

footer a {
    color: var(--ink);
    display: block;
    margin-bottom: .5rem;
}
footer a:hover { color: var(--forest); }

.social-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    margin-right: .4rem;
}
.social-circle:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

.footer-bottom {
    border-top: 1px solid var(--line);
    margin-top: 1.5rem;
    padding: 1rem 0;
    font-size: .78rem;
    color: #8a948f;
}

/* ==========================================
   8. INPUTS E UTILITÁRIOS DE NAVEGAÇÃO
   ========================================== */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}
.border-bottom{
    border-bottom: 1px solid var(--line) !important;
}

/* Transição suave para o ícone do menu mobile */
#navTogglerIcon {
    transition: transform 0.3s ease-in-out;
}

/* Quando o menu abre, o ícone roda e dá um leve zoom */
#navTogglerIcon.is-rotating {
    transform: rotate(90deg) scale(1.1);
}

/* ==========================================
   9. MEDIA QUERIES (RESPONSIVIDADE MOBILE)
   ========================================== */
@media (max-width: 991.98px) {
    /* Altura do Hero no mobile */
    .hero-mobile-height {
        height: 220px !important;
    }

    /* Layout dividido do Hero no mobile */
    .hero-split-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }

    .hero-img-bg {
        position: relative !important;
        width: 100% !important;
        height: 250px !important;
    }

    /* Menu mobile: espaçamentos e largura total */
    .navbar-collapse .navbar-nav .nav-item,
    .navbar-collapse .nav-link-custom {
        padding-top: 10px !important;
    }

    .navbar-collapse .search-form {
        width: 100% !important;
    }

    .navbar-collapse .search-form input.form-control {
        width: 100% !important;
    }

    .navbar-collapse .btn-assine {
        width: 100% !important;
        display: block;
    }
}