/*
Theme Name: Somnia
Author: Uzman
Description: Theme for the dream interpretation sites. One reading column on every page, no menus: each site's palette and fonts come from its address (inc/palette.php), its own headings from Somnia > Theme variables.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
Update URI: false
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: somnia
*/

/*
 * Written from scratch on 28 Oct 2026 (owner: "biz kendimiz sıfırdan bir tema oluştursak"). The look is the one the
 * HeatMap AdAptive based Somnia had on that day, compared pixel by pixel on the test copy. Colours and fonts come from the
 * --dt-* custom properties inc/palette.php writes to :root (palette: web-content-curation/dream-sites/tasarim-dili.md).
 * Principle: one accent, only on links, the site name, buttons and labels. Headings and text are neutral, the light
 * accent is only a fill.
 *
 * The stylesheet is enqueued last (inc/palette.php), so it comes after the plugins' styles. Several rules carry `body` or the
 * #content ID to beat the plugins' own rules, the comments say which.
 */

/* RESET AND ELEMENTS
-------------------------- */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, cite, code, del, em, img, ins, q,
small, strong, sub, sup, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
/* 1rem is 10 pixels: plugin styles written in rem were sized against it */
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	overflow-wrap: break-word;
	background: var(--dt-bg);
	color: var(--dt-text);
	font-family: var(--dt-body-font);
	font-size: 19px;
	line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
/* the body prefix beats the plugins' heading rules */
body h1,
body h2,
body h3,
body h4 {
	font-family: var(--dt-heading-font);
	font-weight: var(--dt-heading-weight);
	color: var(--dt-text);
	text-decoration: none;
	letter-spacing: 0;
}
body h2 {
	font-size: 1.45em;
	line-height: 1.3;
}
p {
	margin-bottom: 0.9em;
}
ul {
	list-style: none;
	margin: 0 5px 5px 0;
}
ol {
	list-style: decimal;
	margin: 0 0 1.5em 3em;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
	margin-left: 1.5em;
}
b, strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
blockquote {
	margin: 0 1.5em;
}
small {
	font-size: 75%;
}
hr {
	height: 1px;
	margin-bottom: 1.5em;
	border: 0;
	background-color: var(--dt-border);
}
mark, ins {
	background: var(--dt-accent-light);
	text-decoration: none;
}
img,
iframe {
	max-width: 100%;
}
img {
	height: auto;
}

/* LINKS (owner 29 Oct 2026, the same on every site whatever the palette): the accent, no underline, the text colour on
   hover. Only the links inside a post's paragraphs are underlined (POSTS). A visited link has the same colour (owner 28
   Oct 2026: a visited button's text turned the background colour). The hover colour sits in :where(), so a class rule
   painting a button-shaped link beats it. */
body a {
	color: var(--dt-accent);
	text-decoration: none;
}
body a:where(:hover, :focus, :active) {
	color: var(--dt-text);
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active {
	outline: 0;
}

/* FORMS */
button, input, select, textarea {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	color: var(--dt-text);
}
button, input, textarea {
	font-family: var(--dt-body-font);
}
select {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
}
textarea {
	line-height: 1.5;
	overflow: auto;
	padding-left: 3px;
	vertical-align: top;
	width: 98%;
}
button, input {
	line-height: normal;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border-radius: 3px;
	cursor: pointer;
	-webkit-appearance: button;
	font-size: 1.4rem;
	line-height: 2;
	color: var(--dt-text);
	border: 1px solid var(--dt-border);
	background: var(--dt-surface);
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--dt-accent-light);
	border-color: var(--dt-muted);
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
	border-color: var(--dt-muted);
}
input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
input[type="text"],
textarea {
	border: 1px solid var(--dt-border);
	border-radius: 3px;
}
input[type="text"] {
	padding: 3px;
}
.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* PAGE: top bar, search strip, reading column, footer. Every page is one column (owner 28 Oct 2026), the bars are at
   most 1160 pixels wide. */
