/* Green / cream identity preview. The previous navy study stays available at
   ?palette=navy-cream-orange; this layer preserves its component coverage.
   Green and cream carry the light interface. Dark mode uses neutral surfaces,
   with green as a brand accent. Gold never belongs in the Yusr logo. */
@import url('/brand-palette-preview.css');

:root {
  --yusr-green: #004442;
  --yusr-cream: #F8F0E3;
  --yusr-gold: #E5A836;
  --yusr-gold-text: #795000;
  --yusr-green-soft: #426663;
  --yusr-surface: #FFFCF7;
  --yusr-cream-deep: #F1E6D8;
  --yusr-cream-border: #DCCFBC;

  /* Bridge selectors in the preceding colour study without duplicating its
     layout-safe component coverage. */
  --yusr-navy: var(--yusr-green);
  --yusr-navy-soft: var(--yusr-green-soft);
  --yusr-orange: var(--yusr-gold);
  --yusr-orange-text: var(--yusr-gold-text);

  --background: 37 60% 93%;
  --card: 38 100% 98%;
  --popover: 38 100% 98%;
  --foreground: 178 100% 13%;
  --primary: 178 100% 13%;
  --card-foreground: 178 100% 13%;
  --popover-foreground: 178 100% 13%;
  --primary-foreground: 37 60% 93%;
  --secondary: 39 77% 55%;
  --secondary-foreground: 178 100% 13%;
  --accent: 39 77% 55%;
  --accent-foreground: 178 100% 13%;
  --muted: 33 47% 90%;
  --muted-foreground: 175 21% 33%;
  --border: 35 34% 81%;
  --input: 35 34% 81%;
  --ring: 39 77% 55%;
}

/* The original poster has green lettering and intact Arabic/English copy.
   Reuse it instead of an AI recolour that could distort the writing. */
[data-kafu-hero-v2]:not([data-yusr-hero-photo]) { background: var(--yusr-green) !important; }
html[lang='ar'] [data-kafu-hero-v2]:not([data-yusr-hero-photo]) .kafu-hero-full-image img {
  content: url('/hero-poster-ar.jpg');
}
html[lang='en'] [data-kafu-hero-v2]:not([data-yusr-hero-photo]) .kafu-hero-full-image img {
  content: url('/hero-poster-en.jpg');
}

