/* ──────────────────────────────────────────────────────────
   FictionX – Top Bar
   A clean, flexbox-based top bar that hosts the date/time and
   the language switcher. Inherits the active skin colors via
   .main-color and .main-bg from the template skin file.
   ────────────────────────────────────────────────────────── */

.fx-topbar,
.top-bar{
    background:#f7f8fa;
    border-bottom:1px solid rgba(0,0,0,.05);
    color:#3a3a3a;
    font-family:inherit;
    line-height:1;
    min-height:35px;
    padding:2px 0;
    /* Raise the whole top-bar above the header (.top-head can reach
       z-index:999999999 when fixed) so the language dropdown, which lives
       inside the top-bar, never gets covered by the horizontal nav. */
    position:relative;
    z-index:1000000000;
}
.fx-topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:35px;
    padding:0;
}

/* Date / Time list */
.fx-topbar__info{
    list-style:none;
    margin:0;padding:0;
    display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;
}
.fx-topbar__info > li{
    display:inline-flex;align-items:center;gap:6px;
    padding:0 10px;
    font-size:12px;font-weight:500;color:#52514f;
    border-inline-end:1px solid rgba(0,0,0,.10);
    line-height:1.2;
}
.fx-topbar__info > li:last-child{border-inline-end:0;}
.fx-topbar__info i{
    color:#a51313; /* picks up brand red from default skin; override via .main-color if used */
    font-size:13px;opacity:.9;margin:0 !important;
}
/* The {TodayDate}/{TodayTime} placeholders already include an <i>; align it */
.fx-topbar__info i.fa{margin:0 4px 0 0 !important;}
[dir="rtl"] .fx-topbar__info i.fa{margin:0 0 0 4px !important;}

/* Actions area (switcher + optional social icons) */
.fx-topbar__actions{
    display:flex;align-items:center;gap:8px;
    margin-inline-start:auto;
}
/* Reset the language switcher's float when inside the flexbox topbar */
.fx-topbar__actions .lang-switcher{float:none;margin:0;}

/* Subtle hover affordance on info chips */
.fx-topbar__info > li{transition:color .18s ease,background .18s ease;}
.fx-topbar__info > li:hover{color:#1a1f24;background:rgba(0,0,0,.02);}

/* ───────────── Responsive ───────────── */

/* Tablet (≤900px): tighten paddings, reduce font */
@media (max-width:900px){
    .fx-topbar,.top-bar{min-height:32px;}
    .fx-topbar__inner{min-height:32px;gap:10px;}
    .fx-topbar__info > li{padding:0 8px;font-size:11px;}
}

/* Phones (≤600px): hide the date, keep the time + switcher, drop separators */
@media (max-width:600px){
    .fx-topbar,.top-bar{min-height:30px;padding:1px 0;}
    .fx-topbar__inner{min-height:30px;padding:0;gap:8px;flex-wrap:nowrap;}
    .fx-topbar__info{gap:4px;flex-wrap:nowrap;overflow:hidden;}
    .fx-topbar__info > li{border:0;padding:0 6px;font-size:11px;}
    .fx-topbar__info > li.fx-topbar__date{display:none;}
    .fx-topbar__info > li.fx-topbar__time{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:160px;}
    .fx-topbar__actions{gap:6px;}
}

/* Very narrow (≤380px): also shrink the language switcher trigger */
@media (max-width:380px){
    .fx-topbar__info > li.fx-topbar__time{max-width:110px;}
    .fx-topbar__actions .lang-trigger{padding:0 10px !important;}
    .fx-topbar__actions .lang-current{max-width:50px !important;}
}

/* Mobile menu button + drawer (≤992px): must sit above the top-bar
   (z-index:1000000000) and the fixed header, otherwise they are hidden. */
@media (max-width:992px){
    .navbtn{z-index:1000000002 !important;background-color:#222 !important;color:#fff !important;}
    .new-nav{z-index:1000000001 !important;}
    header.top-head,
    header.top-head.sticky-nav{background-color:#fff !important;border-bottom:1px solid rgba(15,23,42,.08);}
    .fx-topbar__inner{padding-right:52px;}
    /* LTR languages: button on the left edge, drawer slides in from the left
       (mirrors the theme's right-side rules: 40% wide, 60% at <=480px). */
    html[dir="ltr"] .navbtn{left:0 !important;right:auto !important;}
    html[dir="ltr"] .navbtn.active{left:40% !important;}
    html[dir="ltr"] .new-nav{right:auto !important;left:-40%;}
    html[dir="ltr"] .new-nav.active{left:0 !important;}
    html[dir="ltr"] .fx-topbar__inner{padding-right:15px;padding-left:52px;}
}
@media (max-width:480px){
    html[dir="ltr"] .navbtn.active{left:60% !important;}
    html[dir="ltr"] .new-nav{left:-60%;}
}
@media (max-width:768px){
    .fx-topbar__inner{padding-right:48px;}
    html[dir="ltr"] .fx-topbar__inner{padding-right:12px;padding-left:48px;}
    /* Home one-page section jumper: covers content on phones */
    .diamond-grid.one-page{display:none !important;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    .fx-topbar__info > li{transition:none;}
}

.side-one li a i.kanjer-white{background:url('../images/kanjer-white.png') center/26px 26px no-repeat;}