/* 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;
}

/* Utility: hide element visually but keep it accessible to screen readers */
.visually-hidden {
    position: absolute !important;
    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: #f6c400; /* brighter yellow */
    --dark: #222;
    --light: #f8f9fa;
    --danger: #c0392b;
    --success: #27ae60;
    --brand: hsl(353,87%,41%);
    --sidebar-width: 280px;
    --sidebar-min-width: 260px;
    --sidebar-max-width: 300px;
    
    /* 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;
    --font-sans-latin: "Inter", system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
        Arial, sans-serif;
    --font-sans-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic",
        "Noto Naskh Arabic", "Noto Sans Arabic UI",
        "Segoe UI", "Tahoma", Arial, sans-serif;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

*: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 */
    overflow-x: hidden; /* Prevent horizontal overflow on mobile */
    font-family: var(--font-sans-latin);
    font-size: 100%;
}
:lang(ar),
:lang(fa),
:lang(ur),
:lang(ps),
:lang(ku),
:lang(ckb),
html[lang="ar"],
[dir="rtl"] {
    font-family: var(--font-sans-arabic);
    letter-spacing: normal;
}

body {
    font-family: var(--font-sans-latin);
    background: var(--light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden; /* Defensive: clip any accidental overflows */
}

/* UI elements inherit from body font-family */

/* Default RTL font (site-wide) */
/* RTL font smoothing and rendering optimization */
[dir="rtl"] {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    overflow-x: hidden;
    overflow-y: visible;
}

/* 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%;
    overflow-x: hidden;
    /* direction: rtl;  Uncomment if all content is Arabic */
}

/* Make media responsive to avoid horizontal scrolling */
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* Allow flex children to shrink to viewport to prevent overflow */
.main-content { min-width: 0; }

/* Prevent wide tables from causing page overflow */
.ck-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Guard: avoid extra spacing if a stray trailing <br> ends an H1 */
.ck-content h1 > br:last-child { display: none; }

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

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

/* Prevent inherited font-size-adjust from shrinking Arabic header text */
[lang="ar"][dir="rtl"] header { font-size-adjust: none; }

.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, border-bottom 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);
    border-bottom: 3px solid transparent;
}


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

nav a.active,
.main-nav a.active {
    border-bottom: 3px solid var(--secondary);
    color: var(--secondary);
}

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

/* Keep a consistent font across LTR/RTL for the language/online bar */
.language-bar,
.language-bar * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Arial Unicode MS', sans-serif !important;
}
html[dir="rtl"] .language-bar,
html[dir="rtl"] .language-bar *,
html[lang="ar"] .language-bar,
html[lang="ar"] .language-bar * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Arial Unicode MS', sans-serif !important;
}

/* Arrange language selector and online counter on one line */
#main-site-language-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: visible;
}

.language-select-wrapper {
    flex: 0 0 var(--sidebar-width);
    position: relative;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    margin-inline: 0;
    box-sizing: border-box;
    overflow: visible !important;
}

/* Custom dropdown button */
.language-select-button {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(15, 52, 67, 0.18);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f3443;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
    font-family: inherit;
}

.language-select-button:hover {
    border-color: rgba(0, 95, 122, 0.35);
}

.language-select-button:focus {
    outline: none;
    border-color: rgba(0, 95, 122, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 95, 122, 0.12), 0 12px 26px rgba(0, 95, 122, 0.18);
}

.language-select-button[aria-expanded="true"] {
    border-color: rgba(0, 95, 122, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 95, 122, 0.12), 0 12px 26px rgba(0, 95, 122, 0.18);
}

