/* Extem brand text — non-selectable across the site */
.logo,
.brand,
.nav-brand,
.extem-brand,
footer .f-head > div:first-child > h3 {
  user-select: none;
  -webkit-user-select: none;
}

/* "Beyond one service" — stays on one line, scales down to fit */
.brand-tagline {
  white-space: nowrap;
  max-width: 100%;
}

footer .f-head .brand-tagline {
  font-size: clamp(9px, 2.5vw, 13.5px);
}

/* =====================================================================
   Dark Theme — Variables & Adjustments
   ---------------------------------------------------------------------
   Palette rationale: the light theme's brand navy is #05055f (pure
   blue, hue 240°). Rather than swap in an unrelated gray/neon scheme,
   every dark-mode color below stays on that same 240° hue and only
   moves in lightness/saturation — so the dark theme still reads as
   "Extem navy", just tuned for a dark canvas instead of inverted flat.
   ===================================================================== */
[data-theme="dark"] {
  /* Accent — same hue as brand navy, lifted to stay legible on dark
     surfaces without turning neon. Used for headings, logo, links,
     active states. */
  --primary: #8ab4f8 !important;

  /* Page/background surface — near-black with a navy undertone
     instead of flat gray, so the canvas itself still feels "Extem". */
  --secondary: #0e0e17 !important;

  --pagegradient: linear-gradient(to bottom, #0e0e17, #17172a) !important;

  --nav-text: #f7f7f7 !important;
  --nav-text-scrolled: #f7f7f7 !important;
  --nav-text-scrolled-color: #f7f7f7 !important;

  /* Body copy gets its own soft off-white instead of inheriting the
     accent — keeps large blocks of text readable and reserves the
     accent color for headings/links/interactive elements. */
  --text-primary: #e8e8f2 !important;
  --text-secondary: #a6a6c2 !important;

  /* Subtle accent-tinted line, used for card borders / dividers so
     dark-mode surfaces still carry a hint of brand color instead of
     generic gray hairlines. */
  --border-tint: rgba(106, 106, 236, 0.16);
}

[data-theme="dark"] body {
  color: var(--text-primary) !important;
}

[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"] .extem-brand,
[data-theme="dark"] .nav-brand {
  color: var(--primary) !important;
}

/* Glimmerka's case-study headings use their own warm/neutral palette,
   not Extem's blue accent — restore it after the broad heading rule above */
[data-theme="dark"] .gk-hero-text h2 {
  color: var(--gk-warm-white) !important;
}
[data-theme="dark"] .gk-feature-text h3,
[data-theme="dark"] .gk-banner h3 {
  color: var(--gk-dark) !important;
}

/* Accent texts */
[data-theme="dark"] .about-block::before,
[data-theme="dark"] .team-role {
  color: var(--primary) !important;
}

/* Required-field markers (contact.css: .form-group span { color: red }) —
   pure #ff0000 is harsh/neon against a dark background. Keep it red so the
   "required" signal stays intact, just a softer coral that doesn't glow. */
[data-theme="dark"] .form-group span {
  color: #ff6b6b !important;
}

/* Footer Dark Mode Gradient */
[data-theme="dark"] footer {
  background: linear-gradient(160deg, #08080e 0%, #16162a 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Fix elements that used var(--secondary) as text on dark backgrounds */
[data-theme="dark"] form button,
[data-theme="dark"] .hero-text h1,
[data-theme="dark"] .hero-text p {
  color: #ffffff !important;
}

/* Buttons/badges/icons using var(--primary) as a background need a
   dark foreground now that primary is a light accent — var(--secondary)
   is our dark surface tone, so reuse it instead of a one-off hex. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-save,
[data-theme="dark"] .btn-row-view,
[data-theme="dark"] .modal-badge,
[data-theme="dark"] .info-socials a {
  color: var(--secondary) !important;
  font-weight: 700 !important;
}

/* Keep hero button looking like the original — background is hardcoded white,
   so its text stays the light theme's deep navy blue for proper contrast */
[data-theme="dark"] .hero-text a {
  background: #ffffff !important;
  color: #05055f !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .about-block,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .application-form,
[data-theme="dark"] .p-card,
[data-theme="dark"] .console-card,
[data-theme="dark"] .modal-window {
  background: #1a1a28 !important;
  border-color: var(--border-tint) !important;
}

[data-theme="dark"] .team-card {
  background: rgba(26, 26, 40, 0.55) !important;
  border-color: var(--border-tint) !important;
}

/* Glimmerka's e-commerce case study keeps its own cream/brown visual
   identity intact in both themes — its gk-* palette is intentionally
   NOT remapped here. */

[data-theme="dark"] .video-card {
  background: #1a1a28 !important;
  border-color: var(--border-tint) !important;
}
[data-theme="dark"] .video-wrap {
  background: #24243a !important;
}
[data-theme="dark"] .video-card-body h3,
[data-theme="dark"] .video-tag {
  color: var(--primary) !important;
}
[data-theme="dark"] .video-card-body p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .work-tab {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
[data-theme="dark"] .work-tab:hover,
[data-theme="dark"] .work-tab.active {
  background: var(--primary) !important;
  color: var(--secondary) !important;
}

/* Glimmerka color swap in dark mode */
[data-theme="dark"] .gk-hero-text h2 {
  color: #faf8f5 !important;

}
[data-theme="dark"] .glimerka-showcase {
  background: #3a2e24 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .gk-feature-text h3,
[data-theme="dark"] .gk-banner h3 {
  color: #faf8f5 !important;
}

/* Fix text boxes / form inputs for dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background: #20202f !important;
  border-color: #3a3a52 !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  background: #262638 !important;
  border-color: var(--primary) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #83839c !important;
}
[data-theme="dark"] .auth-card {
  background: #1a1a28 !important;
  border-color: var(--border-tint) !important;
}
[data-theme="dark"] .modal-sidebar-data,
[data-theme="dark"] .modal-email-hub,
[data-theme="dark"] .email-stream,
[data-theme="dark"] .stream-bubble.inbound {
  background: #20202f !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .stream-bubble.inbound {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .data-table th {
  background: #1a1a28 !important;
}

/* =====================================================================
   Navbar — desktop
   ===================================================================== */
[data-theme="dark"] .navbar.scrolled-color {
  background: rgba(20, 20, 32, 0.82) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Links only bolded on hover before — give dark mode a visible glow so
   the interactive state actually reads against a dark backdrop, plus a
   real focus ring for keyboard navigation (there wasn't one before). */
[data-theme="dark"] .navbar nav a:hover,
[data-theme="dark"] .navbar nav a:focus,
[data-theme="dark"] .navbar nav a:active {
  text-shadow: 0 0 14px rgba(106, 106, 236, 0.55);
  color: #f7f7f7 !important;
}

[data-theme="dark"] .navbar.scrolled-color nav a:hover,
[data-theme="dark"] .navbar.scrolled-color nav a:focus,
[data-theme="dark"] .navbar.scrolled-color nav a:active {
  text-shadow: 0 0 14px rgba(106, 106, 236, 0.55);
  color: #f7f7f7 !important;
}

[data-theme="dark"] .navbar nav a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 3px;
}

/* =====================================================================
   Navbar — mobile / responsive
   ---------------------------------------------------------------------
   Bug fixed here: home.css / contact.css / projectcss.css / jobapplication.css
   all set the mobile dropdown's link color to var(--secondary). In light
   mode --secondary is off-white, which reads fine on the dark glass
   dropdown panel — but in dark mode --secondary becomes the near-black
   page background, so those links were rendering almost invisible
   (dark text on a dark panel). Overriding it here, once, for every page.
   ===================================================================== */
@media (max-width: 768px) {


  [data-theme="dark"] .navbar nav {
    background: rgba(14, 14, 24, 0.88) !important;
    border-color: var(--border-tint) !important;
  }

  [data-theme="dark"] .navbar nav a,
  [data-theme="dark"] .navbar nav a:hover,
  [data-theme="dark"] .navbar.scrolled nav a,
  [data-theme="dark"] .navbar.scrolled-color nav a {
    color: var(--text-primary) !important;
  }

  [data-theme="dark"] .navbar.scrolled a,
  [data-theme="dark"] .navbar.scrolled-color a,
  [data-theme="dark"] .navbar.scrolled button,
  [data-theme="dark"] .navbar.scrolled-color button,
  [data-theme="dark"] .navbar a,
  [data-theme="dark"] .navbar button,
  [data-theme="dark"] .navbar.navbar.scrolled a:hover,
  [data-theme="dark"] .navbar.navbar.scrolled-color a:hover,
  [data-theme="dark"] .navbar.navbar.scrolled button:hover,
  [data-theme="dark"] .navbar.navbar.scrolled-color button:hover {
    color: var(--text-primary) !important;
  }

  [data-theme="dark"] .navbar nav a:hover {
    background: rgba(106, 106, 236, 0.12) !important;
  }
  [data-theme="dark"] .navbar nav a:not(:first-child) {
    border-top-color: var(--border-tint) !important;
  }

}

/* Theme Toggle Button */
.theme-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  margin-left: 10px;
  margin-right: 10px;
}

/* Keep the sun/moon icon in sync with the surrounding nav text color instead
   of silently inheriting body's text color (which made it unreadable in
   dark mode over the dark hero/navbar). */
.navbar .theme-toggle {
  color: var(--nav-text);
}
.navbar.scrolled .theme-toggle {
  color: var(--nav-text-scrolled);
}
.navbar.scrolled-color .theme-toggle {
  color: var(--nav-text-scrolled-color);
}

.theme-toggle:hover {
  opacity: 0.7;
}

/* Hide the theme toggle that lives inside the nav dropdown once we're
   in mobile/responsive layout — the header already has its own toggle
   in .mobile-menu-actions, so this one would be a visible duplicate.
   NOTE: this only works once the button actually carries a `mobile`
   class (see index.html fix) — `.theme-toggle.mobile` is a compound
   selector that requires classes "theme-toggle" AND "mobile" on the
   same element, not a class literally named "theme-toggle.mobile". */
@media (max-width: 768px) {
  .theme-toggle.mobile {
    display: none !important;
  }
}

/* Glimmerka dark-mode swap */
[data-theme="dark"] .glimmerka-showcase,
[data-theme="dark"] .glimerka-showcase {
  background: #3a2e24 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .glimmerka-showcase .gk-hero-text h2,
[data-theme="dark"] .glimmerka-showcase .gk-hero-text h1 {
  color: var(--gk-warm-white) !important;
}

[data-theme="dark"] .glimmerka-showcase .gk-feature-text h3,
[data-theme="dark"] .glimmerka-showcase .gk-banner h3 {
  color: var(--gk-warm-white) !important;
}

[data-theme="dark"] .gk-feature-text p{
  color: var(--gk-warm-white) !important;
} 

[data-theme="dark"] .gk-banner p{
  color: var(--gk-warm-white) !important;
}

[data-theme="dark"] .gk-banner{
  color: var(--gk-dark) !important;
}

[data-theme="dark"] .glimmerka-showcase .gk-banner {
  background: #846e5b !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .glimmerka-showcase .gk-banner .gk-cta {
  color: var(--gk-warm-white) !important;
  border-color: var(--gk-warm-white) !important;
}

[data-theme="dark"] .form-group span {
  color: var(--primary) !important;
}