/* ================================================================
   RTVNovice custom overrides — fixes and additions on top of
   the downloaded rtvslo-bootstrap.min.css
   ================================================================ */

/* --- Fonts ------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:wght@400;700&display=swap');

/* Scale the whole UI up ~1.33x so it matches RTVSlo at 100% zoom.
   All sizing is in rem, so this single change scales everything. */
html { font-size: 120%; }

/* Fix: rtvslo-bootstrap.min.css sets body { padding-top: 50px } for their topbar */
body {
    font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
    padding-top: 0 !important;
    background-color: #111217 !important;
    color: #d8d8e0 !important;
}
/* Serif only for article-body headings; news cards use bold sans-serif */
h1, h2, h3 { font-family: 'Source Sans 3', Arial, sans-serif; font-weight: 700; }
.article-body h1,
.article-body h2,
.article-body h3 { font-family: 'Source Serif 4', Georgia, serif; }

/* ================================================================
   TWO-BAR NAVIGATION
   Bar 1: Blue MMC bar — sticky top:0
   Bar 2: Dark pill-buttons bar — sticky top:60px
   ================================================================ */

/* --- Bar 1: Blue MMC bar --------------------------------------- */
#main-bar {
    background-color: #3363ad;
    position: sticky;
    top: 0;
    z-index: 1040;
    height: 3.75rem;
    width: 100%;
}
.main-bar-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* MMC logo */
#menu-logo {
    flex-shrink: 0;
    border-right: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
}
#menu-logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none;
    transform: none !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    white-space: normal !important;
}
.mmc-logo-img {
    display: block;
    height: 2rem;
    width: auto;
}
.main-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.main-bar-icon {
    color: rgba(255,255,255,.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
}
.main-bar-icon:hover { color: #fff; }
.main-bar-icon svg { display: block; }

/* --- Bar 2: Dark pill-buttons bar ------------------------------ */
#sub-menu {
    background-color: #1d2125;
    position: sticky;
    top: 3.75rem;
    z-index: 1030;
    height: 3rem;
    width: 100%;
}
#sub-menu-scroll {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
#sub-menu-scroll::-webkit-scrollbar { display: none; }
.pill-btn {
    display: inline-flex;
    align-items: center;
    height: 2.125rem;
    padding: 0 1.125rem;
    border-radius: 1.0625rem;
    border: none;
    background: #3a3f45;
    color: rgba(255,255,255,.9);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
    font-family: 'Source Sans 3', Arial, sans-serif;
    flex-shrink: 0;
}
.pill-btn:hover {
    background: #4a5058;
    color: #fff;
    text-decoration: none;
}
.pill-btn.pill-active {
    background: #4a5058;
    color: #fff;
}

/* --- Main container ---------------------------------------------- */
#main-container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 15px;
    background: transparent !important;
}

/* Bootstrap .container bg override for dark theme + widen at xl */
.container, .container-fluid { background: transparent !important; }
.news-block { background: transparent !important; }
@media (min-width: 1200px) {
    .container { max-width: 1340px; }
}

