:root {
    --min-page-width: 320px;
    /* Font sizes calculated usign website https://min-max-calculator.9elements.com/ */
    /* Values: min: 14 max: 16 */
    /* Viewport: min: 360 max: 1200 */
    font-size: clamp(0.875rem, 0.821rem + 0.24vw, 1rem);

    /*PALETES DE CORES (ver readme +info) */
    /* === POLO 1 — Roxo (Consultas e Ecografias) === */
    --polo1-subtle: #f3eefa;
    --polo1-border: #d4b3ef;
    --polo1-base: #9b59c4;
    --polo1-hover: #7b3fa8;
    --polo1-dark: #5a2882;
    --polo1-rgb: 155, 89, 196;
    /* === POLO 2 — Verde (Exames e Análises Clínicas) === */
    --polo2-subtle: #e8f5f1;
    --polo2-border: #9fd4c4;
    --polo2-base: #2e8b6e;
    --polo2-hover: #226b55;
    --polo2-dark: #164d3c;
    --polo2-rgb: 46, 139, 110;
    /* === Bootstrap primary (Polo 1 por omissão) === */
    --bs-primary: var(--polo1-base);
    --bs-primary-rgb: var(--polo1-rgb);
    --bs-primary-bg-subtle: var(--polo1-subtle);
    --bs-primary-border-subtle: var(--polo1-border);
    --bs-primary-text-emphasis: var(--polo1-dark);
    /* === Corpo / neutros === */
    --bs-body-bg: #f5f4f3;
    --bs-body-color: #4a4848;
    --bs-secondary-color: #8c8989;
    --bs-border-color: #d1cece;
    --bs-link-color: var(--polo1-base);
    --bs-link-hover-color: var(--polo1-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--polo1-base);
    --bs-btn-border-color: var(--polo1-base);
    --bs-btn-hover-bg: var(--polo1-base);
    --bs-btn-hover-border-color: var(--polo1-base);
    --bs-btn-active-bg: var(--polo1-dark);
    --bs-btn-active-border-color: var(--polo1-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

html {
}

body {
    padding-top: 4.5rem;
    min-width: var(--min-page-width);
}

/* TODO: review!!*/
h1 {
    /* min: 25 max: 28 */
    font-size: clamp(1.563rem, 1.482rem + 0.36vw, 1.75rem);
}

h2 {
    /* min: 16 max: 24*/
    font-size: clamp(1rem, 0.786rem + 0.95vw, 1.5rem);
}

h3 {
    /* min: 15 max: 24*/
    font-size: clamp(0.938rem, 0.696rem + 1.07vw, 1.5rem);
}

h4 {
    /* min: 14 max: 22*/
    font-size: clamp(0.875rem, 0.661rem + 0.95vw, 1.375rem)
}

h5 {
    /* min: 14 max: 20*/
    font-size: clamp(0.875rem, 0.714rem + 0.71vw, 1.25rem)
}

h6 {
    /* min: 14 max: 18*/
    font-size: clamp(0.875rem, 0.768rem + 0.48vw, 1.125rem);
}

.fs-1 {
    /* min: 25 max: 28 */
    font-size: clamp(1.563rem, 1.482rem + 0.36vw, 1.75rem) !important;
}

.fs-2 {
    /* min: 16 max: 24*/
    font-size: clamp(1rem, 0.786rem + 0.95vw, 1.5rem) !important;
}

.fs-3 {
    /* min: 15 max: 24*/
    font-size: clamp(0.938rem, 0.696rem + 1.07vw, 1.5rem) !important;
}

.fs-4 {
    /* min: 14 max: 22*/
    font-size: clamp(0.875rem, 0.661rem + 0.95vw, 1.375rem)
}

.fs-5 {
    /* min: 14 max: 20*/
    font-size: clamp(0.875rem, 0.714rem + 0.71vw, 1.25rem)
}

.fs-6 {
    /* min: 14 max: 18*/
    font-size: clamp(0.875rem, 0.768rem + 0.48vw, 1.125rem) !important;
}

.text-red {
    color: var(--bs-red);
}

.text-green {
    color: var(--bs-green);
}

.main-container {
    max-width: 1240px;
}

.body-background {
    background: url(/Images/bakground-img.jpg) no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.bg-gradiant-white-top-bottom {
    background-image: -moz-linear-gradient(top,transparent,white);
    background-image: linear-gradient(to bottom, transparent, white);
}

.home-game-list-container {
    min-width: 150px;
    max-height: 80vh;
}


/** Main menu navbar customization **/
#navmain {
    min-width: var(--min-page-width);
}
    /* Main menu navbar - active styles */
    #navmain .nav-item .nav-link.active,
    #navmain .nav-item .dropdown-item.active,
    #navmain .nav-item .dropdown-item:active {
        background-color: var(--bs-gray-400);
        border-radius: 0.25rem;
    }

    #navmain .nav-item .dropdown-item.active {
        color: var(--bs-dropdown-link-color);
    }
@media (max-width: 992px) {
    /* Main menu navbar - offcanvas mobile - set the padding for nav-links on devices smaller than 'lg' */
    #navmain .offcanvas .nav-link {
        --bs-nav-link-padding-x: 0.5rem; /* horizontal padding better greater than 0 (default) */
    }
}
@media (min-width: 992px) {
    /* Main menu navbar - desktop - set smaller box with username to fit on horizontal menu on desktop 'lg' */
    #navmain .nav-item span.username-text {
        max-width: 60px;
    }
}
/* Main menu navbar custom width where the links titles for extra buttons show or not to fit horizontal (in small screens)*/
@media (max-width: 420px) {
    /* Hides the span with the class 'title-resp' when the menu is in horizontal layout and not collapsed */
    #navmain span.title-resp {
        display: none;
    }
}

/* Tooltips */
.navbtn-tooltip {
    --bs-tooltip-bg: var(--bs-success);
    --bs-tooltip-color: var(--bs-white);
    --bs-tooltip-opacity: 0.7;
}

/* Botão CTA Marcações (navbar + footer) */
.btn-marcacoes {
    background: #2a7a4b;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 18px;
    border: none;
    text-decoration: none;
}
.btn-marcacoes:hover {
    background: #1f5e38;
    color: #fff;
}

/* Pill de atalho cross-link (↗ Especialidade / ↗ Exame / ↗ Serviço) */
.tag-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--polo1-light);
    border: 1px solid var(--polo1-dark);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.7rem;
    color: var(--polo1-dark);
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}
    a:hover .tag-link,
    .tag-link:hover {
        background: var(--polo1-light-hover);
        color: var(--polo1-dark);
    }

#carousel1 img {
    height: 35vh;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
}

#groupcount1 .list-group-item-action {
    background: var(--polo1-dark);
    min-width: 200px;
}
#groupnews1 .list-group-item {
    background: var(--polo1-subtle);
    min-width: 200px;
    border-bottom-color: var(--polo1-border);
}
#groupnews1 {
    border: 1px solid;
}
#groupnews1 .list-group-item.news {
    background: var(--polo1-base);
}
#groupcount1 .list-group-item-action:hover,
#groupnews1 .list-group-item-action:hover
{
    filter: brightness(0.85);
}

@media (max-width: 767.98px) {
    #groupcount1, #groupnews1 {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        #groupcount1::-webkit-scrollbar {
            display: none;
        }

        #groupcount1 .list-group-item {
            min-width: 200px;
        }
}