/*
Theme Name: TipTinker
Theme URI: 
Description: TipTinker is a child theme of BlogArise.
Author: User
Author URI: 
Template: blogarise
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: tiptinker
*/

/* ============================================================================= */
/* Override Parent Theme CSS Variables */
/* ============================================================================= */
:root {
    --headFont: "Poppins", Helvetica, Arial, sans-serif !important;
    --bodyFont: "Poppins", Helvetica, Arial, sans-serif !important;
}

/* ============================================================================= */
/* Global Font Override */
/* ============================================================================= */
body,
html {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.7 !important;
}

/* Ensure all content uses Poppins */
article,
.entry-content,
.post-items,
.bs-blog-post,
.single .content,
.content,
p,
span,
div,
li,
td,
th,
label,
input,
textarea,
select,
button,
.btn,
.navbar-nav,
.dropdown-menu,
.widget,
.sidebar,
footer {
    font-family: "Poppins", Helvetica, Arial, sans-serif;
}

.bs-blog-post .small {
    font-size: 16px;
}
/* ============================================================================= */
/* Heading Typography - Smaller Sizes */
/* ============================================================================= */
h1, .h1 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    font-size: 26px !important;
    font-weight: bold !important;
}

h2, .h2 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

h3, .h3 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: bold !important;
}

h4, .h4 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

h5, .h5 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

h6, .h6 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Combined heading styles override */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
    line-height: 1.4;
}

/* Site title and branding */
.site-title,
.site-title a,
.site-branding-text .site-title-footer a {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
}

/* Navigation menu */
.navbar-nav .nav-link,
.dropdown-menu .dropdown-item,
.main-navigation a {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
}

/* Post titles */
.post-title,
.post-title a,
.entry-title,
.entry-title a,
.bs-blog-post .post-title,
.wp-block-latest-posts__list .wp-block-latest-posts__post-title {
    font-family: "Poppins", Helvetica, Arial, sans-serif !important;
}

/* External Link Indicator (Wikipedia style) */
.tiptinker-external-link::after {
    content: "\2197";
    /* North East Arrow */
    display: inline-block;
    margin-left: 2px;
    font-size: 0.85em;
    opacity: 0.7;
    line-height: 1;
}

/* Don't show external link icon in .post-share area */
.post-share .tiptinker-external-link::after {
    display: none;
}

/* Don't show external link icon for image links - handled by JavaScript */

figcaption {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-user-select: all;
    /* Chrome, Safari, Opera */
    -moz-user-select: all;
    /* Firefox */
    -ms-user-select: all;
    /* IE 10+ */
    user-select: all;
}

/* Make images in article responsive */
article img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Code block auto-wrap */
pre,
pre code,
.hljs,
code.hljs {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow-x: auto;
}

/* Ensure code blocks don't overflow horizontally */
pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Inline code styling */
code {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================================================= */
/* Masonry Waterfall Layout for Article Index Page */
/* ============================================================================= */

/* Target the grid container on index/archive pages */
#grid.row {
    display: block !important;
    column-count: 3;
    column-gap: 20px;
    width: 100%;
}

/* Each article item in the grid */
#grid.row > .col-lg-4,
#grid.row > .col-md-6,
#grid.row > .col-sm-6,
#grid.row > [class*="col-"] {
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 0 20px 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    vertical-align: top;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Post cards inside the grid */
#grid.row .bs-blog-post,
#grid.row .post-items {
    margin-bottom: 0;
}

/* Rounded corners for post thumbnails */
#grid.row .post-image img,
#grid.row .bs-blog-post img {
    border-radius: 8px;
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
    #grid.row {
        column-count: 2;
        column-gap: 15px;
    }
    
    #grid.row > [class*="col-"] {
        margin-bottom: 15px;
    }
}

/* Mobile: 2 columns (like Xiaohongshu style) */
@media (max-width: 575px) {
    #grid.row {
        column-count: 2;
        column-gap: 10px;
    }

    #grid.row > [class*="col-"] {
        margin-bottom: 10px;
    }
}

/* ============================================================================= */
/* Link Colors in Article Content */
/* ============================================================================= */

/* Links in paragraphs within articles */
article p a:link {
    color: #0066cc !important;
    text-decoration: none;
}

article p a:hover {
    color: #004499 !important;
    text-decoration: underline;
}

article p a:visited {
    color: #551a8b !important;
}

/* Links in list items within articles */
article li a:link {
    color: #0066cc !important;
    text-decoration: none;
}

article li a:hover {
    color: #004499 !important;
    text-decoration: underline;
}

article li a:visited {
    color: #551a8b !important;
}

/* ============================================================================= */
/* Global Link Cursor Style */
/* ============================================================================= */

/* Make all links show pointer cursor on hover */
a:hover {
    cursor: pointer !important;
}