/* Simplified responsive stylesheet for portfolio */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root {
  /* cursor: prefer an external SVG (relative path), then fall back to embedded data URIs */
  --hot-cursor: url("images/cursor.svg") 6 4, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M8 6 L36 16 L28 26 L32 40 L18 14 Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-dasharray='3%2C3' stroke-linejoin='round' d='M8 6 L36 16 L28 26 L32 40 L18 14 Z'/%3E%3Ccircle fill='%23ff6a00' cx='34' cy='14' r='2'/%3E%3C/svg%3E") 8 6, auto;
  --hot-cursor-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M6 4 L26 12 L20 18 L24 28 L12 12 Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-dasharray='3%2C2' stroke-linejoin='round' d='M6 4 L26 12 L20 18 L24 28 L12 12 Z'/%3E%3Ccircle fill='%23ff6a00' cx='24' cy='12' r='1.6'/%3E%3C/svg%3E") 6 4, auto;
}

/* Apply custom cursor on devices with fine pointers (desktop) */
@media (hover: hover) and (pointer: fine) {

  html,
  body,
  a,
  button,
  input,
  textarea,
  select,
  .btn {
    cursor: var(--hot-cursor-small), var(--hot-cursor) !important;
  }

  .btn,
  button,
  a {
    cursor: var(--hot-cursor-small), var(--hot-cursor) !important;
  }
}

/* text inputs use native text cursor */
input[type='text'],
input[type='search'],
input[type='email'],
textarea {
  cursor: text;
}

:root {
  --bg: #0f1115;
  --surface: #111214;
  --text: #f6f7f8;
  --muted: #9aa0a6;
  --accent: #f25b4a;
  --accent-2: #66a0ff;
  /* nav separator and subtle shadow (theme-aware) */
  --nav-border: rgba(255, 255, 255, 0.06);
  --nav-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  --max-width: 1100px;
  --gap: 18px;
}

html {
  box-sizing: border-box;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text);
  background: var(--bg)
}

/* smooth theme transitions */
html,
body {
  height: 100%;
  transition: background-color .25s ease, color .2s ease;
}

/* make the app fill the viewport so footer can stick to bottom when content is short */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 11000;
  transform: translateY(-120%);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease
}

.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  outline: 3px solid rgba(255, 255, 255, 0.12)
}

*,
*::before,
*::after {
  box-sizing: inherit
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

a {
  color: var(--text)
}

/* smoother link and element transitions */
a,
button,
input,
textarea {
  transition: color .15s ease, background-color .15s ease, box-shadow .12s ease, transform .12s ease
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px
}

/* When body uses column flex layout, let main container grow so footer is pushed to bottom */
.container,
main.container {
  flex: 1 1 auto;
}

.flexed {
  display: flex;
  gap: var(--gap);
  flex-direction: column
}

/* Nav */
.nav_wrapper {
  background: var(--surface);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  position: relative
}

.logo h1 {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: 1.5rem;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.6px;
  font-weight: 600
}

.nav_links ul {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  align-items: center
}

.nav_links a {
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px
}

.nav_links a:hover {
  background: rgba(255, 255, 255, 0.03)
}

.toggle-btn {
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 6px;
  border-radius: 999px
}

.nav_links a.active {
  background: var(--accent);
  color: #fff
}

/* active nav pill to match header CTA */
.nav_links a.active {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  padding: 8px 12px;
  border-radius: 10px
}

/* Header / hero */
.container>.content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--gap);
  align-items: start
}

.myImage img {
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4)
}

.writings h1 {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 12px;
  font-weight: 700
}

.writings p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 1rem
}

/* Cards */
.section,
.project_card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04)
}

/* Project card visual style to match the provided layout */
.project_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px;
  border-radius: 12px;
  min-height: 360px
}

.project_card {
  transition: transform .18s ease, box-shadow .18s ease
}

.project_card img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 6px
}

.project_card h2 {
  font-size: 1.6rem;
  margin: 6px 0 8px;
  font-weight: 700
}

.project_card p {
  color: var(--muted);
  max-width: 360px
}

.project_card .project_link {
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 12px;
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4)
}

.project_card .project_link:hover {
  transform: translateY(-2px)
}

