/* ==============================================================================
   KADIR LIMITED - Core Design System & Stylesheet (custom.css)
   ==============================================================================
   This stylesheet acts as our primary design system. It is loaded AFTER 
   Bootstrap to override Bootstrap's defaults and implement a highly creative, 
   modern dark obsidian aesthetic.
   ============================================================================== */

/* ------------------------------------------------------------------------------
   1. Design Tokens (CSS Variables)
   ------------------------------------------------------------------------------
   Variables allow us to maintain a consistent style across the site. If we ever
   want to change our colors or typography, we edit them here. */
:root {
    /* Color Palette - Obsidian Theme with Neon accents */
    --bg-dark:          #080c14;        /* Deep obsidian primary background */
    --bg-darker:        #05080e;        /* Darker obsidian for footer/sections */
    --bg-surface:       #0f172a;        /* Solid card surface color */
    
    /* Neon Accent Colors */
    --accent-cyan:      #06b6d4;        /* Electric Cyan (glowing highlights) */
    --accent-cyan-rgb:  6, 182, 212;     /* RGB value of Cyan for opacity styling */
    --accent-indigo:    #818cf8;        /* Electric Indigo (secondary branding) */
    --accent-indigo-rgb:129, 140, 248;   /* RGB value of Indigo */
    --accent-purple:    #a855f7;        /* Soft Amethyst (for ambient backdrops) */
    
    /* Text Colors */
    --text-primary:     #f8fafc;        /* Off-white for high contrast headings */
    --text-muted:       #cbd5e1;        /* Silver/Slate for easy-to-read paragraphs */
    --text-subtle:      #94a3b8;        /* Muted slate for helper text, categories */
    
    /* Glassmorphism Configuration */
    --glass-bg:         rgba(15, 23, 42, 0.65);    /* Semi-transparent surface */
    --glass-border:     rgba(255, 255, 255, 0.08); /* Soft white border line */
    --glass-border-glow:rgba(6, 182, 212, 0.25);   /* Glowing border when hovered */
    
    /* Typography Tokens */
    --font-serif:       "Outfit", -apple-system, sans-serif;
    --font-sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Borders & Rounding */
    --radius-lg:        20px;
    --radius-md:        12px;
    --radius-sm:        8px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------------------
   2. Core HTML & Framework Overrides
   ------------------------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* Prevents headings from disappearing under sticky header */
}

body {
    background-color: var(--bg-dark);
    color: var(--text-muted);
    font-family: var(--font-sans);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* Prevents horizontal scroll bars caused by glowing decorations */
}

/* Override Bootstrap text color helper classes to conform to our high-contrast design system */
.text-muted {
    color: var(--text-muted) !important;
}

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

/* Dynamic footer link hovers for premium feel */
footer a.text-muted:hover {
    color: var(--accent-cyan) !important;
}

/* Headings overriding Bootstrap defaults to use our modernOutfit font */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Inline emphasis colors */
em {
    font-style: normal;
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Customized scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* ------------------------------------------------------------------------------
   3. Ambient Glowing Background Decorations
   ------------------------------------------------------------------------------
   These classes create the "trending" soft-colored ambient blur spots in the background
   to give the layout depth and visual appeal. */
.ambient-glow-wrapper {
    position: relative;
    width: 100%;
}

.ambient-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    pointer-events: none; /* Allows clicks to pass through the decoration */
    opacity: 0.15;
}

.glow-cyan {
    background: var(--accent-cyan);
    top: 10%;
    right: -10%;
}

.glow-indigo {
    background: var(--accent-indigo);
    bottom: 20%;
    left: -10%;
}

/* ------------------------------------------------------------------------------
   4. Glassmorphism Design Utilities
   ------------------------------------------------------------------------------ */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: var(--transition-smooth);
}

/* Modern Card Layouts */
.kadir-card {
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Card hover animation - scales up slightly and glows border */
.kadir-card:hover {
    transform: translateY(-5px);
    border-color: var(--glass-border-glow);
    box-shadow: 0 12px 40px 0 rgba(var(--accent-cyan-rgb), 0.1);
}

/* ------------------------------------------------------------------------------
   5. Interactive Buttons & UI Elements
   ------------------------------------------------------------------------------ */
.btn-kadir {
    font-family: var(--font-serif);
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
    border: 1.5px solid transparent;
}

.btn-kadir-primary {
    background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-cyan) 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
}

.btn-kadir-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(6, 182, 212, 0.4);
    color: var(--text-primary);
}

.btn-kadir-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--glass-border);
}

.btn-kadir-secondary:hover {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.05);
    color: var(--text-primary);
}

/* ------------------------------------------------------------------------------
   6. Custom Layout Components (Navbar, Timeline, details)
   ------------------------------------------------------------------------------ */
/* Sticky Navigation bar with glassmorphism */
.kadir-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--glass-border);
    transition: var(--transition-smooth);
}

.kadir-navbar .navbar-brand {
    font-family: var(--font-serif);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.kadir-navbar .navbar-brand span {
    color: var(--accent-cyan);
}

.kadir-navbar .nav-link {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition-smooth);
    padding: 0.5rem 1rem !important;
}

.kadir-navbar .nav-link:hover, 
.kadir-navbar .nav-link.active {
    color: var(--accent-cyan);
}

/* Accordion (FAQ section) customization using native Details/Summary */
.kadir-faq-item {
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 0;
}

.kadir-faq-item summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    transition: var(--transition-smooth);
}

.kadir-faq-item summary:hover {
    color: var(--accent-cyan);
}

/* Custom list-style arrow replacement */
.kadir-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--accent-cyan);
    transition: var(--transition-smooth);
}

.kadir-faq-item[open] summary::after {
    transform: rotate(45deg); /* Rotates the + to look like an X or turns it to - */
    content: '−';
}

.kadir-faq-body {
    padding-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 1rem;
    animation: slideDown 0.3s ease-out;
}

/* Smooth fade-in animation for accordion body */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------------------
   7. Typography Accents & Layout Grid borders
   ------------------------------------------------------------------------------ */
.text-gradient {
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    background: rgba(6, 182, 212, 0.08);
    border-radius: 999px;
    border: 1px solid rgba(6, 182, 212, 0.15);
}

/* ------------------------------------------------------------------------------
   8. Form Inputs & Interactive Validation States
   ------------------------------------------------------------------------------ */
.form-control {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.65rem 1rem !important;
    transition: var(--transition-smooth) !important;
}

/* Form input placeholder styling with high contrast */
.form-control::placeholder {
    color: var(--text-subtle) !important;
    opacity: 0.85 !important;
}

/* Input hover state */
.form-control:hover {
    border-color: rgba(var(--accent-cyan-rgb), 0.4) !important;
}

/* Interactive focus state with neon cyan glow */
.form-control:focus {
    background-color: rgba(15, 23, 42, 0.7) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.25) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

/* Prevent resizing of textareas to keep layout integrity */
textarea.form-control {
    resize: none !important;
}

/* Override browser autofill styling for dark theme consistency */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}