/*
Theme Name: Jimenez Consulting Pro
Theme URI:
Author: Jimenez Consulting
Author URI:
Description: Custom WordPress theme based on "The Architectural Ledger" design system. Built with Tailwind v3.
Version: 3.0.5
Text Domain: jimenez-consulting
*/

/* --- THE ARCHITECTURAL LEDGER: GLOBAL STYLE TOKENS --- */

/* Native Fonts & Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
    color: #b09b5a; /* Muted Gold */
}

/* ============================================================
   ACCESSIBILITY: color-contrast fix (July 2026 — PageSpeed/
   Lighthouse flagged dozens of "insufficient contrast" text
   elements sitewide, all sharing the same root cause: the
   .text-on-surface-variant utility (#554242, 9.36:1 on white on
   its own — plenty of contrast) combined with Tailwind's
   .opacity-60 / .opacity-70 utilities, which fade it to only
   3.17:1 / 4.07:1 — both below the 4.5:1 WCAG AA minimum for
   normal text. .opacity-80 and up were already fine (5.3:1+) and
   are left untouched.
   Fixing this in CSS (raising the effective opacity for just this
   color) instead of editing ~180 individual class="" attributes
   across 55 template files, since it's the exact same visual
   color/utility combination everywhere. A plain two-class selector
   like this outweighs Tailwind's single-class opacity utility in
   specificity, so no !important needed. */
.text-on-surface-variant.opacity-60,
.text-on-surface-variant.opacity-70 {
    opacity: 0.85; /* → 6.13:1, comfortably passes WCAG AA */
}

/* Same audit: the footer's "SERVICES / HOURS / CONNECT / CONTACT"
   headings and the "9:00 AM — 5:00 PM" hours text used .text-secondary
   (#7e5711) directly on the dark maroon footer background (bg-primary,
   #5c0b1a) — only 2.15:1, badly failing. #7e5711 is a fine gold accent
   on light backgrounds elsewhere on the site, just not on this dark
   one. .text-secondary-fixed-dim would be the semantically "correct"
   Material Design 3 token for gold-on-dark (already in
   tailwind.config.js), but it was never actually used anywhere so
   Tailwind's production build never compiled the utility class for
   it — adding it here directly avoids a full theme CSS rebuild. */
.text-footer-accent {
    color: #f2be70; /* secondary-fixed-dim → 8.15:1 on bg-primary */
}

/* Glassmorphism Navigation */
.glass-nav {
    background: rgba(248, 249, 252, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Tonal Elevation (No-Line Rule) */
.ghost-border {
    border: 1px solid rgba(219, 192, 192, 0.15); /* outline-variant @ 15% opacity */
}

.ghost-border:focus-within {
    border-color: #7e5711; /* Gold Accent on Focus */
    box-shadow: 0 0 0 4px rgba(122, 35, 46, 0.05); /* Subtle Burgundy Glow */
}

/* Editorial Depth */
.editorial-shadow {
    box-shadow: 0 12px 40px rgba(122, 35, 46, 0.06); /* Burgundy-tinted ambient shadow */
}

/* Interactive Elements */
.btn-hover-burgundy:hover {
    background-color: #40000c; /* Deep Burgundy */
    box-shadow: 0 8px 24px rgba(64, 0, 12, 0.2);
    transform: translateY(-2px);
}

.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide scrollbar for carousel */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Dashboard & Portal Specifics */
.step-active { color: #7e5711; }
.step-line-active { background-color: #7e5711; }

.font-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
}

/* --- High-Fidelity Animations --- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in-from-top { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-in-from-bottom { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-in-from-left { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slide-in-from-right { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.animate-in {
    animation-fill-mode: both;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in { animation-name: fade-in; }
.slide-in-from-top { animation-name: slide-in-from-top; }
.slide-in-from-bottom { animation-name: slide-in-from-bottom; }
.slide-in-from-left { animation-name: slide-in-from-left; }
.slide-in-from-right { animation-name: slide-in-from-right; }
.animate-bounce-subtle { animation: bounce-subtle 4s ease-in-out infinite; }