/*
Theme Name: TrueFin Blog
Theme URI: https://blog.truefin.io
Description: Custom WordPress theme for TrueFin blog matching TrueFin.io
Version: 1.0.1
Author: TrueFin
Author URI: https://truefin.io
License: GPL v2 or later
Text Domain: truefin-blog
*/


/* =========================================================
   01. RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    color: #1f2222;
    background: #ffffff;

    line-height: 1.6;
}

main {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   02. VARIABLES
========================================================= */

:root {

    --tf-primary-red: #dd1a1e;
    --tf-primary-red-dark: #c4141a;

    --tf-text-primary: #1f2222;
    --tf-text-secondary: #6b7070;

    --tf-bg-light: #faf9f8;
    --tf-bg-dark: #1c1c1c;

    --tf-border-light: #e3e3e3;
    --tf-border-medium: #dfe1e1;

    --tf-shadow-sm:
        0 2px 14px rgba(0, 0, 0, 0.08);

    --tf-shadow-md:
        0 10px 30px rgba(31, 34, 34, 0.06);

    --tf-shadow-lg:
        0 16px 36px rgba(31, 34, 34, 0.14);

    --tf-shadow-button:
        0 6px 16px rgba(221, 26, 30, 0.30);

    --tf-radius-sm: 10px;
    --tf-radius-md: 17px;
    --tf-radius-lg: 24px;
    --tf-radius-pill: 999px;

    --tf-transition: 0.2s ease;
}


/* =========================================================
   03. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0 0 16px;

    color: var(--tf-text-primary);

    font-weight: 700;
}


h1 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}


h2 {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
}


h3 {
    font-size: clamp(1.1rem, 2vw, 1.6rem);
}


p {

    margin: 0 0 16px;

    color: var(--tf-text-secondary);
}


a {

    color: var(--tf-primary-red);

    text-decoration: none;

    transition:
        color var(--tf-transition);
}


a:hover {

    color: var(--tf-primary-red-dark);

    text-decoration: none;
}


/* =========================================================
   04. CONTAINERS
========================================================= */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding:
        0 clamp(15px, 4vw, 40px);
}


.container-fluid {

    width: 100%;

    margin: 0 auto;

    padding:
        0 clamp(15px, 4vw, 40px);
}


.tf-wide-container {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        0 40px;
}


/* =========================================================
   05. HEADER
========================================================= */

.truefin-main-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

    background: #ffffff;

    border-bottom:
        1px solid #eeeeee;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.04);
}


/* Header row */

.truefin-navbar {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 78px;

    padding: 0;

    flex-wrap: nowrap;
}


/* =========================================================
   06. LOGO
========================================================= */

.truefin-navbar .navbar-brand {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin: 0;

    padding: 0;
}


.truefin-navbar .navbar-brand img {

    display: block;

    width: 155px;

    height: auto;

    max-height: 54px;

    object-fit: contain;
}


/* =========================================================
   07. DESKTOP NAVIGATION
========================================================= */

.truefin-navbar .navbar-collapse {

    display: flex;

    flex: 1;

    align-items: center;

    justify-content: flex-end;

    width: auto;

    margin-left: auto;
}


.truefin-navbar .navbar-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    margin: 0 0 0 auto;

    padding: 0;

    list-style: none;
}


.truefin-navbar .navbar-nav .nav-item {

    display: flex;

    align-items: center;

    margin: 0;
}


.truefin-navbar .navbar-nav .nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding:
        27px 11px;

    color: #141414;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;
}


/* Underline */

.truefin-navbar
.navbar-nav
.nav-link::after {

    content: "";

    position: absolute;

    left: 11px;

    right: 11px;

    bottom: 17px;

    height: 2px;

    background:
        var(--tf-primary-red);

    transform:
        scaleX(0);

    transition:
        transform var(--tf-transition);
}


.truefin-navbar
.navbar-nav
.nav-link:hover,

.truefin-navbar
.navbar-nav
.nav-link.active {

    color:
        var(--tf-primary-red);
}


.truefin-navbar
.navbar-nav
.nav-link:hover::after,

.truefin-navbar
.navbar-nav
.nav-link.active::after {

    transform:
        scaleX(1);
}


/* =========================================================
   08. HEADER BUTTONS
========================================================= */

.truefin-navbar
.nav-link.talk-to-sales,

