/*
Theme Name: Hueman Child - Final Wonder
Template: hueman
Description: Custom styling for Final Wonder - Listverse-inspired layout
Version: 1.2.0
*/

/* ============================================
   LISTVERSE TYPOGRAPHY - GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

/* ============================================
   BASE TYPOGRAPHY - LISTVERSE STYLE
   ============================================ */

/* Main content font - matches Listverse exactly */
.entry-inner,
.entry-content,
.entry.themeform,
.fw-list-content,
.fw-list-intro,
.fw-item-content {
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 29px !important;
    color: #333 !important;
}

/* Paragraphs - Listverse style */
.entry-inner p,
.entry-content p,
.fw-list-intro p,
.fw-item-content p {
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 29px !important;
    color: #333 !important;
    margin-bottom: 1.5em !important;
}

/* List item headings (H2) - Listverse style */
.entry-inner h2,
.entry-content h2,
.fw-list-item h2 {
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
}

/* Opening summary - slightly larger */
.fw-list-intro {
    font-size: 18px !important;
    line-height: 29px !important;
}

/* Key facts boxes */
.fw-key-facts {
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 26px !important;
}

.fw-key-facts li {
    font-size: 16px !important;
    line-height: 26px !important;
    margin-bottom: 6px !important;
}

/* ============================================
   FINALWONDER - LIST STYLING (from Customizer)
   ============================================ */

/* -----------------------------------------
   COUNTER RESET - Must be on parent container
   ----------------------------------------- */
.entry-inner,
.entry-content,
.entry.themeform {
    counter-reset: list-counter !important;
}

/* -----------------------------------------
   LIST ITEM HEADINGS (H2) - AUTO NUMBERED
   ----------------------------------------- */
