/* 
   PALETTE THEME - Light Mode Only
   Design: Soft Pastel / Professional UI / Nette & Bootstrap 5 Compatible
   Version: 2.1 - Enhanced Navigation Groups
   Updated: 2026-02-14
*/

/* =====================================================
   SPIS TREŚCI
   ===================================================== 
   
   1. VARIABLES & CORE SETTINGS ............... linia 28
   2. TYPOGRAPHY & UTILITIES .................. linia 120
   3. NAVIGATION & LAYOUT ..................... linia 178
      3.1. Navbar Main ........................ linia 182
      3.2. Offcanvas Menu ..................... linia 210
      3.3. Navigation Links ................... linia 228
      3.4. Navigation Groups .................. linia 258
      3.5. Mobile Toggler ..................... linia 268
      3.6. User Dropdown ...................... linia 286
      3.7. Cards (Pastel Card) ................ linia 342
   4. BUTTONS & ACTIONS ....................... linia 367
   5. FORMS ................................... linia 433
   6. MODULE: ACCORDION SYSTEM ................ linia 489
   7. CUSTOM: PENDING PAGE .................... linia 642
   8. MODULE: VOTING & FLASH .................. linia 668
   9. RESPONSIVE & MEDIA QUERIES .............. linia 837
   10. ACCESSIBILITY & MOTION ................. linia 880
   11. COLOR SCHEME & HIGH CONTRAST ........... linia 910
   
   ===================================================== */

/* =========================================
   1. VARIABLES & CORE SETTINGS
   ========================================= */
:root {
    /* --- Kolory podstawowe --- */
    --pastel-primary: #5c7cfa;
    --pastel-primary-dark: #4663d9;
    --pastel-primary-soft: #f0f4ff;
    --pastel-secondary: #2b4fb5;
    --pastel-bg-light: #f8faff;
    --pastel-border: #e0e7ff;

    /* --- Statusy --- */
    --pastel-success: #40c057;
    --pastel-success-dark: #2b8a3e;
    --pastel-success-bg: #f2fcf5;
    --pastel-danger: #ff6b6b;
    --pastel-danger-dark: #c92a2a;
    --pastel-danger-bg: #fff5f5;
    --pastel-warning: #fcc419;
    --pastel-warning-bg: #fff9db;

    /* --- Typography System --- */
    --font-size-base: 0.925rem;
    --font-size-lg: 1rem;
    --font-size-md: 0.95rem;
    --font-size-sm: 0.9rem;
    --font-size-xs: 0.85rem;
    --font-size-xxs: 0.8rem;

    /* --- Spacing System --- */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 2.5rem;

    /* --- UI Elements --- */
    --pastel-radius-lg: 18px;
    --pastel-radius-md: 12px;
    --pastel-radius-sm: 8px;
    --pastel-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.04);
    --pastel-shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.1);
    --pastel-focus-ring: rgba(92, 124, 250, 0.4);

    /* --- Transitions --- */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* --- Text Colors --- */
    --text-primary: #495057;
    --text-secondary: #64748b;
}

/* --- Global Resets --- */
body {
    background-color: var(--pastel-bg-light);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    color-scheme: light;
    /* Wymusza jasny tryb - Opera z ciemnym trybem będzie miała jasne tło body,
       ale karty/accordion/formularze pozostaną ciemne (to akceptowalny kompromis) */
}


::selection {
    background-color: var(--pastel-primary-soft);
    color: var(--pastel-primary-dark);
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--pastel-bg-light);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    border: 2px solid var(--pastel-bg-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pastel-primary);
}

/* =========================================
   2. TYPOGRAPHY & UTILITIES
   ========================================= */

/* Tytuły */
.pastel-title {
    font-weight: 800;
    color: var(--pastel-secondary);
    border-bottom: 2px solid rgba(0, 0, 0, 0.03);
    padding-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
    display: block;
    width: 100%;
}

.text-pastel-secondary {
    color: var(--pastel-secondary);
}

/* Badge (Pigułki) - numery artykułów */
.badge-pastel {
    background-color: var(--pastel-primary-soft);
    color: var(--pastel-primary);
    padding: 6px 10px;
    border-radius: 50rem;
    font-weight: 700;
    font-size: var(--font-size-xxs);
    display: inline-block;
}