.truefin-navbar
.truefin-login-btn {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 7px;

    height: 38px;

    padding:
        0 17px !important;

    border-radius:
        var(--tf-radius-pill);

    background:
        var(--tf-primary-red);

    color:
        #ffffff !important;

    font-size: 12.5px;

    font-weight: 700;

    border: none;

    box-shadow: none;
}


.truefin-navbar
.nav-link.talk-to-sales::after,

.truefin-navbar
.truefin-login-btn::after {

    display: none !important;
}


.truefin-navbar
.nav-link.talk-to-sales:hover,

.truefin-navbar
.truefin-login-btn:hover {

    background:
        var(--tf-primary-red-dark);

    color:
        #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 12px rgba(221, 26, 30, 0.20);
}


.truefin-navbar
.nav-item:has(.talk-to-sales) {

    margin-left: 8px;
}


.tf-button-icon {

    display: block;

    width: 15px;

    height: 15px;

    flex:
        0 0 15px;

    color:
        currentColor;
}


/* =========================================================
   09. HAMBURGER
========================================================= */

.navbar-toggler {

    display: none;

    margin-left: auto;

    padding: 0;

    background:
        transparent;

    border: none;

    color:
        var(--tf-text-primary);

    cursor: pointer;
}


.tf-menu-close-icon {

    display: none;
}


/* =========================================================
   10. DROPDOWN BASE
========================================================= */

.truefin-navbar
.tf-nav-dropdown {

    position: relative;
}


.truefin-navbar
.tf-nav-dropdown-toggle {

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.tf-nav-caret-icon {

    display: block;

    width: 13px;

    height: 13px;

    flex:
        0 0 13px;

    transition:
        transform var(--tf-transition);
}


/* =========================================================
   11. DESKTOP DROPDOWN MENU
========================================================= */

.truefin-navbar
.tf-nav-dropdown-menu {

    position: absolute;

    top:
        calc(100% - 8px);

    left: 50%;

    z-index: 10000;

    min-width: 235px;

    margin: 0;

    padding: 6px;

    list-style: none;

    background:
        #ffffff;

    border:
        1px solid #eeeeee;

    border-radius:
        14px;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.10);

    opacity: 0;

    visibility: hidden;

    transform:
        translate(-50%, 8px);

    transition:
        opacity var(--tf-transition),
        transform var(--tf-transition),
        visibility var(--tf-transition);
}


.truefin-navbar
.tf-solutions-menu {

    min-width: 285px;
}


.truefin-navbar
.tf-nav-dropdown-menu li {

    margin: 0;

    padding: 0;
}


.truefin-navbar
.tf-nav-dropdown-menu a {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 34px;

    padding:
        6px 10px;

    color:
        #222222;

    border-radius:
        8px;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.25;

    text-decoration: none;
}


.truefin-navbar
.tf-nav-dropdown-menu a::after {

    display: none !important;
}


.truefin-navbar
.tf-nav-dropdown-menu a:hover {

    background:
        rgba(221, 26, 30, 0.07);

    color:
        var(--tf-primary-red);
}


/* Dropdown icons */

.tf-menu-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    flex:
        0 0 16px;

    color:
        var(--tf-primary-red);
}


.tf-menu-icon svg {

    display: block;

    width: 14px;

    height: 14px;
}


/* =========================================================
   12. DESKTOP DROPDOWN OPEN
========================================================= */

@media (min-width: 901px) {

    .truefin-navbar
    .navbar-collapse {

        display: flex !important;
    }


    .truefin-navbar
    .navbar-toggler {

        display: none !important;
    }


    .truefin-navbar
    .tf-nav-dropdown:hover
    > .tf-nav-dropdown-menu,

    .truefin-navbar
    .tf-nav-dropdown:focus-within
    > .tf-nav-dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform:
            translate(-50%, 0);
    }


    .truefin-navbar
    .tf-nav-dropdown:hover
    > .tf-nav-dropdown-toggle
    .tf-nav-caret-icon,

    .truefin-navbar
    .tf-nav-dropdown:focus-within
    > .tf-nav-dropdown-toggle
    .tf-nav-caret-icon {

        transform:
            rotate(180deg);
    }
}


/* =========================================================
   13. TABLET
========================================================= */

