/* ==========================================================================
   MPSC - Variáveis e estilos globais do site
   ========================================================================== */

/* ==========================================================================
   Tipografia
   ========================================================================== */

#content strong, #content h1{
    font-weight: 700;
}

/* ==========================================================================
   Botões
   ========================================================================== */

#content .btn {
    border-radius: var(--mpsc-radius-lg);
    padding: var(--mpsc-space-1) var(--mpsc-space-2);
}

/* Focus dos botões */

#content .btn.focus,
#content .btn:focus,
#content .btn:focus-visible,
.c-prefers-focus #content .btn:focus {
    box-shadow:
        0 0 0
        var(--mpsc-box-shadow-input-focus-size)
        var(--mpsc-input-focus-box-shadow-color);

    outline: 0;
}

/* ==========================================================================
   Formulários
   ========================================================================== */

#content .form-control:not(.mpsc-header__search-input) {
    background-color: var(--mpsc-color-white);
    border-color: var(--mpsc-input-border-color);
    border-radius: var(--mpsc-radius-md);
    color: var(--mpsc-color-text-primary);
    height: auto;
    padding: var(--mpsc-space-1) var(--mpsc-space-2);
}

/* Placeholder */

#content .form-control::placeholder {
    color: var(--mpsc-placeholder-color);
}

/* Focus dos campos */

#content .form-control.focus,
#content .form-control:focus,
#content .form-control:focus-visible,
#content .form-control:focus-within,
.c-prefers-focus #content .form-control:focus {
    background-color: var(--mpsc-color-white);
    border-color: var(--mpsc-input-focus-border-color);

    box-shadow:
        0 0 0
        var(--mpsc-box-shadow-input-focus-size)
        var(--mpsc-input-focus-box-shadow-color);

    color: var(--mpsc-color-text-primary);
    outline: 0;
}

/* ==========================================================================
   Estrutura / Container
   ========================================================================== */

#content .lfr-layout-structure-item-container.container-fluid-max-xl {
    padding-left: var(--mpsc-space-2);
    padding-right: var(--mpsc-space-2);
}

/* ==========================================================================
   Imagens
   ========================================================================== */

#content .component-image {
    border-radius: var(--mpsc-radius-md);
}

/* ==========================================================================
   Botão 100%
   ========================================================================== */

#content .mpsc-btn-100 .btn {
    width: 100% !important;
}

/* ==========================================================================
   Quick Access
   ========================================================================== */

/*
 * Mantido restrito ao conteúdo da página para não interferir
 * nos elementos administrativos do Liferay.
 */

#content .quick-access-nav {
    display: none;
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

/*
 * Utilize esta classe sempre que quiser ocultar visualmente um elemento,
 * mantendo-o disponível para leitores de tela.
 *
 * Exemplo:
 * labels que devem ficar visualmente ocultos, mas precisam continuar
 * disponíveis para tecnologias assistivas.
 */

#content .screen-reader-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1280px) {
    #content .lfr-layout-structure-item-container.container-fluid-max-xl {
        padding-left: 0;
        padding-right: 0;
    }

    #content .mpsc-btn-100 .btn {
        width: auto !important;
    }
}