/* Dropdown arrow */
.language-select-arrow {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid rgba(15,52,67,0.6);
    border-bottom: 2px solid rgba(15,52,67,0.6);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.language-select-button[aria-expanded="true"] .language-select-arrow {
    transform: rotate(-135deg);
}

/* Dropdown panel */
.language-select-dropdown {
    position: fixed !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;  /* No scroll container until needed */
    background: #ffffff !important;
    border: 1px solid rgba(15, 52, 67, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
    display: none;
    box-sizing: border-box !important;
}

/* Enable scrolling only when class is applied */
.language-select-dropdown.scrollable {
    max-height: calc(100vh - 20px) !important;  /* Almost full viewport */
    overflow-y: auto !important;  /* Allow scroll if needed but hide bar */
    overflow-x: hidden !important;
    scrollbar-width: none !important;  /* Firefox */
    -ms-overflow-style: none !important;  /* IE and Edge */
}

.language-select-dropdown.scrollable::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Show dropdown when open */
.language-select-dropdown.is-open {
    display: block !important;
}

/* No scrollbars needed - dropdown auto-sizes to content */


.language-select-options {
    list-style: none;
    margin: 0;
    padding: 0.2rem;
    max-height: none !important;  /* No height constraint on the list */
    height: auto !important;      /* Natural height based on content */
    overflow: visible !important;  /* Never scroll the list itself */
}

.language-select-option {
    padding: 0.35rem 0.9rem;  /* Slightly reduced padding to fit more items */
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    font-size: 0.88rem;  /* Slightly smaller font */
    line-height: 1.3;  /* Tighter line height */
    color: #0f3443;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.language-select-option:hover {
    background: #e5f2f6;
}

.language-select-option:focus {
    outline: none;
    background: #d0e7ef;
}

.language-select-option[aria-selected="true"] {
    background: #0f3443;
    color: #fff;
    font-weight: 600;
}

.language-select-option[aria-selected="true"]:hover {
    background: #0a2a38;
}

/* RTL support */
html[dir="rtl"] .language-select-button {
    text-align: right;
}

html[dir="rtl"] .language-select-arrow {
    margin-left: 0;
    margin-right: 0.75rem;
    transform: rotate(-135deg);
}

html[dir="rtl"] .language-select-button[aria-expanded="true"] .language-select-arrow {
    transform: rotate(45deg);
}

/* RTL positioning handled by JavaScript */

/* Native select as primary control (minimal styling) */
.language-select-native {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(15, 52, 67, 0.22);
    border-radius: 10px;
    background: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f3443;
    cursor: pointer;
    line-height: 1.3;
    direction: inherit;
    text-align: start;
    font-family: inherit;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); /* subtle to show as a control */
}

.language-select-native:hover {
    border-color: rgba(0, 95, 122, 0.35);
}

.language-select-native:focus {
    outline: none !important;
    border-color: rgba(0, 95, 122, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 95, 122, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.language-select-native option {
    font-weight: 500;
    color: #0f3443;
}

.visitor-inline {
    /* No auto margins; rely on space-between to push ends in both LTR/RTL */
    margin: 0;
    display: flex;
    align-items: center;
}

.language-links {
    display: flex;
    justify-content: center;
    align-items: center; /* True vertical centering */
    gap: 15px; /* space between pills */
}

.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);
}

/* Keep bullets for authored content */
.ck-content ul, .ck-content ol {
  list-style: initial;
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}

/* Insert the dot in front of every language link except the first one */
.language-links > .lang-link + .lang-link::before {
    content: '•';
    margin: 0 8px;
    align-self: center; /* centers the dot without offsets */
    color: #6c6c6c;
    font-size: 1.1rem;
    line-height: 1; /* keeps bullet height tight */
}

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

/* Stack on small screens */
@media (max-width: 640px) {
  #main-site-language-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  /* Ensure RTL also stacks (override higher-specificity RTL row-reverse rule) */
  html[dir="rtl"] #main-site-language-bar {
    flex-direction: column;
  }
  .language-select-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0;
    flex: 1 1 100%;
  }
  .visitor-inline { justify-content: center; margin: 0; }
}

/* 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 */
    overflow-x: hidden;
}

