/* scifimind.com — handcrafted minimal stylesheet
   Replaces dynamik-min.css. ~6 KB. Preserves the visual character:
   white 80px Lato site title over the nasa-89127 photo, dark burgundy
   page background (#6B2911), deep-red entry-content links (#6D1200),
   royal-blue sidebar links (#0B0080), two-column 1100px layout.
   See plans/19-theme-replacement.md for the design brief. */

:root {
  --color-text:        #222;
  --color-text-muted:  #555;
  --color-brand:       #80270C;      /* warm dark red */
  --color-content-link:#6D1200;      /* used in entry-content (distinctive deeper red) */
  --color-sidebar-link:#0B0080;      /* royal blue — distinctive in the sidebar */
  --color-link-hover:  #000;
  --color-bg:          #FFFFFF;
  --color-bg-deep:     #6B2911;      /* page background (visible outside .site-inner) */
  --color-bg-panel:    #FAFAFA;
  --color-bg-shaded:   #F5F5F5;
  --color-rule:        #DDDDDD;
  --color-border:      #AF4416;      /* the burnt-orange site-inner border */
  --color-widget-title-bg:  #E6D0A9; /* warm-cream widget-title background */
  --color-fat-footer-bg:    #FFEED4; /* even paler cream — fat-footer container */
  --color-widget-title-text:#3B3B3B;
  --font-body:         'Lato', sans-serif;
  --max-content:       1040px;
  --content-w:         1000px;
  --main-w:            600px;
  --sidebar-w:         340px;
  --col-gap:           40px;
}

/* ───── reset ───── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
button { font: inherit; }

/* ───── base ───── */
html { font-size: 100%; }
body {
  margin: 0;
  font: 18px/1.6 var(--font-body);
  color: var(--color-text);
  /* Natural-size + top-left fixed — the nasa-89127 photo is pre-sized at
     3000px wide; the framing is intentional. Do not set background-size. */
  background: var(--color-bg-deep) url("/wp-content/uploads/dynamik-gen/theme/images/nasa-89127-3000x1442.jpg") top left fixed no-repeat;
  overflow-x: hidden;
}
a { color: var(--color-brand); text-decoration: underline; }
a:hover, a:focus { color: var(--color-link-hover); text-decoration: none; }
::selection { background: var(--color-brand); color: #fff; }
mark { background: #ff0; color: #000; }

/* ───── a11y ───── */
.screen-reader-text, .screen-reader-shortcut {
  position: absolute !important;
  clip: rect(0,0,0,0); width: 1px; height: 1px;
  overflow: hidden; word-wrap: normal !important;
}
.screen-reader-text:focus, .screen-reader-shortcut:focus {
  position: static !important; clip: auto !important;
  display: block; width: auto; height: auto;
  padding: 15px 23px; font-size: 1em; font-weight: bold;
  background: #fff; color: #333;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  z-index: 100000;
}
.genesis-skip-link { list-style: none; }
.genesis-skip-link li { height: 0; width: 0; }

/* ───── layout shell ───── */
.site-container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0;
  /* No border here — the photo banner (.site-header) sits inside
     .site-container but ABOVE .site-inner. Putting the red frame on
     .site-container would draw it alongside the photo, which the
     user explicitly flagged as wrong. The red frame belongs only on
     .site-inner so it frames the white content area. */
}
.site-header { min-height: 200px; padding: 0; }
.site-header .wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  overflow: hidden;
}
.title-area {
  padding: 24px 20px;
  text-align: center;
}
.site-title {
  font-size: 80px; font-weight: 300; line-height: 1.25;
  color: #fff;
}
.site-title a, .site-title a:visited {
  color: #fff; text-decoration: none;
}
.site-title a:hover { color: var(--color-brand); }
.site-description {
  margin: 0;
  font-size: 35px; font-weight: 300; color: #fff;
}

/* ───── nav (text white on dark background photo) ───── */
.nav-primary {
  background: transparent;
  font-size: 16px; line-height: 1;
  clear: both;
}
.nav-primary ul.menu-primary, .nav-primary ul.genesis-nav-menu {
  display: flex; flex-wrap: wrap; justify-content: center;
  max-width: var(--content-w);
  margin: 0 auto; padding: 0;
  list-style: none;
}
.nav-primary li { list-style: none; }
.nav-primary li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}
.nav-primary li a:hover,
.nav-primary li.current_page_item a,
.nav-primary li.current-menu-item a {
  color: #000;
  background: rgba(255,255,255,0.92);
  text-decoration: none;
}
.nav-primary li ul { display: none; }