/* TOP BAR: surface, site name in the accent with the site icon on its left, tagline below. One line under the bar
   (owner 29 Oct 2026: the page felt cramped, the old theme's second, thicker line is gone). */
.site-header {
	background: var(--dt-surface);
	border-bottom: 1px solid var(--dt-border);
}
.site-branding {
	max-width: 1160px;
	margin: 0 auto;
	overflow: hidden;
}
/* The site name lines up with the reading column below it (owner 29 Oct 2026) */
.site-branding-text {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 0 16px;
}
.site-title {
	margin: 0;
	font-size: 30px;
	line-height: 1.15;
	white-space: nowrap;
}
body .site-title a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dt-heading-font);
	font-weight: var(--dt-heading-weight);
	color: var(--dt-accent);
	text-decoration: none;
}
.site-title a::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background: var(--dt-icon) center / contain no-repeat;
}
.site-description {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--dt-muted);
}

.site-main {
	max-width: 1160px;
	margin: 0 auto;
	overflow: hidden;
}

/* SEARCH STRIP: the DRS search box in the "Top of the page" widget area, as wide as the reading column (owner 28 Oct
   2026), its edges line up with the title and text. DRS limits the box to 520 pixels with !important. */
#top-widgets {
	margin: 0 15px;
	overflow: hidden;
	text-align: center;
	line-height: 1em;
}
#top-widgets .widget {
	margin-top: 10px;
}
#top-widgets .drs-box {
	max-width: 760px !important;
}

/* READING COLUMN: 760 pixels, centred. The ID is what the old theme used, plugin rules inside the column were written
   against its specificity. */
#content {
	max-width: 760px;
	margin: 15px auto 10px;
	overflow: hidden;
}
#content h1 {
	font-size: 1.7em;
	line-height: 1.2em;
	margin-bottom: 10px;
}
#content h2 {
	font-size: 1.5em;
	line-height: 1.2em;
	margin-bottom: 10px;
	clear: none;
}
#content h3 {
	font-size: 1.2em;
	line-height: 1.2em;
	margin-bottom: 10px;
	clear: none;
}
.entry-title a {
	color: var(--dt-text);
}
body .entry-title a:where(:hover, :focus, :active) {
	color: var(--dt-accent);
}

/* FOOTER: the privacy link on top, the copyright below (inc/template.php). Padding is part of the width. */
.site-footer {
	background: var(--dt-surface);
}
.site-info {
	box-sizing: border-box;
	max-width: 1160px;
	margin: 0 auto;
	padding: 12px 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
	color: var(--dt-muted);
}
body .site-info a {
	color: var(--dt-accent);
}

/* POSTS
-------------------------- */
/* The line under the title: the interpreter's picture and name, not a link (no author page, inc/content.php). */
#content .entry-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.9em;
	margin-bottom: 10px;
	color: var(--dt-muted);
}
#content .entry-meta .tell-dream {
	color: var(--dt-accent);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
#content .entry-meta .tell-dream:where(:hover, :focus-visible) {
	text-decoration: underline;
}
/* The link under the title lands here, the heading clear of the screen's top edge */
#dream-form {
	scroll-margin-top: 16px;
}
.entry-meta .byline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--dt-text);
	font-weight: 600;
	font-size: 1.15em;
}
.entry-meta .byline .avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: none;
}
/* the space the old theme's empty category line left under a post's text */
.type-post > .entry-content {
	margin-bottom: 10px;
}
body .entry-content p {
	margin-bottom: 1em;
}

/* The post's body text is a little softer than the palette's text colour (owner 28 Oct 2026: the text looked too
   black and hard to read): --dt-body-text is derived in inc/palette.php so its contrast against the background is 12.5
   in every palette (reading threshold 7). Headings keep the palette's text colour. */
#content .entry-content {
	color: var(--dt-body-text);
}
#content .entry-content :is(h1, h2, h3, h4) {
	color: var(--dt-text);
}

/* Links in the post text (owner 28 Oct 2026, every site): the text keeps the text colour, the underline in the site's
   accent says it is clickable. On hover the text turns the accent too. Only links inside paragraphs: buttons, cards and
   share icons are not in a paragraph. */
