/* Ice & Fire theme - port of IceFireBootstrap (2012) onto Keystone.
   Design tokens taken from original icefire/variables.less:
   body #59534e + icefire_background.jpg top, content #e3decc, items #c6baa2,
   comments #ddd8c7, links #34669f (hover #9d261d), Trebuchet MS 15px,
   headings Berkshire Swash. */

/* ---------- Base ---------- */
body {
    background: #59534e url("images/icefire_background.jpg") no-repeat top center;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size: 15px;
}

/* ---------- Old site navbar ---------- */
.if-navbar {
    background: rgba(1, 1, 1, 0.85);
    font-size: 15px;
    position: relative;
    z-index: 1000;
}

.if-navbar-inner {
    max-width: 1236px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    min-height: 50px;
}

.if-logo {
    display: block;
    width: 129px;
    height: 29px;
    margin: 10px 15px 11px 0;
    background: url("images/logo.png") no-repeat 0 -29px;
    flex-shrink: 0;
}

.if-logo:hover {
    background-position: 0 0;
}

.if-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.if-menu > li {
    position: relative;
}

.if-menu > li > a {
    display: block;
    padding: 13px 14px 14px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    text-decoration: none;
    font-family: "Berkshire Swash", Georgia, serif;
    white-space: nowrap;
}

.if-menu > li > a:hover,
.if-menu > li.if-active > a {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.if-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 110px;
    background: #e7dccc;
    border: 1px solid #cec6af;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 1001;
}

@media (hover: hover) {
    .if-menu li:hover ul {
        display: block;
    }
}

.if-menu li.if-open ul {
    display: block;
}

.if-menu li ul a {
    display: block;
    padding: 6px 14px;
    color: #34669f;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
}

.if-menu li ul a:hover {
    background: #c6baa2;
    color: #9d261d;
}

/* ---------- Keystone header recolor ---------- */
#MainHeader.Header {
    background-color: rgba(1, 1, 1, 0.85);
    border-bottom: none;
}

/* ---------- Content: floating parchment sheet ---------- */
.Frame {
    background: transparent;
}

.Frame-content,
.Frame-contentWrap {
    background: transparent;
}

.Frame-content > .Container {
    background-color: #e3decc;
    box-shadow: 0 0 20px #333;
    border: none;
    border-radius: 0;
    margin-top: 96px;
    margin-bottom: 0;
    padding-top: 20px;
    min-height: 600px;
}

@media (max-width: 806px) {
    .Frame-content > .Container {
        margin-top: 12px;
    }
}

/* Panel visually separated like old bg-sidebar strip */
.Frame-row .Panel {
    background: transparent url("images/bg-sidebar.jpg") repeat-y left top;
    box-shadow: none;
    padding: 12px 10px 24px 44px;
}

@media (max-width: 1000px) {
    .Frame-row .Panel {
        background: #ddd8c7;
        padding: 12px 14px 24px;
        width: auto;
        flex-basis: auto;
    }
}

/* ---------- Typography ---------- */
h1, h2, h3,
.HomepageTitle,
.Content .PageTitle,
.CategoryNameHeading,
.pageHeading,
.Box h4 {
    font-family: "Berkshire Swash", Georgia, serif;
    font-weight: 400;
}

.DataList .Item .Title,
.DataList .Item .Title a,
.DataTable .Title,
.DataTable .Title a {
    font-weight: bold;
    font-size: 15px;
    color: #34669f;
}

.DataList .Item .Title a:hover,
.DataTable .Title a:hover {
    color: #9d261d;
    text-decoration: underline;
}

/* ---------- Links ---------- */
a,
.Content a,
.Panel a {
    color: #34669f;
}

a:hover,
.Content a:hover {
    color: #9d261d;
    text-decoration: none;
}

/* ---------- Breadcrumbs ---------- */
.BreadcrumbsBox {
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #d8cfb8;
}

/* ---------- Discussion list ---------- */
.DataList,
.MessageList {
    margin-top: 10px;
    margin-bottom: 10px;
}

.DataList .Item {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: #d8cfb8;
}

.DataList .Item.Alt {
    background-color: rgba(0, 0, 0, 0.02);
}

.DataList .Item.Read {
    background: transparent;
}

.DataList .Item:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* ---------- Comments as parchment cards ---------- */
.MessageList.Comments .ItemComment,
.DataList.Conversation .Item {
    background: #ddd8c7;
    margin: 15px 0;
    padding: 20px 15px 12px;
    border: none;
    border-radius: 2px;
}

.MessageList .ItemComment .Message,
.MessageList .ItemDiscussion .Message {
    margin: 10px 0 6px 66px;
    line-height: 23px;
    font-size: 15px;
}

