/*
Theme Name: Francisco Dev
Theme URI: https://francisco.dev
Author: Francisco Silva
Author URI: https://francisco.dev
Description: Custom freelancer portfolio theme for Francisco Silva - Senior WordPress Developer
Version: 1.0.29
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: francisco-dev
GitHub Theme URI: franciscocsilva26/francisco-dev
Primary Branch: main
Release Asset: false
*/

/* ═══════════════════════════════════════════
   Theme Variables — Light / Dark
   ═══════════════════════════════════════════ */
:root {
    --bg-body: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-section-alt: #f8fafc;
    --bg-footer: #fafbfc;
    --bg-input: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-card: rgba(0, 9, 95, 0.08);
    --border-subtle: rgba(0, 9, 95, 0.05);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(0, 9, 95, 0.12);
    --hero-glow-color: rgba(0, 9, 95, 0.04);
    --accent-text: #00095f;
    --accent-gradient-from: #00095f;
    --accent-gradient-to: #00b37f;
}

html.dark {
    --bg-body: #0a0a1a;
    --bg-card: rgba(31, 31, 32, 0.6);
    --bg-section-alt: rgba(255, 255, 255, 0.02);
    --bg-footer: #080818;
    --bg-input: rgba(10, 10, 26, 0.5);
    --text-primary: #ffffff;
    --text-secondary: #a1a1b5;
    --text-muted: #9ca3af;
    --border-card: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(22, 247, 176, 0.15);
    --hero-glow-color: rgba(0, 9, 95, 0.15);
    --accent-text: #16f7b0;
    --accent-gradient-from: #16f7b0;
    --accent-gradient-to: #00d99a;
}

/* ═══════════════════════════════════════════
   Base
   ═══════════════════════════════════════════ */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   Glass Card — themed
   ═══════════════════════════════════════════ */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════════
   Themed text utilities
   ═══════════════════════════════════════════ */
.t-heading  { color: var(--text-primary); }
.t-body     { color: var(--text-secondary); }
.t-muted    { color: var(--text-muted); }
.t-accent   { color: var(--accent-text); }