@media
(max-width: 1200px)
and
(min-width: 901px) {

    .truefin-main-header
    .tf-wide-container {

        padding:
            0 24px;
    }


    .truefin-navbar
    .navbar-nav {

        gap: 2px;
    }


    .truefin-navbar
    .navbar-nav
    .nav-link {

        padding-left: 7px;

        padding-right: 7px;

        font-size: 12.5px;
    }


    .truefin-navbar
    .nav-link.talk-to-sales {

        padding:
            0 12px !important;

        font-size: 11px;
    }
}


/* =========================================================
   14. MOBILE HEADER
========================================================= */

@media (max-width: 900px) {

    .truefin-main-header {

        overflow: visible;
    }


    .truefin-main-header
    .tf-wide-container {

        padding:
            0 16px;

        overflow: visible;
    }


    .truefin-navbar {

        display: flex;

        align-items: center;

        justify-content: space-between;

        flex-wrap: wrap;

        width: 100%;

        min-height: 72px;

        padding: 0;

        overflow: visible;
    }


    /* Logo */

    .truefin-navbar
    .navbar-brand {

        flex:
            0 0 auto;
    }


    .truefin-navbar
    .navbar-brand img {

        width:
            125px;

        height:
            auto;

        max-height:
            48px;
    }


    /* Hamburger */

    .truefin-navbar
    .navbar-toggler {

        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            42px;

        height:
            42px;

        margin:
            0 0 0 auto !important;

        padding:
            0 !important;

        background:
            #ffffff;

        border:
            2px solid #1f2222;

        border-radius:
            6px;

        color:
            #1f2222;

        cursor:
            pointer;
    }


    .truefin-navbar
    .navbar-toggler:hover {

        border-color:
            var(--tf-primary-red);

        color:
            var(--tf-primary-red);
    }


    .truefin-navbar
    .navbar-toggler svg {

        display:
            block;

        width:
            23px;

        height:
            23px;
    }


    .truefin-navbar
    .tf-menu-open-icon {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }


    .truefin-navbar
    .tf-menu-close-icon {

        display:
            none;
    }


    .truefin-navbar
    .navbar-toggler.is-open
    .tf-menu-open-icon {

        display:
            none;
    }


    .truefin-navbar
    .navbar-toggler.is-open
    .tf-menu-close-icon {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }


    /* Main menu closed */

    .truefin-navbar
    .navbar-collapse {

        display:
            none !important;

        flex:
            0 0 100%;

        width:
            100%;

        height:
            auto;

        max-height:
            none;

        margin:
            0 !important;

        padding:
            12px 0 20px;

        overflow:
            visible;

        background:
            #ffffff;
    }


    /* Main menu open */

    .truefin-navbar
    .navbar-collapse.show {

        display:
            block !important;
    }


    /* Navigation */

    .truefin-navbar
    .navbar-nav {

        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        width:
            100%;

        height:
            auto;

        max-height:
            none;

        margin:
            0 !important;

        padding:
            0 !important;

        gap:
            2px !important;

        overflow:
            visible;
    }


    .truefin-navbar
    .navbar-nav
    .nav-item {

        display:
            block;

        width:
            100%;

        height:
            auto;

        margin:
            0 !important;

        overflow:
            visible;

        text-align:
            center;
    }


    .truefin-navbar
    .navbar-nav
    .nav-link {

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        padding:
            11px 12px !important;

        color:
            #161616;

        font-size:
            15px;

        font-weight:
            600;

        text-align:
            center;

        white-space:
            normal;
    }


    .truefin-navbar
    .navbar-nav
    .nav-link::after {

        display:
            none !important;
    }


    /* =====================================================
       MOBILE DROPDOWNS
    ===================================================== */

    .truefin-navbar
    .tf-nav-dropdown {

        position:
            relative;

        display:
            block;

        width:
            100%;

        height:
            auto;

        max-height:
            none;

        overflow:
            visible;
    }


    .truefin-navbar
    .tf-nav-dropdown-toggle {

        justify-content:
            center !important;

        gap:
            6px;
    }


    /*
       IMPORTANT:
       Mobile submenu remains hidden
       until JavaScript adds .is-open
    */

    .truefin-navbar
    .tf-nav-dropdown-menu {

        display:
            none !important;

        position:
            static !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        width:
            calc(100% - 24px);

        min-width:
            0;

        max-width:
            none;

        height:
            auto;

        max-height:
            none;

        margin:
            4px auto 10px;

        padding:
            6px;

        overflow:
            visible;

        background:
            #fafafa;

        border:
            1px solid #eeeeee;

        border-radius:
            10px;

        box-shadow:
            none;

        opacity:
            1;

        visibility:
            visible;

        transform:
            none;
    }


    /*
       THIS is the only mobile rule
       that opens the dropdown
    */

    .truefin-navbar
    .tf-nav-dropdown.is-open
    > .tf-nav-dropdown-menu {

        display:
            block !important;
    }


    .truefin-navbar
    .tf-nav-dropdown-menu li {

        display:
            block;

        width:
            100%;

        height:
            auto;

        margin:
            0;

        padding:
            0;
    }


    .truefin-navbar
    .tf-nav-dropdown-menu a {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        width:
            100%;

        min-height:
            36px;

        height:
            auto;

        margin:
            0;

        padding:
            7px 10px !important;

        color:
            #1f2222;

        font-size:
            13px;

        line-height:
            1.35;

        text-align:
            left;

        white-space:
            normal;
    }


    .truefin-navbar
    .tf-nav-dropdown-menu
    .tf-menu-icon {

        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            16px;

        height:
            16px;

        min-width:
            16px;

        margin-right:
            8px;

        color:
            var(--tf-primary-red);
    }


    /* Rotate arrow only on is-open */

    .truefin-navbar
    .tf-nav-dropdown.is-open
    > .tf-nav-dropdown-toggle
    .tf-nav-caret-icon {

        transform:
            rotate(180deg);
    }


    /* CTA buttons */

    .truefin-navbar
    .nav-link.talk-to-sales,

    .truefin-navbar
    .truefin-login-btn {

        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            auto !important;

        max-width:
            280px;

        height:
            40px;

        margin:
            7px auto !important;

        padding:
            0 20px !important;

        border-radius:
            var(--tf-radius-pill);

        color:
            #ffffff !important;
    }


    .truefin-navbar
    .nav-item:has(.talk-to-sales),

    .truefin-navbar
    .nav-item:has(.truefin-login-btn) {

        margin-left:
            0 !important;

        text-align:
            center;
    }
}


