/*
Theme Name: snarfed-ryu
Template: ryu
Description: The snarfed.org Ryu child theme.
Author: Ryan Barrett <wordpress-theme@ryanb.org>
License: Public domain
*/

@import url("../ryu/style.css");

/* color value variables, used for light vs dark mode */
@media not screen and (prefers-color-scheme: dark) {
	:root {
		--fg: black;
		--bg: white;
		--fg-gray: #666;
		--bg-gray: #888;
		--fg-lightgray: #ccc;
		--bg-blue: #28f;
		--fg-blue: #06c;
        --bg-yellow: palegoldenrod;
        --bg-fragmention: #FFFFCC;
		--shadow: 0, 0, 0;  /* triplet so I can add alpha to it in box shadow */
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--fg: #ededed;
		--bg: #121212;
		--fg-gray: #aaa;
		--bg-gray: #666;
		--fg-lightgray: #333;
		--bg-blue: #36c;
		--fg-blue: #49f;
        --bg-yellow: #761;
        --bg-fragmention: #444422;
		--shadow: 150, 150, 150;
	}
}

/* Colors copied from Ryu's style.css and modified for dark mode. Some are
   overridden below. */

body,
button,
input,
select,
textarea,
a,
a:visited,
a:active,
.entry-content a:hover,
.entry-summary a:hover,
.comment-content a:hover,
article.error404 .widget_calendar #wp-calendar caption,
#infinite-footer .blog-info a,
mark, ins,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.social-links a,
#search-wrapper input[type="search"],
.triggers a,
.navigation-main ul ul a,
.navigation-main ul ul a:hover,
.page-links a,
.entry-summary .page-links a:hover,
.entry-content .page-links a:hover,
.entry-format-badge:before,
.navigation-paging .meta-nav,
.navigation-post .meta-nav,
.widget-title,
.widget-area .widget a,
.widget-area .widget input[type="text"],
.widget-area .widget input[type="email"],
.widget-area .widget input[type="search"],
.widget-area .widget input[type="password"],
.widget-area .widget textarea,
.widget_calendar #wp-calendar tbody a,
.widget_calendar #wp-calendar caption,
article.error404 .widget_calendar #wp-calendar tbody a,
#infinite-handle span {
	color: var(--fg);
}

body,
#respond #commentform,
.quote-caption:before,
mark, ins,
.toppanel,
.triggers a,
.navigation-main ul ul,
.page-links a,
.entry-format-badge,
.navigation-paging .meta-nav,
.navigation-post .meta-nav,
article.error404 .widget_calendar #wp-calendar tbody a,
#infinite-handle span,
.entry-content .slideshow-window {
	background-color: var(--bg);
}

::-moz-selection,
::selection {
	color: var(--bg);
	background-color: var(--fg);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
	border-color: var(--fg-gray);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: var(--fg);
}

@media (prefers-color-scheme: dark) {
  #respond #commentform textarea,
  #respond #commentform input[type="text"] {
      background-color: var(--fg-lightgray);
  }
}

blockquote cite,
.quote-caption,
blockquote cite a,
.quote-caption a,
.format-quote .entry-title a,
.single .format-quote .entry-title,
.comment-notes,
.no-comments,
.comment-author .says,
.comment-content blockquote p,
.comment-meta a,
.comment-status {
	color: var(--fg-gray);
}

hr {
	background-color: var(--fg-gray);
}

@media screen and (min-width: 888px) {
	.entry-meta span {
		border-bottom: 1px solid var(--fg-lightgray);
	}
	.entry-meta span:first-child {
		border-top: 1px solid var(--fg-lightgray);
	}
}

/* snarfed.org custom CSS */

body,
button,
input,
select,
textarea,
li.pingback a {
  font-size: 20px;
  line-height: 1.4;
}

.toppanel {
	display: block;
}

#search-wrapper.toppanel.hide {
	display: none;
}

.page-header {
	padding: 0;
	border: 0;
}

