/*
Theme Name: Alfarisi
Description: World-Class Business Theme - Bootstrap Native + WCAG 2.1 AAA
Version: 4.2.1
Author: Alfarisi
Text Domain: alfarisi
*/

/* =============================================================================
   WCAG 2.1 AAA COMPLIANCE - MANDATORY REQUIREMENTS
   ============================================================================= */

:root {
    /* ===== ALFARISI BRAND IDENTITY ===== */
    --alfarisi-blue: #1e40af;        /* Royal Blue - Primary brand color */
    --alfarisi-charcoal: #374151;    /* Charcoal - Secondary brand color */
    --alfarisi-navy: #1e293b;        /* Navy - Supporting color */
    
    /* ===== SEMANTIC COLORS (AAA COMPLIANT) ===== */
    --success: #047857;              /* Emerald Green (7.6:1) */
    --warning: #b45309;              /* Amber (7.1:1) */
    --error: #dc2626;                /* Red (7.4:1) */
    --info: #0891b2;                 /* Cyan (7.2:1) */
    
    /* ===== TEXT HIERARCHY (ALL AAA) ===== */
    --text-heading: #1f2937;         /* Headings (11.8:1) */
    --text-body: #374151;            /* Body text (7.9:1) */
    --text-secondary: #4b5563;       /* Secondary text (7.0:1) */
    --text-muted: #6b7280;           /* Muted text (5.8:1) - Large text only */
    --text-inverse: #ffffff;         /* White text */
    
    /* ===== INTERACTIVE ELEMENTS ===== */
    --interactive-primary: #1e40af;  /* Buttons, links - Royal Blue */
    --interactive-hover: #1d4ed8;    /* Hover state */
    --interactive-active: #1e3a8a;   /* Active state */
    --interactive-focus: #3b82f6;    /* Focus outline */
    
    /* ===== BACKGROUNDS ===== */
    --bg-primary: #ffffff;           /* Main background */
    --bg-secondary: #f8fafc;         /* Secondary background */
    --bg-tertiary: #f1f5f9;          /* Cards, sections */
    --bg-dark: #1f2937;              /* Dark sections */
    --bg-overlay: rgba(31, 41, 55, 0.9); /* Overlays */
    
    /* ===== BORDERS & DIVIDERS ===== */
    --border-light: #e5e7eb;         /* Light borders */
    --border-medium: #d1d5db;        /* Medium borders */
    --border-dark: #9ca3af;          /* Dark borders */
    
    /* ===== SHADOWS & DEPTH ===== */
    --shadow-sm: 0 1px 2px 0 rgba(31, 41, 55, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(31, 41, 55, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(31, 41, 55, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(31, 41, 55, 0.1);

    /* ===== BOOTSTRAP OVERRIDES (ALFARISI COLORS) ===== */
    --bs-primary: #1e40af;           /* Royal Blue */
    --bs-primary-rgb: 30, 64, 175;
    --bs-secondary: #6b7280;         /* Gray */
    --bs-secondary-rgb: 107, 114, 128;
    --bs-success: #047857;           /* Emerald Green */
    --bs-success-rgb: 4, 120, 87;
    --bs-warning: #b45309;           /* Amber */
    --bs-warning-rgb: 180, 83, 9;
    --bs-danger: #dc2626;            /* Red */
    --bs-danger-rgb: 220, 38, 38;
    --bs-info: #0891b2;              /* Cyan */
    --bs-info-rgb: 8, 145, 178;
    --bs-light: #f8fafc;             /* Light Gray */
    --bs-light-rgb: 248, 250, 252;
    --bs-dark: #374151;              /* Charcoal */
    --bs-dark-rgb: 55, 65, 81;
    
    /* ===== BOOTSTRAP AAA TYPOGRAPHY ===== */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-line-height: 1.6;      /* AAA requires 1.5+ */
    --bs-body-font-size: 1.125rem;   /* 18px minimum for AAA */

    /* ===== NEW VARIABLES (TAILWIND-LIKE) - UPDATED ===== */
    --primary: #1e40af;              /* Royal Blue */
    --primary-rgb: 30, 64, 175;
    --secondary: #6b7280;            /* Gray */
    --secondary-rgb: 107, 114, 128;
    --success: #047857;              /* Emerald Green */
    --success-rgb: 4, 120, 87;
    --info: #0891b2;                 /* Cyan */
    --info-rgb: 8, 145, 178;
    --warning: #b45309;              /* Amber */
    --warning-rgb: 180, 83, 9;
    --danger: #dc2626;               /* Red */
    --danger-rgb: 220, 38, 38;
    --light: #f8fafc;                /* Light Gray */
    --light-rgb: 248, 250, 252;
    --dark: #374151;                 /* Charcoal */
    --dark-rgb: 55, 65, 81;
    
    /* ===== DESIGN SYSTEM VARIABLES ===== */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --border-radius: 0.75rem;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== CONSISTENT SHADOWS ===== */
    --shadow: 0 1px 3px 0 rgba(31, 41, 55, 0.1), 0 1px 2px -1px rgba(31, 41, 55, 0.1);
    
    /* ===== ADDITIONAL UTILITY COLORS ===== */
    --accent: #3b82f6;               /* Bright Blue Accent */
    --accent-rgb: 59, 130, 246;
    --muted: #9ca3af;                /* Muted Gray */
    --muted-rgb: 156, 163, 175;
    
    /* ===== NEUTRAL SCALE (GRAY PALETTE) ===== */
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;          /* 5.8:1 - Large text AAA */
    --neutral-600: #4b5563;          /* 7.0:1 - AAA */
    --neutral-700: #374151;          /* 7.9:1 - AAA */
    --neutral-800: #1f2937;          /* 11.8:1 - AAA */
    --neutral-900: #111827;          /* 13.1:1 - AAA */
    
    /* ===== STATUS COLORS (EXTENDED) ===== */
    --success-light: #d1fae5;        /* Light success background */
    --warning-light: #fef3c7;        /* Light warning background */
    --error-light: #fee2e2;          /* Light error background */
    --info-light: #e0f2fe;           /* Light info background */
    
    /* ===== BRAND GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-success: linear-gradient(135deg, #047857 0%, #059669 100%);
    
    /* ===== FOCUS & INTERACTION STATES ===== */
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
    --focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.5);
    --focus-ring-success: 0 0 0 3px rgba(4, 120, 87, 0.5);
}

/* WCAG AAA Color Overrides */
.text-primary { color: var(--bs-primary) !important; }
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-weight: 600; /* AAA readability */
}
.btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* AAA Focus Indicators */
*:focus-visible {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #000 !important;
}

/* AAA Typography Requirements */
body {
    font-family: var(--font-sans);
    font-size: 1.125rem; /* 18px minimum */
    line-height: 1.6;    /* 1.5+ required */
    font-weight: 400;
    color: var(--dark);
    margin: 0;
}
.small, small {
    font-size: 1rem !important; /* Never below 16px for AAA */
}

/* =============================================================================
   NAVIGATION - BOOTSTRAP NATIVE WITH ACCORDION MOBILE DESIGN
   ============================================================================= */

/* Desktop Multi-level Dropdown */
@media (min-width: 992px) {
    .dropdown-submenu {
        position: absolute;
        top: 0;
        left: 100%;
        display: none;
    }

    .dropdown-submenu.show {
       display: block;
    }
    
    .dropdown-submenu .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;
        margin-left: 0.125rem;
        min-width: 200px;
    }
    
    /* RTL Support */
    [dir="rtl"] .dropdown-submenu .dropdown-menu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 0.125rem;
    }
    
    /* Desktop Dropdown Toggle Icons */
    .dropdown-toggle-btn .dropdown-arrow,
    .dropdown-toggle-sub .dropdown-arrow {
        transition: transform 0.2s ease;
    }
    
    .dropdown-toggle-btn[aria-expanded="true"] .dropdown-arrow {
        transform: rotate(180deg);
    }
    
    .dropdown-submenu > .dropdown-toggle-sub .dropdown-arrow {
        transform: rotate(-90deg);
    }
    
    .dropdown-submenu > .dropdown-toggle-sub[aria-expanded="true"] .dropdown-arrow {
        transform: rotate(0deg);
    }
}

