/*
 * Targeted correction layer.
 * The original styles.css remains in control of the layout and section identity.
 */

:root {
  --font-nav: "Space Grotesk", "Montserrat", "Segoe UI", sans-serif;
  --electric-blue: #00cfff;
  --electric-blue-strong: #008cff;
  --electric-cyan: #00ffff;
  --deep-ink: #07111f;
  --light-ink: #14233d;
  --light-canvas: #edf6ff;
  --light-surface: rgba(255, 255, 255, 0.92);
  --light-border: rgba(0, 140, 255, 0.58);
  --focus-ring: #00cfff;
}

/* Accessibility without introducing an unrelated accent color. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 10001;
  padding: 10px 16px;
  color: #001426;
  background: #ecfeff;
  border: 2px solid var(--electric-cyan);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(0, 207, 255, 0.75);
  transform: translate(-50%, -160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

/* Restore the original interactive background above the page canvas. */
#particles-js {
  display: block !important;
  z-index: 0 !important;
  opacity: 1;
}

#particles-js canvas {
  display: block !important;
}

.container {
  position: relative;
  z-index: 1;
}

/* Header: retain the original height and spacing, upgrade only its finish/type. */
#header {
  border-bottom: 2px solid rgba(0, 207, 255, 0.38);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

@media (min-width: 769px) {
  #header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

body.dark-mode #header {
  background: rgba(7, 17, 31, 0.9) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.36),
    0 2px 18px rgba(0, 207, 255, 0.12);
}

.btn1 {
  font-family: var(--font-nav) !important;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-shadow: 0 0 12px rgba(0, 207, 255, 0.22);
}

.btn1:hover,
.btn1:focus-visible {
  color: #7cecff !important;
  text-decoration-color: var(--electric-cyan);
  text-shadow: 0 0 18px rgba(0, 207, 255, 0.68);
}

.logo-image {
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 207, 255, 0.38));
}

/* Strong original-style portrait edge, now with a deeper layered glow. */
#profile-pic {
  border: 5px solid var(--electric-cyan) !important;
  box-shadow:
    0 0 0 2px rgba(0, 140, 255, 0.56),
    0 0 20px rgba(0, 207, 255, 0.94),
    0 0 46px rgba(0, 140, 255, 0.46),
    0 16px 34px rgba(0, 0, 0, 0.36) !important;
}

/* Missing project-chip colors caused dark-on-dark text. */
.project-tag[data-t~="javascript"] {
  color: #172033 !important;
  background: linear-gradient(135deg, #fff36b, #f7c600) !important;
  border-color: rgba(255, 243, 107, 0.72) !important;
}

.project-tag[data-t~="guidevelopment"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00cfff, #2563eb) !important;
  border-color: rgba(124, 236, 255, 0.78) !important;
  text-shadow: 0 1px 2px rgba(0, 25, 70, 0.48);
}

/* Modern side controls: glowing glass orbs rather than flat squares. */
.nav-button {
  width: 64px;
  height: 64px;
  padding: 0 !important;
  color: transparent !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(85, 231, 255, 0.25), transparent 42%),
    linear-gradient(145deg, rgba(14, 32, 58, 0.96), rgba(9, 14, 35, 0.96)) !important;
  border: 2px solid var(--electric-blue) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 16px rgba(0, 207, 255, 0.12),
    0 0 12px rgba(0, 207, 255, 0.78),
    0 0 30px rgba(0, 140, 255, 0.34) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.nav-button.left {
  left: 16px;
}

.nav-button.right {
  right: 16px;
}

.nav-button::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6cecff;
  font-family: var(--font-nav);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0 14px rgba(0, 207, 255, 0.9);
  transform: translateY(-2px);
}

.nav-button.left::before {
  content: "‹";
  padding-right: 4px;
}

.nav-button.right::before {
  content: "›";
  padding-left: 4px;
}

.nav-button:hover,
.nav-button:focus-visible {
  border-color: var(--electric-cyan) !important;
  box-shadow:
    inset 0 0 22px rgba(0, 207, 255, 0.18),
    0 0 18px rgba(0, 255, 255, 0.95),
    0 0 42px rgba(0, 140, 255, 0.52) !important;
  transform: translateY(-50%) scale(1.08);
}

