/* ---------------------------------------------------------------------------
   Hand-written styles for the Barette website.

   Tailwind covers layout and one-off utilities; this file holds the repeated
   component classes, the decorative pieces (hero glow, phone mockup, timeline)
   and the small amount of motion. Colours mirror the Tailwind theme tokens in
   assets/tailwind.css, which in turn mirror AppColors in the Flutter app —
   one light palette, no dark mode.

   The whole file sits in the `components` cascade layer (declared by
   app.css) so Tailwind utilities used in markup still win over it.
   ------------------------------------------------------------------------- */

@layer components {

  :root {
    --c-brand-50: #f5f3f8;
    --c-brand-200: #c9b6e4;
    --c-brand-400: #8b72a8;
    --c-brand-500: #6b5082;
    --c-brand-600: #5a4b6c;
    --c-brand-700: #3e2a58;
    --c-brand-900: #2d1b3d;
    --c-ink-50: #f5f3f8;
    --c-ink-100: #f0ecf8;
    --c-ink-200: #ede8f5;
    --c-ink-400: #b0a4c4;
    --c-ink-500: #8a7a9c;
    --c-ink-700: #4a3d5c;
    --c-ink-800: #3a2b4c;
    --c-ink-900: #2d1b3d;
    --c-mint: #7ec8a0;
    --c-mint-dark: #2e7d57;
    --bs-body-font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  }

  body {
    font-family: var(--bs-body-font-family);
  }

  .font-display,
  h1, h2, h3 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
  }

  /* Fraunces and Plus Jakarta Sans carry no Arabic glyphs, so Arabic pages
     use Noto Kufi Arabic throughout instead of silently falling back to
     whatever Arabic font the visitor's OS ships. */
  :lang(ar) body,
  :lang(ar) {
    font-family: "Noto Kufi Arabic", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  }

  :lang(ar) .font-display,
  :lang(ar) h1,
  :lang(ar) h2,
  :lang(ar) h3 {
    font-family: "Noto Kufi Arabic", Tahoma, sans-serif;
  }

  /* Accessibility ----------------------------------------------------------- */

  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0.75rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    background: var(--c-brand-600);
    color: #fff;
    text-decoration: none;
  }

  .skip-link:focus {
    inset-inline-start: 1rem;
  }

  :focus-visible {
    outline: 3px solid var(--c-brand-600);
    outline-offset: 2px;
  }

  /* Buttons ----------------------------------------------------------------- */

  .btn-primary,
  a.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: 0;
    border-radius: 0.85rem;
    background-image: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-700));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 24px -14px rgba(90, 75, 108, 0.9);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }

  .btn-primary:hover,
  a.btn-primary:hover {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 18px 30px -16px rgba(90, 75, 108, 0.95);
  }

  .btn-ghost,
  a.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: 1px solid var(--c-ink-200);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--c-ink-700);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  }

  .btn-ghost:hover,
  a.btn-ghost:hover {
    border-color: var(--c-brand-400);
    color: var(--c-brand-700);
    transform: translateY(-1px);
  }

  /* Navigation -------------------------------------------------------------- */

  .nav-pill {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 0.75rem;
    color: var(--c-ink-500);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-pill:hover {
    background: var(--c-ink-100);
    color: var(--c-ink-900);
  }

  .nav-pill-active {
    background: var(--c-brand-50);
    color: var(--c-brand-700);
  }

  .mobile-link {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    color: var(--c-ink-700);
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-link:hover {
    background: var(--c-ink-100);
    color: var(--c-brand-700);
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--c-ink-200);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--c-ink-700);
    transition: border-color 0.15s ease, transform 0.15s ease;
  }

  .icon-btn:hover { border-color: var(--c-brand-400); transform: translateY(-1px); }

  /* Footer ------------------------------------------------------------------ */

  .footer-heading {
    margin-bottom: 1rem;
    font-family: var(--bs-body-font-family);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-ink-400);
  }

  .footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
  }

  .footer-list a {
    color: var(--c-ink-500);
    font-size: 0.9rem;
    text-decoration: none;
  }

  .footer-list a:hover { color: var(--c-brand-600); }

  /* Alerts ------------------------------------------------------------------ */

  .alert-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .alert-card-success {
    background: #e0f5ec;
    border: 1px solid var(--c-mint);
    color: var(--c-mint-dark);
  }

  .alert-card-error {
    background: #fdecee;
    border: 1px solid #f2b8bd;
    color: #b02a37;
  }

  /* Decoration -------------------------------------------------------------- */

  .hero-glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hero-glow::before,
  .hero-glow::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.55;
  }

  .hero-glow::before {
    width: 30rem;
    height: 30rem;
    top: -10rem;
    right: -6rem;
    background: radial-gradient(circle, rgba(201, 182, 228, 0.85), transparent 70%);
  }

  .hero-glow::after {
    width: 26rem;
    height: 26rem;
    bottom: -12rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(232, 165, 152, 0.55), transparent 70%);
  }

  .grid-backdrop {
    background-image:
      linear-gradient(to right, rgba(90, 75, 108, 0.09) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(90, 75, 108, 0.09) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  }

  /* Phone mockup ------------------------------------------------------------ */

  .phone {
    width: 270px;
    border-radius: 2.4rem;
    border: 10px solid #2d1b3d;
    background: #fff;
    box-shadow: 0 40px 70px -30px rgba(45, 27, 61, 0.6);
    overflow: hidden;
  }

  .phone-notch {
    width: 6rem;
    height: 1.1rem;
    margin: 0.45rem auto 0;
    border-radius: 0 0 0.8rem 0.8rem;
    background: #2d1b3d;
  }

  .scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-brand-400), transparent);
    animation: scan 2.8s ease-in-out infinite;
  }

  @keyframes scan {
    0%, 100% { top: 8%; opacity: 0.2; }
    50% { top: 88%; opacity: 1; }
  }

  .pulse-dot {
    position: relative;
  }

  .pulse-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 2px solid var(--c-brand-400);
    animation: pulse-ring 2s ease-out infinite;
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* Reveal on scroll -------------------------------------------------------- */

  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Back to top ------------------------------------------------------------- */

  .back-to-top {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 9999px;
    background: var(--c-brand-600);
    color: #fff;
    box-shadow: 0 14px 26px -14px rgba(90, 75, 108, 0.95);
  }

  .back-to-top:hover { background: var(--c-brand-700); }

  /* Bootstrap component overrides ------------------------------------------- */

  .accordion {
    --bs-accordion-border-color: var(--c-ink-200);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(90, 75, 108, 0.25);
    --bs-accordion-active-color: var(--c-brand-700);
    --bs-accordion-active-bg: var(--c-brand-50);
    --bs-accordion-border-radius: 0.9rem;
  }

  .accordion-button { font-weight: 600; }

  .nav-tabs {
    --bs-nav-link-color: var(--c-ink-500);
    --bs-nav-link-hover-color: var(--c-brand-700);
    --bs-nav-tabs-link-active-color: var(--c-brand-700);
    --bs-nav-tabs-link-active-border-color: var(--c-ink-200) var(--c-ink-200) transparent;
    border-bottom-color: var(--c-ink-200);
  }

  .nav-tabs .nav-link { font-weight: 600; }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }

    .reveal { opacity: 1; transform: none; }
  }

  /* Update filters ---------------------------------------------------------- */

  .filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--c-ink-200);
    border-radius: 9999px;
    background: #fff;
    color: var(--c-ink-500);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }

  .filter-chip:hover {
    border-color: var(--c-brand-400);
    color: var(--c-brand-700);
  }

  .filter-chip-active {
    border-color: transparent;
    background-image: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-700));
    color: #fff;
  }

  .filter-chip-active:hover { color: #fff; }

  .is-copied { border-color: var(--c-mint); color: var(--c-mint-dark); }

  /* Legal documents ---------------------------------------------------------- */

  /* The compliance pages are long-form prose, so they get typography here
     rather than a utility class on every paragraph. */

  .legal-prose {
    color: var(--c-ink-700);
    font-size: 0.975rem;
    line-height: 1.75;
  }

  .legal-prose > section + section {
    margin-top: 3rem;
  }

  .legal-prose h2 {
    margin: 0 0 0.9rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink-900);
    scroll-margin-top: 6rem;
  }

  .legal-prose h3 {
    margin: 1.9rem 0 0.6rem;
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-ink-900);
  }

  .legal-prose p {
    margin: 0 0 1rem;
  }

  .legal-prose ul,
  .legal-prose ol {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.5rem;
  }

  .legal-prose ul { list-style: disc; }
  .legal-prose ol { list-style: decimal; }
  .legal-prose li::marker { color: var(--c-brand-400); }

  .legal-prose a {
    color: var(--c-brand-600);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .legal-prose a:hover { color: var(--c-brand-700); }

  .legal-prose strong { color: var(--c-ink-900); }

  /* A form embedded in the prose column keeps its own spacing. */
  .legal-prose .legal-form p { margin-bottom: 0; }

  /* Tables carry the data-safety disclosure, so they have to stay readable on
     a phone: the wrapper scrolls instead of the page. */
  .legal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-ink-200);
    border-radius: 1rem;
    background: #fff;
  }

  .legal-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-ink-200);
  }

  .legal-table thead th {
    background: var(--c-brand-50);
    color: var(--c-ink-900);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .legal-table tbody tr:last-child th,
  .legal-table tbody tr:last-child td { border-bottom: 0; }

  .legal-table tbody th {
    font-weight: 600;
    color: var(--c-ink-900);
    white-space: nowrap;
  }

  /* Table of contents ------------------------------------------------------- */

  .toc-link {
    display: block;
    padding: 0.35rem 0.7rem;
    border-inline-start: 2px solid var(--c-ink-200);
    color: var(--c-ink-500);
    font-size: 0.85rem;
    text-decoration: none;
  }

  .toc-link:hover {
    border-inline-start-color: var(--c-brand-400);
    color: var(--c-brand-700);
  }

  /* Callouts ---------------------------------------------------------------- */

  .callout {
    display: flex;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--c-brand-200);
    border-radius: 1rem;
    /* White, not brand-50: the page ground is already brand-50, so a tinted
       callout would disappear into it. */
    background: #fff;
    color: var(--c-ink-700);
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .callout i { color: var(--c-brand-600); }
  .callout p:last-child { margin-bottom: 0; }

  .callout-urgent {
    border-color: #f2b8bd;
    background: #fdecee;
  }

  .callout-urgent i { color: #b02a37; }
}