/**
 * Accent Line Component
 * Decorative line for headlines (inspired by Hero Slider)
 * Responsive widths for Desktop/Tablet/Mobile
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --accent-line-color: var(--green, #28a745);
    --accent-line-height: 6px;
    --accent-line-radius: 10px;
    --accent-line-spacing: 1.75rem;

    /* Responsive widths */
    --accent-line-width-desktop: 220px;
    --accent-line-width-tablet: 150px;
    --accent-line-width-mobile: 100px;
}

/* ========================================
   Base Styles
   ======================================== */
.header-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* ========================================
   Accent Line - Top Position
   ======================================== */

/* Top Left */
.accent-line--top-left::before {
    content: '';
    display: block;
    height: var(--accent-line-height);
    background: var(--accent-line-color);
    border-radius: var(--accent-line-radius);
    margin-bottom: var(--accent-line-spacing);
    width: var(--accent-line-width-mobile);
}

@media (min-width: 768px) {
    .accent-line--top-left::before {
        width: var(--accent-line-width-tablet);
    }
}

@media (min-width: 1200px) {
    .accent-line--top-left::before {
        width: var(--accent-line-width-desktop);
    }
}

/* Top Center */
.accent-line--top-center {
    text-align: center;
}

.accent-line--top-center::before {
    content: '';
    display: block;
    height: var(--accent-line-height);
    background: var(--accent-line-color);
    border-radius: var(--accent-line-radius);
    margin-bottom: var(--accent-line-spacing);
    width: var(--accent-line-width-mobile);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .accent-line--top-center::before {
        width: var(--accent-line-width-tablet);
    }
}

@media (min-width: 1200px) {
    .accent-line--top-center::before {
        width: var(--accent-line-width-desktop);
    }
}

/* Top Right */
.accent-line--top-right {
    text-align: right;
}

.accent-line--top-right::before {
    content: '';
    display: block;
    height: var(--accent-line-height);
    background: var(--accent-line-color);
    border-radius: var(--accent-line-radius);
    margin-bottom: var(--accent-line-spacing);
    width: var(--accent-line-width-mobile);
    margin-left: auto;
}

@media (min-width: 768px) {
    .accent-line--top-right::before {
        width: var(--accent-line-width-tablet);
    }
}

@media (min-width: 1200px) {
    .accent-line--top-right::before {
        width: var(--accent-line-width-desktop);
    }
}

/* ========================================
   Accent Line - Bottom Position
   ======================================== */

/* Bottom Left */
.accent-line--bottom-left::after {
    content: '';
    display: block;
    height: var(--accent-line-height);
    background: var(--accent-line-color);
    border-radius: var(--accent-line-radius);
    margin-top: var(--accent-line-spacing);
    margin-bottom: var(--accent-line-spacing);
    width: var(--accent-line-width-mobile);
}

@media (min-width: 768px) {
    .accent-line--bottom-left::after {
        width: var(--accent-line-width-tablet);
    }
}

@media (min-width: 1200px) {
    .accent-line--bottom-left::after {
        width: var(--accent-line-width-desktop);
    }
}

/* Bottom Center */
.accent-line--bottom-center {
    text-align: center;
}

.accent-line--bottom-center::after {
    content: '';
    display: block;
    height: var(--accent-line-height);
    background: var(--accent-line-color);
    border-radius: var(--accent-line-radius);
    margin-top: var(--accent-line-spacing);
    margin-bottom: var(--accent-line-spacing);

    width: var(--accent-line-width-mobile);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .accent-line--bottom-center::after {
        width: var(--accent-line-width-tablet);
    }
}

@media (min-width: 1200px) {
    .accent-line--bottom-center::after {
        width: var(--accent-line-width-desktop);
    }
}

/* Bottom Right */
.accent-line--bottom-right {
    text-align: right;
}

.accent-line--bottom-right::after {
    content: '';
    display: block;
    height: var(--accent-line-height);
    background: var(--accent-line-color);
    border-radius: var(--accent-line-radius);
    margin-top: var(--accent-line-spacing);
    margin-bottom: var(--accent-line-spacing);
    width: var(--accent-line-width-mobile);
    margin-left: auto;
}

@media (min-width: 768px) {
    .accent-line--bottom-right::after {
        width: var(--accent-line-width-tablet);
    }
}

@media (min-width: 1200px) {
    .accent-line--bottom-right::after {
        width: var(--accent-line-width-desktop);
    }
}

/* ========================================
   Color Variants
   ======================================== */

/* Green (Default) */
.accent-line--color-green::before,
.accent-line--color-green::after {
    background: var(--green, #28a745);
}

/* Light Green (XD Design) */
.accent-line--color-lightgreen::before,
.accent-line--color-lightgreen::after {
    background: #A9E562;
}

/* Dark */
.accent-line--color-dark::before,
.accent-line--color-dark::after {
    background: #2d3436;
}

/* White */
.accent-line--color-white::before,
.accent-line--color-white::after {
    background: #ffffff;
}

/* Black */
.accent-line--color-black::before,
.accent-line--color-black::after {
    background: #000000;
}

/* Gray */
.accent-line--color-gray::before,
.accent-line--color-gray::after {
    background: #6c757d;
}

/* Primary (Bootstrap) */
.accent-line--color-primary::before,
.accent-line--color-primary::after {
    background: var(--bs-primary, #0d6efd);
}

/* ========================================
   Alignment Override
   Keep header alignment independent of line position
   ======================================== */
.accent-line--top-left > *,
.accent-line--bottom-left > * {
    text-align: inherit;
}

.accent-line--top-center > *,
.accent-line--bottom-center > * {
    text-align: inherit;
}

.accent-line--top-right > *,
.accent-line--bottom-right > * {
    text-align: inherit;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 767.98px) {
    :root {
        --accent-line-spacing: 0.75rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .accent-line--top-left::before,
    .accent-line--top-center::before,
    .accent-line--top-right::before,
    .accent-line--bottom-left::after,
    .accent-line--bottom-center::after,
    .accent-line--bottom-right::after {
        background: #000 !important;
    }
}