/* ============================================================
   ICK News - public site overrides.
   Small, additive tweaks layered on top of the purchased theme so
   dynamic content (any-size uploaded images) keeps the original
   layout. We do NOT edit the theme's own CSS files.
   ============================================================ */

/* Global font override: use Inter across the public site. */
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
label,
small,
strong,
th,
td {
    font-family: 'Inter', sans-serif !important;
}

/* News slider: make each mosaic slot a fixed height and let the image
   fill it via object-fit, so uploaded images of any dimension keep the
   exact original layout (no gaps, no stretching). Heights mirror the
   theme's original demo image proportions. */
.news-slider-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-slider-layer.first {
    height: 320px;
}
.news-slider-layer.second {
    height: 320px;
}
.news-slider-layer.third,
.news-slider-layer.fourth {
    /* third + fourth stack inside the same right column as a 320px block */
    height: 158px;
}
.news-slider-layer.third {
    margin-bottom: 4px;
}

/* On phones, hide the middle tile and keep the 3-tile mosaic. */
@media (max-width: 767px) {
    #news-slider .news-slider-layer.second {
        display: none;
    }

    #news-slider .news-slider-layer.first {
        width: 52%;
        margin-right: 2%;
    }

    #news-slider .news-slider-layer.third,
    #news-slider .news-slider-layer.fourth {
        width: 46%;
    }
}

/* Keep the image link wrapper filling the slot height too. */
.news-slider-layer a,
.news-slider-layer a:before {
    height: 100%;
}

/* ---- Advert slots ----
   Every ad is a fixed-size box; the image fills it via object-fit:cover so any
   uploaded image is cropped to the slot size instead of breaking the layout.
   Boxes are responsive (never wider than their column). */
.kz-ad {
    display: block;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
}
.kz-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kz-ad--header   { width: 728px; height: 90px; }
.kz-ad--sidebar  { width: 400px; height: 270px; }
.kz-ad--sidebar_tall { width: 300px; height: 600px; }
.kz-ad--midpage  { width: 820px; height: 100px; }

/* On small screens, let the box shrink to its column width while keeping a
   sensible aspect ratio (so it still crops cleanly, never overflows). */
@media (max-width: 991px) {
    .kz-ad--header   { width: 100%; height: auto; aspect-ratio: 728 / 90; }
    .kz-ad--sidebar  { width: 100%; height: auto; aspect-ratio: 400 / 270; }
    .kz-ad--sidebar_tall { width: 100%; height: auto; aspect-ratio: 300 / 600; }
    .kz-ad--midpage  { width: 100%; height: auto; aspect-ratio: 820 / 100; }
    .kz-ad img { height: auto; aspect-ratio: inherit; }
}

/* ---- Hero slider ----
   Each slide keeps the original 400px parallax height and covers the background
   image, so rotating the top 3 featured stories looks identical to the single
   hero, just animated. */
#hero-slider .hero-slide {
    height: 400px;
    width: 100%;
    background-position: center !important;
    background-size: cover !important;
}
#hero-slider .hero-slide .container {
    height: 400px;
}
#hero-slider .owl-pagination {
    position: absolute;
    bottom: 14px;
    width: 100%;
    z-index: 1001;
}
/* owl-carousel resets font-size on its item wrappers, which shrinks the
   caption text. Restore the theme's hero caption sizes explicitly so the
   slider text matches the original static parallax exactly. */
#hero-slider .caption { top: 20%; }
#hero-slider .large-caption  { font-size: 5em; }
#hero-slider .medium-caption { font-size: 2.2em; }
#hero-slider .caption h5     { font-size: 1.25em; }
@media (max-width: 991px) {
    #hero-slider .large-caption  { font-size: 3.2em; }
    #hero-slider .medium-caption { font-size: 1.6em; }
}
@media (max-width: 767px) {
    #hero-slider .hero-slide,
    #hero-slider .hero-slide .container { height: 320px; }
    #hero-slider .large-caption  { font-size: 2.1em; }
    #hero-slider .medium-caption { font-size: 1.2em; }
    #hero-slider .caption h5     { font-size: .9em; }
}

