/* ============================================================================
   Phuket Chess Club — page styles (shared by /chess, /chess/th, /chess/ar,
   /chess/ar-eg). Design language follows the main restaurant site (cream,
   gold, same typography) with deep-navy accents sampled from the club banner.
   RTL note: Arabic pages set dir=rtl; the shared carousel engine in
   /animations.js is already RTL-aware.
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Keep in-page anchor targets clear of the 64px fixed nav. */
  scroll-padding-top: 72px;
}

:root {
  /* Shared site palette (mirrors /theme.css) */
  --olive: #4b5320;
  --terracotta: #a6432c;
  --gold: #c8912b;
  --cream: #f7f1e3;
  --surface: #fffdf7;
  --charcoal: #241f1a;
  --muted: #6b6154;
  --olive-dark: #3a4019;
  --terracotta-dark: #8a3624;
  --gold-soft: #e3c98f;
  --line: #e4dcc7;
  --font: 'Cairo', 'Tajawal', 'Sarabun', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Amiri', 'Cairo', Georgia, 'Times New Roman', serif;
  /* Chess-club accents — deep navy + gold, sampled from the club banner */
  --navy: #12263f;
  --navy-deep: #0b1a2e;
  --navy-soft: #1d3a5f;
  --fb: #1877f2;
}

body {
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ── NAV ── */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(247, 241, 227, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.nav-logo img {
  height: 46px;
  width: auto;
}

/* The wordmark is hidden on small screens: alongside a four-language switcher
   and the menu button there is no room for it, and it wrapped underneath them.
   The logo carries the brand there, and .nav-logo keeps its aria-label so the
   link is still announced as "Phuket Chess Club — home". */
.nav-logo span {
  display: none;
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.02rem;
  white-space: nowrap;
}

@media(min-width:640px) {
  .nav-logo span {
    display: inline;
  }
}

.nav-links {
  display: none;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  color: var(--charcoal);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--navy-soft);
  text-decoration: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.lang-pill {
  display: flex;
  align-items: center;
  background: rgba(18, 38, 63, .08);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  padding: .3rem .7rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  color: var(--navy);
}

.lang-btn:hover {
  color: var(--gold);
  text-decoration: none;
}

.lang-btn.on {
  background: var(--navy);
  color: var(--cream);
}

#menuToggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  padding: .4rem;
  display: block;
}

@media(min-width:860px) {
  .nav-links {
    display: flex;
  }

  #menuToggle {
    display: none;
  }
}

/* ── MOBILE MENU ── */
#mobileMenu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--navy);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

#mobileMenu.open {
  display: flex;
}

#mobileMenu a {
  color: var(--cream);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 600;
  transition: color .2s;
}

#mobileMenu a:hover {
  color: var(--gold-soft);
  text-decoration: none;
}

#closeMenu {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
}

/* ── HERO ──
   The background is drawn, not photographed. The club banner artwork already
   contains its own lettering and logo, so using it here put text on top of text
   and fought the headline. This is a deep-navy field with a gold glow and a
   faint chessboard, built from the same palette sampled off the banner — it
   costs zero bytes, is razor sharp at any density, and leaves the logo and
   wordmark as the only things competing for attention. */
#hero {
  position: relative;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(72% 52% at 50% 6%, rgba(200, 145, 43, .26) 0%, rgba(200, 145, 43, 0) 62%),
    radial-gradient(125% 95% at 50% 108%, rgba(11, 26, 46, .97) 32%, rgba(11, 26, 46, 1) 100%),
    linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 46%, var(--navy-deep) 100%);
}

/* Chessboard texture, faded out towards the edges so it reads as depth rather
   than as a grid sitting in front of the content. */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: conic-gradient(rgba(247, 241, 227, .055) 0 25%,
      transparent 0 50%,
      rgba(247, 241, 227, .055) 0 75%,
      transparent 0);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(88% 78% at 50% 42%, #000 22%, transparent 76%);
  mask-image: radial-gradient(88% 78% at 50% 42%, #000 22%, transparent 76%);
}

/* Gold hairline where the hero hands over to the feature strip. */
#hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(200, 145, 43, .8), transparent);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 5rem 1rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  width: auto;
  max-width: 60vw;
  height: auto;
  max-height: 24vh;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 4px rgba(200, 145, 43, .55), 0 14px 40px rgba(0, 0, 0, .45);
}

