/**
 * SMART SOLUTION - OJS 3.5 Academic Journal Theme
 *
 * NOTE: pkp_brand_footer and ss_brand_credit are intentionally hidden
 * per site administrator request.
 * Designed by SMART SOLUTIONS (https://smartsolutionsx.com)
 *
 * IMPORTANT: This stylesheet EXTENDS the default OJS theme.
 * It overrides only visual/design properties, never layout structure.
 * The default theme's responsive navigation and JS remain fully intact.
 *
 * =========================================================
 * TABLE OF CONTENTS
 * 1.  CSS Custom Properties (Design Tokens)
 * 2.  Global Base Overrides
 * 3.  Typography
 * 4.  Islamic Star Background Pattern
 * 5.  Header & Site Name
 * 6.  Navigation Menus
 * 7.  Homepage
 * 8.  Issue Listings
 * 9.  Article Summary Cards
 * 10. Article Detail Page
 * 11. Sidebar Blocks
 * 12. Buttons
 * 13. Forms & Inputs
 * 14. Tables
 * 15. Alerts & Notifications
 * 16. Breadcrumbs & Pagination
 * 17. Footer + SMART SOLUTIONS Credit
 * 18. RTL (Arabic) Overrides
 * 19. Responsive Breakpoints
 * 20. Accessibility
 * =========================================================
 */

/* ==========================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================== */
:root {
    --ss-green-dark:   #0a3d2e;   /* Very dark forest green */
    --ss-green-mid:    #145a3c;   /* Deep emerald */
    --ss-green-light:  #e8f5f0;   /* Pale mint */
    --ss-navy:         #1a2744;   /* Deep navy */
    --ss-gold:         #b8860b;   /* Muted antique gold */
    --ss-gold-bright:  #d4a017;   /* Warm gold for hovers */
    --ss-beige:        #f7f4ef;   /* Warm ivory background */
    --ss-sand:         #e8dcc8;   /* Sand dividers */
    --ss-white:        #ffffff;
    --ss-charcoal:     #1c1c1e;   /* Near-black body text */
    --ss-gray-dark:    #3d3d3d;
    --ss-gray-mid:     #6b7280;
    --ss-gray-light:   #d1d5db;
    --ss-error:        #8b1a1a;
    --ss-font-body:    'Outfit', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
    --ss-font-arabic:  'Tajawal', 'Amiri', sans-serif;
    --ss-font-heading: 'Outfit', 'Tajawal', Georgia, serif;
    --ss-radius-sm:    4px;
    --ss-radius-md:    8px;
    --ss-radius-lg:    12px;
    --ss-radius-pill:  999px;
    --ss-shadow-sm:    0 2px 6px rgba(10,61,46,.06);
    --ss-shadow-md:    0 4px 14px rgba(10,61,46,.09);
    --ss-shadow-lg:    0 8px 28px rgba(10,61,46,.14);
    --ss-transition:   all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ==========================================================
   2. GLOBAL BASE OVERRIDES
   ========================================================== */
body {
    font-family: var(--ss-font-body) !important;
    background-color: var(--ss-beige) !important;
    color: var(--ss-charcoal) !important;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ss-green-mid) !important;
    transition: var(--ss-transition) !important;
}
a:hover {
    color: var(--ss-gold) !important;
    text-decoration: underline !important;
}

/* ==========================================================
   3. TYPOGRAPHY
   ========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ss-font-heading) !important;
    color: var(--ss-green-dark) !important;
    font-weight: 700 !important;
}

/* ==========================================================
   4. ISLAMIC STAR BACKGROUND PATTERN (Very subtle)
   ========================================================== */