.accent-gradient {
    background: linear-gradient(135deg, var(--accent-gradient-from) 0%, var(--accent-gradient-to) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════
   Themed section backgrounds
   ═══════════════════════════════════════════ */
.section-alt    { background: var(--bg-section-alt); }
.section-footer { background: var(--bg-footer); }
.section-border { border-color: var(--border-card); }
.border-themed  { border-color: var(--border-card); }
.border-subtle  { border-color: var(--border-subtle); }
.bg-input       { background: var(--bg-input); }

/* ═══════════════════════════════════════════
   Logo toggle
   ═══════════════════════════════════════════ */
.logo-light { display: block; }
.logo-dark  { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark  { display: block; }

/* ═══════════════════════════════════════════
   Text selection — secondary brand color
   ═══════════════════════════════════════════ */
::selection {
    background-color: #16f7b0;
    color: #000420;
}
::-moz-selection {
    background-color: #16f7b0;
    color: #000420;
}

/* ═══════════════════════════════════════════
   Accessibility: Focus styles
   ═══════════════════════════════════════════ */
*:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.5rem;
    background: #00095f;
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
}
.skip-to-content:focus {
    left: 0;
}

/* ═══════════════════════════════════════════
   Client logos — force visibility in both modes
   ═══════════════════════════════════════════ */
/* Logo cell — a fixed-size slot used inside both the desktop wrapping
   grid and the mobile carousel. Sizing in pure CSS so it doesn't depend
   on Tailwind CDN JIT timing (which had been leaving cells unsized). */
.fdev-logo-cell {
    width: 9rem;          /* 144px — keeps logos at a consistent size */
    height: 3.5rem;       /* 56px tall slot */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;       /* centred inside a carousel slide */
}
.fdev-logo-cell img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Desktop (>=1024px): override the carousel layout into a wrapping flex
   grid so all logos render at once, no controls. Controls are also
   hidden by the JS because perViewLg covers the full item count. */
@media (min-width: 1024px) {
    .fdev-logos-carousel .fdev-carousel-viewport { overflow: visible; }
    .fdev-logos-carousel .fdev-carousel-track {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 2.5rem;
        row-gap: 2rem;
        transform: none !important;     /* defeat the JS translateX */
        transition: none !important;
    }
    .fdev-logos-carousel .fdev-carousel-slide {
        flex: 0 0 9rem;                  /* match .fdev-logo-cell width */
        padding: 0;
    }
}
/* Mobile/tablet (<1024px): per-breakpoint slide width matches perView
   data attributes on the logos carousel (3 mobile, 5 tablet). The base
   .fdev-carousel-slide rule defaults to 1/2/3 — too few for logos. */
.fdev-logos-carousel .fdev-carousel-slide {
    flex-basis: 33.3333%; /* 3 per page on mobile */
    padding: 0.5rem 0.5rem;
}
@media (min-width: 768px) {
    .fdev-logos-carousel .fdev-carousel-slide {
        flex-basis: 20%;  /* 5 per page on tablet */
    }
}

.client-logo {
    opacity: 0.5;
}
/* Light mode: darken logos, blend away white backgrounds */
.client-logo img {
    filter: brightness(0);
    mix-blend-mode: multiply;
}
/* Dark mode: lighten logos, blend away dark backgrounds */
html.dark .client-logo img {
    filter: brightness(0) invert(1);
    mix-blend-mode: screen;
}
/* Logos that need invert (e.g. OWL) */
.client-logo--invert img {
    filter: brightness(1) invert(1);
}
html.dark .client-logo--invert img {
    filter: brightness(1) invert(1);
}
/* Logos whose source is multi-colour or has a non-transparent background
   (e.g. Baher JPEG, Go Banana multi-colour SVG). The default
   brightness(0) + multiply destroys them; full colour clashes with the
   rest. Compromise: desaturate to grayscale and drop the multiply blend
   so they sit alongside the others without breaking. For a perfectly
   clean look the source files need transparent backgrounds. */
.client-logo--natural img,
html.dark .client-logo--natural img {
    filter: grayscale(1);
    mix-blend-mode: normal;
}

/* ═══════════════════════════════════════════
   Brand buttons — CSS fallback for Tailwind CDN
   ═══════════════════════════════════════════ */
.bg-brand-500 { background-color: #00095f; }
.bg-brand-600 { background-color: #000850; }
.text-white { color: #ffffff; }
.hover\:bg-brand-600:hover { background-color: #000850; }

/* ═══════════════════════════════════════════
   Pricing cards
   ═══════════════════════════════════════════ */
.pricing-card {
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
}
.pricing-card:hover {
    transform: translateY(-2px);
}
/* ═══════════════════════════════════════════
   Scroll reveal animations
   ═══════════════════════════════════════════ */
.lumio-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lumio-reveal.lumio-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children in grids */
.lumio-reveal:nth-child(2) { transition-delay: 0.08s; }
.lumio-reveal:nth-child(3) { transition-delay: 0.16s; }
.lumio-reveal:nth-child(4) { transition-delay: 0.24s; }
.lumio-reveal:nth-child(5) { transition-delay: 0.32s; }
.lumio-reveal:nth-child(6) { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════
   Article content (single.php)
   ═══════════════════════════════════════════ */
.fdev-article-content {
    font-size: 1.0625rem;
    line-height: 1.8;
}
.fdev-article-content > * + * {
    margin-top: 1.25rem;
}
.fdev-article-content p {
    color: var(--text-secondary);
}
.fdev-article-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.fdev-article-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.fdev-article-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.fdev-article-content a {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.fdev-article-content a:hover {
    text-decoration-thickness: 2px;
}
.fdev-article-content strong {
    color: var(--text-primary);
    font-weight: 700;
}
.fdev-article-content ul,
.fdev-article-content ol {
    padding-left: 1.5rem;
    color: var(--text-secondary);
}
.fdev-article-content ul { list-style: disc; }
.fdev-article-content ol { list-style: decimal; }
.fdev-article-content li + li { margin-top: 0.4rem; }
.fdev-article-content blockquote {
    border-left: 3px solid var(--accent-text);
    padding: 0.25rem 1.25rem;
    font-style: italic;
    color: var(--text-primary);
    margin: 1.5rem 0;
}
.fdev-article-content code {
    background: var(--bg-input);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--accent-text);
}
.fdev-article-content pre {
    background: var(--bg-input);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}
.fdev-article-content pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
}
.fdev-article-content img,
.fdev-article-content figure {
    border-radius: 8px;
    margin: 1.5rem 0;
}
.fdev-article-content figure figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.5rem;
}
.fdev-article-content hr {
    border: none;
    border-top: 1px solid var(--border-card);
    margin: 2rem 0;
}

/* ═══════════════════════════════════════════
   About photo — force top-align crop
   ═══════════════════════════════════════════ */
#about .object-cover {
    object-position: top;
}

/* ═══════════════════════════════════════════
   Table of Contents (single post sidebar)
   ═══════════════════════════════════════════ */
.fdev-toc-link {
    transition: color 0.2s ease, border-color 0.2s ease;
}
.fdev-toc-link.is-active {
    color: var(--accent-text);
    border-left-color: var(--accent-text);
    font-weight: 600;
}
.fdev-article-content h2,
.fdev-article-content h3 {
    scroll-margin-top: 96px;
}

/* ═══════════════════════════════════════════
   Portfolio: NDA masonry columns
   ═══════════════════════════════════════════ */
.portfolio-nda-grid {
    column-count: 2;
    column-gap: 12px;
}
@media (min-width: 768px) {
    .portfolio-nda-grid { column-count: 3; }
}
@media (min-width: 1024px) {
    .portfolio-nda-grid { column-count: 4; }
}
.portfolio-nda-card {
    break-inside: avoid;
    margin-bottom: 12px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lumio-reveal { opacity: 1; transform: none; transition: none; }
}

.maintenance-card {
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* ═══════════════════════════════════════════
   Portfolio
   ═══════════════════════════════════════════ */
.portfolio-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.portfolio-item.hidden-filter {
    display: none;
}

/* ═══════════════════════════════════════════
   Form validation
   ═══════════════════════════════════════════ */
.form-field-error {
    border-color: #ef4444 !important;
}
.form-error-message {
    color: #f87171;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.form-success-overlay {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   Mobile menu
   ═══════════════════════════════════════════ */
#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}
#mobile-menu.menu-open {
    display: block;
}

/* ═══════════════════════════════════════════
   Theme toggle button
   ═══════════════════════════════════════════ */
.theme-toggle {
    transition: transform 0.3s ease;
}
.theme-toggle:hover {
    transform: rotate(15deg);
}
/* Icon visibility. Custom classes (not Tailwind's hidden / dark:inline)
   because Font Awesome's CSS is enqueued after the Tailwind build and
   their .fa-solid { display: inline-block } overrode .hidden at equal
   specificity. style.css loads last, so these rules win. */
.theme-toggle-icon-sun  { display: none; }
.theme-toggle-icon-moon { display: inline-block; }
html.dark .theme-toggle-icon-sun  { display: inline-block; }
html.dark .theme-toggle-icon-moon { display: none; }

/* ═══════════════════════════════════════════
   Carousel (testimonials, etc.)
   ═══════════════════════════════════════════ */
.fdev-carousel { position: relative; }
.fdev-carousel-viewport {
    overflow: hidden;
}
.fdev-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}
.fdev-carousel-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 1rem 0.75rem;
    display: flex;
}
.fdev-carousel-slide > * { width: 100%; }
@media (min-width: 768px) {
    .fdev-carousel-slide { flex-basis: 50%; }
}
@media (min-width: 1024px) {
    .fdev-carousel-slide { flex-basis: 33.3333%; }
}

.fdev-carousel-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 2rem;
}
.fdev-carousel-controls[hidden] { display: none; }
.fdev-carousel-arrow {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-card);
    cursor: pointer; transition: background .15s, color .15s, opacity .15s;
}
.fdev-carousel-arrow:hover { background: var(--bg-input); }
.fdev-carousel-arrow:disabled {
    opacity: 0.35; cursor: not-allowed;
}
.fdev-carousel-dots {
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.fdev-carousel-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 9999px;
    border: 0; padding: 0;
    background: var(--border-card);
    cursor: pointer; transition: background .15s, transform .15s;
}
.fdev-carousel-dot:hover { background: var(--text-muted); }
.fdev-carousel-dot.is-active {
    background: var(--accent-text);
    transform: scale(1.3);
}