/* ─────────────────────────────────────────────
   KBTECH International Investments
   Custom styles — loaded after Tailwind CDN
───────────────────────────────────────────── */

/* ── Theme colour tokens ────────────────────────
   Surface / background / text colours are stored
   as space-separated RGB channels so Tailwind's
   opacity modifiers (bg-background/80 etc.) work
   in both dark and light modes.                  */
:root {
  /* Dark theme — default ─────────────────────── */
  --c-background:             13 13 13;
  --c-surface:                19 19 19;
  --c-surface-dim:            19 19 19;
  --c-sc-lowest:              14 14 14;
  --c-sc-low:                 28 27 27;
  --c-sc:                     32 31 31;
  --c-sc-high:                42 42 42;
  --c-sc-highest:             53 53 52;
  --c-surface-bright:         58 57 57;
  --c-surface-variant:        53 53 52;
  --c-outline-variant:        78 70 57;
  --c-outline:                154 143 128;
  --c-on-surface:             229 226 225;
  --c-on-surface-var:         209 197 180;
  --c-on-bg:                  229 226 225;
  --c-secondary:              194 199 199;
  --c-secondary-cont:         66 72 72;
  --c-on-secondary-cont:      177 182 182;
  --c-secondary-fixed:        223 227 227;
  --c-secondary-fixed-dim:    194 199 199;
  --c-on-secondary:           44 49 50;
  --c-on-secondary-fixed:     23 28 29;
  --c-on-secondary-fixed-var: 66 72 72;
  --c-tertiary:               200 198 197;
  --c-tertiary-cont:          167 165 165;
  --c-tertiary-fixed:         229 226 225;
  --c-tertiary-fixed-dim:     200 198 197;
  --c-on-tertiary:            49 48 48;
  --c-on-tertiary-cont:       59 59 59;
  --c-on-tertiary-fixed:      28 27 27;
  --c-on-tertiary-fixed-var:  71 71 70;
  --c-inverse-surface:        229 226 225;
  --c-inverse-on-surface:     49 48 48;
  /* Hardcoded-rule variables */
  --c-scrollbar-track:        #0d0d0d;
  --c-scrollbar-thumb:        #353534;
  --c-glass-bg:               rgba(26, 26, 26, 0.6);
  --c-glass-border:           rgba(168, 173, 173, 0.15);
  --c-hairline:               rgba(168, 173, 173, 0.15);
  --c-hero-grad-start:        rgba(13, 13, 13, 0);
  --c-hero-grad-end:          rgba(13, 13, 13, 1);
  --c-nav-empty-bg:           rgba(13, 13, 13, 0.85);
  --c-nav-empty-border:       rgba(78, 70, 57, 0.25);
}

html.light {
  /* Light theme ─────────────────────────────── */
  --c-background:             250 246 239;
  --c-surface:                255 255 255;
  --c-surface-dim:            237 232 222;
  --c-sc-lowest:              245 240 232;
  --c-sc-low:                 237 232 222;
  --c-sc:                     232 226 214;
  --c-sc-high:                223 216 202;
  --c-sc-highest:             214 206 190;
  --c-surface-bright:         255 255 255;
  --c-surface-variant:        232 226 214;
  --c-outline-variant:        200 191 170;
  --c-outline:                140 126 106;
  --c-on-surface:             28 22 16;
  --c-on-surface-var:         90 80 64;
  --c-on-bg:                  28 22 16;
  --c-secondary:              110 96 80;
  --c-secondary-cont:         232 226 214;
  --c-on-secondary-cont:      58 48 40;
  --c-secondary-fixed:        224 216 200;
  --c-secondary-fixed-dim:    110 96 80;
  --c-on-secondary:           250 246 239;
  --c-on-secondary-fixed:     28 22 16;
  --c-on-secondary-fixed-var: 232 226 214;
  --c-tertiary:               112 96 78;
  --c-tertiary-cont:          237 224 204;
  --c-tertiary-fixed:         28 22 16;
  --c-tertiary-fixed-dim:     112 96 78;
  --c-on-tertiary:            250 246 239;
  --c-on-tertiary-cont:       58 48 40;
  --c-on-tertiary-fixed:      250 246 239;
  --c-on-tertiary-fixed-var:  200 191 170;
  --c-inverse-surface:        28 22 16;
  --c-inverse-on-surface:     245 240 232;
  /* Hardcoded-rule variables */
  --c-scrollbar-track:        #f5f0e8;
  --c-scrollbar-thumb:        #c8bfaa;
  --c-glass-bg:               rgba(255, 255, 255, 0.75);
  --c-glass-border:           rgba(160, 145, 120, 0.25);
  --c-hairline:               rgba(140, 126, 106, 0.2);
  --c-hero-grad-start:        rgba(250, 246, 239, 0);
  --c-hero-grad-end:          rgba(250, 246, 239, 1);
  --c-nav-empty-bg:           rgba(250, 246, 239, 0.95);
  --c-nav-empty-border:       rgba(200, 191, 170, 0.5);
}

