:root {
  /* Images */
  --bg-url: url("../images/background-main.jpg");
  --bg-opacity: 1;
  --bg-blur: 0px;

  /* Theme */
  --accent: #b76e4b;
  --text: #222;
  --muted: #666;
  --bg: #fff8f2;
  --ja-ink: #5b3d1e;

  /* Background scale (desktop default). Occasions = same as Home */
  --bg-scale-main: 64%;
  --bg-scale-occasion: 64%;

  /* Space reserved for fixed header (update this if header height changes) */
  --sticky-offset: 140px;
}

/* === Background layer (behind everything) === */
.background {
  position: fixed;
  inset: 0;
  background-image: var(--bg-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--bg-scale-main);
  opacity: var(--bg-opacity);
  filter: blur(var(--bg-blur));
  z-index: 0;
  transition: opacity .25s ease, background-size .3s ease, background-image .3s ease;
}
.background.fading { opacity: .05; }

/* Base */
html, body { height: 100%; overflow-y: auto; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: transparent;
  color: var(--text);
  line-height: 1.4;
  padding-bottom: 2rem;
}

/* Layering */
.site-header { z-index: 10000; isolation: isolate; }
main, .site-footer { position: relative; z-index: 1; }

/* Container */
.container { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

/* ===== Fixed, fully-transparent header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ja-ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  border: none;
  overflow: visible; /* never clip dropdowns */
}

/* Reserve space under the fixed header so content starts below it */
main {
  padding-top: calc(var(--sticky-offset) + 12px);
  position: relative;
  z-index: 1;
}


/* ===== Header layout ===== */
.header-top {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 18px 0;
}

.brand { grid-column: 1; display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-logo { width: 68px; height: 68px; }

/* Centered title on desktop */
.brand-title {
  grid-column: 2;
  margin: 0;
  font-size: 48px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--ja-ink);
  text-transform: uppercase;
  text-align: center;

  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  pointer-events: none; /* don't block clicks */
}

/* Language buttons */
.site-header .lang-switch {
  grid-column: 3;
  display: flex; gap: 18px;
  direction: ltr;
  margin: 0;
}
.lang-switch .lang-btn,
.lang-switch button {
  border: none; background: transparent; color: var(--ja-ink);
  font-weight: 700; letter-spacing: .5px; cursor: pointer;
  font-size: 20px; padding: 4px 8px; border-radius: 6px;
}
.lang-switch .lang-btn.is-active,
.lang-switch button.is-active,
.lang-switch button.active { background: var(--ja-ink); color: #fff; }

/* ===== Main nav (fixed capsule) ===== */
.main-nav {
  display: flex; align-items: center; gap: 40px;
  justify-content: center;

  padding: 10px 16px;
  margin: 10px auto 0;
  width: fit-content;

  background: linear-gradient(#f6e9cf, #f2dfbf);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  overflow: visible; border-top: none;
}
.main-nav .nav-link,
.main-nav a,
.main-nav button {
  position: relative; text-decoration: none; color: var(--ja-ink);
  font-size: 28px; line-height: 1.2; padding: .2rem 0;
  background: transparent; border: 0; cursor: pointer;
}
.main-nav .nav-link.is-active::after,
.main-nav a.is-active::after,
.main-nav .nav-link:hover::after,
.main-nav a:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 3px; background: var(--ja-ink); border-radius: 2px;
}

/* ===== Occasions dropdown ===== */
.main-nav .has-submenu { position: relative; z-index: 10; }
.main-nav .has-submenu > .nav-link { position: relative; }

.occasions-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 260px; max-width: min(320px, calc(100vw - 32px));
  background: #fffdf8;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
  display: none;
  z-index: 20000;
  text-align: start;
  pointer-events: auto;
}
.occasions-menu .occ-item {
  width: 100%; display: block;
  background: transparent; border: 0; text-align: start; font: inherit;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--ja-ink);
}
.occasions-menu .occ-item:hover,
.occasions-menu .occ-item:focus { background: rgba(0,0,0,.04); outline: none; }