/* ───── site-inner — white card with burnt-orange border ───── */
.site-inner {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  margin: 0 auto;
  padding: 20px;
  max-width: var(--max-content);
  overflow: hidden;
}
.content-sidebar-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--col-gap);
  align-items: flex-start;
  max-width: var(--content-w);
  margin: 0 auto;
}
/* Flexbox handles no-sidebar pages naturally: when an inline override sets
   .sidebar-primary {display:none}, the flex container reflows and .content
   (flex: 1) takes all available space. */

/* ───── content ───── */
.content {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 20px;
}
.sidebar-primary {
  flex: 0 0 var(--sidebar-w);
}
/* When sidebar is present, .content + .sidebar-primary divide the row;
   when sidebar is display:none, .content reflows to fill naturally. */
.content .post, .content .entry {
  background: var(--color-bg);
  margin: 0 0 40px;
  padding: 10px 0;
  overflow: hidden;        /* clearfix for floated entry images */
}
.content .page {
  background: var(--color-bg);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ───── breadcrumb ───── */
.breadcrumb {
  background: var(--color-bg-shaded);
  margin: -10px 0 30px;
  padding: 13px 25px 11px;
  font-size: 16px;
  color: var(--color-text);
}
.breadcrumb a { color: var(--color-brand); text-decoration: underline; }
.breadcrumb a:hover { color: #000; text-decoration: none; }

/* ───── archive description ───── */
.archive-description {
  background: var(--color-bg-shaded);
  margin: -10px 0 30px;
}
.content .archive-description h1, .content .archive-description .archive-title {
  background: var(--color-rule);
  margin: 0; padding: 10px 25px;
  font-size: 16px; font-weight: 300;
}
.content .archive-description p { padding: 25px; }
.content .archive-description a { color: var(--color-brand); text-decoration: underline; }

/* ───── entry typography ───── */
.entry-header .entry-meta {
  margin: -5px 0 15px;
  font-size: 16px; color: var(--color-text);
}
.entry-footer .entry-meta {
  margin: 0;
  border-top: 1px solid var(--color-rule);
  padding: 5px 0 0;
  font-size: 16px; font-style: italic;
  color: var(--color-text);
}
.entry-meta a, .entry-meta a:visited { color: var(--color-brand); text-decoration: underline; }
.entry-meta a:hover { color: #000; text-decoration: none; }

.entry-content p, .entry-content ul li, .entry-content ol li {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text);
}
.entry-content p { margin: 0 0 25px; }
.entry-content ul, .entry-content ol { margin: 0; padding: 0 0 20px; }
.entry-content ul li { margin-left: 30px; list-style: square; }
.entry-content ol li { margin-left: 35px; list-style: decimal; }
.entry-content ul ul, .entry-content ol ol { padding: 0; }
.entry-content a, .entry-content a:visited {
  color: var(--color-content-link);
  text-decoration: underline;
}
.entry-content a:hover { color: #000; text-decoration: none; }
.entry-content blockquote, .content blockquote {
  background: var(--color-bg-panel);
  margin: 5px 5px 20px 30px;
  padding: 25px 30px 5px;
}
.entry-content blockquote p, .content blockquote p {
  font-size: 18px; font-style: italic;
}

/* ───── headings ───── */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.content h1.entry-title, .content h2.entry-title,
.content .post h1, .content .page h1, .content .post h2, .content .page h2,
.content .post h3, .content .page h3,
.content .post h4, .content .page h4,
.content .post h5, .content .page h5,
.content .post h6, .content .page h6 {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.25;
  color: var(--color-text);
}
.content h1.entry-title, .content .post h1, .content .page h1,
.entry-content h1 { font-size: 32px; }
.content h2.entry-title, .content .post h2, .content .page h2,
.entry-content h2 { font-size: 30px; }
.content .post h3, .content .page h3, .entry-content h3 { font-size: 24px; }
.content .post h4, .content .page h4, .entry-content h4 { font-size: 20px; }
.content .post h5, .content .page h5, .entry-content h5 { font-size: 18px; }
.content .post h6, .content .page h6, .entry-content h6 { font-size: 16px; }

.entry-title-link, .entry-title a, .content h2.entry-title a,
.content h1.entry-title a {
  color: var(--color-text); text-decoration: none;
}
.entry-title-link:hover, .entry-title a:hover { color: var(--color-brand); }

/* ───── images ───── */
.aligncenter, img.centered { display: block; margin: 0 auto 10px; }
.alignnone, img.alignnone { display: inline; margin: 0 0 10px; }
.alignleft, img.alignleft { float: left; margin: 0 15px 10px 0; }
.alignright, img.alignright { float: right; margin: 0 0 10px 15px; }
.wp-caption, figcaption {
  background: var(--color-bg-panel);
  max-width: 100%;
  padding: 5px;
  text-align: center;
}
p.wp-caption-text, figcaption {
  margin: 5px 0;
  font-size: 14px; color: var(--color-text);
}
.post-image, .entry-image {
  background: var(--color-bg-panel);
  margin: 0 10px 10px 0;
}
.dynamik-content-filler-img {
  width: 100% !important; height: 1px !important;
  border: 0 !important; margin: 0 !important; padding: 0 !important;
  display: block !important;
}

/* ───── pagination ───── */
.pagination, .archive-pagination {
  width: 100%;
  margin: 0; padding: 20px 0;
  overflow: hidden;
}
.pagination li, .archive-pagination li { display: inline; }
.pagination a, .archive-pagination a {
  display: inline-block;
  padding: 8px 12px;
  color: var(--color-brand);
  text-decoration: underline;
}
.pagination a:hover, .archive-pagination a:hover {
  background: var(--color-bg-panel);
  color: #000;
  text-decoration: none;
}
.pagination li.active a, .archive-pagination li.active a {
  background: var(--color-bg-panel);
}

.comments-pagination { margin: 20px 0; overflow: hidden; }
.comments-pagination .pagination-previous { float: left; }
.comments-pagination .pagination-next { float: right; }
.comments-pagination a { color: var(--color-brand); text-decoration: underline; }

/* ───── sidebar (royal-blue distinctive scifi link color) ───── */
.sidebar-primary { font-size: 16px; }
.sidebar-primary a, .sidebar-primary a:visited {
  color: var(--color-sidebar-link); text-decoration: none;
}
.sidebar-primary a:hover { color: #000; text-decoration: none; }
/* Widget container: white card with burnt-orange border, rounded */
.sidebar-primary .widget {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-radius: 3px;
  overflow: hidden;
}
/* Widget title: cream-shaded header with italic centered bold text */
.sidebar-primary h4, .sidebar-primary .widget-title, .sidebar-primary .widgettitle {
  background: var(--color-widget-title-bg);
  border-bottom: 2px solid var(--color-border);
  margin: 0;
  padding: 15px 25px;
  color: var(--color-widget-title-text);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.25;
  text-align: center;
}
/* Widget body content gets generous internal padding */
.sidebar-primary .textwidget,
.sidebar-primary .widget ul, .sidebar-primary .widget ol,
.sidebar-primary .featuredpage .page {
  margin: 0;
  padding: 30px 30px 15px 30px;
}
.sidebar-primary .widget li {
  margin: 0 0 7px;
  padding: 0 0 5px;
  list-style: none;
  word-wrap: break-word;
}
.sidebar-primary .widget ul ul li { margin: 0; padding: 0; }
.sidebar-primary a img.avatar {
  background: #F6F6F6;
  margin: 0 10px 10px 0;
  padding: 5px;
  float: left;
}

/* ───── featuredpage widget (e.g. "About SciFi Mind") ───── */
.featuredpage { overflow: hidden; clear: both; }
.featuredpage .page { margin: 0; overflow: hidden; }
.featuredpage .page p { font-size: 16px; color: var(--color-text); }
.featuredpage .page a, .featuredpage .page a:visited {
  color: var(--color-brand); text-decoration: none;
}
.featuredpage .page a:hover { color: #000; text-decoration: none; }
.featuredpage .page h2, .featuredpage .page .entry-title {
  margin: 0 0 5px;
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.25;
}
.featuredpage .page h2 a, .featuredpage .page .entry-title a {
  color: var(--color-text); text-decoration: none;
}
.featuredpage .page h2 a:hover, .featuredpage .page .entry-title a:hover {
  color: var(--color-brand);
}
.featuredpage img { background: var(--color-bg-shaded); padding: 0; }

/* ───── comments (scifi has none currently, but keep rules for parity) ───── */
#comments { margin: 0 0 15px; overflow: hidden; }
#comments h3 {
  margin: 0 0 10px;
  font-size: 26px; font-weight: 300; line-height: 1.25;
}
.comment-list, .ping-list { padding: 0; list-style: none; }
.comment-list li, .ping-list li {
  margin: 15px 0 5px;
  padding: 25px;
  list-style: none;
}
.comment-list ul.children { padding: 0; margin: 15px 0 0; }
.thread-even, .thread-alt { background: var(--color-bg-panel); }
.comment-list li ul.children li { background: var(--color-bg); }
.comment-list li .avatar {
  width: 48px; height: 48px;
  margin: 5px 0 0 10px;
  float: right;
}

.comment-author { font-family: var(--font-body); color: var(--color-text); }
.comment-author span, .comment-author .says { font-size: 18px; }
.comment-author-name { font-weight: 600; }
.comment-author .says { color: var(--color-text-muted); font-weight: normal; }

.comment-meta { margin: 0 0 5px; font-size: 14px; color: var(--color-brand); }
.comment-content p { margin: 0 0 20px; font-size: 16px; color: var(--color-text); }

.collapse-comments-toggle {
  display: block;
  margin: 1.5em auto;
  padding: 0.6em 1.5em;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-brand);
  border-radius: 4px;
  color: var(--color-text);
  cursor: pointer;
}
.collapse-comments-toggle:hover { background: var(--color-bg-shaded); }

/* ───── related posts ───── */
.rp4wp-related-posts ul { width: 100%; padding: 0; margin: 0; float: left; }
.rp4wp-related-posts ul > li {
  list-style: none; padding: 0 0 20px 0; margin: 0; clear: both;
}
.rp4wp-related-posts ul > li > p { margin: 0; padding: 0; }
.rp4wp-related-post-image {
  width: 35%; padding-right: 25px; box-sizing: border-box; float: left;
}

/* ───── fat-footer-container (cream-shaded widget block above the footer) ───── */
#ez-fat-footer-container-wrap {
  background: var(--color-fat-footer-bg);
  border: 2px solid var(--color-border);
  border-radius: 3px;
  margin: 0 0 30px;
  clear: both;
  overflow: hidden;
}
#ez-fat-footer-container {
  max-width: 956px;
  margin: 0 auto;
  padding: 25px 20px 30px;
}
#ez-fat-footer-container .ez-widget-area {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  padding-bottom: 20px;
}
#ez-fat-footer-container .ez-widget-area h4,
#ez-fat-footer-container .ez-widget-area .widget-title {
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 22px;
  background: transparent;
  text-align: left;
  font-style: normal;
  padding: 0 0 5px;
}
#ez-fat-footer-container .ez-widget-area a,
#ez-fat-footer-container .ez-widget-area a:visited {
  color: var(--color-brand); text-decoration: none;
}
#ez-fat-footer-container .ez-widget-area a:hover { color: #000; }
#ez-fat-footer-container img { max-width: 100%; height: auto; }