/* 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: var(--sidebar-width);
    background: var(--primary);
    color: #fff;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0; /* removed top margin to close gap */
    margin-left: 0;
    border-radius: 0;
    box-shadow: -100vw 0 0 var(--primary), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Adjust sidebar padding for RTL pages to match LTR page edge distance */
html[dir="rtl"] .sidebar {
    margin-left: 0;
    margin-right: 0;
    padding: 1.25rem;
    box-shadow: 100vw 0 0 var(--primary), 0 2px 8px rgba(0, 0, 0, 0.05);
    width: var(--sidebar-width);
    min-width: var(--sidebar-min-width);
    max-width: var(--sidebar-max-width);
}



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

/* Styles for links within the sidebar */
.sidebar .page-link {
    display: block;
    padding-block: 0.55rem;
    padding-inline: 1rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF; /* White text for the dark teal sidebar background */
    background-color: transparent; /* Explicitly transparent background */
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    margin-bottom: 0.35rem;
    -webkit-tap-highlight-color: transparent;
}

/* Language-specific sidebar font stacks to avoid missing glyphs in Safari */
html[lang="ar"] .sidebar,
html[lang="fa"] .sidebar,
html[lang="ps"] .sidebar,
html[lang="ur"] .sidebar {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Arial Unicode MS', sans-serif;
}

html[lang="bn"] .sidebar,
html[lang="bn-BD"] .sidebar,
html[lang="bn-IN"] .sidebar {
    font-family: 'Bangla Sangam MN', 'Kohinoor Bangla', 'Mukta Mahee', 'Noto Sans Bengali', 'Arial Unicode MS', 'Segoe UI', sans-serif;
}

/* Indent subpages in the sidebar */

.sidebar .page-link.subpage {
    margin: 0.1rem 0; /* Keep a subtle gap between siblings */
    background-color: transparent;
    color: #FFFFFF;
    border-color: transparent;
    padding-inline-start: 2.25rem;
}

html[dir="rtl"] .sidebar .page-link.subpage {
    padding-inline-start: 1rem;
    padding-inline-end: 2.25rem;
}

.sidebar .page-link:hover,
.sidebar .page-link:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Original subtle highlight */
    color: #FFFFFF; /* Keep text white */
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
}

.sidebar .page-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
}

/* Highlighting for the active page's link in the sidebar */
.sidebar .page-link.active-sidebar-item {
    background-color: rgba(255, 255, 255, 0.12); /* Subtle highlight without fill */
    color: #FFFFFF; /* Keep text white */
    font-weight: bold;
    border-color: rgba(255, 255, 255, 0.6); /* Clean border on all sides */
}

.sidebar .page-link.subpage.active-sidebar-item {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
}

/* RTL support for active item */
html[dir="rtl"] .sidebar .page-link.active-sidebar-item {
    border-color: rgba(255, 255, 255, 0.6);
}

/* 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.3rem 0.6rem;     /* compact: ~5px 10px */
    border: none;
    border-radius: 4px;         /* smaller radius */
    cursor: pointer;
    font-size: 0.9rem;          /* slightly smaller font */
    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: auto;           /* remove fixed min-height */
    gap: 0.4rem;                /* smaller gap */
    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.25rem 0.5rem;   /* more compact */
    font-size: 0.8rem;
    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;
}

/* === Sidebar: RTL-safe logical properties === */

/* Base (works for both LTR/RTL) */
.sidebar .page-link{
  display:block;
  padding-block: .60rem;
  padding-inline: .9rem;              /* instead of padding-left/right */
  border-radius: 6px;                 /* keep button curvature consistent */
  text-align: start;                  /* start = left in LTR, right in RTL */
  border: 2px solid transparent;      /* reserve space for active outline */
}

.sidebar .page-link.subpage{
  margin: .1rem 0;
  padding-inline-start: 2.1rem;       /* indent children logically */
  background: transparent;
  color: #fff;
  border-color: transparent;
}

