/* ============================================================
   KIKAO DESIGN SYSTEM — tokens + dark/light theme
   Source of truth: DOCUMENTATION/06-DESIGN-SYSTEM/Kikao Design Document.txt
   Loaded after main.css so these values win. This file does two things:
   1) defines the full Kikao token set (§03/§04/§05 of the design doc)
   2) re-targets the existing template's own variables (--accent-color,
      --nav-hover-color, etc., defined in main.css :root) at those tokens,
      so the rest of main.css's ~2900 lines pick up the rebrand without
      being rewritten line-by-line.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=Orbitron:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Gold (primary) — see Design Doc §03 ---- */
  --kikao-gold-100: #FDF8ED;
  --kikao-gold-200: #F6D78A; /* brand */
  --kikao-gold-300: #EAC66E;
  --kikao-gold-400: #D7B445; /* brand */
  --kikao-gold-500: #D4AF37; /* brand — PRIMARY */
  --kikao-gold-600: #B8952C;
  --kikao-gold-700: #967722;
  --kikao-gold-800: #6E5719;
  --kikao-gold-900: #4A3A10;

  /* ---- Neutrals (charcoal-tinted) ---- */
  --kikao-white:      #FFFFFF;
  --kikao-neutral-50:  #F7F6F6;
  --kikao-neutral-100: #EDEBEB;
  --kikao-neutral-200: #D8D5D5;
  --kikao-neutral-300: #B8B4B4;
  --kikao-neutral-400: #8C8788;
  --kikao-neutral-500: #5F5A5B;
  --kikao-neutral-600: #423E3F;
  --kikao-neutral-700: #2E2A2B;
  --kikao-neutral-800: #231F20; /* brand — CHARCOAL */
  --kikao-neutral-900: #171415;
  --kikao-black:       #000000;

  /* ---- Semantic ---- */
  --kikao-success: #2FAE66;      --kikao-success-bg: #EAF7EF;      --kikao-success-border: #A9DFC0;
  --kikao-warning: #E0A426;      --kikao-warning-bg: #FBF3DF;      --kikao-warning-border: #F0D493;
  --kikao-error:   #D64545;      --kikao-error-bg:   #FBEAEA;      --kikao-error-border:   #EFB3B3;
  --kikao-info:    #3B82C4;      --kikao-info-bg:    #EAF3FA;      --kikao-info-border:    #A9CFE8;

  /* ---- Typography (Design Doc §04) ---- */
  --kikao-font-display: "Orbitron", sans-serif;
  --kikao-font-heading: "Space Grotesk", sans-serif;
  --kikao-font-body:    "Inter", sans-serif;
  --kikao-font-mono:    "JetBrains Mono", monospace;

  /* ---- Spacing (Design Doc §05, 8pt scale) ---- */
  --kikao-space-2: 2px;   --kikao-space-4: 4px;   --kikao-space-8: 8px;
  --kikao-space-12: 12px; --kikao-space-16: 16px; --kikao-space-20: 20px;
  --kikao-space-24: 24px; --kikao-space-32: 32px; --kikao-space-40: 40px;
  --kikao-space-48: 48px; --kikao-space-64: 64px; --kikao-space-80: 80px;
  --kikao-space-96: 96px; --kikao-space-128: 128px;

  /* ---- Radius (Design Doc §43) ---- */
  --kikao-radius-sm: 4px;
  --kikao-radius-md: 8px;
  --kikao-radius-lg: 16px;
  --kikao-radius-xl: 24px;
  --kikao-radius-pill: 999px;

  /* ---- Shadows / elevation (Design Doc §41) ---- */
  --kikao-shadow-1: 0 1px 2px rgba(23,20,21,0.06), 0 1px 3px rgba(23,20,21,0.08);
  --kikao-shadow-2: 0 4px 12px rgba(23,20,21,0.12);
  --kikao-shadow-3: 0 8px 24px rgba(23,20,21,0.16);
  --kikao-shadow-4: 0 16px 48px rgba(23,20,21,0.24);
  --kikao-shadow-gold-glow: 0 0 0 3px rgba(212,175,55,0.25);

  /* ---- Motion (Design Doc §18/§24) ---- */
  --kikao-duration-fast: 120ms;
  --kikao-duration-normal: 200ms;
  --kikao-duration-slow: 350ms;
  --kikao-duration-cinematic: 700ms;
  --kikao-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --kikao-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --kikao-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ================================================================
     LIGHT THEME (default) — surfaces per Design Doc §23
     ================================================================ */
  --kikao-bg:            var(--kikao-white);
  --kikao-bg-alt:        var(--kikao-neutral-50);
  --kikao-surface:       var(--kikao-white);
  --kikao-border:        var(--kikao-neutral-200);
  --kikao-text-primary:  var(--kikao-neutral-800);
  --kikao-text-secondary:var(--kikao-neutral-500);
  --kikao-link:          var(--kikao-gold-700);
  --kikao-btn-primary-bg:   var(--kikao-neutral-800);
  --kikao-btn-primary-text: var(--kikao-gold-500);

  /* ---- Re-target the template's own tokens (main.css :root) ---- */
  --default-font: var(--kikao-font-body);
  --heading-font: var(--kikao-font-heading);
  --nav-font: var(--kikao-font-heading);

  --background-color: var(--kikao-bg);
  --default-color: var(--kikao-text-primary);
  --heading-color: var(--kikao-text-primary);
  --accent-color: var(--kikao-gold-600);
  --surface-color: var(--kikao-surface);
  --contrast-color: var(--kikao-white);

  --nav-color: var(--kikao-text-primary);
  --nav-hover-color: var(--kikao-gold-700);
  --nav-mobile-background-color: var(--kikao-white);
  --nav-dropdown-background-color: var(--kikao-white);
  --nav-dropdown-color: var(--kikao-text-primary);
  --nav-dropdown-hover-color: var(--kikao-gold-700);
}

