/**
 * @file catbar.css
 * @brief This stylesheet defines the styling for the category navigation bar and the attribute filter bar.
 *        It includes styles for navigation items, active/hover states, responsiveness, and filter form components.
 * @author Geizkragen Project
 */

/**
 * ==========================================================
 *  CATEGORY BAR
 * ==========================================================
 */

/**
 * @class .home-nav
 * @brief Main container for the home navigation bar.
 *        Provides the background color, padding, and flexbox layout.
 */
.home-nav {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #2d3b50;
    padding: 1px 0;
}

/**
 * @class .home-nav__inner
 * @brief Inner wrapper for the home navigation bar.
 *        Ensures the content expands and is centered correctly using flexbox properties.
 */
.home-nav__inner {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/**
 * @class .home-nav__list
 * @brief Represents the unordered list containing the navigation links.
 *        Removes default list styling and sets up a horizontal flexbox container.
 */
.home-nav__list {
    width: 100%;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * @selector .home-nav__list li
 * @brief Defines the list items inside the navigation list.
 *        Acts as a relative container for flex items.
 */
.home-nav__list li {
    flex: 1;
    position: relative;
}

/**
 * ===============================
 * HOME CATEGORY LINKS
 * ===============================
 */

/**
 * @selector .home-nav__list li a
 * @brief Styles the anchor tags inside the list items.
 *        Sets up dimensions, padding, colors, font styling, and transitions for hover effects.
 */
.home-nav__list li a {
    width: 100%;
    padding: 8px 0;

    background-color: rgb(45, 59, 80);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-family);

    text-decoration: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0;
    transition: background-color 0.2s ease;
}

/**
 * @selector .home-nav__list li a:hover
 * @brief Defines the hover state for the navigation links.
 *        Applies a subtle white overlay using rgba.
 */
.home-nav__list li a:hover {
    background-color: rgba(255,255,255,0.18);
}

/**
 * @selector .home-nav__list li a:active
 * @brief Defines the active (mouse click down) state for the navigation links.
 *        Increases the opacity of the white overlay for visual feedback.
 */
.home-nav__list li a:active {
    background-color: rgba(255,255,255,0.28);
}

/**
 * @selector .home-nav__list li a:focus-visible
 * @brief Defines the focus state, mainly for keyboard navigation accessibility.
 *        Removes the default outline and adds a bespoke white box-shadow inset.
 */
.home-nav__list li a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}

/**
 * @selector .home-nav__list li a.active
 * @brief Styles the currently active category link, typically set server-side via PHP or by JS.
 */
.home-nav__list li a.active {
    background-color: rgba(255,255,255,0.25);
}

/**
 * ===============================
 * TRENNSTRICHE ZWISCHEN KATEGORIEN
 * ===============================
 */

/**
 * @selector .home-nav__list li:not(:last-child)::after
 * @brief Creates vertical separator lines between category items,
 *        except after the last item in the list.
 */
.home-nav__list li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;

    height: 100%;
    width: 2px;
    background-color: rgba(255,255,255,0.3);
}

/**
 * @media (max-width: 768px)
 * @brief Responsive styles for mobile and small tablet screens.
 *        Enables horizontal scrolling for the category list with smooth scroll-snapping.
 */
@media (max-width: 768px) {
    .home-nav__inner {
        justify-content: flex-start;
    }

    .home-nav__list {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .home-nav__list::-webkit-scrollbar { display: none; }

    .home-nav__list li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .home-nav__list li a {
        padding: 8px 16px;
        font-size: 0.82rem;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .home-nav__list li a {
        padding: 8px 12px;
        font-size: 0.78rem;
        min-height: 36px;
    }
}

@media (min-width: 1024px) {
    .home-nav__item a {
        font-size: 1rem;
        padding: 5px 24px;
    }
}

/**
 * ==========================================================
 * ATTRIBUTE FILTER BAR
 * ==========================================================
 */

/**
 * @class .attrbar
 * @brief Main container for the attribute filtering section.
 *        Matches the background color of the category bar and provides bottom padding.
 */
.attrbar {
    width: 100%;
    background-color: rgb(45, 59, 80); /* Same as catbar background */
    padding: 0 0 16px 0;
}

/**
 * @class .attrbar__inner
 * @brief Inner container for the filter bar.
 *        Includes top padding and a subtle top border to separate it from the category links above.
 */
.attrbar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    width: 100%;
}

/**
 * @class .attr-filter-form
 * @brief Wrapper for the filter form components.
 *        Uses flexbox wrap to display filter items fluidly, aligning them appropriately across widths.
 */
.attr-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end; /* Align inputs and labels beautifully */
    justify-content: center;
    width: 100%;
    max-width: 100%; /* Changed from 1200px to allow full width */
    margin: 0 auto;
    padding: 0 20px;
}