/* ---- Uniform article thumbnails across the homepage ----
   The theme had no fixed image heights (its demo images were pre-cropped). With
   dynamic images of varied dimensions, heights differed and broke alignment.
   We pin each image type to a fixed height and crop with object-fit:cover so
   every thumbnail in a block is the same size, regardless of the uploaded image. */

/* News grids (2-col and lists) */
.item .item-image-1 img,
.item .item-image-2 img,
.item .item-image-3 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
/* Small list / sidebar thumbnails */
.item .item-image img,
.entry-post .item .item-image img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}
/* News.html-style horizontal blocks */
.entry-block-small .entry-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
/* Small mini-strip blocks */
.news-block .item-block .item-image img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
/* Section/article sidebar feed thumbnails */
.sidebar-newsfeed .item-image img,
.sidebar-post .item-image img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
}

/* ---- Multimedia gallery (big-gallery carousel) ----
   The theme only set width:100% on gallery images, so a tall image stayed tall
   and broke the row alignment. Give each slide a fixed height and crop the
   image to fill it, so every gallery item is the same uniform size. */
.big-gallery {
    height: 220px;
}
.big-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* "More Stories" small-gallery carousel: uniform image height too. */
.small-gallery img {
    width: 100% !important;
    height: 180px;
    object-fit: cover;
    float: none !important;
    display: block;
}

/* ===========================================================================
   Single article — readability polish + byline + reactions + comments
   =========================================================================== */