/* ================================================================
   DARK THEME — the logo's native surface (Design Doc §02.8/§23)
   Toggled via [data-theme="dark"] on <html>, set by theme-toggle.js
   ================================================================ */
[data-theme="dark"] {
  --kikao-bg:            var(--kikao-neutral-900);
  --kikao-bg-alt:        var(--kikao-neutral-800);
  --kikao-surface:       var(--kikao-neutral-800);
  --kikao-border:        var(--kikao-neutral-700);
  --kikao-text-primary:  var(--kikao-white);
  --kikao-text-secondary:var(--kikao-neutral-300);
  --kikao-link:          var(--kikao-gold-300);
  --kikao-btn-primary-bg:   var(--kikao-gold-500);
  --kikao-btn-primary-text: var(--kikao-neutral-900);

  --background-color: var(--kikao-bg);
  --default-color: var(--kikao-text-primary);
  --heading-color: var(--kikao-white);
  --accent-color: var(--kikao-gold-500);
  --surface-color: var(--kikao-surface);
  --contrast-color: var(--kikao-neutral-900);

  --nav-color: var(--kikao-white);
  --nav-hover-color: var(--kikao-gold-300);
  --nav-mobile-background-color: var(--kikao-neutral-900);
  --nav-dropdown-background-color: var(--kikao-neutral-800);
  --nav-dropdown-color: var(--kikao-white);
  --nav-dropdown-hover-color: var(--kikao-gold-300);

  /* Re-target the admin dashboards' own local design-token names
     (messages.php, project_requests.php, users.php all declare an
     identical, page-local :root block with these exact names, fully
     disconnected from the tokens above - dozens of cards, tables,
     modals, search boxes and pagination controls read them). Without
     !important the page's own :root block - loaded after this file -
     would always win on the specificity tie regardless of theme. */
  --page-bg: var(--kikao-bg) !important;
  --card-bg: var(--kikao-surface) !important;
  --border-color: var(--kikao-border) !important;
  --text-main: var(--kikao-text-primary) !important;
  --text-muted: var(--kikao-text-secondary) !important;

  background-color: var(--kikao-bg);
  color: var(--kikao-text-primary);
}

[data-theme="dark"] body {
  /* !important: many pages hardcode their own `body { background: #f4f7f6 }`
     (or a page-local variable like --page-bg that isn't tied to the theme
     system at all) inside their own <style> block, which loads AFTER this
     stylesheet - without !important those pages' own rule would always
     win regardless of which theme is active. background-image: none is
     needed too - about_us.php and blog.php set `body { background:
     linear-gradient(...) }`, and that shorthand's background-image sits
     visually on top of background-color and stays fully opaque, so
     overriding only background-color left the light gradient showing
     straight through underneath it. */
  background-color: var(--kikao-bg) !important;
  background-image: none !important;
  color: var(--kikao-text-primary) !important;
}

/* Root cause of "sections don't change color": main.css's original
   .light-background/.dark-background presets (a pre-existing zebra-
   stripe convention from the source template, predating our theme
   toggle entirely) redefine --background-color/--surface-color
   DIRECTLY on the section element itself. A variable set directly on
   an element always wins over one inherited from :root/[data-theme],
   no matter the specificity math - so every section carrying
   .light-background (About on index.php, the intro section on
   services/terms/privacy-policy, etc.) was stuck at its fixed off-
   white #f9f9f9 in both themes. This re-points those two variables,
   on the section itself, back at the live theme tokens. */
