/*
  UI/UX Overhaul for Site Header & Footer
  - Responsive, RTL-aware, accessible
  - Works with existing Tailwind utilities but provides deterministic design
*/
:root{
  --gold:#E4B34E;--ink-900:#181b22;--ink-800:#1e222a;--ink-700:#23262f;--white:#fff;--muted:#8892a6;
}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg, rgba(35,38,47,.96) 0%, rgba(35,38,47,.90) 60%, rgba(35,38,47,.88) 100%);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(10px)}
.site-header .header-bar{min-height:64px}
.site-header .brand img,.site-header .custom-logo{height:40px;width:auto}
.primary-nav{position:relative}
.navbar-nav{display:flex;gap:.25rem;align-items:center}
.navbar-nav .nav-item{position:relative}
.navbar-nav .nav-link{color:rgba(255,255,255,.92);border-radius:10px;display:inline-block}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--gold);background:rgba(255,255,255,.06)}

/* Active indicator line */
.nav-active-indicator{position:absolute;bottom:-8px;height:3px;background:var(--gold);border-radius:2px;transition:all .2s ease;inset-inline-start:0;width:0}

/* Progress bar */
.progress-track{height:3px;background:rgba(255,255,255,.06)}
.progress-track .progress-bar{height:100%;width:0;background:linear-gradient(90deg, rgba(228,179,78,1) 0%, rgba(228,179,78,.6) 100%)}

/* Mobile Drawer - Modern Redesign */
.mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.08);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  display:none;
  z-index:1000
}

.mobile-menu.open{display:block}

.mobile-menu .menu-sheet{
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-start:0;
  width:100%;
  background:linear-gradient(135deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.08) 25%,
    rgba(255,255,255,.04) 50%,
    rgba(0,0,0,.04) 75%,
    rgba(0,0,0,.08) 100%);
  backdrop-filter:blur(25px) brightness(1.15) contrast(1.1);
  -webkit-backdrop-filter:blur(25px) brightness(1.15) contrast(1.1);
  border-inline-start:1px solid rgba(228,179,78,.15);
  box-shadow:
    -3px 0 35px rgba(0,0,0,.08),
    inset 1px 0 0 rgba(228,179,78,.06),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.02);
  color:#fff;
  transform:translateX(-100%);
  transition:transform .4s cubic-bezier(0.4,0,.2,1)
}

[dir="rtl"] .mobile-menu .menu-sheet{
  inset-inline-start:auto;
  inset-inline-end:0;
  transform:translateX(100%);
  border-inline-start:none;
  border-inline-end:1px solid rgba(228,179,78,.15)
}

.mobile-menu.open .menu-sheet{transform:translateX(0)}

.mobile-menu .menu-close{
  position:absolute;
  top:16px;
  inset-inline-end:16px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.15);
  color:#fff;
  border-radius:12px;
  width:36px;
  height:36px;
  font-size:12px;
  backdrop-filter:blur(10px);
  transition:all .25s ease;
  display:flex;
  align-items:center;
  justify-content:center
}

.mobile-menu .menu-close:hover{
  background:rgba(228,179,78,.2);
  border-color:rgba(228,179,78,.4);
  transform:scale(1.05)
}

.mobile-menu .menu-list{
  padding:80px 20px 20px;
  margin:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px
}

.mobile-menu .menu-list li a{
  display:block;
  padding:10px 16px;
  border-radius:12px;
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.02em;
  transition:all .25s cubic-bezier(0.4,0,.2,1);
  position:relative;
  overflow:hidden
}

.mobile-menu .menu-list li a::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg,
    rgba(228,179,78,.08) 0%,
    rgba(228,179,78,.04) 100%);
  opacity:0;
  transition:opacity .25s ease
}

.mobile-menu .menu-list li a:hover{
  background:rgba(255,255,255,.08);
  color:var(--gold);
  transform:translateX(4px);
  box-shadow:0 4px 12px rgba(228,179,78,.15)
}

.mobile-menu .menu-list li a:hover::before{opacity:1}

.mobile-menu .menu-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 20px 28px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:auto;
  flex-wrap:nowrap;
  height:28px;
  min-height:28px
}

.mobile-menu .menu-actions .menu-social{
  display:flex;
  align-items:center;
  gap:8px;
  height:28px
}

/* Simple Modern Language Button */
.mobile-menu .menu-actions .language_btn{
  margin-inline-start:auto;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  width:50px;
  height:28px;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.9);
  cursor:pointer;
  transition:all .25s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  position:relative
}

