/*
 Author : Nick Rance

 - Credits
 - 	Main CSS from Gumby framework
 - 	Some CSS from Twitter Bootstrap - http://twitter.github.io/bootstrap/

*/

:root {
  /* Smashing Magazine Color Scheme - Black and Red */
  --bg-color: #F5F4EF;
  --text-color: #000305;
  --link-color: #C74350;
  --link-focus-color: #a03540;
  --border-color: #d0cfc7;
  --border-color-light: #ccc;
  --footer-bg: #e8e7e0;
  --footer-border: #C74350;
  --inline-code-color: #C74350;
  --inline-code-bg: #faf9f4;
  --inline-code-border: #e1e1e8;
  --pre-bg: #faf9f4;
  --pre-border: #d0cfc7;
  --table-bg: #F5F4EF;
  --table-stripe-bg: #faf9f4;
  --table-hover-bg: #eae9e4;
  --nav-active-bg: #C74350;
  --nav-active-text: #F5F4EF;
  --post-list-border: #d0cfc7;
  --sidebar-tag-bg: #C74350;
  --sidebar-tag-color: #F5F4EF;
  --button-text-hover-focus: #F5F4EF;
  --label-hover-focus-color: #F5F4EF;
  --hll-bg: #eae9e4;
  --body-bg: #F5F4EF;
  --button-default-bg: #868d92;
  --button-default-text: #ffffff;
}

[data-theme="dark"] {
  /* Smashing Magazine Dark Theme - Black and Red */
  --bg-color: #1a1a1a;
  --text-color: #e8e7e0;
  --link-color: #e85d6a;
  --link-focus-color: #ff8090;
  --border-color: #333333;
  --border-color-light: #404040;
  --footer-bg: #0f0f0f;
  --footer-border: #e85d6a;
  --inline-code-color: #e85d6a;
  --inline-code-bg: #242424;
  --inline-code-border: #333333;
  --pre-bg: #1a1a1a;
  --pre-border: #333333;
  --table-bg: #1a1a1a;
  --table-stripe-bg: #242424;
  --table-hover-bg: #2a2a2a;
  --nav-active-bg: #C74350;
  --nav-active-text: #F5F4EF;
  --post-list-border: #333333;
  --sidebar-tag-bg: #C74350;
  --sidebar-tag-color: #F5F4EF;
  --button-text-hover-focus: #F5F4EF;
  --label-hover-focus-color: #F5F4EF;
  --hll-bg: #242424;
  --body-bg: #0f0f0f;
  --button-default-bg: #5a5f64;
  --button-default-text: #e8e7e0;
}

body {
  background-color: var(--body-bg);
  color: var(--text-color);
  /* Assuming Gumby sets a base font-family, size, etc. */
}

/* Code Highlighting */
code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--text-color);
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

code {
  padding: 2px 4px;
  color: var(--inline-code-color);
  white-space: nowrap;
  background-color: var(--inline-code-bg);
  border: 1px solid var(--inline-code-border);
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: var(--pre-bg);
  border: 1px solid var(--pre-border);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

pre.prettyprint {
  margin-bottom: 20px;
}

pre code {
  padding: 0;
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

/* Pygments Highlight Line Background */
.hll {
  background-color: var(--hll-bg);
}

/* Table
--------------------------------------------------------- */

table {
  max-width: 100%;
  background-color: var(--table-bg);
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border-color);
}

.table th {
  font-weight: bold;
}

.table thead th {
  vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid var(--border-color);
}

.table .table {
  background-color: var(--table-bg);
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid var(--border-color);
  border-collapse: separate;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: var(--table-stripe-bg);
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: var(--table-hover-bg);
}

table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
  display: table-cell;
  float: none;
  margin-left: 0;
}

/* Navigation
--------------------------------------------------------- */
#banner strong {display:block;}
#banner h1 { font-size:3.25rem }

/* Make navigation a flex container */
#navigation {
  display: flex;
  align-items: center; /* Vertically align items */
  justify-content: space-between; /* Add space between items */
}

#navigation ul.columns {
  /* Ensure ul doesn't force button to wrap if space is tight */
  flex-shrink: 1; /* Allow shrinking */
  flex-grow: 1;   /* Allow growing */
  margin-bottom: 0; /* Override potential default margin */
  /* Remove float if Gumby applies it */
  float: none !important; 
}

/* Ensure the toggle button itself doesn't shrink */
#theme-toggle {
    flex-shrink: 0;
}