/* CV heading now accurately describes the controls beneath it. */
.cv-title {
  color: #74e9ff !important;
  font-family: var(--font-nav);
  letter-spacing: 0.025em;
  text-shadow: 0 0 18px rgba(0, 207, 255, 0.46) !important;
}

/* Production compaction must not remove visual spaces between animated words. */
.maptext p .word + .word {
  margin-left: 0.32em;
}

.maptext p {
  max-width: 70ch;
  line-height: 1.55;
}

/* Search results stay directly below the input and never begin off-screen. */
.search-lang {
  position: relative;
}

#section-search:focus,
#language-selector:focus {
  border-color: var(--electric-cyan) !important;
  box-shadow:
    0 0 0 2px rgba(0, 207, 255, 0.18),
    0 0 20px rgba(0, 207, 255, 0.54) !important;
}

#search-results {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: min(330px, calc(100vw - 32px));
  max-height: min(320px, calc(100vh - 110px));
  margin-top: 0 !important;
  overflow-y: auto;
  color: #e9f8ff !important;
  background: rgba(7, 17, 38, 0.97) !important;
  border: 2px solid rgba(0, 207, 255, 0.64) !important;
  border-radius: 14px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(0, 207, 255, 0.22) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#search-results:empty {
  display: none;
}

#search-results li {
  padding: 11px 14px;
  color: inherit;
  border-bottom: 1px solid rgba(110, 231, 255, 0.13);
  line-height: 1.3;
}

#search-results li:hover {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(0, 207, 255, 0.24), rgba(37, 99, 235, 0.2));
}

/* Mobile overlay menu: stronger edge light and clearer separation. */
.overlay-menu {
  height: 100vh !important;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 15%, rgba(0, 207, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(8, 22, 45, 0.99), rgba(18, 20, 53, 0.99)) !important;
  border-right: 2px solid var(--electric-cyan) !important;
  box-shadow:
    12px 0 42px rgba(0, 0, 0, 0.58),
    4px 0 26px rgba(0, 207, 255, 0.38) !important;
}

.overlay-menu .nav-btn7 {
  color: #dff8ff !important;
  border-bottom-color: rgba(110, 231, 255, 0.2) !important;
  text-shadow: 0 0 12px rgba(0, 207, 255, 0.26);
}

.overlay-menu .nav-btn7:hover,
.overlay-menu .nav-btn7:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(0, 207, 255, 0.22), rgba(37, 99, 235, 0.24)) !important;
  border-bottom-color: var(--electric-cyan) !important;
}

/* Site map: keep the radial concept while making long labels fit. */
#sitemap {
  flex-direction: column;
  gap: 18px;
}

#sitemap > .faq-button2 {
  margin: 0;
  padding: 11px 22px;
  color: #effbff !important;
  background: linear-gradient(135deg, rgba(0, 140, 255, 0.82), rgba(44, 63, 173, 0.9)) !important;
  border: 2px solid rgba(0, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(0, 207, 255, 0.28);
}

.radial-container {
  width: min(620px, 78vw);
  height: min(620px, 78vw);
  min-width: 520px;
  min-height: 520px;
  border: 2px solid rgba(0, 207, 255, 0.62);
  box-shadow:
    inset 0 0 46px rgba(0, 207, 255, 0.16),
    0 0 34px rgba(0, 140, 255, 0.28);
}

.radial-center {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(108, 236, 255, 0.34), transparent 38%),
    linear-gradient(145deg, #087bbd, #173f96) !important;
  border: 2px solid var(--electric-cyan);
  box-shadow:
    inset 0 0 16px rgba(0, 207, 255, 0.18),
    0 0 18px rgba(0, 207, 255, 0.62),
    0 0 32px rgba(0, 140, 255, 0.3);
}

.radial-item {
  width: 112px;
  height: 112px;
  padding: 10px;
  font-family: var(--font-nav);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 2px solid var(--electric-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 207, 255, 0.3);
}

.radial-item:hover,
.radial-item:focus-visible {
  box-shadow:
    0 0 18px rgba(0, 255, 255, 0.78),
    0 0 34px rgba(0, 140, 255, 0.42) !important;
}

