/* ============================================================
 * TABLET STYLES (768px to 999px)
 * 
 * Styles for medium screens. These naturally override ui.css 
 * because they are loaded after it.
 * ============================================================ */

@media (min-width: 768px) {
    body {
        padding: var(--s-3);
    }

    /* Column grid: activate fractional widths */
    .col-1 {
        width: 8.3333%;
    }

    .col-2 {
        width: 16.6666%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.3333%;
    }

    .col-5 {
        width: 41.6666%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.3333%;
    }

    .col-8 {
        width: 66.6666%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.3333%;
    }

    .col-11 {
        width: 91.6666%;
    }

    .col-12 {
        width: 100%;
    }

    /* Stack-on-mobile becomes row */
    .flex-col-mobile {
        flex-direction: row;
        gap: var(--s-1);
    }

    /* Navbar: switch from hamburger to horizontal */
    .nav-toggle {
        display: none;
    }

    .nav-links {
        display: flex !important;
        flex-direction: row;
        position: static;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
    }

    /* Tooltips activate on tablet+ */
    [tooltip]:hover::after,
    [tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
    }

}