.entry-content, .entry-summary, .entry-meta {
    margin-top: .5em;
}

.entry-meta span + span::before {
  color: var(--fg-gray);
}

/*
 * For /category/... and /tag/..., but not front page or individual posts.
 */
body.archive .entry-content,
body.category .entry-content,
body.tag .entry-content,
body.archive .page-header,
body.category .page-header,
body.tag .page-header {
	display: none;
}

body.archive .entry-meta,
body.tag .entry-meta,
body.category .entry-meta {
	float: right;
	width: auto;
	margin-bottom: 0;
	margin-top: 0;
}

body.archive .entry-date,
body.tag .entry-date,
body.category .entry-date {
	border: 0;
}

.entry-date, .entry-modified-date, .comment-author cite, .captioned {
    font-variant: small-caps;
}

.comment-author cite, .captioned {
    font-size: smaller;
}

.captioned {
    text-align: center !important;
}

body.archive .entry-header,
body.tag .entry-header,
body.category .entry-header {
	display: inline-block;
}

.archive-page {
	display: inline-block;
}

.archive-page.left,
.archive-page.right {
	margin: 0;
}

.archive-page ul {
	list-style: none;
}

/* These are the archive pages on localhost and snarfed */
#post-8833 .entry-meta,
#post-6936 .entry-meta,
#post-9160 .entry-meta {
  display: none;
}

.categories-links,
.comment-edit-link,
#comments-title,
.comments-title,
.comment-notes,
.comment-form-email,
.comment-author .says,
.comment-form-cookies-consent,
.entry-format-badge,
.entry-meta .author,
.entry-meta .p-author,
.entry-meta .comments-link,
.entry-meta .edit-link,
.entry-meta .entry-format,
.entry-meta .tags-links,
#infinite-footer,
.logged-in-as,
.ngg-album-compact > p,
.ngg-breadcrumbs,
body.home #nav-below,
body.single #nav-below,
body.page #nav-below,
.no-comments,
#reply-title,
.site-footer,
.site-info,
#triggers-wrapper,
#webmention-form,
.wp-post-image {
	display: none;
}

body,
button,
input,
select,
textarea,
blockquote p,
h1,h2,h3,h4,h5,h6,
.site-description,
.site-info,
.entry-title,
.page-title,
.comments-title,
.comments-area #respond h3,
.comment-status,
.widget-area .widget {
	font-family: Lato, Helvetica, sans-serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	clear: none;
}

h3 {
	font-size: 25px;
}

body.infinity-end .navigation-paging {
	display: block;
}

blockquote p {
	font-size: 100%;
    margin-bottom: auto;
}

code {
    font-size: 18px;
}

blockquote {
	padding-left: 1em;
	margin-bottom: 1em;
}

.widget-area .widget,
.entry-title,
.page-title,
.comments-title {
	font-size: 24px;
}

.comment-meta,
.comments-title,
.page-title,
.entry-title,
#search-wrapper input[type="search"] {
	font-style: normal;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
	font-size: 100%;
}

.page-title,
.entry-title {
	font-weight: bold;
}

article.error404 .widget_calendar #wp-calendar tbody a,
#infinite-handle span,
mark, ins,
.navigation-main ul ul,
.page-links a,
#search-wrapper input[type="search"],
.toppanel,
.triggers a,
#my-header,
#my-header a {
	color: var(--fg);
	background-color: var(--bg);
}

#comments,
.hentry,
#masthead,
#page {
	border: 0;
	padding: 0;
	clear: both;
}

#masthead > .wrap {
	padding-top: .5em;
}

#masthead > .wrap,
.header-image {
	max-width: none;
}

.site-logo {
	display: block;
	box-shadow: inset 0 0 1em black;
    max-height: 100px;
    overflow: hidden;
    background-image: url(/w/wp-content/uploads/2013/06/copy-cropped-iraq_bar.jpg);
    background-repeat: repeat-x;
}