.project_card .project_button {
  margin-top: 8px;
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 10px 16px;
  border-radius: 10px
}

.project_card .project_button:hover {
  background: rgba(255, 255, 255, 0.03)
}

.icon_bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap
}

.icon_bar img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.98
}

/* Slightly darken card surface for better contrast */
.project_card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.005));
}

/* Force three columns on large screens to match the reference layout */
@media(min-width:1100px) {
  .project_grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.project_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

/* Responsive fluid grids: auto-fit wraps cards and prevents a single narrow column */
.project_grid,
.blog-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.container>.content,
.container>.project_grid,
.container>.blog-list {
  margin-top: 18px
}

/* header inner spacing */
.page-header+.container {
  padding-top: 8px;
}

/* Constrain overall content so it stays centered on wide viewports */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px
}

/* Ensure images inside cards and sections are fluid and cannot force layout overflow */
.project_card img,
.section img,
.myImage img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Contact form: stack and make full width on small screens */
.form-group input,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text);
}

.form-group label {
  display: block;
  margin-top: 6px;
  color: var(--text)
}

/* Make contact forms centered and responsive */
form,
.form,
.contact-form {
  width: 100%;
  max-width: 820px;
  /* keeps forms readable on large screens */
  margin: 0 auto 24px;
  box-sizing: border-box;
}

/* Ensure inputs inside legacy page-specific CSS also become fluid */
input[type="text"],
input[type="email"],
textarea,
.form input,
.form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Mobile nav: hide the menu by default and show when .open is set */
.nav-menu {
  display: none
}

.nav-menu.open {
  display: block
}

/* Mobile dropdown behavior: full-width panel under the header for small screens */
@media(max-width:800px) {
  .nav_links ul {
    flex-direction: column;
    align-items: center
  }

  .nav-menu {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    /* sits below header */
    background: var(--surface);
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    width: auto;
    z-index: 9998;
    display: none;
  }

  /* ensure the mobile nav toggle sits above the dropdown and adapts to theme */
  #nav-toggle {
    z-index: 10001;
    position: relative;
    background: transparent;
    border-radius: 8px;
    color: var(--text);
    padding: 8px
  }

  .nav-menu.open {
    display: block
  }

  /* make nav list vertical inside the dropdown */
  .nav-menu ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }

  .nav-menu a {
    display: block;
    padding: 8px 10px;
    color: var(--text)
  }
}

/* Color variable overrides when light mode is active so switches are consistent */
body.light-mode {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111111;
  --muted: #555555;
  --accent: #f25b4a;
  --accent-2: #66a0ff;
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Desktop: ensure nav-menu is visible and toggle button hidden/display neutral */
@media(min-width:801px) {
  .nav-menu {
    display: block;
    position: static;
    box-shadow: none;
    padding: 0;
    background: transparent
  }

  #nav-toggle {
    display: none
  }

  /* ensure toggle sits above dropdown and adapts to theme */
  #nav-toggle {
    z-index: 10000;
    background: rgba(255, 255, 255, 0.02);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
  }

  .nav-menu ul {
    flex-direction: row;
    align-items: center
  }
}

/* Make nav links easier to tap on mobile */
.nav_links ul {
  gap: 8px
}

.nav_links a {
  padding: 10px 12px
}

/* Social icons row: keep label and icons inline on larger screens */
.social_icons>p {
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
  font-weight: 500
}

.social_icons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px
}

.social_icons>div {
  display: flex;
  gap: 12px;
  align-items: center
}

.social_icons a {
  font-size: 1.5rem;
  color: var(--text);
  margin: 0;
  transition: color .25s
}

body {
  padding-bottom: 40px
}

/* Footer */
.footer {
  padding: 18px 24px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  /* center content */
  gap: 12px;
  border-top: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  background: var(--surface);
  flex-wrap: nowrap;
  position: relative;
  /* using body flex layout to push footer to bottom; no extra margin needed */
  text-align: center;
}

.footer>* {
  margin: 0;
}

/* animated gradient separator above footer for a subtle effect */
.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  /* sits on the border-top line */
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent, var(--accent));
  opacity: .08;
  transform: scaleX(1);
  transform-origin: left center;
  animation: footerPulse 6s ease-in-out infinite;
}

