/**
 * @file liferea.css  Liferea rendering stylesheet
 *
 * Copyright (C) 2004-2025 Lars Windolf <lars.windolf@gmx.de>
 * Copyright (C) 2004 delusional <delusional@dx13.co.uk>
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */

/* Note: color-wise we follow the Devhelp colors. Idea is to have
   somewhat consistent GNOME "theme" color. Sadly GTK+4 themes do not
   provide applications with sensible color information, so all apps
   have to hard-code stuff */

:root {
  --text-color: rgb(51, 51, 51);
  --text-color-light: rgb(120, 120, 120);
  --primary: rgb(28, 118, 228);
  --body-bg: #fff;
  --box-bg: rgba(135, 135, 135, 0.085);
  --box-radius: 0.35rem;
  --box-padding: 0.75rem 1.5rem;
  --box-margin: 0.75rem 0;
  --box-text-color: #111;

  --error-bg: #ffa;

  --body-font-family: "Red Hat Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --body-font-scale: 0.95;
  --body-font-size: calc(var(--body-font-scale) * clamp(16px, 1vw, 18px));
  --body-font-weight: normal;

  --preferred-content-width: 90ch; /* The preferred width for the readable content */
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f6f6f6;
    --text-color-light: #bbb;
    --primary: rgb(144, 194, 255);
    --body-bg: #121212;
    --box-bg: rgba(135, 135, 135, 0.1);
    --box-text-color: #fff;
    color-scheme: dark;
  }
}

::-moz-selection {
  color: white;
  background: var(--primary);
}

::selection {
  color: white;
  background: var(--primary);
}

body {
  font: 16px/1.5 var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size);
  padding:0;
  padding-top: 1rem;

  -webkit-font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern", "liga";
  font-feature-settings: "kern", "liga";
  color: var(--text-color);
  background: var(--body-bg);

  max-width: 800px;
  margin: 0 auto;

  line-height: 1.8;
}

blockquote {
  border-left: 3px solid var(--primary);
  background: var(--box-bg);
  padding: var(--box-padding);
  margin: var(--box-margin);
  border-radius: var(--box-radius);
  font-style: italic;
  clear:both;
}

pre {
  background: var(--box-bg);
  padding: var(--box-padding);
  border-radius: var(--box-radius);
  overflow: auto;
}

code {
  background: var(--box-bg);
  padding: 0 0.35em;
  border-radius: 0.35rem;
  word-break: break-word;
}

a > code {
  color: var(--primary);
}

pre pre,
pre code {
  padding: 0;
  margin: 0;
  font-size: 1em;
  background: none;
  color: inherit;
}

strong, b {
  font-weight: 600;
}

a {
  color: var(--primary);
}

div.item header h1 a {
  color: var(--text-color);
  text-decoration: none;
}

div.item header {
  color: var(--text-color-light);
  line-height: 1.5rem;
}

div.item header > h1 {
  margin-top: 12px;
}

h1 {
  line-height: 2.8rem;
}
h2 {
  line-height: 2.2rem;
}
h3 {
  line-height: 1.8rem;
}
h4 {
  line-height: 1.6rem;
}

dd {
  padding-left: 30px;
}

section,
div.content svg,
div.content img {
	max-width: 100%;
	height: auto !important;
}

svg .node polygon, svg .node path {
  transition: fill 150ms ease;
  fill: var(--box-bg);
  stroke: none;
}

svg .node a {
  text-decoration: none !important;
}

svg .node a text {
  fill: var(--text-color);
  font-family: var(--body-font-family);
}

svg .node.link text {
  fill: var(--primary);
}

svg .node.link:hover polygon, svg .node.link:hover path {
  fill: var(--sidebar-hover-bg);
}
svg .node.link:hover text {
  fill: var(--box-text-color);
}
svg .edge path {
  stroke: var(--text-color);
}

/* HTML content extraction sometimes give us nav elements */
div.content nav {
	display: none;
}

figure, iframe {
	max-width: 100%;
	box-sizing: border-box;

	/* Note: object-fit would be best practice here, but it fails
	   on embedded Youtube videos (pushing the embed iframe far
	   to the right with the controls being not in the place
	   visually shown) */
}

div.content * img {
	border:0;
	margin:2px;
}