.header-image {
	display: block;
    margin-bottom: 0;
    /* these are needed to make the box-shadow above appear on top of the img */
	z-index: -1;
	position: relative;
}

.widget-area {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

.widget-area .widget {
	overflow: visible;
}

#my-icons {
    margin-bottom: 0;
    /* vertical-align: bottom; ...doesn't work on floated elements :/ */
}

#my-icons li {
	display: inline;
}

/* This fixes the tap highlight on phones. (It's too far right and wide otherwise). */
#my-icons .screen-reader-text {
	display: none;
}

#my-icons img {
    width: 20px;
    margin-top: -.5em;
}

.mastodon-link div, .mastodon-link span, .bluesky-link div, .bluesky-link span {
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 22px;
}

@media not screen and (prefers-color-scheme: dark) {
    .mastodon-link div, .mastodon-link span {
        background-image: url("/mastodon-icon-light-gray.png");
    }
    .mastodon-link div:hover, .mastodon-link:hover span {
        background-image: url("/mastodon-icon-light-blue.png");
    }
    .bluesky-link div, .bluesky-link span {
        background-image: url("/bluesky-icon-light-gray.png");
    }
    .bluesky-link div:hover, .bluesky-link:hover span {
        background-image: url("/bluesky-icon-light-blue.png");
    }
}

@media (prefers-color-scheme: dark) {
    .mastodon-link div, .mastodon-link span {
        background-image: url("/mastodon-icon-dark-gray.png");
    }
    .mastodon-link div:hover, .mastodon-link:hover span {
        background-image: url("/mastodon-icon-dark-blue.png");
    }
    .bluesky-link div, .bluesky-link span {
        background-image: url("/bluesky-icon-dark-gray.png");
    }
    .bluesky-link div:hover, .bluesky-link:hover span {
        background-image: url("/bluesky-icon-dark-blue.png");
    }
}

.about-links a {
  white-space: nowrap;
}

.about-links a span {
  color: var(--fg-gray) !important;
}

.about-links a:hover span {
	color: var(--fg-blue) !important;
}

.genericon,
.genericon:before,
.genericon:after {
    display: inline;
	font-size: 1em;
    vertical-align: baseline;
}

.facebook-link, .google-link, .instagram-link {
	display: none !important;
}

/* Extra icons for home, archives, search, and RSS feed. */
.home-link a:before {
	content: '\f409';
}

/* Hide titles for Aside post format and Indieweb replies, likes, etc */
.format-aside .entry-title,
.category-reply .entry-title,
.category-like .entry-title,
.category-repost .entry-title,
.category-rsvp .entry-title
{
  display: none;
}

/* Dumb reply context text for invisible in-reply-to links. */
.u-in-reply-to:empty:after {
    /* \A is line break. http://stackoverflow.com/a/11750985/186123 */
    content: '\A \A (replying to ' attr(href) ')';
    white-space: pre;
}

.archives-link a:before {
	content: '\f307';
}

.search-trigger a:before {
	content: '\f400';
	margin-top: 0;
}

.feed-link a:before {
	content: '\f413';
}

#search-wrapper input[type="search"] {
	border-color: var(--fg-gray);
}

/* link hover and animation */
.entry-content a,
.entry-summary a,
.comment-content a,
#my-header a,
li.pingback a {
	border-bottom: 1px solid var(--fg-lightgray) !important;
}

.gallery-item a, .tiled-gallery-item a, .tiled-gallery__item a {
	border-bottom: none !important;
}

#my-icons a, a.syn-link {
	color: var(--fg-gray) !important;
	border: none;
}

a img,
a.ngg-album-desc,
.right, .left, .right a, .left a {
	border-bottom: 0 !important;
	text-decoration: underline;
}

