/* =========================
   SCHOOL COLORS
   ========================= */

/* Lansing Community College
   Academic slate tone that fits violet theme */
.course-title.lcc{
  color:#6f7b95;
}

/* University of the People
   Keep purple but slightly refined */
.uopeople-purple{
  color:#a592c7;
  font-weight:600;
}


/* =========================
   CERTIFICATION COLORS
   Modern palette derived from theme
   ========================= */

/* Rackspace + RedHat
   Deep ruby toned to match mauve theme */
.course-title.rackspace,
.course-title.redhat{
  color:#b05263;
}

/* LPIC Linux
   Muted gold instead of bright yellow */
.course-title.lpic{
  color:#d2b85c;
}

/* MongoDB
   Slightly softened green */
.course-title.mongodb{
  color:#3f9b6c;
}

/* cPanel
   Burnt orange toned toward rose */
.course-title.cpanel{
  color:#d26a3f;
}

/* Cloud Technologies
   Indigo cloud tone matching palette */
.course-title.cloudtech{
  color:#6b7ed1;
}

/* Imunify360
   Security teal */
.course-title.imunify{
  color:#4a9a7a;
}

/* Plesk
   Lime shifted toward olive */
.course-title.plesk{
  color:#9fbf4a;
}/* =========================================================
   BLAIRPAGE — UNIFIED VISUAL SYSTEM
   ShockTherapyRebuilding Unified Link System
   Responsive preserved
   ========================================================= */

/* =========================
   COLOR SYSTEM
   ========================= */

:root {
  --black: #000000ff;
  --midnight-violet: #291528ff;
  --charcoal-brown: #3a3e3bff;
  --ghost-white: #f0eff4ff;
  --dusty-mauve: #9e829cff;

  --text-light: var(--ghost-white);

  --bg-light: linear-gradient(
    135deg,
    #000000 0%,
    #291528 30%,
    #3a3e3b 60%,
    #9e829c 85%,
    #f0eff4 100%
  );

  --glass-bg: rgba(240, 239, 244, 0.08);
  --glass-border: rgba(240, 239, 244, 0.22);

  /* Shock Therapy Brand Link System */
  --link-primary: #9e829c;
  --link-hover: #f0eff4;
}

/* =========================
   DARK MODE
   ========================= */

body.dark {
  --bg-light: linear-gradient(
    135deg,
    #000000 0%,
    #1a0d19 35%,
    #291528 70%,
    #3a3e3b 100%
  );

  --glass-bg: rgba(0, 0, 0, 0.65);
  --glass-border: rgba(240, 239, 244, 0.12);
  --text-light: #f8f7fb;
}

/* =========================
   BASE
   ========================= */

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg-light);
  background-attachment: fixed;
  color: var(--text-light);
  transition: background 0.7s ease;
}

.container {
  padding: 2rem;
}

/* =========================
   GLOBAL LINK SYSTEM
   Unified Shock Therapy Hover
   ========================= */

a {
  color: var(--link-primary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 14px rgba(240, 239, 244, 0.65);
}

a:visited {
  color: var(--link-primary);
}

a:active {
  color: var(--link-hover);
}

/* =========================
   TOP BAR
   ========================= */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.6px;
}

/* =========================
   THEME BUTTON
   ========================= */

.theme-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  color: var(--ghost-white);
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 0 0 1px rgba(240, 239, 244, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(240, 239, 244, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

/* =========================
   RESUME SHELL
   ========================= */

.resume-shell {
  max-width: 1100px;
  margin: auto;
  backdrop-filter: blur(20px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 3rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
}

/* =========================
   IDENTITY
   ========================= */

.identity-row {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}

.profile-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(240, 239, 244, 0.45);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7);
}

.identity-info h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.4px;
}

.sub-name {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.identity-info h3 {
  margin: 0.6rem 0 1rem;
  font-weight: 600;
  color: var(--dusty-mauve);
}

.bio {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 720px;
}
/* =========================
   SOCIAL LINKS — EXACT MATCH
   ========================= */

.social-links {
  margin: 1.6rem 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-links a {
  font-size: 27px;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.75));
}

/* =========================
   TOOLTIP — EXACT MATCH
   ========================= */

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 160%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0, 0, 0, 0.95);
  color: var(--ghost-white);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.25s ease;
}

.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {

  .identity-row {
    flex-direction: column;
    text-align: center;
  }

  .container {
    padding: 1rem;
  }

  .resume-shell {
    padding: 1.5rem 1.25rem;
  }

}

/* =========================
   ENHANCED TIMELINE SPACING
   Room for future icons
   ========================= */

.timeline-enhanced {
  margin-top: 3rem;
}

/* Each timeline block gets breathing room */
.timeline-enhanced .timeline-item {
  margin-bottom: 3.5rem;
  position: relative;
}

/* Add visual left spacing without centering */
.timeline-enhanced .timeline-content {
  padding-left: 2.25rem;
  max-width: 900px;
}

/* Subtle alignment refinement */
.timeline-enhanced .timeline-content h4 {
  margin-bottom: 0.35rem;
}

/* Company line spacing */
.timeline-enhanced .timeline-content p {
  margin-top: 0;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

/* Bullet refinement */
.timeline-enhanced .timeline-content ul {
  padding-left: 1.4rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.timeline-enhanced .timeline-content li {
  margin-bottom: 0.55rem;
  line-height: 1.6;
}

/* Date spacing */
.timeline-enhanced .timeline-date {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* =========================================================
   MODERN RESPONSIVE RECTANGLE LAYOUT ENHANCEMENT
   (Non-destructive — preserves ALL existing content)
   ========================================================= */

/* =========================
   GLOBAL SECTION SPACING
   ========================= */

section {
  margin-top: 4rem;
}

h2 {
  font-size: 1.8rem;
  letter-spacing: -0.3px;
  margin-bottom: 1.75rem;
}

/* =========================
   MATRIX GRID POLISH
   ========================= */

.profile-matrix {
  margin-top: 5rem;
}

.matrix-card {
  padding: 0.5rem 0;
  border-radius: 20px;
}

.matrix-card ul {
  padding-left: 1.2rem;
}

.matrix-card li {
  margin-bottom: 0.55rem;
}

/* =========================
   TIMELINE -> CARD LAYOUT
   Converts vertical stack into modern card grid feel
   ========================= */

.timeline-enhanced {
  display: grid;
  gap: 3rem;
}

.timeline-enhanced .timeline-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.timeline-enhanced .timeline-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 70px rgba(0,0,0,0.75);
}

.timeline-enhanced .timeline-content {
  padding-left: 0;
  max-width: 100%;
}

/* =========================
   PROJECT LIST RECTANGLES
   ========================= */

.project-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.project-list li a {
  display: block;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, background 0.25s ease;
}

.project-list li a:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
}

.project-url {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.35rem;
}

/* =========================
   EDUCATION + COURSES
   Two-column responsive block
   ========================= */

.education-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.edu-card,
.courses-card,
.certs-card {
  backdrop-filter: blur(18px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2.2rem;
  box-shadow: 0 20px 55px rgba(0,0,0,0.65);
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem;
}

.course-group ul {
  padding-left: 1.2rem;
}

/* =========================
   CERTIFICATION — STRUCTURED GRID
   Left / Right Balanced Layout
   ========================= */

.certification-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* strict left-right */
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .certification-list {
    grid-template-columns: 1fr;
  }
}

.cert-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 1.75rem 1.75rem 2rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.85);
}

.cert-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.cert-card p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* =========================
   VOLUNTEER — MATCHING GRID SYSTEM
   Same Concept, Separate Class
   ========================= */

