/* Custom Maroon & White theme (Texas A&M) */
:root {
  --aggie-maroon: #500000;
  --aggie-maroon-dark: #3d0000;
  --aggie-white: #ffffff;
  --text-default: #222222;

  /* Site-level variables (used by the theme and our overrides) */
  --global-bg-color: var(--aggie-white); /* page background */
  --global-text-color: var(--text-default);
  --global-masthead-link-color: var(--aggie-white);
  --global-masthead-link-color-hover: #ffdede;
  --global-footer-bg-color: var(--aggie-maroon);

  /* Content panel background (cards, main content) */
  --content-bg: var(--aggie-white);
  --content-text: var(--text-default);
}

/* Dark theme override (works with theme toggle that sets data-theme="dark") */
html[data-theme="dark"] {
  --global-bg-color: #0f1720; /* dark page background */
  --global-text-color: #e8e8e8;
  --global-masthead-link-color: #ffffff;
  --global-footer-bg-color: #2b0000;
  --content-bg: #0f1720; /* dark content panels */
  --content-text: #e8e8e8;
  --global-border-color: rgba(255,255,255,0.06);
  --global-base-color: rgba(255,255,255,0.04);
}

/* Dark-mode readability overrides */
html[data-theme="dark"] {
  /* Ensure primary text is bright enough */
  color: var(--content-text) !important;
}

html[data-theme="dark"] body {
  background-color: var(--global-bg-color) !important;
}

html[data-theme="dark"] .archive-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .post-card {
  background-color: var(--content-bg) !important;
  color: var(--content-text) !important;
}

/* Headings and paragraphs */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li {
  color: var(--content-text) !important;
}

/* Links in dark mode - use a light, slightly warm tint for contrast */
html[data-theme="dark"] a,
html[data-theme="dark"] a:visited {
  color: #ffdede !important;
}
html[data-theme="dark"] a:hover {
  color: #ffffff !important;
}

/* Ensure masthead links and theme toggle are visible */
html[data-theme="dark"] .masthead a,
html[data-theme="dark"] .masthead .masthead__menu-item a,
html[data-theme="dark"] .greedy-nav a,
html[data-theme="dark"] .greedy-nav button {
  color: var(--global-masthead-link-color) !important;
}

/* Card borders and accents */
html[data-theme="dark"] .archive-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .post-card {
  border-color: var(--global-border-color) !important;
}

/* Fix footer spacing/contrast in dark mode */
html[data-theme="dark"] .page__footer { background-color: var(--global-footer-bg-color) !important; }


/* Page background: follow theme variable so dark mode can override it */
body {
  background-color: var(--global-bg-color) !important;
  color: var(--global-text-color) !important;
}

/* Masthead/header */
.masthead { background-color: var(--global-footer-bg-color) !important; }
.masthead a, .masthead .masthead__menu-item a { color: var(--global-masthead-link-color) !important; }

/* Make the greedy-nav container transparent so links sit on the maroon bar */
.greedy-nav { background: transparent !important; }
.greedy-nav .visible-links, .greedy-nav .visible-links li { background: transparent !important; }
.greedy-nav a { color: var(--global-masthead-link-color) !important; }
.greedy-nav button { background: transparent !important; color: var(--global-masthead-link-color) !important; }

/* Ensure masthead inner containers are transparent so link styles show correctly */
.masthead__inner-wrap, .masthead__menu, .masthead__menu ul, .masthead__menu-item {
  background: transparent !important;
}
.masthead__menu-item { padding: 0.25rem 0.5rem; }
.masthead__menu-item a { color: var(--global-masthead-link-color) !important; }
.masthead { border-bottom: 0; }

/* Theme toggle icon */
#theme-toggle a, #theme-toggle a i { color: var(--global-masthead-link-color) !important; }

/* Footer */
.page__footer, .page__footer .page__footer-copyright {
  background-color: var(--global-footer-bg-color) !important;
  color: var(--aggie-white) !important;
}
.page__footer a { color: var(--aggie-white) !important; }

/* Keep main content readable but allow global background to span full width */
.page, .site, .site-inner, .page__content, .content, .page__inner-wrap {
  background-color: transparent !important;
  color: var(--content-text) !important;
}

/* Cards, panels and sidebars */
.sidebar, .page__sidebar, .card, .archive-item, .post-card {
  background-color: var(--content-bg) !important;
  color: var(--content-text) !important;
}

/* Links and accents */
a, .masthead a:hover, .page a:hover { color: var(--aggie-maroon-dark) !important; }

/* Ensure images and iframes blend with content area */
.page img, .page iframe { background: transparent; display:block; }

/* Small tweak for footer spacing on maroon bg */
.page__footer { padding-top: 18px; padding-bottom: 18px; }

/* Ensure footer sits flush at bottom and no stray white band appears. FIX: min-height 100vh instead of height 100% */
html, body { min-height: 100vh; }
body > .page__footer { position: relative; z-index: 2; }