[data-theme="dark"] .light-background {
  --background-color: var(--kikao-bg) !important;
  --surface-color: var(--kikao-surface) !important;
}

/* Same bug, index.php's header specifically: main.css locks the header
   to an opaque white background with dark text/nav once you scroll
   past the transparent hero (`.index-page.scrolled .header`), with no
   regard for the site theme at all - so scrolling on the homepage in
   dark mode snapped the header back to light. Also where the reported
   "red in the navbar while scrolling" bug lived: that rule's
   --nav-hover-color was still the old brand red (#e84545), fixed
   directly in main.css - this block only handles the light/dark swap. */
[data-theme="dark"] .index-page.scrolled .header {
  --background-color: var(--kikao-bg) !important;
  --heading-color: var(--kikao-text-primary) !important;
  --nav-color: var(--kikao-text-primary) !important;
  --nav-hover-color: var(--kikao-gold-300) !important;
}

/* Smooth cross-fade between themes rather than a hard cut (Design Doc §23) */
html, body, .header, .footer, .service-item, .card, .navmenu {
  transition: background-color var(--kikao-duration-normal) var(--kikao-ease-standard),
              color var(--kikao-duration-normal) var(--kikao-ease-standard),
              border-color var(--kikao-duration-normal) var(--kikao-ease-standard);
}

/* ================================================================
   Theme toggle button (Design Doc §10/§23 — lives in the nav bar,
   left of the Get Started CTA)
   ================================================================ */
.kikao-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 8px;
  border-radius: var(--kikao-radius-pill);
  border: 1.5px solid var(--kikao-border);
  background: var(--kikao-bg-alt);
  color: var(--kikao-text-primary);
  cursor: pointer;
  transition: all var(--kikao-duration-normal) var(--kikao-ease-standard);
}

.kikao-theme-toggle:hover {
  border-color: var(--kikao-gold-500);
  box-shadow: var(--kikao-shadow-gold-glow);
}

.kikao-theme-toggle svg {
  width: 20px;
  height: 20px;
}

.kikao-theme-toggle .kikao-icon-moon { display: none; }
[data-theme="dark"] .kikao-theme-toggle .kikao-icon-sun { display: none; }
[data-theme="dark"] .kikao-theme-toggle .kikao-icon-moon { display: inline-block; }

@media (max-width: 1199px) {
  .kikao-theme-toggle { margin: 0 auto 10px; }
}

/* ================================================================
   Logo — theme-aware swap (Design Doc §02.1/§02.8)
   The "KIKAO" wordmark is white in the source file, so the light-theme
   variant (recolored charcoal wordmark, see new-logo/SVG/ "light theme")
   is shown by default; the dark-theme variant (the logo's native, un-
   touched file) shows once [data-theme="dark"] is set. Pure-CSS swap,
   no JS needed beyond the toggle itself.
   ================================================================ */
.header .logo img {
  max-height: 54px;
  width: auto;
}

.kikao-logo-dark { display: none; }
[data-theme="dark"] .kikao-logo-light { display: none; }
[data-theme="dark"] .kikao-logo-dark { display: inline-block; }

/* ================================================================
   DARK MODE — full-site override layer (2026-09-08 correction)
   ================================================================
   The site was built up page-by-page over time with each page's own
   embedded <style> block hardcoding literal colors (background:#fff,
   color:#32353a, etc.) rather than referencing the shared design
   tokens. Retargeting main.css's own :root variables (above) only
   affects markup that actually uses those variables - it does nothing
   for a page's own hardcoded rules, which is why cards/sections/text
   were staying white/dark-on-dark when the toggle switched to dark
   mode. Since every page's own <style> block is embedded AFTER this
   stylesheet in <head>, an equal-specificity rule here would lose the
   cascade - every override below uses !important specifically to win
   against those page-level rules regardless of load order.
   This is intentionally broad and enumerates every card/container/
   section class found across the whole codebase, rather than fixing
   each page's internal styles individually - the goal is that no
   surface anywhere is left unswitched. */

[data-theme="dark"] {
  color-scheme: dark;
}

