/*
Theme Name: Rimi
Theme URI: https://danielerimi.com/
Author: Tania Cagnazzo
Description: Tema minimale per il portfolio fotografico di Daniele Rimi. Una foto alla volta, testo piccolo negli angoli, progetti gestiti dal post type Portfolio.
Version: 1.0.5
Requires at least: 6.3
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rimi
*/

/* I colori, il carattere e la dimensione delle foto arrivano dal Customizer come variabili CSS (vedi inc/customizer.php). */
:root {
	color-scheme: light;
	--bg: #fafaf8;
	--fg: #1b1b1a;
	--muted: #8f8f8a;
	--line: #e6e6e1;
	--panel: #ffffff;
	--f: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs: 12.5px;
	--title: clamp(1.6rem, 2.6vw, 2.4rem);
	--photo: 76vh;
	--g: clamp(16px, 2.6vw, 40px);
	--gl: max(var(--g), env(safe-area-inset-left, 0px));
	--gr: max(var(--g), env(safe-area-inset-right, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--fg); }
body {
	margin: 0;
	font-family: var(--f);
	font-size: var(--fs);
	line-height: 1.55;
	letter-spacing: .005em;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
	overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
html { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.rm-m { color: var(--muted); }
.rm-u { transition: color .3s; }
.rm-u:hover { color: var(--muted); }
.screen-reader-text, .rm-skip:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.rm-skip:focus { position: fixed; z-index: 100; top: 12px; left: 12px; background: var(--fg); color: var(--bg); padding: .5rem .8rem; }

/* Angoli fissi */
.rm-c { position: fixed; z-index: 20; display: flex; gap: 1.6rem; align-items: baseline; margin: 0; }
.rm-tl { top: calc(env(safe-area-inset-top, 0px) + 22px); left: var(--gl); }
.rm-tr { top: calc(env(safe-area-inset-top, 0px) + 22px); right: var(--gr); }
.rm-bl { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); left: var(--gl); }
.rm-br { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); right: var(--gr); }
.rm-site { margin: 0; font: inherit; }
.rm-tl .rm-name { font-weight: 500; }
.rm-tr ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.rm-tr .is-current a, .rm-tr a[aria-current="page"] { color: var(--muted); }
/* Partita IVA e privacy, solo in home.
   Su schermi larghi: in verticale lungo il bordo destro, come una nota a margine.
   Su telefono e tablet: l'ultima riga in fondo, sotto titolo e contatore. */
.rm-legal { position: fixed; z-index: 20; margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap;
	right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.rm-legal a:hover { color: var(--fg); }
@media (max-width: 1000px) {
	.rm-legal { writing-mode: horizontal-tb; transform: none; top: auto; right: auto; left: var(--gl);
		bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); font-size: 10.5px; }
	.view-show .rm-bl, .view-show .rm-br, .view-index.home .rm-br { bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); }
}
.rm-credits a:hover { color: var(--fg); }
.admin-bar .rm-tl, .admin-bar .rm-tr { top: calc(env(safe-area-inset-top, 0px) + 54px); }

/* Fasce di sfondo sotto gli angoli (solo telefono) */
.rm-band { display: none; position: fixed; left: 0; right: 0; z-index: 19; background: var(--bg); }
.rm-band.t { top: 0; height: calc(env(safe-area-inset-top, 0px) + 56px); }
.rm-band.b { bottom: 0; height: calc(env(safe-area-inset-bottom, 0px) + 56px); }

