/*
Theme Name: Fedomu 2026
Theme URI: https://fedomu.org.do
Author: Fedomu Tech Team
Author URI: https://fedomu.org.do
Description: Tema Classic de alto rendimiento para la Federacion Dominicana de Municipios. Bloques dinamicos con PHP template hierarchy.
Version: 12.5.3
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fedomu-2025
Tags: custom-menu, custom-colors, editor-style, featured-images, full-width-template, one-column
*/

/* ==========================================================================
   Fedomu 2026 — Global Styles
   Classic theme with dynamic blocks + theme.json design tokens.
   CSS here is for: resets, complex animations, and utility patterns
   that cannot be expressed in theme.json.
   ========================================================================== */

/* --- Global Box-Sizing Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Horizontal Overflow Containment ---
   Design constraint: full-bleed site with 100vw GSAP panels and decorative orbs.
   overflow-x: clip (not hidden) — no scroll container created, no GSAP interference.
   Applied to body (not html) to avoid CSS spec viewport transfer. */
body {
    overflow-x: clip;
}

/* --- Header Height Variable (used by templates for padding compensation) --- */
:root {
    --fedomu-header-h: 60px;
    /* Emil's custom easing curves — shared vocabulary, not shared style */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* UI snappy — entrances, hovers */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* movement — on-screen transforms */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like — drawers, modals */
}
.is-scrolled ~ main,
.is-scrolled ~ * {
    --fedomu-header-h: 48px;
}

/* --- Scroll Margin (prevent fixed header from covering anchor targets) --- */
[id] {
    scroll-margin-top: calc(var(--fedomu-header-h) + 1rem);
}

/* --- Grain Overlay (Performance-optimized) --- */
.fedomu-grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    will-change: auto;
}

/* --- Performance: Lazy-render below-fold sections --- */
#servicios,
#oficinas-regionales,
#proyectos,
.fedomu-below-fold,
.fedomu-impact-scroll,
.fedomu-stats-counter,
.fedomu-regdir,
.fedomu-pg-block,
.fedomu-svc-catalog-v2,
.fedomu-work,
.fedomu-news-grid,
.fedomu-footer,
.fedomu-contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}
/* Hide grain overlay on mobile (GPU savings) */
@media (max-width: 768px) {
    .fedomu-grain-overlay { display: none; }
}

/* --- Custom Scrollbar (Dark theme) --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}

/* --- Hidden Scrollbar (Carousels) --- */
.fedomu-hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.fedomu-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Expandable Line Decoration --- */
.fedomu-line-expand {
    height: 2px;
    width: 1.5rem;
    background-color: var(--wp--preset--color--fedomu-gold);
    transition: width 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .group:hover .fedomu-line-expand,
    *:hover > .fedomu-line-expand {
        width: 100%;
    }
}

/* --- Draggable Scroll Cursor --- */
.fedomu-draggable {
    cursor: grab;
}
.fedomu-draggable:active {
    cursor: grabbing;
}

