/*
 * The English calendar pages under /en/: the page itself, the top bar and the
 * footer. The content inside <main class="cc"> uses calendar.css, whose rules
 * are written with logical properties and so read left to right here as they
 * read right to left on the Arabic pages.
 */

body.en {
  margin: 0;
  background: #f4f1ea;
  color: #1f2433;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body.en .cc { padding-top: 4px; }
/* No fixed header here, so anchors need no offset. */
body.en .cc [id] { scroll-margin-top: 12px; }

.en-top { background: #1a2049; color: #fff; }
.en-top__in {
  max-width: 1120px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.en-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.en-brand img { border-radius: 8px; }
.en-brand span { display: flex; flex-direction: column; font-weight: 700; font-size: 18px; line-height: 1.15; }
.en-brand small { font-weight: 400; font-size: 12px; color: #e0b25a; letter-spacing: .04em; text-transform: uppercase; }
.en-lang {
  color: #fff; text-decoration: none; font-size: 15px; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px; padding: 6px 14px; min-height: 36px; display: inline-flex; align-items: center;
}
.en-lang:hover, .en-lang:focus-visible { background: rgba(255, 255, 255, .12); }

/* The bar of pages scrolls sideways on a phone rather than wrapping. */
.en-nav {
  max-width: 1120px; margin: 0 auto; padding: 0 8px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.en-nav::-webkit-scrollbar { display: none; }
.en-nav a {
  flex: none; color: #d9dcef; text-decoration: none; font-size: 15px;
  padding: 10px 12px 12px; border-bottom: 3px solid transparent; white-space: nowrap;
}
.en-nav a:hover, .en-nav a:focus-visible { color: #fff; }
.en-nav a[aria-current="page"] { color: #fff; border-bottom-color: #e0b25a; }

.en-foot { background: #1a2049; color: #c9cce0; margin-top: 32px; }
.en-foot__in { max-width: 1120px; margin: 0 auto; padding: 24px 16px 32px; font-size: 14px; line-height: 1.7; }
.en-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.en-foot a { color: #fff; }
.en-foot__small { font-size: 12px; color: #9ea3c2; }

a:focus-visible { outline: 2px solid #e0b25a; outline-offset: 2px; }