/*
 * Timelabs brand restyle layer for blog.timelabs.in
 *
 * Only the header/footer were redesigned with real markup (see
 * timelabs-header.css / timelabs-footer.css + header-timelabs.php /
 * footer-timelabs.php). This file is a lighter, sitewide "brand pass" on top
 * of Gerow's existing blog listing/single-post/sidebar layouts: colors,
 * fonts, links, buttons, and a few common components brought in line with
 * the new brand, without rebuilding those templates from scratch (no new
 * designs were provided for them).
 *
 * Brand tokens below are taken from the new site's own style.css :root block.
 */

:root {
    --tl-brand-blue: #0F4F93;
    --tl-brand-navy: #001655;
    --tl-brand-blue-light: #1E5A9A;
    --tl-brand-accent: #FF9E2C;
    --tl-font-body: 'Plus Jakarta Sans', sans-serif;
    --tl-font-heading: 'Poppins', sans-serif;
}

/* Typography ------------------------------------------------------------ */

body,
input,
textarea,
select,
button {
    font-family: var(--tl-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.blog-title,
.post-title,
.widget-title,
.sidebar-title,
.comments-title,
.comment-reply-title {
    font-family: var(--tl-font-heading);
}

/* Links inside blog content (header/footer keep their own link colors) -- */

.blog-item-wrap a,
.blog-sidebar a,
.entry-content a,
.comments-box a,
.comment-content a,
.tg-post-tag a {
    color: var(--tl-brand-blue);
}

.blog-item-wrap a:hover,
.blog-sidebar a:hover,
.entry-content a:hover,
.comments-box a:hover,
.comment-content a:hover,
.tg-post-tag a:hover {
    color: var(--tl-brand-accent);
}

.news-tag {
    background: var(--tl-brand-blue-light);
    color: #fff;
}

.news-tag:hover {
    background: var(--tl-brand-accent);
    color: #fff;
}

blockquote {
    border-left: 3px solid var(--tl-brand-blue);
}

::selection {
    background: var(--tl-brand-blue);
    color: #fff;
}

/* Buttons / CTAs ---------------------------------------------------------
   Brings Gerow's own buttons (search, comment submit, pagination, block
   buttons) in line with the new site's pill-shaped brand-blue CTA style. */

.wp-block-button__link,
.sidebar-search button,
#submit,
input[type="submit"],
.comment-reply-link {
    background: var(--tl-brand-blue);
    border-color: var(--tl-brand-blue);
    border-radius: 50px;
    color: #fff;
    transition: background-color .2s ease, color .2s ease;
}

.wp-block-button__link:hover,
.sidebar-search button:hover,
#submit:hover,
input[type="submit"]:hover,
.comment-reply-link:hover {
    background: var(--tl-brand-navy);
    border-color: var(--tl-brand-navy);
    color: #fff;
}

/* Pagination -------------------------------------------------------------- */

.pagination-wrap a,
.pagination-wrap span,
.page-link {
    color: var(--tl-brand-blue);
}

.pagination-wrap a:hover,
.pagination-wrap .current,
.pagination-wrap a.current,
.page-link:hover {
    background: var(--tl-brand-blue);
    border-color: var(--tl-brand-blue);
    color: #fff;
}

/* Widget/tag cloud --------------------------------------------------------- */

.tagcloud a {
    border-color: var(--tl-brand-blue-light);
    color: var(--tl-brand-blue);
}

.tagcloud a:hover {
    background: var(--tl-brand-blue);
    border-color: var(--tl-brand-blue);
    color: #fff;
}