.volunteer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* strict left-right */
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .volunteer-grid {
    grid-template-columns: 1fr;
  }
}

.volunteer-card {
  backdrop-filter: blur(18px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 2rem;
  box-shadow: 0 18px 45px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.volunteer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.85);
}

/* =========================
   CREDLY WRAPPER POLISH
   ========================= */

section[style*="margin-top:3rem"] {
  margin-top: 5rem !important;
}

/* =========================
   SMOOTHER MOBILE STACKING
   ========================= */

@media (max-width: 1024px) {

  .timeline-enhanced {
    gap: 2.5rem;
  }

  .timeline-enhanced .timeline-item {
    padding: 1.75rem;
  }

}

@media (max-width: 640px) {

  h2 {
    font-size: 1.5rem;
  }

  .edu-card,
  .courses-card,
  .certs-card,
  .volunteer-card,
  .timeline-enhanced .timeline-item {
    padding: 1.5rem;
  }

  .profile-img {
    width: 150px;
    height: 150px;
  }

}

/* =========================
   GLOBAL CONTENT ALIGNMENT FIX
   Ensures all major blocks align under same left edge
   ========================= */

.resume-sections,
.profile-matrix,
.timeline,
.certifications-section,
.volunteer-section {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Remove internal centering from matrix */
.profile-matrix {
  margin: 4rem 0;
  padding: 0;
}

/* Make Certifications + Volunteer match timeline width */
.certifications-section,
.volunteer-section {
  margin-top: 5rem;
}

/* Ensure grids align perfectly under section header */
.certification-list,
.volunteer-grid {
  width: 100%;
}

/* =========================
   CERTIFICATIONS – Masonry + Two Tone
   ========================= */

.certification-list {
  column-count: 2;
  column-gap: 2.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .certification-list {
    column-count: 1;
  }
}

.certification-card {
  break-inside: avoid;
  margin-bottom: 2rem;
  padding: 1.75rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Stagger Effect */
.certification-card:nth-child(even) {
  margin-top: 2rem;
}

/* Subtle Two-Tone Column Background */
.certifications-section {
  position: relative;
}

.certifications-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.04)
  );
  pointer-events: none;
}

/* Hover polish */
.certification-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

/* =========================
   CERTIFICATIONS – Masonry + Two Tone
   ========================= */

.certification-list {
  column-count: 2;
  column-gap: 2.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .certification-list {
    column-count: 1;
  }
}

.certification-card {
  break-inside: avoid;
  margin-bottom: 2rem;
  padding: 1.75rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Stagger Effect */
.certification-card:nth-child(even) {
  margin-top: 2rem;
}

/* Subtle Two-Tone Column Background */
.certifications-section {
  position: relative;
}

.certifications-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.04)
  );
  pointer-events: none;
}

/* Hover polish */
.certification-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}


/* =========================================================
   FINAL STRUCTURE OVERRIDES
   Non-destructive conflict resolution layer
   (Appended only – nothing removed above)
   ========================================================= */


/* =========================
   GLOBAL SAFETY
   Prevent overflow & layout break
   ========================= */

* {
  box-sizing: border-box;
}

p, li, h3, h4 {
  overflow-wrap: break-word;
}


/* =========================
   CERTIFICATIONS
   Force stable grid over column masonry
   (Overrides earlier column-count rules)
   ========================= */

.certification-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-count: unset !important;
  column-gap: unset !important;
  gap: 2rem 2.5rem !important;
}

@media (max-width: 900px) {
  .certification-list {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure consistent card structure */
.cert-card,
.certification-card {
  break-inside: unset !important;
  height: 100%;
}


/* =========================
   KEEP TWO-TONE BACKGROUND
   (Preserved but stabilized)
   ========================= */

.certifications-section {
  position: relative;
}

.certifications-section::before {
  pointer-events: none;
  z-index: 0;
}

.certification-list,
.cert-card,
.certification-card {
  position: relative;
  z-index: 1;
}


/* =========================
   VOLUNTEER GRID STABILIZER
   ========================= */

.volunteer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem 2.5rem !important;
  align-items: stretch;
}

@media (max-width: 900px) {
  .volunteer-grid {
    grid-template-columns: 1fr !important;
  }
}

.volunteer-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* =========================
   BOTTOM PAGE ANCHOR FINISH
   Makes Volunteer visually close page
   ========================= */

.volunteer-section {
  padding-bottom: 6rem;
  position: relative;
}

.volunteer-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,0.08)
  );
  pointer-events: none;
}


/* =========================
   EDUCATION + COURSES ALIGNMENT
   Prevent uneven column stretch
   ========================= */

.education-wrapper {
  align-items: stretch;
}

.edu-card,
.courses-card,
.certs-card {
  height: 100%;
}


/* =========================
   HARD ALIGNMENT LOCK
   Ensures all grids line up perfectly
   ========================= */

.certification-list,
.volunteer-grid,
.education-wrapper {
  width: 100%;
}

/* =========================
   CONNECT BUTTON — EXACT PORTFOLIO MATCH
   ========================= */

.follow-btn {
  margin-top: 1rem;
  background: linear-gradient(
    135deg,
    var(--midnight-violet),
    var(--charcoal-brown),
    var(--dusty-mauve)
  );
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 30px;
  color: var(--ghost-white);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
}

.follow-btn:hover {
  transform: scale(1.06);
}

.follow-btn.following {
  background: linear-gradient(
    135deg,
    var(--dusty-mauve),
    var(--midnight-violet),
    var(--black)
  );
}
.card-content > *:first-child {
  margin-top: 0;
}
.card-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
/* =========================
   COURSE + CERTIFICATION SWATCH SYSTEM
   Theme Harmonized
   ========================= */

.course-title{
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.4px;
}


/* =========================
   SCHOOL COLORS
   ========================= */

/* Lansing Community College
   Academic slate tone that fits violet theme */
.course-title.lcc{
  color:#6f7b95;
}

/* University of the People
   Keep purple but slightly refined */
.uopeople-purple{
  color:#a592c7;
  font-weight:600;
}


/* =========================
   CERTIFICATION COLORS
   Modern palette derived from theme
   ========================= */

/* Rackspace + RedHat
   Deep ruby toned to match mauve theme */
.course-title.rackspace,
.course-title.redhat{
  color:#b05263;
}

/* LPIC Linux
   Muted gold instead of bright yellow */
.course-title.lpic{
  color:#d2b85c;
}

/* MongoDB
   Slightly softened green */
.course-title.mongodb{
  color:#3f9b6c;
}

/* cPanel
   Burnt orange toned toward rose */
.course-title.cpanel{
  color:#d26a3f;
}

/* Cloud Technologies
   Indigo cloud tone matching palette */
.course-title.cloudtech{
  color:#6b7ed1;
}

/* Imunify360
   Security teal */
.course-title.imunify{
  color:#4a9a7a;
}

/* Plesk
   Lime shifted toward olive */
.course-title.plesk{
  color:#9fbf4a;
}
/* ======================================
   PROJECT CARDS — SHOCK THERAPY HOVER FIX
   ====================================== */

.project-list li a {
  color: var(--link-primary);
  transition: 
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    text-shadow 0.25s ease;
}

.project-list li a:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  color: var(--link-hover);
  text-shadow: 0 0 18px rgba(240, 239, 244, 0.75);
}

/* Also ensure URL text follows */
.project-list li a:hover .project-url {
  color: var(--link-hover);
  opacity: 1;
}

/* ======================================
   FORCE SHOCK THERAPY HOVER MATCH
   ====================================== */