div.content img.thumbnail {
	border:0;
	margin-right:12px;
}

img.gravatar {
	/* gravatars have align="left" so we need proper margin */
	margin-right:12px;
}

#map img {
	/* OpenStreeMap map tiles must have no border */
	border:0px;
	margin:0px;
}

/* styles for the item description (currently also used for
   the feed description) */
table.itemhead, table.feedhead {
	margin:0;
	width:100%;
	border:0;
	border-bottom: 2px solid var(--box-bg);
	clear:both;
	color: var(--text-color);
}

.itemhead, .feedhead {
	// FIXME background-color: #GTK-COLOR-MID;
}

table.itemhead * a.itemhead {
	text-decoration:none;
	color: var(--text-color);
	font-weight:bold;
}

table.itemhead * td {
	padding-top: 4px;
}

td.head_favicon {
	width: 20px;
	padding-left: 10px;
	vertical-align: middle;
}

td.head_title {
	padding:2px 5px;
	width: 100%;
	vertical-align: middle;
}

table.headmeta {
	// FIXME: background:#GTK-COLOR-BG;
	width:100%;
	border:0;
	border-bottom: 1px solid var(--box-bg);
	margin:0;
}

table.headmeta td {
	padding:1px 6px 1px 12px;
	font-size:0.9em;
}

.hidden {
	visibility:hidden;
	display:none;
}

.author, .categories, .source {
        padding:0;
	margin-left:0;
        margin-right:12px;
}

.date {
	white-space:nowrap;
	text-align:right;
	padding-right:5px;
}

.content, div.item_comments {
	padding:0px 6px 0px 12px;
}

div.comment {
	border:1px solid var(--box-bg);
	margin-bottom:5px;
}

div.comment_body {
	padding-left:6px;
	padding-right:6px;
}

div.comment_title {
	padding-left:6px;
	padding-right:6px;
	font-weight:bold;
	// FIXME: background: var(--box-bg);
}

a.favicon {
	text-decoration:none;
}

a.favicon img {
	width:16px;
	border:0;
	margin:0;
	padding:0;
}

/* style for the feed fetch error box at the beginning
   of the feed description and for item comment feeds */
#errors {
	border:0;
	border-bottom:1px solid black;
	margin:24px 12px;
	padding:12px;
	background:var(--error-bg);
	color:black;
	border:1px solid var(--box-bg);
}

#errors ul {
	list-style-type: none;
	padding-inline-start: 15px;
}

#errors * li {
	padding:1px;
}

pre.errorOutput {
	margin:10px 15px;
	padding:5px;
	border:2px solid var(--box-bg); // FIXME
	background: var(--box-bg);
	overflow:auto;
}

del {
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
}

/* namespace specific styles */

.slash {
	background:#60A080;
	padding-left:0.2rem;
	padding-right:0.2rem;
	margin-bottom: 0.5rem;
}

.slashSection, .slashDepartment {
	padding-left:0.5rem;
	padding-right:0.2rem;
	color:black;
}

.slashValue {
	padding-left:0.2rem;
	padding-right:0.2rem;
	color:white;
}

div.photoheader {
	margin:10px 0;
	padding-left:10px;
	padding-right:10px;
	//background-color:#GTK-COLOR-DARK;
	//color:#GTK-COLOR-TEXT;
}

.video-embed {
	position: relative;
	max-width: 700px;
	width: 100%;
	margin-bottom: 10px;
}

.video-embed .thumb {
	max-width: 700px;
	width: 100%;
}

.video-embed .play-btn {
	position: absolute;
	max-width: 700px;
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.video-embed .play-btn svg {
	transition: all .3s ease;
	fill: #fff;
}

.video-embed .play-btn:hover svg,
.video-embed .play-btn:focus svg {
	cursor: pointer;
	fill: #ddd;
}

#enclosureVideo select,
#enclosureAudio select {
	max-width: 100%;
}

#enclosureVideo select option,
#enclosureAudio select option {
	/* does not work, but might some day */
	text-overflow: ellipsis
}

#enclosureVideo video {
	background: black;
	min-width: 640px;
	min-height: 480px;
	max-width: 100%;
        height: auto;
        display: block;
}

#enclosureAudio audio {
	width: 100% !important;
}

/* dark mode image glaring #1303 */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}
