/* ==========================================================
   Magnitude71 — custom theme override
   Loads after skin-black.min.css; no HTML structure changes
   ========================================================== */

:root {
  --bg:          #f8f7f4;
  --surface:     #ffffff;
  --border:      #e5e2dd;
  --text:        #1a1a1a;
  --muted:       #6b6b6b;
  --accent:      #c2672a;
  --accent-dark: #a3521e;
  --header-bg:   #1c1c1c;
  --header-fg:   #f0ede8;
  --ui:   'Inter', system-ui, -apple-system, sans-serif;
  --prose: 'Lora', Georgia, serif;
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
body {
  background: var(--bg);
  font-family: var(--prose);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */
#headerwrap {
  background: var(--header-bg);
  border-bottom: 2px solid var(--accent);
  box-shadow: none;
}

#header { color: var(--header-fg); }

/* Site title — replace Damion with Inter */
#site-logo a,
#site-logo a span {
  font-family: var(--ui);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--header-fg);
  text-transform: none;
}

#site-logo a:hover { color: var(--accent); }

/* Tagline */
.site-description,
.site-description span {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: #918d88;
  font-style: normal;
}

/* Nav */
#main-nav a {
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a09c97;
}

#main-nav a:hover,
#main-nav .current_page_item > a,
#main-nav .current-menu-item > a {
  color: var(--accent) !important;
  background: transparent !important;
}

/* RSS / social strip */
.social-widget a,
#social-wrap a {
  font-family: var(--ui);
  font-size: 0.75rem;
  color: #918d88;
}
.social-widget a:hover,
#social-wrap a:hover { color: var(--accent); }

/* Search input */
#searchform input[type="text"] {
  font-family: var(--ui);
  background: #282828;
  border: 1px solid #3a3a3a;
  color: var(--header-fg);
  border-radius: 3px;
  font-size: 0.78rem;
}

/* ----------------------------------------------------------
   Body / layout wrappers
   ---------------------------------------------------------- */
#body,
#layout { background: transparent; }

/* ----------------------------------------------------------
   Index grid — replace isotope masonry / float fallback
   Theme sets .grid4 .post { width: 18.5%; float: left }
   which gives ~5 columns when masonry JS doesn't run.
   Override everything with a plain CSS grid.
   ---------------------------------------------------------- */
#loops-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
  position: static !important;
  height: auto !important;
  overflow: visible !important;
}

/* Override float/width/isotope inline-style positioning */
#loops-wrapper > .post {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* isotope injects a zero-size sizer element; hide it */
.grid-sizer { display: none !important; }

/* ----------------------------------------------------------
   Index post cards
   ---------------------------------------------------------- */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.post:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}

/* Thumbnail — smooth zoom on hover */
.post-image a { display: block; overflow: hidden; }
.post-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}
.post-image a:hover img { transform: scale(1.04); }

/* Card text area */
.post-content { padding: 1rem 1.1rem 1.15rem; }

/* Category / tag labels */
p.post-meta.entry-meta {
  font-family: var(--ui);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.post-category a,
.post-tag a { color: var(--accent); }
.post-category a:hover,
.post-tag a:hover { color: var(--accent-dark); }

/* Post title on index */
h2.post-title,
h2.entry-title {
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0.2rem 0 0.4rem;
  letter-spacing: -0.01em;
}

h2.post-title a,
h2.entry-title a { color: var(--text); }
h2.post-title a:hover,
h2.entry-title a:hover { color: var(--accent); }

/* Author + date */
span.post-author,
span.post-author a,
time.post-date {
  font-family: var(--ui);
  font-size: 0.72rem;
  color: var(--muted);
}
span.post-author a:hover { color: var(--accent); }

/* Empty author-pic paragraph adds unwanted gap */
p.author-pic:empty { display: none; }

/* Index excerpt */
#loops-wrapper .entry-content p {
  font-size: 0.875rem;
  color: #3c3c3c;
  line-height: 1.65;
  margin-top: 0.45rem;
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   Single post
   ---------------------------------------------------------- */
h1.post-title,
h1.entry-title {
  font-family: var(--ui);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

h1.post-title a,
h1.entry-title a { color: var(--text); }

/* Post body prose */
.list-post .entry-content {
  font-family: var(--prose);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #1e1e1e;
}

.list-post .entry-content p { margin-bottom: 1.35em; }

.list-post .entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(194, 103, 42, 0.38);
  text-underline-offset: 2px;
}

.list-post .entry-content a:hover {
  color: var(--accent-dark);
  text-decoration-color: var(--accent-dark);
}

.list-post .entry-content h1,
.list-post .entry-content h2,
.list-post .entry-content h3,
.list-post .entry-content h4,
.list-post .entry-content h5 {
  font-family: var(--ui);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.5em;
  letter-spacing: -0.015em;
}

.list-post .entry-content blockquote {
  border-left: 3px solid var(--accent);
  margin-left: 0;
  padding: 0.1em 0 0.1em 1.5em;
  color: #4a4a4a;
  font-style: italic;
}

.list-post .entry-content code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.875em;
  background: #ede9e3;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

.list-post .entry-content pre {
  background: #ede9e3;
  padding: 1.25em 1.5em;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.6;
}

.list-post .entry-content pre code { background: none; padding: 0; }

.list-post .entry-content ul,
.list-post .entry-content ol { padding-left: 1.6em; }
.list-post .entry-content li { margin-bottom: 0.4em; }

/* Prev / next post navigation */
.post-nav {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--ui);
  font-size: 0.82rem;
}

.post-nav a { color: var(--muted); font-weight: 500; }
.post-nav a:hover { color: var(--accent); }

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
#footerwrap {
  background: var(--header-bg);
  border-top: 1px solid #2d2d2d;
  margin-top: 3rem;
}

#footer {
  color: #7a7672;
  font-family: var(--ui);
  font-size: 0.78rem;
  padding: 1.5rem 0;
}

#footer a { color: #918d88; }
#footer a:hover { color: var(--accent); }

.back-top a { color: #7a7672; }
.back-top a:hover { color: var(--accent); }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }

  h1.post-title,
  h1.entry-title { font-size: 1.5rem; }

  .post-content { padding: 0.85rem 0.9rem 0.9rem; }
}