@media (hover:hover) {
  .main-nav .has-submenu:hover > .occasions-menu { display: block; }
}
.main-nav .has-submenu.open > .occasions-menu { display: block; }

/* ===== Sections & footer ===== */
.panel { padding: 1.25rem; }
.home { background: transparent; min-height: auto; display: block; margin-top: 1rem; }
.home h2, .home p { text-shadow: 0 2px 4px rgba(0,0,0,.4); }

.site-footer {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  margin-top: 1rem;
}

/* ===== Background sizing ===== */
body[data-occasion="main"] .background,
body:not([data-occasion="main"]) .background {
  background-size: var(--bg-scale-main) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ===== RTL ===== */
html[lang="ar"] body { direction: rtl; }
html[lang="ar"] .header-top { direction: ltr; }
html[lang="ar"] main,
html[lang="ar"] .panel { text-align: right; }
html[lang="ar"] .main-nav,
html[lang="ar"] .occasions-menu { text-align: start; }

/* ===== Contact / Map ===== */
.contact .map-location { max-width: 240px; margin-top: 8px; }
.contact .map-location iframe {
  width: 100% !important; height: 140px !important;
  border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  :root { --bg-scale-main: 80%; }

  .header-top {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 8px !important;
    padding: 12px 12px 8px !important;
  }

  .brand-title {
    position: static !important; transform: none !important;
    width: 100% !important; text-align: center !important;
    font-size: clamp(28px, 4.8vw, 36px) !important;
    line-height: 1.15 !important; margin: 0 !important; pointer-events: auto !important;
  }

  .site-header .lang-switch {
    position: static !important; transform: none !important;
    margin: 0 !important; gap: 14px !important; justify-content: center !important;
  }

  .main-nav {
    width: 100% !important; max-width: 100% !important;
    margin-top: 6px !important; padding: 8px 10px !important;
    gap: 14px !important; border-radius: 12px !important;
    overflow-x: auto !important; overflow-y: visible !important;
    white-space: nowrap !important; -webkit-overflow-scrolling: touch;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a, .main-nav .nav-link, .main-nav button { flex: 0 0 auto; }

  .main-nav .has-submenu { position: static !important; }
  .main-nav .has-submenu.open > .occasions-menu { display: block !important; }
  .occasions-menu {
    position: fixed !important;
    top: calc(var(--sticky-offset) + 6px) !important;
    left: 50% !important; transform: translateX(-50%) !important;
    width: min(94vw, 400px) !important; max-height: 65vh !important;
    overflow: auto !important; margin-top: 0 !important;
    z-index: 20000 !important; pointer-events: auto !important;
  }

  body.dropdown-open { overflow: hidden; }
}

@media (max-width: 720px) {
  :root { --bg-scale-main: 90%; }
  .container { padding-inline: 14px; }

  .main-nav {
    white-space: normal !important; overflow-x: visible !important;
    flex-wrap: wrap !important; justify-content: center !important;
    gap: 8px 16px !important; padding: 10px 12px !important;
  }
  .main-nav .nav-link, .main-nav a, .main-nav button {
    font-size: 16.5px !important; line-height: 1.2 !important; padding: 6px 6px !important;
  }

  .occasions-menu {
    width: min(92vw, 360px) !important;
    top: calc(var(--sticky-offset) + 4px) !important;
  }

  .contact .map-location { max-width: 100%; }
  .contact .map-location iframe { height: 140px !important; }
}

/* ===== Desktop tweaks for language pills ===== */
@media (min-width: 1200px) {
  .site-header .lang-switch {
    position: absolute; right: -88px; top: 50%;
    transform: translateY(-50%);
    margin: 0; z-index: 6;
  }
}
@media (min-width: 1366px) { .site-header .lang-switch { right: -122px; } }
@media (min-width: 1440px) { .site-header .lang-switch { right: -146px; } }
@media (min-width: 1536px) { .site-header .lang-switch { right: -166px; } }
@media (min-width: 1680px) { .site-header .lang-switch { right: -191px; } }
@media (min-width: 1920px) { .site-header .lang-switch { right: -236px; } }


/* Single-scroller safety */
main, .container, .wrapper, .content, .page, .panel {
  overflow: visible !important;
  max-height: none !important;
}
/* Let the root scroll; body just fills viewport height */
html { overflow-y: auto; }
body { min-height: 100vh; overflow-y: visible; }
/* --- SAFETY: hide any main content that enters the nav band --- */
/* fallback value; JS below will overwrite with the exact pixels */
:root { --no-show: 140px; }

main {
  /* keep layout normal below the nav */
  padding-top: var(--no-show);

  /* invisibly clip anything that goes under the nav */
  -webkit-mask: linear-gradient(transparent 0,
                                transparent var(--no-show),
                                #000 var(--no-show));
          mask: linear-gradient(transparent 0,
                                transparent var(--no-show),
                                #000 var(--no-show));
}
/* Push the brand title down a bit */
.header-top .brand-title {
  margin-top: 10px;   /* adjust this number to taste (10–20px works well) */
  display: inline-block;
}
/* Final authority for grid thumbs — no cropping */
#ja-grid .image-frame{
  aspect-ratio: 2 / 3;           /* or whatever you want */
  overflow: hidden;
  display: flex;
  align-items: flex-start;        /* keep top anchored */
  justify-content: center;
  background: #fff;
}
#ja-grid .image-frame > img,
#ja-grid img.card__img,
#ja-grid img.product-photo,
#ja-grid img.cake-thumb{
  position: static !important;
  display: block !important;
  height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: top center !important;
  background: transparent !important;
}
/* --- Fix: remove accidental duplicate render of the brand title --- */
.brand-title::before,
.brand-title::after {
  content: none !important;     /* kill any cloned text/shadow layers */
}

/* If any duplicate .brand-title exists next to the first, hide it */
.header-top .brand-title ~ .brand-title {
  display: none !important;
}

/* Ensure proper sizing & no clipping */
.header-top { overflow: visible !important; }
.brand-title {
  white-space: nowrap;           /* avoid wrapping into two lines */
  line-height: 1;                /* consistent height */
}
/* Hide the round logo entirely */
.brand {
  display: none !important;
}

/* Style the wordmark */
.brand-title {
  font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif !important;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ja-ink);
  text-transform: uppercase;
  text-align: center;
}

/* Remove any duplicate ghost text */
.brand-title::before,
.brand-title::after {
  content: none !important;
}

/* Adjust font size responsively */
@media (min-width: 1025px) {
  .brand-title {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
  }
}
/* === Wordmark: use normal flow on desktop (no absolute overlay) === */
@media (min-width: 1025px) {
  .brand-title{
    position: static !important;      /* was absolute */
    transform: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 4px 0 0 !important;
    font-size: clamp(36px, 4vw, 52px) !important;  /* smaller */
    line-height: 1.05 !important;
    letter-spacing: 0.08em !important;
  }

  .header-top{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    padding: 14px 0 10px !important;  /* breathing room */
    overflow: visible !important;
  }

  .main-nav{
    margin-top: 16px !important;      /* space between title and nav */
  }

  :root{
    --sticky-offset: 128px;           /* keeps content clear of the fixed header */
  }
}

/* Keep duplicate-title fix */
.brand-title::before,
.brand-title::after { content: none !important; }

/* Hide the SVG logo so only wordmark shows */
.brand { display: none !important; }
/* === Mobile/Tablet: anchor the Occasions menu under its button === */
@media (max-width: 1024px) {
  .site-header,
  .main-nav { overflow: visible !important; }

  .main-nav .has-submenu {
    position: relative !important;   /* anchor for the menu */
    z-index: 10;
  }

  /* place the menu directly under the button, not fixed/centered */
  .occasions-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important; /* under the nav capsule */
    left: 0 !important;               /* align to the left edge of the button/item */
    transform: none !important;
    width: max-content !important;
    max-width: min(92vw, 360px) !important;
    max-height: 65vh !important;
    overflow: auto !important;
    z-index: 20000 !important;
  }

  /* keep the open behavior */
  .main-nav .has-submenu.open > .occasions-menu { display: block !important; }
}
/* ===== Occasions dropdown: same compact width on all screens ===== */

