/*
 * UIkit Clean Theme — custom.css
 *
 * Design tokens:
 *   Primary blue:   #3097d1
 *   Heading color:  #1f3f50
 *   Text color:     rgba(51,51,51,0.7)
 *   Background:     #f0f0f0
 *   Card bg:        #ffffff
 *   Border:         rgba(51,51,51,0.1)
 */

/* =========================================================
   FONTS — ClanPro
   ========================================================= */
@font-face {
    font-family: 'lato-book';
    src: url('../fonts/ClanPro-Book.eot');
    src: url('../fonts/ClanPro-Book.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ClanPro-Book.woff') format('woff'),
         url('../fonts/ClanPro-Book.ttf') format('truetype'),
         url('../fonts/ClanPro-Book.svg#ClanPro-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lato-book';
    src: url('../fonts/ClanPro-BookItalic.eot');
    src: url('../fonts/ClanPro-BookItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ClanPro-BookItalic.woff') format('woff'),
         url('../fonts/ClanPro-BookItalic.ttf') format('truetype'),
         url('../fonts/ClanPro-BookItalic.svg#ClanPro-BookItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'lato-news';
    src: url('../fonts/ClanPro-News.eot');
    src: url('../fonts/ClanPro-News.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ClanPro-News.woff') format('woff'),
         url('../fonts/ClanPro-News.ttf') format('truetype'),
         url('../fonts/ClanPro-News.svg#ClanPro-News') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   BASE
   ========================================================= */
html, body {
    background-color: #f0f0f0;
    font-family: 'lato-book', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(51, 51, 51, 0.7);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'lato-news', sans-serif;
    font-weight: normal;
    line-height: 1.1;
    color: #1f3f50;
}

a { color: #3097d1; text-decoration: none; }
a:hover { color: #216a94; text-decoration: underline; }

/* =========================================================
   SIDEBAR
   ========================================================= */
#layout-sidebar {
    width: 300px;
    min-height: 100vh;
    background: #fff;
    border-right: 1px solid rgba(51, 51, 51, 0.1);
    padding: 20px 35px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.sidebar-logo {
    margin-bottom: 8px;
}
.sidebar-logo img {
    width: 100%;
    height: auto;
    display: block;
}
.logo-offcanvas { display: none; }

/* Mobile offcanvas sidebar: logo-white.svg */
#mobile-sidebar .logo-desktop  { display: none; }
#mobile-sidebar .logo-offcanvas { display: block; }

.sidebar-segment {
    margin: 1.2em 0;
}

.segment-title {
    font-size: 1em;
    font-family: 'lato-news', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #333;
    margin-bottom: 0.3rem;
}

.segment-list {
    font-size: 0.95em;
    line-height: 1.6;
    display: block;
}
.segment-list a {
    color: #333;
    text-decoration: none;
}
.segment-list a:hover { color: rgba(51,51,51,0.7); }

/* Categories */
.sidebar-categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95em;
    line-height: 1.8;
}
.sidebar-categories ul li { padding: 0; }
.sidebar-categories ul a { color: #333; text-decoration: none; }
.sidebar-categories ul a:hover,
.sidebar-categories ul a.active { color: #3097d1; }

/* Language picker */
.locale-picker label {
    font-size: 0.95em;
    line-height: 1.8;
    cursor: pointer;
}

/* =========================================================
   CONTENT
   ========================================================= */
#layout-content {
    min-width: 0; /* prevent flex overflow */
}

/* uk-section provides vertical padding, uk-grid-collapse removes gaps */
.uk-section.uk-section-small {
    padding: 20px;
}

/* =========================================================
   CATEGORY / TAG TITLE
   ========================================================= */
.category-title {
    border: 1px solid rgba(51,51,51,0.1);
    border-left: 3px solid #555;
    background: #fff;
    padding: 16px 20px;
}
.category-title h1 {
    font-size: 1.6rem;
    margin: 0;
}
.category-title h1 small {
    font-size: 0.7em;
    font-family: 'lato-book', sans-serif;
    font-weight: normal;
    color: #999;
}

/* =========================================================
   POST CARDS
   ========================================================= */
.post-card {
    background: #fff;
    border: 1px solid rgba(51,51,51,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Post header */
.post-title {
    padding: 16px 16px 0;
}
.post-title h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0 0 0.4em;
}
.post-title h3 a {
    color: rgba(51,51,51,0.8);
    text-decoration: none;
}
.post-title h3 a:hover { color: #333; }

/* Featured image */
.post-image { line-height: 0; }
.post-image img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.post-image a:hover img { opacity: 1; }

/* Post content */
.post-content {
    padding: 0px 16px 10px 16px;
    flex: 1;
}
.post-content img { max-width: 100%; height: auto; }

/* Post meta footer */
.post-meta {
    background: #f7f7f7;
    padding: 10px 16px;
    font-size: 0.85em;
    border-top: 1px solid rgba(51,51,51,0.07);
    margin-top: auto;
}
.post-meta .meta-row {
    display: flex;
}
.post-meta .meta-row + .meta-row {
    margin-top: 4px;
}
.post-meta .meta-cell {
    width: 50%;
    min-width: 0;
    color: rgba(51,51,51,0.7);
    box-sizing: border-box;
    padding-right: 8px;
}
.post-meta .meta-cell a {
    color: rgba(51,51,51,0.7);
    text-decoration: none;
}
.post-meta .meta-cell a:hover { color: #333; }

/* =========================================================
   SINGLE POST
   ========================================================= */
article.post-single {
    background: #fff;
    border: 1px solid rgba(51,51,51,0.1);
    margin-bottom: 20px;
}
.post-single .post-title { padding: 20px 20px 0; }
.post-single .post-title h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5em;
}
.post-single .post-content { padding: 12px 20px 20px; }
.post-single .post-meta { padding: 12px 20px; }
.post-single .post-meta .meta-row + .meta-row { margin-top: 0.4em; }

/* Single post container */
.post-single-container {
    max-width: 560px;
    margin: 0 auto;
}

/* Prev/Next */
.post-links {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border: 1px solid rgba(51,51,51,0.1);
}
.post-links a {
    display: block;
    padding: 16px 20px;
    color: rgba(51,51,51,0.7);
    text-decoration: none;
    width: 48%;
}
.post-links a:hover { color: #333; text-decoration: none; }
.post-links a p {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3097d1;
    margin: 0 0 4px;
}
.post-links a span { font-family: 'lato-news', sans-serif; font-weight: normal; }
.post-links .link-next { text-align: right; }

/* =========================================================
   PAGINATION
   ========================================================= */
.post-pagination {
    background: #fff;
    border: 1px solid rgba(51,51,51,0.1);
    padding: 12px;
    text-align: center;
}

/* =========================================================
   MOBILE NAVBAR
   ========================================================= */
#mobile-nav {
    background: #fff;
    border-bottom: 1px solid rgba(51,51,51,0.1);
}
#mobile-nav .uk-logo {
    font-size: 1.3em;
    font-family: 'lato-news', sans-serif;
    font-weight: normal;
    color: #333;
}

/* =========================================================
   CALLOUTS
   ========================================================= */
.callout {
    margin-bottom: 20px;
    padding: 16px;
    border-left: 3px solid #eee;
}
.callout-danger  { background: #fdf7f7; border-color: #ebccd1; }
.callout-warning { background: #faf8f0; border-color: #faebcc; }
.callout-info    { background: #f4f8fa; border-color: #bce8f1; }
.callout-success { background: #f9fdf7; border-color: #d6e9c6; }
.callout-danger  h4 { color: #a94442; }
.callout-warning h4 { color: #8a6d3b; }
.callout-info    h4 { color: #31708f; }
.callout-success h4 { color: #3c763d; }

/* =========================================================
   ERROR PAGES
   ========================================================= */
.error-page {
    background: #fff;
    border: 1px solid rgba(51,51,51,0.1);
    padding: 60px 40px;
    text-align: center;
    margin: 20px;
}
.error-page h1 { font-size: 4em; }

/* =========================================================
   MOBILE OFFCANVAS SIDEBAR
   ========================================================= */
#mobile-sidebar .uk-offcanvas-bar .segment-title,
#mobile-sidebar .uk-offcanvas-bar .segment-list a,
#mobile-sidebar .uk-offcanvas-bar .sidebar-categories ul a,
#mobile-sidebar .uk-offcanvas-bar label,
#mobile-sidebar .uk-offcanvas-bar p {
    color: #fff;
}
#mobile-sidebar .uk-offcanvas-bar .segment-list a:hover,
#mobile-sidebar .uk-offcanvas-bar .sidebar-categories ul a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 639px) {
    .post-meta .meta-cell { width: 100%; }
    .post-links { flex-direction: column; }
    .post-links a { width: 100%; }
}