/* 🌈========================================
   🌟 Variáveis de Tema (Cores e Tipografia)
   ======================================== */
:root {
  --color-gazeta-primary: #0088c2;
  --color-gazeta-publico: #0088c2;
  --color-gazeta-global: #00702a;
  --color-gazeta-esportes: #ec6608;
  --color-gazeta-politica: #8e0000;
  --color-gazeta-economia: #00538a;
  --color-gazeta-cultura: #7a3e9c;
  --color-gazeta-opiniao: #e31b23;
  --color-gazeta-policial: #ff0000;
  --color-gazeta-mais: #e6007e;
  --font-sans: "Roboto", sans-serif;
  --font-heading: "Oswald", sans-serif;
}

/* 🛠️==================================================
   Tailwind Base, Componentes e Utilitários
   ================================================== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 🧩===============================================
   Ajustes Gerais no HTML para Todos os Dispositivos
   ================================================ */
@media screen { html { margin-top: 0 !important; } }
@media screen and ( max-width: 782px ) { html { margin-top: 0 !important; } }

/* ✍️====================================================
   Fontes Personalizadas (Webfonts via @font-face)
   ==================================================== */
@font-face {
    font-family: "Glosa Text Roman";
    src: url("https://db.onlinewebfonts.com/t/ee366e3884617dc836743c298d3bde85.eot");
    src: url("https://db.onlinewebfonts.com/t/ee366e3884617dc836743c298d3bde85.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/ee366e3884617dc836743c298d3bde85.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/ee366e3884617dc836743c298d3bde85.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/ee366e3884617dc836743c298d3bde85.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/ee366e3884617dc836743c298d3bde85.svg#Glosa W01 Text Roman")format("svg");
}
@font-face {
    font-family: "Glosa Headline Bold";
    src: url("https://db.onlinewebfonts.com/t/b9060229b9cfdae408088d2665a6b1c6.eot");
    src: url("https://db.onlinewebfonts.com/t/b9060229b9cfdae408088d2665a6b1c6.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/b9060229b9cfdae408088d2665a6b1c6.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/b9060229b9cfdae408088d2665a6b1c6.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/b9060229b9cfdae408088d2665a6b1c6.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/b9060229b9cfdae408088d2665a6b1c6.svg#Glosa W01 Headline Bold")format("svg");
}

/* Ocultar Barra de Administração do WordPress */
#wpadminbar { display:none; }

/* Botões de Compartilhamento */
details {
    position: relative;
    cursor: pointer;
}
details > summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display:none !important;
}
details>summary+* {
    position: absolute;
    display: block;
    z-index: 1;
    width: 260px;
    border: 1px solid teal;
    border-radius: 5%;
    padding: 10px;
    background: #fff;
    top: calc(.5rem + 100%);
    right: 50%;
    transform: translateX(50%);
}
.button-share {
    background-color: #aaa;
    border: none;
    border-radius: 5px;
    margin: 0 3px;
    box-shadow: 0 2px 0 #888,1px 4px 2px rgba(0,0,0,.2);
    color: #fff;
    display: block;
    font-family: sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    outline: 0;
    padding: 5px 0;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2);
    width: 100%
}
.button-share[data-sharer=twitter] {
    background-color: #00aced;
    box-shadow: 0 2px 0 #0084b4,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=facebook] {
    background-color: #3b5998;
    box-shadow: 0 2px 0 #224389,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=linkedin] {
    background-color: #007ab5;
    box-shadow: 0 2px 0 #005e8c,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=googleplus] {
    background-color: #dd4c39;
    box-shadow: 0 2px 0 #bb2d1a,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=email] {
    background-color: #444;
    box-shadow: 0 2px 0 #222,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=whatsapp] {
    background-color: #4dc247;
    box-shadow: 0 2px 0 #30af29,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=telegram] {
    background-color: #34ade1;
    box-shadow: 0 2px 0 #0e9bd8,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=viber] {
    background-color: #7c529e;
    box-shadow: 0 2px 0 #5f3485,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=pinterest] {
    background-color: #cb2029;
    box-shadow: 0 2px 0 #a30e15,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=tumblr] {
    background-color: #32506d;
    box-shadow: 0 2px 0 #1f3c59,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=hackernews] {
    background-color: #ff6700;
    box-shadow: 0 2px 0 #c65000,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=reddit] {
    background-color: #cee3f8;
    box-shadow: 0 2px 0 #a2c6e8,1px 4px 2px rgba(0,0,0,.2);
    color: #335f89
}
.button-share[data-sharer=vk] {
    background-color: #45668e;
    box-shadow: 0 2px 0 #2b4e77,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=buffer] {
    background-color: #46abed;
    box-shadow: 0 2px 0 #2198e5,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=xing] {
    background-color: #006464;
    box-shadow: 0 2px 0 #135353,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=line] {
    background-color: #1dcd00;
    box-shadow: 0 2px 0 #1dcd00,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=digg] {
    background-color: #1b568e;
    box-shadow: 0 2px 0 #1b568e,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=pocket] {
    background-color: #ee4056;
    box-shadow: 0 2px 0 #ee4056,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=stumbleupon] {
    background-color: #eb4924;
    box-shadow: 0 2px 0 #eb4924,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=flipboard] {
    background-color: #e02828;
    box-shadow: 0 2px 0 #e02828,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=weibo] {
    background-color: #e6162d;
    box-shadow: 0 2px 0 #e6162d,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=renren] {
    background-color: #005eac;
    box-shadow: 0 2px 0 #005eac,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=myspace] {
    background-color: #111;
    box-shadow: 0 2px 0 #111,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=blogger] {
    background-color: #eb8104;
    box-shadow: 0 2px 0 #eb8104,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=baidu] {
    background-color: #2319dc;
    box-shadow: 0 2px 0 #2319dc,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=okru] {
    background-color: #ee8208;
    box-shadow: 0 2px 0 #ee8208,1px 4px 2px rgba(0,0,0,.2)
}
.button-share[data-sharer=trello] {
    background-color: #00aced;
    box-shadow: 0 2px 0 #0084b4,1px 4px 2px rgba(0,0,0,.2)
}
.button-share:active {
    box-shadow: 0 0 0 transparent;
    transform: translateY(2px)
}
.button-share:hover {
    text-decoration: none;
    transition: all .2s ease-in-out;
    transform: scale(1.1)
}