.mobile-menu .menu-actions .language_btn::before{
  content:'AR | EN';
  white-space:nowrap;
  letter-spacing:0
}

.mobile-menu .menu-actions .language_btn:hover{
  background:rgba(228,179,78,.15);
  border-color:rgba(228,179,78,.3);
  color:var(--gold);
  transform:translateY(-1px)
}

.mobile-menu .menu-actions .language_btn:active{
  transform:translateY(0) scale(.95)
}

/* New Language Toggle Switch - Custom Design */
.switch {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}

.switch > span {
  position: absolute;
  top: 14px;
  pointer-events: none;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
}

input.check-toggle-round-flat:checked ~ .off {
  color: #E4B34E;
}

input.check-toggle-round-flat:checked ~ .on {
  color: #fff;
}

.switch > span.on {
  left: 0;
  padding-left: 2px;
  color: #E4B34E;
}

.switch > span.off {
  right: 0;
  padding-right: 4px;
  color: #fff;
}

.check-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.check-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.check-toggle-round-flat + label {
  padding: 2px;
  width: 97px;
  height: 35px;
  background-color: #E4B34E;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}

input.check-toggle-round-flat + label:before, 
input.check-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}

input.check-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #E4B34E;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}

input.check-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 48px;
  background-color: #fff;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -o-transition: margin 0.2s;
  transition: margin 0.2s;
}

input.check-toggle-round-flat:checked + label:after {
  margin-left: 44px;
}

/* RTL/LTR Direction Support */
[dir="rtl"] .mobile-menu .menu-sheet {
  transform: translateX(100%);
  border-inline-start: none;
  border-inline-end: 1px solid rgba(228, 179, 78, 0.15);
}

[dir="rtl"] .mobile-menu.open .menu-sheet {
  transform: translateX(0);
}

[dir="rtl"] .mobile-menu .menu-list li a:hover {
  transform: translateX(-4px);
}

[dir="rtl"] .mobile-menu .menu-close {
  left: 16px;
  right: auto;
}

/* Language Toggle RTL Support */
[dir="rtl"] .switch {
  direction: ltr; /* Keep toggle itself LTR for consistent behavior */
}

[dir="rtl"] input.check-toggle-round-flat:checked + label:after {
  margin-left: 44px; /* Same animation regardless of page direction */
}

/* Enhanced RTL/LTR Support - Force direction changes */
html[dir="rtl"], 
body.rtl,
.rtl {
  direction: rtl !important;
}

html[dir="ltr"], 
body.ltr,
.ltr {
  direction: ltr !important;
}

/* Text alignment adjustments based on direction */
html[dir="rtl"] body,
body.rtl {
  text-align: right;
}

html[dir="ltr"] body,
body.ltr {
  text-align: left;
}

/* Ensure content flows correctly */
html[dir="rtl"] .container,
html[dir="rtl"] .header-bar,
html[dir="rtl"] .mobile-menu .menu-list,
body.rtl .container,
body.rtl .header-bar,
body.rtl .mobile-menu .menu-list {
  direction: rtl !important;
}

html[dir="ltr"] .container,
html[dir="ltr"] .header-bar,
html[dir="ltr"] .mobile-menu .menu-list,
body.ltr .container,
body.ltr .header-bar,
body.ltr .mobile-menu .menu-list {
  direction: ltr !important;
}

/* Fix for specific elements that might resist direction changes */
html[dir="rtl"] * {
  direction: inherit;
}

html[dir="ltr"] * {
  direction: inherit;
}

/* Smooth transitions when direction changes */
.mobile-menu .menu-sheet,
.mobile-menu .menu-list li a {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), all 0.25s ease;
}

/* Clean Social Media Icons */
.mobile-menu .menu-actions .menu-social a{
  width:28px;
  height:28px;
  border-radius:0;
  background:transparent;
  border:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  font-size:16px;
  transition:all .25s cubic-bezier(0.4,0,.2,1);
  position:relative;
  text-decoration:none
}

.mobile-menu .menu-actions .menu-social a:hover{
  color:var(--gold);
  transform:translateY(-1px) scale(1.1);
  text-shadow:0 2px 8px rgba(228,179,78,.4)
}

.mobile-menu .menu-actions .menu-social a:active{
  transform:translateY(0) scale(.95)
}

/* Modern animated entry for menu items */
.mobile-menu.open .menu-list li{
  animation:slideInFromLeft .4s ease-out forwards;
  opacity:0;
  transform:translateX(-20px)
}

