/*
 * mod_newsticker — stylesheet v1.0.2
 * © 2026 Konstantinos Koulaouzidis / OlivNewton
 * All colours/sizes use CSS custom properties set inline by the template.
 * Override any --nt-* variable from YooTheme or your own stylesheet.
 */

.mod-newsticker {
    --nt-bg:         #1a1a2e;
    --nt-text:       #ffffff;
    --nt-label-bg:   #e63946;
    --nt-label-text: #ffffff;
    --nt-link:       #f4d03f;
    --nt-h:          40px;
    --nt-fs:         14px;
    --nt-radius:     0px;

    display:       flex;
    align-items:   stretch;
    width:         100%;
    height:        var(--nt-h);
    background:    var(--nt-bg);
    color:         var(--nt-text);
    font-size:     var(--nt-fs);
    border-radius: var(--nt-radius);
    overflow:      hidden;
    position:      relative;
    box-sizing:    border-box;
    line-height:   1;
}

/* ── Label badge ──────────────────────────────────────────────────────────── */
.nt-label {
    flex-shrink:    0;
    display:        flex;
    align-items:    center;
    padding:        0 22px 0 14px;
    background:     var(--nt-label-bg);
    color:          var(--nt-label-text);
    font-weight:    700;
    font-size:      calc(var(--nt-fs) * 0.9);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space:    nowrap;
    z-index:        2;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

/* ── Bar-level link ───────────────────────────────────────────────────────── */
.nt-bar-link {
    display:         flex;
    align-items:     center;
    flex:            1;
    overflow:        hidden;
    text-decoration: none;
    color:           inherit;
    cursor:          pointer;
}

/* ── Viewport ─────────────────────────────────────────────────────────────── */
.nt-viewport {
    opacity: 0; /* hidden until JS positions and fades in */
    flex:        1;
    overflow:    hidden;
    display:     flex;
    align-items: center;
    position:    relative;
    mask-image:  linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* ── Stage (JS wraps track + clone here) ─────────────────────────────────── */
.nt-stage {
    display:     flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

/* ── Track ────────────────────────────────────────────────────────────────── */
.nt-track {
    display:     inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Items ────────────────────────────────────────────────────────────────── */
.nt-item {
    display:     inline-flex;
    align-items: center;
    padding:     0 8px;
    white-space: nowrap;
}

.nt-intro {
    margin-right: 6px;
    opacity:      0.75;
    font-style:   italic;
}

.nt-item-title {
    font-weight: 700;
}

.nt-item-sep {
    margin:  0 4px;
    opacity: 0.6;
}

.nt-item-text {
    opacity: 0.9;
}

.nt-separator {
    color:   var(--nt-link);
    padding: 0 6px;
}

/* ── Item links ───────────────────────────────────────────────────────────── */
.nt-item-link {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    text-decoration: none;
    color:           var(--nt-link);
    transition:      opacity 0.2s;
}

.nt-item-link:hover,
.nt-item-link:focus {
    opacity:         0.8;
    text-decoration: underline;
    outline:         2px solid var(--nt-link);
    outline-offset:  2px;
    border-radius:   2px;
}

/* ── Gap loop fade helpers ────────────────────────────────────────────────── */
.nt-track--gap-hide { opacity: 0; transition: opacity 0.4s ease; }
.nt-track--gap-show { opacity: 1; transition: opacity 0.4s ease; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .nt-stage { transform: none !important; }
    .nt-viewport {
        overflow-x:         auto;
        mask-image:         none;
        -webkit-mask-image: none;
    }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nt-label { display: none; }
}

/* ── YooTheme toolbar position: full-width takeover ─────────────────────────
   Targets the exact DOM structure YooTheme renders for toolbar positions:
   .tm-toolbar > .uk-container > div > .uk-grid > .uk-first-column > .uk-panel

   Add class "nt-toolbar" to Custom CSS Class in the module backend.
   Then set Background Color in the Appearance tab — it replaces the toolbar bg.
──────────────────────────────────────────────────────────────────────────── */

/* 1. Kill toolbar padding and background */
.tm-toolbar:has(.nt-toolbar) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/* 2. uk-container — remove padding and expand to full width */
.tm-toolbar:has(.nt-toolbar) .uk-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. The flex wrapper div inside uk-container */
.tm-toolbar:has(.nt-toolbar) .uk-flex {
    width: 100% !important;
    gap: 0 !important;
}

/* 4. The plain div wrapping uk-grid — make it full width */
.tm-toolbar:has(.nt-toolbar) .uk-container > div {
    width: 100% !important;
    flex: 1 !important;
    margin-left: 0 !important;
}

/* 5. uk-grid row */
.tm-toolbar:has(.nt-toolbar) .uk-grid {
    width: 100% !important;
    margin-left: 0 !important;
}

/* 6. uk-first-column cell */
.tm-toolbar:has(.nt-toolbar) .uk-first-column {
    width: 100% !important;
    padding-left: 0 !important;
}

/* 7. uk-panel wrapper Joomla adds around each module */
.tm-toolbar:has(.nt-toolbar) .uk-panel {
    width: 100% !important;
}

/* 8. The ticker div itself */
.mod-newsticker.nt-toolbar {
    width: 100% !important;
    border-radius: 0 !important;
}