/**

 * ATRAHI Design - Core CSS Variables & Base Styles

 * WordPress 6.x Compatible - Modern CSS Architecture

 * 

 * @package ATH_ATRAHI_DESIGN

 * @version 3.0.0

 */



/* ============================================

   CSS CUSTOM PROPERTIES (Design Tokens)

   ============================================ */

:root {

    /* Colors - Brand */

    --ath-gold: #b99d63;

    --ath-gold-dark: #a08850;

    --ath-gold-light: #d4c49a;

    --ath-gold-rgb: 185, 157, 99;

    

    /* Colors - Neutral */

    --ath-dark: #1a1a1a;

    --ath-dark-secondary: #2d2d2d;

    --ath-dark-rgb: 26, 26, 26;

    

    /* Colors - Text */

    --ath-text: #333333;

    --ath-text-secondary: #555555;

    --ath-text-muted: #666666;

    --ath-text-light: #888888;

    

    /* Colors - Background */

    --ath-bg: #ffffff;

    --ath-bg-light: #f8f9fa;

    --ath-bg-dark: #1a1a1a;

    

    /* Colors - Border */

    --ath-border: #e9ecef;

    --ath-border-light: #f1f3f5;

    --ath-border-dark: #dee2e6;

    

    /* Typography */

    --ath-font-primary: 'Inter', 'Be Vietnam Pro', 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
    --ath-font-heading: var(--ath-font-primary);
    

    /* Font Sizes - Fluid */

    --ath-fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);

    --ath-fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);

    --ath-fs-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);

    --ath-fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);

    --ath-fs-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);

    --ath-fs-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);

    --ath-fs-3xl: clamp(2rem, 1.5rem + 2vw, 2.5rem);

    --ath-fs-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);

    --ath-fs-5xl: clamp(3rem, 2rem + 4vw, 4.5rem);

    

    /* Line Heights */

    --ath-lh-tight: 1.2;

    --ath-lh-base: 1.6;

    --ath-lh-loose: 1.8;

    

    /* Spacing */

    --ath-space-xs: 0.25rem;

    --ath-space-sm: 0.5rem;

    --ath-space-md: 1rem;

    --ath-space-lg: 1.5rem;

    --ath-space-xl: 2rem;

    --ath-space-2xl: 3rem;

    --ath-space-3xl: 4rem;

    --ath-space-4xl: 6rem;

    --ath-space-5xl: 8rem;

    

    /* Layout */

    --ath-container-sm: 640px;

    --ath-container-md: 768px;

    --ath-container-lg: 1024px;

    --ath-container-xl: 1200px;

    --ath-container-2xl: 1400px;

    --ath-gutter: clamp(1rem, 3vw, 2rem);

    

    /* Border Radius */

    --ath-radius-sm: 4px;

    --ath-radius-md: 8px;

    --ath-radius-lg: 12px;

    --ath-radius-xl: 16px;

    --ath-radius-2xl: 20px;

    --ath-radius-full: 9999px;

    

    /* Shadows */

    --ath-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

    --ath-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);

    --ath-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    --ath-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

    --ath-shadow-gold: 0 8px 32px rgba(185, 157, 99, 0.25);

    --ath-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);

    

    /* Transitions */

    --ath-transition-fast: 150ms ease;

    --ath-transition-base: 300ms ease;

    --ath-transition-slow: 500ms ease;

    

    /* Z-Index Scale */

    --ath-z-dropdown: 100;

    --ath-z-sticky: 200;

    --ath-z-fixed: 300;

    --ath-z-modal-backdrop: 400;

    --ath-z-modal: 500;

    --ath-z-tooltip: 600;

    

    /* Header Height */

    --ath-header-height: 80px;

    --ath-header-height-scrolled: 70px;

}



/* Dark Mode Variables - DISABLED
 * Website uses light theme only. Dark mode variables caused white text 
 * on white background when user's OS is in dark mode.
 * Background sections use hardcoded #fff/#f8f9fa but text inherited dark mode colors.
 */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --ath-bg: #1a1a1a;
        --ath-bg-light: #2d2d2d;
        --ath-text: #e9ecef;
        --ath-text-secondary: #adb5bd;
        --ath-border: #495057;
    }
}
*/



/* ============================================

   CSS RESET & BASE STYLES

   ============================================ */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

    font-size: 100%;

    line-height: 1.15;

}



body {

    font-family: var(--ath-font-primary);

    font-size: var(--ath-fs-base);

    line-height: var(--ath-lh-base);

    color: var(--ath-text);

    background-color: var(--ath-bg);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

}



/* Typography */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--ath-font-primary);

    font-weight: 700;

    line-height: var(--ath-lh-tight);

    color: var(--ath-dark);

    margin-bottom: var(--ath-space-md);

}



h1 { font-size: var(--ath-fs-4xl); }

h2 { font-size: var(--ath-fs-3xl); }

h3 { font-size: var(--ath-fs-2xl); }

h4 { font-size: var(--ath-fs-xl); }

