/*!
Theme Name: Museu-do-Carro-Eletrico
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: museu-do-carro-eletrico
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Museu-do-Carro-Eletrico is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Custom Post Navigation Arrows */
.custom-post-navigation {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.nav-left,
.nav-right {
    flex: 1;
    display: flex;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}

/* Arrow Button Styling */
.nav-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #03ba00 0%, #1f8700 100%);
    color: white;
    text-decoration: none;
    border-radius: 50%;
    font-size: 1.8em;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 186, 31, 0.77);
    position: relative;
    overflow: hidden;
}

.nav-arrow-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(74, 186, 0, 0.4);
    background: linear-gradient(135deg, #028700 0%, #03dc24 100%);
}

.nav-arrow-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(83, 205, 1, 0.799);
}

/* Arrow Icon */
.nav-arrow-btn .arrow {
    font-family: 'Arial', sans-serif;
    font-size: 1em;
    line-height: 1;
    transition: transform 0.3s ease;
}

.nav-arrow-btn:hover .arrow {
    transform: scale(1.1);
}

/* Individual button styling */
.nav-prev:hover .arrow {
    transform: translateX(-2px) scale(1.1);
}

.nav-next:hover .arrow {
    transform: translateX(2px) scale(1.1);
}

/* Ripple Effect */
.nav-arrow-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.nav-arrow-btn:hover::before {
    width: 100%;
    height: 100%;
}

/* Accessibility Focus */
.nav-arrow-btn:focus {
    outline: 3px solid rgba(132, 189, 0, 0.5);
    outline-offset: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .custom-post-navigation {
        margin: 2rem 0;
        padding: 1.5rem 0;
    }
    
    .nav-arrow-btn {
        width: 50px;
        height: 50px;
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 1rem;
    }
    
    .nav-arrow-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
    }
}

/* Optional: Add tooltips on hover */
.nav-arrow-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    animation: fadeInTooltip 0.3s ease forwards;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.header-lang-switcher {
  display: inline-block;
  margin-left: 0;
}

.header-lang-switcher a.gt-current-lang {
  display: none !important;
}

.header-lang-switcher a {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: inherit !important;
  text-decoration: none !important;
}

.header-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-lang-switcher .lang-switch-icon img {
  width: 20px;
  height: auto;
  display: block;
}

/* ===============================
   PAINEL DE BOAS-VINDAS – MUSEU
================================ */

.mce-welcome-panel {
  max-width: 900px;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 48px 56px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 48px;
}

.mce-welcome-logo {
  flex: 0 0 180px;
  text-align: center;
}

.mce-welcome-logo img {
  max-width: 160px;
  height: auto;
}

.mce-welcome-content {
  flex: 1;
}

.mce-welcome-content h1 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 16px;
  font-weight: 700;
  color: #1f2933;
}

.mce-welcome-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 24px;
}

.mce-welcome-highlight {
  background: #f3f6f9;
  border-left: 4px solid #1f2933;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px;
  color: #374151;
}

@media (max-width: 768px) {
  .mce-welcome-panel {
    flex-direction: column;
    padding: 32px 28px;
    gap: 32px;
  }

  .mce-welcome-content h1 {
    font-size: 26px;
  }
}

.good-know-icon img {
	width: 100%;
    max-width: 31px;
}

.event-date-label {
    font-weight: 600;
}

.event-date-label:contains("Brevemente") {
    color: #c00;
}

.nav-item .active {
	background: #2B453D;
    border-color: #2B453D;
    color: #fff;
}