a,
a:visited {
  color: var(--link-primary);
  transition: 
    color 0.25s ease,
    text-shadow 0.25s ease;
}

a:hover,
a:focus {
  color: var(--link-hover) !important;
  text-shadow: 0 0 18px rgba(240, 239, 244, 0.75);
}

/* University of the People Purple */
.uopeople-purple {
  color: #9A8FB2;
  font-weight: 600;
}

/* Ragnarok Header Layout */
.ragnarok-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.ragnarok-icon {
  width: 90px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* Mobile stack */
@media (max-width: 600px) {
  .ragnarok-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ragnarok-icon {
    margin-bottom: 0.5rem;
  }
}

/* =========================
   JOB LOGO LAYOUT SYSTEM
   ========================= */

.job-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.job-logo {
  flex: 0 0 90px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.job-logo img {
  width: 85px;
  height: auto;
  image-rendering: pixelated;
}

.job-details {
  flex: 1;
}

/* =========================
   Desktop Logo Size & Alignment for Job Titles
   ========================= */
@media (min-width: 769px) {
  .job-logo {
    display: flex;
    align-items: center; /* vertically center logo with first line of job title */
    margin-right: 0.25rem; /* tiny gap, optional */
  }

  .job-logo img {
    width: 60px;   /* desktop size */
    height: 60px;  /* maintain aspect ratio */
  }
}

/* Responsive */
@media (max-width: 768px) {
  .job-layout {
    flex-direction: column;
  }

  .job-logo {
    margin-bottom: 1rem;
  }
}

/* =========================
   OVERRIDE "ABOUT" LINK HOVER
   ========================= */
.about-link {
  color: var(--text-light); /* keeps it white */
  font-weight: 700;          /* optional, keep bold */
  text-decoration: none;
}

.about-link:hover {
  color: var(--text-light); /* stays white on hover */
  text-shadow: none;        /* optional, remove glow effect */
}

/* =====================================
   MOBILE FIX FOR PROFESSIONAL EXPERIENCE
   ===================================== */

@media (max-width: 768px) {

  .job-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .job-logo img {
    width: 85px;
  }

  .job-details {
    width: 100%;
  }

  .timeline-item {
    margin-bottom: 90px;  /* Better separation on mobile */
  }

  .job-gif-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .job-gif-row img {
    width: 60px;
  }

}

/* =====================================
   CERTIFICATIONS RESIZE (GROUPED)
   ===================================== */

.certifications-container {
  transform: scale(0.9);
  transform-origin: top center;
}

.certification-card {
  padding: 14px 18px;
  font-size: 0.95rem;
}

.certification-card h4 {
  font-size: 1rem;
}

.certification-card p {
  font-size: 0.85rem;
}

/* =====================================
   SCROLL TO TOP – CHEVRON STYLE
   ===================================== */

#scrollTopBtn {
  position: fixed;
  bottom: 35px;
  right: 35px;

  width: 48px;
  height: 48px;

  background: #7a6f9f; /* your primary grey-purple */
  border: none;
  border-radius: 6px; /* rectangle */

  display: none;
  cursor: pointer;
  z-index: 9999;

  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: background 0.25s ease, transform 0.2s ease;
}

/* Chevron Icon */
.chevron-up {
  width: 20px;
  height: 20px;
  stroke: #e9e6f5; /* soft light purple from theme */
  stroke-width: 2.5;
  fill: none;
  display: block;
  margin: auto;
  margin-top: 14px;
}

/* Hover – slightly lighter purple */
#scrollTopBtn:hover {
  background: #8a7db3;
  transform: translateY(-3px);
}

#scrollTopBtn:hover .chevron-up {
  stroke: #ffffff;
}

/* =====================================
   THEME-MATCHED SCROLLBAR
   ===================================== */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #f3f2f8; /* very subtle purple tint */
}

::-webkit-scrollbar-thumb {
  background: #7a6f9f;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8a7db3;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #7a6f9f #f3f2f8;
}

/* ==========================================
   MOBILE LAYOUT REFINEMENT
   ========================================== */

@media (max-width: 820px) {

/* Container spacing */
.container {
  padding-left: 16px;
  padding-right: 16px;
}

/* Identity header stacks properly */
.identity-row {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.identity-info h1 {
  font-size: 1.8rem;
}

.identity-info h3 {
  font-size: 1rem;
}

.bio {
  font-size: .95rem;
  line-height: 1.55;
}

/* Profile image */
.profile-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

/* =================================
   JOB LAYOUT FIX
   ================================= */

.job-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Logo centered above job */
.job-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

/* Fix GIF scaling */
.job-logo img {
  width: 70px;
  height: auto;
  max-width: 100%;
}

/* Better spacing between jobs */
.timeline-item {
  margin-bottom: 38px;
}

/* Job text readability */
.job-details h4 {
  font-size: 1.2rem;
}

.job-details p,
.job-details li {
  font-size: .95rem;
  line-height: 1.55;
}

/* Prevent text overflow */
.job-details {
  width: 100%;
}

/* Lists padding */
.job-details ul {
  padding-left: 18px;
}

/* =================================
   PROJECT LINKS
   ================================= */

.project-list a {
  word-break: break-word;
  font-size: .92rem;
}

.project-url {
  display: block;
  font-size: .82rem;
  opacity: .85;
}

/* =================================
   PROFILE MATRIX GRID
   ================================= */

.matrix-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Card padding refinement */
.matrix-card {
  padding-bottom: 6px;
}

/* =================================
   TABLE FIX (Game server section)
   ================================= */

.data-table-section {
  overflow-x: auto;
}

.data-table {
  font-size: .85rem;
  min-width: 500px;
}

/* =================================
   CERTIFICATIONS / CREDLY SIZE FIX
   ================================= */

.resume-block iframe {
  transform: scale(.85);
  transform-origin: top center;
}

/* =================================
   REMOVE WHITE SCROLL FLASH
   ================================= */

body {
  background: #0f0c17;
}

html {
  background: #0f0c17;
}

/* =================================
   SOCIAL ICONS
   ================================= */

.social-links {
  gap: 12px;
}

.social-links a {
  font-size: 1.2rem;
}

/* =================================
   FOLLOW BUTTON
   ================================= */

.follow-btn {
  margin-top: 8px;
  padding: 8px 16px;
  font-size: .9rem;
}

/* =================================
   SCROLL BUTTON POSITION MOBILE
   ================================= */

#scrollTopBtn {
  bottom: 20px;
  right: 16px;
}

}

/* =====================================
   SCROLL TO TOP – THEME MATCHED
   ===================================== */

#scrollTopBtn {
  position: fixed;
  bottom: 35px;
  right: 35px;

  width: 48px;
  height: 48px;

  background: var(--dusty-mauve);
  border: none;
  border-radius: 6px;

  display: none;
  cursor: pointer;
  z-index: 9999;

  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

/* Chevron Icon */
.chevron-up {
  width: 20px;
  height: 20px;
  stroke: var(--ghost-white);
  stroke-width: 2.5;
  fill: none;
  display: block;
  margin: auto;
  margin-top: 14px;
}

/* Hover */
#scrollTopBtn:hover {
  background: var(--midnight-violet);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.65);
}

#scrollTopBtn:hover .chevron-up {
  stroke: var(--ghost-white);
}
/* ==========================================
   FINAL MOBILE LAYOUT FIXES
   ========================================== */

