/* ==========================================================================
   Rawla — global theme
   Loaded once from resources/views/layouts/app.blade.php so every public
   page (members, businesses, jobs, events, marriage, gotra, auth, profile...)
   shares one palette, one type system, one icon library, and one set of
   reusable motion utilities. Page-specific layout still lives in each view.
   ========================================================================== */

:root {
  /* Brand */
  --maroon:        #7a1e2c;
  --maroon-700:    #5e1420;
  --maroon-100:    #f4e3e2;
  --saffron:       #d9720f;
  --saffron-600:   #b85b08;
  --saffron-100:   #fbe8d3;
  --gold:          #b4872a;
  --gold-soft:     #f1e2b8;

  /* Neutrals (warm, not grey) */
  --ink:           #241109;
  --ink-soft:      #5b4a3f;
  --paper:         #fbf6ee;
  --paper-raised:  #ffffff;
  --line:          #e7dcc9;

  /* Back-compat: the names the older inline styles across the app already
     reference via var(--primary-color) etc. Point them at the new palette
     so every existing page re-themes automatically. */
  --primary-color:   var(--maroon);
  --secondary-color: var(--saffron);
  --accent-color:    var(--gold);
  --light-bg:        var(--paper);
  --border-color:    var(--line);
  --text-dark:       var(--ink);
  --text-muted:      var(--ink-soft);

  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans', 'Noto Sans Devanagari', 'Segoe UI', Tahoma, sans-serif;
}

@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;
  }
}

/* ---- Base ---------------------------------------------------------- */

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .display-4, .display-5 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

::selection {
  background: var(--saffron);
  color: #fff;
}

a {
  color: var(--maroon);
}
a:hover {
  color: var(--saffron-600);
}

/* ---- Header / nav ---------------------------------------------------- */

.site-header {
  background-color: var(--paper-raised);
  border-bottom: 3px solid var(--maroon);
  box-shadow: 0 2px 4px rgba(36, 17, 9, 0.08);
}

.site-header .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--maroon);
}
.site-header .navbar-brand:hover { color: var(--saffron-600); }

.navbar-nav .nav-link {
  color: var(--ink);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 6px;
  margin: 0 0.2rem;
}
.navbar-nav .nav-link:hover {
  background-color: var(--saffron-100);
  color: var(--maroon-700);
}
.navbar-nav .nav-link.active {
  background-color: var(--maroon);
  color: #ffffff;
}

/* ---- Cards / tables / breadcrumbs (structure unchanged, retinted) ---- */

.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(36, 17, 9, 0.06);
  margin-bottom: 1.5rem;
  background-color: var(--paper-raised);
}
.card-header {
  background-color: var(--paper);
  border-bottom: 2px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  padding: 1rem 1.5rem;
}
.card-body { padding: 1.5rem; }

.table { background-color: var(--paper-raised); }
.table thead th {
  background-color: var(--paper);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--line);
  padding: 0.9rem;
}
.table tbody tr:hover { background-color: var(--maroon-100); }

.breadcrumb { background-color: transparent; padding: 0.75rem 0; margin-bottom: 1rem; }
.breadcrumb-item a { color: var(--saffron-600); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--maroon); text-decoration: underline; }
.breadcrumb-item.active { color: var(--ink-soft); }

.page-title {
  color: var(--maroon);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--gold);
  display: inline-block;
}

.text-primary-custom { color: var(--maroon); }
.bg-light-custom { background-color: var(--paper); }
.border-primary-custom { border-color: var(--maroon) !important; }
.text-muted { color: var(--ink-soft) !important; }

/* ---- Buttons ----------------------------------------------------------
   Bootstrap 5.3's compiled CDN CSS sets literal colors per button variant
   rather than reading a single root token, so each variant is retargeted
   here rather than relying on --bs-primary alone. */

.btn { border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 500; transition: all 0.2s ease; }

.btn-primary {
  --bs-btn-bg: var(--maroon);
  --bs-btn-border-color: var(--maroon);
  --bs-btn-hover-bg: var(--saffron-600);
  --bs-btn-hover-border-color: var(--saffron-600);
  --bs-btn-active-bg: var(--saffron-600);
  --bs-btn-active-border-color: var(--saffron-600);
  --bs-btn-disabled-bg: var(--maroon);
  --bs-btn-disabled-border-color: var(--maroon);
  background-color: var(--maroon);
  border-color: var(--maroon);
}
.btn-primary:hover, .btn-primary:active {
  background-color: var(--saffron-600) !important;
  border-color: var(--saffron-600) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--maroon);
  --bs-btn-border-color: var(--maroon);
  --bs-btn-hover-bg: var(--maroon);
  --bs-btn-hover-border-color: var(--maroon);
  --bs-btn-active-bg: var(--maroon);
  --bs-btn-active-border-color: var(--maroon);
  color: var(--maroon);
  border-color: var(--maroon);
}