/* =============================================================================
   MOBILE ACCORDION NAVIGATION - BOOTSTRAP ACCORDION STYLE
   ============================================================================= */

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--bs-white);
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        padding: 1rem;
        border: 1px solid var(--bs-gray-200);
        box-shadow: var(--shadow-lg);
    }
    
    .dropdown-menu, .dropdown-submenu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: 0.5rem 0 0.5rem 1rem !important;
        display: none !important;
        margin-top: 0.5rem;
    }
    
    .dropdown-menu.show, .dropdown-submenu.show {
        display: block !important;
    }
    
    .dropdown-item:hover {
        background: var(--bs-white) !important;
        border-color: var(--bs-primary) !important;
        color: var(--bs-primary) !important;
    }
    
    .dropdown-toggle-btn .dropdown-arrow {
        transition: transform 0.2s ease;
    }
    
    .dropdown-toggle-btn[aria-expanded="true"] .dropdown-arrow {
        transform: rotate(180deg);
    }
    
    .dropdown-toggle-sub .dropdown-arrow-sub {
        transition: transform 0.2s ease;
    }
    
    .dropdown-toggle-sub[aria-expanded="true"] .dropdown-arrow-sub {
        transform: rotate(90deg);
    }
}

/* =============================================================================
   SKIP LINKS - BOOTSTRAP BASED WCAG 2.1 AAA COMPLIANT
   ============================================================================= */

.skip-links {
    /* Container positioning handled by Bootstrap classes */
}