/* --- Scroll Hint (right-edge fade for horizontal carousels) --- */
.fedomu-scroll-hint {
    position: relative;
}
.fedomu-scroll-hint::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3rem; height: 100%;
    pointer-events: none;
    z-index: 5;
}
.fedomu-scroll-hint--light::after {
    background: linear-gradient(to left, #fff, transparent);
}
.fedomu-scroll-hint--dark::after {
    background: linear-gradient(to left, var(--wp--preset--color--boulevard-dark), transparent);
}
.fedomu-scroll-hint--near-black::after {
    background: linear-gradient(to left, var(--wp--preset--color--near-black), transparent);
}
.fedomu-scroll-hint--blue::after {
    background: linear-gradient(to left, var(--wp--preset--color--boulevard-blue), transparent);
}
.fedomu-scroll-hint--no-overflow::after {
    display: none;
}

/* --- Micro Label Pattern --- */
.fedomu-micro-label {
    font-size: var(--wp--preset--font-size--micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* --- Animations --- */
@keyframes fedomu-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fedomu-ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.fedomu-animate-pulse {
    animation: fedomu-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.fedomu-animate-ping {
    animation: fedomu-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* --- Scroll Reveal System --- */
.fedomu-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.fedomu-reveal--visible { opacity: 1; transform: translateY(0); }
.fedomu-reveal--d0 { transition-delay: 0s; }
.fedomu-reveal--d1 { transition-delay: 0.1s; }
.fedomu-reveal--d2 { transition-delay: 0.2s; }
.fedomu-reveal--d3 { transition-delay: 0.3s; }
.fedomu-reveal--d4 { transition-delay: 0.4s; }
.fedomu-reveal--d5 { transition-delay: 0.5s; }
.no-js .fedomu-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fedomu-reveal {
        opacity: 1; transform: none;
        transition: none;
    }
}

/* --- Body Text Utilities --- */
.fedomu-body-serif {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: rgba(10,10,10,0.75);
    font-family: var(--wp--preset--font-family--serif);
}
.fedomu-body-serif p { margin: 0 0 1.75rem; }
.fedomu-body-serif p:last-child { margin-bottom: 0; }

/* --- Card Hover Effects --- */
.fedomu-card-lift {
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .fedomu-card-lift:hover {
        transform: translateY(-4px);
    }
}
.fedomu-card-lift:active {
    transform: scale(0.97);
}

/* --- Image Treatments --- */
.fedomu-hero-image {
    filter: brightness(0.65);
}
.fedomu-bg-image-overlay {
    filter: grayscale(1) contrast(1.25);
    mix-blend-mode: overlay;
    opacity: 0.4;
}

/* --- Gradient Overlays --- */
.fedomu-gradient-hero-lr {
    background: linear-gradient(to right, rgba(10,10,10,0.9), rgba(10,10,10,0.3), transparent);
}
.fedomu-gradient-hero-bt {
    background: linear-gradient(to top, #0a0a0a, transparent, transparent);
    opacity: 0.8;
}
.fedomu-gradient-card-bt {
    background: linear-gradient(to top, black, rgba(0,0,0,0.6), transparent);
    opacity: 0.9;
}

/* --- Reusable Card Shadow --- */
.fedomu-shadow-card {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1);
}

/* --- Backdrop Blur Utilities --- */
.fedomu-blur-sm { backdrop-filter: blur(4px); }
.fedomu-blur-md { backdrop-filter: blur(12px); }
.fedomu-blur-lg { backdrop-filter: blur(16px); }

/* --- Service Card Shadows (per theme) --- */
.fedomu-shadow-blue { box-shadow: 0 5px 20px -5px rgba(0,51,160,0.5); }
.fedomu-shadow-gold { box-shadow: 0 5px 20px -5px rgba(212,175,55,0.4); }
.fedomu-shadow-red { box-shadow: 0 5px 20px -5px rgba(196,30,58,0.5); }
.fedomu-shadow-dark { box-shadow: 0 5px 20px -5px rgba(0,0,0,0.5); }
.fedomu-shadow-teal { box-shadow: 0 5px 20px -5px rgba(0,128,128,0.5); }

/* --- Glowing Effect (Mouse Proximity) --- */
.fedomu-glow-container {
    position: relative;
}
.fedomu-glow-effect {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    background: radial-gradient(320px circle at var(--x, -1000px) var(--y, -1000px), #D4AF37 0%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
    .fedomu-glow-container:hover .fedomu-glow-effect {
        opacity: 1;
    }
}

/* --- Article Width Utility (Long-read pages: Historia, Presidente, etc.) --- */
.fedomu-article-width {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Reduced Motion Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    .fedomu-grain-overlay { display: none; }
    .fedomu-animate-pulse,
    .fedomu-animate-ping { animation: none; }
}

/* --- Screen Reader Text (a11y) --- */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background: #f1f1f1;
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* --- Global Focus-Visible (a11y) --- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--wp--preset--color--fedomu-gold);
    outline-offset: 2px;
}

/* --- Responsive Card Width (320px screens) --- */
.fedomu-card-responsive {
    width: min(240px, 80vw);
}
@media (min-width: 768px) {
    .fedomu-card-responsive { width: 260px; }
}

/* --- WordPress Block Editor Compatibility --- */
.wp-block-fedomu-hero,
.wp-block-fedomu-impact-scroll,
.wp-block-fedomu-services-carousel,
.wp-block-fedomu-work-carousel,
.wp-block-fedomu-news-widget,
.wp-block-fedomu-stats-counter,
.wp-block-fedomu-regional-offices,
.wp-block-fedomu-footer,
.wp-block-fedomu-page-header,
.wp-block-fedomu-news-hero,
.wp-block-fedomu-news-grid,
.wp-block-fedomu-projects-grid,
.wp-block-fedomu-service-process,
.wp-block-fedomu-services-catalog,
.wp-block-fedomu-institutional-content,
.wp-block-fedomu-contact-section,
.wp-block-fedomu-regional-directory {
    max-width: none !important;
}

/* --- Back-to-Top Button --- */
.fedomu-btt {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 100;
    width: 44px; height: 44px;
    border-radius: 50%; border: none; cursor: pointer;
    background: var(--wp--preset--color--fedomu-gold);
    color: var(--wp--preset--color--boulevard-dark);
    box-shadow: 0 4px 12px rgba(212,175,55,0.3);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(1rem);
    transition: opacity 0.3s, transform 0.3s, background 0.2s;
    pointer-events: none;
}
.fedomu-btt.is-visible {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.fedomu-btt:hover {
    background: var(--wp--preset--color--boulevard-blue);
    color: #fff;
}
.fedomu-btt:focus-visible {
    outline: 2px solid var(--wp--preset--color--boulevard-blue);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .fedomu-btt { transition: none; }
}