/* === Basic page reset === */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f3f4f6;
  color: #111827;
}

/* Center the page content a bit (default pages) */
main {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 16px 40px;
}

/* === Top navigation – sticky glass header === */

.navbar {
  display: flex;
  justify-content: center;   /* change to flex-start if you prefer left-aligned */
  align-items: center;
  gap: 32px;

  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;

  padding: 14px 40px;

  /* glass / blur effect */
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* subtle shadow like WP header */
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.4);
}

/* Base nav link – text only, no boxes */
.nav-link {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;

  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;

  color: #111827;  /* default (overridden on dark pages below) */
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

/* Blue hover */
.nav-link:hover {
  color: #2563eb;
}

/* Subtle active click */
.nav-link:active {
  opacity: 0.8;
}
.nav-link:focus-visible {
  color: #2563eb;              /* same blue as hover */
  outline: 2px solid #60a5fa;  /* visible focus ring */
  outline-offset: 3px;
}

/* Blue underline on hover, like modern navs */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
  opacity: 0;
  transition:
    width 0.18s ease,
    opacity 0.18s ease;
}

.nav-link:not(.dropdown-toggle):hover::after {
  width: 100%;
  opacity: 1;
}

/* Simple headings spacing */
h1 {
  margin-top: 0;
  margin-bottom: 12px;
}

p {
  line-height: 1.6;
}

/* --- Footer pinned bottom-left --- */
.site-footer {
  position: fixed;
  bottom: 20px;   /* distance from bottom */
  left: 25px;     /* distance from left */
  font-size: 14px;
  color: #374151; /* soft gray */
  opacity: 0.7;
  pointer-events: none;  /* so it doesn't block clicks */
  z-index: 10;           /* above background videos */
}

.site-footer:hover {
  opacity: 1.0;
}

/* === Inline Video Player Styling (for non-background videos) === */

.video-container {
  width: 50%;             /* half the page width */
  max-width: 500px;       /* prevent it from becoming too large */
  margin: 20px auto;      /* center horizontally */
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.video-container video {
  width: 100%;            /* match container width */
  height: auto;           /* keep aspect ratio */
  border-radius: 8px;
  display: block;
}

/* === Dropdown for Tools / Portfolio nav menus (flat style) === */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Dropdown panel */
.nav-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);

  min-width: 200px;
  padding: 8px 0;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
  z-index: 1000;
}

/* Items in dropdown */
.dropdown-item {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  color: #111827;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: #f3f4f6;
}

/* Show dropdown on hover (desktop) */
.nav-dropdown:hover .dropdown-menu {
  display: block;
}
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
}
.nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
}

.nav-link.dropdown-toggle::after {
  content: " ▾";
  position: relative;
  top: 1px;             /* adjust arrow alignment */
  margin-left: 4px;
  font-size: 0.75em;

  /* override underline styles so arrow is always visible */
  width: auto;
  height: auto;
  opacity: 1;
  background: none;
  bottom: 0;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown .dropdown-menu {
  top: 100%; /* ensures it touches the link with no vertical gap */
  margin-top: 0; /* remove any spacing */
}

/* === Fullscreen background video for Home === */

/* Home page base styling & dark fallback */
body.page-home-section {
  margin: 0;
  background: #000;
  color: #f9fafb;
}

/* Fullscreen background video */
.page-home-section .bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;      /* cover the whole screen */
  z-index: 0;             /* behind content, above body */
  pointer-events: none;   /* prevent any interaction */
}

/* Home page main content centered over video */
.page-home-section main {
  position: relative;
  z-index: 10;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  max-width: none;       /* remove 900px cap so content feels more 'hero' */
  margin: 0;
  padding: 0 16px 40px;
}

/* === Full-page background for Portfolio page === */

