/*
Theme Name: Jette Jørs 2026
Theme URI: https://jettejors.com
Author: KIRK Studio
Description: Enkelt portfolio-tema til jettejors.com. Viser eksisterende Portfolio-projekter og deres billeder. Typografi, afstande og menupunkter styres under Udseende → Tilpas.
Version: 1.4
Requires at least: 5.9
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: jettejors-2026
*/

/* ------------------------------------------------------------
   Farver og tokens. Værdier fra Tilpas sættes i <head> via functions.php
   ------------------------------------------------------------ */
:root {
	--bg: #ffffff;
	--fg: #1a1a1a;
	--mute: #6b6966;
	--line: #dedbd5;
	--ph: #e4e1dc;
	box-sizing: border-box;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	height: 100%;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --bg: #000000; --fg: #e8e6e2; --mute: #9a9792; --line: #2a2927; --ph: #1c1b1a; }
}
:root[data-theme="dark"] { --bg: #000000; --fg: #e8e6e2; --mute: #9a9792; --line: #2a2927; --ph: #1c1b1a; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.jj {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--jj-font);
	font-size: var(--jj-fs);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* WordPress' admin-bjælke når man er logget ind */
body.jj.admin-bar { height: calc(100% - 32px); }
@media (max-width: 782px) { body.jj.admin-bar { height: calc(100% - 46px); } }

.jj button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.jj a { color: inherit; text-decoration: none; }
.jj :focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ------------------------------------------------------------
   Top
   ------------------------------------------------------------ */
.jj-head {
	flex: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 22px var(--jj-margin) 0;
	height: 64px;
}
.jj-l, .jj-r { display: flex; align-items: baseline; gap: 22px; }
.jj-l { gap: var(--jj-gap); }
.jj-name { font-weight: var(--jj-name-weight); padding: 10px 0; }
.jj-head button, .jj-head a { padding: 10px 0; }

/* ------------------------------------------------------------
   Visninger
   ------------------------------------------------------------ */
.jj-main { flex: 1; min-height: 0; position: relative; }
.jj-view { position: absolute; inset: 0; display: none; }
.jj-view.on { display: flex; flex-direction: column; }

/* Enkelt værk */
.jj-stage {
	flex: 1;
	min-height: 0;
	position: relative;
	padding: 12px var(--jj-margin) 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jj-fig { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.jj-fig img, .jj-fig video { display: block; user-select: none; -webkit-user-drag: none; background: var(--ph); }
.jj-fig iframe { display: block; border: 0; background: #000; }
.jj-fig figcaption { height: 18px; margin-top: 8px; line-height: 18px; text-transform: lowercase; white-space: nowrap; }
.jj-fig figcaption.off { visibility: hidden; }
.jj-hit { position: absolute; top: 0; bottom: 0; width: 50%; }
.jj-hit.a { left: 0; cursor: w-resize; }
.jj-hit.b { right: 0; cursor: e-resize; }
/* Video og embeds skal kunne betjenes: klikfladerne stopper ved kanten af mediet */
.jj-stage.has-player .jj-hit { width: var(--jj-margin); }

/* Work-grid */
.jj-scroll { overflow-y: auto; padding: 12px var(--jj-margin) 64px; flex: 1; -webkit-overflow-scrolling: touch; }
.jj-grid { display: grid; grid-template-columns: repeat(var(--jj-cols), minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: end; }
.jj-grid button { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.jj-grid img, .jj-grid .phs { width: 100%; height: auto; display: block; object-fit: cover; background: var(--ph); }
.jj-grid .phs { display: flex; align-items: center; justify-content: center; color: var(--mute); }
.jj-grid .sn { color: var(--mute); text-transform: lowercase; opacity: 0; transition: opacity .15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
	.jj-grid button:hover .sn, .jj-grid button:focus-visible .sn { opacity: 1; }
}
.jj-play { width: 44px; height: 44px; }

/* Contact */
.jj-contact { display: flex; justify-content: center; padding: 12px var(--jj-margin); }
.jj-contact div { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Index og Prints (slås til under Tilpas) */
.jj-row { display: grid; grid-template-columns: 64px 1fr 200px 80px; width: 100%; padding: 12px 0; border-top: 1px solid var(--line); text-transform: lowercase; }
.jj-row .m { color: var(--mute); }
.jj-row .y { text-align: right; color: var(--mute); }
.jj-prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 64px; align-items: end; }
.jj-prints figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.jj-prints img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.jj-prints figcaption { display: flex; flex-direction: column; }
.jj-prints .mu { color: var(--mute); }
.jj-buy { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   Skærmstørrelser
   ------------------------------------------------------------ */
@media (min-width: 761px) and (max-width: 1100px) {
	.jj-grid { grid-template-columns: repeat(var(--jj-cols-tab), minmax(0, 1fr)); }
	.jj-prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	body.jj { --jj-margin: 16px; }
	.jj-head { padding-top: 16px; height: 56px; }
	.jj-l, .jj-r { gap: 16px; }
	.jj-l { gap: min(var(--jj-gap), 40px); }
	.jj-stage { padding: 8px var(--jj-margin) 16px; }
	.jj-scroll { padding-bottom: 48px; }
	.jj-grid { grid-template-columns: 1fr; row-gap: 24px; }
	.jj-prints { grid-template-columns: 1fr; }
	.jj-row { grid-template-columns: 36px 1fr 48px; }
	.jj-row .m:nth-child(3) { display: none; }
}