a:hover,
.entry-content a:hover,
.entry-summary a:hover,
.entry-meta a:hover,
.entry-title a:hover,
.page-title a:hover,
.comment-content a:hover,
.comment a:hover,
#my-header a:hover,
#my-icons a:hover,
a.syn-link:hover {
	color: var(--fg-blue) !important;
	border-color: var(--fg-blue) !important;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--bg-blue);
    color: white;
    font: inherit;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: var(--fg-blue);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--fg-blue) !important;
}

.entry-title,
.entry-title a,
a#my-name,
.page-title a {
	color: var(--fg-blue);
	font-weight: bold;
	border-bottom: 1px solid var(--bg) !important;
}

.entry-meta a,
.comment-meta a,
.archive-page a {
	border-bottom: 1px solid var(--bg) !important;
	vertical-align: top;
}

.archive-page a {
	color: var(--fg-blue);
}

.entry-title a:hover,
.page-title a:hover,
#my-name:hover {
	border-color: var(--fg-blue) !important;
}

a, a:hover, a img:hover,
#my-name:hover,
button,
input,
#infinite-handle span,
.entry-format-badge,
.entry-format-badge:before {
	transition: all .7s ease !important;
}

.more-link {
	display: block;
	float: right;
	clear: both;
	margin-top: 2em;
	font-style: italic;
}

.post,
.page {
	margin-bottom: 1em;
}

.entry-content .relsyn, .syn-text {
  display: none !important;
}

/* unlisted aka private posts
 */
.category-unlisted .entry-meta .comments-link {
  display: inline;
  background-color: var(--bg-yellow);
  padding-right: 1em;
  font-weight: bold;
}
@media screen and (min-width: 888px) {
  .category-unlisted .entry-meta .comments-link {
    display: block;
  }
}


.category-unlisted .comments-link a {
  display: none;
}

.category-unlisted .comments-link::after {
  visibility: visible;
  content: 'This is a private page  \1F64A';  /* \1F92B Please share thoughtfully! */
}

/* Comments
 */
#comments {
	padding: 0;
}

#comments h3,
.reaction-list h2,
.comment-list li.pingback {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

li.pingback {
    padding-top: 1em;
    padding-left: 1em;
}

li.pingback p {
    margin-bottom: 0;
}

li.pingback a {
    margin-left: .5em;
    text-transform: none;
    font-weight: 300;
}

.mention-list,
.reaction-list h2 {
    display: inline;
}

.bookmarks,
.reaction-list h2 {
    clear: both;
}

.reaction-list .emoji-overlay {
    display: none;
}

.comments-area article,
.comment-list li.trackback,
.comment-list li.pingback {
	margin-bottom: 0;
	padding-top: 1em;
}

.comment-list {
	margin-bottom: 2em;
    margin-left: 0;
}

.comment-list > li, #respond {
    clear: both;
}

.comment-content {
    max-width: 696px;
}

.comment-meta {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1em;
  margin-right: 1em;
}

.comment-author .fn,
.comment-date > a {
    padding-bottom: .2em;
    padding-top: .2em;
}

.comment-meta > .p-author,
.comment-date,
.comment-content {
    padding-left: 0px;
}

.comment-author .comment-author-avatar,
.comment-author .avatar {
  position: static;
}

.comment-author .avatar {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.comment-author .comment-author-avatar {
  width: auto;
  height: auto;
  float: left;
  margin-bottom: 0;
  padding: 0;
}

.bypostauthor > article .comment-author cite:after {
	font-size: 16px;
	content: "\f408";
	position: absolute;
}

.avatar {
    border-radius: 50%;
}

.mention-ellipsis h3 {
    margin-top: 8px;
}

.mention-ellipsis a {
    color: var(--fg-blue);
    text-decoration: underline;
}

.mention-ellipsis a:hover {
    color: var(--fg-blue);
    text-decoration: none;
}

#respond {
    clear: both;
    padding-top: 3em !important;
}


/* Syndication links plugin.
 */
ul.relsyn {
	display: inline;
	border: 0;
    margin-left: .3em !important;
    margin-top: -.2em !important;
}