.mobile-menu.open .menu-list li:nth-child(1){animation-delay:.1s}
.mobile-menu.open .menu-list li:nth-child(2){animation-delay:.15s}
.mobile-menu.open .menu-list li:nth-child(3){animation-delay:.2s}
.mobile-menu.open .menu-list li:nth-child(4){animation-delay:.25s}
.mobile-menu.open .menu-list li:nth-child(5){animation-delay:.3s}
.mobile-menu.open .menu-list li:nth-child(6){animation-delay:.35s}
.mobile-menu.open .menu-list li:nth-child(7){animation-delay:.4s}
.mobile-menu.open .menu-list li:nth-child(8){animation-delay:.45s}

@keyframes slideInFromLeft{
  to{
    opacity:1;
    transform:translateX(0)
  }
}

/* Glass morphism effect enhancement */
.mobile-menu .menu-sheet::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,
    rgba(228,179,78,.03) 0%,
    transparent 20%,
    transparent 80%,
    rgba(228,179,78,.03) 100%);
  pointer-events:none
}

/* Floating action button style for close button */
.mobile-menu .menu-close{
  box-shadow:
    0 4px 12px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.1)
}

.mobile-menu .menu-close:active{
  transform:scale(.95)
}

/* Special effects for ultra small screens */
@media (max-width:375px){
  .mobile-menu .menu-list li a{font-size:13px;padding:8px 14px}
  .mobile-menu .menu-list{padding:70px 16px 16px}
  .mobile-menu .menu-actions{
    padding:16px 16px 24px;
    gap:12px;
    height:26px;
    min-height:26px
  }
  
  .mobile-menu .menu-actions .menu-social{
    height:26px
  }
  
  .mobile-menu .menu-actions .language_btn{
    width:44px;
    height:26px;
    font-size:10px
  }
  
  .mobile-menu .menu-actions .menu-social a{
    width:26px;
    height:26px;
    padding:0;
    font-size:15px
  }
}

/* Extra visual polish for larger mobile screens */
@media (min-width:400px){
  .mobile-menu .menu-sheet{
    border-inline-start:2px solid rgba(228,179,78,.2)
  }
  
  [dir="rtl"] .mobile-menu .menu-sheet{
    border-inline-end:2px solid rgba(228,179,78,.2)
  }
}

/* Footer */
.site-footer{background:linear-gradient(180deg, #23262f 0%, #181b22 100%);color:#fff;border-top:1px solid rgba(255,255,255,.06);padding:48px 0 28px}
.site-footer .footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr .9fr;gap:28px;align-items:start}
.site-footer .footer-title{font-weight:800;font-size:1.05rem;margin:0 0 .6rem;color:#fff}
@media (max-width: 1024px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.site-footer .footer-grid{grid-template-columns:1fr;gap:18px}}
.site-footer .footer-brand .brand img{height:40px}
.site-footer .muted{color:rgba(255,255,255,.7);margin-top:6px}
.site-footer .footer-nav .footer-menu{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer .footer-nav .footer-menu a{color:rgba(255,255,255,.9)}
.site-footer .footer-nav .footer-menu a:hover{color:var(--gold)}
.site-footer .footer-contact .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer .footer-contact .btn-contact{display:inline-block;background:var(--gold);color:#000;padding:8px 12px;border-radius:10px}
.site-footer .footer-contact .btn-contact:hover{filter:brightness(.95)}
.site-footer .footer-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.site-footer .footer-actions .socials{display:flex;gap:10px}
.site-footer .footer-actions .socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.15);color:#fff}
.site-footer .footer-actions .socials a:hover{background:rgba(255,255,255,.08);color:var(--gold)}
.site-footer .footer-meta{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}

/* Mobile simplification */
@media (max-width:640px){
  .site-footer .footer-brand p.muted{display:none}
  .site-footer .footer-nav,.site-footer .footer-actions{display:none}
  .site-footer .footer-contact{order:2}
  .site-footer .footer-grid{gap:12px}
}

/* RTL fixes for nav indicator spacing */
[dir="rtl"] .navbar-nav .nav-link{letter-spacing:0}
[dir="rtl"] .nav-active-indicator{inset-inline-start:auto;inset-inline-end:0}

/* Mobile section badge */
.section-badge{position:fixed;bottom:72px;inset-inline-end:12px;background:rgba(0,0,0,.75);color:#fff;padding:8px 12px;border-radius:12px;font-weight:700;font-size:.9rem;box-shadow:0 4px 10px rgba(0,0,0,.18);opacity:0;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:1001}
.section-badge.show{opacity:1;transform:translateY(0)}
@media (min-width:641px){.section-badge{display:none}}