/* ---- Every known card/panel/container surface -> dark surface ---- */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .glass-card-white,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .cta-card,
[data-theme="dark"] .publish-card,
[data-theme="dark"] .manage-card,
[data-theme="dark"] .blog-post-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stat-card-inquiries,
[data-theme="dark"] .form-container,
[data-theme="dark"] .login-card,
[data-theme="dark"] .register-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .legal-card,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .results-box,
[data-theme="dark"] .service-box,
[data-theme="dark"] .service-item,
[data-theme="dark"] .um-card,
[data-theme="dark"] .msg-card,
[data-theme="dark"] .pr-card,
[data-theme="dark"] .desc-box,
[data-theme="dark"] .modal-section,
[data-theme="dark"] .modal-body-section,
[data-theme="dark"] .reply-section,
[data-theme="dark"] .info-item,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .mobile-top-bar,
[data-theme="dark"] .policy-strip,
[data-theme="dark"] .seo-section,
[data-theme="dark"] .msg-body-text,
[data-theme="dark"] .um-modal-footer,
[data-theme="dark"] .custom-file-upload,
[data-theme="dark"] .portfolio-type,
[data-theme="dark"] .btn-outline-custom,
[data-theme="dark"] table thead th,
[data-theme="dark"] .table thead th {
  background: var(--kikao-surface) !important;
  background-color: var(--kikao-surface) !important;
  color: var(--kikao-text-primary) !important;
  border-color: var(--kikao-border) !important;
}

[data-theme="dark"] .btn-cancel {
  background: var(--kikao-bg-alt) !important;
  color: var(--kikao-text-primary) !important;
}
[data-theme="dark"] .btn-cancel:hover {
  background: var(--kikao-border) !important;
}

/* Semantic tip box (verify_otp.php) — re-tint for a dark surface the
   same way the Bootstrap alert-success override below does, instead
   of leaving it a jarring light-mint box on a black page. */
[data-theme="dark"] .trust-note {
  background: color-mix(in srgb, var(--kikao-success) 18%, var(--kikao-surface)) !important;
  color: var(--kikao-text-primary) !important;
  border-left-color: var(--kikao-success) !important;
}

/* ---- Page/section backgrounds that were a hardcoded light gray ---- */
[data-theme="dark"] .login-section,
[data-theme="dark"] .register-section,
[data-theme="dark"] .auth-section,
[data-theme="dark"] .cta-section,
[data-theme="dark"] .results-section,
[data-theme="dark"] .portfolio-grid-section,
[data-theme="dark"] .editor-wrapper,
[data-theme="dark"] .manage-wrapper,
[data-theme="dark"] .dashboard-wrapper {
  background: var(--kikao-bg) !important;
  background-color: var(--kikao-bg) !important;
}

/* ---- Generic text content -> light, inside dark surfaces ----
   Scoped to content tags, not interactive elements (a/button/input),
   so it never fights the button-contrast fixes elsewhere in this file. */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] li,
[data-theme="dark"] label, [data-theme="dark"] td, [data-theme="dark"] th,
[data-theme="dark"] strong, [data-theme="dark"] small,
[data-theme="dark"] .card-title, [data-theme="dark"] .card-text,
[data-theme="dark"] .form-label, [data-theme="dark"] .subtitle,
[data-theme="dark"] .text-muted, [data-theme="dark"] .section-title,
[data-theme="dark"] .section-label, [data-theme="dark"] .section-heading {
  color: var(--kikao-text-primary) !important;
}
/* Secondary/muted text stays legible but visually de-emphasized rather
   than the same weight as primary text. */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .subtitle,
[data-theme="dark"] small,
[data-theme="dark"] .service-group-label {
  color: var(--kikao-text-secondary) !important;
}

/* ---- Form fields -> dark surface, light text, visible placeholder ---- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--kikao-bg-alt) !important;
  color: var(--kikao-text-primary) !important;
  border-color: var(--kikao-border) !important;
}
[data-theme="dark"] ::placeholder {
  color: var(--kikao-text-secondary) !important;
  opacity: 1;
}

/* Checkboxes/radios need their own treatment: the generic `input` rule
   above forces every state - including :checked - to the same dark
   fill, which buried Bootstrap's checkmark against an equally-dark
   background and left the .border utility's default light-gray
   border invisible against a now-dark box. Unchecked stays dark with
   a visible light border; checked goes brand gold so the white
   checkmark icon (Bootstrap's own SVG, untouched here) shows clearly. */
[data-theme="dark"] .form-check-input {
  border-color: var(--kikao-neutral-200) !important;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--kikao-gold-500) !important;
  border-color: var(--kikao-gold-500) !important;
}
[data-theme="dark"] .border {
  border-color: var(--kikao-neutral-200) !important;
}

