/* =============================================================================
   Hugo Resume — site-level overrides
   Two states only: light (:root) and dark (html[data-theme="dark"])
   ========================================================================== */

/* ---------- Light palette ---------- */
:root{
  --primary:        #ff0000;   /* nav bar, primary accents */
  --primary-hover:  #aa0000;   /* hover state for links in light mode */
  --on-primary:     #000000;   /* text/icons shown on the primary background */
  --on-primary-2:   rgba(255,255,255,0.85);

  --bg:             #ffffff;   /* page background */
  --text:           #000000;   /* body text */
  --muted:          #4b5563;   /* secondary text */
  --border:         #e5e7eb;   /* section divider lines, borders */

  --link:           var(--primary);
  --link-hover:     var(--primary-hover);
}

/* ---------- Dark palette (forced by toggle) ---------- */
html[data-theme="dark"]{
  --primary:        #9c0005;   /* your dark red */
  --primary-hover:  #9c0005;
  --on-primary:     #CBD5E1;
  --on-primary-2:   rgba(11,18,32,0.85);

  --bg:             #0b1220;
  --text:           #cbd5e1;
  --muted:          #94a3b8;
  --border:         #334155;

  --link:           var(--primary);
  --link-hover:     var(--primary-hover);
}

/* Optional: if you ever set data-theme="light", it just uses :root values */
html[data-theme="light"]{}

/* =============================================================================
   Global color application
   These rules beat the theme’s resume.css by targeting exact classes
   and using !important only where needed.
   ========================================================================== */

/* Page background and base text */
body{
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Section borders and default text tone inside sections */
section.resume-section{
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
section.resume-section .subheading,
section.resume-section .lead,
section.resume-section p{
  color: var(--text) !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6{ color: var(--text) !important; }
.text-primary{ color: var(--primary) !important; }

/* Links */
a{
  color: var(--link) !important;
  text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent) !important;
}
a:hover, a:focus{
  color: var(--link-hover) !important;
  text-decoration-color: var(--link-hover) !important;
}

/* Buttons */
.btn-primary{
  color: var(--on-primary) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover, .btn-primary:focus{
  color: var(--on-primary) !important;
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-outline-primary{
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  color: var(--on-primary) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* =============================================================================
   Sidebar nav
   ========================================================================== */

#sideNav.navbar{
  background-color: var(--primary) !important; /* nav bar background */
}
#sideNav .navbar-brand,
#sideNav .navbar-nav .nav-link,
#sideNav .navbar-toggler{
  color: var(--on-primary) !important;          /* nav text + toggler */
}
#sideNav .navbar-nav .nav-link:hover,
#sideNav .navbar-nav .nav-link:focus{
  color: var(--on-primary-2) !important;
}
#sideNav .navbar-toggler{ border-color: var(--on-primary-2) !important; }
#sideNav .navbar-nav .nav-link.active,
#sideNav .navbar-nav .nav-link:focus{
  color: var(--on-primary) !important;
}

/* Profile image border */
#sideNav .img-profile{
  border: 3px solid color-mix(in oklab, var(--on-primary) 20%, transparent);
}

/* =============================================================================
   Icons and misc
   ========================================================================== */

.list-social-icons a{ color: var(--primary) !important; }
.list-social-icons a:hover{ color: var(--on-primary-2) !important; }

.list-icons .list-inline-item i:hover{ color: var(--primary) !important; }

.bg-primary{ background-color: var(--primary) !important; }
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover, button.bg-primary:focus{
  background-color: var(--primary-hover) !important;
}

.border-primary{ border-color: var(--primary) !important; }

.badge-primary{
  color: var(--on-primary) !important;
  background-color: var(--primary) !important;
}

hr{ border-top: 1px solid var(--border) !important; }

pre, code, blockquote{
  background: color-mix(in oklab, var(--border) 40%, var(--bg)) !important;
  color: var(--text) !important;
}


/* Avatar size override — place at the END of resume-override.css */
:root{
  --avatar-size: 220px;  /* <- change this to whatever you want */
}

/* The theme limits .img-profile with max-width; kill that and set explicit size */
#sideNav .navbar-brand .img-profile,
#sideNav .img-profile {
  width: var(--avatar-size) !important;
  height: var(--avatar-size) !important;
  max-width: none !important;   /* theme/Bootstrap sets max-width; override it */
  max-height: none !important;
  object-fit: cover;            /* keeps circle crop clean */
  display: block;               /* ensure margins center correctly */
}