/*
  Dark Theme — subrato29.github.io
  Comprehensive override of the Editorial (HTML5UP) light theme.
  Palette: GitHub-dark base, original red accent (#f56a6a) kept for brand continuity.
*/

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  --bg:           #0d1117;   /* page background             */
  --surface:      #161b22;   /* sidebar, raised surfaces    */
  --surface2:     #21262d;   /* table header, hover states  */
  --border:       #30363d;   /* replaces rgba(210,215,217)  */
  --text:         #c9d1d9;   /* body copy                   */
  --text-muted:   #8b949e;   /* secondary / footer text     */
  --heading:      #f0f6fc;   /* h1–h6                       */
  --strong:       #e6edf3;   /* bold / strong               */
  --accent:       #f56a6a;   /* original brand red          */
  --accent-hover: #f87171;   /* hovered links               */
  --link:         #79c0ff;   /* in-text hyperlinks (blue)   */
  --link-hover:   #a5d6ff;
}

/* ── Reset white body ─────────────────────────────────────────────────────── */
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
#wrapper {
  background: transparent !important;
}

/* ── Main content area ────────────────────────────────────────────────────── */
#main {
  background: var(--bg) !important;
}

/* section separators (border-top: solid 2px rgba(210,215,217,0.75)) */
#main > .inner > section {
  border-top-color: var(--border) !important;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar {
  background-color: var(--surface) !important;
  box-shadow: 0 0 3em 0 rgba(0, 0, 0, 0.6) !important;
}

/* section dividers inside sidebar */
#sidebar > .inner > * {
  border-bottom-color: var(--border) !important;
}

/* alt section (search bar area) */
#sidebar > .inner > .alt {
  background-color: var(--surface2) !important;
}

/* sidebar toggle */
#sidebar .toggle::after {
  background: var(--surface2) !important;
}
#sidebar .toggle::before {
  color: var(--text-muted) !important;
}

/* ── Header bar ───────────────────────────────────────────────────────────── */
#header {
  background: var(--bg) !important;
  border-bottom-color: var(--accent) !important;   /* keep the red stripe */
}

#header .logo,
#header .logo strong {
  color: var(--heading) !important;
  border-bottom: 0 !important;
}

/* social icons in header */
#header ul.icons a.icon,
#header ul.icons a.icon:visited {
  color: var(--text-muted) !important;
  border-bottom: none !important;
}
#header ul.icons a.icon:hover {
  color: var(--accent-hover) !important;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading) !important;
}

strong, b {
  color: var(--strong) !important;
}

body,
input,
select,
textarea {
  color: var(--text) !important;
}

p, li, td, th, label, span {
  color: var(--text) !important;
}

label {
  color: var(--heading) !important;
}

/* Override every hardcoded inline style="color:black" */
[style*="color: black"],
[style*="color:black"] {
  color: var(--text) !important;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a {
  color: var(--link) !important;
}
a:hover {
  color: var(--link-hover) !important;
  border-bottom-color: var(--link-hover) !important;
}

/* nav/menu links inherit text color instead of link blue */
nav#menu ul a,
nav#menu ul span {
  color: var(--text) !important;
  border-bottom: 0 !important;
}
nav#menu ul a:hover,
nav#menu ul span:hover {
  color: var(--accent-hover) !important;
}

/* ── Section / header underlines ─────────────────────────────────────────── */
/* header.major bottom underline — keep original red */
header.major > :last-child {
  border-bottom-color: var(--accent) !important;
}

header p {
  color: var(--text-muted) !important;
}

/* ── Navigation menu ─────────────────────────────────────────────────────── */
nav#menu header.major h2 {
  color: var(--heading) !important;
}

/* list item top borders */
nav#menu > ul > li,
#menu > ul > li {
  border-top-color: var(--border) !important;
}

#menu ul {
  color: var(--text) !important;
}

#menu ul a.opener::before,
#menu ul span.opener::before {
  color: var(--text-muted) !important;
}

/* ── Dividers ─────────────────────────────────────────────────────────────── */
hr,
hr.major {
  border-bottom-color: var(--border) !important;
}

blockquote {
  border-left-color: var(--accent) !important;
  color: var(--text-muted) !important;
}

/* ── Tables (generic) ─────────────────────────────────────────────────────── */
table {
  color: var(--text) !important;
}

table th {
  color: var(--heading) !important;
}

table tbody tr {
  border-color: var(--border) !important;
  background-color: transparent !important;
}

table tbody tr:nth-child(2n+1) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

table tbody tr:hover {
  background-color: var(--surface2) !important;
}

table thead {
  border-bottom-color: var(--border) !important;
}

table tfoot {
  border-top-color: var(--border) !important;
}

/* ── Tables (.alt variant used on site) ──────────────────────────────────── */
/* override inline style="background-color:white" on <table> */
[style*="background-color: white"],
[style*="background-color:white"] {
  background-color: transparent !important;
}

table.alt {
  background-color: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  overflow: hidden;
}

table.alt tbody tr {
  background-color: var(--bg) !important;
  border-top: none !important;
}

table.alt tbody tr:nth-child(2n-1) {
  background-color: var(--surface) !important;
}

table.alt tbody tr:hover {
  background-color: var(--surface2) !important;
  transition: background-color 0.15s ease;
}

table.alt tbody tr td {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Override the "gainsboro" header row — full selector chain to beat :nth-child specificity */
table.alt tbody tr[style*="background-color: gainsboro"],
table.alt tbody tr[style*="background-color:gainsboro"] {
  background-color: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}

table.alt tbody tr[style*="background-color: gainsboro"] td,
table.alt tbody tr[style*="background-color:gainsboro"] td {
  color: var(--heading) !important;
  border-color: #334155 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* The theme uses box-shadow inset to create a border effect */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  box-shadow: inset 0 0 0 2px var(--accent) !important;
  color: var(--accent) !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  background-color: rgba(245, 106, 106, 0.1) !important;
  box-shadow: inset 0 0 0 2px var(--accent-hover) !important;
  color: var(--accent-hover) !important;
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: var(--accent) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

input[type="submit"].primary:hover,
.button.primary:hover {
  background-color: var(--accent-hover) !important;
}

/* ── Form inputs ──────────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

select option {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ── Banner / hero ────────────────────────────────────────────────────────── */
#banner {
  background: transparent !important;
}

#banner .content header h1 {
  color: var(--heading) !important;
}

#banner .content p {
  color: var(--text) !important;
}

/* profile photo: subtle frame */
#banner .image.object img,
span.image.object img {
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--border),
              0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Contact list ─────────────────────────────────────────────────────────── */
ul.contact li {
  border-top-color: var(--border) !important;
  color: var(--text) !important;
}

ul.contact li::before {
  color: var(--accent) !important;
}

/* ── Alt list ─────────────────────────────────────────────────────────────── */
ul.alt li {
  border-top-color: var(--border) !important;
}

/* ── Mini posts ───────────────────────────────────────────────────────────── */
.mini-posts article {
  border-top-color: var(--border) !important;
}

/* ── Code ─────────────────────────────────────────────────────────────────── */
code {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: #f78166 !important;
}

pre code {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
#footer p.copyright,
#footer .copyright {
  color: var(--text-muted) !important;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
ul.pagination li > .page {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

ul.pagination li > .page.active {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}

/* ── Theme toggle button (works in both light + dark) ─────────────────────── */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.4em;
  vertical-align: middle;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
#theme-toggle:hover {
  color: var(--accent-hover);
}