@media(min-width:640px) {
  .hero-logo {
    max-height: 30vh;
    margin-bottom: 1.5rem;
  }
}

h1.display {
  font-family: var(--display);
  font-size: clamp(2.4rem, 9vw, 5rem);
  line-height: 1.05;
  color: #fff;
  margin-bottom: .4rem;
}

.hero-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.5vw, 1.9rem);
  font-weight: 400;
  color: var(--gold-soft);
  margin-bottom: .7rem;
}

.hero-tags {
  color: rgba(247, 241, 227, .92);
  font-size: clamp(.95rem, 2vw, 1.1rem);
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.hero-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 800;
  letter-spacing: .05em;
  font-size: .78rem;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}

.btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 800;
  padding: .8rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all .25s;
  font-size: .95rem;
}

.btn-gold:hover {
  background: #b17f22;
  color: var(--navy-deep);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 26, 46, .4);
}

.btn-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  background: var(--fb);
  color: #fff;
  font-weight: 800;
  padding: .8rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all .25s;
  font-size: .95rem;
}

.btn-fb svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.btn-fb:hover {
  background: #1462c9;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 26, 46, .4);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 2px solid var(--cream);
  color: var(--cream);
  font-weight: 700;
  padding: .75rem 1.9rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all .25s;
  font-size: .95rem;
}

.btn-outline:hover {
  background: rgba(247, 241, 227, .14);
  color: var(--cream);
  text-decoration: none;
  transform: translateY(-2px);
}

.scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: bounce 2s infinite;
}

.scroll-hint svg {
  width: 28px;
  height: 28px;
  color: rgba(247, 241, 227, .7);
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0)
  }

  50% {
    transform: translateX(-50%) translateY(6px)
  }
}

/* ── FEATURE STRIP ── */
.strip {
  background: var(--navy);
  border-top: 1px solid var(--navy-deep);
  border-bottom: 1px solid var(--navy-deep);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}

.strip::-webkit-scrollbar {
  display: none;
}

.strip-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.1rem 1.25rem;
  min-width: max-content;
  margin: 0 auto;
  justify-content: center;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.25rem;
  white-space: nowrap;
}

.strip-item span.icon {
  font-size: 1.35rem;
}

.strip-item span.label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--cream);
}

.strip-sep {
  color: var(--gold-soft);
  font-size: 1rem;
  opacity: .6;
}

/* ── SECTION COMMONS ── */
section {
  padding: 5rem 1.25rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-tag {
  display: block;
  letter-spacing: .26em;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}

h2.section-title {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.gold-bar {
  width: 3.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy));
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}

.grad-text {
  color: var(--gold);
}

p.lead {
  color: var(--muted);
  line-height: 1.75;
  font-size: .98rem;
}

/* ── ABOUT ── */
#about {
  background: var(--cream);
}

.about-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media(min-width:768px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tag-pill {
  display: inline-block;
  background: rgba(18, 38, 63, .07);
  border: 1px solid rgba(18, 38, 63, .25);
  color: var(--navy);
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 9999px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

/* Art-directed: the 3:2 feature artwork on desktop, where this sits in a narrow
   column, and the wide 2.4:1 banner on mobile, where the column is full width
   and a 3:2 crop would tower over the copy. */
.about-banner picture {
  display: block;
}

.about-banner img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: var(--shadow, 0 6px 24px rgba(36, 31, 26, 0.12));
}

/* ── CARDS (why / discounts) ── */
.cards-grid {
  display: grid;
  gap: 1.25rem;
}

@media(min-width:640px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(min-width:1024px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cards-grid.three {
  max-width: 1000px;
  margin: 0 auto;
}

@media(min-width:1024px) {
  .cards-grid.three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 145, 43, .5);
  box-shadow: 0 20px 40px rgba(18, 38, 63, .12);
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.card h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .6rem;
}

.card p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
}

.card p strong {
  color: var(--navy);
  font-weight: 700;
}

.card p a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.card p a:hover {
  text-decoration: underline;
}

#vibes {
  background: var(--surface);
}