.no-touch .navbar ul li.active > a {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

/* Navigation hover styles - red background with light text */
.navbar ul li a:hover,
.navbar ul li a:focus {
  background: var(--nav-active-bg) !important;
  color: var(--nav-active-text) !important;
}

/* Touch devices - active state */
.touch .navbar ul li.active > a {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}
/* Posts
--------------------------------------------------------- */

#post-list { margin-left:0; }
#post-list > li {list-style:none;  border-bottom: 2px solid var(--post-list-border);  margin-bottom: 20px;  padding-bottom: 15px;}

.tag-row {margin-top:20px;}

address { font-size:14px; margin-bottom:10px;}

/* Typography
--------------------------------------------------------- */

/* Reduce h1 size for content - override Gumby's large default */
h1 {
    font-size: 2.25rem;  /* 36px - down from 4.25rem (68px) */
}

h2 {
    font-size: 1.875rem;  /* 30px - down from 2.625rem (42px) */
}

/* Keep heading links the same color as text, not red - always bold, no hover effect */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
}

/* Dark Mode Heading Override for Contrast */
[data-theme="dark"] h1 a,
[data-theme="dark"] h2 a,
[data-theme="dark"] h3 a,
[data-theme="dark"] h4 a,
[data-theme="dark"] h5 a,
[data-theme="dark"] h6 a {
  color: var(--text-color);
}

/* Dark Mode Heading Color Override */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-color); /* Ensure sufficient contrast for non-link headings */
}

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

/* Button styles to match navigation - gray by default, red on hover */
.btn,
.btn.primary {
    background-color: var(--button-default-bg) !important;
    border-color: var(--button-default-bg) !important;
}

.btn a,
.btn.primary a {
    color: var(--button-default-text) !important;
    text-decoration: none;
}

.btn:hover,
.btn.primary:hover {
    background-color: var(--nav-active-bg) !important;
    border-color: var(--nav-active-bg) !important;
}

.btn a:hover,
.btn a:focus,
.btn.primary a:hover,
.btn.primary a:focus {
    color: var(--nav-active-text) !important;
}

.label:hover,
.label:focus {
    /* color:#eee; */
    color: var(--label-hover-focus-color);
}

/* Footer
--------------------------------------------------------- */
.bg {
  background: var(--footer-bg);
  margin-top:35px;
  padding-top:25px;
  border-top:5px solid var(--footer-border);
}

/* Responsive fixes
--------------------------------------------------------- */
@media only screen and (max-width: 600px) { /* Assuming 600px is the mobile breakpoint, adjust if needed */
  #banner h1 a {font-size:22px!important; line-height:24px;}

  /* Adjust navigation order for mobile */
  #navigation {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  #navigation a.toggle { /* Hamburger */
    /* order: 0; */
    order: -1; /* Hamburger first */
    margin-left: 0;
    margin-right: 10px; /* Add some space to its right */
    float: none !important;
    position: static !important;
    flex-shrink: 0; /* Prevent shrinking */
  }

  #navigation ul.columns { /* Nav list */
    /* order: 1; */
    order: 0; /* Nav list middle (hidden) */
    flex-grow: 1; /* Allow list to take up space if needed */
  }

  #theme-toggle { /* Theme Toggle */
    /* order: -1; */
    order: 1; /* Theme toggle last */
    /* margin-right: auto; */
    margin-left: auto; /* Push theme toggle to the right */
    margin-right: 0;
    flex-shrink: 0; /* Prevent shrinking */
  }
}

/* Fixes about recent comments, added by Yan
--------------------------------------------------------- */
.dsq-widget-item { font-size: 85%; margin: 5px 0 0 0!important; line-height: 0; }
.dsq-widget-item p { font-size: 100%; }
.dsq-widget-meta p { margin: 3% 0 0 0; }
img.dsq-widget-avatar {
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    border-radius: 0.3em;
    -webkit-box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
    -moz-box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
    box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: var(--bg-color) 0.3em solid;
    padding: 5px 3px 3px 3px!important;
    margin-right: 5px!important;
    margin-bottom: 5px!important;
}

/* fixes about the sidebar, added by Yan
--------------------------------------------------------- */
.sidebar-h4 {
    margin-top: 30px;
}
.sidebar-tags a {
    background-color: var(--sidebar-tag-bg);
    height: 20px;
    display: inline-block;
    font-family: Helvetica, arial, verdana, sans-serif;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    color: var(--sidebar-tag-color);
    padding: 0 10px;
    font-size: 12px;
    font-size: 0.75rem;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}

/* Add borders to markdown tables */
.entry-content table,
.entry-content th,
.entry-content td {
    border: 1px solid var(--border-color);
}

.entry-content table {
    border-collapse: collapse; /* Merge borders */
    margin-bottom: 1em; /* Space below table */
    width: 100%; /* Make table full width */
}

.entry-content th, 
.entry-content td {
    padding: 0.5em; /* Cell padding */
    text-align: left !important; /* Ensure left alignment, overriding inline styles */
}