/* =========================================================
   15. BLOG GRID
========================================================= */

.posts-grid {

    display:
        grid;

    grid-template-columns:
        repeat(auto-fill, minmax(320px, 1fr));

    gap:
        32px;

    margin-bottom:
        40px;
}


.post-card {

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid rgba(0, 0, 0, 0.06);

    border-radius:
        var(--tf-radius-lg);

    box-shadow:
        var(--tf-shadow-md);

    transition:
        box-shadow var(--tf-transition),
        transform var(--tf-transition);
}


.post-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--tf-shadow-lg);
}


.post-thumbnail {

    display:
        block;

    width:
        100%;

    height:
        200px;

    margin:
        0;

    overflow:
        hidden;
}


.post-thumbnail a {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


.post-thumbnail img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--tf-transition);
}


.post-card:hover
.post-thumbnail img {

    transform:
        scale(1.05);
}


.post-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        24px;
}


.post-content
.entry-header {

    margin-bottom:
        12px;
}


.post-content
.entry-title {

    margin-bottom:
        12px;

    font-size:
        1.3rem;
}


.post-content
.entry-title a {

    color:
        var(--tf-text-primary);
}


.post-content
.entry-title a:hover {

    color:
        var(--tf-primary-red);
}


.post-content
.entry-meta {

    margin-bottom:
        12px;

    color:
        var(--tf-text-secondary);

    font-size:
        13px;

    line-height:
        1.5;
}


.post-content
.entry-meta span {

    display:
        block;

    margin-bottom:
        6px;
}


.post-excerpt {

    flex-grow:
        1;

    margin-bottom:
        16px;

    color:
        var(--tf-text-secondary);

    font-size:
        14px;

    line-height:
        1.6;
}


/* =========================================================
   16. SINGLE POST
========================================================= */

body.single-post {

    width:
        100%;

    max-width:
        none;

    margin:
        0;

    padding:
        0;
}


body.single-post main,

body.single-post #primary,

body.single-post .site-main,

body.single-post .content-area {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        none;

    margin:
        0;
}


body.single-post article {

    width:
        calc(100% - 60px);

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        70px 0;
}


.entry-header {

    position:
        static !important;

    margin-bottom:
        32px;
}


