/* ============================================================
   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;
  }
}