/* CraveCart production hardening — safe final layer
   Purpose: accessibility, responsive media safety, and small global safeguards.
   IMPORTANT: This file intentionally does NOT override the site's existing
   header, navbar, mobile menu, overlay, hamburger, modal, or page layouts.
*/

:root {
    --cc-green: #198754;
    --cc-green-dark: #11643e;
    --cc-ink: #173321;
    --cc-surface: #fff;
    --cc-border: rgba(20, 83, 45, 0.12);
}

/* Consistent sizing without changing component positioning */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Do not redefine body width, overflow, font, or positioning here.
   Those remain controlled by the main/page stylesheets. */

/* Keep responsive media inside their containers */
img,
video {
    max-width: 100%;
    height: auto;
}

/* SVGs are left alone because some icons/components rely on explicit sizing. */

/* Improve touch behaviour without changing visual layout */
a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(25, 135, 84, 0.35);
    outline-offset: 3px;
}

/* Back-to-top button only.
   This is retained because it is independent of navigation and modals. */
#backToTop {
    position: fixed;
    right: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 900;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--cc-green);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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