/* A little warmer and quieter than the prior orange study. */
header nav[aria-label='quick-nav'] :is(a, button):hover,
header .resala-quick-nav :is(a, button):hover {
  background: #E5A83620 !important;
}
header [data-testid='link-customer-login']:hover { background: #E5A8361A !important; }
.kafu-as-authority-row:hover { background: #FCF4E5; }
.kafu-as-authority-row-icon { background: #F9E9C5; }
.blog-search { box-shadow: 0 8px 28px #0044420D !important; }
[data-testid^='card-service-'],
.bg-card { box-shadow: 0 2px 8px #00444212, 0 8px 24px #0044420D; }
[data-testid^='card-service-']:hover {
  box-shadow: 0 4px 12px #0044421A, 0 12px 32px #00444214;
}
.kafu-cat-count { background: #E5A83626; }
.kafu-price-badge { box-shadow: 0 2px 5px #00444238; }
.kafu-service-pricing-breakdown--notice {
  background: #FCF4E5;
  border-color: #E7CEA0;
}
[data-testid^='btn-start-']:hover,
[data-testid^='btn-start-']:focus-visible { background-color: #00615D !important; }
.kafu-chat-launcher { box-shadow: 0 4px 10px #0044422E; }
.kafu-chat-launcher:hover { background: #00615D; }
.kafu-chat-panel { box-shadow: 0 22px 60px #00444230; }
.kafu-chat-form textarea:focus { box-shadow: 0 0 0 3px #E5A83640; }

/* Keep long-form content and navigation readable: bronze is reserved for
   the few short accent labels, while the exact gold stays on non-text marks. */
.yusr-guide-overline,
.yusr-guide-result-topic,
.kafu-service-path-number,
[data-testid^='card-detail-'] > p:first-child,
.blog-nav-links a:hover,
.blog-back:hover,
.yusr-guide-feature-link:hover,
.yusr-guide-result-link:hover { color: var(--yusr-gold-text) !important; }

/* The brand mark is deliberately two-colour: cream and green, not gold. */
header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] svg,
footer .flex.items-center.gap-2 > .bg-secondary svg {
  color: var(--yusr-green) !important;
}

/* Restore the approved green footer; body copy needs more contrast than the
   original 70%-opacity utility provides on this background. */
footer.bg-primary,
.dark footer.bg-primary {
  background: var(--yusr-green) !important;
  color: var(--yusr-cream) !important;
}
footer.bg-primary [class*='text-primary-foreground/70'] {
  color: var(--yusr-cream) !important;
  font-weight: 500;
}
footer.bg-primary a:hover { color: var(--yusr-gold) !important; }
/* Gold is reserved for the three footer section titles, not the logo. */
footer.bg-primary .grid h3.text-secondary { color: var(--yusr-gold) !important; }

/* The hamburger is three current-color bars, not an SVG. Give it a clear
   colour, then separate the menu destinations into readable touch targets. */
header [data-testid='button-menu'] {
  color: var(--yusr-green) !important;
}
header > .border-t.bg-background {
  background: var(--yusr-cream) !important;
  border-color: var(--yusr-cream-border) !important;
  box-shadow: 0 18px 30px #00444224;
}
header > .border-t.bg-background .container > .grid:first-child :is(a, button) {
  background: var(--yusr-surface) !important;
  border: 1px solid var(--yusr-cream-border) !important;
  color: var(--yusr-green) !important;
  font-weight: 600;
  min-height: 44px;
}
header > .border-t.bg-background .container > .grid:first-child :is(a, button):is(:hover, :focus-visible) {
  background: #FCF4E5 !important;
  border-color: var(--yusr-gold-text) !important;
}
header > .border-t.bg-background svg {
  color: var(--yusr-gold-text) !important;
  opacity: 1 !important;
}
header > .border-t.bg-background [data-testid^='nav-'][class*='bg-muted/30'] {
  background: var(--yusr-surface) !important;
  border-color: var(--yusr-cream-border) !important;
  color: var(--yusr-green) !important;
  font-weight: 600;
}
.dark header [data-testid='button-menu'] { color: var(--yusr-cream) !important; }
.dark header > .border-t.bg-background {
  background: #22282A !important;
  border-color: #465052 !important;
}
.dark header > .border-t.bg-background .container > .grid:first-child :is(a, button),
.dark header > .border-t.bg-background [data-testid^='nav-'][class*='bg-muted/30'] {
  background: #333B3D !important;
  border-color: #586367 !important;
  color: var(--yusr-cream) !important;
}
.dark header > .border-t.bg-background .container > .grid:first-child :is(a, button):is(:hover, :focus-visible) {
  background: #414B4D !important;
  border-color: var(--yusr-gold) !important;
}
.dark header > .border-t.bg-background svg { color: var(--yusr-gold) !important; }

.dark {
  --background: 195 10% 10%;
  --card: 193 9% 16%;
  --popover: 193 9% 16%;
  --foreground: 37 60% 93%;
  --primary: 37 60% 93%;
  --card-foreground: 37 60% 93%;
  --popover-foreground: 37 60% 93%;
  --primary-foreground: 178 100% 13%;
  --secondary: 39 77% 55%;
  --secondary-foreground: 178 100% 13%;
  --accent: 39 77% 55%;
  --accent-foreground: 178 100% 13%;
  --muted: 192 8% 22%;
  --muted-foreground: 35 20% 79%;
  --border: 192 8% 30%;
  --input: 192 8% 30%;
  --ring: 39 77% 55%;
}
.dark,
.dark body,
.dark #root,
.dark #root > .min-h-screen { background: #191D1F !important; }
.dark header.sticky { background: #22282A !important; border-color: #41494B !important; }
.dark header .resala-toolbar { background: #2B3234 !important; border-color: #465052 !important; }
.dark header .resala-toolbar > * + * { box-shadow: inset 1px 0 0 #465052 !important; }
.dark #services { background: #1D2224 !important; }
.dark .yusr-business-sections,
.dark .bg-card,
.dark .bg-popover,
.dark #services [data-testid='input-search-services'],
.dark #services .kafu-as-trigger,
.dark .kafu-as-panel,
.dark .yusr-guide-search-answer,
.dark .yusr-guide-quick-answer,
.dark .yusr-guide-watch,
.dark [data-testid^='card-detail-'],
.dark .kafu-chat-panel,
.dark .kafu-chat-assistant,
.dark .kafu-chat-note,
.dark .kafu-chat-form,
.dark .kafu-contact-form {
  background: #292F31 !important;
  color: var(--yusr-cream) !important;
  border-color: #465052 !important;
}
.dark .kafu-as-panel-sheet,
.dark .kafu-chat-messages { background: #1D2224 !important; }
.dark .kafu-as-panel-head,
.dark .kafu-as-authority-row,
.dark .kafu-as-picker-search-input,
.dark :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  background: #292F31 !important;
  color: var(--yusr-cream) !important;
  border-color: #4C5658 !important;
}
.dark .kafu-as-authority-row:hover,
.dark .kafu-chat-starters button:hover,
.dark .kafu-chat-actions button:hover,
.dark .kafu-chat-service-link:hover { background: #384244 !important; }
.dark .kafu-as-authority-row-icon { background: #344C49; }
.dark .kafu-chat-form textarea,
.dark .kafu-contact-form input { background: #22282A !important; }
.dark .kafu-chat-starters button,
.dark .kafu-chat-actions button,
.dark .kafu-chat-service-link,
.dark .kafu-contact-hint { background: #333B3D !important; color: var(--yusr-cream) !important; border-color: #4C5658 !important; }
.dark .kafu-contact-hint:hover,
.dark .kafu-contact-hint[aria-expanded='true'] { background: #414B4D !important; }
.dark [data-testid='text-service-price-hero'],
.dark .kafu-service-pricing-breakdown,
.dark .kafu-service-pricing-breakdown--notice { background: #292F31 !important; border-color: #4C5658 !important; }
.dark [data-testid^='card-detail-'] > p:first-child,
.dark .yusr-guide-overline,
.dark .yusr-guide-result-topic,
.dark .yusr-guide-quick-answer h4 { color: #F3C879 !important; }
.dark [data-testid^='btn-start-'] { background: var(--yusr-cream) !important; color: var(--yusr-green) !important; }
.dark [data-testid^='btn-start-']:is(:hover, :focus-visible) {
  background: var(--yusr-cream) !important;
  color: var(--yusr-green) !important;
}
.dark [data-testid^='btn-start-']:focus-visible {
  outline: 2px solid var(--yusr-gold) !important;
  outline-offset: 2px;
}
.dark [data-testid^='btn-start-'] svg { color: var(--yusr-green) !important; }
/* Small emerald icon wells give cards a recognizable brand cue without
   turning the whole dark canvas green. */
.dark [data-testid^='card-service-'] :is(.w-14.h-14, .w-11.h-11) {
  background: #24534D !important;
  box-shadow: inset 0 0 0 1px #4A756E;
}
.dark [data-testid^='card-service-'] :is(.w-14.h-14, .w-11.h-11) svg[class*='lucide-'] {
  color: var(--yusr-cream) !important;
}
.dark [data-testid^='card-service-']:hover {
  border-color: #64837A !important;
  box-shadow: 0 6px 22px #0000004D;
}
.dark .kafu-cat-count { background: #E5A83630; }
.dark header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] .bg-secondary {
  background: #F8F0E3 !important;
  border-color: #7BA7A1;
}
.dark header a[data-logo-scroll-bound] .bg-secondary > div.absolute.inset-0[style] {
  background: #00615D !important;
}
.dark header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] svg {
  color: var(--yusr-green) !important;
}