/* A warmer, higher-contrast call-to-action for hero / primary conversions */
.btn-valor {
  background: linear-gradient(135deg, var(--saffron) 0%, var(--maroon) 120%);
  border: 1px solid var(--maroon-700);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.7rem 1.6rem;
  box-shadow: 0 6px 18px rgba(122, 30, 44, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-valor:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(122, 30, 44, 0.35);
}
.btn-valor-outline {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--maroon-700);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.68rem 1.6rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-valor-outline:hover {
  background: var(--gold-soft);
  color: var(--maroon-700);
}

/* ---- Forms --------------------------------------------------------- */

.form-label { font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.form-control, .form-select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 0.2rem rgba(217, 114, 15, 0.18);
}

/* ---- Badges / alerts / colour utilities ----------------------------- */

.badge { padding: 0.4rem 0.8rem; font-weight: 500; border-radius: 5px; }
.bg-primary { background-color: var(--maroon) !important; }
.text-primary { color: var(--maroon) !important; }
.border-primary { border-color: var(--maroon) !important; }
.bg-secondary { background-color: var(--ink-soft) !important; }

.alert { border-radius: 8px; border: none; padding: 1rem 1.25rem; }
.alert-success { background-color: #dcedd6; color: #2f5d29; }
.alert-danger  { background-color: var(--maroon-100); color: var(--maroon-700); }
.alert-info    { background-color: var(--gold-soft); color: #5c4712; }

/* ---- Pagination ------------------------------------------------------ */

.page-link { color: var(--maroon); }
.page-link:hover { color: var(--saffron-600); background-color: var(--saffron-100); }
.page-item.active .page-link {
  background-color: var(--maroon);
  border-color: var(--maroon);
}

.dropdown-item:hover, .dropdown-item:focus { background-color: var(--saffron-100); color: var(--maroon-700); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--maroon); }

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

.site-footer { background-color: var(--paper); border-top: 3px solid var(--maroon); margin-top: auto; color: var(--ink-soft); }
.footer-link { font-size: small; display: inline-block; padding: 0.5rem 1rem; color: var(--ink-soft); text-decoration: none; }
.footer-link:hover { background-color: var(--paper-raised); color: var(--maroon); }

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.footer-nav-link {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.footer-nav-link:hover { color: var(--maroon); padding-left: 3px; }

.social-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--maroon-100);
  color: var(--maroon);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-btn:hover { background: var(--maroon); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   Motion + heritage utility classes — available on any page that extends
   layouts.app. Everything here respects prefers-reduced-motion (see top).
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }

.card-heritage {
  background: var(--paper-raised);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  position: relative;
}
.card-heritage::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  pointer-events: none;
}

/* Content is fully visible by default — the fade-in is pure progressive
   enhancement, opt-in only once JS has confirmed the page is interactive
   (html.js, set by an inline script in <head>) and the visitor hasn't
   asked for reduced motion. No JS, no motion preference, or a bot/crawler
   that never runs the script all just see the finished state immediately. */
.reveal-up { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  html.js .reveal-up {
    opacity: 0;
    animation: reveal-up 0.7s cubic-bezier(.2,.7,.3,1) forwards;
  }
  html.js .reveal-up.d1 { animation-delay: .08s; }
  html.js .reveal-up.d2 { animation-delay: .18s; }
  html.js .reveal-up.d3 { animation-delay: .28s; }
  html.js .reveal-up.d4 { animation-delay: .38s; }
}

@keyframes shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-rule {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 45%, var(--saffron) 50%, var(--gold) 55%, transparent);
  background-size: 200% 100%;
  animation: shimmer-sweep 3.2s ease-in-out infinite;
}

.crest svg { overflow: visible; }
/* Fully drawn, static, visible by default; the "inscribing" effect below
   is progressive enhancement only — same reasoning as .reveal-up above. */
.crest .crest-draw { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes crest-draw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes crest-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes crest-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.12); }
  }
  html.js .crest .crest-ring {
    transform-origin: 50% 50%;
    animation: crest-spin 70s linear infinite;
  }
  html.js .crest .crest-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: crest-draw 1.1s ease-out forwards;
  }
  html.js .crest .crest-gem {
    transform-origin: 50% 50%;
    animation: crest-pulse 2.4s ease-in-out infinite;
    animation-delay: 1.2s;
  }
}

/* Left-hand filter sidebar — used on any listing page with a filter form
   (members directory, matchmaking, ...). */
.filter-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.filter-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--maroon-100);
  color: var(--maroon-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.filter-card__body { padding: 1rem 1.1rem; }
.filter-group + .filter-group { margin-top: 1rem; }
.filter-group label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.35rem;
}
@media (min-width: 992px) {
  .filter-sticky { position: sticky; top: 1rem; }
}

/* Chip-style choice group — for 2-4 mutually exclusive options (radio) or
   toggles (checkbox). Reusable anywhere a plain <select>/radio list would
   otherwise be used for a short, scannable choice set. */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-raised);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  user-select: none;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.chip:hover { border-color: var(--saffron); }
.chip:has(input:checked) {
  border-color: var(--maroon);
  background: var(--maroon-100);
  color: var(--maroon-700);
}
.chip .chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color 0.15s ease;
}
.chip:has(input:checked) .chip-dot { background: var(--saffron); }

.stat-figure {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--maroon);
}

/* Section-showcase card — one per portal feature (members, family tree,
   jobs, ...). Reusable anywhere a page needs to link out to other areas. */
.portal-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  padding: 1.5rem 1.3rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.portal-card:hover, .portal-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(122, 30, 44, 0.14);
  border-color: var(--gold);
  color: var(--ink);
}
.portal-card__icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--maroon-100);
  color: var(--maroon);
  font-size: 1.35rem;
}
.portal-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.portal-card__desc {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0;
}
.portal-card__go {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--saffron-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}