#content .entry-content p a {
	color: inherit;
	text-decoration: underline 2px var(--dt-accent);
	text-underline-offset: 0.2em;
}
#content .entry-content p a:where(:hover, :focus, :active) {
	color: var(--dt-accent);
}

/* Touch area (owner 28 Oct 2026): in-text links and the privacy link at the bottom
   grow by an invisible 4 pixels above and below. Vertical padding on an inline element does not change the line height,
   the look stays the same, the height a finger has to hit goes from 25 to 33 pixels. */
#content .entry-content p a,
.site-privacy a {
	position: relative; /* the next line's text must not sit on top of the padding, the tap goes to the link */
	padding-block: 4px;
}

/* Dream page (owner 28 Oct 2026): at most 700 pixels of text a line (about 70 characters). The first paragraph is the
   gist of the dream, slightly larger. The first three paragraphs are the general meaning (meaning, judgement, advice),
   on a long page the cases follow: a thin line under the third, drawn when at least two paragraphs follow it (the last
   being the parent page link). */
.single-post #content .entry-content {
	max-width: 700px;
}
.single-post .entry-content > p:first-of-type {
	font-size: 1.14em;
	line-height: 1.6;
}
.single-post .entry-content > p:nth-of-type(3):nth-last-of-type(n+3) {
	padding-bottom: 1.4em;
	margin-bottom: 1.6em;
	border-bottom: 1px solid var(--dt-border);
}
.dream-parent-link {
	padding-top: 0.75em;
	border-top: 1px solid var(--dt-border);
	color: var(--dt-muted);
}

/* PLUGINS
-------------------------- */
/* DRS search box and results (dream-relevanssi-search writes its own rules with !important) */
body .drs-results .drs-title,
body .drs-net .drs-net-title {
	color: var(--dt-accent); /* the visited state too (owner 28 Oct 2026) */
}
body .drs-box {
	background: var(--dt-bg) !important;
	border-color: var(--dt-border) !important;
	box-shadow: none !important;
}
body .drs-box:focus-within {
	border-color: var(--dt-muted) !important;
	box-shadow: none !important;
}
body .drs-box .drs-box-input {
	font-family: var(--dt-body-font) !important;
	color: var(--dt-text) !important;
}
body .drs-box .drs-box-input::placeholder {
	color: var(--dt-muted) !important;
}
body .drs-box .drs-box-button {
	background: var(--dt-accent) !important;
	color: var(--dt-bg) !important;
	font-family: var(--dt-body-font) !important;
}

/* The second search box above the comments is a section with a background (owner 28 Oct 2026): set apart from the
   page text and the interpreter card, it invites the reader to a second search, no heading (the question is inside the
   box). The background is the light accent, the box stays white on it. */
body #dcf-search {
	box-sizing: border-box;
	margin: 28px 0 24px;
	padding: 22px 20px 4px;
	background: var(--dt-accent-light);
	border-radius: 14px;
}
body #dcf-search .dcf-search-form,
body #dcf-search .drs-box {
	max-width: none !important;
}