@keyframes footerPulse {

  0%,
  100% {
    opacity: .06;
    transform: scaleX(1)
  }

  50% {
    opacity: .14;
    transform: scaleX(.92)
  }
}

/* Social icons: entrance and hover polish */
.footer .social_icons,
.footer .social_icons a {
  display: inline-flex;
  align-items: center
}

.footer .social_icons a {
  transition: transform .18s ease, color .18s ease;
  margin: 0 6px
}

.footer .social_icons a:hover {
  transform: translateY(-3px) scale(1.05);
  color: var(--accent)
}

@media(max-width:640px) {
  .footer {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

/* Responsive */
@media (max-width:960px) {
  .container>.content {
    grid-template-columns: 1fr
  }

  .project_grid,
  .blog-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  }

  .logo h1 {
    font-size: 1.25rem
  }
}

/* Make the nav translucent on tablets and mobiles so it shows content behind it */
@media (max-width:960px) {
  .nav_wrapper {
    background: transparent;
    background-color: rgba(17, 18, 20, 0.22);
    /* increased opacity so the header is less transparent */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: none;
    /* remove hard separator so content flows visually */
    box-shadow: none;
    position: sticky;
    /* keep at top but remain in flow */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    transition: background-color .22s ease, backdrop-filter .22s ease;
  }

  /* slightly increase contrast for nav links when over variable backgrounds */
  .nav_wrapper .logo h1,
  .nav_wrapper .nav_links a,
  .nav_wrapper .toggle-btn {
    color: var(--text);
  }
}

/* Class-based fallback so JS can force translucency if needed */
.nav_wrapper.nav-translucent {
  background: transparent !important;
  background-color: rgba(17, 18, 20, 0.22) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* When nav is translucent, make the dropdown panel match the translucent look */
.nav_wrapper.nav-translucent .nav-menu {
  background: transparent !important;
  background-color: rgba(17, 18, 20, 0.20) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.nav_wrapper.nav-translucent .nav-menu a {
  color: var(--text) !important
}

.nav_wrapper.nav-translucent .nav-menu ul {
  align-items: flex-start
}

@media (max-width:640px) {
  .nav_links ul {
    flex-direction: column;
    align-items: center
  }

  .project_grid,
  .blog-list {
    grid-template-columns: 1fr
  }

  .logo h1 {
    font-size: 1rem
  }

  .container>.content {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .myImage img {
    max-width: 260px;
    margin: 0 auto
  }
}

/* Accessibility focus */
:focus {
  outline-offset: 3px
}

:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.08)
}

/* Slightly stronger focus rings for interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(100, 150, 255, 0.18);
  outline-offset: 3px
}

/* small helpers */
.hot-box {
  color: var(--accent);
  font-weight: 700
}

.pixel {
  color: var(--accent-2)
}

/* Make .project_button consistent */
.project_button {
  background: var(--surface);
  color: var(--text);
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer
}

.project_button:hover {
  background: var(--text);
  color: var(--bg)
}

/* Page header for Projects */
.page-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  /* modern, borderless look */
  border-bottom: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.page-header .page-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px
}

.page-avatar {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  /* subtle ring and shadow for a premium look */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 6px solid rgba(255, 255, 255, 0.03);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  transition: transform .18s ease, box-shadow .18s ease;
}

.page-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center
}

.page-avatar:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55)
}

.page-title {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  margin: 0;
  color: var(--text);
  font-weight: 800
}

@media(max-width:960px) {
  .page-header {
    padding: 16px 18px;
    gap: 12px
  }

  .page-avatar {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border-width: 4px
  }

  .page-title {
    font-size: 1.35rem
  }
}

@media(max-width:640px) {
  .page-header {
    padding: 12px
  }

  .page-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-width: 3px
  }

  .page-title {
    font-size: 1.12rem
  }
}

/* Language Switcher Styles */
#language-switcher {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  font-size: 1rem;
  font-family: inherit;
  transition: color .15s ease;
}

#language-switcher:hover {
  color: var(--accent);
}

#language-switcher:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.12);
  outline-offset: 3px;
}

#language-switcher option {
  background: var(--surface);
  color: var(--text);
}