/* otrhvn.net theme — matches otrhvn.org (Garamond, warm cream, green/brown).
   Loaded after the built-in theme via extra_header.gohtml, so it overrides
   whichever base style is active. Served from /custom/ (outside the web
   root, so Sriracha upgrades never touch it). */

html, body {
	background: #f5e7c4 url(/custom/vintage_lines_texture.png);
	background-size: 6px;
	color: #3a403d;
	font-family: "Garamond", Garamond, "EB Garamond", Georgia, serif;
	text-shadow: -0.06em 0 0.5px rgba(0, 0, 0, 0.15);
}

input, textarea, select, button {
	font-family: "Garamond", Garamond, "EB Garamond", Georgia, serif;
}

a, a:visited, a:link, a:active {
	color: #8b5a2b;
	transition: ease-in-out 0.3s;
	text-shadow: 0.06em 0 0.5px rgba(0, 0, 0, 0.15);
}

a:hover {
	color: #2a7a5e;
}

.logo {
	color: #2a7a5e;
}

hr {
	color: #2a7a5e;
	background-color: #2a7a5e;
	background-image: linear-gradient(to right, rgba(245,231,196,1), rgba(42,122,94,0.75), rgba(245,231,196,1));
}

.replymode, .catalogmode {
	background: #2a7a5e;
	color: #f5e7c4;
}

.manageinfo {
	background: #2a7a5e;
	color: #f5e7c4;
}

.errormessage {
	background: #eee1bd;
	color: #a04030;
}

.globe {
	color: transparent;
	text-shadow: 0 0 0 #2a7a5e;
}

.postarea table {
	background-color: rgba(238, 225, 189, 0.5);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border: 1px solid rgba(216, 198, 146, 0.6);
	border-top: 0 none;
	border-left: 0 none;
}

/* Inline >>N reflink (gets .touchreflink on touch screens). Keep it a plain
   inline link that blends with the post text instead of a frosted box strip.
   Overrides the base theme's solid background. */
.message .touchreflink {
	background: transparent;
	border: 0 none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

/* Quote-preview popup. Styled to match the raised post panes (bordered,
   shadowed) rather than the old semi-transparent+blur strip, which stood
   out and did not blend. Near-opaque so it stays readable over the post
   content it floats above. */
.hoverpost {
	background-color: rgba(245, 231, 196, 0.96);
	color: #3a403d;
	border: 1px solid rgba(180, 160, 110, 0.8);
	border-radius: 2px;
	box-shadow: 0 3px 5px rgba(58, 64, 61, 0.5);
	padding: 4px 8px;
}

/* Nested label cells: tint only (no own backdrop-filter, which would
   double-blur over the frosted container they sit inside). */
.postblock, .passvalid {
	background: rgba(224, 207, 159, 0.55);
	color: #2a7a5e;
}

.postlists {
	background: #f5e7c4;
	color: #3a403d;
}

.row1 {
	background: #eee1bd;
	color: #3a403d;
}

.row2 {
	background: #e5d6ab;
	color: #3a403d;
}

.filetitle, .oldpost, .thumbnailmsg {
	background: inherit;
	color: #2a7a5e;
}

.postername, .commentpostername {
	color: #8b5a2b;
}

.postertrip {
	color: #a5744a;
}

.reply {
	background: transparent;
	color: #3a403d;
	border: 0 none;
}

/* Frosted-glass reply box. backdrop-filter is unreliable on table cells
   (the reply is a <td>) and barely visible over the fine 6px texture, so the
   frost is drawn as a blurred copy of the page texture in a ::before layer
   behind the post content. Semi-transparent so the real background shows
   through. The box, border and padding live on the reply's inner block div. */
.reply.post > div {
	position: relative;
	z-index: 0;
	/* flow-root makes the pane contain the floated thumbnail, so the box
	   wraps the whole post (image + text) instead of just the text height. */
	display: flow-root;
	border: 1px solid rgba(180, 160, 110, 0.7);
	border-radius: 2px;
	padding: 4px 8px;
	/* Drop shadow lifts the pane off the texture; the inset top highlight
	   gives it a glassy edge. */
	box-shadow: 0 3px 5px rgba(58, 64, 61, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.reply.post > div::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 2px;
	background: #f5e7c4 url(/custom/vintage_lines_texture.png);
	background-size: 6px;
	filter: blur(3px);
	opacity: 0.6;
	pointer-events: none;
}

.forumpost:target, .reply:target {
	border: 2px ridge #2a7a5e;
}

.replyhl {
	background: rgba(229, 211, 161, 0.6);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	color: #3a403d;
}

/* Make the collapsed post form ("Post reply" / "Post thread") an obvious
   button instead of a small disclosure toggle newcomers overlook. */
#postdetails {
	text-align: center;
	margin: 0.9em 0;
}

/* At rest the button sits flat on the page and the (zero-offset) shadow is
   completely hidden directly behind it. As the button rises, the shadow's
   page position stays fixed (its offset grows by exactly the lift amount),
   so the shadow emerges straight out from under the button — the emerging
   shadow itself is the depth cue. Emergence is purely vertical: any
   horizontal offset would peek out at rest and break the hidden start. */
@keyframes postbutton-float {
	0%, 100% {
		transform: translateY(0);
		filter: drop-shadow(0 0 0 rgba(58, 64, 61, 0.65));
	}
	50% {
		transform: translateY(-5px);
		filter: drop-shadow(0 5px 0 rgba(58, 64, 61, 0.9));
	}
}

#postdetails > summary {
	list-style: none;
	display: inline-block;
	cursor: pointer;
	background: transparent;
	color: #000000;
	font-size: 1.1em;
	font-weight: normal;
	padding: 0.4em 1.8em;
	border: 2px solid #2a7a5e;
	border-radius: 4px;
	/* drop-shadow (not box-shadow) so the border AND the text cast
	   shadows while the background stays transparent. Rest = zero offset,
	   so the shadow hides directly behind the button. */
	filter: drop-shadow(0 0 0 rgba(58, 64, 61, 0.65));
	text-shadow: none;
	animation: postbutton-float 3.5s ease-in-out infinite;
	transition: filter ease-in-out 0.2s, border-color ease-in-out 0.2s;
	-webkit-user-select: none;
	user-select: none;
}

#postdetails > summary::-webkit-details-marker {
	display: none;
}

#postdetails > summary:hover {
	/* Hover feedback only — must NOT touch the animation or transform.
	   Freezing them here caused a jerky snap on desktop, and on mobile the
	   sticky :hover state left the button stuck at the top of its float
	   after the form was toggled closed. Just tint the border instead. */
	border-color: #8b5a2b;
}

#postdetails[open] > summary {
	/* pressed flat onto the page: shadow fully hidden behind the button */
	animation: none;
	transform: translateY(0);
	filter: drop-shadow(0 0 0 rgba(58, 64, 61, 0.6));
}

/* Slowly scroll the repeating "o t r h v n" title band across the page.
   The band is a single string of identical "o t r h v n " units, so shifting
   by exactly half its width (-50%) lands on an identical frame — the loop is
   seamless with no visible jump. */
@keyframes logo-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.logo.logo-repeat a.logohome {
	display: inline-block;
	animation: logo-scroll 92s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	#postdetails > summary,
	.logo.logo-repeat a.logohome {
		animation: none;
	}
}