/* =========================================================
   News Marquee — responsive ticker styles
   ========================================================= */

.nmq-marquee {
    --nmq-bg: #ffffff;
    --nmq-text: #1a1a1a;
    --nmq-label: #1a1a1a;
    --nmq-sep: #16a34a;
    --nmq-border: #e5e7eb;
    --nmq-speed: 50px; /* px per second, set inline per instance */
    --nmq-height: 56px;
    --nmq-radius: 8px;

    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: var(--nmq-height);
    background: var(--nmq-bg);
    color: var(--nmq-text);
    border: none;
    border-radius: var(--nmq-radius);
    overflow: hidden;
    font-family: Georgia, "Times New Roman", "Noto Serif", serif;
    box-sizing: border-box;
    position: relative;
}

.nmq-marquee *,
.nmq-marquee *::before,
.nmq-marquee *::after {
    box-sizing: border-box;
}

/* ---------- Label (Latest News) ---------- */
.nmq-marquee__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 24px 0 24px;
    color: var(--nmq-label);
    border-right: 1px solid var(--nmq-border);
    white-space: nowrap;
}

.nmq-marquee__label-text {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: 0.2px;
}

/* ---------- Viewport (the scrolling window) ---------- */
.nmq-marquee__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    /* fade edges so the seam looks clean */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* The track holds two copies of the list and slides as a whole */
.nmq-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: nmq-scroll var(--nmq-duration, 30s) linear infinite;
}

.nmq-marquee.is-paused .nmq-marquee__track {
    animation-play-state: paused;
}

@keyframes nmq-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.nmq-marquee__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.nmq-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

.nmq-marquee__item .nmq-marquee__sep {
    color: var(--nmq-sep);
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.nmq-marquee__link {
    text-decoration: none;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
    text-underline-offset: 3px;
}

/* High-specificity selector chain: defeats almost any theme stylesheet
   without needing !important. Covers every link pseudo-state because many
   themes only style :link or :visited, not the bare element. */
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link:link,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link:visited,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link:active {
    color: var(--nmq-text);
    text-decoration: none;
    text-decoration-color: transparent;
}

.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link:hover,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link:focus,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__link:focus-visible {
    color: var(--nmq-sep);
    text-decoration: underline;
    text-decoration-color: currentColor;
    outline: none;
}

/* Plain (non-linked) item text — also locked against theme inheritance */
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__text {
    color: var(--nmq-text);
}

.nmq-marquee .nmq-marquee__viewport .nmq-marquee__item.is-highlight .nmq-marquee__link,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__item.is-highlight .nmq-marquee__link:link,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__item.is-highlight .nmq-marquee__link:visited,
.nmq-marquee .nmq-marquee__viewport .nmq-marquee__item.is-highlight .nmq-marquee__text {
    font-weight: 700;
    color: var(--nmq-sep);
}

/* ---------- Pause / Play button ---------- */
.nmq-marquee__toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    align-self: center;
    margin: 0 12px 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nmq-btn-bg, #000000);
    border: none;
    border-radius: 50%;
    color: var(--nmq-btn-color, #ffffff);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
    z-index: 2;
}

.nmq-marquee__toggle:hover {
    background-color: var(--nmq-btn-bg-hover, var(--nmq-sep));
    color: var(--nmq-btn-color, #ffffff);
    transform: scale(1.06);
}

.nmq-marquee__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--nmq-bg, #ffffff), 0 0 0 4px var(--nmq-sep);
}

.nmq-marquee__toggle:active {
    transform: scale(0.94);
}

.nmq-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

.nmq-marquee .nmq-icon--play  { display: none; }
.nmq-marquee.is-paused .nmq-icon--pause { display: none; }
.nmq-marquee.is-paused .nmq-icon--play  { display: block; }

/* ---------- Responsive: tablets ---------- */
@media (max-width: 900px) {
    .nmq-marquee { --nmq-height: 52px; }
    .nmq-marquee__label       { padding: 0 18px; }
    .nmq-marquee__label-text  { font-size: 18px; }
    .nmq-marquee__item        { font-size: 13px; gap: 10px; padding: 0 10px; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 640px) {
    .nmq-marquee {
        --nmq-height: 48px;
        border-radius: 6px;
    }

    .nmq-marquee__label       { padding: 0 14px; }
    .nmq-marquee__label-text  { font-size: 16px; }

    .nmq-marquee__viewport {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }

    .nmq-marquee__item        { font-size: 13px; gap: 8px; padding: 0 8px; }
    .nmq-marquee__item .nmq-marquee__sep { font-size: 16px; }

    .nmq-marquee__toggle      { width: 36px; height: 36px; margin: 0 8px 0 4px; }
    .nmq-icon                 { width: 16px; height: 16px; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
    .nmq-marquee__label       { padding: 0 10px; }
    .nmq-marquee__label-text  { font-size: 15px; }
}

/* ---------- RTL ---------- */
.rtl .nmq-marquee__label,
[dir="rtl"] .nmq-marquee__label {
    border-right: none;
    border-left: 1px solid var(--nmq-border);
}

[dir="rtl"] .nmq-marquee__toggle {
    margin: 0 6px 0 12px;
}

[dir="rtl"] .nmq-marquee__track {
    animation-direction: reverse;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .nmq-marquee__track {
        animation-duration: calc(var(--nmq-duration, 30s) * 3);
    }
}

/* ---------- Print ---------- */
@media print {
    .nmq-marquee__toggle { display: none; }
    .nmq-marquee__track  { animation: none; transform: none; }
    .nmq-marquee__viewport { -webkit-mask-image: none; mask-image: none; overflow: visible; }
}