.entry-title {

    margin:
        0 0 16px;

    color:
        var(--tf-text-primary);

    font-size:
        clamp(36px, 4vw, 52px);

    font-weight:
        800;

    line-height:
        1.15;
}


.entry-meta {

    position:
        static !important;

    margin-bottom:
        30px;

    color:
        var(--tf-text-secondary);

    font-size:
        14px;

    font-weight:
        600;
}


.entry-meta a {

    color:
        var(--tf-primary-red);
}


body.single-post
.post-thumbnail {

    width:
        100%;

    height:
        auto;

    margin:
        0 0 32px;

    overflow:
        hidden;

    border-radius:
        16px;
}


body.single-post
.post-thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        cover;
}


.entry-content {

    width:
        100%;

    max-width:
        none;

    margin:
        0;

    color:
        var(--tf-text-primary);

    font-size:
        17px;

    line-height:
        1.8;
}


.entry-content p {

    margin:
        0 0 24px;
}


.entry-content img {

    max-width:
        100%;

    height:
        auto;

    margin:
        24px 0;

    border-radius:
        12px;
}


body.single-post
.entry-content p,

body.single-post
.entry-content ul,

body.single-post
.entry-content ol,

body.single-post
.entry-content h2,

body.single-post
.entry-content h3,

body.single-post
.entry-content h4 {

    max-width:
        900px;
}


body.single-post
.entry-content h2 {

    margin:
        42px 0 18px;

    font-size:
        30px;

    line-height:
        1.3;
}


body.single-post
.entry-content h3 {

    margin:
        32px 0 15px;

    font-size:
        24px;
}


.page-content {

    max-width:
        800px;

    margin:
        0 auto;
}


/* =========================================================
   17. POST NAVIGATION
========================================================= */

.post-navigation {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        24px;

    margin:
        60px 0;

    padding:
        24px;

    background:
        var(--tf-bg-light);

    border-radius:
        var(--tf-radius-lg);
}


.nav-previous,
.nav-next {

    display:
        flex;

    flex-direction:
        column;
}


.nav-subtitle {

    margin-bottom:
        8px;

    color:
        var(--tf-text-secondary);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.nav-title {

    color:
        var(--tf-primary-red);

    font-size:
        1.1rem;

    font-weight:
        700;
}


.nav-next {

    text-align:
        right;
}


/* =========================================================
   18. SEARCH
========================================================= */

.search-form {

    display:
        flex;

    gap:
        8px;

    margin-bottom:
        32px;
}


.search-form
input[type="search"] {

    flex:
        1;

    padding:
        12px 16px;

    border:
        1px solid var(--tf-border-medium);

    border-radius:
        var(--tf-radius-md);

    font:
        inherit;
}


.search-form
input[type="submit"] {

    padding:
        12px 24px;

    background:
        var(--tf-primary-red);

    color:
        #ffffff;

    border:
        none;

    border-radius:
        var(--tf-radius-md);

    font-weight:
        700;

    cursor:
        pointer;
}


/* =========================================================
   19. WIDGETS
========================================================= */

.widget {

    margin-bottom:
        32px;

    padding:
        24px;

    background:
        var(--tf-bg-light);

    border-radius:
        var(--tf-radius-lg);
}


.widget-title {

    margin-bottom:
        16px;

    padding-bottom:
        12px;

    border-bottom:
        2px solid var(--tf-primary-red);

    font-size:
        1.2rem;
}


.widget ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.widget li {

    margin-bottom:
        8px;
}


/* =========================================================
   20. FOOTER CTA
========================================================= */

.tf-footer {

    width:
        100%;

    margin-top:
        60px;
}


.tf-footer-cta {

    width:
        100%;

    padding:
        20px clamp(15px, 4vw, 40px) 10px;

    background:
        #ffffff;
}


.tf-footer-cta-bar {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        24px;

    overflow:
        hidden;

    padding:
        22px clamp(20px, 3vw, 40px);

    background:
        var(--tf-bg-dark);

    border-radius:
        20px;
}


.tf-footer-cta-bar::before,

.tf-footer-cta-bar::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(221, 26, 30, 0.25) 0%,
            rgba(221, 26, 30, 0) 70%
        );

    pointer-events:
        none;
}


.tf-footer-cta-bar::before {

    top:
        -80px;

    left:
        -80px;
}


.tf-footer-cta-bar::after {

    right:
        -80px;

    bottom:
        -80px;
}