/* A restrained floating glow around the injected chat control. */
#bp-web-widget-container,
#bp-web-widget,
iframe[src*="botpress"],
iframe[src*="bpcontent"],
iframe[title*="chat" i] {
  filter:
    drop-shadow(0 0 8px rgba(0, 207, 255, 0.48))
    drop-shadow(0 0 20px rgba(37, 99, 235, 0.3));
}

body > iframe[title="Botpress"]:last-of-type {
  box-shadow:
    0 12px 30px rgba(0, 35, 86, 0.34),
    0 0 0 5px rgba(0, 207, 255, 0.1),
    0 0 28px rgba(0, 140, 255, 0.56) !important;
  filter: drop-shadow(0 0 12px rgba(0, 207, 255, 0.46));
}

/* Light theme: high contrast surfaces and explicit blue boundaries. */
body.light-mode {
  color: var(--light-ink) !important;
  background-color: var(--light-canvas) !important;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(0, 207, 255, 0.16), transparent 31rem),
    radial-gradient(circle at 88% 18%, rgba(37, 99, 235, 0.13), transparent 34rem),
    linear-gradient(145deg, #f7fbff 0%, #eaf4ff 52%, #e9efff 100%) !important;
}

body.light-mode #particles-js {
  opacity: 0.5;
}

body.light-mode #header {
  background: rgba(245, 250, 255, 0.94) !important;
  border-bottom-color: rgba(0, 140, 255, 0.52);
  box-shadow:
    0 10px 28px rgba(19, 72, 130, 0.16),
    0 2px 16px rgba(0, 140, 255, 0.12);
}

body.light-mode .btn1 {
  color: #17365f !important;
  text-shadow: none;
}

body.light-mode .btn1:hover,
body.light-mode .btn1:focus-visible {
  color: #0059b8 !important;
  text-shadow: 0 0 12px rgba(0, 140, 255, 0.22);
}

body.light-mode #section-search,
body.light-mode #language-selector {
  color: #11233d !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid rgba(0, 140, 255, 0.42) !important;
}

body.light-mode #about .content-container,
body.light-mode .skills,
body.light-mode .sub-skills,
body.light-mode .membership,
body.light-mode #cv-section,
body.light-mode .vision-section,
body.light-mode .service-item,
body.light-mode .cta-section,
body.light-mode #hobbiestext,
body.light-mode .category,
body.light-mode .resource-card,
body.light-mode #thisportfolio,
body.light-mode #contact {
  color: var(--light-ink) !important;
  background: var(--light-surface) !important;
  border: 2px solid var(--light-border) !important;
  box-shadow:
    0 16px 38px rgba(20, 66, 116, 0.14),
    0 0 20px rgba(0, 140, 255, 0.08) !important;
}

body.light-mode #about .content-container,
body.light-mode .skills,
body.light-mode .sub-skills,
body.light-mode .vision-section,
body.light-mode .service-item,
body.light-mode .cta-section,
body.light-mode #hobbiestext,
body.light-mode .category,
body.light-mode .resource-card,
body.light-mode #thisportfolio,
body.light-mode #contact {
  border-radius: 16px;
}

body.light-mode #about p,
body.light-mode .skills,
body.light-mode .sub-skills,
body.light-mode .membership p,
body.light-mode #cv-section,
body.light-mode .vision-section p,
body.light-mode .service-item p,
body.light-mode .cta-section p,
body.light-mode #hobbiestext p,
body.light-mode .category p,
body.light-mode .resource-card p,
body.light-mode #thisportfolio p,
body.light-mode #contact p,
body.light-mode #contact small {
  color: #243955 !important;
}

body.light-mode #about h1,
body.light-mode #skills h2,
body.light-mode #skills h3,
body.light-mode #memberships h2,
body.light-mode #cv-section h2,
body.light-mode .vision-section h2,
body.light-mode .services-section h2,
body.light-mode .service-item h11,
body.light-mode #hobbies h2,
body.light-mode #library h2,
body.light-mode #library h3,
body.light-mode #library h4,
body.light-mode #thisportfolio h2,
body.light-mode #contact h2,
body.light-mode .maptext h4 {
  color: #0b3f78 !important;
  text-shadow: 0 0 14px rgba(0, 140, 255, 0.12) !important;
}