body.page-portfolio {
  margin: 0;
  min-height: 100vh;

  background-image: url("/media/portfolio_bacteria_bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #f9fafb;  /* light text on dark bg */
}

/* Make portfolio content readable over the background */
body.page-portfolio main {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px 24px 40px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === Full-page background video for Scripts page === */

body.python-scripts {
  margin: 0;
  min-height: 100vh;
  background: #000; /* fallback color */
  color: #f9fafb;
}

/* Scripts background video */
body.python-scripts .bg-video-scripts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; /* prevents pause/fullscreen, makes video untouchable */
}

/* Main content on scripts page */
body.python-scripts main {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 40px auto;
  padding: 24px 24px 40px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === Full-page background for About page === */

body.page-about {
  margin: 0;
  min-height: 100vh;

  background-color: #000;                 /* fallback: solid black */
  background-image: url("/media/about.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #f9fafb;                         /* light text on dark bg */
}

/* Make About content readable on top of the background */
body.page-about main {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px 24px 40px;
  background: rgba(0, 0, 0, 0.45);        /* translucent dark panel */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === Full-page background for Contact page === */

body.page-contact {
  margin: 0;
  min-height: 100vh;

  background-image: url("/media/contact.webp");
  background-size: cover;        /* fill entire screen */
  background-position: center;   /* center the artwork */
  background-repeat: no-repeat;

  color: #f9fafb;                /* light text on darker bg */
}

/* Make Contact content readable on top of the background */
body.page-contact main {
  position: relative;
  z-index: 10;

  max-width: 900px;
  margin: 40px auto;
  padding: 24px 24px 40px;
  background: rgba(0, 0, 0, 0.45);   /* translucent dark panel */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === Full-page background video for Videos page === */

body.page-videos {
  margin: 0;
  min-height: 100vh;
  background: #000;   /* fallback */
  color: #f9fafb;
}

body.page-videos .bg-video-videos {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; /* prevents interaction like pause/fullscreen */
}

/* Make Videos page content readable on top of bright backgrounds */
body.page-videos main {
  position: relative;
  z-index: 10;

  max-width: 900px;
  margin: 40px auto;
  padding: 24px 24px 40px;

  /* This is your translucent black panel */
  background: rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === Full-page background for Tools page === */

body.page-tools {
  margin: 0;
  min-height: 100vh;

  background-image: url("/media/tools.webp");
  background-size: cover;        /* fill entire screen */
  background-position: center;   /* center the artwork */
  background-repeat: no-repeat;

  color: #f9fafb;                /* light text on darker bg */
}

/* Make Tools content readable on top of the background */
body.page-tools main {
  position: relative;
  z-index: 10;

  max-width: 900px;
  margin: 40px auto;
  padding: 24px 24px 40px;
  background: rgba(0, 0, 0, 0.45);   /* translucent dark panel */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === Larger + white text on dark-background pages === */

body.page-portfolio,
body.python-scripts,
body.page-about {
  color: #ffffff;            /* make ALL text white */
  font-size: 18px;           /* increase base text size */
  line-height: 1.7;          /* more comfortable spacing */
}

/* Make headings bigger too */
body.page-portfolio h1,
body.python-scripts h1,
body.page-about h1 {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
}

body.page-portfolio h2,
body.python-scripts h2,
body.page-about h2 {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
}

body.page-portfolio h3,
body.python-scripts h3,
body.page-about h3 {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

/* === White nav links on all dark pages (incl. tools) === */

body.page-home-section .nav-link,
body.page-portfolio .nav-link,
body.python-scripts .nav-link,
body.page-about .nav-link,
body.page-contact .nav-link,
body.page-videos .nav-link,
body.page-tools .nav-link {
  color: #ffffff;
}

body.page-home-section .nav-link:hover,
body.page-portfolio .nav-link:hover,
body.python-scripts .nav-link:hover,
body.page-about .nav-link:hover,
body.page-contact .nav-link:hover,
body.page-videos .nav-link:hover,
body.page-tools .nav-link:hover {
  color: #93c5fd;  /* soft blue hover */
}

/* Give the "current page" link a stronger look */
body.page-home-section .nav-link[href="/"],
body.page-about .nav-link[href="/about"],
body.page-contact .nav-link[href="/contact"],
body.page-portfolio .nav-link[href="/portfolio"],
body.python-scripts .nav-link[href="/python-scripts"],
body.page-videos .nav-link[href="/videos"] {
  font-weight: 600;
}

/* Tools: active state uses a border underline since ::after is the arrow */
body.page-tools .nav-link[href="/tools"] {
  font-weight: 600;
  border-bottom: 2px solid #93c5fd; /* match your light blue */
  padding-bottom: 6px;              /* so the line sits a bit below the text */
}

/* Underline for active links (except Tools, which uses ▾ arrow instead) */
body.page-home-section .nav-link[href="/"]::after,
body.page-about .nav-link[href="/about"]::after,
body.page-contact .nav-link[href="/contact"]::after,
body.page-portfolio .nav-link[href="/portfolio"]::after,
body.python-scripts .nav-link[href="/python-scripts"]::after,
body.page-videos .nav-link[href="/videos"]::after {
  width: 100%;
  opacity: 1;
}

/* === Portfolio page internal dropdown & layout === */
body.page-portfolio main {
  position: relative;
}

/* Top bar with internal dropdown */
.portfolio-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* Dropdown wrapper */
.portfolio-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown button */
.portfolio-dropdown-toggle {
  background: rgba(15, 23, 42, 0.8);
  color: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
}

/* Dropdown menu list */
.portfolio-dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: 6px;
  list-style: none;
  padding: 6px 0;
  min-width: 160px;

  background: #ffffff;
  color: #111827;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
  display: none;
  z-index: 100;
}

.portfolio-dropdown-menu li {
  padding: 7px 12px;
  font-size: 14px;
  cursor: pointer;
}

.portfolio-dropdown-menu li:hover {
  background: #f3f4f6;
}

.portfolio-dropdown-menu li.active {
  font-weight: 600;
  background: #e5efff;
}

/* Sections */
.portfolio-section {
  margin-top: 24px;
}

.portfolio-section h1 {
  font-size: 26px;
  margin-bottom: 8px;
}

.portfolio-section p {
  font-size: 15px;
  line-height: 1.7;
}

/* Overview section headings grid */
.portfolio-headings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.portfolio-headings-grid h2 {
  font-size: 18px;
  margin-bottom: 6px;
}

/* === FRAME-BASED PORTFOLIO MEDIA (NO BIG BOX, JUST MEDIA + BORDER) === */

/* Carousel wrapper handles width + centering */
.portfolio-carousel {
  max-width: 720px;          /* overall content width; tweak as desired */
  margin: 18px auto 26px;
  position: relative;
}

/* Let media define its own height */
.portfolio-carousel .carousel-window {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;        /* no clipping */
  background: none;         /* no background box */
}

/* Framed media (images + video) */
.portfolio-carousel .carousel-window img,
.portfolio-carousel .carousel-window video.carousel-video {
  display: none;
  max-width: 100%;
  height: auto;

  border: 9px solid rgba(0, 0, 0, 0.95);   /* thin black opaque frame */
  border-radius: 9px;
  background: #000;
}

/* Visible slide */
.portfolio-carousel .carousel-window img.active,
.portfolio-carousel .carousel-window video.active {
  display: block;
}

/* Arrows OVERLAYED on top of the image/video, vertically centered */
.portfolio-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  background: rgba(0, 0, 0, 0.55);
  color: #f9fafb;
  border: none;
  width: 55px;
  height: 55px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(4px);
}

.portfolio-carousel .carousel-arrow.prev {
  left: 10px;
}

.portfolio-carousel .carousel-arrow.next {
  right: 10px;
}

.portfolio-carousel .carousel-arrow:hover {
  background: rgba(37, 99, 235, 0.9);
}

/* Custom play/pause button overlay for the video (we hide it on Overview) */
.video-playpause {
  position: absolute;
  bottom: 12px;
  left: 12px;

  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  z-index: 10;
  backdrop-filter: blur(4px);
}

.video-playpause:hover {
  background: rgba(37, 99, 235, 0.85);
}

/* Hide custom play button on Portfolio Overview Animations (native controls only) */
#portfolio-animations .video-playpause {
  display: none;
}

/* Small-screen adjustments */
@media (max-width: 700px) {
  .portfolio-headings-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-topbar {
    justify-content: flex-start;
  }

  .portfolio-carousel {
    max-width: 100%;  /* let it use full width on tiny screens */
  }
}
/* FINAL OVERRIDE: remove custom play button on Overview Animations */
#portfolio-animations .video-playpause {
  display: none !important;
  pointer-events: none !important;
}