/* Smooth theme transition on key structural elements */
body, header, footer, nav, main, section, article, aside {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ── Custom scrollbar ───────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--c-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--c-scrollbar-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #e9c176; }

/* ── Services page ──────────────────────────── */
.glass-panel {
    background: var(--c-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--c-glass-border);
}

.hover-gold {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hover-gold:hover {
    border-color: #e9c176 !important;
    box-shadow: inset 0 0 15px rgba(233, 193, 118, 0.05);
}

.metallic-shimmer {
    position: relative;
    overflow: hidden;
}
.metallic-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(233, 193, 118, 0.08) 50%, transparent 55%);
    animation: shimmer 10s infinite linear;
    pointer-events: none;
}
@keyframes shimmer {
    0%   { transform: translateX(-30%) translateY(-30%); }
    100% { transform: translateX(30%)  translateY(30%);  }
}

/* ── About page ─────────────────────────────── */
.hero-gradient {
    background: linear-gradient(to bottom, var(--c-hero-grad-start) 0%, var(--c-hero-grad-end) 100%);
}

.gold-border-glow {
    border: 1px solid var(--c-hairline);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gold-border-glow:hover {
    border-color: rgba(233, 193, 118, 0.4);
    box-shadow: inset 0 0 20px rgba(233, 193, 118, 0.05);
}

/* Material Symbols default weight */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Gradients & Surface Effects ───────────── */
.metallic-gold-gradient {
    background: linear-gradient(135deg, #e9c176 0%, #c5a059 50%, #775a19 100%);
}

.metallic-text-gold {
    background: linear-gradient(135deg, #ffdea5 0%, #e9c176 50%, #c5a059 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hairline-border {
    border: 1px solid var(--c-hairline);
}

.hero-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(233, 193, 118, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Logo Icon (gold square with "KB") ─────── */
.logo-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #e9c176 0%, #c5a059 60%, #775a19 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Scroll Reveal Animation ────────────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* ── Nav mount-point placeholder ────────────────
   Shown while React loads so there is no flash of
   empty space at the top of the page.             */
#root-nav:empty {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 50;
    background: var(--c-nav-empty-bg);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--c-nav-empty-border);
}

/* ── Stats counter mount-point sizing ───────────
   Matches the absolute-positioned badge it replaces */
#root-stats-counter {
    position: absolute;
    bottom: -24px;
    right: -24px;
}

/* ── Contact page ───────────────────────────── */
.map-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #e9c176;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(233, 193, 118, 0.5);
    animation: map-pulse 2.2s infinite ease-in-out;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.map-dot:hover { transform: scale(1.6) !important; }

@keyframes map-pulse {
    0%   { transform: scale(0.95); box-shadow: 0 0 8px  rgba(233, 193, 118, 0.4); }
    50%  { transform: scale(1.25); box-shadow: 0 0 22px rgba(233, 193, 118, 0.9); }
    100% { transform: scale(0.95); box-shadow: 0 0 8px  rgba(233, 193, 118, 0.4); }
}

.form-input-focus:focus {
    border-bottom-color: #e9c176 !important;
    outline: none;
}

/* ── Mobile Navigation Menu ─────────────────── */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, opacity 0.3s ease;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}