/* 🧍===================================
   Estilos Globais do Body
   =================================== */
body {
    /* font-family: 'Glosa Text Roman', 'Oswald', sans-serif; */
    font-family: sans-serif;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #202020;
    background-color: #f9f9f9;
}
#article a {
    color:var(--color-gazeta-primary);
}

/* 🧢=============================
   Cabeçalho Principal
   ============================= */
.header {
    position: relative;
    z-index: 1000;
}
.header #desktop-logo img {
    max-width: 410px;
}
#top-bar {
    border-bottom: 1px solid #e1e1e1;
}
#main-menu {
    background-color: #000;
    color: #fff;
}
.desktop-canvas-overlay {
    opacity: 0;
    z-index: -1
}
.desktop-canvas-overlay.show {
    opacity: .85;
    z-index: 1100
}
.desktop-canvas-anim {
    transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out
}
.search-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 9999;
    display: none;
}
.search-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
}
.editory-border {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    top: -8px;
    left: 0;
    right: 0;
    opacity: 0;
}
.group-hover\:block {
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.group:hover .group-hover\:block {
    opacity: 1;
}
.header .dropdown {
    padding: .3rem 1rem
}
.header .dropdown .nav-user-img img {
    margin-right: 10px
}
.header .dropdown-menu li {
    border-bottom: 1px solid #ccc
}
.header .dropdown-menu li a {
    color: #202020;
    font-size: .85rem;
    font-weight: 400;
    display: block;
    padding: 5px
}
.header .dropdown-menu li a i {
    color: #ccc
}
.header .dropdown-menu li:last-child {
    border-bottom: none
}

/* 🖋️=======================================
   Seção de Colunistas (Carrossel e Avatares)
   ======================================== */
.carousel-colunistas {
    background: #f9f9f9;
}

/* Mobile: Clean layout, no borders/shadows */
@media (max-width: 1023px) {
    .carousel-colunistas {
        background: transparent;
    }
    .carousel-colunistas .carousel-cell {
        width: 50% !important;
        margin-right: 0;
        background: transparent;
        border-radius: 0;
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: none;
        border: none;
    }
}

/* Desktop: Keep original styling */
@media (min-width: 1024px) {
    .carousel-colunistas .carousel-cell {
        width: 25% !important;
        margin-right: 16px;
        background: white;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}
.colunista-avatar {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}
.colunista-info {
    flex: 1;
}
.colunista-info strong {
    display: block;
    font-size: 1rem;
}
.social-icons {
    margin-top: 4px;
}
.social-icons a {
    margin-right: 4px;
    color: #333;
}
.post-slider .carousel-cell {
    width: 100%;
    height: 500px;
}
@media (max-width: 768px) {
    .post-slider .carousel-cell {
        height: 300px;
    }
}

/* 🖼️=============================
   Seção: Slider de Destaques
   ============================= */
.fill {
    min-height: 100%;
    height: 100%;
}
#home-slider .carousel-cell {
    height: 500px !important;
}
#home-slider .carousel-cell figure,
#home-slider .carousel-cell img {
    height: 500px !important;
    max-height: 500px !important;
}
#home-slider .flickity-viewport {
    height: 500px !important;
}
#home-slider .entry-content {
    position: relative;
    z-index: 2;
}
#home-slider .entry-content h2 a {
    font-family: Libre Franklin, sans-serif;
    font-size: 1.6rem;
    color: #fff;
}
#home-slider .entry-content .category ul li a {
    font-family: Libre Franklin, sans-serif;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: .7rem;
    text-transform: uppercase;
}
#home-slider .carousel-cell:after {
    content: "";
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, transparent 0, #000 77%, #000);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
#home-slider .entry-content .control-slide {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
}
@media (max-width: 640px) {
    #home-slider .entry-content {
        padding-right: 1rem;
        font-size: 0.875rem;
    }
    #home-slider .entry-title {
        font-size: 1.5rem;
    }
}