/* Home: proiezione */
.rm-stage {
	height: 100vh; height: 100svh;
	display: grid; place-items: center;
	padding: 84px var(--gr) 84px var(--gl);
	position: relative; user-select: none; -webkit-user-select: none;
}
.rm-stage img {
	max-height: min(var(--photo), calc(100svh - 168px));
	max-width: min(72vw, 1200px);
	width: auto; height: auto;
	transition: opacity .45s ease;
}
.rm-stage img.is-out { opacity: 0; }
.rm-hit { position: absolute; top: 0; bottom: 0; width: 50%; }
.rm-hit:focus { outline: none; }
.rm-hit:focus-visible { outline: 1px solid var(--fg); outline-offset: -8px; }
.rm-hit.prev { left: 0; }
.rm-hit.next { right: 0; }
@media (hover: hover) { .rm-hit { cursor: none; } }
.rm-label { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.rm-label.is-on { opacity: 1; }
@media (hover: none) { .rm-label { display: none; } }
.rm-empty { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px var(--gr) 120px var(--gl); color: var(--muted); }

/* Indice */
.rm-idx { padding: clamp(120px, 20vh, 200px) var(--gr) 18vh var(--gl); max-width: 1500px; }
.rm-idx h1 { font-weight: 300; font-size: var(--title); letter-spacing: -.02em; margin: 0 0 4rem; line-height: 1.1; }
.rm-idx ul { list-style: none; margin: 0; padding: 0; }
.rm-idx li a {
	display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; padding-block: 1.1rem;
	border-top: 1px solid var(--line); transition: color .3s;
}
.rm-idx li:last-child a { border-bottom: 1px solid var(--line); }
.rm-idx ul:hover a { color: var(--muted); }
.rm-idx ul a:hover, .rm-idx ul a:focus-visible { color: var(--fg); }
.rm-idx li a > span:first-child { flex: 0 0 15rem; min-width: 0; }
.rm-idx .rm-cat { flex: 0 0 8rem; }
.rm-idx .rm-year { flex: 0 0 4rem; }
.rm-th { display: flex; flex: 1 1 0; gap: 6px; justify-content: flex-end; min-width: 0; overflow: hidden; }
.rm-th img { height: 52px; width: auto; max-width: none; opacity: .92; transition: opacity .3s, filter .3s; }
.rm-bw .rm-th img { filter: grayscale(1); }
.rm-idx ul a:hover .rm-th img { filter: none; opacity: 1; }
.rm-filters { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: -2.6rem 0 2.6rem; color: var(--muted); }
.rm-filters a:hover, .rm-filters .is-current { color: var(--fg); }

/* Progetto */
.rm-intro { padding: clamp(130px, 24vh, 240px) var(--gr) 0 var(--gl); display: grid; justify-items: center; text-align: center; gap: 1.8rem; }
.rm-intro h1 { margin: 0; font-weight: 300; font-size: var(--title); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.rm-intro dl { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 2rem; }
.rm-intro dl div { display: flex; gap: .5rem; }
.rm-intro dt { color: var(--muted); }
.rm-intro dd { margin: 0; }
.rm-intro .rm-lead { margin: 0; max-width: 46ch; font-size: calc(var(--fs) + 1.5px); line-height: 1.65; text-wrap: pretty; }
.rm-seq { display: flex; flex-direction: column; gap: clamp(5rem, 22vh, 14rem); padding: clamp(6rem, 20vh, 12rem) var(--gr) 8rem var(--gl); }
.rm-seq figure { margin: 0 auto; width: fit-content; max-width: 100%; }
.rm-seq figure.a-r { margin-right: 6vw; }
.rm-seq figure.a-l { margin-left: 6vw; }
.rm-seq img { max-height: var(--photo); width: auto; max-width: min(100%, 1200px); }
.rm-seq figcaption { display: flex; justify-content: space-between; gap: 2rem; margin-top: .7rem; color: var(--muted); }
.rm-text { padding: 0 var(--gr) 10rem var(--gl); display: grid; justify-items: center; }
.rm-text > div { max-width: 60ch; width: 100%; font-size: calc(var(--fs) + 1.5px); line-height: 1.7; }
.rm-text h2, .rm-text h3, .rm-text h4 { font-weight: 500; font-size: 1em; margin: 2.2em 0 .6em; }
.rm-text p { margin: 0 0 1.1em; }
.rm-text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rm-next { display: grid; justify-items: center; gap: .4rem; padding: 0 var(--gr) 22vh var(--gl); text-align: center; }
.rm-next a { font-weight: 300; font-size: var(--title); letter-spacing: -.02em; transition: color .3s; }
.rm-next a:hover { color: var(--muted); }

/* Info */
.rm-info { padding: clamp(130px, 24vh, 240px) var(--gr) 20vh var(--gl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--g); }
.rm-bio { grid-column: 1 / span 5; font-weight: 300; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.rm-bio p { margin: 0 0 .8em; }
.rm-cols { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem var(--g); margin: 0; align-content: start; }
.rm-cols dt { color: var(--muted); margin-bottom: .4rem; }
.rm-cols dd { margin: 0; }
.rm-cols blockquote { margin: 0 0 1rem; }
.rm-mail { user-select: all; -webkit-user-select: all; }
.rm-copy { color: var(--muted); margin-left: .6rem; }
.rm-more { grid-column: 1 / span 5; }
.rm-more > *:first-child { margin-top: 0; }

/* Pagine semplici (privacy, ecc.) */
.rm-page { padding: clamp(130px, 22vh, 220px) var(--gr) 16vh var(--gl); display: grid; justify-items: center; }
.rm-page > div { width: 100%; max-width: 68ch; font-size: calc(var(--fs) + 1px); line-height: 1.7; }
.rm-page h1 { font-weight: 300; font-size: var(--title); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 3rem; }
.rm-page h2, .rm-page h3 { font-weight: 500; font-size: 1.05em; margin: 2.4em 0 .6em; }
.rm-page a { text-decoration: underline; text-underline-offset: 3px; }
.rm-page img { margin-block: 2rem; }

@media (max-width: 860px) {
	.rm-bio, .rm-cols, .rm-more { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
	.rm-idx li a > span:first-child { flex: 1 1 auto; }
	.rm-idx .rm-cat { display: none; }
	.rm-idx .rm-year { flex: 0 0 auto; }
	.rm-th { flex: 1 1 100%; justify-content: flex-start; }
	.rm-bw .rm-th img { filter: none; }
}
@media (max-width: 700px) {
	.rm-role { display: none; }
	body:not(.view-show) .rm-band.t { display: block; }
	body.view-project .rm-band.b { display: block; }
	.view-index .rm-bl, .view-index .rm-br, .view-info .rm-bl, .view-info .rm-br, .view-page .rm-bl, .view-page .rm-br { display: none; }
	.rm-stage { padding-left: 0; padding-right: 0; }
	.rm-stage img { max-width: 100%; max-height: calc(100svh - 150px); }
	.rm-intro { justify-items: start; text-align: left; gap: 1.4rem; }
	.rm-intro dl { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; width: 100%; }
	.rm-intro dl div { display: block; }
	.rm-text { justify-items: start; }
	.rm-seq { gap: 4.5rem; padding-left: 0; padding-right: 0; }
	.rm-seq figure, .rm-seq figure.a-r, .rm-seq figure.a-l { width: 100%; margin-inline: 0; }
	.rm-seq img { max-height: none; width: 100%; }
	.rm-seq figcaption { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 480px) {
	.rm-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

.rm-more { font-size: calc(var(--fs) + 1.5px); line-height: 1.7; max-width: 60ch; }
.rm-more p { margin: 0 0 1.1em; }
.rm-empty a { color: var(--fg); }

/* Fine pagina (tutte le pagine tranne la proiezione): voci legali e crediti.
   Lo spazio sotto lascia posto agli angoli fissi in basso. */
.rm-foot {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem;
	border-top: 1px solid var(--line);
	padding: 1.2rem var(--gr) calc(env(safe-area-inset-bottom, 0px) + 72px) var(--gl);
	font-size: 11.5px;
}
.rm-foot p { margin: 0; }
.rm-foot a, .rm-foot button { color: inherit; }
.rm-foot a:hover, .rm-foot button:hover { color: var(--fg); }
.rm-idx, .rm-info { padding-bottom: 12vh; }
.rm-next { padding-bottom: 14vh; }
@media (max-width: 700px) {
	.rm-foot { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }
	.view-project .rm-foot { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
}
/* Il testo delle pagine non eredita il maiuscolo dagli stili di Elementor, se è ancora attivo. */
.rm-page h1, .rm-page h2, .rm-page h3, .rm-page h4, .rm-page p, .rm-page li, .rm-page strong { text-transform: none; letter-spacing: normal; }