/* ========================================================================
   Component: Base
 ========================================================================== */
html {
    height: 100%;
    /* Compensa o header fixo ao navegar para ancoras (#id) — substitui o
       antigo ajuste via JavaScript. O valor e atualizado pelo template.js
       conforme a altura real do header. */
    scroll-padding-top: var(--generico-header-height, 80px);
    /* Scroll suave respeitando quem prefere movimento reduzido (ver media query). */
    scroll-behavior: smooth;
}

body.site {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-family: var(--familia-fonte-primaria, system-ui, sans-serif);
    font-size: var(--tamanho-base-fonte, 1rem);
    font-weight: var(--peso-fonte-normal, 400);
    color: var(--cor-texto, #222222);
    background-color: var(--cor-superficie-clara, #FFFFFF);
    line-height: 1.6;
}

#main-content {
    flex-grow: 1;
}

/* Container "boxed" com largura maxima configuravel no admin. */
@media (min-width: 1200px) {
    .container {
        max-width: var(--generico-container-max-width, 1140px);
    }
}

a {
    color: var(--cor-cta, #2F80ED);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: var(--cor-primaria, #1F4E79);
    text-decoration: underline;
    outline: none;
}

/* Tipografia fluida: escala suavemente entre mobile e desktop sem media queries. */
h1, .h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); }
h3, .h3 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--peso-fonte-titulos, 700);
    color: var(--cor-primaria, #1F4E79);
    margin-top: var(--espacamento-vertical-global, 2rem);
    margin-bottom: 1rem;
    line-height: 1.25;
    overflow-wrap: break-word;
}

p {
    margin-bottom: 1rem;
}

/* Midia nunca estoura o container — base de responsividade. */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

hr {
    border-color: var(--cor-borda, #E5E7EB);
    margin: var(--espacamento-vertical-global, 2rem) 0;
}

#Passkey {
    display: none;
}


/* ========================================================================
   Component: Header
 ========================================================================== */