/* ── MEETINGS ── */
#meetings {
  background: var(--cream);
}

.findus-grid {
  display: grid;
  gap: 2.5rem;
  align-items: stretch;
}

@media(min-width:768px) {
  .findus-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.info-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 6px 24px rgba(36, 31, 26, 0.12);
}

.info-box h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.info-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  align-items: flex-start;
}

.info-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.info-label {
  font-weight: 700;
  color: var(--charcoal);
  font-size: .9rem;
  margin-bottom: .2rem;
}

.info-val {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.6;
}

.info-val a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

.info-val a:hover {
  text-decoration: underline;
}

.schedule-box {
  background: var(--navy);
  color: var(--cream);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 24px rgba(36, 31, 26, 0.12);
}

.schedule-box .days {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem;
}

.schedule-box .hours {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--gold-soft);
  font-weight: 700;
  margin-bottom: 1rem;
}

.schedule-box p {
  color: rgba(247, 241, 227, .85);
  font-size: .92rem;
  line-height: 1.7;
  max-width: 380px;
}

.schedule-box .chess-glyphs {
  font-size: 2rem;
  letter-spacing: .35em;
  margin-bottom: 1rem;
  color: var(--gold-soft);
}

/* ── FACEBOOK CTA ── */
#facebook {
  background: var(--navy);
  color: var(--cream);
}

#facebook .container {
  max-width: 820px;
  text-align: center;
}

#facebook .section-tag {
  color: var(--gold-soft);
}

#facebook h2 {
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

#facebook p {
  color: rgba(247, 241, 227, .9);
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

#facebook .fb-url {
  display: inline-block;
  margin-top: 1rem;
  color: var(--gold-soft);
  font-size: .9rem;
  word-break: break-all;
}

/* "Also listed on The Playground / Luma / e-mail" line under the FB button. */
#facebook .also-on {
  font-size: .92rem;
  margin: 1.35rem auto 0;
  max-width: 640px;
}

#facebook .also-on a {
  color: var(--gold-soft);
  font-weight: 700;
  text-decoration: underline;
}

#facebook .also-on a:hover {
  color: #fff;
}

/* ── GALLERY CAROUSEL (same engine as the main site) ── */
#gallery {
  background: var(--surface);
}

.carousel-wrap {
  position: relative;
  overflow: hidden;
  padding: 0 .25rem;
}

.carousel-track {
  display: flex;
  transition: transform .4s ease;
}

.carousel-track .gal-item {
  flex: 0 0 calc(50% - .5rem);
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .6rem;
  cursor: pointer;
  position: relative;
  background: var(--cream);
  margin: 0 .25rem;
}

@media(min-width:640px) {
  .carousel-track .gal-item {
    flex: 0 0 calc(33.333% - .5rem);
  }
}

@media(min-width:1024px) {
  .carousel-track .gal-item {
    flex: 0 0 calc(25% - .5rem);
  }
}

.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
  display: block;
}

.gal-item:hover img {
  transform: scale(1.06);
}

.gal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background .3s;
}

.gal-item:hover .gal-overlay {
  background: rgba(18, 38, 63, .22);
}

.carousel-btn {
  background: var(--navy);
  color: var(--cream);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}

.carousel-btn:hover {
  background: var(--gold);
  transform: scale(1.08);
}

.carousel-btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.carousel-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform .2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-dot::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(18, 38, 63, .25);
  transition: background .2s, transform .2s;
}

.carousel-dot.active::after {
  background: var(--gold);
  transform: scale(1.3);
}