.MessageList .ItemDiscussion {
    background: transparent;
    padding: 8px;
}

@media (max-width: 806px) {
    .MessageList .ItemComment .Message,
    .MessageList .ItemDiscussion .Message {
        margin-left: 0;
    }
}

/* Quotes like the original */
blockquote,
blockquote.UserQuote,
.userContent blockquote {
    margin: 1em 0;
    padding: 12px 15px 15px;
    background: rgba(0, 0, 0, 0.05);
    border-left: 4px solid rgba(0, 0, 0, 0.1);
}

/* ---------- Pager ---------- */
.Pager span,
.Pager a {
    background: #e9e1d4;
    border-color: #c6baa2;
    color: #34669f;
}

.Pager a.Highlight,
.Pager span.Highlight {
    background: #9d261d;
    color: #fff;
    border-color: #7c1e17;
}

/* ---------- Buttons ---------- */
.Button,
.btn {
    background-color: #e9e1d4;
    border-color: #c6baa2;
    color: #333;
}

.Button.Primary,
.Button.BigButton,
.BigButton,
.Button.SignInPopup {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #3a61b3;
    background-image: linear-gradient(to bottom, #3a71b3, #3a49b3);
    border-color: #2e398c;
}

.Button.Primary:hover,
.BigButton:hover {
    color: #fff;
    background-color: #3a49b3;
    background-image: none;
}

/* ---------- Panel boxes ---------- */
.Box h4 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.PanelCategories li a:hover,
.PanelInfo li a:hover {
    background-color: #c6baa2;
}

/* ---------- Footer: original dark centered ---------- */
.Frame-footer {
    background: #353535 url("images/footer.jpg") repeat-x;
    border: none;
    margin-top: 30px;
    padding: 35px 0 0;
    text-align: center;
    color: #777;
}

.Frame-footer .Container,
.if-footer .Container {
    background: transparent;
    box-shadow: none;
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 30px;
}

.if-footer p {
    margin: 0 0 10px;
    color: #777;
    font-size: 13px;
}

.if-footer a {
    color: #aaa;
}

.if-footer a:hover {
    color: #fff;
}

/* ---------- Mobile ---------- */
@media (max-width: 806px) {
    body {
        background-size: 1200px auto;
    }

    .if-navbar-inner {
        padding: 0 8px;
        overflow: visible;
    }

    .if-logo {
        width: 90px;
        height: 20px;
        background-size: 90px auto;
        background-position: 0 -20px;
        margin: 10px 8px 10px 0;
    }

    .if-logo:hover {
        background-position: 0 0;
    }

    .if-menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .if-menu > li > a {
        padding: 12px 9px;
        font-size: 13px;
    }

    .if-menu li ul {
        position: fixed;
        left: 8px;
        right: 8px;
        top: 50px;
        min-width: 0;
    }
}

/* ================= 4. kolo: detaily z originálního kompilovaného CSS ================= */

/* Přesná typografie originálu */
body {
    line-height: 20px;
    color: #333;
}

/* Stužkové tagy se šipkou - podpisový prvek starého fóra */
.TagCloud li,
.TagCloud a,
.InlineTags li,
.InlineTags a {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    position: relative;
    font-size: 11px;
}

.TagCloud a,
.InlineTags a {
    margin-left: 15px;
    padding: 0 10px 0 12px;
    background: #3a71b3;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 4px 4px 0;
}

.TagCloud a:before,
.InlineTags a:before {
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent #3a71b3 transparent transparent;
    border-style: solid;
    border-width: 12px 12px 12px 0;
}

.TagCloud a:after,
.InlineTags a:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #e3decc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.TagCloud a:hover,
.InlineTags a:hover {
    background: #2e598c;
    color: #fff;
}

.TagCloud a:hover:before,
.InlineTags a:hover:before {
    border-color: transparent #2e598c transparent transparent;
}

.TagCloud li,
.InlineTags li {
    padding: 0;
    margin: 0 0 5px 0;
    border: none;
    background: none;
}

/* Tabulky - přesné barvy okrajů a hover z originálu */
.DataTable thead td {
    padding: 8px 4px;
    border-top: 1px solid #dad4c2;
    border-bottom: 1px solid #dad4c2;
}

.DataTable td {
    border-bottom: 1px solid #dad4c2;
}

.DataTable tbody tr:hover td {
    background-color: #bfb49d;
}

/* Tlačítka - hover do tmavšího pergamenu jako originál */
.Button:hover,
.btn:hover {
    color: #333;
    background-color: #dfd0bb;
    border-color: #b8ab90;
}

/* Počty (badges) - normální řez jako originál */
.Count,
.label,
.badge {
    font-weight: normal !important;
}

/* Avatary lehce zakulacené jako originál */
.ProfilePhoto,
.PhotoWrap img {
    border-radius: 2px;
}

/* ================= 5. kolo: tabulkový layout jako originál ================= */

/* Originál měl jen jeden sloupec uživatele (Napsal(a) = poslední komentář) */
.DiscussionsTable .FirstUser,
.DiscussionsTable thead td.FirstUser {
    display: none;
}

/* Kompaktnější buňky jako originál */
.DataTable tbody .BlockColumn {
    padding: 12px 4px;
}

.DataTable td:first-child {
    padding-left: 14px;
}

.DataTable .BigCount {
    font-size: 15px;
    font-weight: bold;
}

/* MiniPager pod titulkem */
.DataTable .MiniPager {
    margin-right: 7px;
    font-size: 12px;
}

/* Modré titulky i v tabulkovém layoutu (přebití keystone specificity) */
.DataTable .DiscussionName a.Title,
.DataTable td.DiscussionName .Title,
.CategoryTable .CategoryName a.Title {
    color: #34669f;
    font-weight: bold;
}

.DataTable .DiscussionName a.Title:hover,
.CategoryTable .CategoryName a.Title:hover {
    color: #9d261d;
    text-decoration: underline;
}

/* Patička: keystone .Footer nesmí přebít tmavé pozadí */
.Frame-footer footer.Footer,
.Frame-footer .Footer {
    background: transparent;
    border: none;
    color: #777;
}

.Frame-footer {
    background-color: #353535;
}

/* Havran v patičce (centrovaný nad textem) */
.if-footer-crow {
    width: 55px;
    height: 52px;
    margin: 0 auto 14px;
    background: url("images/crow.png") no-repeat center / contain;
}

/* Sidebar: širší a až do krajů pergamenového listu */
.Frame-content > .Container {
    padding-right: 0;
    overflow: hidden;
}

.Frame-row .Panel {
    width: 380px;
    flex-basis: 380px;
    padding: 24px 24px 40px 52px;
    margin-top: -20px;
    margin-bottom: 0;
    align-self: stretch;
}

@media (max-width: 1000px) {
    .Frame-row .Panel {
        width: auto;
        flex-basis: auto;
        margin-top: 0;
        padding: 12px 14px 24px;
    }
    .Frame-content > .Container {
        padding-right: 12px;
    }
}

/* Sidebar až ke spodnímu okraji listu */
@media (min-width: 1001px) {
    .Frame-contentWrap {
        padding-bottom: 0;
        padding-right: 0;
    }

    .Frame-row {
        align-items: stretch;
    }

    .Frame-row .Panel {
        margin-bottom: 0;
        padding-bottom: 60px;
    }
}

/* Obsah musí uvolnit místo širšímu panelu (keystone počítá s 260px) */
@media (min-width: 1001px) {
    .Frame-row .Content.MainContent,
    .MainContent.Content {
        width: calc(100% - 380px);
    }
}

/* ================= 7. kolo: tabulka, pager, hlavička, sidebar ================= */

/* Tabulka: nesmí přetékat, odsazená, pruhovaná */
.Frame-row .Content.MainContent {
    overflow: hidden;
    padding-right: 28px;
    box-sizing: border-box;
}

.DataTable {
    width: 100%;
}

.DataTable td.BigCount {
    width: 85px;
    text-align: center;
}

.DataTable td.BlockColumn-User {
    width: 175px;
}

.DataTable tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.DataTable tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.DataTable tbody tr:hover {
    background-color: #cfc4a9;
}

.DataTable tbody tr:hover td {
    background-color: transparent;
}

.DataTable td .Wrap {
    padding: 4px 6px;
}

/* Stránkovač: jen dole, vzhled bootstrap tlačítek z originálu */
.PageControls.Top .NumberedPager,
.PageControls.Top .Pager {
    display: none;
}

.Pager {
    display: inline-block;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.Pager a,
.Pager span {
    background-color: #e9e1d4;
    background-image: linear-gradient(to bottom, #f0e9de, #e0d5c0);
    border: 1px solid #c5b89d;
    color: #34669f;
    padding: 7px 13px;
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.Pager a:hover {
    background-image: none;
    background-color: #dfd0bb;
    color: #34669f;
}

.Pager a.Highlight,
.Pager span.Highlight {
    background-image: none;
    background-color: #d7c4a9;
    border-color: #b8a888;
    color: #333;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Hlavička: druhé menu (keystone lišta) pryč na desktopu, na mobilu zůstává kvůli hamburgeru */
@media (min-width: 807px) {
    #MainHeader.Header {
        display: none;
    }
}

/* Sidebar: nahoru bez odskoku, breadcrumbs jen nad obsahem */
@media (min-width: 1001px) {
    .Frame-content > .Container {
        padding-top: 0;
    }

    .Frame-details > .Frame-row:first-child {
        width: calc(100% - 380px);
    }

    .Frame-row .Panel {
        margin-top: 0;
        padding-top: 32px;
    }

    .Frame-row .Content.MainContent {
        padding-top: 20px;
    }

    .BreadcrumbsBox {
        margin-top: 16px;
        border-bottom: none;
    }
}

/* Panel: menší odsazení vlevo (za roztrhaným okrajem), větší vpravo */
@media (min-width: 1001px) {
    .Frame-row .Panel {
        padding-left: 44px;
        padding-right: 36px;
    }
}

/* Pager: tlačítka v řadě, ne pod sebou */
.Pager {
    white-space: nowrap;
    display: inline-flex;
}

.Pager a,
.Pager span {
    display: inline-block;
    float: none;
}

/* Sidebar: obsah nesmí lézt do roztrhaného okraje */
@media (min-width: 1001px) {
    .Frame-row .Panel {
        padding-left: 62px;
    }
}

/* ================= 8. kolo ================= */

/* Sidebar: roztrhaný papír od úplného horního kraje; levé odsazení zpět na 44px */
@media (min-width: 1001px) {
    .Frame-row .Panel {
        margin-top: -91px;
        padding-top: 40px;
        padding-left: 44px;
        padding-right: 36px;
    }
}

/* Pager: vystředěné číslice */
.Pager a,
.Pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    text-align: center;
}

/* Panel jako originál: modré pilulky počtů, aktivní položka modrý pruh */
.Panel .Count {
    float: right;
    background: #3a71b3;
    color: #fff;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 12px;
    line-height: 17px;
    font-weight: normal;
}

.Panel .PanelInfo li.Active a,
.Panel .PanelCategories li.Active a,
.Panel li.Active > a {
    background: #3a71b3;
    color: #fff;
    display: block;
}

.Panel .PanelInfo li.Active .Count,
.Panel li.Active .Count {
    background: rgba(255, 255, 255, 0.25);
}

/* Modul Nejnovější diskuze: jen titulky, bez meta řádků */
.Panel .BoxDiscussions .DataList .Meta {
    display: none;
}

.Panel .BoxDiscussions .DataList .Item {
    background: transparent;
    border: none;
    padding: 5px 0;
}

.Panel .BoxDiscussions .DataList .Item .Title,
.Panel .BoxDiscussions .DataList .Item .Title a {
    font-weight: normal;
    font-size: 15px;
}

/* Obsah panelu začíná až pod horní hranou (papír je vytažený o 91px výš) */
@media (min-width: 1001px) {
    .Frame-row .Panel {
        padding-top: 115px;
    }
}

/* MiniPager na druhý řádek za kategorii (jako originál) */
.DataTable .DiscussionName .Wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
}

.DataTable .DiscussionName .Wrap > .Title {
    width: 100%;
    order: 1;
}

.DataTable .DiscussionName .Wrap > .Meta-Discussion {
    order: 2;
    margin: 0;
}

.DataTable .DiscussionName .Wrap > .Meta-Discussion:empty {
    display: none;
}

.DataTable .DiscussionName .Wrap > .MItem.Category {
    order: 3;
    font-size: 13px;
}

.DataTable .DiscussionName .Wrap > .MiniPager {
    order: 4;
    margin: 0;
    font-size: 12px;
}

.DataTable .DiscussionName .MiniPager a,
.DataTable .DiscussionName .MiniPager .Elipsis {
    padding: 0 2px;
}

.DataTable .DiscussionName .Wrap > .Options {
    order: 5;
}

/* MiniPager inline vedle kategorie, ne na vlastním řádku */
.DataTable .DiscussionName .Wrap > .MiniPager {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
}

/* ================= Uživatelské menu v sidebaru (přihlášený) ================= */
.if-usermenu {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.if-usermenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.if-usermenu-head .PhotoWrap img,
.if-usermenu-head .ProfilePhoto {
    width: 44px;
    height: 44px;
    border-radius: 3px;
    display: block;
}

/* skryjeme původní flyout MeMenu - používáme vlastní odkazy */
.if-usermenu-head .MeMenu,
.if-usermenu-head .Flyout {
    display: none !important;
}

.if-usermenu-name {
    font-family: "Berkshire Swash", Georgia, serif;
    font-size: 20px;
    color: #333;
}

.if-usermenu-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.if-usermenu-links li {
    margin: 0;
    padding: 0;
    border: none;
}

.if-usermenu-links li a {
    display: block;
    padding: 5px 0;
    color: #34669f;
    text-decoration: none;
    font-size: 15px;
}

.if-usermenu-links li a:hover {
    color: #9d261d;
    padding-left: 4px;
}