.header {
    background-color: var(--cor-superficie-clara-topo, #FFFFFF);
    transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* z-index acima do conteudo quando fixo (sticky-top do Bootstrap ja cuida do flow). */
.header.sticky-top {
    z-index: 1030;
}

.header .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

/* Header Height Variants */
.header.header-compact .navbar {
    min-height: 50px;
}

.header.header-normal .navbar {
    min-height: 80px;
}

/* Encolhe levemente o header ao rolar (classe adicionada via template.js). */
.header.is-scrolled .navbar {
    min-height: 50px;
}

.header .navbar-brand .site-title {
    color: var(--cor-primaria, #1F4E79);
    font-weight: var(--peso-fonte-titulos, 700);
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
}

.header .navbar-brand img {
    height: auto;
    transition: max-height 0.3s ease-in-out;
}

/* ========================================================================
   Component: Forms & Buttons
 ========================================================================== */
.btn-primary {
    background-color: var(--cor-cta, #2F80ED);
    border-color: var(--cor-cta, #2F80ED);
    border-radius: var(--raio-borda-global, 4px);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cor-primaria, #1F4E79);
    border-color: var(--cor-primaria, #1F4E79);
}

.btn-secondary {
    background-color: var(--cor-secundaria, #2E7D32);
    border-color: var(--cor-secundaria, #2E7D32);
    color: #fff;
    border-radius: var(--raio-borda-global, 4px);
}

.btn-secondary:hover,
.btn-secondary:focus {
    opacity: 0.9;
}

.form-control,
.form-select {
    border-radius: var(--raio-borda-global, 4px);
    border-color: var(--cor-borda, #E5E7EB);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cor-cta, #2F80ED);
    /* Usa a tripla RGB gerada no helper.php — rgba() nao aceita hex em var(). */
    box-shadow: 0 0 0 0.25rem rgba(var(--cor-cta-rgb, 47, 128, 237), 0.25);
}


/* ========================================================================
   Component: Joomla Specific
 ========================================================================== */
/* Cards explicitos e modulos no conteudo principal/sidebars recebem o estilo
   de cartao. Evita "encartonar" menu, busca e footer (que tem layout proprio). */
.card,
#component-area div.moduletable,
#component-area div.module,
#sidebar-left div.moduletable,
#sidebar-left div.module,
#sidebar-right div.moduletable,
#sidebar-right div.module {
    background-color: var(--cor-superficie-alt, #F5F7FA);
    border: 1px solid var(--cor-borda, #E5E7EB);
    border-radius: var(--raio-borda-global, 4px);
    padding: var(--espaco-interno-card, 1.5rem);
    margin-top: var(--margin-topo-card, 10px);
    margin-bottom: var(--espacamento-vertical-global, 2rem);
}

div.card .card-header {
    margin-top: var(--margin-topo-titulo-card, 10px);
    margin-bottom: var(--espacamento-vertical-global, 2rem);
}

.alert {
    border-radius: var(--raio-borda-global, 4px);
}

/* Breadcrumbs */
.breadcrumb {
    background-color: var(--cor-superficie-alt, #F5F7FA);
    padding: 0.75rem 1rem;
    border-radius: var(--raio-borda-global, 4px);
}

/* ========================================================================
   Component: Footer
 ========================================================================== */
.footer {
    background-color: var(--cor-footer, #0F172A);
    color: var(--cor-texto-secundario, #6B7280);
    padding-top: var(--espacamento-vertical-global, 2rem);
    padding-bottom: var(--espacamento-vertical-global, 2rem);
    min-height: var(--footer-min-height, 300px);
}

.footer a {
    color: var(--cor-superficie-clara, #FFFFFF);
}

.footer a:hover,
.footer a:focus {
    color: var(--cor-cta, #2F80ED);
}

.footer .module-title,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5 {
    color: var(--cor-superficie-clara, #FFFFFF);
    font-weight: var(--peso-fonte-titulos, 700);
    margin-bottom: 1rem;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

/* ========================================================================
   Accessibility
 ========================================================================== */
:focus-visible {
  outline: 3px solid var(--cor-cta, #2F80ED);
  outline-offset: 2px;
  border-radius: var(--raio-borda-global, 4px);
}

/* Respeita usuarios que pedem menos movimento (sistema operacional). */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


@media (width >= 992px) {
    .col-lg-3 {
        flex: none;
        width: var(--col-lg-fixed-width, 280px);
    }
}

/* ========================================================================
   Component: Mobile Menu (Offcanvas Full Width)
 ========================================================================== */
#mobileMenuArea.offcanvas {
    background-color: var(--cor-superficie-clara, #FFFFFF);
}

#mobileMenuArea .offcanvas-header {
    background-color: var(--cor-superficie-alt, #F5F7FA);
}

#mobileMenuArea .offcanvas-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

#mobileMenuArea .moduletable,
#mobileMenuArea .module {
    margin-bottom: 2rem;
    background: transparent;
    border: none;
    padding: 0;
}

/* ========================================================================
   Component: Sidebars (Desktop Only)
 ========================================================================== */
@media (min-width: 992px) {
    .sidebar-content {
        position: sticky;
        top: calc(var(--generico-header-height, 80px) + 1.5rem);
    }
}

/* ========================================================================
   Color scheme: Dark mode (data-bs-theme="dark" no <html>)
   Preserva as cores de marca (primaria/secundaria/cta) definidas no admin e
   apenas inverte superficies e texto, aproveitando o suporte nativo do
   Bootstrap 5.3 a data-bs-theme.
 ========================================================================== */
[data-bs-theme="dark"] {
    --cor-texto: #E5E7EB;
    --cor-texto-secundario: #9CA3AF;
    --cor-superficie-clara: #0F172A;
    --cor-superficie-clara-topo: #111827;
    --cor-superficie-alt: #1E293B;
    --cor-borda: #334155;
    color-scheme: dark;
}

[data-bs-theme="dark"] .footer {
    border-top: 1px solid var(--cor-borda, #334155);
}