/* Badge Podsumowania Głosu */
.vote-summary-badge {
    padding: 8px 12px;
    border-radius: 10px;
    display: inline-block;
    font-size: var(--font-size-xs);
    border: 1px solid transparent;
    font-weight: 600;
}

.vote-green {
    background-color: #ffffff;
    color: var(--pastel-success-dark);
    border-color: #b2f2bb;
}

.vote-red {
    background-color: #ffffff;
    color: var(--pastel-danger-dark);
    border-color: #ffc9c9;
}

.vote-blue {
    background-color: #ffffff;
    color: #1971c2;
    border-color: #a5d8ff;
}

/* =========================================
   3. NAVIGATION & LAYOUT
   ========================================= */

/* 3.1. Navbar Main */
.navbar.navbar-palette {
    background-color: var(--pastel-primary-soft);
    border-bottom: 5px solid var(--pastel-primary);
    padding: 0.7rem 0;
    box-shadow: 0 4px 12px rgba(92, 124, 250, 0.08);
    margin-bottom: var(--spacing-lg);
    z-index: 1030;
    transition: padding var(--transition-normal);
}

.brand-main {
    font-weight: 800;
    color: var(--pastel-secondary);
    font-size: 1.3rem;
    display: block;
    line-height: 1.1;
}

.brand-sub {
    font-weight: 700;
    color: var(--pastel-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3.2. Offcanvas (Menu Boczne) */
.offcanvas.offcanvas-palette {
    background-color: var(--pastel-bg-light);
    border-left: 8px solid var(--pastel-primary);
}

.btn-close.btn-close-pastel {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: var(--pastel-radius-sm);
    transition: all var(--transition-normal);
    opacity: 0.7;
}

.btn-close.btn-close-pastel:hover {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

/* 3.3. Linki nawigacyjne */
.pastel-nav-link {
    text-decoration: none;
    color: var(--pastel-secondary);
    font-weight: 600;
    padding: 10px 15px;
    margin-bottom: 6px;
    border-radius: var(--pastel-radius-md);
    display: block;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
    font-size: var(--font-size-md);
}

.pastel-nav-link:hover,
.pastel-nav-link.active {
    background-color: var(--pastel-primary-soft);
    color: var(--pastel-primary);
    transform: translateX(5px);
}

.pastel-nav-link:focus-visible {
    outline: 3px solid var(--pastel-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--pastel-focus-ring);
    background-color: var(--pastel-primary-soft);
}

/* 3.4. Navigation Groups */
.nav-group-title {
    color: var(--pastel-secondary);
    font-weight: 700;
    font-size: var(--font-size-xxs);
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 0;
}

/* 3.5. Toggler (Przycisk menu mobilnego) */
.btn-palette-toggler {
    background-color: #ffffff;
    border: 2px solid var(--pastel-border);
    color: var(--pastel-secondary);
    border-radius: var(--pastel-radius-md);
    padding: 5px 12px;
    transition: all var(--transition-fast);
}

.btn-palette-toggler:hover {
    background-color: var(--pastel-primary-soft);
    border-color: var(--pastel-primary);
    color: var(--pastel-primary);
}

.btn-palette-toggler:focus-visible {
    outline: 3px solid var(--pastel-primary);
    outline-offset: 2px;
}

/* 3.6. User Dropdown */
.btn.btn-user-dropdown {
    background-color: #ffffff;
    border: 2px solid var(--pastel-border);
    color: var(--pastel-secondary);
    border-radius: var(--pastel-radius-md);
    padding: 5px 14px;
    font-weight: 700;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
}

.btn.btn-user-dropdown:hover,
.btn.btn-user-dropdown[aria-expanded="true"] {
    background-color: var(--pastel-primary-soft);
    border-color: var(--pastel-primary);
    color: var(--pastel-primary);
}

.user-id {
    font-size: var(--font-size-xs);
}

.dropdown-menu.pastel-dropdown {
    border: none;
    border-top: 4px solid var(--pastel-primary);
    box-shadow: var(--pastel-shadow-lg);
    border-radius: var(--pastel-radius-md);
    padding: var(--spacing-xs);
    margin-top: 10px;
}

.dropdown-menu.pastel-dropdown .dropdown-item {
    border-radius: var(--pastel-radius-sm);
    padding: 7px 12px;
    font-weight: 600;
    color: var(--pastel-secondary);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
}

.dropdown-menu.pastel-dropdown .dropdown-item:hover {
    background-color: var(--pastel-bg-light);
    color: var(--pastel-primary);
    transform: translateX(3px);
}

.dropdown-menu.pastel-dropdown .dropdown-item.text-danger:hover {
    background-color: var(--pastel-danger-bg);
    color: var(--pastel-danger-dark);
}

/* 3.7. Karty (Pastel Card) */
.pastel-card {
    background-color: #ffffff;
    border-radius: var(--pastel-radius-lg);
    border: 0 solid transparent;
    box-shadow: var(--pastel-shadow-sm);
    overflow: hidden;
    position: relative;
    display: block;
    min-width: 0;
    container-type: inline-size;
    container-name: card;
}

.pastel-card.blue-theme {
    border-left: 8px solid var(--pastel-primary);
}

.pastel-card.red-theme {
    border-left: 8px solid var(--pastel-danger);
}

.pastel-card.green-theme {
    border-left: 8px solid var(--pastel-success);
}

.blue-theme-container {
    border-left: 8px solid var(--pastel-primary);
    background-color: var(--pastel-bg-light);
}

/* =========================================
   4. BUTTONS & ACTIONS
   ========================================= */

.btn-pastel-submit {
    background-color: var(--pastel-primary);
    color: #ffffff;
    border: 2px solid var(--pastel-primary);
    border-radius: var(--pastel-radius-md);
    font-weight: 700;
    padding: 10px 30px;
    transition: all var(--transition-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    font-size: var(--font-size-md);
}

.btn-pastel-submit:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(92, 124, 250, 0.3);
    background-color: var(--pastel-primary-dark);
    border-color: var(--pastel-primary-dark);
    color: #ffffff;
}

.btn-pastel-submit:focus-visible {
    outline: 3px solid var(--pastel-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--pastel-focus-ring);
}

.btn-pastel-secondary {
    background-color: var(--pastel-primary-soft);
    color: var(--pastel-primary);
    border: 2px solid var(--pastel-border);
    border-radius: var(--pastel-radius-md);
    font-weight: 600;
    padding: 8px 22px;
    transition: all var(--transition-normal);
    font-size: var(--font-size-md);
}

.btn-pastel-secondary:hover {
    background-color: var(--pastel-border);
    color: var(--pastel-secondary);
}

/* Animacja pulsowania */
.btn-pulse-active {
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(92, 124, 250, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(92, 124, 250, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(92, 124, 250, 0);
    }
}

/* =========================================
   5. FORMS
   ========================================= */

.form-control.pastel-input {
    background-color: #ffffff;
    border: 2px solid var(--pastel-border);
    border-radius: var(--pastel-radius-md);
    padding: 9px 14px;
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition-normal);
    font-size: var(--font-size-md);
}

.form-control.pastel-input:focus {
    background-color: #ffffff;
    border-color: var(--pastel-primary);
    box-shadow: 0 0 0 4px var(--pastel-focus-ring);
    color: var(--text-primary);
    outline: none;
}

.form-control.pastel-input.is-invalid {
    border-color: var(--pastel-danger);
    background-image: none;
}

.form-control.pastel-input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.25);
}

.form-control.pastel-input::placeholder {
    color: #aeb9cc;
    font-weight: 400;
}

.form-label.pastel-label {
    font-weight: 700;
    color: var(--pastel-secondary);
    font-size: var(--font-size-sm);
}

/* Lista błędów w formularzach */
.pastel-errors {
    list-style: none;
    padding: 12px 18px;
    margin-bottom: 20px;
    background-color: var(--pastel-danger-bg);
    border-left: 6px solid var(--pastel-danger);
    border-radius: var(--pastel-radius-md);
    color: var(--pastel-danger-dark);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* =========================================
   6. MODULE: ACCORDION SYSTEM
   ========================================= */

/* Base Styles */
.accordion-pastel .accordion-item {
    border: none;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--pastel-radius-lg);
    overflow: hidden;
    background-color: var(--pastel-bg-light);
    box-shadow: var(--pastel-shadow-sm);
    transition: all var(--transition-normal);
    border-left: 8px solid var(--pastel-primary);
}

.accordion-pastel .accordion-item:hover {
    box-shadow: var(--pastel-shadow-lg);
}

.accordion-pastel .accordion-button {
    background-color: transparent;
    box-shadow: none;
    color: var(--pastel-secondary);
    padding: 1.25rem;
    border-radius: 0;
    font-size: var(--font-size-lg);
}

/* Improved Focus State - Accessibility */
.accordion-pastel .accordion-button:focus-visible {
    outline: 3px solid var(--pastel-primary);
    outline-offset: -3px;
    box-shadow: 0 0 0 4px var(--pastel-focus-ring);
    z-index: 2;
}

/* Hide focus when clicking with mouse */
.accordion-pastel .accordion-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.accordion-pastel .accordion-button:not(.collapsed) {
    font-weight: 800;
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--pastel-primary-dark);
}