.tf-footer-cta-info {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    text-align:
        left;
}


.tf-footer-cta-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    background:
        var(--tf-primary-red);

    color:
        #ffffff;

    border-radius:
        50%;
}


.tf-footer-cta-heading {

    margin:
        0 0 4px;

    color:
        #ffffff;

    font-size:
        1.15rem;

    font-weight:
        700;
}


.tf-footer-cta-subtitle {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        13.5px;
}


.tf-footer-cta-btn {

    position:
        relative;

    z-index:
        1;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        12px 24px;

    background:
        var(--tf-primary-red);

    color:
        #ffffff;

    border:
        none;

    border-radius:
        var(--tf-radius-pill);

    box-shadow:
        var(--tf-shadow-button);

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.tf-footer-cta-btn:hover {

    background:
        var(--tf-primary-red-dark);

    color:
        #ffffff;
}


/* =========================================================
   21. FOOTER COLUMNS
========================================================= */

.tf-footer-links-section {

    padding:
        42px 0 30px;

    background:
        #ffffff;
}


.tf-footer-links-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        55px;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        0 clamp(15px, 4vw, 40px);
}


.tf-footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.tf-footer-column h4 {

    margin:
        0 0 18px;

    color:
        #111111;

    font-size:
        14px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.tf-footer-column a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        13px;

    color:
        #4f5555;

    font-size:
        14px;

    font-weight:
        500;
}


.tf-footer-column a:hover {

    color:
        var(--tf-primary-red);

    transform:
        translateX(3px);
}


.tf-contact-link {

    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        8px;
}


.tf-footer-contact-icon {

    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    fill:
        #555555;
}


.tf-contact-link:hover
.tf-footer-contact-icon {

    fill:
        var(--tf-primary-red);
}


/* =========================================================
   22. FOOTER BOTTOM
========================================================= */

.tf-footer-main {

    padding:
        32px 0;

    background:
        #ffffff;

    border-top:
        1px solid #eeeeee;
}


.tf-footer-container {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        0 clamp(15px, 4vw, 40px);
}


.tf-footer-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        20px;
}


.tf-footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.tf-footer-logo {

    display:
        block;

    width:
        120px;

    height:
        auto;
}


.tf-footer-tagline {

    padding-left:
        12px;

    border-left:
        1px solid var(--tf-border-light);

    color:
        var(--tf-text-secondary);

    font-size:
        13px;

    font-weight:
        600;
}


.tf-footer-links {

    display:
        flex;

    align-items:
        center;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.tf-footer-links li {

    display:
        flex;

    align-items:
        center;
}


.tf-footer-links
li:not(:last-child)::after {

    content:
        "";

    width:
        1px;

    height:
        14px;

    margin:
        0 14px;

    background:
        var(--tf-border-light);
}


.tf-footer-links a {

    color:
        var(--tf-text-primary);

    font-size:
        14px;

    font-weight:
        600;
}


.tf-footer-copyright {

    margin:
        0;

    color:
        var(--tf-text-secondary);

    font-size:
        13px;
}


/* =========================================================
   23. WHATSAPP FLOAT
========================================================= */

.whatsapp-float {

    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    background:
        #25d366;

    color:
        #ffffff;

    border-radius:
        50%;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.20);

    text-decoration:
        none;

    transition:
        transform var(--tf-transition),
        background var(--tf-transition);
}


.whatsapp-float:hover {

    background:
        #20bd5a;

    color:
        #ffffff;

    transform:
        translateY(-3px) scale(1.05);
}


.whatsapp-float svg,

.whatsapp-float-icon {

    display:
        block;

    width:
        29px;

    height:
        29px;

    fill:
        #ffffff;
}


/* =========================================================
   24. REMOVE COMMENTS
========================================================= */

#comments,

.comments-area,

.comment-list,

.comments-title,

.comment-respond,

.comment-form,

.navigation.comment-navigation {

    display:
        none !important;
}


/* =========================================================
   25. ACCESSIBILITY
========================================================= */

.screen-reader-text {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    margin:
        -1px;

    padding:
        0;

    overflow:
        hidden;

    border:
        0;

    clip:
        rect(1px, 1px, 1px, 1px);

    clip-path:
        inset(50%);
}