h5 { font-size: var(--ath-fs-lg); }

h6 { font-size: var(--ath-fs-base); }



p {

    margin-bottom: var(--ath-space-md);

    color: var(--ath-text-secondary);

}



a {

    color: var(--ath-gold);

    text-decoration: none;

    transition: color var(--ath-transition-fast);

}



a:hover {

    color: var(--ath-gold-dark);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



ul, ol {

    list-style: none;

}



/* Selection */

::selection {

    background: var(--ath-gold);

    color: white;

}



/* Focus Styles */

:focus-visible {

    outline: 2px solid var(--ath-gold);

    outline-offset: 2px;

}



/* ============================================

   CONTAINER & LAYOUT

   ============================================ */

.container {

    width: 100%;

    max-width: var(--ath-container-xl);

    margin-inline: auto;

    padding-inline: var(--ath-gutter);

}



.container-sm { max-width: var(--ath-container-sm); }

.container-md { max-width: var(--ath-container-md); }

.container-lg { max-width: var(--ath-container-lg); }

.container-2xl { max-width: var(--ath-container-2xl); }



/* Section Spacing */

.section {

    padding-block: var(--ath-space-4xl);

}



.section-sm { padding-block: var(--ath-space-2xl); }

.section-lg { padding-block: var(--ath-space-5xl); }



/* Grid System */

.grid {

    display: grid;

    gap: var(--ath-space-lg);

}



.grid-2 { grid-template-columns: repeat(2, 1fr); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-6 { grid-template-columns: repeat(6, 1fr); }



@media (max-width: 1024px) {

    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .grid-3 { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 768px) {

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

}



/* Flex Utilities */

.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.justify-end { justify-content: flex-end; }

.gap-sm { gap: var(--ath-space-sm); }

.gap-md { gap: var(--ath-space-md); }

.gap-lg { gap: var(--ath-space-lg); }

.gap-xl { gap: var(--ath-space-xl); }



/* ============================================

   BUTTONS

   ============================================ */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--ath-space-sm);

    padding: 14px 28px;

    font-family: var(--ath-font-primary);

    font-size: var(--ath-fs-sm);

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    border: 2px solid transparent;

    border-radius: var(--ath-radius-md);

    cursor: pointer;

    transition: all var(--ath-transition-base);

    white-space: nowrap;

}



.btn-primary {

    background: var(--ath-gold);

    color: white;

    border-color: var(--ath-gold);

}



.btn-primary:hover {

    background: var(--ath-gold-dark);

    border-color: var(--ath-gold-dark);

    color: white;

    transform: translateY(-2px);

    box-shadow: var(--ath-shadow-gold);

}



.btn-secondary {

    background: var(--ath-dark);

    color: white;

    border-color: var(--ath-dark);

}



.btn-secondary:hover {

    background: var(--ath-dark-secondary);

    border-color: var(--ath-dark-secondary);

}



.btn-outline {

    background: transparent;

    color: var(--ath-gold);

    border-color: var(--ath-gold);

}



.btn-outline:hover {

    background: var(--ath-gold);

    color: white;

}

.btn-gold {

    background: linear-gradient(135deg, var(--ath-gold), #d4af37);

    color: #1a1a1a;

    border-color: transparent;

}

.btn-gold:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(185, 157, 99, 0.4);

    filter: brightness(1.05);

}

.btn-block {

    display: flex;

    width: 100%;

}



.btn-outline-white {

    background: transparent;

    color: white;

    border-color: rgba(255, 255, 255, 0.3);

}



.btn-outline-white:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: white;

    color: white;

}



.btn-lg {

    padding: 16px 36px;

    font-size: var(--ath-fs-base);

}



.btn-sm {

    padding: 10px 20px;

    font-size: var(--ath-fs-xs);

}



.btn-icon {

    width: 48px;

    height: 48px;

    padding: 0;

    border-radius: var(--ath-radius-full);

}



/* ============================================

   CARDS

   ============================================ */

.card {

    background: white;

    border-radius: var(--ath-radius-xl);

    overflow: hidden;

    box-shadow: var(--ath-shadow-card);

    transition: all var(--ath-transition-base);

}



.card:hover {

    transform: translateY(-5px);

    box-shadow: var(--ath-shadow-lg);

}



.card-image {

    position: relative;

    aspect-ratio: 4/3;

    overflow: hidden;

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform var(--ath-transition-slow);

}



.card:hover .card-image img {

    transform: scale(1.05);

}



.card-body {

    padding: var(--ath-space-lg);

}



.card-title {

    font-size: var(--ath-fs-lg);

    margin-bottom: var(--ath-space-sm);

}



.card-text {

    color: var(--ath-text-secondary);

    font-size: var(--ath-fs-sm);

}



/* ============================================

   BADGES

   ============================================ */