.sidebar .page-link.subpage:hover{
  transform: none;
}

.sidebar .page-link.subpage.active-sidebar-item{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.85);
}

/* Active row highlight – no side assumption */
.sidebar .active-sidebar-item{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.85);
}

/* Flip only what’s asymmetric when in RTL */
html[dir="rtl"] .sidebar h3 { text-align: end; }  /* header aligns right */

/* --- Online tracker: bidi-safe layout --- */
.language-bar .visitor-counter { direction: inherit !important; }

/* Keep label then number in both directions, and isolate the number as LTR */
.language-bar .visitor-count {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
}

.language-bar #visitorCountNumber {
  direction: ltr !important;
  unicode-bidi: isolate;            /* stops the number from flipping in RTL */
  margin-inline-start: .25rem;      /* spacing after the label/colon */
}

/* Country badges should always render LTR tokens like "AU 1" correctly */
.language-bar .country-badge {
  direction: ltr !important;
  unicode-bidi: isolate;
}

/* Put the tracker on the “far side” in both dirs */
/* No special margins needed in RTL; order handled by row-reverse */

/* -------------- 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;
}

/* ---------------- Canonical Article + Arabic UI ---------------- */

/* Arabic-specific tuning
   NOTE: Do not change root font-size here, as it scales rem-based
   components (e.g., header/logo) and makes them appear larger only on
   Arabic pages. Content sizing for RTL is handled below via
   .article[dir="rtl"]. */
/* Font-size-adjust removed - caused rendering issues */