/* Theme Colors */
.accordion-pastel .accordion-item.green-theme {
    background-color: var(--pastel-success-bg);
    border-left-color: var(--pastel-success);
}

.accordion-pastel .accordion-item.red-theme {
    background-color: var(--pastel-danger-bg);
    border-left-color: var(--pastel-danger);
}

.accordion-pastel .accordion-item.blue-theme {
    background-color: var(--pastel-primary-soft);
    border-left-color: var(--pastel-primary);
}

/* Fix: Hide border from accordion-body */
.accordion-pastel .accordion-collapse {
    margin-left: -8px;
}

.accordion-pastel .accordion-body {
    padding-left: calc(1rem + 8px);
    background-color: #ffffff;
    position: relative;
}

/* Przykrycie lewego bordera białym tłem */
.accordion-pastel .accordion-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background-color: #ffffff;
    z-index: 1;
}

/* --- Metadata & Content Coloring --- */

.meta-info-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-item {
    font-size: var(--font-size-xs);
    color: var(--pastel-primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

/* Niebieski (Domyślny) */
.accordion-item.blue-theme .accordion-button .fw-bold,
.accordion-item.blue-theme .meta-item {
    color: var(--pastel-primary-dark);
}

.accordion-item.blue-theme .meta-item i {
    color: var(--pastel-primary);
}

/* Zielony (Za) */
.accordion-item.green-theme .accordion-button .fw-bold,
.accordion-item.green-theme .meta-item {
    color: var(--pastel-success-dark);
}

.accordion-item.green-theme .meta-item i {
    color: var(--pastel-success);
}

/* Czerwony (Przeciw) */
.accordion-item.red-theme .accordion-button .fw-bold,
.accordion-item.red-theme .meta-item {
    color: var(--pastel-danger-dark);
}

.accordion-item.red-theme .meta-item i {
    color: var(--pastel-danger);
}

/* =========================================
   7. CUSTOM: PENDING PAGE
   ========================================= */

/* 
   W pending.latte tytuły uchwał powinny być ciemne (odcień czarnego),
   a nie kolorowe jak w voted.latte.
   
   Kolor #495057 to ciemny szary pasujący do stylu Pastel - 
   ten sam co używany dla głównego tekstu na stronie.
*/
.accordion-pending .accordion-item.blue-theme .accordion-button .fw-bold {
    color: #495057 !important;
    /* Ciemny szary - główny kolor tekstu */
}

.accordion-pending .accordion-item.blue-theme .meta-item {
    color: #495057 !important;
    /* Ten sam ciemny szary */
}

.accordion-pending .accordion-item.blue-theme .meta-item i {
    color: var(--pastel-primary);
    /* Ikony pozostają niebieskie dla kontrastu */
}

/* =========================================
   8. MODULE: VOTING & FLASH
   ========================================= */

/* Voting Grid */
.voting-grid {
    display: grid;
    gap: 15px;
}

.voting-option .btn-outline {
    border: 2px solid var(--pastel-border);
    background-color: #ffffff;
    border-radius: var(--pastel-radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    gap: 10px;
    padding: 1rem;
    color: #666;
    cursor: pointer;
    position: relative;
    font-size: var(--font-size-md);
}

/* Hover effects */
.voting-option label[for="vote-1"]:hover {
    border-color: var(--pastel-success);
    background-color: var(--pastel-success-bg);
}

.voting-option label[for="vote-0"]:hover {
    border-color: var(--pastel-danger);
    background-color: var(--pastel-danger-bg);
}

.voting-option label[for="vote-2"]:hover {
    border-color: var(--pastel-primary);
    background-color: var(--pastel-primary-soft);
}

/* Checked states */
#vote-1:checked+.btn-outline {
    background-color: var(--pastel-success);
    border-color: var(--pastel-success);
    color: #ffffff;
}

#vote-0:checked+.btn-outline {
    background-color: var(--pastel-danger);
    border-color: var(--pastel-danger);
    color: #ffffff;
}

#vote-2:checked+.btn-outline {
    background-color: var(--pastel-primary);
    border-color: var(--pastel-primary);
    color: #ffffff;
}

