/* South Sudan NOC - Olympic Website CSS - Le Labo Inspired */
:root {
    /* Le Labo Inspired Minimalist Palette */
    --primary-color: #1a1a1a;
    --secondary-color: #8b7355;
    --accent-color: #f5f4f0;
    --text-color: #1a1a1a;
    --light-text: #ffffff;
    --muted-text: #666666;
    --border-color: #e8e6e1;
    --subtle-gray: #f8f7f4;
    --warm-beige: #f2f0ea;
    
    /* South Sudan Accent Colors (used sparingly) */
    --ss-black: #000000;
    --ss-red: #CE1126;
    --ss-white: #FFFFFF;
    --ss-green: #007A3D;
    --ss-blue: #0F47AF;
    --ss-yellow: #FCD116;
    
    /* Olympic Colors (for special elements) */
    --olympic-blue: #0085c3;
    --olympic-yellow: #ffd700;
    --olympic-black: #000000;
    --olympic-green: #009639;
    --olympic-red: #ee334e;
    
    /* Typography
       --font-main / --font-secondary: Inter — body, navigation, forms, buttons.
       --font-display: Montserrat — applied only to top-level page/section
       headlines, so the refresh reads as a brand accent rather than a wholesale
       voice change. */
    --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

/* General Styles - Le Labo Minimalist */
html, body {
    font-family: var(--font-secondary);
    color: var(--text-color);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    height: 100%;
    font-weight: var(--font-weight-light);
    letter-spacing: 0.3px;
    overflow-x: hidden;
    max-width: 100%;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--light-text);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    font-size: 15px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

main.main-content {
    /* Normal flow layout */
}

/* Brand CTA palette — derived from the SSNOC letterhead.
   Primary = Flag Red #CE1126, Secondary = Flag Green #078930.
   Bootstrap's semantic state buttons (.btn-success / .btn-danger / .btn-warning
   / .btn-info) are intentionally not overridden — they're used in admin UI for
   status feedback, not as page CTAs. */

/* Bootstrap primary/secondary overrides */
.btn-primary,
.btn-primary:focus {
    background-color: #CE1126 !important;
    border-color: #CE1126 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: #a30d1d !important;
    border-color: #a30d1d !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #CE1126 !important;
    border-color: #CE1126 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff !important;
    background-color: #CE1126 !important;
    border-color: #CE1126 !important;
}

.btn-secondary,
.btn-secondary:focus {
    background-color: #078930 !important;
    border-color: #078930 !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active {
    background-color: #056224 !important;
    border-color: #056224 !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    color: #078930 !important;
    border-color: #078930 !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #ffffff !important;
    background-color: #078930 !important;
    border-color: #078930 !important;
}

/* Custom CTA classes */
.btn-olympic {
    display: inline-block;
    padding: 14px 32px;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    font-weight: var(--font-weight-medium);
    border: 1px solid #CE1126;
    background-color: #CE1126;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    border-radius: 0;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.btn-olympic:hover {
    background-color: #a30d1d;
    color: #ffffff;
    border-color: #a30d1d;
    text-decoration: none;
}

.btn-olympic-secondary {
    background-color: #078930;
    color: #ffffff;
    border: 1px solid #078930;
}

.btn-olympic-secondary:hover {
    background-color: #056224;
    color: #ffffff;
    border-color: #056224;
    text-decoration: none;
}

/* Minimalist Link Styles */
a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

/* Olympic IOC Style Header & Navigation */
header {
    position: relative;
    z-index: 100;
}

/* Pin the navbar's inner container to viewport width on every page so the
   brand and links sit at the same edge positions everywhere. Without this,
   pages other than the home page constrain the navbar to Bootstrap's
   responsive container max-width and the logo/links visibly shift inward. */
.navbar > .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar {
    padding: 0.75rem 0;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    font-family: 'Inter', sans-serif;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-logo {
    height: 70px;
    width: auto;
    transition: transform 0.3s ease;
}

.navbar-brand:hover .brand-logo {
    transform: scale(1.05);
}

.brand-text h1 {
    font-family: var(--font-main);
    font-size: 1.2rem;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
}

.brand-text small {
    font-size: 0.7rem;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0;
    display: block;
    opacity: 0.7;
    font-weight: var(--font-weight-light);
    color: var(--muted-text);
    text-transform: uppercase;
}

.navbar-nav .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    color: #1a1a1a !important;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 4px;
    margin: 0 0.25rem;
}

.navbar-nav .nav-link:hover {
    color: #0081c8 !important;
    background-color: rgba(0, 129, 200, 0.05);
}

.navbar-nav .dropdown-toggle::after {
    margin-left: 0.5rem;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

/* Branded navbar variant — toggled on by the admin Site Settings page.
   Letterhead pattern + purple→magenta gradient, with light typography to read
   against the dark backdrop. The classic white navbar above remains the
   default; both variants share layout, only colours change. */
.navbar.navbar-branded {
    background:
        linear-gradient(135deg, rgba(61, 26, 78, 0.94) 0%, rgba(106, 42, 122, 0.90) 50%, rgba(194, 24, 91, 0.88) 100%),
        url('/images/nav-pattern.png') center / cover repeat-x !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 6px rgba(61, 26, 78, 0.18);
}

.navbar-branded .brand-text h1,
.navbar-branded .brand-text small {
    color: #ffffff;
}

.navbar-branded .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-branded .navbar-nav .nav-link:hover {
    color: #FCDD09 !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-branded .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-branded .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Solid Deep Purple variant — flat brand purple, no pattern. */
.navbar.navbar-solid-purple {
    background-color: #3D1A4E !important;
    border-bottom-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 6px rgba(61, 26, 78, 0.18);
}

.navbar-solid-purple .brand-text h1,
.navbar-solid-purple .brand-text small {
    color: #ffffff;
}

.navbar-solid-purple .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-solid-purple .navbar-nav .nav-link:hover {
    color: #FCDD09 !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-solid-purple .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-solid-purple .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Light + Flag Stripe variant — classic white nav with a thin red/yellow/green
   gradient stripe along the bottom edge. Text colours stay as in classic. */
.navbar.navbar-light-stripe {
    background-color: #ffffff !important;
    position: relative;
    border-bottom: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.navbar.navbar-light-stripe::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(to right,
        #CE1126 0%, #CE1126 33%,
        #FCDD09 33%, #FCDD09 66%,
        #078930 66%, #078930 100%);
}

/* Dark variant — charcoal background, white text, flag-red hover and a
   thin red bottom accent. */
.navbar.navbar-dark-variant {
    background-color: #1a1a1a !important;
    border-bottom: 2px solid #CE1126;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.navbar-dark-variant .brand-text h1,
.navbar-dark-variant .brand-text small {
    color: #ffffff;
}

.navbar-dark-variant .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-dark-variant .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(206, 17, 38, 0.85);
}

.navbar-dark-variant .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-dark-variant .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Dropdown menus stay white for legibility — content density is too high to
   render comfortably on the gradient. Just the trigger colours change. */

/* Keep page-level titles on one line on desktop. On narrow viewports, allow
   wrapping so long titles don't overflow the container. The home-page
   .hero-title is intentionally excluded — its multi-line layout is original. */
.section-title,
.header-title,
.form-title,
.programs-title,
.confirmation-heading,
.page-title {
    white-space: nowrap;
    overflow: visible;
}

/* Display typography — Montserrat is applied only to top-level page and
   section headlines. Body, navigation, forms, and buttons stay in Inter. */
.hero-title,
.section-title,
.header-title,
.form-title,
.programs-title,
.confirmation-heading,
.page-title,
.modern-hero-title {
    font-family: var(--font-display);
}

@media (max-width: 991.98px) {
    .section-title,
    .header-title,
    .form-title,
    .programs-title,
    .confirmation-heading,
    .page-title {
        white-space: normal;
    }
}

.btn-get-involved {
    background-color: #CE1126;
    color: #ffffff !important;
    border: 1px solid #CE1126;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.btn-get-involved:hover,
.btn-get-involved:focus {
    background-color: #a30d1d;
    border-color: #a30d1d;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-get-involved:active {
    background-color: #7a0915;
    border-color: #7a0915;
    transform: translateY(0);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 0.75rem 0;
    margin-top: 0.25rem;
    background-color: #ffffff;
    min-width: 220px;
}

.dropdown-item {
    font-weight: 400;
    padding: 0.75rem 1.5rem;
    transition: all 0.15s ease;
    color: #1a1a1a;
    font-size: 0.875rem;
    border: none;
}

.dropdown-item:hover {
    background-color: rgba(0, 129, 200, 0.05);
    color: #0081c8;
}

.dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #e9ecef;
}


/* Le Labo Minimalist Hero Section */
.hero-section {
    min-height: 70vh;
    background-color: #f8f6f2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    text-align: center;
    padding: 4rem 0;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(248, 246, 242, 0.9) 0%, rgba(242, 240, 234, 0.4) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 2.8rem;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    color: #1a1a1a;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: var(--font-weight-normal);
    line-height: 1.8;
    color: #333333;
    letter-spacing: 0.5px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Le Labo Section Styles */
section {
    padding: 4rem 0;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 3px;
    margin-bottom: 4rem;
    text-transform: uppercase;
    position: relative;
    font-weight: var(--font-weight-light);
    color: var(--text-color);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: var(--secondary-color);
    margin: 1.5rem auto 0;
}

/* Le Labo Minimalist Card Styles */
.card-enhanced {
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    transition: all 0.2s ease;
    overflow: hidden;
    background: var(--light-text);
}

.card-enhanced:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-enhanced .card-header {
    background-color: var(--accent-color);
    color: var(--text-color);
    border: none;
    padding: 1.5rem;
    border-radius: 0;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.card-enhanced .card-body {
    padding: 2rem;
    font-weight: var(--font-weight-light);
    line-height: 1.7;
}

/* Le Labo Background Sections */
.bg-olympic-light {
    background-color: var(--subtle-gray);
}

.bg-south-sudan {
    background-color: var(--primary-color);
    color: var(--light-text);
}

/* Le Labo Stats Section */
.stats-section {
    background-color: var(--subtle-gray);
    padding: 4rem 0;
}

.stat-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--light-text);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: var(--font-weight-light);
    color: var(--text-color);
    font-family: var(--font-main);
}

.stat-label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted-text);
    margin-top: 1rem;
}

/* Le Labo Board Member Cards */
.board-member-card {
    background: var(--light-text);
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.2s ease;
    height: 100%;
}

.board-member-card:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
}

.board-member-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.2s ease;
}

.board-member-card:hover .board-member-image {
    filter: grayscale(0%);
}

.board-member-info {
    padding: 2rem;
}

.board-member-name {
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.board-member-position {
    color: var(--secondary-color);
    font-weight: var(--font-weight-normal);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* Le Labo Minimalist Footer */
.footer {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 2rem 0 1rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.footer h5 {
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-weight-normal);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

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

.footer-links a:hover {
    color: var(--accent-color);
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icons a {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.social-icons a:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Le Labo Form Styles */
.form-control {
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-light);
    background-color: var(--light-text);
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.15rem rgba(139, 115, 85, 0.1);
    outline: none;
}

.form-label {
    font-weight: var(--font-weight-normal);
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-on-hover {
    transition: transform 0.3s ease;
}

.scale-on-hover:hover {
    transform: scale(1.05);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }

    .hero-description {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .brand-text h1 {
        font-size: 1.2rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    section {
        padding: 3rem 0;
    }
    
    .hero-section {
        min-height: 70vh;
    }
    
    .hero-title {
        font-size: 2rem;
    }
}

/* Focus Styles for Accessibility */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 71, 175, 0.25);
}

/* Additional Utility Classes */
.text-olympic-blue { color: var(--olympic-blue); }
.text-olympic-yellow { color: var(--olympic-yellow); }
.text-olympic-green { color: var(--olympic-green); }
.text-olympic-red { color: var(--olympic-red); }
.text-ss-green { color: var(--ss-green); }
.text-ss-blue { color: var(--ss-blue); }
.text-ss-red { color: var(--ss-red); }
.text-ss-yellow { color: var(--ss-yellow); }

.bg-olympic-gradient {
    background: linear-gradient(135deg, var(--olympic-blue), var(--olympic-green));
}

/* Hero Slideshow Styles */
.hero-slideshow {
    position: relative;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #000;
    margin: 0;
    padding: 0;
}

.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Diagonal Overlay */
.hero-diagonal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg, rgba(248, 246, 242, 0.98) 0%, rgba(248, 246, 242, 0.95) 40%, rgba(248, 246, 242, 0.4) 41%, transparent 70%);
    z-index: 2;
}

.hero-content-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-text-content {
    padding: 2rem 0;
}

.hero-slideshow .hero-title {
    font-size: 3rem;
    font-weight: var(--font-weight-semibold);
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero-slideshow .hero-subtitle {
    font-size: 1.4rem;
    font-weight: var(--font-weight-normal);
    color: #333;
    margin-bottom: 1rem;
}

.hero-slideshow .hero-description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    font-weight: var(--font-weight-light);
}

/* Olympic Rings in Slideshow */
.hero-slideshow .olympic-rings {
    display: inline-flex;
    gap: 8px;
}

.hero-slideshow .ring {
    width: 35px;
    height: 35px;
    border: 3px solid;
    border-radius: 50%;
    display: inline-block;
}

.hero-slideshow .ring.blue { border-color: #0085c3; }
.hero-slideshow .ring.yellow { border-color: #ffd700; }
.hero-slideshow .ring.black { border-color: #000000; }
.hero-slideshow .ring.green { border-color: #009639; }
.hero-slideshow .ring.red { border-color: #ee334e; }

/* Navigation Arrows */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #1a1a1a;
}

.slide-arrow:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.slide-arrow-left {
    left: 30px;
}

.slide-arrow-right {
    right: 30px;
}

/* Slide Indicators */
.slide-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: #fff;
    width: 30px;
    border-radius: 6px;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-diagonal-overlay {
        background: linear-gradient(105deg, rgba(248, 246, 242, 0.98) 0%, rgba(248, 246, 242, 0.95) 50%, rgba(248, 246, 242, 0.4) 51%, transparent 80%);
    }
    
    .hero-slideshow .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-slideshow .hero-subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .hero-slideshow {
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
    }
    
    .hero-diagonal-overlay {
        background: linear-gradient(180deg, rgba(248, 246, 242, 0.98) 0%, rgba(248, 246, 242, 0.95) 60%, rgba(248, 246, 242, 0.4) 61%, transparent 90%);
    }
    
    .hero-slideshow .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-slideshow .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-slideshow .hero-description {
        font-size: 1rem;
    }
    
    .slide-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .slide-arrow-left {
        left: 15px;
    }
    
    .slide-arrow-right {
        right: 15px;
    }
}

.bg-south-sudan-gradient {
    background: linear-gradient(135deg, var(--ss-blue), var(--ss-green));
}


/* Footer uses a single, logo-free pattern overlay (the cropped nav pattern)
   so no SSNOC mark is duplicated against the footer's content. On mobile
   the pattern is dropped entirely and the gradient stands on its own. */
.site-footer {
    position: relative;
    background:
        linear-gradient(135deg, rgba(61, 26, 78, 0.96) 0%, rgba(106, 42, 122, 0.94) 50%, rgba(194, 24, 91, 0.92) 100%),
        url('/images/nav-pattern.png') center / cover no-repeat;
    color: #ffffff;
    padding: 30px 0 20px 0;
    border: none;
    overflow: hidden;
}

.site-footer > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .site-footer {
        background: linear-gradient(135deg, #3D1A4E 0%, #6A2A7A 50%, #C2185B 100%);
    }
}

.footer-section {
    margin-bottom: 30px;
}

.footer-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #FCDD09;
    text-decoration: none;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: #CE1126;
    color: #ffffff;
    transform: translateY(-2px);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.18);
    margin: 40px 0 30px 0;
}

.footer-copyright {
    color: #cccccc;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.footer-legal a {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: #FCDD09;
    text-decoration: none;
}

.footer-legal .separator {
    color: #666666;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 20px 0;
    }
    
    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* RTL Support for Arabic Language */
html[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

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

/* Navigation RTL adjustments */
html[dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
}

html[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: auto;
}

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

html[dir="rtl"] .brand-text {
    margin-right: 15px;
    margin-left: 0;
    text-align: right;
}

/* Bootstrap utilities RTL overrides */
html[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .text-start {
    text-align: right !important;
}

html[dir="rtl"] .text-end {
    text-align: left !important;
}

html[dir="rtl"] .text-md-end {
    text-align: left !important;
}

html[dir="rtl"] .float-start {
    float: right !important;
}

html[dir="rtl"] .float-end {
    float: left !important;
}

/* Dropdown RTL adjustments */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

/* Cards and content RTL adjustments */
html[dir="rtl"] .card {
    text-align: right;
}

html[dir="rtl"] .btn {
    text-align: center;
}

/* Hero section RTL adjustments */
html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero-cta-buttons {
    justify-content: flex-start;
}

/* Footer RTL adjustments */
html[dir="rtl"] .footer-legal {
    justify-content: flex-start;
}

html[dir="rtl"] .social-links {
    justify-content: flex-start;
}

/* Icons and arrows RTL adjustments */
html[dir="rtl"] .slide-arrow-left {
    right: 20px;
    left: auto;
}

html[dir="rtl"] .slide-arrow-right {
    left: 20px;
    right: auto;
}

html[dir="rtl"] .press-nav-prev {
    right: -25px;
    left: auto;
}

html[dir="rtl"] .press-nav-next {
    left: -25px;
    right: auto;
}

/* Form RTL adjustments */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .form-label {
    text-align: right;
}

/* ===========================================================================
   News section variants — selected via the Site Settings admin page.
   The classic carousel keeps its existing inline styles in Home/Index.cshtml.
   These three alternatives are lighter and brand-aligned.
   =========================================================================== */

.news-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #C2185B;
    margin-bottom: 0.5rem;
}

.news-eyebrow-light {
    color: #FCDD09;
}

.news-section-heading {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .news-section-heading { font-size: 1.5rem; }
}

/* ---- Compact List ------------------------------------------------------- */
.news-section-compact {
    background: #ffffff;
}

.news-section-compact .news-view-all {
    color: #3D1A4E;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-section-compact .news-view-all:hover {
    color: #C2185B;
}

.news-compact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-compact-item {
    border-top: 1px solid #ececea;
}

.news-compact-item:last-child {
    border-bottom: 1px solid #ececea;
}

.news-compact-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.news-compact-item a:hover {
    background-color: #faf9f7;
}

.news-compact-thumb {
    flex: 0 0 88px;
    width: 88px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    background: #ececea;
}

.news-compact-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-compact-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b0b8;
    background: linear-gradient(135deg, #f4f3ef 0%, #ececea 100%);
}

.news-compact-body {
    flex: 1;
    min-width: 0;
}

.news-compact-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.news-compact-cat {
    color: #C2185B;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-compact-dot {
    color: #c0c0c8;
}

.news-compact-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.news-compact-item a:hover .news-compact-title {
    color: #3D1A4E;
}

/* ---- Magazine ----------------------------------------------------------- */
.news-section-magazine {
    background: #ffffff;
}

.news-magazine-featured {
    display: block;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(61, 26, 78, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-magazine-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(61, 26, 78, 0.12);
    color: inherit;
}

.news-magazine-featured-img {
    aspect-ratio: 16 / 9;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f3ef;
}

.news-magazine-featured-body {
    padding: 1.5rem;
    border-top: 4px solid #C2185B;
}

.news-magazine-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #C2185B;
    margin-bottom: 0.5rem;
}

.news-magazine-featured-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0 0 0.75rem 0;
}

.news-magazine-featured-excerpt {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 0.75rem 0;
}

.news-magazine-meta {
    font-size: 0.8rem;
    color: #888;
}

.news-magazine-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-magazine-mini {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ececea;
    padding: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.news-magazine-mini:hover {
    border-color: #C2185B;
    transform: translateX(2px);
    color: inherit;
}

.news-magazine-mini-img {
    flex: 0 0 110px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f3ef;
}

.news-magazine-mini-body {
    padding: 0.75rem 1rem 0.75rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.news-magazine-mini-date {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6A2A7A;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.news-magazine-mini-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
}

/* ---- Gradient Cards ----------------------------------------------------- */
.news-section-gradient {
    background:
        linear-gradient(135deg, #3D1A4E 0%, #6A2A7A 50%, #C2185B 100%);
    color: #ffffff;
}

.news-gradient-scroll-wrapper {
    /* The scroll container itself doesn't clip its content (so card hover
       transforms aren't cut off), but the inner track is what scrolls. */
    padding: 0 3rem;
}

.news-gradient-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.5rem 0.25rem 1rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.news-gradient-scroll::-webkit-scrollbar {
    height: 6px;
}

.news-gradient-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.news-gradient-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

.news-gradient-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: background-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(4px);
}

.news-gradient-scroll-btn:hover {
    background: rgba(252, 221, 9, 0.85);
    color: #1a1a1a;
}

.news-gradient-scroll-btn--left  { left: 0; }
.news-gradient-scroll-btn--right { right: 0; }

@media (max-width: 768px) {
    .news-gradient-scroll-wrapper { padding: 0 1rem; }
    .news-gradient-scroll-btn { display: none; }
}

.news-gradient-card {
    display: block;
    position: relative;
    flex: 0 0 320px;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 2rem 1.5rem 1.75rem;
    color: #ffffff;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.news-gradient-card:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(252, 221, 9, 0.5);
    color: #ffffff;
    transform: translateY(-3px);
}

.news-gradient-date {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #FCDD09;
    color: #1a1a1a;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    min-width: 48px;
}

.news-gradient-date .day {
    display: block;
    font-size: 1.25rem;
}

.news-gradient-date .mo {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-top: 0.15rem;
}

.news-gradient-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FCDD09;
    margin-bottom: 0.5rem;
}

.news-gradient-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;
    padding-right: 60px;
    color: #ffffff;
}

.news-gradient-excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1rem 0;
}

.btn-news-gradient-cta {
    display: inline-block;
    background: #FCDD09;
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.7rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-news-gradient-cta:hover {
    background: #ffffff;
    color: #3D1A4E;
    transform: translateY(-2px);
}

/* ---- Light Cards ------------------------------------------------------- */
/* Same scrolling layout as Gradient Cards, but on a neutral light-gray
   surface so the cards read as crisp white panels with brand-coloured accents
   instead of glass tiles on a dark gradient. */
.news-section-light-cards {
    background: linear-gradient(135deg, #ececea 0%, #f4f3ef 50%, #e6e6e8 100%);
    color: #1a1a1a;
}

.news-light-scroll-wrapper {
    padding: 0 3rem;
}

.news-light-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.5rem 0.25rem 1rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.news-light-scroll::-webkit-scrollbar {
    height: 6px;
}

.news-light-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.news-light-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

.news-light-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(61, 26, 78, 0.85);
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.news-light-scroll-btn:hover {
    background: #C2185B;
    color: #ffffff;
}

.news-light-scroll-btn--left  { left: 0; }
.news-light-scroll-btn--right { right: 0; }

@media (max-width: 768px) {
    .news-light-scroll-wrapper { padding: 0 1rem; }
    .news-light-scroll-btn { display: none; }
}

.news-light-card {
    display: block;
    position: relative;
    flex: 0 0 320px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 2rem 1.5rem 1.75rem;
    color: #1a1a1a;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.news-light-card:hover {
    border-color: #C2185B;
    color: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.news-light-date {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #FCDD09;
    color: #1a1a1a;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    min-width: 48px;
}

.news-light-date .day {
    display: block;
    font-size: 1.25rem;
}

.news-light-date .mo {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-top: 0.15rem;
}

.news-light-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #C2185B;
    margin-bottom: 0.5rem;
}

.news-light-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;
    padding-right: 60px;
    color: #1a1a1a;
}

.news-light-excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #555;
    margin: 0 0 1rem 0;
}

.btn-news-light-cta {
    display: inline-block;
    background: #3D1A4E;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.7rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-news-light-cta:hover {
    background: #C2185B;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ===========================================================================
   Pre-launch curtain.
   Full-viewport overlay shown while the site is in soft-launch mode. Anyone
   who knows the passcode can dismiss it; dismissal persists in localStorage.
   The HTML and JS live in Views/Shared/_Layout.cshtml.
   =========================================================================== */
.site-curtain {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background:
        radial-gradient(circle at 20% 0%, rgba(252, 221, 9, 0.12) 0%, transparent 40%),
        linear-gradient(135deg, #3D1A4E 0%, #6A2A7A 50%, #C2185B 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

.site-curtain__inner {
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.site-curtain__logo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    padding: 0.6rem;
    margin-bottom: 1.5rem;
    object-fit: contain;
}

.site-curtain__title {
    font-family: 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.site-curtain__subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #FCDD09;
    margin-bottom: 1.75rem;
    font-weight: 600;
}

.site-curtain__copy {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.site-curtain__form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.site-curtain__input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-size: 1rem;
    font-family: inherit;
}

.site-curtain__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.site-curtain__input:focus {
    outline: none;
    border-color: #FCDD09;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(252, 221, 9, 0.25);
}

.site-curtain__btn {
    padding: 0.75rem 1.75rem;
    background: #FCDD09;
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.site-curtain__btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.site-curtain__btn:active {
    transform: translateY(0);
}

.site-curtain__error {
    color: #FCDD09;
    min-height: 1.5rem;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 480px) {
    .site-curtain__title { font-size: 2.25rem; letter-spacing: 2px; }
}

/* Arabic font adjustments */
html[dir="rtl"] body {
    font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.8;
}