/*
 * Thuluth Cafe — Link Tree Revamp
 * Drop this file into your theme: /wp-content/themes/your-theme/css/thuluth-linktree.css
 * Then enqueue it in functions.php (see instructions below)
 *
 * Color palette extracted from reference image:
 *   Forest Green Dark  : #3d4f33
 *   Forest Green Mid   : #4a5c3e
 *   Forest Green Light : #5c6e48
 *   Earthy Gold-Brown  : #8b7040
 *   Warm Cream Light   : #d4cbb8
 *   Warm Cream Mid     : #b8aa98
 *   Earthy Brown       : #9a8874
 *   Text on Green      : #e8e0cc
 *   Text on Cream      : #3d3428
 */

/* ─── Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Amiri:ital@0;1&display=swap');

/* ─── Design tokens ─────────────────────────────────────── */
:root {
  --lt-bg:          #1a1f16;
  --lt-green-dk:    #3d4f33;
  --lt-green-md:    #4a5c3e;
  --lt-green-lt:    #5c6e48;
  --lt-gold:        #8b7040;
  --lt-cream-lt:    #d4cbb8;
  --lt-cream-md:    #b8aa98;
  --lt-brown:       #9a8874;
  --lt-text-light:  #e8e0cc;
  --lt-text-dark:   #3d3428;
  --lt-accent:      #c8a84b;

  --f-arabic:       'Cairo', 'Tajawal', sans-serif;
  --f-display:      'Amiri', serif;

  --lt-btn-height:  76px;
  --lt-btn-radius:  4px;
  --lt-max-width:   560px;
  --lt-transition:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base resets for this component ───────────────────── */
.lt-main {
  font-family: var(--f-arabic);
  background-color: var(--lt-bg);
  min-height: 100vh;
  direction: rtl;
  padding-top: 66px;
}

/* ─── Hero ──────────────────────────────────────────────── */
.lt-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38vh;
  background-color: var(--lt-green-dk);
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

.lt-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 14, 8, 0.72) 0%,
    rgba(10, 14, 8, 0.55) 60%,
    rgba(26, 31, 22, 1) 100%
  );
}

.lt-hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 24px;
}

.lt-hero-ornament {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--lt-accent);
  letter-spacing: 0.3em;
  margin-bottom: 16px;
  opacity: 0.85;
}

.lt-hero-name {
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
  color: var(--lt-cream-lt);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.lt-hero-tagline {
  font-family: var(--f-arabic);
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  font-weight: 300;
  color: var(--lt-cream-md);
  margin: 0 0 24px;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.lt-hero-line {
  width: 60px;
  height: 1px;
  background: var(--lt-accent);
  margin: 0 auto;
  opacity: 0.6;
}

/* ─── Stack section wrapper ─────────────────────────────── */
.lt-stack-section {
  background-color: var(--lt-bg);
  padding: 0 16px 60px;
  display: flex;
  justify-content: center;
}

.lt-stack {
  width: 100%;
  max-width: var(--lt-max-width);
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.3);
  margin-top: -2px;
}

/* ─── Individual button ─────────────────────────────────── */
.lt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--lt-btn-height);
  padding: 0 28px;
  background-color: var(--btn-bg, #4a5c3e);
  color: var(--btn-text, #e8e0cc);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--lt-transition),
    transform var(--lt-transition),
    letter-spacing var(--lt-transition);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.lt-btn:last-child {
  border-bottom: none;
}

/* Shimmer sweep on hover */
.lt-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.lt-btn:hover::before {
  transform: translateX(100%);
}

.lt-btn:hover {
  background-color: var(--btn-hover, #5a6e4c);
  transform: scaleY(1.025);
  letter-spacing: 0.03em;
  z-index: 1;
}

.lt-btn:active {
  transform: scaleY(0.98);
  transition-duration: 0.1s;
}

/* Icon */
.lt-btn-icon {
  font-size: 0.7rem;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity var(--lt-transition), transform var(--lt-transition);
  color: inherit;
}

.lt-btn:hover .lt-btn-icon {
  opacity: 0.9;
  transform: rotate(90deg);
}

/* Label */
.lt-btn-label {
  font-family: var(--f-arabic);
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 500;
  color: inherit;
  text-align: center;
  flex: 1;
  transition: transform var(--lt-transition);
}

.lt-btn:hover .lt-btn-label {
  transform: translateX(-4px);
}

/* Arrow */
.lt-btn-arrow {
  font-size: 1rem;
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity var(--lt-transition), transform var(--lt-transition);
  color: inherit;
}

.lt-btn:hover .lt-btn-arrow {
  opacity: 0.85;
  transform: translateX(-5px);
}

/* ─── Animate-in — content always visible, JS adds polish ─── */
/* Default: fully visible so content never disappears if JS is slow */
.animate {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* JS adds .lt-animate-ready to body BEFORE observing, enabling the hidden state */
body.lt-animate-ready .animate {
  opacity: 0;
  transform: translateY(20px);
}
body.lt-animate-ready .animate.visible {
  opacity: 1;
  transform: translateY(0);
}
body.lt-animate-ready .lt-btn.animate {
  opacity: 0;
  transform: translateX(20px);
}
body.lt-animate-ready .lt-btn.animate.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger each button's entrance using inline animation-delay */
.lt-btn {
  transition-delay: var(--stagger, 0s);
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --lt-btn-height: 68px;
  }

  .lt-hero {
    min-height: 32vh;
  }

  .lt-hero-name {
    font-size: 2rem;
  }

  .lt-btn {
    padding: 0 20px;
  }

  .lt-stack {
    border-radius: 4px;
  }
}

@media (max-width: 360px) {
  :root {
    --lt-btn-height: 62px;
  }

  .lt-btn-label {
    font-size: 0.95rem;
  }
}

/* ─── High-contrast / reduced-motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lt-btn,
  .lt-btn::before,
  .lt-btn-icon,
  .lt-btn-label,
  .lt-btn-arrow,
  .animate {
    transition: none !important;
    animation: none !important;
  }
}