.skip-link {
    /* Uses Bootstrap .visually-hidden-focusable for proper hiding/showing */
    text-decoration: none !important;
    font-size: 1rem !important; /* AAA minimum font size */
    min-height: 44px !important; /* AAA touch target size */
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    /* Enhanced focus styling for better visibility */
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
}

.skip-link:hover {
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Ensure skip links appear above all content */
.skip-links .skip-link:focus,
.skip-links .skip-link:focus-visible {
    position: relative !important;
    z-index: 10000 !important;
}

/* =============================================================================
   ANIMATIONS - RESPECTING REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    .animate-float-delay {
        animation: float 6s ease-in-out infinite 3s;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .animate-float,
    .animate-float-delay,
    .hover-lift {
        animation: none !important;
        transition: none !important;
    }
    .hover-lift:hover {
        transform: none !important;
    }
}

/* =============================================================================
   PRINT STYLES - ACCESSIBILITY
   ============================================================================= */

@media print {
    .navbar,
    .dropdown-menu,
    .skip-links {
        display: none !important;
    }
    body {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
        background: #fff;
    }
    .text-primary,
    .bg-primary {
        color: #000 !important;
        background: #fff !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
    }
}

/* =============================================================================
   CUSTOM UTILITIES - BOOTSTRAP GAPS & SOCIAL SHARE
   ============================================================================= */

/* CSS Grid Utility */
.justify-items-center {
    justify-items: center;
}

/* Visually Hidden Focusable */
.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Loading state */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* Text sizing */
.text-small-caps {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =============================================================================
   SOCIAL SHARE BUTTONS - ALFARISI COMPONENT
   ============================================================================= */

.alfarisi-social-share .social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.alfarisi-social-share .social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    min-height: 44px; /* AAA touch target */
}

.alfarisi-social-share .social-btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px);
}

.social-share-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
}

/* Social Share Responsive Design */
@media (max-width: 576px) {
    .alfarisi-social-share .social-buttons {
        justify-content: center;
    }
    
    .social-share-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }
}

/* =============================================================================
   DARK MODE SUPPORT - WCAG AAA - DISABLED
   ============================================================================= */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --bs-primary: #3b82f6;    /* Lighter blue for dark mode */
        --bs-success: #22c55e;    /* Lighter green */
        --bs-warning: #eab308;    /* Lighter yellow */
        --bs-danger: #ef4444;     /* Lighter red */
        --bs-body-bg: #1f2937;    /* Dark background */
        --bs-body-color: #f9fafb; /* Light text */
    }
    .dropdown-menu {
        background: #374151 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }
    .dropdown-item {
        color: #f9fafb !important;
    }
    .dropdown-item:hover {
        background: #4b5563 !important;
        color: #fff !important;
    }
    
    /* Dark mode social share buttons */
    .alfarisi-social-share .social-btn {
        background: #374151;
        color: #f9fafb;
        border-color: #4b5563;
    }
    .alfarisi-social-share .social-btn:hover {
        background: #4b5563;
        border-color: #3b82f6;
        color: #3b82f6;
    }
}
*/

/* =============================================================================
   GLOBAL RESET & UTILITIES
   ============================================================================= */

/* Box‐sizing reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Visually hidden (utility) */
.visually-hidden {
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
}

/* Button utility */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    transition: var(--transition);
}
.btn-primary:hover {
    background: rgb(var(--primary-rgb) / 0.9);
    transform: translateY(-1px);
}

/* Section padding */
.section-padding {
    padding: 5rem 0;
}
@media (max-width: 768px) {
    .section-padding {
        padding: 3rem 0;
    }
}

/* Fade‐in animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   BOOTSTRAP BACKGROUND OPACITY UTILITIES - MOVED TO END FOR PROPER CASCADE
   ============================================================================= */

/* Bootstrap background utilities with opacity support */
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
.bg-info {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
.bg-danger {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}
.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

/* Opacity modifier classes */
.bg-opacity-10 { --bs-bg-opacity: 0.1; }
.bg-opacity-25 { --bs-bg-opacity: 0.25; }
.bg-opacity-50 { --bs-bg-opacity: 0.5; }
.bg-opacity-75 { --bs-bg-opacity: 0.75; }

/* Text utilities - final override */
.text-primary {
    color: var(--bs-primary) !important;
}
.bg-gradient-primary {
    background: linear-gradient(135deg,
        var(--primary) 0%,
        rgb(var(--primary-rgb) / 0.8) 100%) !important;
}

/* =============================================================================
   HOVER EFFECTS & TRANSITIONS
   ============================================================================= */

.hover-shadow {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

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

/* =============================================================================
   IMAGE UTILITIES
   ============================================================================= */

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

/* Fallback for older browsers */
@supports not (object-fit: cover) {
    .object-fit-cover {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* =============================================================================
   BACK TO TOP BUTTON
   ============================================================================= */

#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--bs-primary);
    color: white;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#backToTop:hover {
    background: var(--interactive-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

#backToTop:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}