/* ───── footer (transparent over the photo, white text) ───── */
.site-footer {
  background: transparent;
  overflow: hidden;
  clear: both;
}
.site-footer .wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 15px;
  text-align: center;
}
.site-footer p {
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.site-footer a, .site-footer a:visited {
  color: #DDDDDD; text-decoration: none;
}
.site-footer a:hover { color: #fff; }

/* ───── responsive ───── */
/* Scifi keeps the 2-column layout down to ~1000px (where the content +
   sidebar + gap actually run out of room — 600 + 340 + 40 + padding).
   The original dynamik stacked at 1140px even though there was room
   for 2-column down to 1000; tightening here so users on 1024-1280
   monitors see the intended layout. */
@media (max-width: 999px) {
  .content { flex: 1 1 100%; padding: 0; }
  .sidebar-primary { flex: 1 1 100%; margin: 20px 0 0; }
}
@media (max-width: 1140px) {
  .site-container { margin: 0; padding: 0; }
  .site-header .wrap, .title-area {
    width: 100%; padding: 20px 0;
  }
  .title-area { text-align: center; }
}
@media (max-width: 839px) {
  .site-title { font-size: 56px; }
  .site-description { font-size: 24px; }
  .site-header { min-height: 130px; }
  .entry-content p, .entry-content ul li, .entry-content ol li { font-size: 17px; }
  .comment-list li, .ping-list li { padding: 15px; }
}
@media (max-width: 479px) {
  .site-title { font-size: 40px; }
  .site-description { font-size: 18px; }
  .site-inner { padding: 15px 10px; margin: 0; border-left: 0; border-right: 0; }
  .site-container { padding: 0; }
}