/* Always anchor the menu to its parent item */
.main-nav .has-submenu { position: relative !important; z-index: 10; }

/* Default for ALL viewports */
.occasions-menu{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;                 /* sits under the Occasions item */
  transform: none !important;

  /* compact sizing (overrides old 260–360px rules) */
  width: max-content !important;      /* shrink to fit text */
  min-width: 200px !important;        /* don’t get too tiny */
  max-width: 280px !important;        /* keeps it neat on desktop too */

  /* cosmetics */
  border-radius: 12px !important;
  max-height: 65vh !important;
  overflow: auto !important;
  text-align: start !important;
}

/* Tighter items so the list feels elegant */
.occasions-menu .occ-item{
  padding: 9px 12px !important;
  font-size: 15px !important;
  white-space: nowrap !important;     /* keeps each item on one line */
}

/* Safety on very narrow phones: center and allow wrapping if needed */
@media (max-width: 374px){
  .occasions-menu{
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 92vw !important;
  }
  .occasions-menu .occ-item{ white-space: normal !important; }
}
/* ================================
   FINAL: Fixed header + visible, compact dropdown (all screens)
   ================================ */

/* Header stays fixed and doesn't clip children */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  overflow: visible !important;
  isolation: isolate; /* keep stacking clean */
}

/* Top row must be positioned for absolute children (lang switch) */
.header-top{
  position: relative !important;
  overflow: visible !important;
}