body.light-mode #about-heading {
  color: #063d79 !important;
  background: linear-gradient(100deg, #063d79 4%, #0079d8 47%, #5b36c8 82%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.light-mode #dynamic-skill {
  color: #0067c7 !important;
}

/* The theme script gives Skills a navy inline background in light mode.
   Override only that section so its dark introductory copy remains readable. */
body.light-mode #skills {
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 207, 255, 0.13), transparent 32rem),
    linear-gradient(145deg, rgba(247, 251, 255, 0.96), rgba(230, 241, 255, 0.94)) !important;
  border-bottom: 2px solid rgba(0, 140, 255, 0.34);
}

body.light-mode #skills-heading,
body.light-mode #skills-content3,
body.light-mode #skills-content4 {
  color: #0b3f78 !important;
  text-shadow: 0 0 14px rgba(0, 140, 255, 0.12) !important;
}

body.light-mode #skills-contentstar {
  color: #243955 !important;
  text-shadow: none !important;
}

body.light-mode #skills .h7 {
  color: #0e5e9f !important;
  text-shadow: none !important;
}

body.light-mode #skills .h8 {
  color: #2563a8 !important;
  text-shadow: none !important;
}

body.light-mode .resource-card a,
body.light-mode .cta-button {
  color: #ffffff !important;
  background: linear-gradient(135deg, #007bd8, #344fd1) !important;
  border: 1px solid rgba(0, 84, 184, 0.54);
}

body.light-mode #contact a {
  color: #005db8 !important;
}

body.light-mode .radial-container {
  color: #ffffff;
  background: radial-gradient(circle, #225a8c, #061b3b) !important;
  border-color: var(--electric-blue) !important;
}

body.light-mode .radial-item {
  color: #ffffff !important;
  background: linear-gradient(145deg, #225d92, #0b315d) !important;
}

body.light-mode #sitemap-heading {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(0, 207, 255, 0.52) !important;
}

/* Biography deliberately remains a high-contrast cinematic panel in both themes. */
body.light-mode .landing-section {
  color: #ffffff !important;
  background: linear-gradient(135deg, #264b91, #5a4bb7) !important;
  border: 2px solid rgba(0, 207, 255, 0.54);
}

body.light-mode .landing-section .headline,
body.light-mode .landing-section .description {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.58) !important;
}

body.light-mode .landing-section .cta-button2 {
  color: #ffffff !important;
  background: linear-gradient(135deg, #007bd8, #344fd1) !important;
  border: 2px solid rgba(111, 232, 255, 0.62);
  box-shadow: 0 0 20px rgba(0, 207, 255, 0.24);
}

@media (max-width: 768px) {
  .nav-button {
    display: none !important;
  }

  .container {
    width: 100% !important;
    transform: translateX(0) !important;
  }

  #sitemap {
    padding-top: 80px !important;
  }

  .skills-container {
    width: calc(100% - 20px);
    max-width: 100%;
    align-items: stretch !important;
  }

  .skills,
  .sub-skills {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .radial-container {
    width: min(92vw, 560px);
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 22px;
    border-radius: 26px;
  }

  .radial-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    height: auto;
  }

  .radial-item,
  .radial-item:nth-child(n) {
    position: static;
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 10px 8px;
    border-radius: 18px;
    transform: none;
  }

  .radial-center {
    position: static;
    grid-column: 1 / -1;
    width: 82px;
    height: 82px;
    margin: 0 auto 6px;
  }

  .maptext p {
    max-width: 34ch;
  }

  #sitemap > .faq-button2 {
    width: min(240px, 76vw);
    text-align: center;
  }
}

@media (min-width: 401px) and (max-width: 768px) {
  #certificates-heading {
    max-width: 100%;
    padding: 0 8px;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1.2;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .radial-items {
    grid-template-columns: 1fr;
  }

  .radial-item,
  .radial-item:nth-child(n) {
    min-height: 54px;
  }
}