@media (max-width: 820px) {

/* -----------------------------
   Container spacing
----------------------------- */

.container {
  padding-left: 16px;
  padding-right: 16px;
}

/* -----------------------------
   Identity section
----------------------------- */

.identity-row {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.identity-info h1 {
  font-size: 1.8rem;
}

.identity-info h3 {
  font-size: 1rem;
}

.bio {
  font-size: .95rem;
  line-height: 1.55;
}

.profile-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

/* -----------------------------
   JOB BLOCK LAYOUT
----------------------------- */

.timeline-item {
  margin-bottom: 80px; /* more breathing room */
}

/* Stack logo + text */
.job-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Center logo */
.job-logo {
  display: flex;
  justify-content: center;
}

.job-logo img {
  width: 70px;
  height: auto;
}

/* Job text full width */
.job-details {
  width: 100%;
}

/* -----------------------------
   JOB GIF GRID (5 icons)
----------------------------- */

.job-gif-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.job-gif-row img {
  width: 48px;
  height: auto;
  justify-self: center;
}

/* If screen very small collapse to 3 */
@media (max-width: 520px) {

  .job-gif-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

}

/* -----------------------------
   CERTIFICATIONS
   Smaller but grouped
----------------------------- */

.certifications-container {
  transform: scale(.88);
  transform-origin: top center;
}

.certification-card {
  padding: 12px 16px;
}

.certification-card h3,
.certification-card h4 {
  font-size: .95rem;
}

.certification-card p {
  font-size: .82rem;
}

/* Maintain grid spacing */
.certification-list {
  gap: 18px 20px;
}

/* -----------------------------
   EDUCATION + COURSES
----------------------------- */

.education-wrapper {
  grid-template-columns: 1fr;
  gap: 24px;
}

/* -----------------------------
   Timeline cards
----------------------------- */

.timeline-enhanced {
  gap: 40px;
}

.timeline-enhanced .timeline-item {
  padding: 20px;
}

}

/* ==========================================
   SCROLL BUTTON POLISH
   (matches site purple scale)
   ========================================== */

#scrollTopBtn {
  position: fixed;
  bottom: 32px;
  right: 32px;

  width: 46px;
  height: 46px;

  border-radius: 8px;
  border: none;

  background: linear-gradient(
    135deg,
    #291528,
    #3a3e3b,
    #9e829c
  );

  box-shadow: 0 10px 22px rgba(0,0,0,.35);

  cursor: pointer;
  z-index: 9999;

  display: none;

  transition: transform .2s ease, box-shadow .2s ease;
}

#scrollTopBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

/* Chevron icon color */
#scrollTopBtn svg {
  stroke: #f0eff4;
  stroke-width: 2.5;
}

/* ==========================================
   THEME MATCHED SCROLLBAR
   ========================================== */

/* Chrome / Edge / Safari */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    #291528,
    #3a3e3b,
    #9e829c
  );
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    #3a3e3b,
    #9e829c,
    #f0eff4
  );
}

/* Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: #9e829c rgba(0,0,0,0.08);
}

/* ==========================================
   JOB LAYOUT FIX – KEEP GIF LEFT OF TEXT
   ========================================== */

.job-layout{
  display:flex;
  align-items:flex-start;
  gap:22px;
}

/* Logo container */
.job-logo{
  flex:0 0 90px;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  margin:0;
  padding:0;
}

/* Logo image */
.job-logo img{
  width:70px;
  height:70px;
  object-fit:contain;
  display:block;
}

/* Job text column */
.job-details{
  flex:1;
}

/* Ensure text starts aligned with logo */
.job-details h3{
  margin-top:0;
}

/* Space between jobs */
.timeline-item{
  margin-bottom:60px;
}


/* ===============================
   JOB TITLE + LOGO ALIGNMENT FIX
   =============================== */