/* The dream-comment-features panel is painted with its own custom properties, here they are tied to the site palette */
body #dcf-container {
	--dcf-ink: var(--dt-text);
	--dcf-ink-mute: var(--dt-muted);
	--dcf-surface: var(--dt-bg);
	--dcf-line: var(--dt-border);
	--dcf-accent: var(--dt-accent);
	--dcf-accent-line: var(--dt-border);
	--dcf-accent-wash: var(--dt-accent-light);
	--dcf-headline-ink: var(--dt-text);
	--dcf-display: var(--dt-heading-font);
	font-family: var(--dt-body-font);
}
/* Burhan Emin's introduction was 14 pixels on phones, 16 pixels on every screen (owner 28 Oct 2026) */
body #dcf-container .dcf-author-bio {
	font-size: 16px;
}
body #dcf-container .dcf-author .dcf-name {
	display: inline-block;
	vertical-align: middle;
}
/* "Interpreter" label next to the name in the author box and on the interpreter's comments (owner 28 Oct 2026) */
.somnia-label {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 1px 15px;
	border-radius: 3px;
	background: var(--dt-accent);
	color: #fff;
	font-family: var(--dt-body-font);
	font-size: 10px;
	font-weight: 400;
	line-height: 13px;
}
/* The box shown after a comment is sent and the pre-submit line are outside the panel, their colours are hard-coded */
body .dcf-postsubmit {
	color: var(--dt-text);
	background: var(--dt-surface);
	border-color: var(--dt-border);
	font-family: var(--dt-body-font);
}
body .dcf-postsubmit .dcf-copy-button,
body .dcf-postsubmit .dcf-copy-button.is-done {
	color: var(--dt-accent);
	background: var(--dt-bg);
	border-color: var(--dt-border);
}
body .dcf-postsubmit .dcf-copy-button:hover,
body .dcf-postsubmit .dcf-copy-button:focus {
	background: var(--dt-accent-light);
	border-color: var(--dt-accent);
}
body .dcf-postsubmit .dcf-copy-button:focus-visible {
	outline-color: var(--dt-accent);
}
body .dcf-presubmit {
	color: var(--dt-muted);
	font-family: var(--dt-body-font);
}

/* Share buttons (inc/content.php) from the palette (owner 28 Oct 2026): the muted grey instead of brand colours, the
   accent on hover. */
.share-buttons {
	clear: both;
	margin: 16px 0;
}
.share-buttons a,
.share-buttons button {
	display: inline-block;
	padding: 0 4px;
	border: 0;
	background: none;
	font-size: 32px;
	line-height: 32px;
	vertical-align: middle;
	cursor: pointer;
}
.share-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	background-color: var(--dt-muted);
	transition: background-color .15s;
}
.share-icon svg {
	display: block;
}
.share-buttons a:hover .share-icon,
.share-buttons a:focus-visible .share-icon,
.share-buttons button:hover .share-icon,
.share-buttons button:focus-visible .share-icon {
	background-color: var(--dt-accent);
}

/* Ads (inc/ads.php). The top box keeps its space before the ad arrives, no layout shift. */
.ad {
	display: block;
	clear: both;
	margin: 8px auto;
	text-align: center;
}
.ad-top {
	min-width: 100%;
	min-height: 280px;
}
@media (max-width: 499px) {
	.ad-top {
		min-height: 100vw;
	}
}

/* Cookie notice (inc/content.php) */
#eu-cookie-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999;
	width: 100%;
	min-height: 20px;
	padding: 8px 20px;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--dt-body-font);
	font-size: 13px;
	color: var(--dt-text);
	background: var(--dt-surface);
	border-top: 1px solid var(--dt-border);
}
#eu-cookie-bar[hidden] {
	display: none;
}
#euCookieAcceptWP {
	margin: 0 10px;
	padding: 2px 12px;
	border: 0;
	border-radius: 3px;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	color: var(--dt-bg);
	background: var(--dt-accent);
	cursor: pointer;
}

/* READER MESSAGES (inc/content.php, owner 28 Oct 2026): before the comments, on the home page before the readers'
   dreams. One row scrolled sideways on phone and desktop, the edge of the next card stays visible so the reader sees it
   scrolls. Arrows right of the heading on pointer screens. Cards of equal size: message at most three lines, the dream's
   name at most two, the name one, room is kept for short ones too. */
