/*
 * Thonem Website v9.7 — Unified bilingual site chrome
 * Keeps the approved v9.6 homepage header/footer visual language on every page.
 */

/* Header: one visual and spacing system across the complete site. */
.site-header{
  position:relative!important;
  top:auto!important;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid rgba(15,34,50,.07)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px) saturate(150%);
}
.site-header.scrolled{box-shadow:none!important}
.nav-wrap{
  width:min(100% - 40px,1320px)!important;
  height:68px!important;
  gap:20px!important;
}
.nav{
  gap:21px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-items:center!important;
  white-space:nowrap;
}
.nav a{
  position:relative;
  font-size:13px!important;
  font-weight:730!important;
  color:#182935!important;
  letter-spacing:-.012em!important;
  padding:24px 0 22px;
}
.nav a:after{
  content:"";
  position:absolute;
  left:50%;right:50%;bottom:14px;
  height:2px;border-radius:99px;
  background:var(--ref-orange);
  transition:left .18s ease,right .18s ease;
}
.nav a:hover:after,.nav a.active:after{left:0;right:0}
.nav a:hover,.nav a.active{color:var(--ref-orange)!important}
.nav-actions{gap:11px!important;white-space:nowrap}
.nav-actions .btn-small{padding:11px 18px!important;font-size:13px!important}
.nav-actions .lang-link{min-width:max-content}
.search-trigger{flex:0 0 38px}

/* Mobile navigation remains complete, with every important route reachable. */
.mobile-nav{
  max-height:calc(100vh - 68px);
  overflow:auto;
  overscroll-behavior:contain;
  background:#fffdf9!important;
  border-color:var(--ref-line)!important;
}
.mobile-nav a{color:#263844!important}
.mobile-nav a:hover{color:var(--ref-orange)!important}

/* Footer: use the compact homepage footer everywhere. */
.footer{
  padding:16px 0 18px!important;
  background:#fffdf9!important;
  border-top:0!important;
  color:var(--ref-ink)!important;
}
.footer .shell{width:min(100% - 40px,1260px)!important}
.ref-footer-main{
  display:grid!important;
  grid-template-columns:1.05fr 2.55fr!important;
  gap:54px!important;
  align-items:start!important;
  padding:12px 0 14px!important;
}
.ref-footer-brand .brand{display:inline-flex!important}
.ref-footer-brand .brand-logo{width:38px!important;height:38px!important}
.ref-footer-brand .brand-name{font-size:22px!important}
.ref-footer-brand p{
  max-width:285px!important;
  margin:8px 0 0!important;
  color:#718087!important;
  font-size:11px!important;
  line-height:1.55!important;
}
.ref-footer-cols{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:30px!important;
}
.ref-foot-col strong{
  display:block!important;
  margin:0 0 6px!important;
  color:#172b37!important;
  font-size:11px!important;
  font-weight:850!important;
}
.ref-foot-col a{
  display:block!important;
  color:#5b6b73!important;
  text-decoration:none!important;
  font-size:11px!important;
  line-height:1.55!important;
  width:max-content;
  max-width:100%;
}
.ref-foot-col a:hover{color:var(--ref-orange)!important}
.ref-footer-bottom{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:20px!important;
  padding-top:10px!important;
  border-top:1px solid #efded2!important;
  color:#7f8d93!important;
  font-size:10px!important;
}

/* Arabic gets the same chrome geometry while respecting RTL reading order. */
html[dir="rtl"] .nav-wrap{direction:rtl}
html[dir="rtl"] .nav{margin-right:auto!important;margin-left:auto!important}
html[dir="rtl"] .nav a{letter-spacing:0!important;font-weight:650!important}
html[dir="rtl"] .nav-actions{direction:rtl}
html[dir="rtl"] .search-trigger:before{transform:scaleX(-1)}
html[dir="rtl"] .ref-footer-main,
html[dir="rtl"] .ref-footer-cols,
html[dir="rtl"] .ref-footer-bottom{text-align:right;direction:rtl}
html[dir="rtl"] .ref-foot-col strong,
html[dir="rtl"] .ref-foot-col a{letter-spacing:0!important}
html[dir="rtl"] .ref-footer-brand .brand{direction:ltr}

/* Collapse a little earlier because the restored desktop nav has six primary links. */
@media(max-width:1120px){
  .nav{gap:15px!important}
  .nav a{font-size:12px!important}
  .nav-actions{gap:8px!important}
  .nav-actions .btn-small{padding:10px 14px!important}
}
@media(max-width:1020px){
  .nav,.nav-actions{display:none!important}
  .menu-btn{display:block!important}
  .mobile-nav.open{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;padding:12px 24px 24px!important;border-top:1px solid var(--ref-line)!important}
  .mobile-nav a{padding:12px 0!important;border-bottom:1px solid rgba(55,40,30,.08)!important;font-size:13px!important}
}
@media(max-width:820px){
  .ref-footer-main{grid-template-columns:1fr!important;gap:26px!important}
  .ref-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 32px!important}
}
@media(max-width:640px){
  .nav-wrap,.footer .shell{width:min(100% - 28px,1320px)!important}
  .nav-wrap{height:64px!important}
  .mobile-nav{max-height:calc(100vh - 64px)}
  .mobile-nav.open{grid-template-columns:1fr!important;padding:8px 20px 22px!important}
  .ref-footer-main{padding-top:8px!important}
  .ref-footer-cols{grid-template-columns:1fr 1fr!important;gap:22px 18px!important}
  .ref-footer-bottom{align-items:flex-start!important;flex-direction:column!important;gap:6px!important}
}
@media(max-width:420px){
  .ref-footer-cols{grid-template-columns:1fr!important}
}
/* Homepage previously had a narrower navigation container for four links; v9.7 restores six. */
.reference-home .nav-wrap{max-width:1320px!important}
@media(max-width:1120px){.reference-home .nav-actions .btn-small{padding:10px 14px!important}}