/* --- Section headings -------------------------------------------- */
.section-heading {
    padding: 14px 0 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid #3363ad;
}
.section-heading.blue { border-color: #3363ad; }
.section-heading.blue-light { border-color: #2a2c38; }
.section-title {
    color: #7aa7d0;
    font-size: .9rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: 'Source Sans 3', Arial, sans-serif;
}
.section-title a { color: inherit; text-decoration: none; }
/* White section title (e.g. "Več novic") — white on black */
.section-title-light { color: #ffffff !important; }

/* --- News blocks ------------------------------------------------- */
.news-block { margin-bottom: 28px; }
.add-gutter-bottom { margin-bottom: 24px; }

/* --- Aktualno heading row + weather widget ---------------------- */
.aktualno-row {
    padding-top: 14px;
    margin-bottom: 6px;
}
.aktualno-row .section-heading {
    border-bottom: none;
    padding: 0;
    flex: 1;
    margin-right: 20px;
}
.aktualno-row .section-title {
    font-size: 1.25rem;
    color: #e8e8f0;
    letter-spacing: .3px;
}

.weather-widget {
    align-items: center;
    gap: 18px;
    padding: 6px 4px;
}
.weather-now {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 16px;
    border-right: 1px solid #2a2c38;
}
.weather-now .wicon-now { width: 30px; height: 30px; }
.weather-now-temp {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ececf2;
}
.weather-days {
    display: flex;
    gap: 16px;
}
.wday {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 38px;
}
.wday-name {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #8b8f9e;
    text-transform: uppercase;
}
.wicon { width: 22px; height: 22px; display: block; }
.wday-temp {
    font-size: .8rem;
    font-weight: 600;
    color: #cdcfd8;
}

/* --- Images ---------------------------------------------------- */
.image-container img.news-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Ensure .container-16-9 always keeps 16:9 aspect ratio */
.md-news .image-link.container-16-9::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}
.md-news .image-link.container-16-9 { position: relative; }
.md-news .image-link.container-16-9 img.news-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: none;
}

/* --- XL news (hero card) — RTVSlo overlay style ---------------- */
.xl-news {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    color: #fff;
    margin-bottom: 8px;
    background: #0f0f14;
}
/* Default aspect-ratio spacer; overridden when hero fills column height */
.xl-news::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}
/* When hero is flex-grow-1 filling its column, suppress the fixed aspect ratio */
.xl-news.flex-grow-1::before { display: none !important; content: none !important; }
.xl-news.flex-grow-1 { min-height: 220px; }
/* Image fills the card absolutely */
.xl-news .image-container.container-16-9 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #0f0f14;
}
/* Suppress the container's own ::before padding (not needed here) */
.xl-news .image-container.container-16-9::before { display: none !important; content: none !important; }
.xl-news .image-container img.news-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}
/* Gradient removed — no dark overlay on the hero image */
.xl-news .image-container.container-16-9::after { display: none !important; }
/* Text overlays at bottom */
.xl-news .text-container {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    padding: 12px 18px 16px;
}
.xl-news .text-container h2.card-title {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 6px;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    font-family: 'Source Sans 3', Arial, sans-serif;
}
.xl-news .text-container h2.card-title .ct-link { color: #fff; }
.xl-news .text-container h2.card-title .ct-link:hover { color: rgba(255,255,255,.88); }
/* On the hero overlay the category is brighter (over a photo) */
.xl-news .news-cat a { color: #d9dde4; }
.xl-news .news-cat::after { color: #c2c6cf; }
.xl-news .xl-excerpt {
    color: rgba(255,255,255,.82);
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xl-news .published { color: rgba(255,255,255,.7); }

/* --- MD news (medium cards) ------------------------------------- */
.md-news {
    margin-bottom: 8px;
    background: #181820;
    border-radius: 6px;
    overflow: hidden;
    transition: background .15s;
}
.md-news:hover { background: #1e1e2a; }
.md-news .image-link.container-16-9 {
    display: block;
    overflow: hidden;
    background: #1e1e2a;
}
.md-news .rotator-title-container {
    padding: 8px 10px 10px;
}
.md-news .rotator-title-container h3.card-title {
    font-size: .98rem;
    line-height: 1.32;
    margin: 0;
    font-weight: 700;
}
.md-news .rotator-title-container h3.card-title .ct-link { color: #e8eaf0; }
.md-news .rotator-title-container h3.card-title .ct-link:hover { color: #fff; }
.md-news .rotator-title-container h3.card-title .news-cat a { color: #9aa1ac; }

/* --- News category + title (RTVSlo inline format) --------------- */
/* "📹 Category / Title" all on one continuous line:
   white camera icon, gray category, gray " / " separator, white title.
   No line break, no coloured dot — matches rtvslo.si. */
.card-title {
    font-size: 1.02rem;
    line-height: 1.32;
    font-weight: 700;
    margin: 0;
    font-family: 'Source Sans 3', Arial, sans-serif;
}
.news-cat {
    display: inline;
    font-weight: 400;
}
.news-cat::before {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: .3em;
    vertical-align: -.16em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23ffffff%27%20d%3D%27M15%208.5V6.5A1.5%201.5%200%200%200%2013.5%205h-9A1.5%201.5%200%200%200%203%206.5v11A1.5%201.5%200%200%200%204.5%2019h9a1.5%201.5%200%200%200%201.5-1.5v-2l4.2%203.1a.6.6%200%200%200%20.96-.48V5.88a.6.6%200%200%200-.96-.48L15%208.5z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.news-cat a {
    color: #9aa1ac;
    font-weight: 400;
    text-decoration: none;
    font-family: 'Source Sans 3', Arial, sans-serif;
}
.news-cat a:hover { color: #c2c8d2; text-decoration: underline; }
.news-cat::after { content: ' /\00a0'; color: #8a909c; }
.ct-link { color: #e8eaf0; text-decoration: none; }
.ct-link:hover { color: #fff; text-decoration: none; }

/* --- Sidebar / Izpostavljeno ------------------------------------ */
.sidebar-news { padding-left: 10px; border-left: none; }
.article-container-small { border-bottom: 1px solid #1e2030; padding-bottom: 10px; }
.article-container-small .col-8 h5 { font-size: .82rem; line-height: 1.3; }
.article-container-small .col-8 h5 a { color: #ccd0dc; text-decoration: none; font-weight: 600; font-family: 'Source Sans 3', Arial, sans-serif; }
.article-container-small .col-8 h5 a:hover { color: #7aa7d0; }
.article-container-small .col-4 { padding-right: 8px; }
.article-container-small .col-4 img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

/* Izpostavljeno dark card block */
.izpostavljeno-block {
    background: #181820;
    border-radius: 8px;
    padding: 16px 12px 8px;
    margin-bottom: 6px;
}
.izpostavljeno-block .section-heading {
    border-color: #2e3038;
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.izpostavljeno-block .section-title {
    color: #c7c9d4;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
}
.izpost-card {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #252535;
}
.izpost-card:last-child { border-bottom: none; }
.izpost-card .izpost-thumb {
    flex-shrink: 0;
    width: 90px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    background: #252535;
}
.izpost-card .izpost-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.izpost-card .izpost-text { flex: 1; min-width: 0; }
.izpost-card .izpost-text .news-cat { margin-bottom: 3px; }
.izpost-card .izpost-title {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    font-family: 'Source Sans 3', Arial, sans-serif;
}
.izpost-card .izpost-title a { color: #dde0e8; text-decoration: none; }
.izpost-card .izpost-title a:hover { color: #7aa7d0; }

/* --- Article page ----------------------------------------------- */
.article-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #252535; }
.article-header h1 {
    font-size: 1.85rem;
    line-height: 1.25;
    font-weight: 700;
    margin: 12px 0 10px;
    color: #eeeef4;
}
.subtitle {
    font-size: 1.05rem;
    color: #9ea0b0;
    margin-bottom: 14px;
    font-weight: 400;
    line-height: 1.45;
}
.article-meta-mobile { font-size: .82rem; color: #6e7080; margin-bottom: 16px; }
.news-toolbar--mobile__author { font-size: .85rem; color: #8890a0; margin-top: 4px; }

/* Strip inline styles from Nova24TV article content */
.article-content [style] { all: revert; }
.article-content { font-size: 1rem; line-height: 1.75; color: #c8cad8; }
.article-content p { margin-bottom: 1.1rem; color: #c8cad8; }
.article-content h2 { font-size: 1.3rem; margin: 1.5rem 0 .7rem; color: #eeeef4; }
.article-content h3 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; color: #eeeef4; }
.article-content img { max-width: 100%; height: auto; }
.article-content figure { margin: 1.2rem 0; }
.article-content figcaption { font-size: .8rem; color: #666880; margin-top: 4px; }
.article-content blockquote {
    border-left: 3px solid #3363ad;
    padding: .5rem 1rem;
    color: #9ea0b0;
    background: #181820;
    margin: 1rem 0;
}
.article-content p[style] { text-align: left !important; }

/* c-figure-full */
.c-figure-full { margin: 0 0 20px; }
.c-figure-full img { width: 100%; height: auto; max-height: 500px; object-fit: cover; }

/* Article footer */
.article-footer { font-size: .8rem; }
.article-footer a { color: #3363ad; }

/* --- Published date --------------------------------------------- */
.published { color: #606278; font-size: .75rem; margin: 2px 0 4px; }

/* --- Footer ----------------------------------------------------- */
.main-footer {
    background: #0b0b10;
    color: #888;
    padding: 32px 0 20px;
    margin-top: 48px;
    font-size: .875rem;
}
.main-footer h6 {
    color: #c0c0cc;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.main-footer a { color: #7aa7d0; text-decoration: none; }
.main-footer a:hover { color: #aac4e8; text-decoration: underline; }
.main-footer hr { border-color: rgba(255,255,255,.08); }
.main-footer .text-muted { color: #555 !important; }
.footer-logo { color: #e0e0f0; font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
.footer-desc { font-size: .82rem; color: #666878; }

/* --- Responsive ------------------------------------------------- */
@media (max-width: 991px) {
    #main-container { padding: 0 10px; }
    .xl-news .text-container h2 { font-size: 1.1rem; }
    .sidebar-news { padding-left: 0; border-left: none; border-top: 1px solid #2a2c38; padding-top: 14px; }
}
@media (max-width: 575px) {
    .article-header h1 { font-size: 1.4rem; }
    #sub-menu-scroll { padding: 0 8px; }
    .sub-menu-item { padding: 9px 10px; font-size: .82rem; }
}