/* ---- Bootstrap alerts: keep semantic meaning, just fit the dark surface ---- */
[data-theme="dark"] .alert-danger { background-color: rgba(214,69,69,0.15) !important; color: #ff8a8a !important; border-color: rgba(214,69,69,0.35) !important; }
[data-theme="dark"] .alert-success { background-color: rgba(47,174,102,0.15) !important; color: #7be0a8 !important; border-color: rgba(47,174,102,0.35) !important; }
[data-theme="dark"] .alert-warning { background-color: rgba(224,164,38,0.15) !important; color: #f0d493 !important; border-color: rgba(224,164,38,0.35) !important; }

/* ---- Theme toggle button: was invisible in dark mode because its
   border/hover relied on light-mode-only contrast; the icon swap
   (§ above) was correct, the button chrome around it wasn't visible
   against the dark header. ---- */
[data-theme="dark"] .kikao-theme-toggle {
  border-color: var(--kikao-neutral-600);
  color: var(--kikao-white);
}
[data-theme="dark"] .kikao-theme-toggle:hover {
  border-color: var(--kikao-gold-500);
  background: var(--kikao-neutral-800);
}

/* ---- No red, anywhere, in either theme: Bootstrap's built-in danger
   utility classes are neutralized to the gold palette sitewide. Actual
   error/failure MESSAGES (not chrome/decoration) still need a clearly
   different treatment from success - that's handled by .alert-danger
   above, which stays a (non-brand) red-adjacent tone specifically
   because it's the one place a red-ish signal is meaningful, not
   decorative. Icons/buttons/badges below are decoration, not messages. */
.btn-danger {
  background-color: var(--kikao-gold-500) !important;
  border-color: var(--kikao-gold-500) !important;
  color: var(--kikao-neutral-900) !important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--kikao-gold-600) !important;
  border-color: var(--kikao-gold-600) !important;
  color: var(--kikao-neutral-900) !important;
}
.btn-outline-danger {
  color: var(--kikao-gold-600) !important;
  border-color: var(--kikao-gold-500) !important;
  background-color: transparent !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--kikao-gold-500) !important;
  color: var(--kikao-neutral-900) !important;
  border-color: var(--kikao-gold-500) !important;
}
.text-danger { color: var(--kikao-gold-600) !important; }
.bg-danger { background-color: var(--kikao-gold-500) !important; color: var(--kikao-neutral-900) !important; }
.border-danger { border-color: var(--kikao-gold-500) !important; }

/* ================================================================
   Success toast (2026-09-08 fix) - this markup (id="successToast",
   class="savannah-toast") is reused on index.php and contact-us.php,
   but its CSS only ever existed in index.php's own inline <style>
   block. On contact-us.php that meant no `display:none` default, so
   the "Success!" message rendered as plain, always-visible text
   instead of a hidden toast that only appears after a real submit.
   Centralizing it here guarantees every page using this markup gets
   the correct hidden-by-default/animated-in behavior. */
.savannah-toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: var(--kikao-success, #2FAE66);
  color: #ffffff;
  padding: 16px 22px;
  border-radius: var(--kikao-radius-md, 8px);
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 99999;
  display: none;
  max-width: 360px;
}
.savannah-toast.show {
  display: block;
  animation: kikaoToastFadeIn 0.4s ease;
}
@keyframes kikaoToastFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   DARK MODE — specificity escalation (2026-09-08, round 2)
   Several pages carry their own <style> block with an ID- or two-
   class-scoped !important color rule (leftover from the original
   BootstrapMade template's own light-mode contrast fixes). Those
   selectors are MORE specific than the generic tag/single-class
   overrides above, so on a specificity tie the page's own rule wins
   even though both sides use !important. Each rule below repeats the
   exact original selector with [data-theme="dark"] prefixed, which
   always adds one more level of specificity than the original -
   guaranteeing these win outright, in source order or not.
   ================================================================ */

/* index.php — "Our Expertise" heading + intro paragraph */
[data-theme="dark"] #services .section-title h2,
[data-theme="dark"] #about .content h2 {
  color: var(--kikao-text-primary) !important;
}
[data-theme="dark"] #services .section-title p,
[data-theme="dark"] #about .content p {
  color: var(--kikao-text-primary) !important;
}

/* index.php — About section's 4 "Our Vision/Mission/..." icon cards */
[data-theme="dark"] #about .icon-box {
  background: var(--kikao-surface) !important;
  box-shadow: none !important;
}
[data-theme="dark"] #about .icon-box p {
  color: var(--kikao-text-primary) !important;
}

/* index.php — service card titles/descriptions */
[data-theme="dark"] .services .service-item h4.title a {
  color: var(--kikao-text-primary) !important;
}
[data-theme="dark"] .services .service-item p.description {
  color: var(--kikao-text-primary) !important;
}

/* login.php / register.php / auth pages (reset-password, forgot-
   password, verify_otp) — card headings and subtitles */
