@charset "UTF-8";
/* ==========================================================================
   Annada — Theme
   Design tokens + component skin generated from the brand style sheet.

   Palette      Primary  #000000   Secondary #F46523
                Tertiary #000000   Neutral   #F7F7F7
   Type         Headline / Label   Montserrat
                Body               Nunito Sans

   Loaded LAST, after core.css, styles.css and the inline colour block in
   app.blade.php, so it wins the cascade without needing !important
   everywhere. Edit the tokens in :root — almost nothing below is hard-coded.
   ========================================================================== */

:root {
  /* ---- Brand ramp — secondary #F46523 ------------------------------- */
  --brand-50:  #FEF6F2;
  --brand-100: #FDE9E0;
  --brand-200: #FCD1BD;
  --brand-300: #FAB291;
  --brand-400: #F78D5C;
  --brand-500: #F46523;   /* the brand colour itself */
  --brand-600: #D2571E;
  --brand-700: #AB4718;
  --brand-800: #7F3512;
  --brand-900: #58240D;

  --brand: var(--brand-500);
  /* Text-safe orange. #F46523 only reaches 3.1:1 against white, so anything
     carrying words or a white glyph uses these instead. */
  --brand-ink: #AB4718;    /* orange text on light surfaces  — 5.8:1 on #fff */
  --brand-fill: #B84C1A;   /* white text on orange fill      — 5.1:1        */

  /* ---- Ink ramp — primary / tertiary #000000 ------------------------ */
  --ink-900: #000000;
  --ink-800: #141414;
  --ink-700: #1F1F1F;
  --ink-600: #2A2A2A;      /* "Inverted" button */
  --ink-500: #3D3D3D;
  --ink-400: #5C5C5C;      /* muted body text  — 6.7:1 on #fff */
  --ink-300: #8A8A8A;
  --ink-200: #B2B2B2;
  --ink-100: #DBDBDB;
  --ink-50:  #F0F0F0;

  --ink: var(--ink-900);

  /* ---- Surfaces — neutral #F7F7F7 ----------------------------------- */
  --surface-canvas: #E9E9E9;   /* page background behind cards */
  --surface-card:   #FFFFFF;   /* elevated card                */
  --surface-sunken: #F1F1F1;   /* tinted panel / well          */
  --surface-neutral:#F7F7F7;   /* the neutral swatch           */
  --surface-invert: #000000;

  /* ---- Semantic ------------------------------------------------------ */
  --success: #1F8A4C;
  --warning: #E0A106;
  --danger:  #D93B2B;
  --info:    #2B6CB0;

  /* ---- Lines & elevation --------------------------------------------- */
  --line:        rgba(0, 0, 0, .10);
  --line-strong: rgba(0, 0, 0, .22);
  --focus-ring:  0 0 0 3px rgba(244, 101, 35, .35);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .06);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .12);

  /* ---- Radii — matches the rounded cards in the style sheet ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;    /* buttons, inputs   */
  --radius-md: 12px;   /* inner panels      */
  --radius-lg: 16px;   /* cards             */
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Type ---------------------------------------------------------- */
  --font-headline: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:     'Nunito Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-label:    'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;

  --speed: 180ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-800);
  background-color: var(--surface-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4,
.navbar-brand, .card-title {
  font-family: var(--font-headline);
  color: var(--ink-900);
  letter-spacing: -.015em;
  line-height: 1.2;
}

h1, .h1, .display-4 { font-weight: 800 !important; }
h2, .h2            { font-weight: 800 !important; }
h3, .h3, h4, .h4   { font-weight: 700 !important; }
h5, .h5, h6, .h6   { font-weight: 700 !important; }

.lead { font-family: var(--font-body); font-weight: 400; color: var(--ink-400); }

label,
.label,
.form-label,
.badge,
.btn,
.nav-link,
.custom-control-label,
.input-group-text,
th,
.table thead th {
  font-family: var(--font-label);
  letter-spacing: .005em;
}

label, .form-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink-500);
  margin-bottom: .35rem;
}

small, .small { font-size: .8125rem; }

.text-muted { color: var(--ink-400) !important; }
.text-primary { color: var(--brand-ink) !important; }
.text-dark { color: var(--ink-900) !important; }

hr { border-top: 1px solid var(--line); }

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

