/* ==============================================================
   components.css
   Small, named UI components that Tailwind's utility classes can't
   express on their own: the nav-link hover underline, the background
   patterns used behind the hero and project image placeholders, and
   an optional tab-filter state kept for parity with earlier markup.
============================================================== */

/* Animated underline for desktop nav links on hover (index.html navbar). */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.25s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Subtle background patterns, reused across pages/hero.html and
   pages/projects.html image placeholders. */
.grid-pattern {
    background-image: linear-gradient(to right, var(--pattern-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pattern-line) 1px, transparent 1px);
    background-size: 40px 40px;
}

.dot-pattern {
    background-image: radial-gradient(var(--pattern-dot) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* Optional category-filter tab state (not currently wired into any
   page fragment's markup), kept for parity with earlier stylesheet. */
.tab-btn.active {
    color: var(--color-white);
    background: var(--color-raised);
    border-color: var(--color-line);
}

/* ==========================
   Scroll Progress Bar
========================== */
/* Thin fixed bar above the navbar (index.html). Width is driven by a
   GPU-friendly transform, not the `width` property, so updating it on
   every scroll tick never triggers layout — see assets/js/scroll.js. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* ==========================
   Back to Top (floating)
========================== */
/* Floating circular button (index.html), independent of the footer's
   text "Back to top" link — this one stays reachable without scrolling
   all the way down. Hidden until assets/js/scroll.js adds .is-visible
   once the visitor has scrolled past the hero. */
.back-to-top-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.back-to-top-float.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ==========================
   Focus States
========================== */
/* A single, deliberate keyboard-focus style, applied via :focus-visible
   so it never shows for mouse/touch clicks — only for keyboard/AT
   navigation. Mirrors the accent color used for hover states throughout
   the site instead of relying on each browser's inconsistent default
   outline. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}