.carousel-dot.dot-edge::after {
  transform: scale(.7);
  opacity: .6;
}

.carousel-dot.dot-hidden {
  display: none;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}

/* ── LIGHTBOX ── */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 26, 46, .95);
  align-items: center;
  justify-content: center;
}

#lightbox.open {
  display: flex;
}

#lbClose {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(247, 241, 227, .15);
  border: none;
  color: var(--cream);
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

#lbClose:hover {
  background: rgba(247, 241, 227, .3);
}

/* ── FAQ ── */
#faq {
  background: var(--cream);
}

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .875rem;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: start;
  color: var(--navy);
  font-family: var(--font);
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .2s;
}

.faq-q:hover {
  color: var(--gold);
}

.faq-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
  transition: transform .3s;
}

.faq-a {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
}

.faq-a strong {
  color: var(--navy);
  font-weight: 700;
}

.faq-a a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.faq-a a:hover {
  text-decoration: underline;
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
}

.faq-item.open .faq-a {
  display: block;
}

/* ── FOOTER ── */
footer {
  background: var(--navy-deep);
  border-top: 4px solid var(--gold);
  padding: 3.5rem 1.25rem 2rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media(min-width:640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(min-width:1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1.5fr;
  }
}

footer img.logo {
  height: 64px;
  width: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #fff;
}

footer p.desc {
  font-size: .85rem;
  color: rgba(247, 241, 227, .7);
  line-height: 1.7;
  margin-bottom: 1rem;
}

footer h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-soft);
  margin-bottom: 1rem;
}

footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

footer ul li {
  font-size: .85rem;
  color: rgba(247, 241, 227, .7);
  line-height: 1.6;
}

footer ul a {
  font-size: .85rem;
  color: rgba(247, 241, 227, .7);
  text-decoration: none;
  transition: color .2s;
}

footer ul a:hover {
  color: var(--gold-soft);
  text-decoration: none;
}

.footer-social a {
  font-size: .84rem;
  color: var(--gold-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.footer-social a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(247, 241, 227, .12);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: .78rem;
  color: rgba(247, 241, 227, .6);
}

.dev-credit {
  font-size: .78rem;
  color: rgba(247, 241, 227, .6);
}

.dev-credit a {
  color: var(--gold-soft);
  text-decoration: underline;
  transition: color .2s;
}

.dev-credit a:hover {
  color: #fff;
}

/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── SKIP NAV ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--navy);
  color: var(--cream);
  padding: .6rem 1.2rem;
  border-radius: 0 0 .5rem .5rem;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: top .2s;
}

.skip-link:focus {
  top: 0;
}

/* ── FLOATING FACEBOOK CTA ── */
.float-cta {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  z-index: 850;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-end;
  max-width: 60px;
  pointer-events: none;
  transition: opacity .3s;
}

.float-cta.cta-hidden {
  opacity: 0;
  pointer-events: none;
}

.float-cta a {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(11, 26, 46, .35);
  transition: transform .2s, box-shadow .2s;
}

.float-cta a:hover {
  transform: scale(1.1);
  text-decoration: none;
}

.float-cta .fb {
  background: var(--fb);
  color: #fff;
}

.float-cta svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ── RTL (Arabic pages: /ar and /ar-eg set dir="rtl") ──────────────────────
   Everything above is written with logical properties or symmetric layout, so
   only the four absolutely-positioned corner elements need mirroring. */
[dir="rtl"] .float-cta {
  right: auto;
  left: calc(1.25rem + env(safe-area-inset-left, 0px));
  align-items: flex-start;
}

[dir="rtl"] #closeMenu {
  right: auto;
  left: 1.25rem;
}

[dir="rtl"] #lbClose {
  right: auto;
  left: 1rem;
}

/* The gold rule reads left-to-right; flip it so it grows from the start edge. */
[dir="rtl"] .gold-bar {
  background: linear-gradient(270deg, var(--gold), var(--navy));
}