/**
 * @class .attr-filter-item
 * @brief Container for a single filter component (e.g. property label + dropdown).
 *        Lays out child elements in a flex column.
 */
.attr-filter-item {
    display: flex;
    flex-direction: column; /* Stack label and select */
    align-items: flex-start;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
    font-family: var(--font-family);
    flex: 1 1 180px; /* Grid-like flexibility */
    max-width: 250px;
}

/**
 * @selector .attr-filter-item label
 * @brief Styles the label text above each dropdown within the filter items.
 *        Uses uppercase text, smaller font size, and light spacing.
 */
.attr-filter-item label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

/**
 * @selector .attr-filter-item select
 * @brief Styles the select (dropdown) inputs in the filter bar.
 *        Removes default webkit/moz appearance and replaces it with custom backgrounds, borders, and a custom SVG arrow.
 */
.attr-filter-item select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md, 5px);
    background-color: rgba(25, 30, 40, 0.5); /* Semi transparent dark */
    color: var(--text-primary, #ffffff);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--font-family);
    transition: all var(--transition-fast, 150ms ease);
    appearance: none; /* modern look */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.6)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/**
 * @selector .attr-filter-item select:hover
 * @brief Hover state for the select elements, adjusting background and border color.
 */
.attr-filter-item select:hover {
    background-color: rgba(25, 30, 40, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

/**
 * @selector .attr-filter-item select:focus
 * @brief Focus state for the select elements, applying primary color highlights.
 */
.attr-filter-item select:focus {
    outline: none;
    border-color: var(--color-primary, #274a97);
    box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(39, 74, 151, 0.15));
}

/**
 * @selector .attr-filter-item select option
 * @brief Styles the option elements inside the dropdown.
 *        Sets background and text colors to match the dark theme.
 */
.attr-filter-item select option {
    background-color: var(--bg-surface, #2d3b50);
    color: var(--text-primary, #ffffff);
}

/**
 * @class .attr-filter-action
 * @brief Container for form action elements, like the reset button.
 *        Aligns to the bottom to match the input fields structurally.
 */
.attr-filter-action {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px; /* optical alignment with inputs */
}

/**
 * @class .attr-filter-reset
 * @brief Styles for the filter reset button.
 *        Provides an inline-flex layout with a distinct danger (red) color scheme and hover effects.
 */
.attr-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-invert, #ffffff);
    text-decoration: none;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-md, 5px);
    background-color: var(--color-danger, #d92d20);
    transition: all var(--transition-fast, 150ms ease);
    font-family: var(--font-family);
    height: 40px; /* match select height */
}

/**
 * @selector .attr-filter-reset:hover
 * @brief Hover state for the reset button.
 *        Creates a slight lift effect using transform and adds a shadow.
 */
.attr-filter-reset:hover {
    background-color: #b91c1c; /* slightly darker danger */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-danger-soft, rgba(217, 45, 32, 0.2));
}

/**
 * @media (max-width: 768px)
 * @brief Adjustments to the attribute filter layout for mobile and tablet devices.
 *        Forces items to take up near-half width or full width, and correctly spaces action buttons.
 */
@media (max-width: 768px) {
    .attr-filter-item {
        flex: 1 1 45%;
        max-width: none;
    }

    .attr-filter-action {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .attr-filter-reset {
        width: 100%;
    }
}