/* TruthFound.me - Main Stylesheet */

/* SEO-friendly heading structure */
.page-title .seo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-title .user-title {
    display: inline-block;
}
:root {
    --primary: #005f7a;
    --primary-light: #007a9e; /* Darkened from #4d9ab3 for better contrast */
    --primary-dark: #00435a;
    --secondary: #d9b300;
    --dark: #222;
    --light: #f8f9fa;
    --danger: #c0392b;
    --success: #27ae60;
    
    /* Typography variables */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
}

*:not(input):not(textarea) {
    -webkit-user-select: auto;
    user-select: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll; /* Always show vertical scrollbar to prevent layout shift */
}

body {
    font-family: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.5;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* RTL .container elements will use the physical padding from the base .container rule.
   The dir="rtl" attribute will ensure padding-right acts as the inline-start padding. */

/* -------------- Header -------------- */
header {
    background: var(--primary);
    color: #fff;
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* Prevent overflow issues */
    border-bottom: 1px solid #e0e0e0;
}

.ck-content, .content-area {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    /* direction: rtl;  Uncomment if all content is Arabic */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html[dir="rtl"] header .container {
    flex-direction: row-reverse;
}

.logo {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    letter-spacing: var(--letter-spacing-tight);
}

.logo img {
    height: 6rem; /* Original size from design */
}

html[dir="rtl"] .logo {
    flex-direction: row-reverse;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center; /* Vertically center the navigation items */
    height: 100%; /* Take full height of the nav container */
    margin: 0;
    padding: 0;
}

html[dir="rtl"] nav ul {
    justify-content: flex-end;
}

nav a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 1.1rem; /* Slightly smaller for modern look */
    font-weight: var(--font-weight-medium);
    display: inline-block;
    padding: 0.5rem 1rem; /* Add padding for better clickability */
    letter-spacing: var(--letter-spacing-normal);
}

nav a:hover {
    color: var(--secondary);
}

/* Language bar */
.language-bar {
    background-color: #f5f5f5;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

.language-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 15px;
}

.lang-link {
    color: var(--primary);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    font-size: 1.1rem;
    letter-spacing: var(--letter-spacing-tight);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.lang-link:hover {
    background-color: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

.lang-link.active {
    background-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 110, 144, 0.3);
    font-weight: var(--font-weight-semibold);
    transform: translateY(-1px);
}

.lang-separator {
    color: #6c6c6c; /* Updated from #767676 for better contrast ratio (>4.5:1) */
    display: inline-block;
    margin: 0 8px;
    font-size: 1.1rem;
    vertical-align: middle; /* Ensure dots are vertically centered with text */
    line-height: inherit; /* Match the line-height of surrounding text */
    position: relative;
    top: 4.0px; /* Fine-tuned vertical position to perfectly center */
}

html[dir="rtl"] #main-site-language-bar {
    flex-direction: row-reverse; /* Corrects order for RTL context */
}

/* Language toggle button */
.btn-language {
    background-color: white;
    border: none;
    color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.btn-language:hover {
    background-color: #f8f8f8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* User info display */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

/* -------------- Main Content -------------- */
main {
    flex: 1;
    padding: 0 0 2rem 0;
    margin-top: 0; /* align with sidebar */
}

/* Typography enhancements */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    letter-spacing: var(--letter-spacing-tight);
}

h1 {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5, h6 {
    font-size: 1rem;
}

.page-title {
    margin: 0.75rem 0 1.5rem;
    color: var(--primary-dark);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    font-size: 1.5rem; /* Smaller than default h2 (1.75rem) */
}

.content-area {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto 2rem; /* remove top margin to align with sidebar */
}

/* Enhanced paragraph styles */
p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* Enhanced link styles */
a {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* -------------- Sidebar -------------- */
.sidebar {
    width: 260px;
    background: var(--primary);
    color: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0; /* removed top margin to close gap */
}

/* Adjust sidebar padding for RTL pages to match LTR page edge distance */
html[dir="rtl"] .sidebar {
    padding-right: 1.5rem;
}



.sidebar h2 {
    margin: 0;
    font-size: 1.4rem;
}

/* Styles for links within the sidebar */
.sidebar .page-link {
    display: block;
    padding: .5rem .75rem; /* Reverted to original size */
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF; /* White text for the dark teal sidebar background */
    background-color: transparent; /* Explicitly transparent background */
    transition: all 0.3s ease;
    margin-bottom: 2px; /* Reverted to original spacing */
    position: relative;
    overflow: hidden;
    border-left: 3px solid transparent;
    transform: translateX(0);
}

/* Indent subpages in the sidebar */
.sidebar .page-link.subpage {
    padding-left: 1.5rem; /* Indent subpages */
    margin-left: 0.5rem; /* Additional margin for visual separation */
    border-left: 2px solid rgba(255, 255, 255, 0.3); /* Subtle border to show hierarchy */
}

/* RTL support for sidebar links */
html[dir="rtl"] .sidebar .page-link {
    border-left: none;
    border-right: 3px solid transparent;
    transform: translateX(0);
}

/* Animation for sidebar links on hover */
.sidebar .page-link:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px; /* Thinner underline */
    background: rgba(255, 255, 255, 0.5); /* More subtle color */
    transition: width 0.3s ease;
}

/* RTL support for the hover animation */
html[dir="rtl"] .sidebar .page-link:before {
    left: auto;
    right: 0;
}

.sidebar .page-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Original subtle highlight */
    color: #FFFFFF; /* Keep text white */
    transform: translateX(3px); /* Reduced slide effect */
    /* Removed box-shadow to keep original size appearance */
}

/* RTL support for hover transform */
html[dir="rtl"] .sidebar .page-link:hover {
    transform: translateX(-3px); /* Reduced slide for RTL */
}

.sidebar .page-link:hover:before {
    width: 100%; /* Expand the underline on hover */
}

/* Highlighting for the active page's link in the sidebar */
.sidebar .page-link.active-sidebar-item {
    background-color: rgba(255, 255, 255, 0.2); /* Original highlight */
    color: #FFFFFF; /* Keep text white */
    font-weight: bold;
    border-left: 3px solid rgba(255, 255, 255, 0.7); /* Subtle border for active item */
    /* Removed box-shadow to maintain original size */
}

/* RTL support for active item */
html[dir="rtl"] .sidebar .page-link.active-sidebar-item {
    border-left: none;
    border-right: 3px solid rgba(255, 255, 255, 0.9);
}

/* Legacy comments preserved for reference */
/* border-left: 3px solid var(--accent-color, #FFD700); */ /* Assuming you have an accent color */
/* padding-left: calc(0.75rem - 3px); */ /* Adjust if using border */

/* 
   The .actions class was part of the original block but seems unrelated to page links.
   It should be preserved if it's not defined elsewhere or if it's intended to be here.
   For now, I'm assuming it's correctly placed after the sidebar link styles.
   If it was meant to be preserved within the replaced block, this edit will remove it from this specific location.
   Let's re-add .actions styling separately if it was indeed between page-link and active-sidebar-item. 
   Looking at the original, .actions was between .page-link.active and the comment 'Sidebar active item highlighting'
   So it should be preserved. The replacement target should be split or .actions re-inserted. 
*/

/* Retaining .actions style that was in the middle of the replaced block */
.actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* -------------- Buttons -------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    min-height: 2.75rem;
    gap: 0.5rem;
    white-space: nowrap;
    z-index: 1;
}

/* Modern button hover effect */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: scale(0.8);
    z-index: -1;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: inherit;
}