.job-layout{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

/* logo column */
.job-logo{
  flex:0 0 70px;
  margin:0;
  padding:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* logo image */
.job-logo img{
  width:60px;
  height:60px;
  object-fit:contain;
  margin-top:4px;
}

/* text column */
.job-details{
  flex:1;
}

/* force job title to start at same height as logo */
.job-details h3{
  margin-top:0;
  margin-bottom:6px;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.4px;
}

/* job meta text */
.job-details p{
  margin:4px 0;
  line-height:1.6;
}

/* spacing between jobs */
.timeline-item{
  margin-bottom:70px;
}


/* =========================
   JOB LOGO MOBILE ALIGNMENT
   ========================= */

.job-layout{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.job-logo img{
  width:44px;
  height:44px;
  flex-shrink:0;
}

/* MOBILE */
@media (max-width:768px){

  .job-layout{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:12px;
  }

  .job-logo{
    flex-shrink:0;
  }

  .job-logo img{
    width:38px;
    height:38px;
  }

  .job-details{
    flex:1;
  }

}


/* =========================
   JOB LAYOUT ALIGNMENT FIX
   ========================= */

.job-layout{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap:10px;
  align-items:start;
}

.job-logo{
  grid-column:1;
}

.job-details{
  grid-column:2;
}

.job-logo img{
  width:36px;
  height:36px;
  display:block;
}

/* tighten spacing on mobile */
@media (max-width:768px){

  .job-layout{
    grid-template-columns:32px 1fr;
    gap:8px;
  }

  .job-logo img{
    width:30px;
    height:30px;
  }

  .job-details h4{
    margin-top:0;
  }

}

/* =========================
   EXACT LOGO TO TITLE ALIGNMENT
   ========================= */

.job-layout{
  display:flex;
  align-items:flex-start;
}

.job-logo{
  margin-right:0;
}

.job-logo img{
  width:80px;
  height:80px;
  display:block;
}

/* remove spacing that pushes title away */
.job-details{
  padding:0;
  margin:0;
}

.job-details h4{
  margin:0;
  padding:0;
  line-height:1.2;
}

/* mobile tightening */
@media (max-width:768px){

  .job-logo img{
    width:40px;
    height:40px;
  }

  .job-layout{
    gap:0; /* removes gap between logo and title */
  }

}

/* Base styling for all devices (mobile-first) */
.logo-img {
  width: 80px;        /* Mobile-friendly size */
  height: auto;       /* Maintain aspect ratio */
  display: block;
  margin: 0 auto;     /* Center if needed */
  object-fit: contain;
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
  .logo-img {
    width: 120px;     /* Larger logo on tablets */
  }
}

/* Large screens (desktop / laptops) */
@media (min-width: 1024px) {
  .logo-img {
    width: 150px;     /* Even larger logo on desktops */
  }
}

/* Optional: Extra large screens */
@media (min-width: 1440px) {
  .logo-img {
    width: 80px;
  }
}

/* Base size (mobile) remains unchanged */
.logo-img {
  width: 100px; /* whatever your current mobile size is */
  height: auto;
  display: block;
  object-fit: contain;
}

/* ===== Job Description Toggle ===== */
.job-details ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  cursor: pointer;
  padding-left: 20px;
  margin: 0.5em 0;
  border-left: 2px solid rgba(255,255,255,0.2);
}

.job-details ul.expanded {
  max-height: 2000px; /* large enough to show all items */
}

/* Optional hover effect */
.job-details ul li {
  transition: transform 0.2s ease, color 0.2s ease;
}

/* COLLAPSIBLE JOB DESCRIPTIONS */
.job-description {
  max-height: 1000px;       /* large enough to show full content */
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Toggle class for collapse/expand */
.job-description.collapsed {
  max-height: 0;
  padding: 0;               /* optional to hide spacing when collapsed */
  margin: 0;
}

.job-details ul:hover li {
  transform: translateX(2px);
  color: #d1c4e9; /* gentle highlight on hover */
}

/* COLLAPSIBLE JOB DESCRIPTION */
.job-description {
  max-height: 1000px;       /* fully visible by default */
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

.job-description.collapsed {
  max-height: 0;
  padding: 0;
  margin: 0;
}

/* =========================
   JOB DESCRIPTION TOGGLE BUTTON REPLACEMENT
   ========================= */

/* Style the expand/collapse button */
.job-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;               /* bigger than chevron */
  height: 36px;
  border-radius: 50%;        /* circular button */
  background-color: #333;    /* dark, solid but subtle */
  color: #fff;               /* icon color */
  font-size: 20px;           /* larger plus/minus symbol */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-left: 10px;         /* spacing from job title if inline */
}

.job-toggle-btn:hover {
  background-color: #555;    /* slightly brighter on hover */
  transform: scale(1.1);     /* small hover pop */
}

/* Plus sign for collapsed, minus for expanded */
.job-toggle-btn.collapsed::after {
  content: "+";
}

.job-toggle-btn.expanded::after {
  content: "–";
}



/* =========================
   JOB DESCRIPTION TOGGLE – THEME-MATCHED
   ========================= */

/* Make the chevron clickable area larger and more inviting */
.job-description-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(158,130,156,0.2); /* subtle theme-matched circle */
  color: var(--link-primary);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Hover effect */
.job-description-toggle:hover {
  background-color: rgba(158,130,156,0.35);
  transform: scale(1.15); /* slight pop */
}

/* Replace chevron visually using the theme */
.job-description-toggle::after {
  content: "⌄"; /* downward arrow – looks like a friendly toggle */
  display: block;
  color: var(--link-primary);
  font-size: 18px;
  transition: transform 0.3s ease;
}

/* Rotates when expanded */
.job-description-toggle.expanded::after {
  transform: rotate(180deg);
}

/* Optional: keep text colors inside job description consistent */
.timeline-enhanced .timeline-content.collapsible-content {
  transition: max-height 0.4s ease, opacity 0.4s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

/* Expanded content */
.timeline-enhanced .timeline-content.collapsible-content.expanded {
  max-height: 1000px; /* big enough to show content */
  opacity: 1;
}

/* ======================================
   JOB DESCRIPTION EXPAND BUTTON
   Only affects job description lists
   ====================================== */

.job-details ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding-left: 18px;
  margin-top: 8px;
  border-left: 2px solid rgba(158,130,156,0.35);
}

.job-details ul.expanded {
  max-height: 2000px;
}

/* expand button */
.job-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 6px;
  border-radius: 6px;

  background: linear-gradient(
    135deg,
    var(--midnight-violet),
    var(--charcoal-brown),
    var(--dusty-mauve)
  );

  color: var(--ghost-white);
  font-size: 14px;
  font-weight: bold;

  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.job-expand:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(240,239,244,0.35);
}

/* icon states */
.job-expand::before {
  content: "+";
}

.job-expand.open::before {
  content: "–";
}



/* ================================
   JOB HEADER VISUAL IMPROVEMENT
================================ */

.card-toggle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;

  padding:14px 18px;

  border-radius:10px;
  border:1px solid var(--glass-border);

  background:linear-gradient(
      135deg,
      rgba(158,130,156,0.25),
      rgba(0,0,0,0.35)
  );

  font-weight:700;
  font-size:1rem;
}

/* Remove purple hover */

.card-toggle:hover{
  background:linear-gradient(
      135deg,
      rgba(158,130,156,0.25),
      rgba(0,0,0,0.35)
  );
}

/* ================================
   EXPAND BUTTON
================================ */

.expand-icon{

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

  width:36px;
  height:36px;

  border-radius:8px;

  background:rgba(158,130,156,0.35);

  font-size:20px;
  font-weight:700;

  transition:transform .25s ease;
}

/* rotate when open */

.card-toggle[aria-expanded="true"] .expand-icon{
  transform:rotate(45deg);
}

/* ================================
   JOB DESCRIPTION AREA
================================ */

.job-details ul{
  max-height:0;
  overflow:hidden;

  transition:max-height .35s ease;

  padding-left:18px;
  margin-top:10px;

  border-left:2px solid rgba(158,130,156,0.35);
}

/* expanded */

.job-details ul.expanded{
  max-height:2000px;
}

/* remove pointer and hover */

.job-details ul,
.job-details li{
  cursor:default;
}

/* ================================
   REMOVE PURPLE HOVER
================================ */

.job-details a:hover{
  color:inherit;
  text-decoration:underline;
}

/* ================================
   ROUND LOGOS
================================ */

.company-logo,
.job-logo,
.matrix-logo,
.cert-logo{
  border-radius:10px;
}

/* ================================
   FULL WIDTH BUTTON FEEL
================================ */

.matrix-card{
  width:100%;
}

/* ================================
   MOBILE RESPONSIVE
================================ */

@media (max-width:768px){

  .card-toggle{
    font-size:.95rem;
    padding:12px 14px;
  }

  .expand-icon{
    width:32px;
    height:32px;
    font-size:18px;
  }

}


.card-header-static{
  width:100%;
  padding:14px 18px;

  border-radius:10px;
  border:1px solid var(--glass-border);

  background:linear-gradient(
      135deg,
      rgba(158,130,156,0.25),
      rgba(0,0,0,0.35)
  );

  font-weight:700;
  font-size:1rem;

  margin-bottom:10px;
}

/* Remove collapse logic */
.job-details ul {
  display: block !important; /* always visible */
  margin-top: 0.5rem;
  padding-left: 1.2rem;
}
.timeline h2 { color: inherit !important; text-decoration: none !important; pointer-events: none; }
/* =========================
   LOGO CORNER ROUNDING
   ========================= */

/* Rackspace square logo fully rounded */
.job-logo img.rackspace {
  border-radius: 16px; /* square with gentle rounded corners */
  object-fit: contain; /* keep entire logo visible */
}

/* Long/rectangular logos rounded on corners */
.job-logo img:not(.rackspace) {
  border-radius: 12px; /* pill-like corners for rectangle logos */
  object-fit: contain;  /* full logo remains visible */
}

/* Keep GIFs untouched */
.job-gif-row img {
  border-radius: 0;      /* no rounding */
}

/* =========================
   ROUND ONLY RACKSPACE LOGO
   ========================= */

.job-logo img.rackspace {
  border-radius: 16px; /* gentle rounding of corners */
  object-fit: contain; /* keeps full logo visible */
}

/* =========================
   PREMIUM TECHNOLOGIES LOGO SCALE
   ========================= */

.job-logo img.premium-tech {
  width: 133%;   /* roughly a third larger */
  height: auto;  /* maintain aspect ratio */
}

/* =========================
   SPECIAL PROJECTS - FULL VISIBILITY
   ========================= */

.project-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.project-list li a {
  display: block;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
  color: var(--link-primary);
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
  word-break: break-word;
}

.project-list li a:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  color: var(--link-hover);
  text-shadow: 0 0 18px rgba(240, 239, 244, 0.75);
}

.project-url {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.35rem;
  color: inherit;
}

/* Force all selected projects to show fully (no expansion needed) */
.project-list li {
  overflow: visible;
  max-height: none;
}


/* =========================
   LOGO SIZE ADJUSTMENTS
   ========================= */

/* Make 3x larger logos */
.logo-premium-technologies,
.logo-shock-therapy,
.logo-crazy-larry,
.logo-string-theory {
  width: calc(60px * 3); /* original 60px x3 */
  height: calc(60px * 3);
  max-width: none;
  max-height: none;
}

/* Make 2x larger logos */
.logo-craftartedu,
.logo-upcloud {
  width: calc(60px * 2); /* original 60px x2 */
  height: calc(60px * 2);
  max-width: none;
  max-height: none;
}