/* 🚨=================================
   Destaques (Breaking News e Posts)
   ================================== */

/* Últimas Notícias */
#breaking-news .flickity-page-dots,
#breaking-news .flickity-button {
    display: none !important;
}
.sg-post {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #fff;
    -ms-box-shadow: 0 6px 12px rgba(0,0,0,.075);
    -o-box-shadow: 0 6px 12px rgba(0,0,0,.075);
    box-shadow: 0 6px 12px rgba(0,0,0,.075);
    border: 1px solid #ccc
}

.sg-post:hover .entry-thumbnail img {
    transition: all .3s ease 0s;
    -khtml-transform: scale(1.1);
    transform: scale(1.1)
}

.sg-post .entry-post-category {
    margin-right: 10px
}

.sg-post .entry-post-category li {
    margin-top: 2px;
    margin-right: 2px
}

.sg-post .entry-post-category li:last-child {
    margin-right: 0
}

.sg-post .entry-post-category a {
    font-family: sans-serif;
    font-size: .825rem;
    text-transform: uppercase;
    font-weight: 700;
    display: block
}

.sg-post .entry-post-category .shared-post a,.sg-post .entry-post-category .shared-post details[data-popover]>summary {
    font-size: 14px;
    color: #6a6a6a;
    margin: 0 5px
}

.sg-post .entry-post-category .date-post a {
    font-family: Libre Franklin,sans-serif;
    font-size: .625rem;
    font-weight: 700;
    color: #6a6a6a;
    display: block
}

.sg-post .entry-post-category .date-post a:hover {
    color: #0088c2
}

.sg-post .entry-content {
    padding: 10px 15px;
    font-size: 14px
}

.sg-post .entry-content:before {
    content: "";
    display: table;
    table-layout: fixed
}

.sg-post .entry-content p {
    margin-bottom: 0
}

.sg-post .entry-title {
    font-size: 14px;
    font-weight: 500
}

/* Posts Populares */
#popular_posts .popular_post_item {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
#popular_posts .popular_post_item:last-child {
    border-bottom: none;
}

/* 🦶=======================
   Estilo do Rodapé (Hover)
   ======================== */
#main-footer .nav-link {
    padding: 0 !important;
    color: #fff !important;
}
#main-footer .nav-link:hover {
    color: #000 !important;
}
#main-footer .nav-link .editory-border {
    display: none !important;
}
#main-footer a:hover {
    color: #000;
}
#main-footer .social-media li a {
    background-color: #fff !important;
    color: var(--color-gazeta-primary) !important;
}
#main-footer .social-media li a:hover {
    background-color: #000 !important;
    color: #fff !important;
}

/* Botão de Voltar ao Topo */
.scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #0088c2;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 999;
}
.scrollToTop.visible {
    opacity: 1;
}
.scrollToTop i {
    font-size: 24px;
}

/* 📋===========================
   Menu Principal de Navegação
   =========================== */