/* Links — orange is the accent, per the palette */
a,
body a {
  color: var(--brand-ink);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
a:hover,
body a:hover,
a:focus,
body a:focus {
  color: var(--brand-800);
  text-decoration: none;
}
a.text-dark:hover, a.text-white:hover { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   2. Buttons
   Primary  = black         Secondary = neutral grey
   Inverted = charcoal      Outlined  = hairline
   Brand    = orange fill (uses the darker text-safe orange)
   ========================================================================== */

.btn {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  border-radius: var(--radius-sm);
  padding: .625rem 1.125rem;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

/* the old theme scaled buttons up 10% on hover — far too loud for this system */
.btn:hover:not(.no-hover),
.no-hover:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(.no-hover) { transform: translateY(0); box-shadow: none; }

.btn-lg  { padding: .8125rem 1.5rem;  font-size: 1rem;     border-radius: var(--radius-sm); }
.btn-sm  { padding: .375rem .75rem;   font-size: .8125rem; border-radius: var(--radius-xs); }
.btn-block { width: 100%; }

/* Primary — black */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--ink-600);
  border-color: var(--ink-600);
  color: #fff;
}
.btn-primary:focus { box-shadow: var(--focus-ring); }
.btn-primary.disabled, .btn-primary:disabled { opacity: .45; }

/* Secondary — neutral chip */
.btn-secondary,
.btn-light {
  background-color: var(--ink-50);
  border-color: var(--ink-50);
  color: var(--ink-800);
}
.btn-secondary:hover, .btn-light:hover,
.btn-secondary:focus, .btn-light:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active {
  background-color: var(--ink-100);
  border-color: var(--ink-100);
  color: var(--ink-900);
}

/* Inverted — charcoal */
.btn-dark, .btn-inverted {
  background-color: var(--ink-600);
  border-color: var(--ink-600);
  color: #fff;
}
.btn-dark:hover, .btn-inverted:hover,
.btn-dark:focus, .btn-inverted:focus {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* Outlined — hairline, dark label */
.btn-outline-primary,
.btn-outlined {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--ink-800);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outlined:hover,
.btn-outlined:focus {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* Brand orange — accent call-to-action */
.btn-brand,
.btn-accent,
.btn-donate,
.btn-donate-embed {
  background-color: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}
.btn-brand:hover, .btn-accent:hover, .btn-donate:hover, .btn-donate-embed:hover,
.btn-brand:focus, .btn-accent:focus, .btn-donate:focus, .btn-donate-embed:focus {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.btn-outline-brand {
  background: transparent;
  border-color: var(--brand-fill);
  color: var(--brand-ink);
}
.btn-outline-brand:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }

.btn-success { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-danger  { background-color: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: var(--ink-900); }
.btn-success:hover { background-color: #196F3D; border-color: #196F3D; }
.btn-danger:hover  { background-color: #B72E20; border-color: #B72E20; }

.btn-link { color: var(--brand-ink); font-weight: 600; }
.btn-link:hover { color: var(--brand-800); }

/* Square icon buttons — the small tiles in the style sheet */
.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.btn-create {
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* ==========================================================================
   3. Forms
   ========================================================================== */

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--ink-800);
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
  height: auto;
  box-shadow: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.form-control::placeholder { color: var(--ink-300); }
.form-control:focus,
.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus {
  background-color: var(--surface-card);
  border-color: var(--brand-400);
  box-shadow: var(--focus-ring) !important;
  color: var(--ink-900);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-sunken); }

.input-group-text {
  background-color: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink-400);
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
}
.input-group > .input-group-prepend > .input-group-text { border-right: 0; }
.input-group > .input-group-append  > .input-group-text { border-left: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text i { color: var(--ink-300); }

/* Search field — pill-free, soft rounded, as in the style sheet */
#search input[type="text"] {
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--focus-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: var(--brand-400);
}
.custom-control-label { color: var(--ink-600); font-family: var(--font-body); }

.invalid-feedback, .text-danger { color: var(--danger) !important; }

/* ==========================================================================
   4. Cards & surfaces
   ========================================================================== */

.card {
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.card-header, .card-footer {
  background-color: transparent;
  border-color: var(--line);
  font-family: var(--font-label);
  font-weight: 600;
}
.card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-footer:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card img.card-img-top   { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.campaigns:hover, .card.hoverable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-title { font-size: 1.0625rem; font-weight: 700; }
.card-text  { color: var(--ink-400); }

.jumbotron { background-color: var(--surface-neutral); border-radius: var(--radius-lg); }

.bg-light    { background-color: var(--surface-neutral) !important; }
.bg-white    { background-color: var(--surface-card) !important; }
.bg-dark,
.bg-dark-2,
.bg-dark-3   { background-color: var(--surface-invert) !important; }
.bg-primary  { background-color: var(--ink-900) !important; }
.bg-brand    { background-color: var(--brand-500) !important; }
.bg-neutral  { background-color: var(--surface-neutral) !important; }
.bg-canvas   { background-color: var(--surface-canvas) !important; }

main > div.section:nth-child(odd)  { background-color: var(--surface-card); }
main > div.section:nth-child(even) { background-color: var(--surface-neutral); }

.bg-sections { background-color: var(--ink-900); }
.bg-sections::before { background-color: rgba(0, 0, 0, .35); }

.rounded    { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow     { box-shadow: var(--shadow-md) !important; }
.shadow-lg  { box-shadow: var(--shadow-lg) !important; }

.box-featured {
  background-color: var(--surface-neutral);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
i.featured-icon { color: var(--brand-ink); }

/* ==========================================================================
   5. Navbar & dropdowns
   ========================================================================== */

.navbar {
  font-family: var(--font-label);
  background-color: var(--surface-invert);
}
.navbar.scroll { background-color: transparent; }
.navbar-brand { font-weight: 800; }

.navbar .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .82);
  border-radius: var(--radius-xs);
  transition: color var(--speed) var(--ease);
}
.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-nav .nav-item .nav-link:focus { color: #fff; }
.navbar .navbar-nav .nav-item .nav-link:not(.btn).active { color: var(--brand-300); }
.navbar .navbar-nav .nav-item .nav-link.btn { color: #fff; }

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: .375rem;
  font-family: var(--font-body);
}
.dropdown-item {
  border-radius: var(--radius-xs);
  font-size: .9375rem;
  color: var(--ink-700);
  padding: .5rem .75rem;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--ink-900) !important;
  color: #fff !important;
}
.dropdown-divider { border-top-color: var(--line); }

/* ==========================================================================
   6. Progress, badges, pagination, alerts
   ========================================================================== */

.progress {
  background-color: var(--ink-50);
  border-radius: var(--radius-pill);
  height: .5rem;
  box-shadow: none;
}
.progress-xs { height: 5px; }
.progress-bar {
  background-color: var(--brand-500);
  border-radius: var(--radius-pill);
}
.progress-bar.bg-dark, .progress-bar.bg-primary { background-color: var(--ink-900) !important; }
.text-percentage { color: var(--brand-ink); font-family: var(--font-label); font-weight: 700; }

.badge {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
  padding: .375em .625em;
  border-radius: var(--radius-xs);
}
.badge-primary   { background-color: var(--ink-900); color: #fff; }
.badge-brand     { background-color: var(--brand-fill); color: #fff; }
.badge-secondary { background-color: var(--ink-50); color: var(--ink-700); }
.badge-success   { background-color: var(--success); color: #fff; }
.badge-danger    { background-color: var(--danger); color: #fff; }
.badge-warning   { background-color: var(--warning); color: var(--ink-900); }
.badge-light     { background-color: var(--surface-neutral); color: var(--ink-700); }

/* `a.page-link` matches the selector used by the admin colour block, which
   outranks a bare `.page-link` — keep both so the numbers stay neutral. */
a.page-link,
.page-link {
  color: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs) !important;
  margin: 0 .1875rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .875rem;
  padding: .4375rem .75rem;
}
a.page-link:hover,
.page-link:hover { background-color: var(--ink-50); color: var(--ink-900); border-color: var(--line); }
.page-item.active a.page-link,
.page-item.active .page-link {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.page-item.disabled .page-link { color: var(--ink-200); background: transparent; }

.alert {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  padding: .875rem 1rem;
}
.alert-success { background-color: #E8F5EE; border-color: #C3E4D2; color: #14603A; }
.alert-danger  { background-color: #FCEBE9; border-color: #F3C9C4; color: #8C2318; }
.alert-warning { background-color: #FDF4E0; border-color: #F5E1B0; color: #7A5906; }
.alert-info    { background-color: var(--brand-50); border-color: var(--brand-200); color: var(--brand-800); }
.bg-danger     { background-color: var(--danger) !important; }

.popout       { background-color: var(--ink-900); color: #fff; border-radius: var(--radius-md); }
.popout-error { background-color: var(--danger); }

.showBanner {
  background-color: var(--ink-900);
  color: #fff;
  font-family: var(--font-body);
}
.showBanner a { color: var(--brand-300); }

/* ==========================================================================
   7. Tables, modals, misc
   ========================================================================== */

.table { font-family: var(--font-body); color: var(--ink-700); }
.table thead th {
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
  border-bottom: 1px solid var(--line);
  border-top: 0;
}
.table td, .table th { border-top: 1px solid var(--line); vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--surface-neutral); }

.modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-family: var(--font-headline); font-weight: 700; }

.owl-theme .owl-dots .owl-dot span { background-color: var(--ink-200); }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background-color: var(--brand-500) !important; }
.owl-theme .owl-dots .owl-dot.active span::before,
.owl-theme .owl-dots .owl-dot:hover span::before { border-color: var(--brand-500); }

#updates li:before { background-color: var(--brand-500); }
#updates li:hover:before { background-color: var(--brand-700) !important; }
#updates li:after { background-color: var(--line); }

.avatarUser, .rounded-circle { border-radius: 50% !important; }
.button-avatar-upload { background-color: var(--ink-900); color: #fff; border-radius: var(--radius-sm); }
a:hover.button-avatar-upload { background-color: var(--ink-600); color: #fff; }

.social-share { border-radius: var(--radius-sm); }
.likeButton   { border-radius: var(--radius-sm); }

.filer-input-dragDrop {
  background-color: var(--surface-neutral);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.filer-input-dragDrop:hover,
.filer.dragged .filer-input-dragDrop { border-color: var(--brand-500); background-color: var(--brand-50); }
.filer-input-icon, .filer-input-text h3 { color: var(--ink-400); }
.filer-input-choose-btn {
  background-color: var(--ink-900) !important;
  border-color: var(--ink-900) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-label);
}

.error-page h1 { font-family: var(--font-headline); font-weight: 800; color: var(--ink-900); }
.error-link    { color: var(--brand-ink); }

footer, .copyright { font-family: var(--font-body); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, a, .form-control { transition: none !important; }
  .btn:hover:not(.no-hover), .no-hover:hover, .campaigns:hover { transform: none !important; }
}