/* Nav anchors the submenu; never clip it */
.main-nav{
  position: relative !important;
  overflow: visible !important;
  z-index: 10001;
}

/* Occasions item = anchor for its menu */
.main-nav .has-submenu{
  position: relative !important;
  z-index: 10002;
}

/* Dropdown placement + sizing (all viewports) */
.occasions-menu{
  position: absolute !important;
  top: calc(100% + 8px) !important;  /* below the capsule */
  left: 0 !important;                 /* align with "Occasions" */
  transform: none !important;

  width: max-content !important;      /* fit content */
  min-width: 200px !important;
  max-width: 280px !important;

  max-height: 65vh !important;
  overflow: auto !important;
  border-radius: 12px !important;
  text-align: start !important;
  z-index: 20000 !important;          /* above header + content */
}

/* Show on hover (desktop) and when JS adds .open */
@media (hover:hover){
  .main-nav .has-submenu:hover > .occasions-menu{ display:block !important; }
}
.main-nav .has-submenu.open > .occasions-menu{ display:block !important; }

/* Mobile/Tablet: prevent horizontal scroll; keep wrapping */
@media (max-width: 1024px){
  html, body{ overflow-x: hidden !important; }

  .site-header, .header-top, .main-nav, .container{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .main-nav{
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 14px !important;
    margin: 8px 0 0 !important;
    overflow-x: hidden !important;
  }

  /* keep menu compact; allow up to 90vw on tiny phones */
  .occasions-menu{
    max-width: 90vw !important;
  }
}

/* Ensure main content starts below fixed header */
:root{ --sticky-offset: 130px; } /* adjust if header height changes */
/* === Mobile/Tablet: force dropdown to show outside header === */
@media (max-width: 1024px){
  .occasions-menu{
    position: fixed !important;           /* escape the header */
    top: calc(var(--sticky-offset) + 6px) !important; /* just below sticky header */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 200px !important;
    max-width: 90vw !important;
    max-height: 65vh !important;
    overflow: auto !important;
    border-radius: 12px !important;
    z-index: 20000 !important;            /* above header + page content */
  }

  /* when submenu is open, prevent background scroll */
  body.dropdown-open{ overflow: hidden !important; }
}
/* === FINAL: keep header fixed + show dropdown under "Occasions" on all screens === */

/* Header stays fixed; never clip children */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  overflow: visible !important;
  isolation: isolate;
}

