/*
Theme Name:   KO GeneratePress Custom
Theme URI:    https://freelyuseful.com
Description:  Custom design system child theme for Freely Useful.
Author:       Kevin Ocasio
Author URI:   https://kevinocasio.com
Template:     generatepress
Version:      1.0.0
*/

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

/* ─── Global Variables & Reset ────────────────────────────────────────────── */
:root {
    --fu-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fu-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    --fu-bg-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    --fu-text-main: #0f172a;
    --fu-text-muted: #475569;
    --fu-accent: #2563eb;
    --fu-accent-hover: #1d4ed8;
    --fu-border-color: rgba(226, 232, 240, 0.8);
    --fu-card-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.04), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --fu-card-shadow-hover: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
}

body {
    font-family: var(--fu-font-body);
    color: var(--fu-text-main);
    background: #f8fafc;
    background-image: var(--fu-bg-gradient);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Override core plugin variables globally to match brand blue */
    --fu-accent: #2563eb !important;
    --fu-accent-hover: #1d4ed8 !important;
    --fu-accent-light: rgba(37, 99, 235, 0.06) !important;
}

/* ─── Typography Overrides ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fu-font-heading);
    font-weight: 700;
    color: var(--fu-text-main);
    letter-spacing: -0.02em;
}

/* ─── Header & Navigation Customization ───────────────────────────────────── */
.site-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--fu-border-color);
}

/* Force header logo site title to match thinner Pacifico font-weight of footer logo */
.main-title,
.main-title a {
    font-family: 'Pacifico', cursive !important;
    font-weight: 400 !important;
    color: #2563eb !important; /* Brand blue accent */
    text-decoration: none !important;
}

/* Two-tone logo style: "Useful" is a lighter blue */
.main-title a span,
.footer-logo a span {
    color: #3b82f6 !important; /* Premium lighter shade of blue */
}

.main-navigation {
    background-color: transparent !important;
}

.main-navigation a {
    font-family: var(--fu-font-body) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--fu-text-muted) !important;
    transition: color 0.2s ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--fu-accent) !important;
    background-color: transparent !important;
}

/* ─── Hide Home Page Title and Spacing ────────────────────────────────────── */
.home .entry-header {
    display: none !important;
}

.home .site-content {
    padding-top: 0 !important;
}

.home .site-main {
    margin-top: 0 !important;
}

.home .inside-article {
    padding-top: 60px !important; /* Restored original perfect top space */
    padding-bottom: 60px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ─── Archive Grid System (Blog & Category Lists) ───────────────────────── */
.archive .site-main,
.blog .site-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 60px !important; /* Spacing below the grid, matches home page */
}

/* Force Category Header to span full-width above the card grid */
.archive .page-header,
.blog .page-header {
    grid-column: 1 / -1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 60px 0 0 0 !important; /* 60px top spacing, matches home page */
    margin-bottom: 32px !important; /* 32px bottom spacing, matches home page */
}

.archive .page-header h1,
.blog .page-header h1 {
    font-size: 40px;
    font-weight: 800;
    color: var(--fu-text-main);
    margin: 0;
    letter-spacing: -0.03em;
}

/* Make GP Archive Cards look like Tool Cards */
.archive .inside-article,
.blog .inside-article {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--fu-border-color);
    box-shadow: var(--fu-card-shadow);
    padding: 32px !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    position: relative; /* Base for absolute overlay link */
}

.archive .inside-article:hover,
.blog .inside-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.06), 0 8px 10px -6px rgba(37, 99, 235, 0.06) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
}

/* Hide author, date, and other blog roll meta elements */
.archive .entry-meta,
.blog .entry-meta {
    display: none !important;
}