.somnia-messages {
	margin: 28px 0;
}
#content .somnia-messages-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}
.somnia-messages .testimonials {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	align-items: stretch;
	scroll-snap-type: x mandatory;
	margin: 0;
	padding: 0 0 8px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.somnia-messages .testimonials::-webkit-scrollbar {
	display: none;
}
.somnia-messages .testimonial-card {
	flex: 0 0 82%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	padding: 18px 20px;
	border: 1px solid var(--dt-border);
	border-radius: 8px;
	background: var(--dt-bg);
}
.somnia-messages .testimonial-content {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 4.5em;
	margin-bottom: 10px;
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--dt-body-text);
}
.somnia-messages .testimonial-author {
	margin-bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.85em;
	color: var(--dt-muted);
}
/* on the home page the messages sit inside the page text, where the paragraph spacing of the text applies */
#content .entry-content .somnia-messages p {
	margin-bottom: 1em;
}
#content .somnia-messages .testimonial-card a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 2.8em;
	line-height: 1.4;
	text-decoration: none;
}
.show-comment-button {
	display: inline-block;
	font-size: 0.9em;
}
.somnia-arrows {
	display: none;
}
@media (hover: hover) and (pointer: fine) {
	.somnia-arrows {
		display: flex;
		gap: 8px;
		flex: none;
	}
	.somnia-arrows button {
		width: 36px;
		height: 36px;
		padding: 0;
		border: 1px solid var(--dt-border);
		border-radius: 50%;
		background: var(--dt-bg);
		color: var(--dt-accent);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.somnia-arrows button:hover:not(:disabled) {
		background: var(--dt-accent-light);
	}
	.somnia-arrows button:disabled {
		color: var(--dt-border);
		cursor: default;
	}
	.somnia-arrows svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* READERS' DREAMS on the home page (inc/content.php, owner 28 Oct 2026), a quiet list (owner 29 Oct 2026: the card grid
   felt cramped): no frames and no row lines, the dream's name in the text colour (the accent on hover, 20 red links
   at once were too loud), the reader's name small and grey on the line below (always below: when it
   followed on the same line only where it fitted, the rows were ragged). Two columns on wider screens. The whole row is clickable (one <a>, an invisible layer covers
   the row, the link text stays the dream's name). */
.somnia-readers {
	margin: 40px 0 8px;
}
#content .somnia-readers h2 {
	margin: 36px 0 6px;
}
#content .somnia-readers h2:first-child {
	margin-top: 0;
}
.somnia-reader-note {
	margin: 0 0 10px;
	color: var(--dt-muted);
}
.somnia-reader-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Each row reads as clickable (owner 29 Oct 2026: "ziyaret edilebilir olduğu belli değil"): a chevron on the right, the
   whole row lights up on hover. The row reaches 10 pixels past the column on the left so the text stays in line with
   the heading while the hover background has room. */
.somnia-reader {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	column-gap: 10px;
	margin: 0 0 0 -10px;
	padding: 9px 36px 9px 10px;
	border-radius: 8px;
	transition: background-color .15s;
}
.somnia-reader::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--dt-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .15s;
	pointer-events: none;
}
.somnia-reader:hover {
	background: var(--dt-surface);
}
.somnia-reader:hover::after {
	transform: translateX(3px);
}
.somnia-reader:focus-within {
	outline: 2px solid var(--dt-accent);
	outline-offset: 0;
}
.somnia-reader-name {
	color: var(--dt-muted);
	font-size: 0.85em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.somnia-reader-time {
	color: var(--dt-muted);
	font-size: 0.85em;
}
#content .entry-content .somnia-reader a {
	order: -1;
	flex-basis: 100%;
	line-height: 1.35;
}
.somnia-reader a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* BACK TO TOP (inc/content.php, owner 28 Oct 2026): bottom right. Raised above the cookie
   bar while it is open. */
#somnia-back-to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dt-border);
	border-radius: 50%;
	background: var(--dt-surface);
	color: var(--dt-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	cursor: pointer;
}
#somnia-back-to-top[hidden] {
	display: none;
}
#somnia-back-to-top:hover,
#somnia-back-to-top:focus-visible {
	background: var(--dt-accent-light);
	border-color: var(--dt-accent);
}
#somnia-back-to-top svg {
	width: 22px;
	height: 22px;
	margin: 10px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* WIDER SCREENS AND PHONES
