/* Public placeholder for taqaan.com. Everything is scoped under body.lp because
   Propshaft's :app bundle in the main layout loads every file in this folder. */

.lp {
  --paper: #f5efe3;
  --paper-raised: #fbf7ef;
  --ink: #1f1b16;
  --ink-soft: #5c5348;
  --gold: #94702a;
  --gold-soft: #b8975a;
  --rule: #e2d6c0;
  --lattice-opacity: 0.11;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --arabic: "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Times New Roman", serif;

  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  .lp {
    --paper: #11100d;
    --paper-raised: #1a1814;
    --ink: #efe6d6;
    --ink-soft: #a89d8b;
    --gold: #d1ad66;
    --gold-soft: #a68848;
    --rule: #2e2a23;
    --lattice-opacity: 0.09;
  }
}

.lp *,
.lp *::before,
.lp *::after {
  box-sizing: border-box;
}

.lp [lang="ar"] {
  font-family: var(--arabic);
  font-size: 1.12em;
  line-height: 1.85;
}

.lp :where(h1, h2, h3, p) {
  margin: 0;
}

.lp-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.lp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
}

.lp-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}

.lp-mark svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
}

.lp-mark-en {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lp-mark-ar {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Centred out of flow, so the marks keep their places and the control stays put under the pointer
   when the language changes. Fixed LTR so the options do not swap sides in the Arabic view. */
.lp-lang {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  direction: ltr;
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-raised);
}

.lp .lp-lang-opt {
  padding: 0.2rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: 500 0.8rem/1.5 var(--sans);
  cursor: pointer;
}

.lp .lp-lang-opt[lang="ar"] {
  font-family: var(--arabic);
  font-size: 0.95rem;
  line-height: 1.25;
}

.lp-lang-opt:hover {
  color: var(--ink);
}

.lp-lang-opt:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Keyed on the root attribute, not aria-pressed, so the pill is right before the buttons parse. */
:root:not([data-lang]) .lp-lang-opt[data-lang-choice="both"],
[data-lang="en"] .lp-lang-opt[data-lang-choice="en"],
[data-lang="ar"] .lp-lang-opt[data-lang-choice="ar"] {
  background: var(--ink);
  color: var(--paper);
}

.lp-hero {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 6rem);
}

.lp-lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--lattice-opacity);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, transparent 30%, #000 100%);
}

.lp-hero-inner {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  animation: lp-rise 0.9s ease-out both;
}

.lp-emblem {
  width: clamp(4.5rem, 10vw, 6rem);
  height: auto;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  margin-bottom: 1.25rem;
}

.lp-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

.lp .lp-title-ar {
  font-size: clamp(3.25rem, 11vw, 6.75rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gold);
}

.lp-title-en {
  font-family: var(--serif);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  /* Trailing letter-spacing would push the centred caps off axis. */
  margin-inline-start: 0.42em;
}

.lp-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: start;
}

.lp-pane {
  padding: 0 clamp(1.25rem, 3.5vw, 2.75rem);
  color: var(--ink-soft);
}

/* Physical side: the second pane is RTL, so a logical border would land on its outer edge. */
.lp-pane + .lp-pane {
  border-left: 1px solid var(--rule);
}

.lp-lede {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 1rem;
}

.lp [lang="ar"] .lp-lede {
  font-family: var(--arabic);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.7;
}

.lp-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.lp-soon [lang="ar"] {
  font-size: 1.05rem;
  line-height: 1;
}

.lp-soon-sep {
  color: var(--gold);
}

.lp-soon-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
  animation: lp-pulse 2.4s ease-in-out infinite;
}

.lp-features {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem);
}

.lp-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 500;
}

.lp-section-title [lang="ar"] {
  margin-left: auto;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--ink-soft);
}

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.25rem;
}

.lp-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.75rem;
  padding: 1.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 0.375rem;
}

.lp-icon {
  grid-column: 1 / -1;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.1rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-card-pane {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.lp-card-pane h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.lp-card-pane[lang="ar"] h3 {
  font-family: var(--arabic);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}

.lp-closing {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(4rem, 9vw, 6.5rem);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-style: italic;
  line-height: 1.4;
  text-wrap: balance;
}

.lp-closing [lang="ar"] {
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.92em;
  color: var(--ink-soft);
}

.lp-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (max-width: 44rem) {
  .lp-diptych,
  .lp-card {
    grid-template-columns: 1fr;
  }

  .lp-pane + .lp-pane {
    border-left: 0;
    border-top: 1px solid var(--rule);
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }

  .lp-card-pane + .lp-card-pane {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }

  .lp-pane {
    padding: 0;
  }

  .lp-bar {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .lp-lang {
    position: static;
    transform: none;
    order: 1;
    flex: 1 0 100%;
  }

  .lp .lp-lang-opt {
    flex: 1;
  }
}

/* Single-language views. No data-lang on <html> means both languages side by side. */

[data-lang="en"] .lp [lang="ar"]:not(.lp-lang-opt),
[data-lang="ar"] .lp [lang="en"]:not(.lp-lang-opt),
[data-lang] .lp-soon-sep {
  display: none;
}

[data-lang] .lp-diptych {
  grid-template-columns: minmax(0, 42rem);
  justify-content: center;
  text-align: center;
}

[data-lang] .lp-card {
  grid-template-columns: 1fr;
}

[data-lang] .lp-pane + .lp-pane,
[data-lang] .lp-card-pane + .lp-card-pane {
  border: 0;
  margin-top: 0;
  padding-top: 0;
}

[data-lang="en"] .lp-title-en {
  font-size: clamp(2.25rem, 6.5vw, 4.25rem);
  line-height: 1.2;
  letter-spacing: 0.16em;
  margin-inline-start: 0.16em;
  color: var(--gold);
}

[data-lang="ar"] .lp {
  font-family: var(--arabic);
}

[data-lang="ar"] .lp-bar {
  justify-content: flex-start;
  column-gap: 0.6rem;
}

[data-lang="ar"] .lp-mark-ar,
[data-lang="ar"] .lp-section-title [lang="ar"],
[data-lang="ar"] .lp-closing [lang="ar"] {
  color: var(--ink);
}

[data-lang="ar"] .lp-section-title [lang="ar"],
[data-lang="ar"] .lp-closing [lang="ar"] {
  margin-top: 0;
  font-size: 1em;
}

@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes lp-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-inner,
  .lp-soon-dot {
    animation: none;
  }
}