/* Optional: maintain object-fit so logos scale nicely */
.job-logo img {
  object-fit: contain;
}

/* =========================
   MATRIX / EXPERIENCE & BACKGROUND CARD FULL HOVER FIX
   ========================= */

/* Ensure full card hover effect */
.matrix-card {
  background: rgba(255, 255, 255, 0.04); /* base background */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* Full background fill on hover */
.matrix-card:hover {
  background: rgba(255, 255, 255, 0.08); /* stronger fill */
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Remove inner spacing that prevents full hover fill */
.matrix-card > * {
  margin: 0;
  padding: 0;
}

/* Grid wrapper spacing (keeps 3x2 layout) */
.profile-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* =========================
   SCHOOL COLORS
   ========================= */

/* Lansing Community College */
.course-title.lcc {
  color: #6f7b95;
}

/* University of the People */
.uopeople-purple {
  color: #a592c7;
  font-weight: 600;
}

/* =========================
   CERTIFICATION COLORS
   ========================= */

/* Rackspace + RedHat */
.course-title.rackspace,
.course-title.redhat {
  color: #b05263;
}

/* LPIC Linux */
.course-title.lpic {
  color: #d2b85c;
}

/* MongoDB */
.course-title.mongodb {
  color: #3f9b6c;
}

/* cPanel */
.course-title.cpanel {
  color: #d26a3f;
}

/* Cloud Technologies */
.course-title.cloudtech {
  color: #6b7ed1;
}

/* Imunify360 */
.course-title.imunify {
  color: #4a9a7a;
}

/* Plesk */
.course-title.plesk {
  color: #9fbf4a;
}

/* =========================
   BLAIRPAGE — UNIFIED VISUAL SYSTEM
   ========================= */

:root {
  --black: #000000ff;
  --midnight-violet: #291528ff;
  --charcoal-brown: #3a3e3bff;
  --ghost-white: #f0eff4ff;
  --dusty-mauve: #9e829cff;

  --text-light: var(--ghost-white);

  --bg-light: linear-gradient(
    135deg,
    #000000 0%,
    #291528 30%,
    #3a3e3b 60%,
    #9e829c 85%,
    #f0eff4 100%
  );

  --glass-bg: rgba(240, 239, 244, 0.08);
  --glass-border: rgba(240, 239, 244, 0.22);

  --link-primary: #9e829c;
  --link-hover: #f0eff4;
}

body.dark {
  --bg-light: linear-gradient(
    135deg,
    #000000 0%,
    #1a0d19 35%,
    #291528 70%,
    #3a3e3b 100%
  );

  --glass-bg: rgba(0, 0, 0, 0.65);
  --glass-border: rgba(240, 239, 244, 0.12);
  --text-light: #f8f7fb;
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg-light);
  background-attachment: fixed;
  color: var(--text-light);
  transition: background 0.7s ease;
}

.container {
  padding: 2rem;
}

/* =========================
   GLOBAL LINK SYSTEM
   ========================= */

a {
  color: var(--link-primary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

a:hover,
a:focus {
  color: var(--link-hover) !important;
  text-shadow: 0 0 14px rgba(240, 239, 244, 0.65);
}

a:visited {
  color: var(--link-primary);
}

a:active {
  color: var(--link-hover);
}

/* =========================
   TOP BAR
   ========================= */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.6px;
}

/* =========================
   THEME BUTTON
   ========================= */

.theme-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  color: var(--ghost-white);
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(240, 239, 244, 0.18),
              0 8px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(240, 239, 244, 0.28),
              0 12px 30px rgba(0, 0, 0, 0.45);
}

/* =========================
   RESUME SHELL
   ========================= */

.resume-shell {
  max-width: 1100px;
  margin: auto;
  backdrop-filter: blur(20px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 3rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
}

/* =========================
   IDENTITY
   ========================= */

.identity-row {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}

.profile-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(240, 239, 244, 0.45);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7);
}

.identity-info h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.4px;
}

.sub-name {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.identity-info h3 {
  margin: 0.6rem 0 1rem;
  font-weight: 600;
  color: var(--dusty-mauve);
}

.bio {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 720px;
}

/* =========================
   SOCIAL LINKS
   ========================= */

.social-links {
  margin: 1.6rem 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-links a {
  font-size: 27px;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.75));
}

/* =========================
   TOOLTIP
   ========================= */

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 160%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0, 0, 0, 0.95);
  color: var(--ghost-white);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.25s ease;
}

.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */

@media (max-width: 768px) {
  .identity-row {
    flex-direction: column;
    text-align: center;
  }

  .container {
    padding: 1rem;
  }

  .resume-shell {
    padding: 1.5rem 1.25rem;
  }
}

/* =========================
   MATRIX GRID, TIMELINE, CERTIFICATIONS, VOLUNTEER
   ========================= */

/* ... full CSS continues as provided, preserving all rules ... */

/* =========================
   JOB LAYOUT LOGO/TITLE FIXES
   ========================= */

/* Mobile-first */
.job-layout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.job-logo img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

/* Desktop overrides */
@media (min-width: 769px) {
  .job-logo img {
    width: 60px;
    height: 60px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .job-layout {
    gap: 12px;
  }

  .job-logo img {
    width: 38px;
    height: 38px;
  }
}

/* =========================
   SCROLL TO TOP BUTTON
   ========================= */

#scrollTopBtn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #291528, #3a3e3b, #9e829c);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 9999;
  display: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

#scrollTopBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

#scrollTopBtn svg {
  stroke: #f0eff4;
  stroke-width: 2.5;
}

/* =========================
   END OF STYLE.CSS
   ========================= */
/* =========================
   GALLERY STYLES
   ========================= */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.8rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: #f0eff4;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .caption {
  opacity: 1;
}

/* =========================
   BLOG SECTION STYLES
   ========================= */