/* Animacja ikony check */
.btn-check:checked+.btn-outline i {
    display: inline-block;
    animation: fadeInScale var(--transition-normal) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.voting-option label i {
    display: none;
}

.btn-check:focus-visible+.btn-outline {
    outline: 3px solid var(--pastel-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--pastel-focus-ring);
    z-index: 2;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flash Messages */
/* Kontener flash - ogranicza szerokość do treści */
.flash {
    width: fit-content;
    min-width: 320px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsywne dostosowanie */
@media (max-width: 640px) {
    .flash {
        min-width: 280px;
        max-width: 100%;
    }
}

.flash .alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    background-color: #ffffff;
    border-radius: var(--pastel-radius-lg);
    border: none;
    box-shadow: var(--pastel-shadow-sm);
    overflow: hidden;
    padding: 1rem 3rem 1rem 1.5rem;
    animation: slideInDown var(--transition-slow) ease-out;
}


.flash .alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 1;
    background-color: var(--pastel-primary);
}

.flash.error .alert::before,
.flash.danger .alert::before {
    background-color: var(--pastel-danger);
}

.flash.success .alert::before {
    background-color: var(--pastel-success);
}

.flash.warning .alert::before {
    background-color: var(--pastel-warning);
}

/* Ikony Flash */
.flash .alert i {
    font-size: 1.3rem;
    z-index: 2;
    flex-shrink: 0;
}

.flash.success .alert i {
    color: var(--pastel-success-dark);
}

.flash.error .alert i,
.flash.danger .alert i {
    color: var(--pastel-danger-dark);
}

.flash.warning .alert i {
    color: #f08c00;
}

.flash.info .alert i {
    color: var(--pastel-primary);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   9. RESPONSIVE & MEDIA QUERIES
   ========================================= */

@media (max-width: 576px) {
    .navbar.navbar-palette {
        padding: var(--spacing-xs) 0;
    }

    .pastel-card,
    .flash .alert,
    .accordion-pastel .accordion-item {
        border-radius: 14px;
    }

    .flash .alert {
        padding: 0.8rem 2.5rem 0.8rem 1rem;
        font-size: var(--font-size-xs);
    }

    .btn-pastel-submit {
        width: 100%;
        display: block;
    }
}

@media (min-width: 768px) {
    .meta-info-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
}

/* Container Queries dla .pastel-card */
@container card (max-width: 400px) {
    .pastel-card .meta-info-container {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}


/* =========================================
   10. ACCESSIBILITY & MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn-pulse-active {
        animation: none !important;
    }

    .pastel-nav-link:hover,
    .pastel-nav-link.active {
        transform: none;
    }

    .btn-pastel-submit:hover:not(:disabled) {
        transform: none;
    }
}


/* =========================================
   11. COLOR SCHEME & HIGH CONTRAST
   ========================================= */

/* Informuje przeglądarkę że obsługujemy jasny tryb */
/* Opera z "Wymuś tryb ciemny" ma BUG - nie resetuje prefers-color-scheme poprawnie.
   Dlatego wymuszamy color-scheme: light w body.
   Efekt: tło body jasne, ale karty/accordion/formularze ciemne w Operze ciemny tryb. */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --pastel-border: #000000;
        --pastel-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --pastel-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    }

    .pastel-nav-link:focus-visible,
    .btn-pastel-submit:focus-visible,
    .form-control.pastel-input:focus {
        outline-width: 4px;
        outline-offset: 3px;
    }
}