-------------------------- */
@media (min-width: 700px) {
	.somnia-messages .testimonial-card {
		flex-basis: 40%;
	}
	.somnia-reader-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 800px) {
	.site-branding-text {
		max-width: none;
		text-align: center;
	}
}
@media (max-width: 600px) {
	body {
		font-size: 18px;
	}
	.site-title {
		font-size: 22px;
	}
	.site-description {
		font-size: 13px;
	}
	#top-widgets {
		margin: 0;
		padding: 0 16px;
		box-sizing: border-box;
	}
	#content {
		margin-left: 16px;
		margin-right: 16px;
	}
	#content h1 {
		font-size: 1.4em;
	}
	#content h2 {
		font-size: 1.2em;
	}
	#content h3 {
		font-size: 0.9em;
	}
	.entry-meta .byline {
		font-size: 1em;
	}
	.site-info {
		padding: 12px 16px 80px; /* room for the back-to-top button, it must not cover the last line */
	}
	/* Author box: avatar and name side by side, the introduction under them at full width (owner 28 Oct 2026) */
	body #dcf-container .dcf-author {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 12px;
	}
	body #dcf-container .dcf-author-body {
		display: contents;
	}
	body #dcf-container .dcf-author .dcf-headline {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}
	body #dcf-container .dcf-author-bio {
		flex: 0 0 100%;
	}
}

/* HOME PAGE RHYTHM (owner 29 Oct 2026, "boğucu"): more room between the parts of the home page only, posts keep their
   spacing. The paragraph is held near 70 characters a line, the two section headings get one size. */
.home #top-widgets .widget,
.single-post #top-widgets .widget {
	margin-top: 24px;
}
.home #content {
	margin-top: 36px;
}
.home #content h1 {
	margin-bottom: 18px;
}
.home #content .entry-content > p {
	max-width: 660px;
}
.home .ad {
	margin: 28px auto;
}
.home .share-buttons {
	margin: 28px 0;
}
.home .somnia-messages {
	margin: 48px 0;
}
.home .somnia-readers {
	margin-top: 56px;
}
#content .somnia-readers h2,
#content .somnia-messages-title {
	font-size: 1.35em;
	margin-bottom: 14px;
}

/* POST PAGE RHYTHM (owner 29 Oct 2026, "postları da incelettir", Fable's review): the same calm as the home page. The
   text column is untouched, the change is around it: more room at the top, one corner radius (8 px) for the boxes
   above the comments, the interpreter panel in one frame, and a flat comment thread in palette colours. */
.single-post #content {
	margin-top: 32px;
}
.single-post #content h1 {
	margin-bottom: 14px;
}
.single-post #content .entry-meta {
	margin-bottom: 22px;
}
.single-post .ad-top {
	margin: 28px auto;
}
.single-post .somnia-messages {
	margin: 40px 0;
}
.single-post #dcf-container {
	margin-top: 40px;
}
body #dcf-search {
	border-radius: 8px;
}
body #dcf-container .dcf-author {
	border-radius: 8px;
}
body #dcf-container .dcf-cards,
body #dcf-container > button {
	background: transparent;
	border-width: 1px 0 0;
	border-radius: 0;
}
body .dcf-postsubmit {
	background: transparent;
	border-width: 1px 0 0;
	border-radius: 0;
	padding: 14px 0;
}
/* Comments (inc/comments.php): a thread opens with its day on a dividing line, its messages are chat bubbles. Name in
   the text colour, time in the muted grey. */
/* The box takes the whole row, under it the name on the left and Send on the right (owner, 29 Oct 2026: the reader's
   messages are on the right, so is the button that sends them) */
#comments .comment-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 8px;
}
#comments .comment-form p {
	margin: 0;
}
#comments .comment-form-comment {
	flex: 0 0 100%;
}
#comments .comment-form-author {
	flex: 1 1 0;
	min-width: 0;
}
#comments .comment-form .form-submit {
	margin-left: auto;
}
#comments .comment-form-author {
	position: relative;
	max-width: 320px;
}
#comments .comment-form-author input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 96px 8px 10px;
	background: var(--dt-bg);
	border-radius: 8px;
}
#comments .comment-form-comment {
	position: relative;
}
#comments .comment-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px 26px;
	background: var(--dt-bg);
	border-radius: 8px;
}
/* Character count inside the box, bottom right, in the name box at its right end (inc/comments.php). Red while the
   text is under the fewest, whatever the site's palette (owner, 29 Oct 2026). */