ul.relsyn li {
	display: inline;
	font-family: "Genericons";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px !important;
	padding-left: .2em !important;
	padding-right: 0 !important;
}

/* Hide syndication links in comments.
 * TODO: lay them out somewhere reasonable and show them.
 */
.comment ul.relsyn {
    display: none;
}

a.syn-link {
	vertical-align: baseline;
}

a.syn-link:hover {
	border-bottom: 1px solid var(--bg) !important;
}

.syndication-link-icon {
    display: none !important;
    margin: 0 !important;
}

/* http://genericons.com/ */
a.syn-link::before    { content: '\f475'; } /* default */
a.syn-link[href*="facebook.com"]::before    { content: "\f203"; }
a.syn-link[href*="twitter.com"]::before     { content: "\f202"; }
a.syn-link[href*="plus.google.com"]::before { content: "\f206"; }
a.syn-link[href*="instagram.com"]::before   { content: "\f215"; }


/* These two blocks try to get the margins below the last paragraph or cite
 * looking decent and similar for both comments, which don't have a trailing cite,
 * and webmentions, which do. */
.comment-content p:last-of-type {
    margin-bottom: 0px;
}

.comment-content p:last-child,
.comment-content cite:last-child {
    margin-bottom: .5em;
}

/* The "via Facebook" etc tags from bridgy. */
.comment-content cite,
.via-facebook,
.via {
	display: block;
	width: auto;
	font-size: small;
	color: var(--bg-gray);
}

pre, pre * {
	background-color: var(--bg);
	font-size: small;
}

/* NextGEN Gallery */
.ngg-gallery-thumbnail img,
.ngg-thumbnail img,
.ngg-imagebrowser img {
	margin-left: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.ngg-imagebrowser-nav .page-numbers,
.ngg-imagebrowser-nav .back,
.ngg-imagebrowser-nav .next,
.ngg-navigation .page-numbers,
.ngg-navigation .back,
.ngg-navigation .next {
	border: none !important;
}

.ngg-album-compact, .ngg-album-compactbox, .ngg-albumoverview {
	width: auto !important;
    clear: none !important;
}

.ngg-album-compact {
	max-width: 111px;
	padding-left: 5px;
	padding-bottom: 1em;
}

.ngg-galleryoverview {
	margin-bottom: 1em;
}

.type-page .ngg-galleryoverview, .tiled-gallery, .tiled-gallery__gallery {
	clear: none;
}

/* WordPress Media and galleries */
.gallery, .tiled-gallery, .tiled-gallery__gallery,
.gallery .gallery-row, .tiled-gallery .gallery-row,
.gallery-group,
.gallery-item, .tiled-gallery-item, .tiled-gallery__item {
    overflow: visible !important;
}

/* responsive embeds for iframes, etc
 * https://blog.theodo.com/2018/01/responsive-iframes-css-trick/
 */
.embed-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.embed-container, iframe {
    margin-bottom: 1em;
}


/* media queries
 */
#my-header > br:nth-of-type(2) {
	display: none;
}

#my-icons {
	margin-top: .5em;
}


.right {
	float: right;
	margin-left: 10px;
	text-align: right;
}

.left {
	float: left;
	margin-right: 20px;
	text-align: left;
}

@media screen and (min-width: 312px) {
}

@media screen and (max-width: 455px) {
	.half, .half-sidebyside {
		width: 100%;
	}
	.third, .quarter, .sixth {
		width: 50%;
	}
}

@media screen and (min-width: 456px) {
	.half { width: 50%; }
	.half-sidebyside { width: 45%; }
	.third { width: 32%; }
	.quarter { width: 25%; }
	.sixth { width: 17%; }
}

@media screen and (min-width: 600px) {
	#my-header > br:nth-of-type(2) {
		display: inline;
	}

	.comment-meta {
		padding-left: 0;
	}
}

@media screen and (min-width: 744px) {
	#my-icons {
		margin-top: -1em;
		margin-right: -1em;
		float: right;
	}

    .comment-meta > .p-author,
    .comment-date,
    .comment-content {
      padding-left: 72px;
    }
}

