/*
Theme Name: FiWFans Starter
Theme URI: https://example.com/
Author: chandra
Description: Starter theme scaffold inspired by fiwfans.app — responsive, block-friendly, and easy to customize.
Version: 0.1
License: GNU General Public License v2 or later
Text Domain: fiwfans-starter
*/

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&display=swap');

:root{
  --color-bg:#05050a;
  --color-surface:#0b0f1a;
  --color-foreground:#e7f0fb;
  --color-muted:rgba(231,240,250,0.58);
  --color-accent:#ff3d8f;
  --max-width:1200px;
  --radius:10px;
}

html,body{height:100%;}
body{
  margin:0;
  font-family: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--color-bg);
  color:var(--color-foreground);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h2.wp-block-heading {
    padding-left: 15px;
    font-size: 1.5rem;
    margin-top: 10px;
    margin-bottom: 5px;
}
h2.wp-block-heading::before {
    content: '';
    position: absolute;
    width: 7px;
    border-top: 18px solid #E71E5F;
    border-bottom: 10px solid #E71E5F;
    left: 6px;
}
.wp-block-group ul{padding-left:15px;}
.wp-block-latest-comments__comment-meta {
    padding-left: 15px;
}button.wp-block-search__button.wp-element-button {
    padding: 10px 20px;
    background: #112b64;
    color: white;
    border: 0;
}.footer_area {
    background-color: #fff;
    margin-top: 35px;
}

