/* css/base.css */

/* -- CSS Variables for Theming -- */
:root {
    --bg-color: #f4f7f9;
    --text-color: #333;
    --header-bg: #ffffff;
    --header-border: #e0e0e0;
    --box-bg: #ffffff;
    --box-border: #bdc3c7;
    --box-border-hover: #3498db;
    --title-color: #2c3e50;
    --link-color: #3498db;
    --footer-bg: #2c3e50;
    --footer-text: #ecf0f1;
    --secondary-btn-bg: #95a5a6;
    --error-color: #e74c3c;
    --danger-btn-bg: #c0392b;
    --kofi-color: #FF5E5B; /* Ko-fi's brand color */
    --special-link-color: #e74c3c; /* New color for special nav link */
}

.dark-mode {
    --bg-color: #1a202c;
    --text-color: #e2e8f0;
    --header-bg: #2d3748;
    --header-border: #4a5568;
    --box-bg: #2d3748;
    --box-border: #4a5568;
    --box-border-hover: #63b3ed;
    --title-color: #ffffff;
    --link-color: #63b3ed;
    --footer-bg: #111827;
    --footer-text: #a0aec0;
    --secondary-btn-bg: #4a5568;
    --error-color: #f56565;
    --danger-btn-bg: #9b2c2c;
    --special-link-color: #f56565; /* Brighter red for dark mode */
}

/* -- General Styles -- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

html[dir="rtl"] body {
    text-align: right;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img, svg {
    max-width: 100%;
    height: auto;
}

/* -- Generic Button & UI Styles -- */
.btn { padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; transition: opacity 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: white !important; }
.btn:hover { opacity: 0.9; }
.btn[disabled] { opacity: 0.7; cursor: not-allowed; }

.btn-primary { background-color: #3498db; }
.btn-convert { background-color: #2ecc71; }
.btn-secondary { background-color: var(--secondary-btn-bg); }
.btn-danger { background-color: var(--danger-btn-bg); }
.btn-download { background-color: #2ecc71; padding: 8px 16px; font-size: 14px; }

/* -- Spinner Animation -- */
.spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/*
 ============================================
  Responsive Media Queries
 ============================================
*/
@media (max-width: 768px) {
    .main-header .container { flex-direction: column; gap: 20px; }
    .header-center { flex-direction: column; gap: 20px; order: 3; }
    .logo-link { order: 1; }
    .profile-section { order: 2; }
    .main-nav { flex-direction: column; gap: 15px; width: 100%; text-align: center; }
    .converter-section h1 { font-size: 26px; }
    .subtitle { font-size: 15px; }
    .footer-links { display: flex; flex-direction: column; gap: 12px; }
    .article-content { padding: 20px; }
    .articles-hub-container { padding: 10px; }
}

@media (max-width: 480px) {
    .container { padding: 0 15px; }
    .converter-box { padding: 15px; }
    .result-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px; }
    html[dir="rtl"] .result-item { align-items: flex-end; }
    .result-item .btn-download { width: 100%; text-align: center; }
}