/* Archive Layout Spacing */
.archive .entry-summary,
.blog .entry-summary {
    flex-grow: 1;
    margin-top: 8px;
    margin-bottom: 0 !important; /* Spaced out by grid height */
    color: var(--fu-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Hide standard GP read more link inside excerpts */
.archive .read-more,
.blog .read-more {
    display: none !important;
}

/* Archive Titles */
.archive .entry-title,
.blog .entry-title {
    font-size: 18px !important;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Pseudo-element overlay to make the entire card clickable */
.archive .entry-title a::after,
.blog .entry-title a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.archive .inside-article:hover .fu-tool-arrow,
.blog .inside-article:hover .fu-tool-arrow {
    transform: translateX(4px);
    color: var(--fu-accent);
}

.archive .entry-title a,
.blog .entry-title a {
    color: var(--fu-text-main);
    text-decoration: none;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover {
    color: var(--fu-accent);
}

/* Hide Blog Cruft / Meta from archives completely */
.archive .entry-meta,
.blog .entry-meta,
.archive footer.entry-meta,
.blog footer.entry-meta {
    display: none !important;
}

/* Custom Read More Button on Archives */
.archive .read-more,
.blog .read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid var(--fu-border-color);
    color: var(--fu-text-main) !important;
    font-family: var(--fu-font-heading);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-top: auto;
}

.archive .read-more:hover,
.blog .read-more:hover {
    background-color: var(--fu-accent);
    border-color: var(--fu-accent);
    color: #ffffff !important;
}

/* ─── Single Post & Page Layouts ─────────────────────────────────────────── */
body.single-post .inside-article,
body.page:not(.home) .inside-article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 60px 24px 60px 24px !important; /* Top space 60px, bottom space 60px, matches home page */
    max-width: 900px;
    margin: 0 auto;
}

/* Elevate the actual tool widget area to look like a premium card */
.fu-tool-wrapper {
    background: #ffffff !important;
    border: 1px solid var(--fu-border-color) !important;
    box-shadow: var(--fu-card-shadow) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin: 32px 0 !important;
}

.single .entry-header h1,
.page .entry-header h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 32px !important; /* Matches home page middle gap */
}

.single .entry-header h1 .fu-highlight,
.page .entry-header h1 .fu-highlight {
    color: var(--fu-accent) !important;
}

/* Ensure links inside post and page content stand out clearly */
.entry-content a {
    color: var(--fu-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.15s ease !important;
}

.entry-content a:hover {
    color: var(--fu-accent-hover) !important;
}

/* Prevent general link styles from bleeding into tool cards and related cards */
a.fu-tool-card,
a.fu-tool-card:hover,
a.fu-related-card,
a.fu-related-card:hover {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    font-weight: inherit !important;
}

a.fu-tool-card *,
a.fu-related-card * {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.fu-tool-card .fu-tool-title {
    color: var(--fu-text-main) !important;
}

.fu-tool-card .fu-tool-desc {
    color: var(--fu-text-muted) !important;
}

.fu-related-card .fu-related-title {
    color: var(--fu-text-main) !important;
}

/* Styled brand accent left line on single post H2 section headings */
.single-post .entry-content h2 {
    font-size: 24px !important;
    font-weight: 800;
    color: var(--fu-text-main);
    position: relative;
    padding-left: 16px;
    margin-top: 48px;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.single-post .entry-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--fu-accent);
    border-radius: 4px;
}

.single-post .entry-content h3 {
    font-size: 19px !important;
    font-weight: 700;
    color: #1e293b;
    margin-top: 36px;
    margin-bottom: 12px;
}

/* Math Formula & Inline Code Blocks Styled Cards */
.single-post .entry-content p code {
    display: block;
    background: rgba(37, 99, 235, 0.03) !important;
    border: 1px solid rgba(37, 99, 235, 0.08) !important;
    border-left: 3px solid var(--fu-accent) !important;
    color: #1e3a8a !important;
    padding: 12px 18px !important;
    border-radius: 8px;
    font-family: var(--fu-font-mono) !important;
    font-size: 14px !important;
    margin: 16px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Styled Lists with Brand Blue Indicators */
.single-post .entry-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 24px;
}
.single-post .entry-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--fu-text-main) !important; /* Fixed low-contrast light grey text */
}
.single-post .entry-content ul li::before {
    content: "•";
    color: var(--fu-accent);
    font-size: 20px;
    position: absolute;
    left: 6px;
    top: -2px;
}

.single-post .entry-content ol {
    counter-reset: fu-counter;
    list-style: none;
    padding-left: 0;
    margin-bottom: 24px;
}
.single-post .entry-content ol li {
    counter-increment: fu-counter;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--fu-text-main) !important; /* Fixed low-contrast light grey text */
}
.single-post .entry-content ol li::before {
    content: counter(fu-counter) ".";
    color: var(--fu-accent);
    font-weight: 700;
    position: absolute;
    left: 4px;
    top: 0;
}