/* Nav row anchors the submenu */
.main-nav{
  position: relative !important;    /* anchor for submenu */
  overflow: visible !important;     /* don't clip the menu */
  z-index: 10001;
}
.main-nav .has-submenu{ position: relative !important; z-index: 10002; }

/* The dropdown itself: ALWAYS placed just below the nav capsule */
.occasions-menu{
  position: absolute !important;    /* no fixed on mobile anymore */
  top: calc(100% + 8px) !important; /* directly under "Occasions" */
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: max-content !important;    /* fit content */
  min-width: 200px !important;
  max-width: 90vw !important;       /* safe on phones */
  max-height: 65vh !important;
  overflow: auto !important;
  border-radius: 12px !important;
  text-align: start !important;
  z-index: 20000 !important;        /* above header + page */
}

/* Show on hover (desktop) and when JS adds .open (mobile/tablet) */
@media (hover:hover){
  .main-nav .has-submenu:hover > .occasions-menu{ display: block !important; }
}
.main-nav .has-submenu.open > .occasions-menu{ display: block !important; }

/* Prevent horizontal scroll on small screens, but don't clip dropdown */
@media (max-width: 1024px){
  html, body{ overflow-x: hidden !important; }
  .main-nav{
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 14px !important;
    overflow: visible !important;
  }
}

/* Ensure page content starts below the fixed header */
:root{ --sticky-offset: 130px; } /* adjust if header height changes */
/* === Brand title spacing (desktop only) — pushed down more === */
@media (min-width:1025px){
  .brand-title{
    position: static !important;
    transform: none !important;
    margin: 16px 0 0 !important;     /* was 6px — pushed down more */
    font-size: clamp(34px, 3.8vw, 50px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .header-top{
    padding-top: 18px !important;    /* more breathing room */
    padding-bottom: 10px !important;
  }

  .main-nav{
    margin-top: 18px !important;     /* more separation from title */
  }
}
/* Fade when a section is hidden (used on mobile/tablet only) */
main > section {
  transition: opacity .25s ease, transform .25s ease;
}
main > section.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Teaser button link */
.btn-link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .2s ease, transform .2
}
/* === About Us section === */
.panel.about {
  text-align: center;              /* Centered on homepage */
  padding: 3rem 1rem;              /* Add breathing space */
  background: #fff;                /* Keep it clean; you could also use var(--bg) */
}

.panel.about h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--ja-ink, #5b3d1e);   /* Reuse your almond ink color if defined */
}

