/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL.CSS — A Trilha dos Campeões 18
   Carregado em TODAS as páginas do projeto.
   Use este arquivo para ajustes globais de fonte, cor, reset e utilitários.
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ─── Fonte ColourSans (arquivos em public/assets/css/) ─────────────────────── */
@font-face {
    font-family: 'ColourSans';
    src: url('./ColourSans-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ColourSans';
    src: url('./ColourSans.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ColourSans';
    src: url('./coloursans-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ColourSans';
    src: url('./ColourSans-Bold.otf') format('opentype');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}


/* ─── Variáveis globais ──────────────────────────────────────────────────────── */
:root {
    /* Paleta principal */
    --g-cor-primaria:   #6b9ad1;
    --g-cor-escura:     #1a2a4a;
    --g-cor-branca:     #ffffff;
    --g-cor-cinza:      #f4f6fb;
    --g-cor-texto:      #333333;
    --g-cor-borda:      #dce3f0;

    /* Tipografia */
    --g-font:           'ColourSans', 'Segoe UI', Arial, sans-serif;
    --g-font-size-base: 16px;
    --g-line-height:    1.6;

    /* Espaçamentos */
    --g-radius:         10px;
    --g-radius-lg:      16px;
    --g-shadow:         0 2px 10px rgba(0,0,0,.08);
    --g-shadow-lg:      0 4px 24px rgba(0,0,0,.12);

    /* Transição padrão */
    --g-transition:     .2s ease;
}


/* ─── Reset mínimo ───────────────────────────────────────────────────────────── */
/* Esconde o elemento no MOBILE (telas menores que 768px) */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Esconde o elemento no DESKTOP (telas de 768px ou maiores) */
@media (min-width: 768px) {
  .hide-on-desktop {
    display: none !important;
  }
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--g-font-size-base);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--g-font);
    font-size: 1rem;
    line-height: var(--g-line-height);
    color: var(--g-cor-texto);
    background-color: var(--g-cor-cinza);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--g-cor-escura);
}


/* ─── Utilitários ─────────────────────────────────────────────────────────────── */

.u-hidden   { display: none !important; }
.u-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

.u-mt-1 { margin-top:  8px; }
.u-mt-2 { margin-top: 16px; }
.u-mt-3 { margin-top: 24px; }
.u-mb-1 { margin-bottom:  8px; }
.u-mb-2 { margin-bottom: 16px; }
.u-mb-3 { margin-bottom: 24px; }


/* ─── Scrollbar customizada (Webkit) ─────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: #f0f0f0; }
::-webkit-scrollbar-thumb        { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #999; }


/* ─── Foco acessível ─────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--g-cor-primaria);
    outline-offset: 2px;
    border-radius: 4px;
}


/*AJUSTES FINOS*/
/*#sidebar-desktop{
    background-image: url('../img/backgrounds/bg-texture_menu_desktop.png') !important;
    background-size: 100% auto !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
}*/