.btn:hover::before {
    opacity: 1;
    transform: scale(1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-primary { 
    background: var(--primary); 
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 110, 144, 0.2);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0, 110, 144, 0.3);
}

.btn-secondary {
    background: var(--secondary);
    color: #222;
    box-shadow: 0 2px 4px rgba(217, 179, 0, 0.2);
}

.btn-secondary:hover {
    background: #e0bb08;
    box-shadow: 0 4px 8px rgba(240, 200, 8, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    box-shadow: none;
}

.btn-outline:hover {
    background: rgba(0, 110, 144, 0.05);
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    box-shadow: 0 2px 6px rgba(0, 110, 144, 0.15);
}

.btn-danger { 
    background: var(--danger); 
    color: #fff;
    box-shadow: 0 2px 4px rgba(192, 57, 43, 0.2);
}

.btn-danger:hover {
    background: #a93226;
    box-shadow: 0 4px 8px rgba(192, 57, 43, 0.3);
}

.btn-success { 
    background: var(--success); 
    color: #fff;
    box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
}

.btn-success:hover {
    background: #219955;
    box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
}

/* Button size variants */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
    min-height: 2.25rem;
    border-radius: 4px;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    min-height: 3.25rem;
    border-radius: 8px;
}

/* Icon buttons */
.btn-icon {
    width: 2.75rem;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.btn-icon.btn-sm {
    width: 2.25rem;
}

.btn-icon.btn-lg {
    width: 3.25rem;
}

/* Button focus states */
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 110, 144, 0.3);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(0, 110, 144, 0.3);
}