/* Force dark text color on standard utility buttons to override theme white-on-hover */
.fu-tool-wrapper .fu-btn,
.fu-tool-wrapper button.fu-btn {
    color: var(--fu-text-main) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--fu-border-color) !important;
    transition: all 0.2s ease !important;
}

.fu-tool-wrapper .fu-btn:hover,
.fu-tool-wrapper button.fu-btn:hover {
    color: var(--fu-text-main) !important;
    background-color: #f8fafc !important; /* Clean soft gray background */
    border-color: rgba(37, 99, 235, 0.25) !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.05) !important;
}

/* Ensure blue primary action buttons keep white text on hover */
.fu-tool-wrapper .fu-btn-primary,
.fu-tool-wrapper button.fu-btn-primary {
    color: #ffffff !important;
    background-color: var(--fu-accent) !important;
    border-color: var(--fu-accent) !important;
}

.fu-tool-wrapper .fu-btn-primary:hover,
.fu-tool-wrapper button.fu-btn-primary:hover {
    color: #ffffff !important;
    background-color: var(--fu-accent-hover) !important;
    border-color: var(--fu-accent-hover) !important;
}

/* Hide date and author details on single tool posts */
.single-post .entry-meta {
    display: none !important;
}

/* Hide comment section on single tool posts */
.single-post #comments,
.single-post .comments-area {
    display: none !important;
}

/* Hide navigation, next/prev tool links, and category links on single posts */
.single-post footer.entry-meta,
.single-post .post-navigation {
    display: none !important;
}

/* ─── Premium Homepage Dashboard Layout ──────────────────────────────────── */
.fu-home-hero {
    text-align: center;
    padding: 24px 24px 32px 24px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.fu-hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(37, 99, 235, 0.06);
    color: var(--fu-accent);
    font-family: var(--fu-font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 18px;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.fu-home-hero h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--fu-text-main);
    margin: 0 0 16px 0;
    letter-spacing: -0.03em;
}

.fu-home-hero h1 .fu-highlight {
    color: var(--fu-accent) !important;
}

.fu-home-hero p {
    font-size: 16px;
    color: var(--fu-text-muted);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 620px;
}

/* Dashboard Sections */
.fu-dash-section {
    margin-bottom: 60px;
}

.fu-section-header {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--fu-border-color);
    padding-bottom: 12px;
}

.fu-section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--fu-text-main);
    margin: 0 0 4px 0;
}

.fu-section-desc {
    font-size: 14px;
    color: var(--fu-text-muted);
    margin: 0;
}

/* Tools Grid */
.fu-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Tool Cards */
.fu-tool-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--fu-border-color);
    box-shadow: var(--fu-card-shadow);
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}


.fu-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.06), 0 8px 10px -6px rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.25);
}

.fu-tool-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--fu-text-main);
    margin-top: 0;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fu-tool-arrow {
    font-size: 14px;
    color: var(--fu-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.fu-tool-card:hover .fu-tool-arrow {
    transform: translateX(3px);
    color: var(--fu-accent);
}

.fu-tool-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--fu-text-muted);
    margin: 0;
}