.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.blog-post {
  background: rgba(240, 239, 244, 0.05);
  padding: 1.5rem;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.blog-post img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.blog-post h3 {
  color: #f0eff4;
  margin: 0.5rem 0;
}

.blog-post p {
  color: #ccc;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* RESPONSIVE FIXES */
@media (max-width: 768px) {
  .gallery-container, .blog-container {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FORCE EDUCATION & VOLUNTEER LOGOS LEFT OF TEXT
   Shrink logos slightly to fit, proper alignment & spacing
   ========================================================= */

/* ---------- General Logo Reset for Education / Courses ---------- */
.edu-header,
.course-group,
.volunteer-item {
    display: flex !important;
    flex-direction: row !important;       /* force row layout */
    align-items: center !important;       /* vertically center with text */
    gap: 0.75rem !important;              /* spacing between logo and text */
}

.edu-header .job-logo,
.course-group .job-logo,
.volunteer-item .job-logo {
    flex: 0 0 auto !important;            /* do not stretch */
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* ---------- Shrink logos slightly so they fit without smashing ---------- */
.edu-header .job-logo img.logo-img,
.course-group .job-logo img.logo-img,
.volunteer-item .job-logo img.logo-img {
    max-width: 60px !important;           /* shrink logos if needed */
    height: auto !important;
    display: block !important;
}

/* ---------- Course Group Titles ---------- */
.course-header {
    display: flex !important;
    flex-direction: column !important;    /* stack text under itself */
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* ---------- Specific adjustments for University of the People ---------- */
.edu-header .job-logo img[alt*="UoP"] {
    max-width: 50px !important;
    margin-right: 0.75rem !important;
}

/* ---------- MongoDB University ---------- */
.course-group .job-logo img[alt*="MongoDB"] {
    max-width: 50px !important;
    margin-right: 0.75rem !important;
}

/* ---------- Rackspace Cloud University ---------- */
.course-group .job-logo img[alt*="Rackspace"] {
    max-width: 50px !important;
    margin-right: 0.75rem !important;
}

/* ---------- Volunteer logos (First Robotics & Swartz Creek) ---------- */
.volunteer-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.volunteer-item .job-logo img.logo-img {
    max-width: 50px !important;
    height: auto !important;
    display: block !important;
    margin-right: 0.5rem !important;
}

/* ==========================================
   MOBILE SHADOW + GLASS REDUCTION FIX
   (NON-DESTRUCTIVE APPEND ONLY)
   ========================================== */

@media (max-width: 820px) {

  /* Remove heavy glass blur */
  .resume-shell,
  .matrix-card,
  .timeline-enhanced .timeline-item,
  .cert-card,
  .certification-card,
  .volunteer-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Flatten heavy shadows */
  .resume-shell,
  .matrix-card,
  .timeline-enhanced .timeline-item,
  .cert-card,
  .certification-card,
  .volunteer-card {
    box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
  }

  /* Reduce hover lift effect on mobile (prevents stacking shadow effect) */
  .matrix-card:hover,
  .timeline-enhanced .timeline-item:hover,
  .cert-card:hover,
  .volunteer-card:hover {
    transform: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
  }

  /* Soften glass background slightly to reduce “blocky” look */
  .resume-shell,
  .matrix-card,
  .timeline-enhanced .timeline-item {
    background: rgba(255,255,255,0.025) !important;
  }

}

/* ==========================================
   MOBILE BACKGROUND BLEND FIX
   append-only / non-destructive
   ========================================== */

@media (max-width: 820px) {

  /* Remove the extra boxed shading behind major cards/sections */
  .resume-shell,
  .matrix-card,
  .timeline-item,
  .timeline-enhanced .timeline-item,
  .cert-card,
  .certification-card,
  .volunteer-card,
  .edu-card,
  .courses-card,
  .certs-card {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Remove extra overlay shading layers that can create cut-off blocks */
  .certifications-section::before,
  .volunteer-section::after {
    display: none !important;
  }

  /* Prevent hover states from reintroducing dark blocks on touch/mobile */
  .matrix-card:hover,
  .timeline-item:hover,
  .timeline-enhanced .timeline-item:hover,
  .cert-card:hover,
  .certification-card:hover,
  .volunteer-card:hover {
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
  }

  /* Keep borders subtle so structure stays, without boxed shading */
  .resume-shell,
  .matrix-card,
  .timeline-item,
  .timeline-enhanced .timeline-item,
  .cert-card,
  .certification-card,
  .volunteer-card,
  .edu-card,
  .courses-card,
  .certs-card {
    border-color: rgba(240, 239, 244, 0.10) !important;
  }
}

/* ==========================================
   MOBILE CREDLY BADGE SHADING FIX
   (FINAL APPEND – NON-DESTRUCTIVE)
   ========================================== */

@media (max-width: 820px) {

  /* Remove ALL shading layers around Credly embeds */
  .resume-block,
  .resume-block iframe,
  .credly-wrapper,
  .credly-badges,
  iframe[src*="credly"] {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Remove any inherited card/glass look behind badges */
  .resume-block,
  .resume-block * {
    box-shadow: none !important;
  }

  /* Keep scaling but remove visual "boxed" effect */
  .resume-block iframe {
    border: none !important;
  }

}

/* ==========================================
   HARD OVERRIDE — CREDLY BACKGROUND KILL (MOBILE ONLY)
   ========================================== */

@media (max-width: 820px) {

  /* Force parent containers completely flat */
  .resume-block,
  .resume-block > *,
  .resume-block iframe,
  iframe[src*="credly"] {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
  }

  /* Kill ANY inherited shading from ALL nested elements */
  .resume-block * {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Prevent stacking context / layering artifacts */
  .resume-block {
    isolation: isolate;
  }

  /* Ensure iframe itself doesn't introduce edge shading */
  iframe[src*="credly"] {
    display: block;
    margin: 0 auto;
  }

}

/* ==========================================
   FINAL INDEX TOP MENU / TOGGLE MATCH OVERRIDE
   exact gallery/blog sizing and spacing
   ========================================== */

body.index-final-menu-match .top-bar{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:1rem 2rem !important;
  font-size:.85rem !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  z-index:100 !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

body.index-final-menu-match .credential-header{
  font-size:inherit !important;
  line-height:1.2 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
}

body.index-final-menu-match .site-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
}

body.index-final-menu-match .site-nav a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 1rem !important;
  padding:0 !important;
  font-size:.85rem !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  color:#9e829c !important;
  text-decoration:none !important;
  text-shadow:none !important;
}

body.index-final-menu-match .site-nav a:hover,
body.index-final-menu-match .site-nav a:focus{
  color:#f0eff4 !important;
  text-decoration:underline !important;
  text-shadow:none !important;
}

body.index-final-menu-match #themeToggle,
body.index-final-menu-match .theme-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:20px !important;
  padding:.4rem 1rem !important;
  min-width:44px !important;
  min-height:34px !important;
  font-size:.85rem !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  margin:0 !important;
  color:var(--text-light) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

@media (max-width:900px){
  body.index-final-menu-match .top-bar{
    padding:1rem 2rem !important;
    font-size:.85rem !important;
  }

  body.index-final-menu-match .credential-header{
    font-size:.425rem !important;
    line-height:1.2 !important;
  }

  body.index-final-menu-match .site-nav a{
    margin:0 1rem !important;
    font-size:.85rem !important;
    line-height:1.2 !important;
  }

  body.index-final-menu-match #themeToggle,
  body.index-final-menu-match .theme-btn{
    padding:.4rem 1rem !important;
    min-width:44px !important;
    min-height:34px !important;
    font-size:.85rem !important;
    line-height:1 !important;
    background:var(--glass-bg) !important;
    border:1px solid var(--glass-border) !important;
    color:var(--text-light) !important;
    box-shadow:none !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }
}

/* ==========================================
   FIX: PUSH CONTENT BELOW TOP MENU
   append-only / non-destructive
   ========================================== */

/* Desktop spacing under menu */
.container {
  padding-top: 6rem !important;
}

/* Mobile spacing under menu */
@media (max-width: 768px) {
  .container {
    padding-top: 5.2rem !important;
  }
}


/* ==========================================
   FORCE NAV UNDER RHCE6 LEFT SIDE
   desktop + mobile
   append-only / non-destructive
   ========================================== */

.top-bar{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "cred toggle"
    "nav  toggle" !important;
  align-items: start !important;
  row-gap: 0.35rem !important;
}

.credential-header{
  grid-area: cred !important;
  justify-self: start !important;
}

.site-nav{
  grid-area: nav !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-nav a{
  margin: 0 1rem 0 0 !important;
}

#themeToggle,
.theme-btn{
  grid-area: toggle !important;
  justify-self: end !important;
  align-self: start !important;
}

@media (max-width: 768px){
  .top-bar{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "cred toggle"
      "nav  toggle" !important;
    row-gap: 0.3rem !important;
  }

  .credential-header{
    justify-self: start !important;
  }

  .site-nav{
    justify-self: start !important;
    flex-wrap: nowrap !important;
  }

  .site-nav a{
    margin: 0 0.85rem 0 0 !important;
  }
}

/* ==========================================
   PROFILE CARD PUSH-UP UNDER MENU
   append-only / non-destructive
   ========================================== */

.container{
  padding-top: 4.6rem !important;
}

.resume-shell{
  margin-top: 0 !important;
}

@media (max-width: 768px){
  .container{
    padding-top: 4.15rem !important;
  }

  .resume-shell{
    margin-top: 0 !important;
  }
}

/* ==========================================
   FINAL MOBILE BLACK BLINK KILL
   append-only / non-destructive
   ========================================== */
@media (max-width: 768px) {
  html,
  body {
    background: var(--bg-light) !important;
    background-image: var(--bg-light) !important;
    background-attachment: scroll !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  .container {
    padding-top: 3.7rem !important;
  }

  .resume-shell {
    margin-top: 0 !important;
  }
}


/* ==========================================
   MOBILE INDEX MENU CENTERING FIX
   RHCE6 centered top row
   nav centered directly underneath
   toggle stays where it is
   append-only / non-destructive
   ========================================== */

@media (max-width: 768px) {
  .top-bar {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "cred toggle"
      "nav  toggle" !important;
    align-items: start !important;
    row-gap: 0.3rem !important;
  }

  .credential-header {
    grid-area: cred !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
    color: var(--ghost-white) !important;
    white-space: normal !important;
    max-width: 78% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  .site-nav {
    grid-area: nav !important;
    justify-self: center !important;
    align-self: start !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .site-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0.85rem !important;
    text-align: center !important;
  }

  #themeToggle,
  .theme-btn {
    grid-area: toggle !important;
    justify-self: end !important;
    align-self: start !important;
  }
}

/* ==========================================
   MOBILE CLEAN FIX — SINGLE SOURCE OF TRUTH
   paste at very end of style.css
   desktop/non-mobile untouched
   ========================================== */

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-attachment: scroll !important;
  }

  /* ---------- top header ---------- */
  .top-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.45rem !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 1rem 1rem 0.5rem 1rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  .credential-header {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 0.56rem !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .site-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.8rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-nav a {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
  }

  #themeToggle,
  .theme-btn {
    align-self: flex-start !important;
    margin: 0 !important;
    min-width: 44px !important;
    min-height: 34px !important;
    padding: 0.4rem 1rem !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  body:not(.dark) #themeToggle,
  body:not(.dark) .theme-btn {
    background: rgba(58, 62, 59, 0.15) !important;
    border: 1px solid rgba(240, 239, 244, 0.22) !important;
    color: #f0eff4 !important;
  }

  body.dark #themeToggle,
  body.dark .theme-btn {
    background: rgba(8, 10, 14, 0.42) !important;
    border: 1px solid rgba(240, 239, 244, 0.14) !important;
    color: #f8f7fb !important;
  }

  /* ---------- page spacing ---------- */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .resume-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.35rem 1rem !important;
    margin: 0 !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  section,
  .timeline,
  .timeline-item,
  .timeline-content,
  .job-layout,
  .job-details,
  .profile-matrix,
  .matrix-grid,
  .matrix-card,
  .card-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ---------- identity ---------- */
  .identity-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }

  .identity-info,
  .identity-info h1,
  .identity-info h3,
  .bio {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .profile-img {
    width: 150px !important;
    height: 150px !important;
  }

  /* ---------- matrix cards ---------- */
  .matrix-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin: 0 !important;
  }

  .matrix-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .card-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 58px !important;
    height: auto !important;
    padding: 0.9rem 1rem !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .card-toggle > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .expand-icon {
    flex: 0 0 auto !important;
    margin-left: 0.75rem !important;
  }

  .card-content {
    padding: 0 1rem 1rem 1rem !important;
    overflow-x: hidden !important;
  }

  /* ---------- jobs / logos ---------- */
  .job-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.9rem !important;
  }

  .job-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .job-logo img,
  .logo-img {
    width: 84px !important;
    max-width: 84px !important;
    height: auto !important;
  }

  .job-details * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .project-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* ---------- tables ---------- */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================
   EXPERIENCE LOGOS — OPTICAL WEIGHT NORMALIZATION
   SAFE BOX METHOD / NO DISAPPEARING LOGOS
   ========================= */

/* Give every experience logo the same visual box */
.timeline-content .job-logo {
  width: 180px;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Base image behavior for all experience logos */
.timeline-content .job-logo img,
.timeline-content .job-logo img.logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  transform: none !important;
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 1;
  visibility: visible;
}

/* ==========================================
   DESKTOP HEADER FIX
   keep text to the right of circular image
   and do not let mobile styling affect desktop layout
   ========================================== */

@media (min-width: 821px) {
  .identity-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3rem !important;
    text-align: left !important;
  }

  .identity-row > div:first-child {
    flex: 0 0 auto !important;
    align-items: center !important;
  }

  .identity-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .identity-info h1,
  .identity-info h3,
  .identity-info .sub-name,
  .identity-info .bio,
  .identity-info p {
    text-align: left !important;
  }

  .brand-badge-row {
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* ==========================================
   DESKTOP FIX — UPWORK PROJECT CARD VISIBLE
   mirrors the mobile visibility protection
   ========================================== */

@media (min-width: 901px) {
  .job-projects,
  .job-projects .project-list,
  .job-projects .project-list li,
  .job-projects .project-list li a,
  .job-projects .project-url {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .job-projects .project-list {
    display: grid !important;
    gap: 0.85rem !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 1rem !important;
  }

  .job-projects .project-list li {
    overflow: visible !important;
    max-height: none !important;
  }

  .job-projects .project-list li a {
    width: 100% !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    color: var(--link-primary) !important;
    text-decoration: none !important;
    padding: 1rem 1.25rem !important;
    box-sizing: border-box !important;
  }

  .job-projects .project-list li a:hover,
  .job-projects .project-list li a:focus {
    background: rgba(255,255,255,0.08) !important;
    color: var(--link-hover) !important;
    text-shadow: 0 0 18px rgba(240,239,244,0.75) !important;
  }

  .job-projects .project-url {
    display: block !important;
    color: var(--text-light) !important;
    opacity: 0.82 !important;
    margin-top: 0.35rem !important;
  }
}



/* ==========================================
   DESKTOP FIX — UPWORK PROJECT CARD DISPLAY
   ========================================== */

@media (min-width: 901px) {
  .job-projects {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .job-projects .projects-heading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .job-projects .project-list {
    display: grid !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 1rem !important;
    gap: 0.85rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .job-projects .project-list li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .job-projects .project-list li a {
    display: block !important;
    padding: 1rem 1.25rem !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .job-projects .project-url {
    display: block !important;
    margin-top: 0.35rem !important;
    opacity: 0.82 !important;
    visibility: visible !important;
  }
}

/* ==========================================
   PREVENT LOGO LAYOUT SHIFT (CLS FIX)
   ========================================== */

.logo-img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  display: block !important;
}

.job-logo {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
}

/* ==========================================
   PREVENT ALT TEXT / TEXT FLASH BEFORE IMAGE LOAD
   ========================================== */

.logo-img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  display: block !important;

  opacity: 0;
  transition: opacity 0.2s ease;
}

.logo-img.loaded {
  opacity: 1;
}

/* fallback: never show alt text visually */
.job-logo {
  overflow: hidden !important;
}
/* ==========================================
   VOLUNTEER CARD TOP GAP FIX
   remove empty space above volunteer text
   ========================================== */

.volunteer-section .volunteer-card > div[style*="flex-grow:1"] > .job-logo {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

.volunteer-section .volunteer-card > div[style*="flex-grow:1"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.volunteer-section .volunteer-card p {
  margin-top: 0 !important;
}

.volunteer-section .volunteer-card .volunteer-text,
.volunteer-section .volunteer-card .org-name,
.volunteer-section .volunteer-card .volunteer-date,
.volunteer-section .volunteer-card .focus-tag {
  margin-top: 0 !important;
}