.btn-secondary:focus {
    box-shadow: 0 0 0 3px rgba(240, 200, 8, 0.3);
}

.btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3);
}

.btn-success:focus {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

/* Loading button state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    top: calc(50% - 0.625rem);
    left: calc(50% - 0.625rem);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

.btn-outline.btn-loading::after {
    border: 2px solid rgba(0, 110, 144, 0.2);
    border-top-color: var(--primary);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-language {
    background: #f0f0f0;
    color: #333;
    font-size: 0.9rem;
}

/* -------------- Footer -------------- */
/* Professional 3-Column Footer Design */
footer {
    background: var(--primary);
    color: #fff;
    padding: 1.5rem 0;
    margin-top: auto;
    position: relative;
    min-height: 80px;
}

footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1200px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.footer-logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    margin: 0;
    text-align: center;
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: translateY(-2px);
}

.footer-legal-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.footer-links-horizontal {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.footer-links-horizontal a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

.footer-links-horizontal a:hover {
    color: #fff;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.9); /* Increased from 0.6 to 0.9 for better contrast */
    font-size: 0.75rem;
    text-align: center;
}

.footer-section h4 {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.25rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-description {
    color: rgba(255, 255, 255, 0.9); /* Increased from 0.8 to 0.9 for better contrast */
    line-height: 1.6;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.footer-contact {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.5;
}

.footer-contact p {
    margin-bottom: 0.5rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.footer-links a:hover {
    color: #fff;
}

.footer-newsletter {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.email-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 100%;
}

.email-input::placeholder {
    color: rgba(255, 255, 255, 0.9); /* Increased from 0.6 to 0.9 for better contrast */
}

.email-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

.subscribe-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.subscribe-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom .copyright {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-bottom .footer-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footer-meta span {
    color: rgba(34, 34, 34, 0.9); /* Increased from 0.7 to 0.9 for better contrast */
    font-style: italic;
}

/* RTL footer adjustments */
html[dir="rtl"] .footer-content {
    direction: rtl;
}

html[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-links a:hover {
    padding-left: 0;
    padding-right: 0.75rem;
    transform: translateX(-0.25rem);
}

html[dir="rtl"] .footer-section h4::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .footer-mission {
    border-left: none;
    border-right: 3px solid var(--primary);
}

/* Top visitor counter styles */
.top-visitor-counter {
    display: flex;
    justify-content: center; /* full width strip */
    padding: 0;
    margin: 10px 0; /* Increased margin for better separation */
    background-color: transparent;
    width: 100%;
    border-bottom: none; /* remove border to avoid extra gap */
    font-size: 0.8rem;
    direction: ltr;
    line-height: 1;
    height: auto;
}

/* Visitor counter styles */
.visitor-counter {
    padding: 0;
    margin: 0;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.05rem 0;
    font-size: 0.8rem;
    color: #555;
    margin: 0;
}

.visitor-count {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.visitor-count-number {
    font-weight: 500;
    color: #006699;
}

.visitor-countries {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.country-badge {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: #555;
    font-weight: 400;
    white-space: nowrap;
}

.visitor-countries .country-badge:not(:first-child)::before {
    content: '•';
    display: inline-block !important;
    color: #555;
    margin: 0;
    vertical-align: middle;
    font-weight: 300;
}

/* Mobile responsive styles for visitor counter */
@media (max-width: 768px) {
    .top-visitor-counter {
        padding: 0;
        margin: 4px 0; /* mobile spacing */
        font-size: 0.75rem;
        height: auto;
    }
    
    .visitor-counter {
        gap: 0.3rem;
        padding: 0;
    }
    
    .visitor-countries {
        gap: 0.25rem;
    }
}

.country-badge:hover {
    background-color: #d0d0d0;
}

.country-flag {
    width: 16px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

/* -------------- Forms -------------- */
.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

/* -------------- Login Form -------------- */
.login-container {
    max-width: 400px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-title {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

/* -------------- Utilities -------------- */
.hidden {
    display: none !important;
}

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* -------------- Force LTR Layout -------------- */
/* Override any potential RTL styling to enforce consistent LTR layout */
.row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* ensure children fill equal height */
    margin-top: 0; /* align with visitor counter container */
}

.sidebar {
    flex: 1 !important;
    min-width: 220px !important;
    max-width: 250px !important;
    margin-right: 20px !important;
    margin-left: 0 !important;
    float: left !important;
    order: 1 !important;
    direction: ltr !important;
}

/* RTL sidebar layout adjustments */
html[dir="rtl"] .sidebar {
    margin-right: 0 !important;
    margin-left: 20px !important;
    float: right !important;
    order: 2 !important;
}

.main-content {
    flex: 3 !important;
    order: 2 !important;
    float: right !important;
    direction: ltr !important;
    margin-bottom: 0 !important; /* remove gap below content so it aligns with sidebar */
    display: flex;               /* allow internal content to stretch */
    flex-direction: column;
    scroll-margin-top: 20px; /* Adds margin for scroll behavior */
}

/* Fix for LTR layout content positioning */
html:not([dir="rtl"]) .main-content {
    float: left !important;
    order: 2 !important;
}



/* Allow content in the editor to be RTL when needed */
#pageList {
    text-align: left !important;
    direction: ltr !important;
}

/* Allow content to be displayed in its original direction */
.ck-editor__editable {
    /* Override our forced LTR only within the editor */
    direction: inherit !important;
    text-align: initial !important;
}

/* Styles for CKEditor content area to ensure proper text wrapping */
.ck-content {
    overflow-wrap: break-word;
    word-wrap: break-word; /* For older browser compatibility */
    word-break: break-word;
}

/* -------------- Back to Top Button -------------- */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transform: translateY(10px);
}

.back-to-top.visible {
    opacity: 0.8;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    opacity: 1;
    transform: translateY(-3px);
}

/* RTL support for back to top button */
html[dir="rtl"] .back-to-top {
    right: auto;
    left: 20px;
}

/* -------------- Responsive Design -------------- */
@media (max-width: 768px) {
    header .container,
    footer .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Visitor counter mobile styles */
    .visitor-counter {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .visitor-countries {
        gap: 0.3rem;
    }
    
    .country-badge {
        padding: 0.1rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Enhanced Mobile Breakpoints */
@media (max-width: 992px) {
    /* Stack sidebar above content for tablets / small laptops */
    .row {
        flex-direction: column !important;
    }

    .sidebar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 1rem 0 !important;
        float: none !important;
        order: 1 !important;   /* place sidebar (menu) first */
    }

    .main-content {
        order: 2 !important;   /* content follows menu */
        float: none !important;
        margin: 0 !important;
        scroll-margin-top: 20px; /* Adds margin for scroll behavior */
    }

    .logo img {
        height: 4rem; /* Slightly smaller logo for medium screens */
    }
}

@media (max-width: 576px) {
    /* Phone-sized enhancements */
    /* Keep header elements on one line for mobile */
    header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Improved footer mobile styles */
    footer {
        padding: 1.5rem 0 1rem 0;
        min-height: 120px;
    }

    .footer-top {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

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

    .footer-description {
        max-width: none;
        margin: 0 auto 0.5rem;
        font-size: 0.8rem;
    }

    .footer-mission {
        text-align: left;
        max-width: 280px;
        margin: 0 auto;
        padding: 0.5rem;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    footer {
        padding: 1rem 0;
        min-height: 60px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-section h4 {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .footer-description {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .footer-contact {
        font-size: 0.8rem;
    }

    .footer-bottom {
        text-align: center;
        padding-top: 1rem;
        font-size: 0.75rem;
    }

    .footer-links a {
        font-size: 0.8rem;
        text-align: center;
        padding: 0.25rem 0;
    }

    .footer-logo-section {
        grid-column: 1 / -1;
        margin-bottom: 1rem;
    }

    .footer-logo {
        font-size: 1.4rem;
    }

    .footer-links-horizontal {
        flex-direction: column;
        gap: 0.75rem;
    }

    .footer-links-horizontal a {
        font-size: 0.85rem;
    }

    .footer-copyright {
        font-size: 0.7rem;
        margin-top: 0.5rem;
    }

    .logo {
        font-size: 0.9rem; /* Further scale down site title for mobile */
        gap: 0.4rem; /* Reduce gap between logo and text */
    }
    
    .logo img {
        height: 2.5rem; /* Smaller logo image for mobile */
    }

    nav ul {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    nav a {
        font-size: 0.85rem; /* Smaller font for navigation links */
        padding: 0.2rem 0.4rem; /* Smaller padding */
    }

    .content-area {
        padding: 1rem;
        margin: 1rem 0;
        font-size: 0.9rem; /* Scale down body text for mobile */
    }
    
    .content-area h1 {
        font-size: 1.6rem;
    }
    
    .content-area h2 {
        font-size: 1.4rem;
    }
    
    .content-area h3 {
        font-size: 1.2rem;
    }
    
    .content-area h4, .content-area h5, .content-area h6 {
        font-size: 1.1rem;
    }

    .sidebar {
        gap: 0.75rem;
    }
}

/* Narrowest phones: stack footer content */
@media (max-width: 480px) {
   footer .container {
       flex-direction: column;
       text-align: center;
       gap: .75rem;
   }

   .copyright {
       margin-left: 0;
       margin-top: .5rem;
   }
}

/* -------------- Editor Styles -------------- */
.editor-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}

.editor-toolbar button {
    padding: 0.3rem 0.5rem;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-toolbar button:hover {
    background: #e9e9e9;
}

.editor-toolbar .size-btn {
    min-width: 2.5rem;
}

.editor-toolbar .color-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #ccc;
}

.editor-toolbar .color-btn span {
    display: block;
    width: 100%;
    height: 100%;
}

.editor-toolbar .separator {
    width: 1px;
    background: #ccc;
    margin: 0 0.25rem;
}

.editor-area {
    min-height: 320px;
    max-height: 60vh;
    border: 1px solid #ccc;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    overflow-y: auto;
    max-width: 1200px;
    margin: 2rem auto;
}

/* Styles for CKEditor generated content to ensure proper word wrapping */
.ck-content {
    overflow-wrap: break-word; /* Standard property */
    word-wrap: break-word;     /* Older browsers fallback */
    word-break: break-word;    /* Helps with very long words or CJK text */
}

/* -------------- Modal -------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: #fff;
    max-width: 720px;
    width: 94vw;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 22px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 90vh;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #767676; /* Changed from #999 to meet WCAG AA contrast requirements */
}

.modal-close:hover {
    color: #333;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Page Navigation Styles */
.page-navigation {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.nav-button {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 12px 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #222;
    transition: all 0.2s;
    max-width: 45%;
}
.nav-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    text-decoration: none;
    color: #222;
}
.nav-arrow {
    font-size: 18px;
}
.nav-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 2px;
}
.nav-title {
    font-weight: 500;
    word-wrap: break-word;
}
.prev-button .nav-arrow {
    margin-right: 8px;
}
.next-button .nav-arrow {
    margin-left: 8px;
}
.next-button {
    text-align: right;
}
html[dir="rtl"] .prev-button .nav-arrow {
    margin-right: 0;
    margin-left: 8px;
}
html[dir="rtl"] .next-button .nav-arrow {
    margin-left: 0;
    margin-right: 8px;
}
html[dir="rtl"] .next-button {
    text-align: left;
}

/* RTL support */
.rtl-text {
    direction: rtl;
    text-align: right;
}
.ltr-text {
    direction: ltr;
    text-align: left;
}
/* Simple debug styling */
.debug-text {
    color: #c80000; /* Changed from red to darker red for better contrast */
    font-size: 12px;
}

/* Visitor counter list styles */
.visitor-countries ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
/* ---- Accessibility palette fix (2025-06-25) ---- */
header,
.sidebar,
.lang-link.active {        /* active pill in language bar */
  background: var(--primary) !important;
}

.btn-secondary {
  background: var(--secondary);
  color: #222;             /* you already planned this */
}

/* Subpages list styles - modernized with animations and improved visibility */
.subpages-list {
  margin-top: 2.5rem;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #eaeaea;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subpages-list:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.subpages-title {
  margin-bottom: 1.25rem;
  color: var(--primary-dark);
  font-size: 1.35rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.75rem;
}

.subpages-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 3px;
  width: 60px;
  transition: width 0.3s ease;
}

/* RTL support for the title underline */
[dir="rtl"] .subpages-title::after,
html[dir="rtl"] .subpages-title::after {
  background: linear-gradient(90deg, var(--primary-light) 0%, var(--primary) 100%);
  left: auto;
  right: 0;
}

.subpages-list:hover .subpages-title::after {
  width: 100px;
}

.subpages-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subpages-li {
  margin-bottom: 0.5rem;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* RTL support for list item animations */
[dir="rtl"] .subpages-li,
html[dir="rtl"] .subpages-li {
  transform: translateX(0);
}

.subpages-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: white;
  border-left: 3px solid transparent;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

/* RTL support for link styling */
[dir="rtl"] .subpages-link,
html[dir="rtl"] .subpages-link {
  border-left: none;
  border-right: 3px solid transparent;
}

.subpages-link:hover {
  color: var(--primary-dark);
  background-color: #f0f7ff;
  border-left: 3px solid var(--primary);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  transform: translateX(5px);
}

/* RTL support for link hover effects */
[dir="rtl"] .subpages-link:hover,
html[dir="rtl"] .subpages-link:hover {
  border-left: none;
  border-right: 3px solid var(--primary);
  transform: translateX(-5px);
}

/* Clean blockquote with subtle shading */
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #d1d9e0;
  font-style: italic;
  background: #f6f8fa;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

blockquote p {
  margin: 0;
  line-height: 1.6;
}

blockquote cite {
  display: block;
  text-align: right;
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: var(--font-weight-medium);
  color: #6a737d;
  font-size: 0.9rem;
}

blockquote cite::before {
  content: '— ';
}

/* RTL blockquote support */
html[dir="rtl"] blockquote {
  border-left: none;
  border-right: 4px solid #d1d9e0;
  border-radius: 6px 0 0 6px;
}

html[dir="rtl"] blockquote cite {
  text-align: left;
}

/* Mobile blockquote styles */
@media (max-width: 768px) {
  blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
}