html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Hover-reveal: hide action buttons until parent row is hovered */
.hover-actions .hover-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.hover-actions:hover .hover-btn {
    opacity: 1;
}

/* Fixed bottom navbar: match page background to avoid transparency bleed */
.fixed-foreground {
    background-color: var(--bs-body-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Floating Action Button (FAB) ───────────────────────────────────────── */
.fab-add {
    position: fixed;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 1rem);
    right: 1.25rem;
    z-index: 1040;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: none;
    background-color: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fab-add:hover,
.fab-add:focus {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    outline: none;
}

.fab-add svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* ── Grocery list: scroll-from-bottom container ─────────────────────────── */
.grocery-scroll-outer {
    height: calc(100dvh - 11rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.grocery-scroll-inner {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5rem;
}

/* pushes short lists to the bottom */
.grocery-scroll-inner::before {
    content: '';
    flex: 1;
}

/* ── Grocery list item ───────────────────────────────────────────────────── */
.grocery-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.grocery-item:last-child {
    border-bottom: none;
}

.grocery-label {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s;
}

.grocery-label:active {
    background-color: var(--bs-secondary-bg);
}

.grocery-edit {
    background-color: var(--bs-secondary-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* ── Autocomplete suggestions dropdown ──────────────────────────────────── */
[data-role="article-suggestions"] .list-group-item {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.multiline {
    white-space: pre-line;
}


/*
Source - https://stackoverflow.com/a/60219624
Posted by JamesWilson, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-20, License - CC BY-SA 4.0
*/

/**
 * Remove focus styles for non-keyboard focus.
 */
:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

/**
 * Cross-browser styles for explicit focus via 
 * keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus,
.focus-visible:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069;
}