/*
Theme Name: Moria 
Description: Change the look in Customizer and the behavior in functions.php or template files.
Version: 20180908
Template: twenty8teen
Author: joyously

A child theme provides its own style.css to override or extend the
parent style.css. This style sheet will be loaded by the twenty8teen theme.
You can remove scripts or style sheets if needed, in functions.php.

*/

/*  ------------------------------------------------------
 Add specific style overrides here.

Just for example, this style will change the background color for the site,
but this will not affect the value used in the Customizer (for default value).
This is a CSS Custom Property (CSS Variable).
*/

:root {
	--background_color: #ffffd6;
}

hr, .nav-links {
	background-image: linear-gradient(to right, transparent, var(--accent_color, currentColor) 20%, var(--accent_color, currentColor) 80%, transparent);
}
.nav-links {
  background-repeat: no-repeat;
  background-size: 100% 2px;
  padding: 4px 0;
}

.custom-target, :target {
  animation: 1.8s ease-out 0s normal none 1 running target-highlight;
}
@keyframes target-highlight {
  0% {
    background-color: var(--accent_color);
  }
  100% {
    background-color: var(--background_color);
  }
}

/* class is used in scale-post-thumbnail.php */
.scale-thumb {
	transition: all 0.4s ease;
}
.scale-thumb:hover {
	transform: scale(1.05);
}
.entry-title {
	hyphens: auto;
}
.filmref {
	color: var(--body_textcolor, #5e4422);
	font-style: italic;
	font-weight: bold;
}

/* === Single post quick fixes (Wayback-like) === */

/* 1) Poster/featured image floats right, text wraps */
.single .post-thumbnail, 
.single .entry-thumbnail {
  float: right;
  width: 42%;
  margin: 0 0 1rem 1rem;
}
.single .post-thumbnail img,
.single .entry-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ensure content wraps nicely beside the floated image */
.single .entry-content { overflow: hidden; }

/* If the poster is inside content as an image, alignright support */
.single .entry-content img.alignright {
  float: right;
  max-width: 42%;
  height: auto;
  margin: 0 0 1rem 1rem;
}

/* 2) Hide the date on single posts */
.single .entry-meta .posted-on,
.single .posted-on { display: none !important; }

/* 3) Hide previous/next post links at bottom */
.single .post-navigation,
.single .nav-links { display: none !important; }

/* 4) Filmref / italicised span color to match your child defaults */
.filmref {
  color: var(--body_textcolor, #3f0000);
  font-style: italic;
  font-weight: bold;
}

/* 5) Caption text right-aligned (for poster captions) */
.single .wp-caption,
.single figure.wp-caption {
  text-align: right;
}

/* === Single post layout fixes === */

/* Two-column layout: content + sidebar */
@media (min-width: 980px){
  .content-wrap { display: flex; gap: 24px; align-items: flex-start; }
  .content-wrap .site-main { flex: 1 1 auto; min-width: 0; }
  .content-wrap #secondary { flex: 0 0 300px; max-width: 300px; }
}

/* Poster: float right, constrained size (similar to Wayback look) */
.single .post-thumbnail,
.single .entry-thumbnail { float: right; width: 33%; max-width: 320px; margin: 0 0 1rem 1rem; }
.single .post-thumbnail img,
.single .entry-thumbnail img { display: block; width: 100%; height: auto; }

/* Wrap text around the float cleanly */
.single .entry-content { overflow: hidden; }

/* Hide date on singles */
.single .entry-meta .posted-on, .single .posted-on { display: none !important; }

/* Hide prev/next nav at bottom */
.single .post-navigation, .single .nav-links { display: none !important; }

/* Filmref color (your earlier style) */
.filmref { color: var(--body_textcolor, #3f0000); font-style: italic; font-weight: bold; }

/* Caption right-aligned */
.single .wp-caption, .single figure.wp-caption { text-align: right; }

/* === Tweaks: stars color, poster size, and sidebar layout === */

/* 1) Gold stars */
.entry-rating, .entry-rating-wrap { color: #d4a72c !important; } /* warm gold */
.entry-rating .entry-term, .entry-rating-wrap .entry-term { color: inherit !important; }

/* 2) Poster (featured image or content image) smaller and neat */
.single .post-thumbnail,
.single .entry-thumbnail { float: right; width: 33%; max-width: 320px; margin: 0 0 1rem 1rem; }
.single .post-thumbnail img,
.single .entry-thumbnail img { display: block; width: 100%; height: auto; }

/* If the poster is inserted in the content, cap any right-aligned images too */
.single .entry-content img.alignright,
.single .entry-content figure.alignright { float: right; width: 33%; max-width: 320px; height: auto; margin: 0 0 1rem 1rem; }
.single .entry-content .wp-caption.alignright { float: right; width: 33%; max-width: 320px; }

/* Keep text flowing around floats cleanly */
.single .entry-content { overflow: hidden; }

/* 3) Sidebar on the RIGHT (desktop) — robust selectors for this theme */
@media (min-width: 980px){
  /* Our wrapper from single.php contains both main and sidebar */
  .content-wrap {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .content-wrap .site-main { flex: 1 1 auto; min-width: 0; }

  /* Sidebar can be #secondary or #side-widget-area or .widget-area depending on theme */
  .content-wrap #secondary,
  .content-wrap #side-widget-area,
  .content-wrap .widget-area {
    flex: 0 0 300px;
    max-width: 300px;
  }
}

/* ---- Fallback (if your sidebar still drops below on some posts) ---- */
/* Uncomment this block if needed:

@media (min-width: 980px){
  #secondary, #side-widget-area, .widget-area { float: right; width: 300px; margin-left: 24px; }
  .site-main { overflow: hidden; }
}
*/

/* 4) Keep previous/next hidden on singles (just in case) */
.single .post-navigation, .single .nav-links { display: none !important; }

/* 5) Filmref color stays consistent */
.filmref { color: var(--body_textcolor, #3f0000); font-style: italic; font-weight: bold; }

/* 6) Caption right-aligned (poster caption) */
.single .wp-caption, .single figure.wp-caption { text-align: right; }