[data-theme="dark"] .login-card h2,
[data-theme="dark"] .register-card h2,
[data-theme="dark"] .auth-card h2 {
  color: var(--kikao-text-primary) !important;
}
[data-theme="dark"] .login-card p.subtitle,
[data-theme="dark"] .auth-card p.subtitle {
  color: var(--kikao-text-secondary) !important;
}

.otp-inputs input.filled {
  background: var(--kikao-gold-100, #FDF8ED) !important;
}

/* Light mode nav text stays plain - no shadow needed against a solid
   white bar. Dark mode keeps a very subtle one for contrast insurance
   during the theme transition. */
[data-theme="dark"] .navmenu > ul > li > a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Before you scroll, index.php's header floats transparent over the
   hero photo by default (main.css's .index-page .header) - text
   contrast then depends entirely on what's directly behind each
   letter in that specific photo, which is unreliable no matter the
   text color.
   Light mode: skip the transparency problem entirely - force a solid
   white bar with normal dark nav text, same as the scrolled state, no
   scrim/shadow/outline needed.
   Dark mode: keep the floating transparent look (it reads fine there)
   but back it with a dark scrim and a real multi-direction text
   outline for contrast against the photo. Both are dark-mode only. */
.index-page:not(.scrolled) .header {
  --background-color: #ffffff;
  --heading-color: #32353a;
  --nav-color: #3a3939;
  --nav-hover-color: #D4AF37;
}
[data-theme="dark"] .index-page:not(.scrolled) .header {
  --background-color: rgba(255, 255, 255, 0);
  --heading-color: #ffffff;
  --nav-color: rgba(255, 255, 255, 0.7);
  --nav-hover-color: #ffffff;
  position: relative;
}
[data-theme="dark"] .index-page:not(.scrolled) .header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 100%);
  z-index: -1;
}
[data-theme="dark"] .index-page:not(.scrolled) .navmenu > ul > li > a {
  text-shadow: -1px -1px 0 rgba(0,0,0,0.6), 1px -1px 0 rgba(0,0,0,0.6),
               -1px 1px 0 rgba(0,0,0,0.6), 1px 1px 0 rgba(0,0,0,0.6),
               0 2px 6px rgba(0,0,0,0.5);
}

/* Reserve the scrollbar's width permanently instead of only when a
   scrollbar is actually needed. Without this, switching theme (which
   changes a handful of elements' rendered sizes by a few px) can push
   total page height across the scrollbar threshold, changing the
   viewport's available width - and since the hero background image
   is width:100% + object-fit:cover, that width change reframes/shifts
   which part of the image is visible. This keeps viewport width
   constant regardless of content height. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Stats row (Clients/Projects/Team Members): 3-across on mobile
   instead of stacked (index.php's columns are col-4 col-lg-3
   col-md-6), with smaller type/padding so 3 columns fit a phone
   width cleanly. */
@media (max-width: 575px) {
  .stats .stats-item {
    padding: 10px 4px;
  }
  .stats .stats-item span {
    font-size: 28px;
  }
  .stats .stats-item p {
    font-size: 12px;
  }
}

/* ==========================================================================
   Room for the always-visible floating dock (footer.php)
   The dock sits on the right edge of every page now, so admin pages keep
   their content clear of it instead of letting it cover table actions
   and buttons. Desktop dock: 18px from the edge + ~58px wide; phones:
   10px + ~50px.
   ========================================================================== */
.dashboard-wrapper .main-content,
.bm-wrap > .container,
.editor-wrapper > .container {
  padding-right: 88px !important;
}
@media (max-width: 575px) {
  .dashboard-wrapper .main-content,
  .bm-wrap > .container,
  .editor-wrapper > .container {
    padding-right: 64px !important;
  }
}

/* ==========================================================================
   Readable contrast in both themes (WCAG AA: 4.5:1 for text)
   Measured pairs:
     white on brand gold #D4AF37 ..... 2.1:1  (fails)  -> use #171415 (8.7:1)
     gold-600 text on white .......... 2.9:1  (fails)
     gold-700 text on white .......... 4.2:1  (fails)  -> gold-800 (6.9:1)
     gold-300 / gold-500 on dark ..... 11.2 / 8.7:1 (fine)
   So: anything sitting ON gold gets near-black text in both themes, and
   gold used AS text uses gold-800 in light mode, gold-300 in dark mode.
   ========================================================================== */
:root {
  --kikao-accent-text: var(--kikao-gold-800);
  --kikao-on-accent:   var(--kikao-neutral-900);
}
:root:not([data-theme="dark"]) {
  --kikao-link:              var(--kikao-gold-800);
  --nav-hover-color:         var(--kikao-gold-800);
  --nav-dropdown-hover-color:var(--kikao-gold-800);
  --contrast-color:          var(--kikao-neutral-900);
}
[data-theme="dark"] {
  --kikao-accent-text: var(--kikao-gold-300);
  /* Admin pages (dashboard/messages/users/project_requests) declare these
     in their own :root, loaded after this file - !important wins the tie. */
  --accent-text: var(--kikao-gold-300) !important;
  --on-accent:   var(--kikao-neutral-900) !important;
}