/* Coming Soon Tool Cards */
.fu-tool-card-pending {
    background: rgba(248, 250, 252, 0.6);
    border-radius: 16px;
    border: 1px dashed var(--fu-border-color);
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fu-tool-card-pending .fu-tool-title {
    color: var(--fu-text-muted);
}

.fu-tool-card-pending .fu-tool-desc {
    font-style: italic;
}

/* ─── About Page Layout CSS ──────────────────────────────────────────────── */
.fu-about-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.fu-founder-card {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    background: #ffffff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid var(--fu-border-color);
    box-shadow: var(--fu-card-shadow);
    margin-bottom: 48px;
}

/* Cohesive CTA Banner at the bottom of pages */
.fu-cta-banner {
    text-align: center;
    margin-top: 64px;
    padding: 48px 32px;
    background: rgba(37, 99, 235, 0.02);
    border: 1px solid var(--fu-border-color);
    border-radius: 24px;
}

.fu-cta-banner h2 {
    font-size: 28px !important;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 8px;
}

.fu-cta-banner p {
    color: var(--fu-text-muted);
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.6;
}

.fu-cta-button,
.fu-cta-button:visited,
.fu-cta-button:focus,
.fu-cta-button:active,
.fu-cta-banner a.fu-cta-button,
.fu-cta-banner a.fu-cta-button:visited,
.fu-cta-banner a.fu-cta-button:focus,
.fu-cta-banner a.fu-cta-button:active {
    display: inline-flex;
    align-items: center;
    background: var(--fu-accent) !important;
    color: #ffffff !important;
    font-family: var(--fu-font-heading);
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.fu-cta-button:hover,
.fu-cta-banner a.fu-cta-button:hover,
.fu-cta-banner a.fu-cta-button:visited:hover,
.fu-cta-banner a.fu-cta-button:focus:hover,
.fu-cta-banner a.fu-cta-button:active:hover {
    transform: translateY(-2px);
    background: var(--fu-accent-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.fu-founder-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.fu-founder-info {
    flex-shrink: 0;
    text-align: center;
}

.fu-founder-info h3 {
    margin-top: 16px;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 700;
}

/* ─── Contact Us Form Card Styling ────────────────────────────────────────── */
.fu-contact-card {
    background: #ffffff;
    border: 1px solid var(--fu-border-color);
    box-shadow: var(--fu-card-shadow);
    border-radius: 20px;
    padding: 40px;
    margin-top: 32px;
}

/* Contact Form 7 Labels and Fields */
.fu-contact-card label {
    display: block;
    font-family: var(--fu-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--fu-text-main);
    margin-bottom: 18px;
}

.fu-contact-card input[type="text"],
.fu-contact-card input[type="email"],
.fu-contact-card textarea {
    width: 100%;
    background-color: #ffffff !important;
    border: 1px solid var(--fu-border-color) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: var(--fu-text-main) !important;
    font-family: var(--fu-font-body) !important;
    font-size: 16px !important; /* Increased input font size */
    margin-top: 8px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.fu-contact-card input[type="text"]:focus,
.fu-contact-card input[type="email"]:focus,
.fu-contact-card textarea:focus {
    outline: none !important;
    border-color: var(--fu-accent) !important;
    box-shadow: 0 0 0 3px var(--fu-accent-light) !important;
}

.fu-contact-card textarea {
    min-height: 180px;
    resize: vertical;
}

/* Submit Button Override to match primary action buttons */
.fu-contact-card input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fu-accent) !important;
    color: #ffffff !important;
    font-family: var(--fu-font-heading) !important;
    font-weight: 700 !important;
    padding: 14px 36px !important;
    border-radius: 12px !important;
    border: 1px solid var(--fu-accent) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
    font-size: 15px !important;
}

.fu-contact-card input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    background: var(--fu-accent-hover) !important;
    border-color: var(--fu-accent-hover) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25) !important;
}

@media (max-width: 768px) {
    .fu-contact-card {
        padding: 24px;
        border-radius: 12px;
        margin-top: 24px;
    }
}

.fu-founder-info p {
    color: var(--fu-accent);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.fu-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.fu-value-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid var(--fu-border-color);
    box-shadow: var(--fu-card-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.fu-value-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.15);
}

.fu-value-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
}

.fu-value-card p {
    color: var(--fu-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.fu-value-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.06);
    color: var(--fu-accent);
    font-family: var(--fu-font-heading);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

/* ─── Core Tool Theme Accent Overrides ────────────────────────────────────── */
.fu-tool-wrapper {
    --fu-accent: #2563eb !important;
    --fu-accent-hover: #1d4ed8 !important;
    --fu-accent-light: rgba(37, 99, 235, 0.06) !important;
}

/* Cohesive Related Tool Cards */
.fu-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Force exactly 3 columns on desktop */
    gap: 24px !important;
    margin-top: 24px !important;
}

