/* ============================================================
   GLOBAL STYLES - APK AUTHORITY THEME
   ============================================================ */

/* --- 1. Variables & Global Settings --- */
:root {
    /* Brand Colors */
    --color-blue: #2563eb;
    --color-gold: #f59e0b;
    --color-dark-navy: #0f172a;
    --color-slate-gray: #334155;
    
    /* UI Colors */
    --color-background: #ffffff;
    --color-background-alt: #f8fafc; /* Light Gray */
    --color-text: #334155;
    --color-text-light: #64748b;
    --color-border: #e2e8f0;
    
    /* State Colors */
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #f59e0b;

    /* Fonts */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
}

/* --- 2. Base & Typography --- */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-dark-navy);
    font-weight: 700;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #1d4ed8; /* Darker Blue */
}

/* --- 3. Layout & Containers --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Universal wrapper for 2-column layouts */
.site-content-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* --- 4. Reusable Components --- */
.button-primary {
    display: inline-block;
    background-color: var(--color-gold);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.button-primary:hover {
    background-color: #d97706; /* Darker Gold */
}

.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

/* --- 5. Utility Classes (Color Helpers) --- */

/* Text Colors */
.text-blue { color: var(--color-blue); }
.text-gold { color: var(--color-gold); }
.text-dark-navy { color: var(--color-dark-navy); }
.text-light { color: var(--color-text-light); }
.text-white { color: #ffffff; }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }

/* Background Colors */
.bg-blue { background-color: var(--color-blue); color: #ffffff; }
.bg-gold { background-color: var(--color-gold); color: #ffffff; }
.bg-dark-navy { background-color: var(--color-dark-navy); color: #ffffff; }
.bg-light { background-color: var(--color-background-alt); }
.bg-white { background-color: var(--color-background); }


/* --- 6. Responsive Fixes --- */
@media (max-width: 991px) {
    /* Mobile par 2-column layouts ko stack karega */
    .site-content-wrapper {
        flex-direction: column;
    }

    .apk-content-column,
    .apk-sidebar-column,
    .main-content-column,
    .sidebar-column {
        width: 100%;
        min-width: 100%;
    }
}