.badge {

    display: inline-flex;

    align-items: center;

    gap: var(--ath-space-xs);

    padding: 6px 14px;

    font-size: var(--ath-fs-xs);

    font-weight: 600;

    border-radius: var(--ath-radius-full);

    background: rgba(var(--ath-gold-rgb), 0.1);

    color: var(--ath-gold);

}



.badge-dot {

    width: 6px;

    height: 6px;

    background: currentColor;

    border-radius: 50%;

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.5; transform: scale(0.8); }

}



.badge-dark {

    background: rgba(var(--ath-dark-rgb), 0.1);

    color: var(--ath-dark);

}



/* ============================================

   SECTION HEADERS

   ============================================ */

.section-header {

    margin-bottom: var(--ath-space-3xl);

}



.section-header-center {

    text-align: center;

    max-width: 700px;

    margin-inline: auto;

}



.section-badge {

    display: inline-flex;

    align-items: center;

    gap: var(--ath-space-sm);

    padding: 8px 16px;

    background: rgba(var(--ath-gold-rgb), 0.1);

    color: var(--ath-gold);

    font-size: var(--ath-fs-sm);

    font-weight: 500;

    border-radius: var(--ath-radius-full);

    margin-bottom: var(--ath-space-md);

}



.section-title {

    font-size: var(--ath-fs-3xl);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: var(--ath-space-md);

}



.section-desc {

    font-size: var(--ath-fs-lg);

    color: var(--ath-text-secondary);

    max-width: 600px;

}



.section-header-center .section-desc {

    margin-inline: auto;

}



/* Text Colors */

.text-gold { color: var(--ath-gold) !important; }

.text-white { color: white !important; }

.text-dark { color: var(--ath-dark) !important; }

.text-muted { color: var(--ath-text-muted) !important; }

.text-center { text-align: center; }



/* Background Colors */

.bg-dark { background-color: var(--ath-dark); }

.bg-light { background-color: var(--ath-bg-light); }

.bg-white { background-color: white; }

.bg-gold { background-color: var(--ath-gold); }



/* ============================================

   ANIMATIONS

   ============================================ */

.animate-fade-in {

    animation: fadeIn 0.6s ease forwards;

}



.animate-fade-in-up {

    animation: fadeInUp 0.6s ease forwards;

}



.animate-fade-in-left {

    animation: fadeInLeft 0.6s ease forwards;

}



.animate-fade-in-right {

    animation: fadeInRight 0.6s ease forwards;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(30px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes fadeInLeft {

    from { opacity: 0; transform: translateX(-30px); }

    to { opacity: 1; transform: translateX(0); }

}



@keyframes fadeInRight {

    from { opacity: 0; transform: translateX(30px); }

    to { opacity: 1; transform: translateX(0); }

}



/* Staggered Animations */

.stagger-1 { animation-delay: 0.1s; }

.stagger-2 { animation-delay: 0.2s; }

.stagger-3 { animation-delay: 0.3s; }

.stagger-4 { animation-delay: 0.4s; }

.stagger-5 { animation-delay: 0.5s; }

.stagger-6 { animation-delay: 0.6s; }



/* ============================================

   BREADCRUMBS

   ============================================ */

.breadcrumbs {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--ath-space-xs);

    font-size: var(--ath-fs-sm);

    color: var(--ath-text-muted);

    padding: var(--ath-space-md) 0;

}



.breadcrumbs a {

    color: var(--ath-text-muted);

    transition: color var(--ath-transition-fast);

}



.breadcrumbs a:hover {

    color: var(--ath-gold);

}



.breadcrumbs .current {

    color: var(--ath-text);

}



.breadcrumb-sep {

    opacity: 0.5;

}



/* ============================================

   FORMS

   ============================================ */

.form-group {

    margin-bottom: var(--ath-space-lg);

}



.form-label {

    display: block;

    font-size: var(--ath-fs-sm);

    font-weight: 600;

    color: var(--ath-text);

    margin-bottom: var(--ath-space-sm);

}



.form-input,

.form-textarea,

.form-select {

    width: 100%;

    padding: 14px 16px;

    font-family: var(--ath-font-primary);

    font-size: var(--ath-fs-base);

    color: var(--ath-text);

    background: white;

    border: 1px solid var(--ath-border);

    border-radius: var(--ath-radius-md);

    transition: all var(--ath-transition-fast);

}



.form-input:focus,

.form-textarea:focus,

.form-select:focus {

    outline: none;

    border-color: var(--ath-gold);

    box-shadow: 0 0 0 3px rgba(var(--ath-gold-rgb), 0.1);

}



.form-textarea {

    resize: vertical;

    min-height: 120px;

}



/* ============================================

   RESPONSIVE UTILITIES

   ============================================ */

@media (max-width: 768px) {

    :root {

        --ath-header-height: 70px;

    }

    

    .section {

        padding-block: var(--ath-space-3xl);

    }

    

    .hide-mobile {

        display: none !important;

    }

}



@media (min-width: 769px) {

    .hide-desktop {

        display: none !important;

    }

}



/* Print Styles */

@media print {

    .no-print {

        display: none !important;

    }

}