/* =========================================================
   26. UTILITIES
========================================================= */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.m-0 {
    margin: 0 !important;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mt-40 {
    margin-top: 40px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-60 {
    padding-top: 60px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-60 {
    padding-bottom: 60px;
}


/* =========================================================
   27. RESPONSIVE FOOTER / BLOG
========================================================= */

@media (max-width: 992px) {

    .tf-footer-links-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            35px 50px;
    }
}


@media (max-width: 768px) {

    .posts-grid {

        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .post-thumbnail {

        height:
            160px;
    }


    .post-content {

        padding:
            16px;
    }


    .post-content
    .entry-title {

        font-size:
            1.1rem;
    }


    body.single-post article {

        width:
            calc(100% - 32px);

        padding:
            35px 0 50px;
    }


    body.single-post
    .entry-title {

        font-size:
            32px;
    }


    body.single-post
    .entry-content {

        font-size:
            16px;
    }


    .post-navigation {

        grid-template-columns:
            1fr;
    }


    .nav-next {

        text-align:
            left;
    }


    .search-form {

        flex-direction:
            column;
    }


    .search-form
    input[type="submit"] {

        width:
            100%;
    }


    /* =========================================
       MOBILE FOOTER CTA CENTERED
    ========================================= */

    .tf-footer-cta {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        padding:
            24px 16px 0;
    }


    .tf-footer-cta-bar {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        max-width:
            380px;

        margin:
            0 auto;

        padding:
            24px 18px;

        gap:
            18px;

        text-align:
            center;

        border-radius:
            18px;
    }


    .tf-footer-cta-info {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        margin:
            0 auto;

        gap:
            12px;

        text-align:
            center;
    }


    .tf-footer-cta-icon {

        width:
            48px;

        height:
            48px;

        flex:
            0 0 48px;

        margin:
            0 auto;
    }


    .tf-footer-cta-heading {

        width:
            100%;

        margin:
            0;

        font-size:
            17px;

        line-height:
            1.3;

        text-align:
            center;
    }


    .tf-footer-cta-subtitle {

        width:
            100%;

        max-width:
            290px;

        margin:
            5px auto 0;

        font-size:
            13px;

        line-height:
            1.55;

        text-align:
            center;
    }


    .tf-footer-cta-btn {

        width:
            auto;

        min-width:
            240px;

        max-width:
            calc(100% - 20px);

        height:
            44px;

        margin:
            0 auto;

        padding:
            0 24px;
    }


    .tf-footer-row {

        flex-direction:
            column;

        text-align:
            center;
    }


    .tf-footer-tagline {

        padding-top:
            12px;

        padding-left:
            0;

        border-top:
            1px solid var(--tf-border-light);

        border-left:
            none;
    }


    .tf-footer-links {

        flex-direction:
            column;

        gap:
            8px;
    }


    .tf-footer-links
    li:not(:last-child)::after {

        display:
            none;
    }
}


@media (max-width: 600px) {

    .tf-footer-links-section {

        padding:
            30px 0 20px;
    }


    .tf-footer-links-grid {

        grid-template-columns:
            1fr;

        gap:
            28px;
    }
}
/* =========================================================
   WHATSAPP FLOATING BUTTON - FINAL FIX
========================================================= */

.whatsapp-float {
    position: fixed !important;

    right: 20px !important;
    bottom: 20px !important;

    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    min-height: 50px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #25D366 !important;

    border: none !important;
    border-radius: 50% !important;

    color: #ffffff !important;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20) !important;

    z-index: 99999 !important;

    overflow: hidden !important;

    text-decoration: none !important;

    /* Hide raw "Chat on WhatsApp" text */
    font-size: 0 !important;
    line-height: 0 !important;
}


/* WhatsApp SVG */

.whatsapp-float svg,
.whatsapp-float .whatsapp-float-icon {

    display: block !important;

    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;

    fill: #ffffff !important;
    color: #ffffff !important;

    font-size: initial !important;
}


/* Hide tooltip/text if it exists */

.whatsapp-float .whatsapp-tooltip {
    display: none !important;
}


/* Hover */

.whatsapp-float:hover {

    background: #20bd5a !important;

    color: #ffffff !important;

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
}


/* Mobile */

@media (max-width: 768px) {

    .whatsapp-float {

        right: 16px !important;
        bottom: 16px !important;

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;
    }


    .whatsapp-float svg,
    .whatsapp-float .whatsapp-float-icon {

        width: 26px !important;
        height: 26px !important;

        min-width: 26px !important;
        min-height: 26px !important;
    }
}
/* =========================================
   BLOG CARD META - 2 LINES ONLY
========================================= */

.post-content .entry-meta {
    display: block;
    line-height: 1.6;
}

/* By default meta items inline */
.post-content .entry-meta span {
    display: inline !important;
    margin: 0 !important;
}

/* Date apni separate first line par */
.post-content .entry-meta .posted-on {
    display: block !important;
    margin-bottom: 4px !important;
}

/* Author + category same second line */
.post-content .entry-meta .byline,
.post-content .entry-meta .cat-links {
    display: inline !important;
}

/* Thora gap between admin and category */
.post-content .entry-meta .cat-links {
    margin-left: 6px !important;
}
/* ================================
   Blog Card Actions + Share Menu
================================ */

.post-card-actions {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-top: auto;

    padding-top: 18px;

    position: relative;
}

.post-share {
    position: relative;
}

.post-share-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 108px;
    height: 42px;

    padding: 0 17px;

    border: 1px solid rgba(221, 26, 30, 0.22);
    border-radius: 12px;

    background: #ffffff;
    color: var(--tf-primary-red);

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(221, 26, 30, 0.08);

    transition:
        background var(--tf-transition),
        color var(--tf-transition),
        border-color var(--tf-transition),
        box-shadow var(--tf-transition),
        transform var(--tf-transition);
}


/* Small share icon box */
.post-share-toggle::before {
    content: "↗";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 7px;

    background:
        rgba(221, 26, 30, 0.08);

    color:
        var(--tf-primary-red);

    font-size: 15px;
    font-weight: 800;

    line-height: 1;

    transition:
        background var(--tf-transition),
        color var(--tf-transition);
}


.post-share-toggle:hover {
    background:
        var(--tf-primary-red);

    color:
        #ffffff;

    border-color:
        var(--tf-primary-red);

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px rgba(221, 26, 30, 0.20);
}


.post-share-toggle:hover::before {
    background:
        rgba(255, 255, 255, 0.18);

    color:
        #ffffff;
}


.post-share-toggle:active {
    transform:
        translateY(0);
}
.post-share-menu {
    position: absolute;

    right: 0;
    bottom: calc(100% + 12px);

    width: 230px;

    padding: 9px;

    background: #ffffff;

    border:
        1px solid rgba(0, 0, 0, 0.07);

    border-radius: 16px;

    box-shadow:
        0 18px 45px rgba(31, 34, 34, 0.16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px) scale(0.98);

    transform-origin:
        bottom right;

    transition:
        opacity var(--tf-transition),
        visibility var(--tf-transition),
        transform var(--tf-transition);

    z-index: 100;
}


.post-share.is-open
.post-share-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0) scale(1);
}