.somnia-count {
	position: absolute;
	right: 10px;
	bottom: 6px;
	font-size: 0.68em;
	line-height: 1;
	color: var(--dt-muted);
	pointer-events: none;
}
/* The name's count is the smallest, it only says how much room is left (owner, 29 Oct 2026) */
#comments .comment-form-author .somnia-count {
	top: 50%;
	bottom: auto;
	right: 8px;
	font-size: 0.56em;
	transform: translateY(-50%);
}
.somnia-count.is-short {
	color: #c62828;
}
#comments input:focus,
#comments textarea:focus {
	outline: 2px solid var(--dt-accent-light);
	border-color: var(--dt-accent);
}
body #comments .form-submit .somnia-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 22px;
	font-size: 1em;
	color: var(--dt-bg);
	background: var(--dt-accent);
	border-color: var(--dt-accent);
	border-radius: 8px;
}
body #comments .form-submit .somnia-button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
body #comments .form-submit .somnia-button:where(:hover, :focus-visible) {
	color: var(--dt-bg);
	background: var(--dt-text);
	border-color: var(--dt-text);
}
.somnia-sent {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--dt-accent-light);
	border-left: 3px solid var(--dt-accent);
	border-radius: 0 8px 8px 0;
}
#comments .comment-reply-title {
	margin: 0 0 10px;
	font-family: var(--dt-heading-font);
	font-weight: var(--dt-heading-weight);
	color: var(--dt-text);
}
#comments .comment-reply-title small {
	margin-left: 10px;
	font-family: var(--dt-body-font);
	font-weight: 400;
	font-size: 0.85em;
}
/* The heading over the threads (comments.php) looks like the form's, the form and the threads read as two parts */
#content .somnia-comments-title {
	margin-top: 40px;
}
#comments .comment-list {
	padding-top: 8px;
}
#comments .comment-list > .comment {
	padding: 0 0 36px;
}
/* The thread's day on its dividing line (inc/comments.php), a chat's date chip */
#comments .comment-day {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-size: 0.8em;
	color: var(--dt-muted);
}
#comments .comment-day::before,
#comments .comment-day::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--dt-border);
}
#comments .comment-day span {
	padding: 3px 12px;
	background: var(--dt-surface);
	border-radius: 999px;
}
/* Chat bubbles (inc/comments.php): WordPress puts a reply straight inside its parent, the replies are laid flat under
   it. The reader writes on the right in the accent light, the interpreter answers on the left in the surface colour,
   each bubble at most 85 percent of the column, its top corner on the speaker's side square. */