.pkp_structure_page {
    background-color: var(--ss-beige) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l4.5 13.8L48 5.4l-9.2 11.1L52.5 18l-13.5 3L44 34l-10.8-8.7L30 38l-3.2-12.7L16 34l5-13-13.5-3L22.2 16.5 13 5.4l13.5 8.4z' fill='%230a3d2e' fill-opacity='0.025' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ==========================================================
   5. HEADER & SITE NAME
   ========================================================== */
.pkp_structure_head {
    background: linear-gradient(160deg, var(--ss-green-dark) 0%, #0f4f38 100%) !important;
    border-bottom: 4px solid var(--ss-gold) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.20) !important;
}

/* Subtle Islamic pattern overlay in header */
.pkp_structure_head::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l4.5 13.8L48 5.4l-9.2 11.1L52.5 18l-13.5 3L44 34l-10.8-8.7L30 38l-3.2-12.7L16 34l5-13-13.5-3L22.2 16.5 13 5.4l13.5 8.4z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.pkp_structure_head {
    position: relative;
}
.pkp_structure_head > * {
    position: relative;
    z-index: 1;
}

/* Journal name & Logo */
.pkp_site_name_wrapper {
    display: flex !important;
    align-items: center !important;
    min-height: 80px !important;
    padding: 10px 0 !important;
}
.pkp_site_name {
    color: var(--ss-white) !important;
    width: 100% !important;
}
.pkp_site_name a,
.pkp_site_name a:visited {
    color: var(--ss-white) !important;
    font-family: var(--ss-font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important; /* Slightly bigger text size */
    text-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
    text-decoration: none !important;
}
.pkp_site_name a:hover {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
}

/* Image Logo styling overrides */
.pkp_site_name a.is_img img {
    max-height: 120px !important;  /* Make the logo image larger */
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: var(--ss-transition) !important;
}

/* Responsive adjustment for small screens */
@media (max-width: 767px) {
    .pkp_site_name a.is_img img {
        max-height: 80px !important; /* Slightly scaled down on mobile but still prominent */
    }
    .pkp_site_name a {
        font-size: 1.3rem !important;
    }
}

/* ==========================================================
   6. NAVIGATION MENUS
   ========================================================== */

/* ── Primary nav links (in header, on dark bg) ── */
.pkp_navigation_primary > li > a,
.pkp_nav_list > li > a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--ss-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px !important;
    transition: var(--ss-transition) !important;
    border-bottom: 2px solid transparent !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_nav_list > li > a:hover,
.pkp_navigation_primary > li.current > a {
    color: var(--ss-gold-bright) !important;
    background-color: rgba(255,255,255,.07) !important;
    border-bottom-color: var(--ss-gold-bright) !important;
    text-decoration: none !important;
}

/* ── Dropdown submenus ── white background, dark text ── */
.pkp_navigation_primary .pkp_nav_list ul,
.pkp_navigation_primary ul ul,
.pkp_nav_list ul {
    background-color: var(--ss-white) !important;
    border: 2px solid var(--ss-green-dark) !important;
    border-radius: var(--ss-radius-md) !important;
    box-shadow: var(--ss-shadow-lg) !important;
    padding: 4px 0 !important;
}
.pkp_navigation_primary .pkp_nav_list ul a,
.pkp_navigation_primary ul ul a,
.pkp_nav_list ul a {
    color: var(--ss-green-dark) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 10px 18px !important;
    display: block !important;
    border-bottom: 1px solid var(--ss-gray-light) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: none !important;
    transition: var(--ss-transition) !important;
}
.pkp_navigation_primary .pkp_nav_list ul a:last-child,
.pkp_navigation_primary ul ul a:last-child,
.pkp_nav_list ul a:last-child {
    border-bottom: none !important;
}
.pkp_navigation_primary .pkp_nav_list ul a:hover,
.pkp_navigation_primary ul ul a:hover,
.pkp_nav_list ul a:hover {
    background-color: var(--ss-green-light) !important;
    color: var(--ss-green-mid) !important;
    text-decoration: none !important;
}

/* ── User navigation topbar ── */
.pkp_navigation_user > li > a,
.pkp_nav_list_user > li > a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    transition: var(--ss-transition) !important;
}
.pkp_navigation_user > li > a:hover,
.pkp_nav_list_user > li > a:hover {
    color: var(--ss-gold-bright) !important;
    text-decoration: none !important;
    background-color: rgba(255,255,255,.08) !important;
    border-radius: var(--ss-radius-sm);
}
/* User dropdown */
.pkp_navigation_user ul,
.pkp_nav_list_user ul {
    background-color: var(--ss-white) !important;
    border: 2px solid var(--ss-green-dark) !important;
    border-radius: var(--ss-radius-md) !important;
    box-shadow: var(--ss-shadow-lg) !important;
}
.pkp_navigation_user ul a,
.pkp_nav_list_user ul a {
    color: var(--ss-green-dark) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
    display: block !important;
    background: none !important;
    border-bottom: 1px solid var(--ss-gray-light) !important;
}
.pkp_navigation_user ul a:last-child,
.pkp_nav_list_user ul a:last-child {
    border-bottom: none !important;
}
.pkp_navigation_user ul a:hover,
.pkp_nav_list_user ul a:hover {
    background-color: var(--ss-green-light) !important;
    color: var(--ss-green-mid) !important;
    text-decoration: none !important;
}

/* ── Mobile hamburger button ── */
.pkp_nav_toggle {
    color: var(--ss-white) !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: var(--ss-radius-sm) !important;
}
.pkp_nav_toggle:hover {
    background: rgba(255,255,255,.20) !important;
    color: var(--ss-white) !important;
}

/* ==========================================================
   7. HOMEPAGE
   ========================================================== */

/* Journal description / about block */
.homepage_about {
    background: linear-gradient(135deg, var(--ss-white) 0%, var(--ss-green-light) 100%) !important;
    border-inline-start: 5px solid var(--ss-green-mid);
    border-radius: var(--ss-radius-lg);
    padding: 28px 32px !important;
    margin-bottom: 28px;
    box-shadow: var(--ss-shadow-sm);
}
.homepage_about h2 {
    color: var(--ss-green-dark) !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
}

/* Current issue title */
.current_issue .page_title,
.current_issue h2 {
    color: var(--ss-green-dark) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    border-bottom: 3px solid var(--ss-gold) !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
}

/* ==========================================================
   8. ISSUE LISTINGS / ARCHIVE
   ========================================================== */
.obj_issue_toc h2,
.obj_issue_toc .section_title {
    color: var(--ss-green-dark) !important;
    font-weight: 800 !important;
    border-bottom: 2px solid var(--ss-gold) !important;
    padding-bottom: 6px !important;
    margin-bottom: 16px !important;
}

/* Issue cover image hover */
.obj_issue_summary .cover img {
    border-radius: var(--ss-radius-md);
    box-shadow: var(--ss-shadow-sm);
    transition: var(--ss-transition);
}
.obj_issue_summary .cover img:hover {
    transform: translateY(-3px);
    box-shadow: var(--ss-shadow-md);
}

/* ==========================================================
   9. ARTICLE SUMMARY CARDS
   ========================================================== */
.obj_article_summary {
    background: var(--ss-white) !important;
    border: 1px solid var(--ss-gray-light) !important;
    border-radius: var(--ss-radius-lg) !important;
    padding: 22px 26px !important;
    margin-bottom: 18px !important;
    box-shadow: var(--ss-shadow-sm) !important;
    transition: var(--ss-transition) !important;
    position: relative !important;
    border-inline-start: 4px solid var(--ss-green-mid) !important;
}
.obj_article_summary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ss-shadow-md) !important;
    border-color: rgba(20,90,60,.22) !important;
}