.post-full .entry-title { font-size: 1.55em; line-height: 1.25; font-weight: 800; margin-bottom: 12px; }
.post-full .post-meta-elements { border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 18px; }
.post-full .post-meta-author strong { color: #c1262d; }
.post-full .entry-content { font-size: 1.02em; line-height: 1.8; color: #2c2c2c; }
.post-full .entry-content p { margin-bottom: 1.15em; }
.post-full .entry-content h2,
.post-full .entry-content h3 { margin: 1.3em 0 .5em; font-weight: 700; }
.post-full .entry-content img { max-width: 100%; height: auto; border-radius: 4px; margin: .6em 0; }
.post-full .entry-content blockquote {
    border-left: 4px solid #c1262d; background: #faf7f7; margin: 1.2em 0;
    padding: .8em 1.2em; font-style: italic; color: #444;
}
.post-full .entry-media img { width: 100%; border-radius: 4px; }

/* Bottom byline */
.kz-byline-foot {
    margin-top: 26px; padding: 12px 16px; background: #f6f6f6; border-radius: 4px;
    color: #555; font-size: 14px;
}
.kz-byline-foot i { color: #c1262d; margin-right: 6px; }

/* Like / dislike */
.kz-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.kz-reactions__label { font-weight: 700; margin-right: 6px; color: #333; }
.kz-react {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid #ddd; background: #fff; color: #444; border-radius: 30px;
    padding: 7px 16px; font-size: 14px; transition: all .15s ease;
}
.kz-react:hover { border-color: #bbb; }
.kz-react .kz-count { font-weight: 700; }
.kz-like.is-active   { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.kz-dislike.is-active{ background: #fdecea; border-color: #e57373; color: #c62828; }

/* Comments */
.kz-comments { margin-top: 38px; }
.kz-comments__n { color: #999; font-weight: 400; font-size: .7em; }
.kz-note { padding: 12px 16px; border-radius: 4px; margin-bottom: 18px; font-size: 14px; }
.kz-note--ok  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.kz-note--err { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; }
.kz-comment-list { list-style: none; padding: 0; margin: 0 0 26px; }
.kz-comment { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.kz-comment__avatar {
    flex: 0 0 42px; height: 42px; width: 42px; border-radius: 50%;
    background: #c1262d; color: #fff; font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.kz-comment__head { margin-bottom: 4px; }
.kz-comment__name { font-weight: 700; color: #222; }
.kz-comment__date { color: #999; font-size: 12px; margin-left: 8px; }
.kz-comment__text { margin: 0; color: #333; line-height: 1.6; }
.kz-no-comments { padding: 14px 0 22px; }

/* Comment form */
.kz-comment-form { background: #f8f8f8; border-radius: 6px; padding: 20px; }
.kz-comment-form h4 { margin-top: 0; font-weight: 700; }
.kz-comment-form .form-control { margin-bottom: 12px; }
.kz-comment-form textarea { resize: vertical; }
.kz-btn-submit {
    background: #c1262d; color: #fff; border: 0; border-radius: 4px;
    padding: 10px 26px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.kz-btn-submit:hover { background: #a31f25; }
.kz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Auto-dismiss fade for the comment notice */
.kz-note { transition: opacity .5s ease; }
.kz-note.kz-fade-out { opacity: 0; }

/* Single article — responsive (phones/tablets) */
@media (max-width: 767px) {
    /* ---- Mobile reading gutter ----
       The theme zeroes ALL column padding on phones
       (responsive.css: .row.no-gutter [class*="col-"] { padding:0 }), so the
       article text ran flush to both screen edges and no longer lined up with
       the rest of the page — most visibly on the opening (lead) paragraph.
       Give the article column a proper reading gutter and make every block
       inside it share the SAME left edge. */
    #main-section .post.post-full,
    #main-section .kz-comments {
        padding-left: 15px;
        padding-right: 15px;
    }
    /* The featured photo stays full-bleed (edge to edge) — it reads better on a
       phone — so pull just the media back out of the gutter. */
    .post-full .entry-media {
        margin-left: -15px;
        margin-right: -15px;
    }
    .post-full .entry-media img { border-radius: 0; }

    /* Lead + body paragraphs: one consistent left edge, no stray indents or
       centring coming from pasted editor markup. */
    .post-full .entry-content,
    .post-full .entry-content > p,
    .post-full .entry-content > div {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        text-indent: 0;
    }
    /* Editor-pasted paragraphs sometimes carry inline text-align/margins that
       knock the lead out of line on a narrow screen. */
    .post-full .entry-content p[style],
    .post-full .entry-content div[style] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
        text-indent: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
    }
    /* The first (lead) paragraph gets a touch more air below the photo/meta. */
    .post-full .entry-content > p:first-child {
        margin-top: 0;
    }
    /* Any image floated inside the body stacks instead of squeezing the text. */
    .post-full .entry-content img {
        float: none !important;
        display: block;
        margin: .8em auto;
        max-width: 100% !important;
        height: auto !important;
    }
    /* Long words / URLs can't push the column sideways any more. */
    .post-full .entry-content {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    /* Tables in the body scroll instead of stretching the page. */
    .post-full .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .post-full .entry-title { font-size: 1.3em; }
    .post-full .entry-content { font-size: 1em; line-height: 1.75; }
    .post-full .post-meta-elements { font-size: 13px; }
    .kz-reactions { gap: 8px; }
    .kz-react { padding: 6px 12px; font-size: 13px; }
    .kz-reactions__label { flex-basis: 100%; margin-bottom: 4px; }
    .kz-comment-form { padding: 14px; }
    .kz-comment__avatar { flex: 0 0 36px; height: 36px; width: 36px; font-size: 16px; }
    /* Stack the article above the sidebar with breathing room. */
    .post.post-full { margin-bottom: 8px; }
    .col-md-8 + .col-md-4 { margin-top: 24px; }
}
@media (max-width: 480px) {
    .post-full .entry-title { font-size: 1.18em; }
    .kz-react__txt { display: none; }   /* compact: icon + count only on tiny screens */
}

/* ===========================================================================
   Single article: the story TITLE sits ABOVE the photo (editorial request).
   Only the full story page is affected — the homepage/section card layouts
   keep the theme's original image-then-title order.
   =========================================================================== */
.post-full .kz-entry-head {
    margin-bottom: 14px;
}
.post-full .kz-entry-head h1.entry-title {
    font-size: 1.8em;
    line-height: 1.25;
    font-weight: 800;
    margin: 0;
}
.post-full .entry-media {
    margin-bottom: 18px;
}
@media (max-width: 767px) {
    .post-full .kz-entry-head h1.entry-title { font-size: 1.35em; }
    /* Headline shares the same left edge as the body text (see the mobile
       reading-gutter block below). */
    .post-full .kz-entry-head { margin-bottom: 12px; }
}
@media (max-width: 480px) {
    .post-full .kz-entry-head h1.entry-title { font-size: 1.22em; }
}

/* ---- Contact page info list ---- */
.kz-contact-info { list-style: none; padding: 0; margin: 0; }
.kz-contact-info li { display: flex; gap: 14px; margin-bottom: 22px; }
.kz-contact-info li i {
    flex: 0 0 42px; height: 42px; width: 42px; border-radius: 50%;
    background: #c1262d; color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 18px;
}
.kz-contact-info li span { line-height: 1.5; color: #444; }
.kz-contact-info li a { color: #c1262d; }

/* ---- Quick links bar (Radio / Latest News / Multimedia / About Us) ----
   The theme keeps this row in a Bootstrap .collapse that only reveals on the
   sticky-nav, so the links weren't clickable until you scrolled. We ONLY undo
   that collapse so the links work — no colour/background changes (the theme's
   own styling for this bar is kept intact). */
.collapse.navbar-collapse.nav-below-main {
    display: block !important;       /* keep the quick links always visible/clickable */
    height: auto !important;
    overflow: visible !important;
}

/* ---- Dropdown sub-menu readability ----
   The theme has two conflicting hover rules for dropdown items: one sets the
   text to light blue (#40a9ff), the other to white on a light-blue background.
   When the light-blue text wins you get light-blue-on-light-blue = unreadable
   (e.g. "Community issues", "University notices"). Force clear contrast. */
#fixed-navbar .dropdown-menu > li > a {
    color: #333 !important;          /* dark, clearly readable by default */
}
#fixed-navbar .dropdown-menu > li > a:hover,
#fixed-navbar .dropdown-menu > li > a:focus {
    color: #fff !important;          /* white text on the blue hover background */
    background-color: #53b1ff !important;
}
/* Before scrolling, the theme leaves this bar behind the page content so the
   links can't be clicked. Lift it above so they work straight away. (Position
   only — no visual/colour change.) */
#nav-below-main {
    position: relative;
    z-index: 20;
}
#nav-below-main .nav.navbar-nav,
#nav-below-main .nav.navbar-nav > li > a {
    position: relative;
    z-index: 21;
}
/* The MAIN menu (with the dropdowns) must sit ABOVE the quick-links bar,
   otherwise an open dropdown (e.g. Social Affairs) is covered by the white
   quick-links bar and its lower items look faded/hidden. */
#fixed-navbar-toggle {
    position: relative;
    z-index: 40;                     /* above #nav-below-main (20) */
}
#fixed-navbar-toggle .dropdown-menu {
    z-index: 1050;                   /* dropdown clearly on top of everything */
}

/* Top-bar radio icon sits with the language / location / login icons. */
.right-top-menu .radio a { cursor: pointer; }

/* ---- On-site radio player (floating, toggled from the header link) ---- */
.kz-radio-link { cursor: pointer; }
.kz-radio-player {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
    background: #1a1a1a; color: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.35);
}
.kz-radio-player__bar {
    display: flex; align-items: center; gap: 12px;
    max-width: 1170px; margin: 0 auto; padding: 8px 14px; flex-wrap: wrap;
}
.kz-radio-player__live { color: #ff4d4d; font-weight: 700; white-space: nowrap; }
.kz-radio-player__live i { margin-right: 5px; }
.kz-radio-player__name { font-weight: 600; white-space: nowrap; }
.kz-radio-player__audio { flex: 1 1 220px; min-width: 180px; height: 36px; }
.kz-radio-player__open { color: #fff; opacity: .8; font-size: 16px; }
.kz-radio-player__open:hover { opacity: 1; color: #fff; }
.kz-radio-player__close {
    background: none; border: 0; color: #fff; font-size: 24px; line-height: 1;
    cursor: pointer; opacity: .8; padding: 0 4px;
}
.kz-radio-player__close:hover { opacity: 1; }
/* "Coming soon" state — ICK Radio is announced but not broadcasting yet. */
.kz-radio-player__soon { flex: 1 1 auto; opacity: .9; font-size: 14px; }
.kz-radio-soon { opacity: .75; font-size: .85em; font-weight: 400; }
@media (max-width: 600px) {
    .kz-radio-player__bar { gap: 8px; padding: 6px 10px; }
    .kz-radio-player__name { display: none; }
    .kz-radio-player__soon { font-size: 13px; }
}

/* ---- Language switcher (flag image + full name) ---- */
.right-top-menu .lang-switch a .lang-flag {
    width: 18px; height: 12px; object-fit: cover; margin-right: 5px;
    vertical-align: middle; border-radius: 2px;
}
.right-top-menu .lang-switch a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 0 6px;
}
.right-top-menu .lang-switch a.active-lang {
    color: #fff;
    text-decoration: underline;
}

/* ---- Footer fixes ----
   The footer logo was forced to 44px (too small for the EAUR banner). And the
   social-icons bar was a fixed 160px = room for only 4 icons, so the 5th
   (LinkedIn) wrapped and left an empty gap below the footer. Widen + no-wrap. */
#footer .site-logo img {
    width: auto !important;
    max-width: 160px;
    max-height: 56px;
    float: none;
    display: inline-block;
    vertical-align: middle;
}
#footer .site-logo h3 {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.footer-social-icons {
    width: auto !important;
    white-space: nowrap;
}
.footer-social-icons ul {
    display: flex;
    margin: 0;
    padding: 0;
}
.footer-social-icons li {
    list-style: none;
}

/* ---- Header logo spacing ----
   The theme reserved a tall gap above the logo (margin-top:34px) sized for the
   old text logo. With the compact EAUR image logo this leaves too much empty
   space above/below, so we lift it up and trim its vertical margins. Horizontal
   layout (logo left, ad right, menu) is unchanged. */
.header-logo {
    margin-top: 12px;
}
.header-logo img {
    margin-top: 4px;
    margin-bottom: 4px;
    /* Cap the logo so a large uploaded image can't blow up the header layout,
       while still showing a normal logo at a comfortable size. Aspect ratio is
       preserved; admins can upload any size safely. */
    width: auto !important;
    height: auto !important;
    max-height: 90px;
    max-width: 320px;
    object-fit: contain;
}

/* ============================================================
   Mobile: separate the SEARCH box from the MENU (hamburger)
   On phones the search sits in the top bar and the hamburger sits in the
   row directly beneath it. They ended up almost touching, so tapping the
   menu often hit the search instead. We add clear vertical separation and
   give the hamburger a proper finger-sized tap target.
   ============================================================ */
@media (max-width: 991px) {
    /* 1. Give the top bar (search + language + radio) room of its own so it
          can't sit on top of the menu row. */
    .top-menu {
        padding-bottom: 8px;
    }
    .top-menu .right-top-menu {
        margin-bottom: 0;
    }

    /* 2. Push the menu row clearly below the search row. The search field drops
          BELOW its magnifier button when it opens, so the menu button needs to
          start well clear of that drop-down area. */
    #mobile-nav .navbar-header {
        position: relative;
        padding-top: 14px;
    }
    /* The search field opens downward from the top bar; keep it clipped to the
       top bar so it can never land on top of the menu button. */
    .top-menu .search-input {
        top: 0;
    }

    /* 3. Logo on the LEFT, menu button on the RIGHT (the theme's own order),
          with the menu button given a proper finger-sized tap target and kept
          clear of the search icon above it.
          (The theme used margin-top:20px / padding:9px — a small target.) */
    #mobile-nav .navbar-header .sidenav-header-logo {
        float: left;
        margin-left: 12px;
    }
    .navbar-default .navbar-toggle {
        float: right !important;
        margin-top: 14px !important;
        margin-bottom: 8px;
        margin-right: 12px;
        margin-left: 0;
        padding: 12px 11px;
        min-width: 46px;
        min-height: 44px;
        position: relative;
        z-index: 30;              /* stays above the search input's expansion */
    }
    /* Keep the three bars centred in the larger button. */
    .navbar-default .navbar-toggle .icon-bar {
        width: 22px;
        display: block;
        margin: 0 auto;
    }
    .navbar-default .navbar-toggle .icon-bar + .icon-bar {
        margin-top: 4px;
    }

    /* 4. Keep the (click-opened) search field inside the top bar so it can
          never reach down over the menu button. */
    .top-menu .search-container {
        z-index: 5;
    }
    .kz-search.is-open .search-input input.search-bar {
        max-width: 62vw;          /* never wide enough to reach the menu button */
    }
}

/* ---- Search opens on CLICK, not on hover ----
   The theme expanded the field whenever the pointer merely passed over it
   (.search-container:hover), which on a phone triggers from any nearby tap and
   left the box sitting open beside the menu button. The field is now closed by
   default and only opens once the magnifier is clicked (JS adds .is-open). */
.kz-search .search-input input.search-bar,
.kz-search:hover > .search-input input.search-bar,
.kz-search .search-input input.search-bar:focus {
    width: 40px;
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
}
/* Opened state (set by the click handler). */
.kz-search.is-open .search-input input.search-bar,
.kz-search.is-open:hover > .search-input input.search-bar,
.kz-search.is-open .search-input input.search-bar:focus {
    width: 200px;
    padding-left: 60px;
    padding-right: 10px;
    background-color: #f2f2f4;
    border-color: #ccc;
    color: #939399;
    cursor: text;
}

/* Small phones: a little more breathing room again, since the rows are
   tighter and the theme shrinks the toggle's margin to 14px there. */
@media (max-width: 767px) {
    .top-menu {
        padding-bottom: 10px;
    }
    .navbar-default .navbar-toggle {
        margin-top: 16px !important;
    }
    /* The sidenav's own close (X) button keeps a comfortable target too. */
    .sidenav .navbar-toggle {
        min-width: 46px;
        min-height: 44px;
        padding: 12px 11px;
    }
}

/* ---- Mobile fixes ---- */
@media (max-width: 991px) {
    /* The EAUR logo is a WIDE banner, not a tiny square icon. The theme sized
       the sidenav logo to 36px which squashed it; give it room and keep ratio. */
    .sidenav-header-logo {
        width: auto !important;
    }
    .sidenav-header-logo img {
        width: auto !important;
        max-width: 200px !important;
        height: auto !important;
        max-height: 50px;
    }
    /* Logo bar sits on its OWN full-width row so the menu (Home, News, ...)
       starts cleanly below it instead of beside the logo. */
    .sidenav-brand {
        display: block;
        width: 100%;
        clear: both;
    }
    .sidenav-menu {
        clear: both;
    }
}



/* ============================================================
   ICK NEWS brand theme  (data-color="ick")
   Logo colours: black text on ICK yellow (#FFD400).
   Design: black primary bars/menus + yellow accents, so the
   white navbar text stays readable while accents match the logo.
   This file loads AFTER colors.css, so these rules win.
   ============================================================ */

:root {
  --ick-yellow: #FFD400;
  --ick-yellow-dark: #E6BE00;
  --ick-black: #141414;
  --ick-ink: #111111;
}

/* --- Primary surfaces: black bars/menus/ribbon/tags --- */
[data-color="ick"] .main-menu,
[data-color="ick"] #fixed-navbar,
[data-color="ick"] .breaking-ribbon,
[data-color="ick"] .search-icon-btn,
[data-color="ick"] #time,
[data-color="ick"] .sponsored,
[data-color="ick"] .carousel-title,
[data-color="ick"] .play-icon,
[data-color="ick"] .navbar-nav > li.active > a,
[data-color="ick"] .block-title-1,
[data-color="ick"] .block-title-2 {
  background-color: var(--ick-black) !important;
  color: #fff !important;
}

/* Category tags on cards/slider use the theme's bg-* helpers; tie the
   main one to the brand black and give a couple of yellow variants so
   the homepage tags read as a set. */
[data-color="ick"] .category-tag.bg-1,
[data-color="ick"] .breaking-ribbon h4 {
  background-color: var(--ick-black) !important;
  color: var(--ick-yellow) !important;
}
[data-color="ick"] .category-tag.bg-6,
[data-color="ick"] .category-tag.bg-4 {
  background-color: var(--ick-yellow) !important;
  color: var(--ick-ink) !important;
}

/* --- Accents in ICK yellow: underlines, section titles, hovers --- */
[data-color="ick"] .title-left.underline04::before,
[data-color="ick"] .title-left.underline03::before,
[data-color="ick"] .module-title .title span.bg-1,
[data-color="ick"] .module-title .title span.bg-11 {
  background-color: var(--ick-yellow) !important;
  color: var(--ick-ink) !important;
}

/* Section-title labels (span.bg-*) sit on yellow with dark text. */
[data-color="ick"] .module-title .title span {
  color: var(--ick-ink) !important;
}

/* Links, read-more, hovers, clock text -> yellow(ish, darkened so it
   stays readable on white backgrounds). */
[data-color="ick"] a:hover,
[data-color="ick"] .read-more:hover,
[data-color="ick"] #nav-below-main .nav li a:hover,
[data-color="ick"] .dropdown-menu a:hover,
[data-color="ick"] .item-content h3 a:hover,
[data-color="ick"] .hour,
[data-color="ick"] .date {
  color: var(--ick-yellow-dark) !important;
}

/* Main menu + quick-links hover: yellow underline / highlight. */
[data-color="ick"] .main-menu .nav > li > a:hover,
[data-color="ick"] .main-menu .nav > li.active > a,
[data-color="ick"] .nav .open > a,
[data-color="ick"] .nav .open > a:focus,
[data-color="ick"] .nav .open > a:hover {
  background-color: var(--ick-yellow) !important;
  color: var(--ick-ink) !important;
}

/* read-more arrow marker + nav hover underline bars -> yellow. */
[data-color="ick"] .read-more:hover:before,
[data-color="ick"] #nav-below-main .nav li a:hover:before {
  background-color: var(--ick-yellow) !important;
}

/* Buttons (search, post comment, send message) -> yellow with dark text. */
[data-color="ick"] .btn-primary,
[data-color="ick"] .btn-info,
[data-color="ick"] button[type="submit"].btn {
  background-color: var(--ick-yellow) !important;
  border-color: var(--ick-yellow-dark) !important;
  color: var(--ick-ink) !important;
}
[data-color="ick"] .btn-primary:hover,
[data-color="ick"] .btn-info:hover {
  background-color: var(--ick-yellow-dark) !important;
  color: var(--ick-ink) !important;
}

/* Active pagination + tab underline in yellow. */
[data-color="ick"] .pagination > .active > a,
[data-color="ick"] .pagination > .active > a:hover {
  background-color: var(--ick-black) !important;
  border-color: var(--ick-black) !important;
  color: var(--ick-yellow) !important;
}
[data-color="ick"] .currentLink,
[data-color="ick"] .nav-tabs.nav-tabs-bottom > li.active > a {
  border-bottom: 2px solid var(--ick-yellow) !important;
}

/* ===========================================================================
   Single article page — headline casing + typography polish
   (editorial request). Only .post-full is targeted, so homepage/section
   cards keep the theme's original look.
   =========================================================================== */

/* The theme uppercases the full-story headline (style.css .post-full
   .entry-title). Show the title exactly as the editor typed it. */
.post-full .entry-title,
.post-full .kz-entry-head h1.entry-title {
    text-transform: none;
    letter-spacing: -0.01em;
}

/* Headline: a touch tighter and darker so it reads as the page's anchor. */
.post-full .kz-entry-head h1.entry-title {
    font-size: 2.05em;
    line-height: 1.22;
    font-weight: 800;
    color: #16181d;
    word-break: break-word;
}
.post-full .kz-entry-head {
    margin-bottom: 16px;
}

/* Meta row (author / category / date): quieter than the headline. */
.post-full .post-meta-elements {
    font-size: .88em;
    color: #6b7280;
}

/* Body copy: comfortable measure and rhythm for long reads. */
.post-full .entry-content {
    font-size: 1.06em;
    line-height: 1.85;
    color: #23262b;
}
.post-full .entry-content > p:first-of-type {
    font-size: 1.06em;
    color: #16181d;
}

/* Featured image: soft rounding + subtle lift under the headline. */
.post-full .entry-media img {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

@media (max-width: 767px) {
    .post-full .kz-entry-head h1.entry-title { font-size: 1.5em; line-height: 1.26; }
    .post-full .entry-content { font-size: 1.02em; line-height: 1.78; }
}
@media (max-width: 480px) {
    .post-full .kz-entry-head h1.entry-title { font-size: 1.32em; }
}

/* ---------------------------------------------------------------------------
   "Read in: Kinyarwanda / English" language switcher — HIDDEN for now.
   The multi-language authoring flow in the Admin stays intact and article.php
   still renders the switcher; it is only hidden from readers. To bring it
   back, delete this single rule.
   --------------------------------------------------------------------------- */
.post-full .kz-lang-switch {
    display: none;
}