/* ---- Text sitting on a gold background: near-black, in both themes.
   [data-theme] prefix outranks the dark theme's blanket
   `[data-theme="dark"] span { color: white !important }` above. ---- */
[data-theme] .bg-danger, [data-theme] .bg-danger *,
[data-theme] .btn-danger, [data-theme] .btn-danger *,
[data-theme] .btn-outline-danger:hover, [data-theme] .btn-outline-danger:hover *,
[data-theme] .btn-getstarted, [data-theme] .btn-getstarted *,
[data-theme] .sidebar a.active, [data-theme] .sidebar a.active *,
[data-theme] .sidebar a:hover, [data-theme] .sidebar a:hover *,
[data-theme] .sidebar-badge, [data-theme] .new-badge,
[data-theme] .badge.bg-warning, [data-theme] .mobile-nav-toggle.btn,
[data-theme] .dashboard-wrapper .mobile-nav-toggle, [data-theme] .dashboard-wrapper .mobile-nav-toggle * {
  color: var(--kikao-on-accent) !important;
}

/* ---- Gold used as text ---- */
.text-danger { color: var(--kikao-accent-text) !important; }
.btn-outline-danger { color: var(--kikao-accent-text) !important; }
[data-theme] .footer h4,
[data-theme] .footer .footer-links h4 { color: var(--kikao-accent-text) !important; }
[data-theme] .inquiry-count { color: var(--kikao-accent-text) !important; }

/* ---- Bootstrap pieces the dark theme never covered ---- */
/* Tables: Bootstrap paints every cell with --bs-table-bg (white), while
   the dark theme forced cell TEXT to white - white on white. */
[data-theme="dark"] .table {
  --bs-table-bg: var(--kikao-surface);
  --bs-table-color: var(--kikao-text-primary);
  --bs-table-border-color: var(--kikao-border);
  --bs-table-striped-bg: var(--kikao-bg-alt);
  --bs-table-striped-color: var(--kikao-text-primary);
  --bs-table-hover-bg: var(--kikao-neutral-700);
  --bs-table-hover-color: var(--kikao-text-primary);
  --bs-table-active-bg: var(--kikao-neutral-700);
  color: var(--kikao-text-primary);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  color: var(--kikao-text-primary);
  border-color: var(--kikao-border);
}
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .link-dark { color: var(--kikao-text-primary) !important; }
[data-theme="dark"] .text-secondary { color: var(--kikao-text-secondary) !important; }
[data-theme="dark"] .text-primary { color: var(--kikao-gold-300) !important; }
[data-theme="dark"] .btn-light {
  background-color: var(--kikao-neutral-700) !important;
  border-color: var(--kikao-neutral-600) !important;
  color: var(--kikao-text-primary) !important;
}
[data-theme="dark"] .btn-light:hover { background-color: var(--kikao-neutral-600) !important; }
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-secondary {
  color: var(--kikao-text-primary) !important;
  border-color: var(--kikao-neutral-500) !important;
  background-color: transparent !important;
}
[data-theme="dark"] .btn-outline-dark *,
[data-theme="dark"] .btn-outline-secondary * { color: inherit !important; }
[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--kikao-neutral-700) !important;
  border-color: var(--kikao-gold-500) !important;
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: var(--kikao-surface) !important;
  border-color: var(--kikao-border) !important;
  color: var(--kikao-text-primary) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom { border-color: var(--kikao-border) !important; }
[data-theme="dark"] .bg-secondary { background-color: var(--kikao-neutral-600) !important; }
[data-theme="dark"] .badge.bg-light { background-color: var(--kikao-neutral-700) !important; color: var(--kikao-text-primary) !important; }

/* ---- Admin tables (messages / project_requests / users) in dark mode.
   Their rows, status pills and action buttons hardcode pale light-mode
   fills (#FBF0D4, #ffe0e0, #e3f0ff...) while the dark theme turns all
   span/td text white - white on cream was unreadable. Dark mode gets
   tinted, translucent fills with bright text instead; light mode keeps
   its original colours, which already pass contrast. ---- */