/* Fix for clipped sidebar icons */
.author__urls i.fa-fw, 
.author__urls i.fas, 
.author__urls i.fab {
    padding-left: 2px !important;
    width: 1.3em !important; /* Slightly widens the container so nothing gets cut off */
}

/* Progress Bar Container */
.progress-container {
  width: 100%;
  height: 4px;
  background: transparent;
  position: fixed; /* Keeps it locked to the top of the screen */
  top: 0;
  left: 0;
  z-index: 9999; /* Ensures it stays above all other content/menus */
}

.progress-bar {
  height: 4px;
  background: #a8a8a8; /* A nice contrasting silver/grey */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a tiny shadow so it pops */
  width: 0%; 
}

/* Break cards out of flat mode and add depth */
.archive__item {
  background-color: var(--content-bg) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; /* Makes it look 3D */
  border-radius: 8px !important;
  padding: 15px !important;
  transition: box-shadow 0.3s ease; /* Smooth shadow, no transform conflict */
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important; 
  will-change: transform !important; /* Tells browser to expect movement */
}

/* Make the image float above the card when tilted */
.archive__item-teaser {
  transform: translateZ(30px) !important;
}

/* ========================================================
   PARTICLE BACKGROUND MASTER FIX
   ======================================================== */

/* 1. Lock and stretch the container and canvas to the screen */
#particles-js {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: -999 !important; /* Absolute bottom */
  background-color: var(--global-bg-color) !important;
  pointer-events: none !important;
}

#particles-js canvas {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: auto !important; 
}

/* 2. Turn EVERY Jekyll structural layer into glass */
html, body, 
.initial-content, 
.site, 
.page, 
.page__inner-wrap, 
#main, 
html[data-theme="dark"] body,
html[data-theme="dark"] .page,
html[data-theme="dark"] .site,
html[data-theme="dark"] .initial-content,
html[data-theme="dark"] .page__inner-wrap {
  background-color: transparent !important;
  background: none !important;
}

/* 3. Fix the Header (Masthead) Alignment and Sticky Behavior */
.masthead {
  background-color: var(--global-footer-bg-color) !important;
  z-index: 999 !important; /* Keep it above particles */
  border-top: none !important; /* Eliminates the white gap at the very top */
}

/* Ensure the footer stays solid and at the bottom */
.page__footer {
  background-color: var(--global-footer-bg-color) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ========================================================
   MODERN RESUME BUTTON (HOMEPAGE)
   ======================================================== */

.modern-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--aggie-maroon), var(--aggie-maroon-dark)) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 50px; /* Creates the modern "pill" shape */
  box-shadow: 0 4px 15px rgba(80, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 2px solid transparent;
}

/* The 3D Lift & Glow Effect on Hover */
.modern-resume-btn:hover {
  transform: translateY(-4px) !important; /* Lifts the button up */
  box-shadow: 0 10px 25px rgba(80, 0, 0, 0.6) !important; /* Expands the shadow */
  background: linear-gradient(135deg, var(--aggie-maroon-dark), var(--aggie-maroon)) !important;
}

/* Animate the little arrow icon */
.modern-resume-btn i {
  transition: transform 0.3s ease;
}

.modern-resume-btn:hover i {
  transform: translateX(6px) !important; /* Pushes the arrow to the right */
}

/* ========================================================
   MODERN SKILL BADGES
   ======================================================== */

.skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2rem;
}

.skill-badge {
  background-color: rgba(80, 0, 0, 0.05);
  border: 1px solid rgba(80, 0, 0, 0.2);
  color: var(--text-default);
  padding: 8px 18px;
  border-radius: 30px; /* Pill shape */
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default; /* Keeps it from looking like a broken link */
}

/* Adjust colors for Dark Mode */
html[data-theme="dark"] .skill-badge {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--content-text);
}

/* 3D Hover Effect */
.skill-badge:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 15px rgba(80, 0, 0, 0.2) !important;
  border-color: var(--aggie-maroon) !important;
  background-color: var(--aggie-maroon) !important;
  color: #ffffff !important;
}

/* ========================================================
   SIDEBAR TRANSPARENCY FIX
   ======================================================== */

.sidebar, 
.page__sidebar, 
.sidebar.sticky,
.author__profile {
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ========================================================
   MOBILE MENU DROPDOWN FIX
   ======================================================== */
.greedy-nav .hidden-links {
  background-color: var(--global-footer-bg-color) !important; /* Forces the box to be Maroon */
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.greedy-nav .hidden-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle dividers between links */
}

.greedy-nav .hidden-links a {
  color: #ffffff !important; /* Ensures text is white */
  font-weight: 600;
}

/* Hover effect for mobile taps */
.greedy-nav .hidden-links a:hover {
  background-color: var(--aggie-maroon-dark) !important; 
}