@import "tailwindcss";
@plugin "daisyui" {
  themes: aldaira;
};

@plugin "daisyui/theme" {
  name: "aldaira";
  default: true;
  color-scheme: light;

  --color-primary: #004137;
  --color-primary-content: #ffffff;
  --color-secondary: #c6a464;
  --color-secondary-content: #111111;
  --color-accent: #4698b3;
  --color-accent-content: #ffffff;
  /* Slate — secondary dark surface for alternating sections */
  --color-neutral: #1a202c;
  --color-neutral-content: #ffffff;
  --color-base-100: #ffffff;
  --color-base-200: #f7f5f0;
  --color-base-300: #e0dbd0;
  --color-base-content: #1a1a1a;
  --color-info: #4698b3;
  --color-info-content: #ffffff;
  --color-success: #16a34a;
  --color-success-content: #ffffff;
  --color-warning: #fec42d;
  --color-warning-content: #111111;
  --color-error: #dc2626;
  --color-error-content: #ffffff;

  --radius-selector: 0.375rem;
  --radius-field: 0.2rem;
  --radius-box: 0.2rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  .text-ltr {
    direction: ltr !important;
    display: inline-block !important;
  }

  [dir="rtl"] body {
    font-family: "Cairo", system-ui, sans-serif;
  }

  [dir="ltr"] body {
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  }

  /* Display headings use Playfair Display in LTR mode */
  [dir="ltr"] h1,
  [dir="ltr"] h2 {
    font-family: "EB Garamond", Georgia, serif;
  }

  a:focus-visible,
  button:focus-visible {
    @apply outline-2 outline-offset-2 outline-secondary;
  }

  /* Smooth image rendering */
  img {
    @apply max-w-full;
  }
}

/* ── Animations ──────────────────────────────────────────── */
@layer utilities {
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-fade-up {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-fade-in {
    animation: fadeIn 0.6s ease both;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .delay-100  { animation-delay: 100ms; }
  .delay-200  { animation-delay: 200ms; }
  .delay-300  { animation-delay: 300ms; }
  .delay-400  { animation-delay: 400ms; }
  .delay-500  { animation-delay: 500ms; }
  .delay-600  { animation-delay: 600ms; }
  .delay-700  { animation-delay: 700ms; }

  /* Reveal on scroll — JS adds .is-visible to .reveal elements */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    @apply transition-all duration-200 ease-in-out;
    /* transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s ease; */
  }

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

/* ── Layout helpers ──────────────────────────────────────── */
@layer components {
  .container-site {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-10;
  }

  .section-padding {
    @apply py-20 md:py-28;
  }

  /* Inline page hero (inner pages) */
  .page-hero {
    @apply bg-primary text-primary-content py-14;
  }

  .page-hero h1 {
    @apply text-3xl font-bold md:text-4xl;
  }

  .page-hero p {
    @apply mt-3 max-w-2xl text-lg text-primary-content/80;
  }

  /* WhatsApp CTA — full-height navbar panel (gold accent) */
  .wa-btn {
    @apply bg-secondary text-secondary-content;
    transition: background-color 200ms ease, filter 200ms ease;
  }
  .wa-btn:hover,
  .wa-btn:focus-visible {
    filter: brightness(0.92);
  }

  /* Gold divider accent */
  .gold-rule {
    @apply flex items-center gap-3;
  }

  .gold-rule::before,
  .gold-rule::after {
    content: '';
    @apply block h-px flex-1 bg-secondary/30;
  }

  /* Brand surfaces — teal is default; slate for alternating sections */
  .surface-teal {
    @apply bg-primary text-primary-content;
  }

  .surface-slate {
    @apply bg-neutral text-neutral-content;
  }

  .section-teal {
    @apply bg-primary text-primary-content;
  }

  .section-slate {
    @apply bg-neutral text-neutral-content;
  }

  /* Frosted glass — hero & overlays */
  .glass-frosted {
    @apply border border-white/20 bg-white/10 shadow-lg backdrop-blur-md;
  }

  .glass-frosted-strong {
    @apply border border-white/25 bg-white/15 shadow-xl backdrop-blur-xl;
  }

  .mobile-drawer {
    animation: mobileDrawerIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  [dir="rtl"] .mobile-drawer {
    animation-name: mobileDrawerInRtl;
  }

  @keyframes mobileDrawerIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  @keyframes mobileDrawerInRtl {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  .filter-panel-body {
    display: grid;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .filter-panel-body[data-open="false"] {
    grid-template-rows: 0fr;
  }

  .filter-panel-body[data-open="true"] {
    grid-template-rows: 1fr;
  }

  @media (min-width: 768px) {
    .filter-panel-body {
      grid-template-rows: 1fr !important;
    }
  }
}