article { width: 100%; }
article h1, article h2, article h3 { font-weight: 700; margin: 0.8em 0 0.6em; }
article h1 { text-wrap: balance; hyphens: auto; }
article h1.brand br { display: none; }
article h1.brand span + span::before { content: " "; }
article h1.brand {
    text-align: center;
    max-width: 40ch;
    margin: 0.8em 0 0.6em;
    margin-inline: auto;
    text-wrap: balance;
}
article h1.brand span {
    display: block;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
article h1.brand span:not(:last-child)::after { content: ""; }
/* Brand title for each article (first H1) */
article h1:first-of-type {
    text-align: center;
    max-width: 40ch;
    margin: 0.8em 0 0.8em;
    margin-inline: auto;
}
.ck-content p { margin: 0 0 1em; }
.ck-content blockquote { margin: 1rem 0; padding-inline-start: 1rem; border-inline-start: 3px solid #e6e6e6; }
.ck-content figure.ayah { margin: 1rem 0; }
.ck-content figure.ayah figcaption { font-size: .95em; opacity: .75; margin-top: .25rem; }

/* Direction-aware defaults for public content */
.main-content :where([dir="rtl"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Arial Unicode MS', sans-serif;
    font-size: 20px;
    line-height: 1.8;
}

.main-content :where([dir="rtl"]) :where(p, li, blockquote, td, th, dd, dt) {
    font-size: inherit;
    line-height: inherit;
}

.main-content :where([dir="ltr"]) {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

.main-content :where([dir="ltr"]) :where(p, li, blockquote, td, th, dd, dt) {
    font-size: inherit;
    line-height: inherit;
}

/* RTL default body size (public pages):
   Make saved RTL content comfortable to read without inline font sizes. */
article[dir="rtl"] { font-size: 20px; line-height: 1.8; }
/* Ensure body elements inherit the article sizing so JS controls can scale them */
article[dir="rtl"] p,
article[dir="rtl"] li,
article[dir="rtl"] blockquote,
article[dir="rtl"] td,
article[dir="rtl"] th,
article[dir="rtl"] dd,
article[dir="rtl"] dt { font-size: inherit; line-height: inherit; }

/* LTR default body size (public pages) */
article[dir="ltr"] { font-size: 18px; line-height: 1.85; }
article[dir="ltr"] p,
article[dir="ltr"] li,
article[dir="ltr"] blockquote,
article[dir="ltr"] td,
article[dir="ltr"] th,
article[dir="ltr"] dd,
article[dir="ltr"] dt { font-size: inherit; line-height: inherit; }

.content-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1.25rem;
    color: #374151;
    font-size: 0.95rem;
}

.content-toolbar--rtl {
    direction: rtl;
    text-align: right;
}

.content-toolbar__read-time {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1f2937;
    margin-inline-start: auto;
}

.content-toolbar__label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7280;
}

.content-toolbar__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-weight: 600;
    line-height: 1.05;
}

.content-toolbar__icon {
    width: 1rem;
    height: 1rem;
    color: var(--primary, #2563eb);
}

.content-toolbar__approx {
    font-size: 0.85rem;
    color: #6b7280;
}

.content-toolbar__value {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.content-toolbar__unit {
    margin-inline-start: 0.25rem;
    font-weight: 500;
    color: #4b5563;
}

@media (max-width: 640px) {
    .content-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .content-toolbar--rtl {
        flex-direction: column;
        align-items: stretch;
        direction: rtl;
    }
    .content-toolbar__chip {
        width: fit-content;
        max-width: 100%;
    }
    .content-toolbar .font-size-controls {
        margin-inline-start: 0;
        margin-inline-end: 0;
        justify-content: flex-start;
    }
    .content-toolbar__read-time {
        margin-inline-start: 0;
    }
    .content-toolbar__value,
    .content-toolbar__unit,
    .content-toolbar__minutes,
    .content-toolbar__value span {
        white-space: nowrap;
    }
}

.font-size-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-bottom: 0;
    color: #4b5563;
    font-size: 0.9rem;
}

.content-toolbar .font-size-controls {
    margin-inline-start: 0;
}

.font-size-controls__buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.content-toolbar--rtl .font-size-controls__buttons {
    flex-direction: row-reverse;
}

.font-size-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.font-size-controls button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.font-size-controls button:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.font-size-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Guard: neutralize hard-coded left/right alignment that might sneak in */
article[dir="rtl"] [style*="text-align:left"]  { text-align: start !important; }
article[dir="ltr"] [style*="text-align:right"] { text-align: start !important; }

/* Isolate LTR runs inside RTL paragraphs (created by sanitizer) */
.bdi-ltr { direction: ltr; unicode-bidi: isolate; }
/* Comfortable defaults for authored content on public pages */
/* Default font-size for LTR content only - RTL has its own rules above */
.ck-content:not([dir="rtl"]) { font-size: 1.125rem; line-height: 1.8; }

/* (Removed multiline H1 span/br normalization rules) */

.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;
    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;
}

/* Stable visitor count number - prevent layout shifts with tight spacing */
#visitorCountNumber {
    display: inline-flex;
    justify-content: flex-end; /* keep extra width on the left so the separator stays tight */
    align-items: center;
    min-width: 2ch; /* supports double digits without a visual jump */
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.visitor-countries {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0; /* separators manage spacing */
    flex-wrap: wrap;
}

.country-badge {
    display: flex;
    align-items: center;
    gap: 0;
    color: #555;
    font-weight: 400;
    white-space: nowrap;
    min-width: unset !important; /* override legacy inline widths from older scripts */
    text-align: left !important;
}

/* Add a subtle separator dot between countries with balanced spacing */
.visitor-countries .country-badge + .country-badge::before {
    content: '\2022';
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    color: currentColor;
    opacity: 0.6;
    margin-inline-start: 0.28rem;
    margin-inline-end: 0.24rem;
}

/* Matching separator after the count for consistent spacing */
.language-bar .visitor-count::after {
    content: '\2022';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    color: currentColor;
    opacity: 0.6;
    margin-inline-start: 0.28rem;
    margin-inline-end: 0.24rem;
}

/* Simplified: keep list LTR for consistent rendering across directions */
.language-bar .visitor-countries { direction: ltr !important; unicode-bidi: isolate; }

/* 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"],
input[type="number"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: .5rem .7rem;   /* compact global control height */
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* -------------- 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;
}