.fu-related-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important; /* Solid white background! */
    border: 1px solid var(--fu-border-color) !important;
    box-shadow: var(--fu-card-shadow) !important; /* Standard card shadow! */
    border-radius: 12px !important;
    padding: 18px 24px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.fu-related-card .fu-related-title {
    font-family: var(--fu-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--fu-text-main) !important;
    white-space: nowrap !important; /* Prevent text wrapping! */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Truncate if title is extremely long */
}

.fu-related-card:hover {
    border-color: rgba(37, 99, 235, 0.25) !important;
    box-shadow: var(--fu-card-shadow-hover) !important; /* Elevate shadow on hover */
    transform: translateY(-2px) !important;
}

.fu-related-arrow {
    color: var(--fu-accent) !important;
    font-weight: 700 !important;
    transition: transform 0.2s ease !important;
}

.fu-related-card:hover .fu-related-arrow {
    transform: translateX(4px) !important; /* Slide arrow right on hover */
}

@media (max-width: 768px) {
    .fu-related-grid {
        grid-template-columns: 1fr !important; /* Stack columns on mobile */
        gap: 16px !important;
    }
    .fu-related-card {
        padding: 16px 20px !important;
    }
}

/* Privacy lock icon styling */
.fu-privacy-badge .fu-privacy-icon {
    display: inline-flex;
    align-items: center;
    color: var(--fu-text-muted);
    margin-right: 4px;
}
.fu-privacy-badge .fu-privacy-icon svg {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ─── Premium Footer Layout overrides (4 Columns) ────────────────────────── */
.footer-widgets {
    background-color: #ffffff !important;
    border-top: none !important; /* Prevent double-border overlap with content cards */
    padding: 60px 0 20px !important;
}

/* Footer Brand Logo styling matching header */
.footer-logo {
    font-family: 'Pacifico', cursive !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 0 0 16px 0 !important;
}

.footer-logo a {
    color: #2563eb !important; /* Matches brand blue */
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.footer-logo a:hover {
    opacity: 0.85;
}

.footer-widgets .inside-footer-widgets {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr 1fr !important;
    gap: 40px !important;
}

.footer-widgets .widget {
    margin-bottom: 32px;
}

.footer-widgets .widget:last-child {
    margin-bottom: 0;
}

.footer-widgets .widget-title {
    font-family: var(--fu-font-body) !important;
    font-size: 13px;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fu-text-main);
    margin-bottom: 20px;
}

.footer-widgets ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widgets ul li {
    margin-bottom: 12px;
    padding: 0;
}

.footer-widgets ul li a {
    font-family: var(--fu-font-body) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--fu-text-muted) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-widgets ul li a:hover {
    color: var(--fu-accent) !important;
}

.footer-widgets ul li.fu-coming-soon-menu-item a {
    color: #9ca3af !important;
    font-style: italic;
    cursor: default;
    pointer-events: none;
}

.footer-widgets .textwidget p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fu-text-muted);
}

.site-footer {
    background-color: #ffffff !important;
    border-top: none !important;
    color: var(--fu-text-muted) !important;
    padding: 0 !important;
}

.site-info {
    font-size: 13px;
    font-family: var(--fu-font-body);
}

.site-info .inside-site-info {
    border-top: 1px solid var(--fu-border-color) !important;
    padding: 20px 0 !important;
}

/* ─── Responsive Media Queries ───────────────────────────────────────────── */
@media (max-width: 992px) {
    .archive .site-main,
    .blog .site-main {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fu-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-widgets .inside-footer-widgets {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 768px) {
    .archive .site-main,
    .blog .site-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .archive .inside-article,
    .blog .inside-article {
        padding: 24px !important;
        border-radius: 12px;
    }
    
    .single .inside-article,
    .page .inside-article {
        padding: 40px 16px 60px 16px !important;
        border-radius: 0 !important;
    }
    
    .fu-tool-wrapper {
        padding: 20px !important;
        border-radius: 12px !important;
        margin: 20px 0 !important;
    }
    
    .archive .entry-title,
    .blog .entry-title {
        font-size: 18px !important;
    }
    
    .single .entry-header h1,
    .page .entry-header h1 {
        font-size: 28px;
    }
    
    .fu-home-hero h1 {
        font-size: 32px;
    }
    
    .fu-tool-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .fu-founder-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px;
    }
    
    .fu-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .footer-widgets .inside-footer-widgets {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}