.entry-inner h2,
.entry-content h2,
.entry.themeform h2 {
    counter-increment: list-counter !important;
    position: relative !important;
    padding-left: 60px !important;
    font-size: 1.8em !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid #2980b9 !important;
    min-height: 50px !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* Number circle - the actual number */
.entry-inner h2::before,
.entry-content h2::before,
.entry.themeform h2::before {
    content: counter(list-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 45px !important;
    height: 45px !important;
    background: #2980b9 !important;
    color: #fff !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* -----------------------------------------
   LIST SUMMARY STYLING
   ----------------------------------------- */
.list-summary {
    font-size: 1.1em !important;
    line-height: 1.8 !important;
    color: #444 !important;
    padding: 15px 0 !important;
    margin-bottom: 10px !important;
}

/* -----------------------------------------
   SEPARATORS
   ----------------------------------------- */
.entry-inner hr,
.entry-content hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(to right, transparent, #ddd, transparent) !important;
    margin: 30px 0 !important;
}

/* -----------------------------------------
   IMAGES - FIXED HEIGHT, CENTERED
   ----------------------------------------- */
.entry-inner figure,
.entry-content figure {
    text-align: center !important;
    margin: 25px auto !important;
}

.entry-inner figure img,
.entry-content figure img,
.entry-inner img.list-item-image,
.entry-content img.list-item-image {
    height: 350px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
}

/* -----------------------------------------
   PARAGRAPHS (Now handled by Listverse typography above)
   ----------------------------------------- */
/* Paragraph styles now in BASE TYPOGRAPHY section */

/* -----------------------------------------
   FEATURED IMAGE / BANNER
   ----------------------------------------- */
.post-thumbnail img,
.image-container img {
    width: 100% !important;
    height: 350px !important;
    object-fit: cover !important;
}

/* -----------------------------------------
   RESPONSIVE
   ----------------------------------------- */
@media (max-width: 768px) {
    .entry-inner h2,
    .entry-content h2 {
        font-size: 1.3em !important;
        padding-left: 50px !important;
    }
    
    .entry-inner h2::before,
    .entry-content h2::before {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }
    
    .entry-inner figure img,
    .entry-content figure img {
        height: 220px !important;
    }
}

/* ============================================
   LISTVERSE-STYLE HEADER & LAYOUT
   ============================================ */

/* -----------------------------------------
   PAGE TITLE BAR (Category display)
   ----------------------------------------- */
.page-title.hu-pad.group {
    background: #f5f5f5;
    padding: 10px 20px;
    margin-bottom: 0;
}

.page-title .meta-single {
    margin: 0;
    padding: 0;
    text-align: left;
}

.page-title .meta-single .category {
    display: inline-block;
}

.page-title .meta-single .category a {
    background: #e74c3c;
    color: #fff !important;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 2px;
    display: inline-block;
}

.page-title .meta-single .category a:hover {
    background: #c0392b;
}

.page-title .meta-single .category span {
    color: #999;
    margin: 0 6px;
}

/* Hide comment count in title bar */
.page-title .meta-single .comments {
    display: none;
}

/* -----------------------------------------
   SINGLE POST HEADER - CENTERED
   ----------------------------------------- */

/* Category in page-title - centered */
.single .page-title .meta-single {
    text-align: center !important;
}

/* Title - centered */
.single .post-inner h1.post-title {
    text-align: center !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive title */
@media (max-width: 719px) {
    .single .post-inner h1.post-title {
        font-size: 26px !important;
    }
}

/* -----------------------------------------
   AUTHOR BYLINE - CENTERED
   ----------------------------------------- */
.single p.post-byline {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

.single p.post-byline .vcard.author .fn a {
    color: #3498db;
    font-weight: 600;
    text-decoration: none;
}

.single p.post-byline .vcard.author .fn a:hover {
    text-decoration: underline;
}

/* -----------------------------------------
   SOCIAL SHARE BUTTONS
   ----------------------------------------- */
.fw-social-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 24px 0 !important;
    align-items: center;
    justify-content: center;
}

.fw-social-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 3px;
    transition: opacity 0.2s ease;
    min-width: 70px;
}

.fw-social-share a:hover {
    opacity: 0.85;
    color: #fff !important;
}

.fw-social-share a svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    fill: currentColor;
}

.fw-share-facebook { background: #3b5998; }
.fw-share-twitter { background: #000000; }
.fw-share-whatsapp { background: #25d366; }
.fw-share-pinterest { background: #bd081c; }
.fw-share-linkedin { background: #0077b5; }
.fw-share-email { background: #666; }

@media (max-width: 600px) {
    .fw-social-share a {
        padding: 8px 12px;
        font-size: 12px;
        min-width: auto;
    }
    
    .fw-social-share a span {
        display: none;
    }
    
    .fw-social-share a svg {
        margin-right: 0;
    }
}

/* -----------------------------------------
   KEY FACTS BOXES (from plugin)
   ----------------------------------------- */
.fw-key-facts {
    background: #f8f9fa;
    border-left: 4px solid #e74c3c;
    padding: 16px 20px;
    margin: 20px 0;
}

.fw-key-facts h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e74c3c;
}

.fw-key-facts ul {
    margin: 0;
    padding-left: 20px;
}

.fw-key-facts li {
    margin-bottom: 4px;
    font-size: 14px;
}

/* -----------------------------------------
   CONTENT AREA REFINEMENTS
   ----------------------------------------- */
.entry-inner {
    font-size: 17px;
    line-height: 1.7;
}

/* ============================================
   SIMILAR LISTS SECTION
   ============================================ */
.fw-similar-lists {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid #eee;
}

.fw-similar-heading {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 24px;
    text-align: center;
}

.fw-similar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 600px) {
    .fw-similar-grid {
        grid-template-columns: 1fr;
    }
}

.fw-similar-item {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fw-similar-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.fw-similar-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #f5f5f5;
}

.fw-similar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fw-similar-no-thumb {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fw-similar-info {
    padding: 16px;
}

.fw-similar-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e74c3c;
    margin-bottom: 8px;
}

.fw-similar-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
    line-height: 1.4;
}

.fw-similar-item:hover .fw-similar-title {
    color: #2980b9;
}

/* ============================================
   READ MORE LINK (Homepage/Archive)
   ============================================ */
.fw-read-more {
    display: inline-block;
    color: #2980b9;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.fw-read-more:hover {
    color: #1a5276;
    text-decoration: underline;
}

/* ============================================
   SINGLE POST - FEATURED IMAGE SPACING
   ============================================ */
.single .post-inner > .image-container {
    margin-bottom: 30px !important;
}

/* ============================================
   HOMEPAGE: CLEAN LAYOUT WITH PADDING
   ============================================
   Hide the empty page-title bar but keep the top padding on content.
*/
.home .page-title.hu-pad.group {
    display: none !important;
}

/* ============================================
   HEADER - REDUCED PADDING ONLY
   ============================================ */
/* Just reduce the padding, don't touch logo alignment/display */
.central-header-zone.hu-pad {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* ============================================
   RIGHT SIDEBAR - "DISCOVER" POSTS LARGER IMAGES
   ============================================ */
/* Only target the right sidebar (s2) Discover section posts */
.sidebar.s2 .widget_hu_posts .alx-posts.thumbs-enabled li {
    margin-bottom: 20px !important;
}

.sidebar.s2 .widget_hu_posts .post-item-thumbnail {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
}

.sidebar.s2 .widget_hu_posts .post-item-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-height: 140px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

.sidebar.s2 .widget_hu_posts .post-item-inner {
    width: 100% !important;
    float: none !important;
}

.sidebar.s2 .widget_hu_posts .post-item-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* ============================================
   HOMEPAGE LISTS - FEATURED IMAGES IN 2 COLUMNS
   ============================================ */
/* Homepage post grid - show full featured images */
.home .post-list .post-row,
.archive .post-list .post-row,
.blog .post-list .post-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    margin-bottom: 25px !important;
}

/* Individual post item on homepage */
.home .post-list article.post,
.archive .post-list article.post,
.blog .post-list article.post {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Featured image on homepage posts - larger than sidebar, smaller than hero */
.home .post-list .post .post-thumbnail,
.archive .post-list .post .post-thumbnail,
.blog .post-list .post .post-thumbnail,
.home .post-list .post .entry-thumbnail,
.archive .post-list .post .entry-thumbnail,
.blog .post-list .post .entry-thumbnail {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

.home .post-list .post .post-thumbnail img,
.archive .post-list .post .post-thumbnail img,
.blog .post-list .post .post-thumbnail img,
.home .post-list .post .entry-thumbnail img,
.archive .post-list .post .entry-thumbnail img,
.blog .post-list .post .entry-thumbnail img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Homepage post titles */
.home .post-list .post .post-title,
.archive .post-list .post .post-title,
.blog .post-list .post .post-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}

/* Responsive - single column on mobile */
@media (max-width: 768px) {
    .home .post-list .post-row,
    .archive .post-list .post-row,
    .blog .post-list .post-row {
        grid-template-columns: 1fr !important;
    }
    
    .home .post-list .post .post-thumbnail,
    .archive .post-list .post .post-thumbnail,
    .blog .post-list .post .post-thumbnail {
        height: 180px !important;
    }
    
    .home .post-list .post .post-thumbnail img,
    .archive .post-list .post .post-thumbnail img,
    .blog .post-list .post .post-thumbnail img {
        height: 180px !important;
    }
    
}

/* Related Posts Section */
.fw-related-posts {
    margin: 48px 0 24px;
    padding: 24px 28px;
    background: #f8f8f8;
    border-left: 4px solid #c0392b;
    border-radius: 2px;
}

.fw-related-posts h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
    margin: 0 0 14px;
}

.fw-related-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fw-related-posts ul li {
    margin-bottom: 8px;
}

.fw-related-posts ul li:last-child {
    margin-bottom: 0;
}

.fw-related-posts ul li a {
    font-size: 15px;
    font-weight: 600;
    color: #c0392b;
    text-decoration: none;
}

.fw-related-posts ul li a:hover {
    text-decoration: underline;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* UX additions - June 10, 2026 */
.fw-share-reddit {
    background: #ff4500;
}
.fw-share-reddit:hover {
    background: #e03d00;
}
.fw-reading-time {
    text-align: center;
    color: #8a8a8a;
    font-size: 13px;
    margin: 4px 0 2px;
}

/* Numbered pagination - June 10, 2026 */
.fw-page-numbers {
    text-align: center;
    padding: 12px 0 28px;
}
.fw-page-numbers .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px 6px;
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.fw-page-numbers a.page-numbers:hover {
    background: #2980b9;
    color: #fff;
    border-color: #2980b9;
}
.fw-page-numbers .page-numbers.current {
    background: #2980b9;
    color: #fff;
    border-color: #2980b9;
}
.fw-page-numbers .page-numbers.dots {
    border: none;
    background: transparent;
}

/* Brand palette unification + header tightening - June 10, 2026 */
/* Sidebar headers: brand blue (from logo) for FOLLOW, brand coral for DISCOVER */
.sidebar.s1 .sidebar-top {
    background: #4890c0 !important;
}
.sidebar.s2 .sidebar-top {
    background: #d86048 !important;
}
/* Tighten the dark header band */
.central-header-zone {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
#header .site-title {
    padding: 4px 0 !important;
}
#header .site-title img,
#header .custom-logo {
    max-height: 84px;
    width: auto;
}