/*
  WHY: Matching the critical CSS fix so the skip link stays hidden without
  pushing the document off-canvas in RTL; revealed on focus with logical inset.
*/
.skip-link {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    clip: auto;
    clip-path: none;
    inline-size: auto;
    block-size: auto;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    padding: .5rem 1rem;
    background: #fff;
    color: #000;
    z-index: 10000;
    border-radius: 6px;
}

.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 */
    width: 100%;
    overflow-x: hidden;
    gap: 20px;
}

.sidebar {
    flex: 0 0 var(--sidebar-width);
    min-width: var(--sidebar-min-width);
    max-width: var(--sidebar-max-width);
    float: none;
    order: 1;
    /* direction follows document unless overridden */
}

/* RTL sidebar layout adjustments */
html[dir="rtl"] .sidebar {
    float: none !important;
    order: 2 !important;
}

.main-content {
    width: 100%;
    max-width: 100%;
    flex: 1 1 0;
    min-width: 0;
    order: 2;
    float: none;
    /* direction controlled by content wrapper */
    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 */
    overflow-x: hidden; /* Prevent RTL content from creating horizontal scroll */
}

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

/* The article’s dir attribute is the source of truth */
.main-content .article[dir="rtl"] { direction: rtl !important; text-align: start; }
.main-content .article[dir="ltr"] { direction: ltr !important; text-align: start; }



/* 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) {
    footer .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .sidebar {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .language-select-wrapper,
    .language-bar .language-select {
        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;
        min-width: 0 !important;
        margin: 0 0 1rem 0 !important;
        float: none !important;
        order: 1 !important;   /* place sidebar (menu) first */
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: 1.25rem !important;
        flex: 1 1 auto !important;
    }

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

    .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 */

/* Related pages – reuse paginator button styling */
.subpages-list {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}

.subpages-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #495057;
    text-transform: uppercase;
}

.subpages-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.subpages-li {
    margin: 0;
    list-style: none;
}
.subpages-li::marker { content: ''; }

.subpages-link {
    display: flex;
    align-items: center; justify-content: space-between;
    text-decoration: none;
    padding: 12px 18px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #222;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.subpages-link:hover,
.subpages-link:focus {
    background-color: #e9ecef;
    border-color: #adb5bd;
    text-decoration: none;
    color: #222;
    outline: none;
}

.subpages-link--active {
    background: linear-gradient(180deg, #f0f7ff, #e4f1ff);
    border-color: #74c0fc;
    color: #0c4a6e;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(116, 192, 252, 0.35);
    cursor: default;
    pointer-events: none;
}

.subpages-link--active:hover {
    background: linear-gradient(180deg, #f0f7ff, #e4f1ff);
    border-color: #74c0fc;
    color: #0c4a6e;
    transform: none;
}

.subpages-link::after {
    display: none;
}

.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;
    max-width: 100%;
    overflow-x: hidden;
}
.ltr-text {
    direction: ltr;
    text-align: left;
    max-width: 100%;
    overflow-x: hidden;
}
/* 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; /* separators manage spacing */
}
/* ---- 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 */
/* Related pages – reuse paginator button styling */
.subpages-list {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}

.subpages-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #495057;
    text-transform: uppercase;
}

.subpages-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.subpages-li { margin: 0; }

.subpages-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 12px 18px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #222;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.subpages-link:hover,
.subpages-link:focus {
    background-color: #e9ecef;
    border-color: #adb5bd;
    text-decoration: none;
    color: #222;
    outline: none;
}
.subpages-link::after {
    display: none;
}


/* 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;
  }
}

/* Hide CKEditor document title/subtitle in public articles */
article .document-title,
article .document-subtitle { display: none !important; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}