.post-share-menu a,
.post-share-menu button {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 42px;

    padding:
        9px 11px;

    margin: 1px 0;

    border: 0;

    border-radius: 10px;

    background:
        transparent;

    color:
        var(--tf-text-primary);

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1;

    text-align:
        left;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background var(--tf-transition),
        color var(--tf-transition),
        transform var(--tf-transition);
}


.post-share-menu a:hover,
.post-share-menu button:hover {
    background:
        rgba(221, 26, 30, 0.055);

    color:
        var(--tf-text-primary);

    transform:
        translateX(2px);
}

.post-share-menu i {
    width: 18px;
    text-align: center;
    color: #e31b23;
}

@media (max-width: 600px) {
    .post-card-actions {
        align-items: stretch;
    }

    .post-share-menu {
        right: 0;
        width: 210px;
    }
}
.share-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
}

.post-share-menu a,
.post-share-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Original-ish brand colors */
.post-share-menu .whatsapp {
    color: #25D366;
}

.post-share-menu .facebook {
    color: #1877F2;
}

.post-share-menu .linkedin {
    color: #0A66C2;
}

.post-share-menu .x-twitter {
    color: #000;
}

.post-share-menu .copy {
    color: #e31b23;
}

/* Keep icon color when row is hovered */
.post-share-menu a:hover .whatsapp {
    color: #25D366;
}

.post-share-menu a:hover .facebook {
    color: #1877F2;
}

.post-share-menu a:hover .linkedin {
    color: #0A66C2;
}

.post-share-menu a:hover .x-twitter {
    color: #000;
}

.post-share-menu button:hover .copy {
    color: #e31b23;
}