.panel.about p {
  max-width: 60ch;                 /* Nice readable line length */
  margin: 0 auto 1rem;             /* Center + spacing */
  color: var(--text, #333);        /* Respect theme text color */
  font-size: 1.05rem;
  line-height: 1.6;
}

.panel.about .btn-link {
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  margin-top: .5rem;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

.panel.about .btn-link:hover {
  opacity: .8;
  transform: translateY(-2px);
}
/* Let anchors naturally stop below the sticky header across the site */
:root {
  scroll-padding-top: var(--no-show, var(--sticky-offset, 130px));
}

/* On mobile/tablet, avoid native smooth fighting with our JS */
@media (max-width: 1024px) {
  html { scroll-behavior: auto; }
}
/* Use the nav’s real bottom if available (from JS --no-show) */
main > section {
  scroll-margin-top: var(--no-show, var(--sticky-offset, 130px));
}

@media (max-width: 1024px) {
  /* a smidge more on mobile to account for URL bar wiggle */
  main > section {
    scroll-margin-top: calc(var(--no-show, var(--sticky-offset, 130px)) + 8px);
  }
}
/* ===== Contact Section Final Styling ===== */
.contact .contact-list {
  list-style: none;
  margin: 0.5rem 0 1rem !important;
  padding: 0 !important;
  display: grid;
  gap: 0.35rem;
}
.contact .contact-list a {
  text-decoration: none;
  font-weight: 600;
  color: var(--ja-ink);
}
.contact .contact-list a:hover { text-decoration: underline; }
.contact .map-location {
  max-width: 240px !important;
  margin-top: 8px !important;
}
.contact .map-location iframe {
  width: 100% !important;
  height: 140px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
}
html[lang="ar"] .contact .contact-list { direction: ltr; text-align: left; }
/* ===== Arabic layout fix for Contact section ===== */
html[lang="ar"] .panel.contact {
  text-align: right !important;
}

html[lang="ar"] .contact .contact-list {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"] .contact .contact-list a {
  direction: ltr !important;
  display: inline-block !important;
  text-align: left !important;
}

html[lang="ar"] .contact .map-location {
  margin-right: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
}
/* --- ARABIC CONTACT: place the block on the right --- */
html[lang="ar"] .panel.contact { text-align: right !important; }

html[lang="ar"] .contact .contact-list {
  /* push the list to the right edge */
  max-width: 320px;
  margin-left: auto !important;   /* moves block to the right */
  margin-right: 0 !important;

  /* RTL reading for labels */
  direction: rtl !important;
  text-align: right !important;
  list-style: none;
  padding: 0;
}

/* Each line sits at the right, contents flow RTL but values stay LTR */
html[lang="ar"] .contact .contact-list li {
  display: block !important;
  margin: 0.25rem 0;
}

html[lang="ar"] .contact .contact-list a {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;

  /* Key: make the row RTL so order is: [icon] [label] [:] [value] */
  direction: rtl !important;
  unicode-bidi: plaintext !important;  /* keeps LTR chunks natural inside RTL */
  text-decoration: none;
  font-weight: 600;
  color: var(--ja-ink);
}

/* Icons don’t need flipping */
html[lang="ar"] .contact .contact-list .icon { opacity: .9; }

/* Label & colon are RTL */
html[lang="ar"] .contact .contact-list .label,
html[lang="ar"] .contact .contact-list .sep {
  direction: rtl !important;
  unicode-bidi: isolate !important;
}

/* Values (email, @handles, numbers) MUST stay LTR but appear at the end */
html[lang="ar"] .contact .contact-list .value {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap;
  text-align: left !important;
}

/* Map block also anchored to the right */
html[lang="ar"] .contact .map-location {
  max-width: 240px !important;
  margin-left: auto !important;   /* push to right */
  margin-right: 0 !important;
  text-align: right !important;
}
/* === Arabic About section centering fix === */
html[lang="ar"] .panel.about {
  text-align: center !important;  /* ensure centered layout */
}

html[lang="ar"] .panel.about h2 {
  display: block !important;
  text-align: center !important;
  margin-inline: auto !important; /* center horizontally */
  font-weight: 700 !important;
  color: var(--ja-ink) !important;
}

html[lang="ar"] .panel.about p {
  text-align: center !important;
  direction: rtl !important;
}

html[lang="ar"] .panel.about .btn-link {
  text-align: center !important;
  display: inline-block !important;
}
/* === Arabic contact: keep email on one line === */
html[lang="ar"] .contact .contact-list a[href^="mailto"] {
  white-space: nowrap !important; /* prevent line breaks */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* align to the right edge */
  gap: 0.4rem !important;
  direction: rtl !important;
}

html[lang="ar"] .contact .contact-list a[href^="mailto"] .value {
  direction: ltr !important;      /* keep email in LTR direction */
  unicode-bidi: isolate !important;
  text-align: left !important;
}