/* ==========================================================================
   modern.css
   Camada de modernização visual do site ATR Rolamentos.

   COMO USAR:
   Adicione este <link> LOGO DEPOIS do link do style.css, em todas as páginas:

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/modern.css">   <-- adicionar esta linha

   Este arquivo NÃO toca em nenhum link (<a href>), NÃO remove nenhuma
   classe e NÃO muda as cores da marca (#001A44 e #005BFF continuam
   exatamente iguais). Ele só refina sombras, cantos, espaçamento,
   tipografia e transições, reaproveitando os mesmos seletores do
   style.css original — então nada quebra.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
body {
    font-family: "Inter", "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
header nav > .wrapper > ul > li > a,
aside h2 a,
aside h3,
.thumbnails-principais h2,
.thubmnails-home h2,
.contact-form strong,
footer address span {
    font-family: "Oswald", "Trebuchet MS", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Os links do mega-menu (submenu) usam a fonte do corpo, mais legível
   em blocos densos de texto, com peso normal explícito */
header nav .dropdown .sub-menu li a,
header nav .dropdown .sub-menu2 li a {
    font-family: "Inter", "Trebuchet MS", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: normal;
}

h1 { line-height: 1.25; }
h2 { line-height: 1.35; }

article p { line-height: 1.7; }

/* --------------------------------------------------------------------------
   Header / topo
   -------------------------------------------------------------------------- */
header {
    padding-top: 24px;
}

header .logo a {
    transition: opacity 0.2s ease;
}
header .logo a:hover {
    opacity: 0.85;
}

a.tel {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}
a.tel:hover {
    background: rgba(0, 26, 68, 0.06);
}

/* Telefone: mesmo azul-marinho da barra do menu */
header .right a.tel {
    color: #001A44;
}

/* WhatsApp: verde da marca do WhatsApp */
header .right a.tel.whatsapp {
    color: #25D366;
}
header .right a.tel.whatsapp:hover {
    background: rgba(37, 211, 102, 0.1);
    color: #1DBE58;
}

/* --------------------------------------------------------------------------
   Menu principal e dropdowns
   -------------------------------------------------------------------------- */
header nav {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

header nav a {
    font-weight: 500;
    transition: background 0.25s ease, color 0.25s ease;
}

/* Dropdowns com fade + leve deslize, no lugar do display:none/block seco */
header nav .dropdown .sub-menu,
header nav .dropdown .sub-menu2 {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    overflow: visible;
}

header nav .dropdown:hover .sub-menu,
header nav .dropdown:hover .sub-menu2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Reorganiza o mega-menu "Informações" (sub-menu com 3 colunas):
   contém a largura dentro da tela, deixa mais respiro entre os itens
   e centraliza em relação ao item do menu, em vez de estourar a viewport. */
header nav .dropdown .sub-menu {
    left: 50% !important;
    width: min(700px, calc(100vw - 32px)) !important;
    max-width: 700px;
    transform: translateX(-50%) translateY(8px);
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 16px;
    padding: 16px;
}
header nav .dropdown:hover .sub-menu {
    transform: translateX(-50%) translateY(0);
}
header nav .dropdown:hover .sub-menu li {
    float: none !important;
    width: auto !important;
}
header nav .dropdown:hover .sub-menu li a {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 6px;
    line-height: 1.3;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    background: transparent !important;
}
header nav .dropdown:hover .sub-menu li a:hover {
    background: #005BFF !important;
}

/* Menu "Produtos" (sub-menu2, coluna única) só ganha mais respiro */
header nav .dropdown .sub-menu2 {
    padding: 8px;
}
header nav .dropdown:hover .sub-menu2 li a {
    padding: 9px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    border-radius: 6px;
    background: transparent !important;
}
header nav .dropdown:hover .sub-menu2 li a:hover {
    background: #005BFF !important;
}

@media (max-width: 900px) {
    header nav .dropdown .sub-menu {
        grid-template-columns: repeat(2, 1fr);
    }
}

header nav .dropdown:hover .sub-menu li a,
header nav .dropdown:hover .sub-menu2 li a {
    transition: background 0.15s ease, padding-left 0.15s ease;
}
header nav .dropdown:hover .sub-menu li a:hover,
header nav .dropdown:hover .sub-menu2 li a:hover {
    padding-left: 14px !important;
}

/* --------------------------------------------------------------------------
   Cartões de produto (thumbnails)
   -------------------------------------------------------------------------- */
.thumbnails li,
.thumbnails-principais li,
.thumbnails-marcas li {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
}

.thumbnails li:hover,
.thumbnails-principais li:hover,
.thumbnails-marcas li:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.thubmnails-home img {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}
.thubmnails-home img:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

/* --------------------------------------------------------------------------
   Sidebar (aside)
   -------------------------------------------------------------------------- */
aside h2 a {
    border-radius: 10px 10px 0 0;
}

aside li a {
    border-radius: 6px;
    margin: 3px 0;
    transition: background 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}

aside nav li a:hover,
aside li a.active {
    border-radius: 6px;
    padding-left: 10px;
}

/* --------------------------------------------------------------------------
   Linhas de listagem (.row) e galeria
   -------------------------------------------------------------------------- */
.row {
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.row:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.row img {
    border-radius: 8px;
}

.gallery li img {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery li img:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

/* --------------------------------------------------------------------------
   Tabs (#servicosTabsDois)
   -------------------------------------------------------------------------- */
#servicosTabsDois .nav li a {
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#servicosTabsDois .nav li a:hover,
#servicosTabsDois .nav li a:focus {
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Formulário de contato
   -------------------------------------------------------------------------- */
.form input,
.form textarea,
.form select {
    border-radius: 8px;
    border: solid 1px #ccc;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
    box-shadow: 0 0 0 3px rgba(0, 91, 255, 0.15);
    border-color: #005BFF;
}

.form .ir {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, transform 0.15s ease;
}
.form .ir:hover {
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
    padding: 28px 15px 20px;
}

footer .menu-footer nav li a {
    transition: color 0.2s ease;
}

footer .social .social-icons {
    border-radius: 50%;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
footer .social .social-icons:hover {
    transform: translateY(-2px);
}

.copyright-footer .selos img {
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.bread {
    border-radius: 0;
}
#breadcrumb a {
    transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Sitemap
   -------------------------------------------------------------------------- */
.sitemap li a {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 8px;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.sitemap li a:hover {
    padding-left: 12px;
}

/* --------------------------------------------------------------------------
   Página 404
   -------------------------------------------------------------------------- */
.menu-404 {
    border-radius: 12px;
}
.menu-404 a {
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.menu-404 a:hover {
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Botão do menu mobile (gerado pelo menu-mobile.js)
   -------------------------------------------------------------------------- */
.slicknav_btn {
    border-radius: 8px;
    transition: background 0.2s ease;
}

/* --------------------------------------------------------------------------
   Acessibilidade: foco visível consistente
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #005BFF;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Suaviza rolagem e reduz movimento se o usuário preferir
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}