/*
Theme Name: Lori — A occhi chiusi
Theme URI: https://www.lorivio.it
Description: Tema su misura per un portfolio di illustrazioni. Colonna singola, opere grandi una sotto l'altra con la descrizione, estetica quieta e modalità chiara/scura. Costruito per lori-lori.
Author: lori-lori
Version: 1.0
Requires at least: 6.0
License: GNU General Public License v2 or later
Text Domain: lori
*/

/* ============================================================
   VARIABILI E TEMA CHIARO / SCURO
   ============================================================ */
:root{
	--bg:        #ffffff;
	--bg-soft:   #f5f5f3;
	--text:      #1b1b1b;
	--muted:     #6c6c6c;
	--line:      rgba(0,0,0,.12);
	--link:      #1b1b1b;
	--content-width: 880px;
	--text-width:    640px;
}
[data-theme="dark"]{
	--bg:        #121212;
	--bg-soft:   #1c1c1c;
	--text:      #e8e8e6;
	--muted:     #9b9b99;
	--line:      rgba(255,255,255,.14);
	--link:      #e8e8e6;
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .35s ease, color .35s ease;
}

img{ max-width: 100%; height: auto; }

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: .2em; }

.wrap{
	width: 100%;
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ============================================================
   INTESTAZIONE
   ============================================================ */
.site-header{
	border-bottom: 1px solid var(--line);
}
.site-header .wrap{
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 72px;
}
.site-title{
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.site-title:hover{ text-decoration: none; }

.site-nav{ margin-left: auto; }
.nav-menu{
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-menu a{
	font-size: .95rem;
	color: var(--muted);
}
.nav-menu a:hover{ color: var(--text); text-decoration: none; }
.nav-menu .current-menu-item a{ color: var(--text); }

/* Interruttore chiaro / scuro */
.theme-toggle{
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	width: 38px;
	height: 38px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background-color .25s ease, border-color .25s ease;
}
.theme-toggle:hover{ background: var(--bg-soft); }
.theme-toggle svg{ display: block; }
.theme-toggle .icon-moon{ display: none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }

/* ============================================================
   ELENCO OPERE (home) — una sotto l'altra
   ============================================================ */
.site-main{ padding-top: 56px; padding-bottom: 56px; }

.artwork{
	margin: 0 auto 6rem auto;
	text-align: center;
}
.artwork:last-child{ margin-bottom: 2rem; }

.artwork__image{ display: block; line-height: 0; }
.artwork__image img{
	width: 100%;
	display: block;
	margin: 0 auto;
}
a.artwork__image img{ transition: opacity .35s ease; }
a.artwork__image:hover img{ opacity: .9; }

.artwork__head{ margin-top: 1.4rem; }
.artwork__title{
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}
.artwork__title a:hover{ text-decoration: none; color: var(--muted); }

.artwork__desc{
	max-width: var(--text-width);
	margin: .9rem auto 0 auto;
	color: var(--text);
	text-align: left;
}
.artwork__desc p{ margin: 0 0 1rem 0; }
.artwork__desc p:last-child{ margin-bottom: 0; }
/* immagini inserite dentro al testo: centrate, come il titolo */
.artwork__desc img,
.entry img{
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   OPERA SINGOLA
   ============================================================ */
.artwork--single .artwork__title{ font-size: 1.7rem; }

.post-nav{
	max-width: var(--text-width);
	margin: 4rem auto 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--line);
	padding-top: 1.4rem;
	font-size: .95rem;
}
.post-nav__next{ margin-left: auto; text-align: right; }
.post-nav a{ color: var(--muted); }
.post-nav a:hover{ color: var(--text); text-decoration: none; }

/* ============================================================
   PAGINE (es. Informazioni e contatti)
   ============================================================ */
.page-content,
.entry{
	max-width: var(--text-width);
	margin-left: auto;
	margin-right: auto;
}
.page-title{
	font-size: 1.7rem;
	font-weight: 500;
	margin: 0 0 1.4rem 0;
}

/* ============================================================
   PAGINAZIONE
   ============================================================ */
.pagination{
	max-width: var(--text-width);
	margin: 2rem auto 0 auto;
	text-align: center;
}
.pagination .page-numbers{
	display: inline-block;
	padding: 6px 12px;
	margin: 0 3px;
	color: var(--muted);
	border-radius: 8px;
}
.pagination .page-numbers.current{ color: var(--text); font-weight: 600; }
.pagination a.page-numbers:hover{ background: var(--bg-soft); text-decoration: none; }

/* ============================================================
   COMMENTI
   ============================================================ */
.comments{
	max-width: var(--text-width);
	margin: 4rem auto 0 auto;
	border-top: 1px solid var(--line);
	padding-top: 2rem;
}
.comments__title{ font-size: 1.2rem; font-weight: 500; margin: 0 0 1.5rem 0; }
.comment-list{ list-style: none; margin: 0; padding: 0; }
.comment-list ol{ list-style: none; }
.comments :where(input[type=text], input[type=email], input[type=url], textarea){
	width: 100%;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	color: var(--text);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	margin-top: 4px;
}
.comments .form-submit input{
	background: var(--text);
	color: var(--bg);
	border: 0;
	border-radius: 999px;
	padding: 10px 26px;
	cursor: pointer;
	font: inherit;
}

/* ============================================================
   PIÈ DI PAGINA
   ============================================================ */
.site-footer{
	border-top: 1px solid var(--line);
	margin-top: 5rem;
	padding: 28px 0;
	color: var(--muted);
	font-size: .9rem;
	text-align: center;
}
.site-footer p{ margin: 0; }

/* ============================================================
   SMARTPHONE
   ============================================================ */
@media (max-width: 600px){
	body{ font-size: 17px; }
	.site-header .wrap{ flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 14px; gap: 12px; }
	.site-nav{ margin-left: 0; order: 3; width: 100%; }
	.nav-menu{ gap: 16px; flex-wrap: wrap; }
	.theme-toggle{ margin-left: auto; }
	.site-main{ padding-top: 36px; }
	.artwork{ margin-bottom: 4rem; }
	.artwork__title{ font-size: 1.25rem; }
}