@media screen and (max-width: 887px) {
    #secondary, .comment-list, .wrap, .entry-title  {
        max-width: none !important;
    }

    #secondary, #content {
        margin-left: 1em;
        margin-right: 1em;
    }
}

@media screen and (min-width: 888px) {
	#secondary, .comment-list {
		max-width: 840px !important;
	}

	.entry-content {
		float: none;
	}

	.entry-content, .comment-content, .entry-title, #my-header {
		margin-left: 144px;
	}

	.comment-meta {
		float: left;
		width: 120px;
	}

    .comment-author .comment-author-avatar {
      margin-left: -30px;
    }

    .comment-meta > .p-author,
    .comment-date,
    .comment-content {
		padding-left: 0;
	}

    .entry-meta,
    .comment-meta {
	  text-align: right;
    }
}

@media screen and (min-width: 1032px) {
	#secondary, .comment-list {
		max-width: 984px !important;
	}

	.entry-content, .comment-content, .entry-title, #my-header {
		margin-left: 216px;
	}

	.comment-meta {
		width: 168px;
    }
}

@media screen and (min-width: 1176px) {
	#secondary, .comment-list {
		max-width: 1128px !important;
	}

	.entry-content, .comment-content, .entry-title, #my-header {
		margin-left: 288px;
	}

	.comment-meta {
		width: 240px;
    }

    .comment-author .comment-author-avatar {
      margin-left: 0;
    }
}

@media screen and (min-width: 1320px) {
	#secondary, .comment-list {
		max-width: 1272px !important;
	}
}


/*  other misc
 */
p[fragmention] {
  background-color: var(--bg-fragmention);
  transition: background-color 2s;
}

f, nf {
	font-style: italic;
}

good:before {
  content:"✓";  /* stylized check mark */
  color: green;
}

ok:before {
  font-weight: bold;
  content:"~";  /* stylized tilde */
  color: orange;
}

bad:before {
  content:"✗";  /* stylized x */
  color: red;
}

unfinished:before {
  content:"∅";  /* null symbol */
  color: gray;
}

p.half, p.half-sidebyside, p.third, p.quarter, p.sixth {
	margin-bottom: 10px;
}

/* photo album galleries on /pictures and /private-pictures */
.post-800 .e-content ul, .post-37962 .e-content ul {
  margin: 0;
}
.post-800 .e-content li, .post-37962 .e-content li {
  display: inline-block;
  margin: .1em;
}
.post-800 .e-content img, .post-37962 .e-content img {
  max-height: 150px;
}

.shadow,
img[class*="align"], /* images posted via WP media, e.g. from the phone app */
.ngg-gallery-thumbnail img,
.ngg-thumbnail img,
.ngg-imagebrowser img,
.gallery-item img,
.tiled-gallery-item img,
.tiled-gallery__item img,
.blocks-gallery-item img,
.post-800 li img,   /* /pictures */
.post-37962 li img,  /* /private-pictures */
figure.wp-block-image img,
figure.wp-block-video video,
.embed-container, iframe
{
	box-shadow: 3px 3px 3px rgba(var(--shadow), 0.4) !important;
}

a img.shadow:hover,
a img[class*="align"]:hover,
.ngg-gallery-thumbnail a img:hover,
.ngg-gallery-thumbnail a img:hover,
.ngg-thumbnail a img:hover,
.ngg-imagebrowser a img:hover,
.gallery .gallery-item img:hover,
.tiled-gallery .tiled-gallery-item img:hover,
.tiled-gallery__item img:hover,
.blocks-gallery-item img:hover,
.post-800 li img:hover,   /* /pictures */
.post-37962 li img:hover,  /* /private-pictures */
figure.wp-block-image img:hover,
figure.wp-block-video video:hover
{
	box-shadow: 3px 3px 3px var(--fg-blue) !important;
}