[data-theme="dark"] .msg-table tbody tr.is-unread,
[data-theme="dark"] .pr-table tbody tr.is-unread {
  background: color-mix(in srgb, var(--kikao-gold-500) 12%, var(--kikao-surface)) !important;
}
[data-theme="dark"] .msg-table tbody tr:hover,
[data-theme="dark"] .pr-table tbody tr:hover,
[data-theme="dark"] .um-table tbody tr:hover {
  background: var(--kikao-neutral-700) !important;
}
[data-theme="dark"] .um-table tbody tr.is-frozen { background: var(--kikao-bg-alt) !important; }

[data-theme] .status-unread, [data-theme] .status-new { --pill: #E5484D; }
[data-theme] .status-read, [data-theme] .status-active,
[data-theme] .budget-pill, [data-theme] .act-unarchive, [data-theme] .act-unfreeze { --pill: #2FAE66; }
[data-theme] .status-archived, [data-theme] .status-inactive, [data-theme] .act-archive { --pill: #8C8788; }
[data-theme] .act-view, [data-theme] .act-edit { --pill: #3B82C4; }
[data-theme] .act-freeze { --pill: #E0A426; }
[data-theme] .act-delete { --pill: #D64545; }

[data-theme="dark"] .status-unread, [data-theme="dark"] .status-new,
[data-theme="dark"] .status-read, [data-theme="dark"] .status-active,
[data-theme="dark"] .status-archived, [data-theme="dark"] .status-inactive,
[data-theme="dark"] .budget-pill,
[data-theme="dark"] .act-view, [data-theme="dark"] .act-edit,
[data-theme="dark"] .act-archive, [data-theme="dark"] .act-unarchive,
[data-theme="dark"] .act-freeze, [data-theme="dark"] .act-unfreeze,
[data-theme="dark"] .act-delete {
  background: color-mix(in srgb, var(--pill) 22%, transparent) !important;
  color: color-mix(in srgb, var(--pill) 45%, white) !important;
}
[data-theme="dark"] :is(.status-unread, .status-new, .status-read, .status-active, .status-archived,
  .status-inactive, .budget-pill, .act-view, .act-edit, .act-archive, .act-unarchive, .act-freeze,
  .act-unfreeze, .act-delete) * { color: inherit !important; }
[data-theme="dark"] :is(.act-view, .act-edit, .act-archive, .act-unarchive, .act-freeze, .act-unfreeze, .act-delete):hover {
  background: var(--pill) !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .tab-badge { background: rgba(255,255,255,.14) !important; }

/* ---- Light mode: page-level rules that hardcode bright gold as TEXT
   (#D4AF37 is 2.1:1 on white). Icons are left bright - they're
   decorative - but headings, links and labels use the readable gold.
   (Gold inside e-mail templates is untouched: those render in mail
   clients, not under this theme.) ---- */
:root:not([data-theme="dark"]) .index-page .header,
:root:not([data-theme="dark"]) .index-page.scrolled .header,
:root:not([data-theme="dark"]) .index-page:not(.scrolled) .header {
  --nav-hover-color: var(--kikao-gold-800) !important;
}
:root:not([data-theme="dark"]) #about .icon-box h3,
:root:not([data-theme="dark"]) .services .service-item h4.title a:hover,
:root:not([data-theme="dark"]) .legal-content h3,
:root:not([data-theme="dark"]) .section-head,
:root:not([data-theme="dark"]) .view-link,
:root:not([data-theme="dark"]) .resend-link,
:root:not([data-theme="dark"]) #countdown span,
:root:not([data-theme="dark"]) .php-email-form .loading {
  color: var(--kikao-gold-800) !important;
}

/* ==========================================================================
   Whole images, never cropped (.kikao-img-fit)
   Uploaded images (blog thumbnails, featured images, social media) are
   shown completely - object-fit: contain - inside their box. Whatever space
   the image doesn't fill is covered by a soft, blurred copy of the same
   image (set via --fit-bg on the container), so the frame never looks
   empty or letterboxed. Round avatars are not affected.
   ========================================================================== */
.kikao-img-fit {
  position: relative;
  overflow: hidden;
  background: var(--kikao-bg-alt);
  isolation: isolate;
}
.kikao-img-fit::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: 0;
  background-image: var(--fit-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.15);
  opacity: .6;
  transform: scale(1.08);
  pointer-events: none;
}
.kikao-img-fit > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}
.kikao-img-fit > :not(img) { z-index: 2; }
.kikao-img-fit > i { position: relative; }

/* Lucide icons drawn into <i class="bi bi-*"> by assets/js/kikao-lucide.js.
   The <i> keeps its old size/colour rules; the SVG follows them (1em, currentColor). */
i.bi, span.bi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-style: normal; }
i.bi > svg, span.bi > svg { width: 1em; height: 1em; flex-shrink: 0; }
i.bi::before, span.bi::before { content: none !important; }