<?php
/*
Theme Name: IFHP Mosaic
Description: A custom WordPress theme with asymmetric tile layout, infinite scroll, and mobile-responsive design.
Version: 1.0
Author: Custom Development
Text Domain: ifhp-mosaic
*/

/* ==========================================================================
   GLOBAL STYLES & PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-red: #C70039;
    --dark-grey: #333;
    --medium-grey: #666;
    --light-grey: #AAA;
    --black: #000;
    --white: #FFF;
    --font-family: "Fraunces", serif;
  	--font-optical-sizing: auto;
}

/* Performance optimizations */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Optimize font rendering */
body {
    font-family: var(--font-family);
    color: var(--dark-grey);
    line-height: 1.6;
    background-color: var(--white);
    margin: 0;
    padding-top: 80px; /* Space for fixed header */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Optimize images for performance */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   STICKY HEADER
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--white);
    border-bottom: 2px solid var(--primary-red);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: 80px;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Logo Area */
.site-branding {
    display: flex;
    align-items: center;
}

.logo-placeholder {
    width: 150px;
    height: 50px;
    background-color: var(--light-grey);
    border: 2px dashed var(--medium-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.site-title a {
    color: var(--dark-grey);
    text-decoration: none;
}

.site-title a:hover {
    color: var(--primary-red);
}

/* Navigation Menu */
.main-navigation {
    display: flex;
    align-items: center;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.main-navigation li {
    margin: 0;
}

.main-navigation a {
    color: var(--dark-grey);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: var(--primary-red);
}

/* Hamburger Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 40px;
    height: 40px;
    position: relative;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 40px;
    height: 40px;
    position: relative;
    margin-left: 10px;
}

.hamburger-lines,
.sidebar-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.hamburger-lines .line,
.sidebar-icon .sidebar-line {
    background-color: var(--dark-grey);
    height: 3px;
    width: 100%;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Different icon for sidebar toggle */
.sidebar-icon .sidebar-line:nth-child(1) {
    width: 60%;
}

.sidebar-icon .sidebar-line:nth-child(2) {
    width: 80%;
}

.sidebar-icon .sidebar-line:nth-child(3) {
    width: 100%;
}

/* Hamburger Animation */
.menu-toggle[aria-expanded="true"] .line1 {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle[aria-expanded="true"] .line2 {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .line3 {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Screen Reader Text */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   MAIN LAYOUT & GRID CONTAINER
   ========================================================================== */

.site-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.main-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.content-area {
    flex: 1;
    width: 66%;
}

.sidebar {
    width: 25%;
    flex-shrink: 0;
}

/* Posts Grid - 3 Column Asymmetric Layout */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* Asymmetric Tile Sizing - Performance Optimized */
.grid-tile {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    min-height: 250px;
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden; /* Prevent flickering */
    grid-column: span 1; /* Default single column */
    grid-row: span 1;    /* Default single row */
}

/* Simplified 6-tile asymmetric pattern - A/B modules */
/* Pattern A: Large | Small | Small (tiles 1-3) */
.grid-tile:nth-child(6n+1) {
    grid-row: span 2;
    min-height: 400px;
}

.grid-tile:nth-child(6n+2) {
    min-height: 280px;
}

.grid-tile:nth-child(6n+3) {
    min-height: 280px;
}

/* Pattern B: Wide spanning | Single (tiles 4-6) */
.grid-tile:nth-child(6n+4) {
    grid-column: span 2;
    min-height: 300px;
}

.grid-tile:nth-child(6n+5) {
    grid-row: span 2;
    min-height: 400px;
}

.grid-tile:nth-child(6n+6) {
    min-height: 280px;
}

/* Tile Link - Full Coverage */
.tile-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Featured Image Background */
.tile-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fallback for posts without featured images */
.grid-tile:not(.has-post-thumbnail) {
    background: linear-gradient(135deg, var(--medium-grey) 0%, var(--dark-grey) 100%);
}

.grid-tile:not(.has-post-thumbnail) .tile-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

/* Dark Overlay for Text Contrast - Performance Optimized */
.tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    transition: background 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: background;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Tile Content */
.tile-content {
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.tile-title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 8px 0;
    transition: text-decoration 0.3s ease;
}

.tile-date {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

/* Hover Effects - Performance Optimized */
.grid-tile:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.grid-tile:hover .tile-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

.grid-tile:hover .tile-title {
    text-decoration: underline;
    text-decoration-color: var(--primary-red);
    text-underline-offset: 3px;
}

/* Performance optimization for mobile devices */
@media (max-width: 768px) {
    .grid-tile {
        will-change: auto; /* Reduce GPU usage on mobile */
    }
    
    .grid-tile:hover {
        transform: none; /* Disable transform on mobile for better performance */
    }
}

/* GPU acceleration for supported properties */
.tile-link,
.load-more-btn,
.social-links a {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==========================================================================
   ACCESSIBILITY & FOCUS STYLES
   ========================================================================== */

/* Enhanced focus styles for WCAG 2.1 AA compliance */
*:focus {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
}

/* High contrast focus for interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--white), 0 0 0 4px var(--primary-red);
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-red);
    color: var(--white);
    padding: 8px 16px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 4px 4px;
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: none;
}

/* Ensure adequate color contrast */
.tile-content {
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Enhanced contrast */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-red: #FF0040;
        --dark-grey: #000;
        --medium-grey: #444;
        --light-grey: #888;
    }
    
    .tile-overlay {
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    .grid-tile:hover .tile-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}

/* Focus-visible polyfill support */
.js-focus-visible *:focus:not(.focus-visible) {
    outline: none;
}

.js-focus-visible .focus-visible {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
}

/* Screen reader only text */
.screen-reader-text,
.sr-only,
.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Show screen reader text on focus */
.screen-reader-text:focus,
.sr-only:focus,
.visually-hidden:focus {
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    background: var(--primary-red);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    z-index: 10000;
}

/* Keyboard navigation improvements */
.main-navigation ul {
    list-style: none;
}

.main-navigation a:focus,
.category-filter-link:focus,
.breaking-news-link:focus {
    background-color: var(--primary-red);
    color: var(--white);
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

/* Button focus states */
.load-more-btn:focus,
.menu-toggle:focus,
.sidebar-toggle:focus,
.sidebar-close:focus {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--white), 0 0 0 4px var(--primary-red);
}

/* Enhanced tile focus for keyboard navigation */
.tile-link:focus {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
    border-radius: 8px;
}

.tile-link:focus .tile-title {
    text-decoration: underline;
    text-decoration-color: var(--white);
    text-underline-offset: 3px;
}

/* Social links focus */
.social-links a:focus {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
    background-color: var(--primary-red);
    transform: translateY(-2px);
}

/* Form elements focus (if any) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 2px rgba(199, 0, 57, 0.2);
}

/* ==========================================================================
   SIDEBAR & WIDGETS
   ========================================================================== */

.sidebar {
    background-color: #f8f9fa;
    padding: 30px 25px;
    border-radius: 8px;
}

.sidebar-header {
    display: none; /* Hidden on desktop */
}

.widget {
    margin-bottom: 30px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--dark-grey);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-red);
}

/* Breaking News Widget */
.breaking-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.breaking-news-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.breaking-news-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.breaking-news-link {
    display: block;
    text-decoration: none;
    color: var(--dark-grey);
    transition: color 0.3s ease;
}

.breaking-news-link:hover {
    color: var(--primary-red);
}

.breaking-news-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 5px 0;
}

.breaking-news-date {
    font-size: 0.8rem;
    color: var(--medium-grey);
    font-style: italic;
}

/* Filter Categories Widget */
.category-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-filter-item {
    margin-bottom: 8px;
}

.category-filter-link {
    display: block;
    padding: 10px 15px;
    background-color: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    text-decoration: none;
    color: var(--dark-grey);
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.category-filter-link:hover {
    background-color: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateX(3px);
}

.category-filter-link.active {
    background-color: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

.category-filter-link .post-count {
    float: right;
    font-size: 0.8rem;
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
}

/* ==========================================================================
   MOBILE SIDEBAR OVERLAY
   ========================================================================== */

@media (max-width: 768px) {
    .sidebar {
        /* Override desktop styles for mobile overlay */
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background-color: var(--white);
        border-radius: 0;
        padding: 0;
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.sidebar-open {
        display: block;
        transform: translateX(0);
    }
    
    .sidebar-header {
        display: flex; /* Show on mobile */
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        background-color: #f8f9fa;
    }
    
    .sidebar-title {
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--dark-grey);
        margin: 0;
    }
    
    .sidebar-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        color: var(--medium-grey);
        transition: color 0.3s ease;
    }
    
    .sidebar-close:hover {
        color: var(--primary-red);
    }
    
    .sidebar .widget {
        margin-bottom: 25px;
        padding: 0 20px;
    }
    
    .sidebar .widget:first-of-type {
        margin-top: 20px;
    }
    
    .sidebar .widget-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .sidebar .breaking-news-title {
        font-size: 1rem;
    }
    
/* ==========================================================================
   CROSS-BROWSER COMPATIBILITY & FALLBACKS
   ========================================================================== */

/* CSS Grid fallback for older browsers */
@supports not (display: grid) {
    .posts-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .grid-tile {
        flex: 1 1 calc(33.333% - 14px);
        min-width: 250px;
    }
    
    .grid-tile:nth-child(6n+1),
    .grid-tile:nth-child(6n+2),
    .grid-tile:nth-child(6n+5),
    .grid-tile:nth-child(6n+6) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Flexbox fallback for very old browsers */
@supports not (display: flex) {
    .posts-grid {
        display: block;
    }
    
    .grid-tile {
        display: inline-block;
        vertical-align: top;
        width: 31%;
        margin-right: 3.5%;
        margin-bottom: 20px;
    }
    
    .grid-tile:nth-child(3n) {
        margin-right: 0;
    }
}

/* Object-fit fallback for Internet Explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .tile-image img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    .grid-tile {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
    
    .tile-overlay {
        -webkit-transform: translateZ(0);
    }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
    .grid-tile {
        transform: translate3d(0, 0, 0);
    }
}

/* Edge/IE specific styles */
@supports (-ms-ime-align: auto) {
    .posts-grid {
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
    }
    
    .grid-tile {
        -ms-flex: 1 1 calc(33.333% - 14px);
    }
}

/* Breadcrumbs */
.breadcrumbs {
    background-color: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9rem;
}

.breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    color: var(--medium-grey);
    margin-left: 8px;
    font-weight: bold;
}

.breadcrumb-item a {
    color: var(--medium-grey);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--primary-red);
    text-decoration: underline;
}

.breadcrumb-item.current {
    color: var(--dark-grey);
    font-weight: 500;
}

/* Enhanced mobile accessibility */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 10px 0;
    }
    
    .breadcrumb-container {
        padding: 0 15px;
    }
    
    .breadcrumb-list {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }
}

/* High contrast mode enhancements */
@media (prefers-contrast: high) {
    .site-header {
        border-bottom-width: 3px;
    }
    
    .grid-tile {
        border: 2px solid var(--dark-grey);
    }
    
    .load-more-btn {
        border: 2px solid var(--white);
    }
    
    .category-filter-link {
        border-width: 2px;
    }
}

/* Print styles */
@media print {
    .site-header,
    .sidebar,
    .load-more-container,
    .social-icons,
    .breadcrumbs {
        display: none !important;
    }
    
    .site-content {
        padding-top: 0 !important;
    }
    
    .grid-tile {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .tile-overlay {
        background: rgba(0, 0, 0, 0.1) !important;
    }
    
    .tile-title {
        color: #000 !important;
        text-shadow: none !important;
    }
}

/* Windows High Contrast Mode */
@media (-ms-high-contrast: active) {
    .grid-tile {
        border: 1px solid;
    }
    
    .tile-overlay {
        background: transparent !important;
    }
    
    .tile-title {
        background: ButtonText;
        color: ButtonFace;
        padding: 5px;
    }
    
    .load-more-btn {
        border: 1px solid ButtonText;
    }
}

/* Enhanced status updates for screen readers */
.sr-status {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Loading states for better UX */
.loading .grid-tile {
    opacity: 0.7;
    pointer-events: none;
}

.loading .load-more-btn {
    cursor: progress;
}

/* Error states */
.error .load-more-btn {
    background-color: #dc3545;
    border-color: #dc3545;
}

.error .load-more-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Success states */
.success .load-more-btn {
    background-color: #28a745;
    border-color: #28a745;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .grid-tile:hover {
        transform: none;
        box-shadow: none;
    }
    
    .grid-tile:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .category-filter-link:hover {
        transform: none;
    }
    
    .category-filter-link:active {
        background-color: var(--primary-red);
        color: var(--white);
    }
}

/* Keyboard navigation indicators */
.using-keyboard *:focus {
    outline: 3px solid var(--primary-red) !important;
    outline-offset: 2px !important;
}

.using-mouse *:focus {
    outline: none !important;
}

/* Animation performance for slower devices */
@media (prefers-reduced-motion: reduce) {
    .grid-tile,
    .tile-overlay,
    .tile-title,
    .load-more-btn,
    .category-filter-link,
    .social-links a {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin-top: 40px;
}

.load-more-btn {
    background-color: var(--primary-red);
    color: var(--white);
    border: none;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    min-width: 140px;
}

.load-more-btn:hover:not(:disabled) {
    background-color: #A30031;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(199, 0, 57, 0.3);
}

.load-more-btn:disabled {
    background-color: var(--light-grey);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    color: var(--medium-grey);
}

.load-more-btn:focus {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
}

/* Loading Spinner */
.loading-spinner {
    margin-top: 20px;
    color: var(--medium-grey);
    font-style: italic;
}

.loading-spinner span {
    display: inline-block;
    animation: fadeInOut 1.5s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ==========================================================================
   SINGLE POST TEMPLATE
   ========================================================================== */

.single-post-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.single-container {
    background-color: var(--white);
}

.single-post {
    background-color: var(--white);
}

/* Entry Header */
.entry-header {
    margin-bottom: 40px;
    text-align: center;
}

.entry-featured-image {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.entry-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.entry-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--dark-grey);
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--medium-grey);
    margin-bottom: 20px;
}

.entry-meta .meta-label {
    font-weight: 600;
    color: var(--dark-grey);
}

.entry-meta a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 500;
}

.entry-meta a:hover {
    text-decoration: underline;
}

.entry-categories a {
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

.entry-categories a:hover {
    background-color: var(--primary-red);
    color: var(--white);
    text-decoration: none;
}

/* Entry Content */
.entry-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--dark-grey);
    margin-bottom: 40px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--dark-grey);
    font-weight: bold;
    margin: 30px 0 15px 0;
    line-height: 1.3;
}

.entry-content h2 {
    font-size: 1.8rem;
    border-bottom: 2px solid var(--primary-red);
    padding-bottom: 10px;
}

.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content h4 {
    font-size: 1.3rem;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-red);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: var(--medium-grey);
    font-size: 1.2rem;
}

.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.entry-content li {
    margin-bottom: 8px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 20px 0;
}

/* Entry Footer */
.entry-footer {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-bottom: 40px;
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tags-label {
    font-weight: 600;
    color: var(--dark-grey);
}

.entry-tags a {
    background-color: #f8f9fa;
    color: var(--medium-grey);
    padding: 5px 12px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.entry-tags a:hover {
    background-color: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

/* Post Footer Sections */
.post-footer-sections {
    border-top: 2px solid #f0f0f0;
    padding-top: 40px;
}

/* Author Box */
.author-box {
    display: flex;
    gap: 20px;
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    border-radius: 50%;
    border: 3px solid var(--primary-red);
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--dark-grey);
}

.author-name a {
    color: var(--dark-grey);
    text-decoration: none;
}

.author-name a:hover {
    color: var(--primary-red);
}

.author-description {
    color: var(--medium-grey);
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.author-posts-link {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.author-posts-link:hover {
    text-decoration: underline;
}

/* Related Posts */
.related-posts-section {
    margin-bottom: 40px;
}

.related-posts-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dark-grey);
    margin: 0 0 25px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-red);
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.related-post-item {
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.related-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.related-post-thumbnail {
    height: 150px;
    overflow: hidden;
}

.related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

.related-post-content {
    padding: 15px;
}

.related-post-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-grey);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.related-post-link:hover .related-post-title {
    color: var(--primary-red);
}

.related-post-date {
    font-size: 0.85rem;
    color: var(--medium-grey);
}

/* Page Links */
.page-links {
    margin: 30px 0;
    text-align: center;
}

.page-links a,
.page-links > span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-decoration: none;
    color: var(--dark-grey);
}

.page-links a:hover {
    background-color: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .single-post-main {
        padding: 30px 15px;
    }
    
    .entry-title {
        font-size: 2rem;
    }
    
    .entry-meta {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .author-box {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--dark-grey);
    color: var(--white);
    padding: 40px 0 20px 0;
    margin-top: 60px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Copyright */
.copyright {
    flex: 1;
}

.copyright p {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
}

/* Social Icons */
.social-icons {
    flex-shrink: 0;
}

.social-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

.social-links li {
    margin: 0;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(199, 0, 57, 0.3);
}

.social-links svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Footer Links */
.footer-links {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.terms-link {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.terms-link:hover {
    color: var(--primary-red);
    text-decoration: underline;
}

.footer-separator {
    color: #666;
    font-size: 0.8rem;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .site-footer {
        padding: 30px 0 15px 0;
        text-align: center;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .copyright {
        order: 3;
    }
    
    .social-icons {
        order: 1;
    }
    
    .footer-links {
        order: 2;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 0 15px;
    }
    
    .social-links {
        gap: 10px;
    }
    
    .social-links a {
        width: 35px;
        height: 35px;
    }
    
    .social-links svg {
        width: 16px;
        height: 16px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-separator {
        display: none;
    }
}

/* Responsive Design */
@media (max-width: 1280px) {
    .site-content {
        max-width: 1000px;
    }
    
    .posts-grid {
        gap: 15px;
    }
    
    .main-container {
        gap: 30px;
    }
}

@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Reset all previous 6n patterns for 2-column layout */
    .grid-tile:nth-child(6n+2),
    .grid-tile:nth-child(6n+5),
    .grid-tile:nth-child(6n+6) {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 250px;
    }
    
    /* New 8-tile pattern for 2 columns - prevents gaps */
    .grid-tile:nth-child(8n+1) {
        grid-row: span 2;
        min-height: 350px;
    }
    
    .grid-tile:nth-child(8n+2) {
        min-height: 250px;
    }
    
    .grid-tile:nth-child(8n+3) {
        grid-column: span 2;
        min-height: 280px;
    }
    
    .grid-tile:nth-child(8n+4) {
        min-height: 300px;
    }
    
    .grid-tile:nth-child(8n+5) {
        min-height: 270px;
    }
    
    .grid-tile:nth-child(8n+6) {
        grid-row: span 2;
        min-height: 380px;
    }
    
    .grid-tile:nth-child(8n+7) {
        grid-column: span 2;
        min-height: 260px;
    }
    
    .grid-tile:nth-child(8n+8) {
        min-height: 290px;
    }
}

@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Single column - reset all special sizing and spans */
    .grid-tile {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 280px !important;
    }
    
    .tile-content {
        padding: 20px;
    }
    
    .tile-title {
        font-size: 1.2rem;
    }
    
    .site-content {
        padding: 30px 15px;
    }
}

@media (max-width: 480px) {
    .tile-overlay {
        padding: 20px;
    }
    
    .tile-title {
        font-size: 1.1rem;
    }
    
    .tile-date {
        font-size: 0.85rem;
    }
}
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
    
    .site-header {
        height: 70px;
    }
    
    .header-container {
        padding: 0 15px;
    }
    
    .logo-placeholder {
        width: 120px;
        height: 40px;
        margin-right: 10px;
    }
    
    .site-title {
        font-size: 1.2rem;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .sidebar-toggle {
        display: block;
    }
    
    .main-navigation ul {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background-color: var(--white);
        flex-direction: column;
        gap: 0;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 999;
    }
    
    .main-navigation ul.menu-open {
        transform: translateX(0);
    }
    
    .main-navigation li {
        border-bottom: 1px solid var(--light-grey);
        padding: 15px 0;
    }
    
    .main-navigation li:last-child {
        border-bottom: none;
    }
    
    .main-navigation a {
        font-size: 1.1rem;
        display: block;
        width: 100%;
    }
}



/*
Theme Name: _tk
Theme URI: http://themekraft.com/store/_tk-free-wordpress-starter-theme-based-on-twitter-bootstrap/
Author: ThemeKraft
Author URI: http://themekraft.com/
Description: Hi, I am the ultra minimal starter theme _tk, ready for your next awesome WordPress project! I am the most seamless and minimalistic integration of Twitter Bootstrap Framework into the _s starter theme from Automattic, the guys behind WordPress. You can find me on GitHub. Fork me! I'm waiting for you ;)
Version: 1.1.10
License: GNU General Public License v3.0 /
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: gray, light, two-columns, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, sticky-post,  theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

This theme is the most seamless and minimalistic integration of Twitter Bootstrap Framework into
the _s starter theme from Automattic, the guys behind WordPress.

_s (or Underscores) http://underscores.me/, (C) 2012-2013 Automattic, Inc. Twitter Bootstrap

Credits:

1. Bootstrap

 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=f58353a31151a8c05d7c)
 * Config saved to config.json and https://gist.github.com/f58353a31151a8c05d7c

2. wp_bootstrap_navwalker

* Class Name: wp_bootstrap_navwalker
* GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker

3. Glyphicons

 * http://getbootstrap.com/components/

*/

/* My Minimal WordPress Styling comes here */

/* This is a small security for too long strings titles */
body {
	word-wrap: break-word;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}


/* Images and wp-captions should always fit and be responsive */
img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-top: 10px;
	margin-bottom: 10px;
}
.wp-caption {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	max-width: 100%;
	border-radius: 4px;
	padding: 0 10px;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}
.wp-caption .wp-caption-text {
	text-align: center;
	margin-top: 10px;
}

/* WP Gallery */
.gallery {
	margin-bottom: 1.5em;
}
.gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.gallery dd {
	margin: 0;
}
.gallery-caption {
	display: block;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}


/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/* Content */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0 0 1.5em;
}
.sticky {
	display: block;
}
.bypostauthor {
	display: block;
}


/* Clearing */
.clear {
	clear: both;
}

/* Navigation */

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}


/* Here some needed widget styles
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 2em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }

/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line.
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
 .comment .children { margin-left: 1.5em; }

/**
* Some WP Theme Repository requirements
*/

.sticky {
}

.gallery-caption {

}

.bypostauthor {

}

.entry-meta {
	clear: both;
}

/*
 == Quick CSS styling tips ==

 You can start off in a rough direction with some minimal styles.
 See below for some tips. ;)


 == Want to have the whole site wrapped? ==

 Just fill the .container class with some background color to have a the whole site "wrapped".
 This works so easy because every main part is wrapped only once into a container class by bootstrap.
 Try out by decommenting the next line and go from there.

 .container { background: #f9f9f9; border-right: 1px solid #eee; border-left: 1px solid #eee; }


 == Want to wrap just the content and sidebar in Bootstrap style? ==

 That one is a great example to show that some things are much cleaner and easier to do via just adding some HTML classes.
 In this case, we will add just one CSS class "panel", look for example at the beginning in content.php!


 == Infinite Scrolling by Jetpack ==
 You can enable this cool feature by simply decommenting the lines below and make sure you use the same classes on the right place in your html..

/* Globally hidden elements when Infinite Scroll is supported and in use.
 * Older / Newer Posts Navigation (the pagination, must always be hidden), Theme Footer only when set to scrolling.. */

/*
.infinite-scroll .page-links,
.infinite-scroll.neverending .site-footer {
	display: none;
}
*/

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */

/*
.infinity-end.neverending .site-footer {
	display: block;
}
*/

/* Hey, if you don't need my comments anymore, just delete me! :)  */


/* styles for _tk_pagination und _tk_link_pages */
nav form.tk-page-nav,
nav .input-group,
nav .input-group-btn,
nav .form-control {
    display: inline;
}