/* Article title link */
.obj_article_summary .title a {
    color: var(--ss-green-dark) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
}
.obj_article_summary .title a:hover {
    color: var(--ss-gold) !important;
    text-decoration: none !important;
}

/* Authors */
.obj_article_summary .authors {
    color: var(--ss-gray-dark) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Galley PDF/HTML link buttons */
.obj_galley_link {
    background-color: var(--ss-green-dark) !important;
    color: var(--ss-white) !important;
    border: none !important;
    border-radius: var(--ss-radius-md) !important;
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    transition: var(--ss-transition) !important;
    display: inline-block !important;
}
.obj_galley_link:hover {
    background-color: var(--ss-gold) !important;
    color: var(--ss-charcoal) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* DOI badge */
.obj_article_summary .doi a,
.doi_value a {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--ss-green-light) !important;
    color: var(--ss-green-dark) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: var(--ss-radius-pill) !important;
    border: 1px solid rgba(20,90,60,.2) !important;
    text-decoration: none !important;
    transition: var(--ss-transition) !important;
}
.obj_article_summary .doi a:hover,
.doi_value a:hover {
    background: var(--ss-green-mid) !important;
    color: var(--ss-white) !important;
}

/* ==========================================================
   10. ARTICLE DETAIL PAGE
   ========================================================== */
.obj_article_details {
    background: var(--ss-white) !important;
    border-radius: var(--ss-radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--ss-shadow-sm) !important;
}

.obj_article_details h1,
.obj_article_details .page_title {
    color: var(--ss-green-dark) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    border-bottom: 2px solid var(--ss-sand) !important;
    padding-bottom: 14px !important;
    margin-bottom: 20px !important;
}

/* Abstract block */
.obj_article_details .item.abstract {
    background: var(--ss-green-light) !important;
    border-inline-start: 4px solid var(--ss-green-mid) !important;
    border-radius: 0 var(--ss-radius-md) var(--ss-radius-md) 0 !important;
    padding: 20px 24px !important;
    margin: 20px 0 !important;
}
.obj_article_details .item.abstract h3,
.obj_article_details .item.abstract .label {
    color: var(--ss-green-dark) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}
.obj_article_details .item.abstract p {
    color: var(--ss-charcoal) !important;
    line-height: 1.85 !important;
}

/* Keywords */
.obj_article_details .item.keywords .label {
    color: var(--ss-green-dark) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
}
.obj_article_details .item.keywords .value {
    color: var(--ss-gray-dark) !important;
    font-size: 0.875rem !important;
}

/* ==========================================================
   11. SIDEBAR BLOCKS
   ========================================================== */
.pkp_structure_sidebar {
    background: var(--ss-white) !important;
    border: 1px solid var(--ss-gray-light) !important;
    border-radius: var(--ss-radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--ss-shadow-sm) !important;
}

.pkp_block .title {
    font-family: var(--ss-font-heading) !important;
    color: var(--ss-green-dark) !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 2px solid var(--ss-gold) !important;
    padding-bottom: 6px !important;
    margin-bottom: 12px !important;
}

.pkp_block a {
    color: var(--ss-green-mid) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}
.pkp_block a:hover {
    color: var(--ss-gold) !important;
    text-decoration: none !important;
}

/* ==========================================================
   12. BUTTONS
   ========================================================== */
.pkp_button,
.cmp_button,
button[class*="pkp"],
input[type="submit"],
.btn-primary {
    background-color: var(--ss-green-dark) !important;
    color: var(--ss-white) !important;
    border: 2px solid var(--ss-green-dark) !important;
    border-radius: var(--ss-radius-md) !important;
    font-family: var(--ss-font-body) !important;
    font-weight: 700 !important;
    transition: var(--ss-transition) !important;
}
.pkp_button:hover,
.cmp_button:hover,
input[type="submit"]:hover,
.btn-primary:hover {
    background-color: var(--ss-gold) !important;
    border-color: var(--ss-gold) !important;
    color: var(--ss-charcoal) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* ==========================================================
   13. FORMS & INPUTS
   ========================================================== */
.pkp_form label,
.cmp_form label {
    color: var(--ss-green-dark) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="search"],
.pkp_form input[type="url"],
.pkp_form textarea,
.pkp_form select {
    background: var(--ss-white) !important;
    color: var(--ss-charcoal) !important;
    border: 2px solid var(--ss-gray-light) !important;
    border-radius: var(--ss-radius-md) !important;
    font-family: var(--ss-font-body) !important;
    font-size: 1rem !important;
    padding: 10px 14px !important;
    transition: var(--ss-transition) !important;
}
.pkp_form input:focus,
.pkp_form textarea:focus,
.pkp_form select:focus {
    border-color: var(--ss-green-mid) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(20,90,60,.12) !important;
}

/* ==========================================================
   14. TABLES
   ========================================================== */
.pkp_listing table thead,
table thead {
    background-color: var(--ss-green-dark) !important;
    color: var(--ss-white) !important;
}
.pkp_listing table thead th,
table thead th {
    color: var(--ss-white) !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
}
.pkp_listing table tbody tr:hover,
table tbody tr:hover {
    background-color: var(--ss-green-light) !important;
}
table tbody td {
    color: var(--ss-charcoal) !important;
    font-size: 0.875rem !important;
}

/* ==========================================================
   15. ALERTS & NOTIFICATIONS
   ========================================================== */
.pkp_notification_error,
.pkp_notification_warning,
.pkp_notification_success,
.pkp_notification_information {
    border-radius: var(--ss-radius-md) !important;
    padding: 14px 20px !important;
    border-inline-start: 4px solid !important;
    font-weight: 500 !important;
}
.pkp_notification_error    { background: #f8d7da !important; color: #721c24 !important; border-color: var(--ss-error) !important; }
.pkp_notification_warning  { background: #fef3cd !important; color: #856404 !important; border-color: #ffc107 !important; }
.pkp_notification_success  { background: #d4edda !important; color: #155724 !important; border-color: #28a745 !important; }
.pkp_notification_information { background: #d1ecf1 !important; color: #0c5460 !important; border-color: #17a2b8 !important; }

/* ==========================================================
   16. BREADCRUMBS & PAGINATION
   ========================================================== */

/* Breadcrumbs */
.pkp_breadcrumbs a {
    color: var(--ss-green-mid) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}
.pkp_breadcrumbs a:hover {
    color: var(--ss-gold) !important;
}
.pkp_breadcrumbs .separator {
    color: var(--ss-gray-light) !important;
}

/* Pagination */
.pkp_pagination a {
    color: var(--ss-green-dark) !important;
    border: 2px solid var(--ss-gray-light) !important;
    border-radius: var(--ss-radius-md) !important;
    background: var(--ss-white) !important;
    font-weight: 600 !important;
    transition: var(--ss-transition) !important;
}
.pkp_pagination a:hover {
    background: var(--ss-green-dark) !important;
    color: var(--ss-white) !important;
    border-color: var(--ss-green-dark) !important;
    text-decoration: none !important;
}
.pkp_pagination .current {
    background: var(--ss-green-dark) !important;
    color: var(--ss-white) !important;
    border-color: var(--ss-green-dark) !important;
}

/* ==========================================================
   17. FOOTER + SMART SOLUTIONS CREDIT
   ========================================================== */
.pkp_structure_footer_wrapper {
    background-color: var(--ss-green-dark) !important;
    border-top: 5px solid var(--ss-gold) !important;
    margin-top: 48px !important;
    position: relative !important;
}

/* Subtle pattern in footer */
.pkp_structure_footer_wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l4.5 13.8L48 5.4l-9.2 11.1L52.5 18l-13.5 3L44 34l-10.8-8.7L30 38l-3.2-12.7L16 34l5-13-13.5-3L22.2 16.5 13 5.4l13.5 8.4z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
}

.pkp_structure_footer {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.78) !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    padding: 32px 20px !important;
}

.pkp_structure_footer a {
    color: var(--ss-gold-bright) !important;
    transition: var(--ss-transition) !important;
}
.pkp_structure_footer a:hover {
    color: var(--ss-white) !important;
    text-decoration: none !important;
}

/* ── Hide only the OJS native 'Developed by PKP' block ── */
.pkp_brand_footer,
.developed_by {
    display: none !important;
}

/* ── "Designed by SMART SOLUTIONS" — keep visible ── */
.ss_brand_credit {
    display: block !important;
    text-align: center !important;
    margin-top: 14px !important;
    padding: 10px 24px !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: var(--ss-font-body) !important;
    letter-spacing: 0.2px !important;
}

.ss_brand_credit a {
    color: var(--ss-gold-bright) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: var(--ss-transition) !important;
    margin-inline-start: 4px !important;
}

.ss_brand_credit a:hover {
    color: var(--ss-white) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
}

/* ==========================================================
   18. RTL (Arabic) OVERRIDES
   ========================================================== */
html[dir="rtl"] body,
[dir="rtl"] {
    font-family: var(--ss-font-arabic) !important;
}

html[dir="rtl"] .obj_article_summary,
[dir="rtl"] .obj_article_summary {
    border-inline-start: 4px solid var(--ss-green-mid);
    border-inline-end: none;
    text-align: right;
}

html[dir="rtl"] .obj_article_details .item.abstract,
[dir="rtl"] .obj_article_details .item.abstract {
    border-inline-start: 4px solid var(--ss-green-mid);
    border-inline-end: none;
    border-radius: 0 var(--ss-radius-md) var(--ss-radius-md) 0;
}

html[dir="rtl"] .pkp_navigation_primary > li > a,
[dir="rtl"] .pkp_navigation_primary > li > a {
    text-align: right;
}

html[dir="rtl"] .homepage_about,
[dir="rtl"] .homepage_about {
    border-inline-start: 5px solid var(--ss-green-mid);
    border-inline-end: none;
}

/* ==========================================================
   19. RESPONSIVE BREAKPOINTS
   ========================================================== */
@media (max-width: 1024px) {
    .obj_article_summary {
        padding: 18px 20px !important;
    }
    .obj_article_details {
        padding: 24px !important;
    }
}

@media (max-width: 768px) {
    .pkp_site_name a {
        font-size: 1.1rem !important;
    }
    .obj_article_summary .title a {
        font-size: 1rem !important;
    }
    .obj_article_details h1 {
        font-size: 1.35rem !important;
    }
    .pkp_structure_sidebar {
        margin-top: 20px !important;
    }
    .ss_brand_credit {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .obj_galley_link {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
    }
    .pkp_structure_footer {
        padding: 24px 16px !important;
    }
}

/* ==========================================================
   20. ACCESSIBILITY
   ========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ss-gold-bright) !important;
    outline-offset: 2px !important;
}