/**
 * WooCommerce Archive Widgets - Frontend Styles
 * myLandingpage.ai - Modernes, schlichtes Design
 *
 * Widgets:
 * - MYLP WC Breadcrumb
 * - MYLP WC Archive Title
 * - MYLP WC Archive Description
 *
 * @package mylandingpageai
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties - Elementor Global Colors Integration
   ========================================================================== */

:root {
    --mylp-wc-link-color: var(--e-global-color-accent, #0073aa);
    --mylp-wc-link-hover: var(--e-global-color-primary, #005177);
    --mylp-wc-text-color: var(--e-global-color-text, #333333);
    --mylp-wc-separator-color: #999999;
}

/* ==========================================================================
   BREADCRUMB WIDGET
   ========================================================================== */

.mylp-wc-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.5;
}

/* List Reset */
.mylp-wc-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Item */
.mylp-wc-breadcrumb__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Links */
.mylp-wc-breadcrumb__link {
    color: var(--mylp-wc-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.mylp-wc-breadcrumb__link:hover,
.mylp-wc-breadcrumb__link:focus {
    color: var(--mylp-wc-link-hover);
    text-decoration: underline;
}

/* Current (last item) */
.mylp-wc-breadcrumb__current {
    color: var(--mylp-wc-text-color);
    font-weight: 500;
    white-space: nowrap;
}

/* Separator */
.mylp-wc-breadcrumb__separator {
    color: var(--mylp-wc-separator-color);
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    user-select: none;
    font-size: 12px;
}

.mylp-wc-breadcrumb__separator svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ==========================================================================
   ARCHIVE TITLE WIDGET
   ========================================================================== */

.mylp-wc-archive-title {
    margin: 0;
    padding: 0;
    color: var(--mylp-wc-text-color);
}

.mylp-wc-archive-title__prefix,
.mylp-wc-archive-title__suffix {
    opacity: 0.7;
}

/* ==========================================================================
   ARCHIVE DESCRIPTION WIDGET
   ========================================================================== */

.mylp-wc-archive-description {
    margin: 0;
    padding: 0;
    line-height: 1.7;
    color: var(--mylp-wc-text-color);
}

.mylp-wc-archive-description p {
    margin: 0 0 1em;
}

.mylp-wc-archive-description p:last-child {
    margin-bottom: 0;
}

.mylp-wc-archive-description a {
    color: var(--mylp-wc-link-color);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.mylp-wc-archive-description a:hover {
    color: var(--mylp-wc-link-hover);
}

/* Truncated text with "Read more" */
.mylp-wc-archive-description--truncated {
    position: relative;
}

.mylp-wc-archive-description__more {
    color: var(--mylp-wc-link-color);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mylp-wc-archive-description__more:hover {
    color: var(--mylp-wc-link-hover);
    text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .mylp-wc-breadcrumb {
        font-size: 13px;
    }

    .mylp-wc-breadcrumb__separator {
        margin: 0 6px;
    }

    .mylp-wc-breadcrumb__separator svg {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .mylp-wc-breadcrumb {
        font-size: 12px;
    }

    .mylp-wc-breadcrumb__separator {
        margin: 0 4px;
    }

    /* Allow wrapping on small screens */
    .mylp-wc-breadcrumb__list {
        gap: 4px 0;
    }

    .mylp-wc-breadcrumb__link,
    .mylp-wc-breadcrumb__current {
        white-space: normal;
    }
}

/* ==========================================================================
   PRODUCT META WIDGET
   ========================================================================== */

.mylp-wc-product-meta {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mylp-wc-text-color);
}

/* Layout: Stacked (Untereinander) */
.mylp-wc-product-meta--stacked .mylp-wc-product-meta__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.mylp-wc-product-meta--stacked .mylp-wc-product-meta__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Separator line for stacked/table layouts */
.mylp-wc-product-meta--has-separator.mylp-wc-product-meta--stacked .mylp-wc-product-meta__item,
.mylp-wc-product-meta--has-separator.mylp-wc-product-meta--table .mylp-wc-product-meta__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mylp-wc-product-meta--has-separator.mylp-wc-product-meta--stacked .mylp-wc-product-meta__item:last-child,
.mylp-wc-product-meta--has-separator.mylp-wc-product-meta--table .mylp-wc-product-meta__item:last-child {
    border-bottom: none;
}

/* Layout: Inline (Nebeneinander) */
.mylp-wc-product-meta--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mylp-wc-product-meta--inline .mylp-wc-product-meta__item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.mylp-wc-product-meta--inline .mylp-wc-product-meta__separator {
    color: var(--mylp-wc-separator-color);
    margin: 0 4px;
}

/* Layout: Table (Tabelle) */
.mylp-wc-product-meta--table .mylp-wc-product-meta__item {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;
}

.mylp-wc-product-meta--table .mylp-wc-product-meta__item:last-child {
    margin-bottom: 0;
}

.mylp-wc-product-meta--table .mylp-wc-product-meta__label {
    flex-shrink: 0;
    min-width: 120px;
}

/* Labels */
.mylp-wc-product-meta__label {
    font-weight: 600;
    color: var(--mylp-wc-text-color);
}

/* Values */
.mylp-wc-product-meta__value {
    color: var(--mylp-wc-text-color);
}

.mylp-wc-product-meta__value a {
    color: var(--mylp-wc-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mylp-wc-product-meta__value a:hover {
    color: var(--mylp-wc-link-hover);
    text-decoration: underline;
}

/* Prefix/Suffix */
.mylp-wc-product-meta__prefix,
.mylp-wc-product-meta__suffix {
    opacity: 0.8;
}

.mylp-wc-product-meta__suffix {
    margin-left: 2px;
}

.mylp-wc-product-meta__prefix {
    margin-right: 2px;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.mylp-wc-breadcrumb__link:focus-visible,
.mylp-wc-archive-description a:focus-visible,
.mylp-wc-archive-description__more:focus-visible,
.mylp-wc-product-meta__value a:focus-visible {
    outline: 2px solid var(--mylp-wc-link-color);
    outline-offset: 2px;
}

/* Screen reader only text */
.mylp-wc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}