/*
Theme Name: Fred Mercedes Theme
Theme URI: https://fredmercedes.com
Author: Blue Beacon Creative
Author URI: https://bluebeaconcreative.com
Description: Tailwind-to-WordPress conversion theme for Fred Mercedes portfolio. Uses ACF Pro blocks with Tailwind CSS. Portfolio site for Senior UX Designer & Product Builder.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fred-mercedes-theme
Tags: tailwind, acf, custom-blocks, portfolio, landing-page

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   THEME STYLES
   
   This theme uses Tailwind CSS as the primary styling framework.
   
   This file contains:
   1. Custom @font-face declarations (Helvena)
   2. Custom utility classes that extend Tailwind
   3. Component-specific styles (filters, project rows, carousel, etc.)
   4. Editor/admin overrides are in assets/css/editor-overrides.css
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM FONTS - Helvena
   ========================================================================== */

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Extralight.woff2') format('woff2'),
        url('assets/fonts/Helvena-Extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Light.woff2') format('woff2'),
        url('assets/fonts/Helvena-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Regular.woff2') format('woff2'),
        url('assets/fonts/Helvena-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Medium.woff2') format('woff2'),
        url('assets/fonts/Helvena-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Semibold.woff2') format('woff2'),
        url('assets/fonts/Helvena-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Bold.woff2') format('woff2'),
        url('assets/fonts/Helvena-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Extrabold.woff2') format('woff2'),
        url('assets/fonts/Helvena-Extrabold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvena';
    src: url('assets/fonts/Helvena-Black.woff2') format('woff2'),
        url('assets/fonts/Helvena-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. CUSTOM UTILITY CLASSES
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Helvena for headlines */
.font-display {
    font-family: 'Helvena', system-ui, sans-serif;
}

/* ==========================================================================
   BRAND ACCENT COLORS — Pinbly Blue (#0623DA)
   ========================================================================== */

.text-accent { color: #0623DA; }
.bg-accent { background-color: #0623DA; }
.border-accent { border-color: #0623DA; }
.hover\:text-accent:hover { color: #0623DA; }
.hover\:bg-accent:hover { background-color: #0623DA; }
.hover\:bg-accent-hover:hover { background-color: #041da0; }
.bg-accent-light { background-color: #e8ebfc; }

/* Dark section background */
.bg-dark { background: #0B0D12; }
.bg-dark-gradient {
    background: linear-gradient(135deg, #0B0D12 0%, #131620 50%, #0B0D12 100%);
}

/* ==========================================================================
   3. HERO BLOCK STYLES
   ========================================================================== */

/* Hero headline — italic text becomes accent-colored (blue) */
.fm-hero-headline em,
h1.fm-hero-headline em {
    font-family: 'Helvena', system-ui, sans-serif;
    font-style: italic;
    color: #0623DA;
}

/* ==========================================================================
   4. COMPONENT-SPECIFIC STYLES — Fred Mercedes Portfolio
   ========================================================================== */

/* ── Filter Buttons (Projects + Brand Strategy + Case Studies) ── */
.filter-btn,
.brand-filter-btn,
.cs-filter-btn {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-btn.active,
.brand-filter-btn.active,
.cs-filter-btn.active {
    background: #0623DA;
    color: #fff;
    border-color: #0623DA;
}

/* ── Project Rows (All Projects table) ── */
.project-row {
    border-bottom: 1px solid #e5e5e5;
    transition: background-color 0.2s ease;
}

.project-row:hover {
    background: #fafafa;
}

.project-row:last-child {
    border-bottom: none;
}

/* ── Carousel ── */
.carousel-track {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot.active {
    background: #0623DA;
}

/* ── Mega Menu (Work dropdown) ── */
.mega-menu-panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.group:hover .mega-menu-panel {
    opacity: 1;
    visibility: visible;
}

/* ── Stat Counter Animation ── */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Testimonial Cards ── */
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
}

/* ── Brand Logo Grid Items ── */
.brand-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-item.filter-hidden {
    display: none !important;
}

/* ── Credential / Award Cards ── */
.credential-card {
    transition: transform 0.3s ease;
}

.credential-card:hover {
    transform: translateY(-2px);
}

/* ── Writing / Article Cards ── */
.article-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-4px);
}

/* ── Skills Tags ── */
.skill-tag {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.skill-tag:hover {
    background: #0623DA;
    color: #fff;
    border-color: #0623DA;
}

/* ==========================================================================
   5. ANIMATION UTILITIES
   ========================================================================== */

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }

/* ==========================================================================
   6. FOOTER STYLES
   ========================================================================== */

/* Footer accordion (mobile) - reusable from Pinbly */
.footer-accordion-content.hidden {
    display: none;
}


/* ==========================================================================
   7. BLOG STYLES
   ========================================================================== */

/* ── Filter Pills ── */
.blog-filter-pill {
    color: #6b7280;
    background: transparent;
    border-color: #e5e7eb;
    cursor: pointer;
}

.blog-filter-pill:hover {
    color: #0623DA;
    border-color: #0623DA;
}

.blog-filter-pill.active {
    color: #fff;
    background: #0623DA;
    border-color: #0623DA;
}

/* ── Blog Cards ── */
.blog-card {
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
}

/* JS filtering: hide cards that don't match the selected category */
.blog-card.filter-hidden {
    display: none !important;
}

/* Hero hidden by filter */
#blogHeroPost.filter-hidden {
    display: none !important;
}


/* ── Pagination ── */
.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: #6b7280;
}

.blog-pagination a:hover {
    color: #0623DA;
    background: rgba(6, 35, 218, 0.06);
}

.blog-pagination .current {
    color: #fff;
    background: #0623DA;
}

.blog-pagination .prev,
.blog-pagination .next {
    font-weight: 600;
    color: #0623DA;
}

.blog-pagination .dots {
    color: #d1d5db;
}


/* ── Table of Contents (single post sidebar) ── */

/* ScrollTrigger pin adds inline transforms — keep width stable */
#blogTOC {
    width: 200px;
}

/* Prevent ScrollTrigger pin-spacer from breaking grid layout */
#blogTOCAside > .pin-spacer {
    width: 200px !important;
    min-width: 0 !important;
}

.blog-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Continuous left rail */
.blog-toc-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
    border-radius: 1px;
}

/* Each TOC item */
.blog-toc-list li {
    position: relative;
    padding-left: 16px;
}

/* Active accent indicator overlays the rail */
.blog-toc-list li.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: #0623DA;
    border-radius: 1px;
    z-index: 1;
}

/* TOC links */
.blog-toc-list a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s ease;
}

.blog-toc-list a:hover {
    color: #374151;
}

.blog-toc-list li.active a,
.blog-toc-list a.active {
    color: #111827;
    font-weight: 600;
}


/* ── Prose Typography ── */
.blog-prose {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #374151;
}

.blog-prose > * + * {
    margin-top: 1.5em;
}

.blog-prose h2 {
    font-family: 'Helvena', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    letter-spacing: -0.01em;
    scroll-margin-top: 120px;
}

.blog-prose h3 {
    font-family: 'Helvena', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.blog-prose h4 {
    font-family: 'Helvena', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.blog-prose p {
    margin-top: 1.25em;
    margin-bottom: 0;
}

.blog-prose a {
    color: #0623DA;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.blog-prose a:hover {
    color: #041da0;
}

.blog-prose strong {
    font-weight: 600;
    color: #111827;
}

.blog-prose blockquote {
    border-left: 3px solid #0623DA;
    padding-left: 1.25em;
    margin-left: 0;
    margin-right: 0;
    color: #6b7280;
    font-style: italic;
}

.blog-prose ul,
.blog-prose ol {
    padding-left: 1.5em;
}

.blog-prose ul {
    list-style-type: disc;
}

.blog-prose ol {
    list-style-type: decimal;
}

.blog-prose li {
    margin-top: 0.5em;
}

.blog-prose li::marker {
    color: #9ca3af;
}

.blog-prose code {
    font-size: 0.9em;
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    color: #0623DA;
    font-weight: 500;
}

.blog-prose pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.25em 1.5em;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.7;
}

.blog-prose pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-weight: normal;
}

.blog-prose img {
    border-radius: 0.75rem;
    margin-top: 2em;
    margin-bottom: 2em;
}

.blog-prose figure {
    margin-top: 2em;
    margin-bottom: 2em;
}

.blog-prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 0.5em;
}

.blog-prose hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 3em 0;
}

.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin-top: 2em;
    margin-bottom: 2em;
}

.blog-prose th,
.blog-prose td {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75em 1em;
    text-align: left;
}

.blog-prose th {
    font-weight: 600;
    color: #111827;
    background: #f9fafb;
}

.blog-prose .wp-block-image {
    margin-top: 2em;
    margin-bottom: 2em;
}

.blog-prose .wp-block-image img {
    border-radius: 0.75rem;
}