.nav-item {
    position: relative;
    padding: 0;
}
.nav-link {
    /* font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 10px 0;
    position: relative;
    display:block;
    transition: color 0.3s ease; */
    @apply relative block py-2 px-4 text-sm font-bold;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
/* .nav-link .editory-border {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    transition: all 0.3s ease;
    transform: scaleX(0);
} */
.editory-border {
  height: 3px;
  @apply block w-full mt-1 bg-current;
}
/* .nav-item:hover .editory-border {
    transform: scaleX(1);
} */
.nav-item:hover .editory-border {
  @apply scale-x-100;
  opacity: 1;
}

/* 🎨=========================
   Cores por Editoria (Tags)
   ========================= */
.editoria-publico { color: #0088c2; }
.editoria-global { color: #00702a; }
.editoria-esportes { color: #ec6608; }
.editoria-politica { color: #8e0000; }
.editoria-economia { color: #00538a; }
.editoria-cultura { color: #7a3e9c; }
.editoria-opiniao { color: #e31b23; }

/* 📰============================ 
   Layout de Posts
   ============================ */
.post-card {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.post-card .post-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 10px;
}
.post-card .post-excerpt {
    font-family: 'Roboto', sans-serif;
    color: #555;
    line-height: 1.5;
}

/* 🎞️==========================
   Slider Principal (Estático)
   =========================== */
.main-slider .flickity-slider {
    align-items: flex-end;
}
.main-slider .slide {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
}

/* Gcast - Home */
#gcast > div {
    background-color: #e1e1e1;
}

/* Política & CIA - Home */
#political-notes li h4 {
    font-size:1rem; 
    margin-right:10px;
    font-weight: 700;
}

/* Jornal - Home */
.left-home-sidebar-journal {
    text-align: center;
    background: #7fcae6;
    padding: 20px;
    overflow: hidden;
    height: 280px;
    box-shadow: inset 0px 0px 10px 0px #6a99aa;
    margin-top: 15px;
    margin-bottom: 20px;
}
.left-home-sidebar-journal a img {
    max-width: 100%;
    transform: rotate(-10deg);
    margin-top: -20px;
    margin-left: 30px;
    box-shadow: -7px 20px 14px 6px #6bacc4;
}
.left-home-sidebar-journal a:hover img {
    max-width: 110%;
    transform: rotate(-15deg);
    margin-top: -30px;
    margin-left: 40px;
    box-shadow: -7px 20px 14px 6px #6bacc4;
}

/* Responsividade */
@media (max-width: 768px) {
    .main-slider .slide {
        height: 300px;
    }
    .nav-link {
        font-size: 12px;
    }
}

/* 🛠️==================================================
   Página de Categoria
   ================================================== */
.post-card {
    @apply mb-6;
}
.main-headline .post-title {
    @apply text-3xl font-heading font-bold mb-2;
}
.main-bodyline .post-title {
    @apply text-xl font-heading font-bold mb-2;
}
.post-title a {
    @apply hover:underline;
}
.post-excerpt {
    @apply text-gray-600 mb-3 text-base leading-relaxed;
}
.post-meta ul {
    @apply flex flex-wrap gap-2;
}
.post-meta a {
    @apply text-gray-500 hover:underline;
}
.post-card img {
    @apply w-full h-auto rounded-sm;
}
.btn-load-more {
    @apply px-4 py-2 rounded-sm font-medium;
}
/* 🛠️==================================================
   Sidebar
   ================================================== */
.sidebar-widget {
    @apply mb-6;
}
.widget-title {
    @apply text-2xl font-heading font-bold mb-4;
}
.widget-newsletter p {
    @apply text-gray-600 mb-4;
}
.widget-newsletter form input {
    @apply w-full p-2 border border-gray-300 rounded-sm mb-2;
}
.widget-newsletter form button {
    @apply w-full bg-gazeta-primary text-white p-2 rounded-sm hover:bg-opacity-80;
}
.widget-popular_post ul li {
    @apply flex mb-4;
}
.widget-popular_post img {
    @apply w-full h-auto rounded-sm;
}
.widget-popular_post p {
    @apply text-sm mb-1;
}
.widget-popular_post .post-meta {
    @apply text-xs text-gray-500;
}

/* 🛠️==================================================
   Página de Posts (single.php)
   ================================================== */
#article .content-signature {
    margin: 2.5rem 2.5rem 2.5rem 0;
}
#article .content-signature .content-publication-data-from {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .2rem;
    line-height: 1
}

#article .content-signature .content-publication-data-updated {
    font-size: .75rem;
    line-height: 1rem;
    margin: 0
}

#article #listen-post,.author-section h1 {
    margin-bottom: 40px
}
#article #comment {
    min-height: calc(1.5em + .75rem + 2px);
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#article .comment-form-comment {
    margin-top:20px;
}
#article #reply-title {
    font-size: 1.5rem;
}
#article .logged-in-as {
    font-size: 1rem;
}
#article aside h3 {
    font-size: 1.2rem;
    color: var(--color-gazeta-primary);
    font-weight: 700;
}
#article aside .global-list {
    padding: 0;
}
#article aside .global-list>li {
    list-style: none;
    margin-right: 2px;
    margin-bottom: 15px;
}
#article aside .global-list>li>a {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #fff;
    -ms-box-shadow: 0 6px 12px rgba(0,0,0,.075);
    -o-box-shadow: 0 6px 12px rgba(0,0,0,.075);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .075);
    border: 1px solid #ccc;
}
#article aside .global-list>li a:hover {
    background-color: var(--color-gazeta-publico);
    color:#fff;
}
#article aside .global-list>li a span {
    padding: 10px 15px;
    font-size: 14px;
}

#article aside .global-list img[sizes="auto"],
#article aside .global-list img[sizes^="auto,"] {
  contain-intrinsic-size: unset !important;
}