/* Featured/sticky section styles */
.featured-section .featured-hero{position:relative;overflow:hidden;border-radius:12px}
.featured-section .featured-hero img{display:block;height:auto;max-height:396px;object-fit:cover;margin-bottom:-24px;}
.featured-section .featured-overlay{position:absolute;left:20px;right:20px;bottom:20px;color:#fff}
.card{    margin-bottom: 15px;border-radius:12px!important;}
.featured-section .featured-overlay h2, .featured-section .featured-overlay h3, .featured-section .featured-overlay h4{margin:0 0 .5rem}
.featured-section .featured-overlay .badge{opacity:0.95}
.card-img-top img.wp-post-image {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}.widget{display:none;}
.featured-card, .featured-card-sm, .featured-card-xs{border-radius:12px;overflow:hidden}

.featured-card-sm .featured-hero img{max-height:240px}
.featured-card-xs .featured-hero img{max-height:140px}
.featured-section .meta{color:rgba(255,255,255,0.85)}

@media (max-width: 767px){
    .featured-section .featured-hero img{max-height:220px}
}

/* Archive grid post cards */
.post-card .thumb{border-radius:10px 10px 0 0;overflow:hidden}
.post-card .thumb img{height:220px;object-fit:cover}
.post-card .category-badge{left:12px;top:12px;background:#ff4367;color:#fff;padding:6px 10px;border-radius:20px;font-size:12px}
.post-card .card-body{background:transparent;padding:18px}
.post-card .card-title a{color:#0056b3;text-decoration:none}
.post-card .author-meta {padding-left:5px;}
.post-card .author-avatar img{height:20px;width:20px;}
.post-card .card-text{color:var(--color-muted)}

/* Sidebar recent posts styling already uses thumbnail and title; small spacing */
.sidebar_post .single_post .post_thum img{width:60px;height:60px;object-fit:cover;border-radius:6px}
.sidebar_post .single_post .post_content .title a{color:#3C4559}

/* Recent/Popular compact list style */
.sidebar_post .single_post{align-items:flex-start}
.sidebar_post .single_post .rp-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}
.sidebar_post .single_post .post_content{padding-left:12px}
.sidebar_post .single_post .post_content .title a{font-size:15px;font-weight:600;color:#1e293b}
.sidebar_post .single_post .post_content .meta{font-size:13px;color:#6D7588;margin-top:6px}

/* homepage simple recent links */
.recent-links li a{display:block;padding:6px 0;color:#1e293b;font-weight:600}
.recent-links li a:hover{text-decoration:underline}

/* Category page: add vertical spacing between post cards */
/* Category page: add vertical spacing between post cards */

/* Masonry layout using CSS columns for the main index loop */
.masonry{
    column-gap: 1.5rem;
    -webkit-column-gap: 1.5rem;
    column-fill: auto;
}
.masonry-item{
    display: inline-block; /* necessary for column layout */
    width: 100%;
    margin: 0 0 1.5rem;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
}
/* responsive column counts: 3 columns at >1400px, 2 columns between 1024 and 1400, 1 column below 1024 */
@media (min-width: 1400px){
    .masonry{ column-count: 3; }
}
@media (min-width: 1024px) and (max-width: 1399.98px){
    .masonry{ column-count: 2; }
}
@media (max-width: 1023.98px){
    .masonry{ column-count: 1; }
}

/* Make homepage posts show in two columns like category pages */
body.home .masonry,
body.blog .masonry,
body.front-page .masonry {
    column-count: 2 !important;
}
@media (max-width: 1023.98px){
    body.home .masonry,
    body.blog .masonry,
    body.front-page .masonry { column-count: 1 !important; }
}

/* When Masonry JS runs, use the sizer width to create two columns on the homepage */
body.home .masonry-sizer,
body.blog .masonry-sizer,
body.front-page .masonry-sizer { width: 50%; }
@media (max-width: 1023.98px){
    body.home .masonry-sizer,
    body.blog .masonry-sizer,
    body.front-page .masonry-sizer { width: 100%; }
}

/* Masonry sizer: used by Masonry.js when percentPosition is enabled */
.masonry-sizer{ width: 100%; display:inline-block; }

/* Hover elevation for cards */
.masonry-item .card{ transition: box-shadow .18s ease, transform .18s ease; }
.masonry-item .card:hover{ transform: translateY(-6px); box-shadow: 0 10px 30px rgba(2,6,23,0.6); }

/* small reveal helper when Masonry JS runs */
.masonry .masonry-item{ opacity: 1; transform: none; }

/* When Masonry JS is active, disable CSS columns (Masonry will handle layout) */
.masonry.masonry-js{ column-count: 0 !important; column-gap: 0 !important; }
.masonry.masonry-js .masonry-item{ display:block; width:100%; }

.sidebar-widget-area .sidebar_title .title,
.sidebar-widget-area .post_title .title {
    position: relative; /* ensure ::before is positioned relative to the heading */
    display: block;
    margin: 0;
    padding-left: 15px; /* match h2.wp-block-heading spacing */
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 18px;
    color: #3C4559;
    border-bottom: 1px solid rgba(27,31,35,0.06);
}

/* Use the same small decorative ::before as the existing h2.wp-block-heading to match Recent Posts */
.sidebar-widget-area .sidebar_title .title::before,
.sidebar-widget-area .post_title .title::before {
    content: '';
    position: absolute;
    width: 4px;
    border-top: 8px solid #E71E5F;
    border-bottom: 9px solid #E71E5F;
    left: 6px;
}
body.category .row.row-cols-1.row-cols-md-2.g-4 > .col{margin-bottom: 15px;}
/* Slightly reduce the heading size on small screens */
@media (max-width: 575.98px){
    .sidebar-widget-area .sidebar_title .title,
    .sidebar-widget-area .post_title .title { font-size:16px; }
}
.sidebar_search {
    background-color: #fff;
    padding: 0 30px 25px;
    border-radius: 10px;
}

/* Category archive: force two columns for posts (override any 4-col behavior) */
body.category .row.row-cols-1.row-cols-md-2.g-4 > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
@media (max-width: 767.98px) {
    body.category .row.row-cols-1.row-cols-md-2.g-4 > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Remove grid gutters and card bottom margin on category pages (no vertical space) */
body.category .row.row-cols-1.row-cols-md-2.g-4 {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    gap: 0 !important;
}
body.category .post-card.card { margin-bottom: 0 !important; }

/* Category badge styling: use per-category colors (map by category slug via post_class)
     Provide sensible defaults and a few example mappings matching home palette. */
.category-badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:20px;
    color:#fff;
    font-size:12px;
    background: var(--color-accent);
    opacity:0.98;
}

/* Multicolor category list used in sidebar: a colored left label + pill count */
.multicolor-categories .mc-cat-row { margin-bottom:10px; }
.multicolor-categories .mc-cat-link { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:8px; }
.multicolor-categories .mc-cat-name { font-weight:700; font-size:15px; }
.multicolor-categories .mc-cat-count { font-weight:700; min-width:38px; text-align:center; }

/* Example slug -> color mappings (adjust slugs to match your categories) */
article.category-news .category-badge, article.category-latest .category-badge { background:#ff4367; }
article.category-sideline .category-badge, article.category-opinion .category-badge { background:#ffc107; color:#111; }
article.category-agency .category-badge, article.category-business .category-badge { background:#17a2b8; }
article.category-features .category-badge, article.category-life .category-badge { background:#28a745; }

/* If your site uses different slugs, add mappings like:
     article.category-<slug> .category-badge { background: #hex; }
*/
.card a{color:#0056b3}