:root{
  /* Palette inspired by SheCodes palettes */
  --brand: #2F80ED; /* deep sky blue */
  --accent: #56CCF2; /* light cyan */
  --accent-2: #FFB86B; /* warm orange */
  --muted: #F4F7FB; /* page background */
  --text: #12263F; /* main text */
}

body{
  background:var(--muted);
  color:var(--text);
  font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.resume{border-radius:6px; overflow:hidden}

.left-panel{
  background:linear-gradient(180deg,var(--brand),var(--accent));
  color:white;
}

.right-panel{background:white}

.photo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,0.16)}
.photo-logo{
  background-image: url('assets/jumpman.svg');
  background-repeat: no-repeat;
  background-position: center center;
  /* tune background-size to make the logo fill the circular area nicely */
  background-size: 72% auto;
  display:inline-block;
}

/* When the SVG is missing or you prefer the placeholder, use this modifier */
.photo-logo--placeholder{background-image: url('assets/jumpman-placeholder.svg'); background-size: 60% auto}
.name{font-weight:700;margin-bottom:0}
.role{opacity:0.95}
.section-title{font-weight:600;color:var(--brand);margin-bottom:8px}
.left-panel .section-title{color:rgba(255,255,255,0.95)}
.left-panel p, .left-panel .badge{color:rgba(255,255,255,0.95)}
.badge{border-radius:6px;padding:0.45rem 0.6rem}
.item h6{font-weight:600}
hr{border-top:1px solid rgba(255,255,255,0.12)}

@media (max-width:767px){
  .left-panel{order:2}
  .right-panel{order:1}
  .photo{width:88px;height:88px}
}

/* Print rules */
@media print{
  body{background:white}
  .container{max-width:100%;padding:0}
  .d-print-none{display:none !important}
  .resume{box-shadow:none;border-radius:0}
  .left-panel{background:var(--brand) !important}
}