#comments .comment {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
#comments .comment.is-interpreter {
	align-items: flex-start;
}
#comments .comment > .comment,
#comments .comment > .comment-respond {
	align-self: stretch;
	margin-top: 14px;
}
/* The bubble and its reply link, the link under the bubble's bottom right corner */
#comments .comment-body {
	display: flex;
	flex-direction: column;
	max-width: 85%;
}
/* Under an answer "Share" on the left, the reply link on the right (inc/comments.php) */
#comments .comment-actions {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-top: 6px;
}
#comments .comment-actions .comment-reply-link {
	margin: 0 0 0 auto;
}
#comments .somnia-share {
	padding: 0;
	border: 0;
	background: none;
	color: var(--dt-accent);
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
}
#comments .somnia-share:where(:hover, :focus-visible) {
	text-decoration: underline;
}
#comments .comment-bubble {
	box-sizing: border-box;
	padding: 10px 14px 8px;
	background: var(--dt-accent-light);
	border-radius: 8px 0 8px 8px;
}
#comments .is-interpreter > .comment-body > .comment-bubble {
	background: var(--dt-surface);
	border-radius: 0 8px 8px 8px;
}
#comments .comment-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
#comments .comment-head .avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: none;
}
#comments .comment-head .somnia-label {
	margin-left: 0;
	padding: 1px 10px;
	font-size: 12px;
}
/* The sender's own message waiting for its interpretation (inc/comments.php), quieter than the interpreter's label */
#comments .comment-head .somnia-label.is-waiting {
	background: none;
	padding: 0;
	color: var(--dt-muted);
}
#comments #somnia-own {
	padding-top: 24px;
}
/* The site's own muted colour, the browser's default grey fell under 4.5:1 and sat outside the palette */
#comments input::placeholder,
#comments textarea::placeholder {
	color: var(--dt-muted);
	opacity: 1;
}
#comments .comment-name {
	font-weight: 600;
	color: var(--dt-text);
}
#comments .comment-text {
	line-height: 1.6;
	color: var(--dt-body-text);
	overflow-wrap: anywhere;
}
#comments .comment-text p {
	margin: 0 0 6px;
}
#comments .comment-date {
	display: block;
	text-align: right;
	font-size: 0.8em;
	color: var(--dt-muted);
}
#comments .comment-reply-link {
	margin-top: 6px;
	font-size: 0.9em;
	font-weight: 600;
}
#comments .pagination {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--dt-border);
}
#comments .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
#comments .pagination .page-numbers {
	display: inline-block;
	min-width: 36px;
	padding: 6px 4px;
	box-sizing: border-box;
	text-align: center;
	border: 1px solid var(--dt-border);
	border-radius: 8px;
}
#comments .pagination .page-numbers.current {
	color: var(--dt-bg);
	background: var(--dt-accent);
	border-color: var(--dt-accent);
}
#comments .pagination .page-numbers.dots {
	border-color: transparent;
}
@media (max-width: 600px) {
	#comments .comment-body {
		max-width: 90%;
	}
}

/* Comment form heading (owner, 29 Oct 2026: it names the writer and should catch the eye). Accent colour in the heading
   font with a short accent bar under it, centred like the note below it. */
#content .somnia-form-title {
	margin: 0 0 14px;
	padding-top: 22px;
	font-family: var(--dt-heading-font);
	font-weight: var(--dt-heading-weight);
	font-size: 1.6em;
	line-height: 1.25;
	text-align: center;
	color: var(--dt-accent);
}
#content .somnia-form-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 2px;
	background: var(--dt-accent);
}

/* "Rüyam yorumlandı mı?" (owner, 29 Oct 2026): no longer a button, a heading over the newest five rows that are always
   open. The rows arrive after the first paint, so their box holds five rows' height and the form below does not move.
   The link under them says where it goes: the home page, with an arrow like the readers' rows there. */
#content #dcf-container .dcf-list-title {
	margin: 32px 0 10px;
	font-size: 1.35em;
}
#dcf-container #dcf-list {
	margin-top: 0;
}
#dcf-container #dcf-rows {
	min-height: 186px; /* five rows measured 29 Oct 2026: 186 px on the desktop, 212 px on a 390 px phone */
}
@media (max-width: 600px) {
	#dcf-container #dcf-rows {
		min-height: 212px;
	}
}
#dcf-container .dcf-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-weight: 600;
	color: var(--dt-accent);
	text-decoration: none;
}
#dcf-container .dcf-all::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .15s;
}
#dcf-container .dcf-all:hover::after {
	transform: translateX(3px);
}

/* Links outside the text whose plugin paints its own colour or underline, brought to the one link look (LINKS) */
#dcf-container .dream-comment-features a {
	color: var(--dt-accent);
	text-decoration: none;
}
body #dcf-container .dream-comment-features a:where(:hover, :focus-visible),
body #dcf-container .dcf-all:where(:hover, :focus-visible),
body .drs-net .drs-net-title:where(:hover, :focus-visible),
body .testimonial-card .show-comment-button:where(:hover, :focus-visible),
body .site-info a:where(:hover, :focus-visible) {
	color: var(--dt-text);
}
body .drs-net .drs-net-title:hover,
body .drs-net .drs-net-title:focus-visible {
	text-decoration: none !important; /* the plugin underlines it with !important */
}