:root {
   --es-red: #aa151b;
   --es-red-dark: #8a1015;
   --es-gold: #f1bf00;
   --es-gold-dark: #d9aa00;
   --es-gold-soft: #fff6d6;
   --ink: #2b1d1d;
   --muted: #6a5750;

   --bs-body-color: var(--ink);
   --bs-secondary-color: var(--muted);
   --bs-warning-rgb: 241, 191, 0;
   --bs-link-color-rgb: 170, 21, 27;
   --bs-link-hover-color-rgb: 138, 16, 21;
}

body {
   color: var(--ink);
}

main section {
   scroll-margin-top: 90px; 
}



.navbar.bg-dark {
   background-color: var(--es-red-dark) !important;
   border-bottom: 4px solid var(--es-gold);
}

.navbar.navbar-dark {
   --bs-navbar-brand-color: var(--es-gold);
   --bs-navbar-brand-hover-color: #fff;
   --bs-navbar-color: rgba(255, 255, 255, 0.85);
   --bs-navbar-hover-color: var(--es-gold);
}

footer.bg-dark {
   background-color: var(--es-red-dark) !important;
   border-top: 4px solid var(--es-gold);
}

footer .text-secondary {
   color: rgba(255, 255, 255, 0.75) !important;
}

.footer-links a {
   color: #fff;
   text-decoration: none;
   opacity: 0.85;
   transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-links a:hover {
   color: var(--es-gold);
   opacity: 1;
   text-decoration: underline;
}


.bg-surface,
.section-alt {
   background-color: var(--es-gold-soft);
}

header.bg-surface {
   background-image: linear-gradient(
      to bottom,
      transparent calc(100% - 12px),
      var(--es-red) calc(100% - 12px),
      var(--es-red) calc(100% - 9px),
      var(--es-gold) calc(100% - 9px),
      var(--es-gold) calc(100% - 3px),
      var(--es-red) calc(100% - 3px)
   );
   padding-bottom: 3.5rem !important;
}

header h1 {
   color: var(--es-red);
}

.section-title {
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: var(--es-red);
}

.section-title::after {
   content: "";
   display: block;
   width: 56px;
   height: 4px;
   margin-top: 0.5rem;
   background-color: var(--es-gold);
   border-radius: 2px;
}


.btn-primary {
   --bs-btn-bg: var(--es-red);
   --bs-btn-border-color: var(--es-red);
   --bs-btn-hover-bg: var(--es-red-dark);
   --bs-btn-hover-border-color: var(--es-red-dark);
   --bs-btn-active-bg: var(--es-red-dark);
   --bs-btn-active-border-color: var(--es-red-dark);
   --bs-btn-disabled-bg: var(--es-red);
   --bs-btn-disabled-border-color: var(--es-red);
   --bs-btn-focus-shadow-rgb: 170, 21, 27;
}

.btn-outline-primary,
.btn-outline-secondary {
   --bs-btn-color: var(--es-red);
   --bs-btn-border-color: var(--es-red);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--es-red);
   --bs-btn-hover-border-color: var(--es-red);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--es-red-dark);
   --bs-btn-active-border-color: var(--es-red-dark);
   --bs-btn-focus-shadow-rgb: 170, 21, 27;
}

.btn-success {
   --bs-btn-color: var(--ink);
   --bs-btn-bg: var(--es-gold);
   --bs-btn-border-color: var(--es-gold);
   --bs-btn-hover-color: var(--ink);
   --bs-btn-hover-bg: var(--es-gold-dark);
   --bs-btn-hover-border-color: var(--es-gold-dark);
   --bs-btn-active-color: var(--ink);
   --bs-btn-active-bg: var(--es-gold-dark);
   --bs-btn-active-border-color: var(--es-gold-dark);
   --bs-btn-focus-shadow-rgb: 241, 191, 0;
}


.card {
   border: 0;
   border-top: 4px solid var(--es-gold);
}

.card-title {
   color: var(--es-red);
}

.list-group-item {
   border-left: 4px solid var(--es-red);
}

.hover-lift {
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
   transform: translateY(-4px);
   box-shadow: 0 0.75rem 1.5rem rgba(170, 21, 27, 0.22) !important;
}


.profile-img {
   width: 100%;
   max-width: 320px;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: 50%;
   border: 6px solid var(--es-gold);
   box-shadow: 0 0.5rem 1.5rem rgba(170, 21, 27, 0.25);
}

.work-img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   border-radius: 0.375rem 0.375rem 0 0;
}

.photo-card img {
   aspect-ratio: 4 / 3;
   object-fit: cover;
   width: 100%;
}

.resume-img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: 0.5rem;
   border: 4px solid var(--es-gold);
   box-shadow: 0 0.5rem 1.25rem rgba(170, 21, 27, 0.18);
}


.resume-list {
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
}

.resume-list li {
   padding: 0.75rem 0;
   border-bottom: 1px solid rgba(170, 21, 27, 0.18);
}

.resume-list li:last-child {
   border-bottom: 0;
}

.resume-list .dates {
   color: var(--muted);
   font-size: 0.9rem;
}


.code-block {
   background-color: #2b1d1d;
   color: #f7ecd3;
   border-left: 4px solid var(--es-gold);
   border-radius: 0.5rem;
   padding: 1rem 1.25rem;
   overflow-x: auto;
   font-size: 0.875rem;
}


.form-control:focus,
.form-select:focus {
   border-color: var(--es-red);
   box-shadow: 0 0 0 0.25rem rgba(170, 21, 27, 0.2);
}

.form-check-input:checked {
   background-color: var(--es-red);
   border-color: var(--es-red);
}

.form-check-input:focus {
   border-color: var(--es-red);
   box-shadow: 0 0 0 0.25rem rgba(170, 21, 27, 0.2);
}


.fade-in {
   animation: fadeInUp 0.7s ease-out both;
}

@keyframes fadeInUp {
   from { opacity: 0; transform: translateY(16px); }
   to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
   .fade-in { animation: none; }
   .hover-lift, .hover-lift:hover { transition: none; transform: none; }
}