.vuh-host {
    --vuh-accent: #d71920;
    --vuh-bg: #fff;
    --vuh-text: #191919;
    --vuh-size: 18px;
    --vuh-label-size: 14px;
    --vuh-label-text: #fff;
    --vuh-width: 1068px;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--vuh-width);
    margin: 0 auto;
    position: relative;
    clear: both;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-stretch: condensed;
}
.vuh-host[hidden], .vuh-host [hidden] { display: none !important; }
.vuh-host *, .vuh-host *::before, .vuh-host *::after { box-sizing: border-box; }
.vuh-host .vuh-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px;
    min-height: 40px;
    margin: 0;
    border: 0;
    background: var(--vuh-bg);
    color: var(--vuh-text);
    font-family: inherit;
    font-size: var(--vuh-size);
    line-height: 1.4;
    text-align: start;
    animation: vuh-appear .22s ease-out;
}
/* Boxed Newspaper layouts use an inner card, not the full-width outer wrapper.
   JavaScript reads that card's actual responsive width; this is the theme fallback. */
.td-boxed-layout .vuh-host[data-vuh-auto="1"] {
    --vuh-shell-width: 1164px;
}
.vuh-host[data-vuh-auto="1"] {
    max-width: var(--vuh-shell-width, none);
    background: var(--vuh-bg);
}
.vuh-host[data-vuh-auto="1"] .vuh-bar {
    width: 100%;
    max-width: var(--vuh-width);
    margin-left: auto;
    margin-right: auto;
}
.vuh-host .vuh-tag {
    flex: 0 0 auto;
    max-width: 45%;
    color: var(--vuh-label-text);
    background: var(--vuh-accent);
    border-radius: 4px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: var(--vuh-label-size);
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    animation: vuh-pulse 2.8s ease-in-out infinite;
}
.vuh-host .vuh-content { flex: 1 1 auto; min-width: 0; }
.vuh-host .vuh-headline {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vuh-text);
    font: inherit;
    font-weight: 400;
    line-height: inherit;
    text-transform: none;
    text-decoration: none;
    overflow-wrap: anywhere;
    box-shadow: none;
}
.vuh-host a.vuh-headline:hover { color: var(--vuh-text); text-decoration: underline; text-underline-offset: 3px; }
.vuh-host a.vuh-headline:focus-visible, .vuh-host .vuh-close:focus-visible { outline: 2px solid var(--vuh-accent); outline-offset: 4px; }
.vuh-host .vuh-time { display: inline-block; margin-inline-start: 10px; color: var(--vuh-text); opacity: .6; font-size: .78em; white-space: nowrap; }
.vuh-host .vuh-close {
    flex: 0 0 32px;
    align-self: center;
    appearance: none;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 0;
    border-radius: 3px;
    padding: 0;
    margin: -4px 0;
    background: transparent;
    color: var(--vuh-text);
    font: 24px/32px Arial, sans-serif;
    cursor: pointer;
    box-shadow: none;
}
.vuh-host .vuh-close:hover { background: rgba(127,127,127,.12); }
@keyframes vuh-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes vuh-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
.vuh-host[data-vuh-pulse="0"] .vuh-tag { animation: none; }
@media (max-width: 600px) {
    .vuh-host .vuh-bar { gap: 10px; padding: 6px 12px; }
    .vuh-host .vuh-tag { max-width: 42%; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) { .vuh-host .vuh-bar, .vuh-host .vuh-tag { animation: none; } }
