/*
Theme Name: ATDT Noclick.se
Theme URI: https://www.noclick.se/
Description: GeneratePress-barntema för noclick.se, guider om att få saker gjorda utan att klicka. Identitet: tangentbordets material. Kapselgrå yta, bläckblå text, bärnsten från Caps Lock-lampan som enda signalfärg, tangentkapseln som motiv (logotyp, kbd, fokusmarkering). Atkinson Hyperlegible Next och Mono. Del av ATDT-nätverkets temarkitektur.
Author: Atdt AB
Template: generatepress
Version: 0.1.3
Text Domain: atdt-gp-noclick-se
*/

/* ---------- Grund ---------- */

body {
	background: var(--atdt-bg);
	color: var(--atdt-ink);
	font-family: var(--atdt-font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--atdt-font-display);
	color: var(--atdt-ink);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.15;
}
h1, .entry-title { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.entry-content h2 { font-size: 1.65rem; font-weight: 700; margin-top: 2.2em; }
.entry-content h3 { font-size: 1.3rem; font-weight: 700; margin-top: 1.8em; }

.entry-content h2,
.entry-content h3 {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

a {
	color: var(--atdt-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover { color: var(--atdt-ink); text-decoration-thickness: 2px; }

/* ---------- Fokus: sajtens signatur ----------
   Den som navigerar med tangentbordet ska alltid se var hen är.
   Bärnstensram med bläckkant, synlig på både ljus och mörk yta. */

:focus-visible {
	outline: 3px solid var(--atdt-led) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px var(--atdt-ink) !important;
	border-radius: 3px;
}

.skip-link.screen-reader-text:focus {
	background: var(--atdt-surface) !important;
	color: var(--atdt-ink) !important;
	font-family: var(--atdt-font-display);
	font-weight: 700;
	font-size: 1rem !important;
	border: 1px solid var(--atdt-neutral);
	border-bottom-width: 4px;
	border-bottom-color: var(--atdt-key-shadow);
	border-radius: var(--atdt-radius);
	padding: 0.6em 1em !important;
}

/* ---------- Tangentkapseln ---------- */

kbd,
.entry-content kbd {
	display: inline-block;
	font-family: var(--atdt-font-mono);
	font-size: 0.82em;
	font-weight: 500;
	line-height: 1.2;
	color: var(--atdt-ink);
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-bottom: 3px solid var(--atdt-key-shadow);
	border-radius: var(--atdt-radius);
	padding: 0.18em 0.5em 0.12em;
	margin: 0 0.08em;
	min-width: 1.6em;
	text-align: center;
	vertical-align: 0.08em;
	white-space: nowrap;
	box-shadow: none;
}
kbd kbd { border: 0; padding: 0; margin: 0; min-width: 0; background: none; }

code {
	font-family: var(--atdt-font-mono);
	font-size: 0.88em;
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-radius: 4px;
	padding: 0.05em 0.35em;
	color: var(--atdt-ink);
}

/* ---------- Sidhuvud ---------- */

.site-header {
	background: var(--atdt-bg);
	border-bottom: 1px solid var(--atdt-neutral);
}
.inside-header { padding-top: 22px; padding-bottom: 22px; }

.main-title { font-size: 1.35rem; line-height: 1; }
.main-title a,
.site-header .main-title a {
	color: var(--atdt-ink);
	text-decoration: none;
	font-family: var(--atdt-font-display);
	font-weight: 800;
	letter-spacing: 0;
}

.atdt-keycap-logo {
	position: relative;
	display: inline-block;
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-bottom: 5px solid var(--atdt-key-shadow);
	border-radius: 8px;
	padding: 0.5em 1.6em 0.42em 0.75em;
	transition: transform 80ms ease, border-bottom-width 80ms ease;
}
.atdt-led {
	position: absolute;
	top: 0.5em;
	right: 0.55em;
	width: 0.42em;
	height: 0.42em;
	border-radius: 50%;
	background: var(--atdt-led);
	box-shadow: 0 0 0 1px rgba(154, 74, 7, 0.45);
}
.main-title a:hover .atdt-keycap-logo,
.main-title a:active .atdt-keycap-logo {
	transform: translateY(2px);
	border-bottom-width: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.atdt-keycap-logo { transition: none; }
}

.site-description { color: var(--atdt-muted); }

/* ---------- Meny ---------- */

.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul ul {
	background: var(--atdt-bg) !important;
	box-shadow: none !important;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items a {
	color: var(--atdt-ink) !important;
	font-family: var(--atdt-font-display);
	font-weight: 700;
	font-size: 1rem;
}
.main-navigation .main-nav ul li a { padding-left: 16px; padding-right: 16px; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
	color: var(--atdt-accent) !important;
	background: transparent !important;
}
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
	box-shadow: inset 0 -3px 0 var(--atdt-led);
}
.main-navigation ul ul { border: 1px solid var(--atdt-neutral); }

.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation.toggled .menu-toggle {
	background: transparent !important;
}

/* Sökfältet i menyn */
.navigation-search input[type="search"],
.navigation-search.nav-search-active input {
	background: var(--atdt-surface) !important;
	color: var(--atdt-ink) !important;
	border: 1px solid var(--atdt-neutral) !important;
}

/* ---------- Startsidans ingång ---------- */

.atdt-intro {
	border-bottom: 1px solid var(--atdt-neutral);
	background: var(--atdt-bg);
}
.atdt-intro__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 40px 48px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 48px;
	align-items: end;
}
.atdt-intro__rubrik {
	grid-column: 1;
	margin: 0;
	font-family: var(--atdt-font-display);
	font-weight: 800;
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--atdt-ink);
}
.atdt-intro__text {
	grid-column: 1;
	margin: 0.5em 0 0;
	max-width: 34em;
	font-size: 1.2rem;
	color: var(--atdt-accent-2);
}
.atdt-intro__keys {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	gap: 10px;
	align-self: center;
}
.atdt-intro__keys kbd {
	font-size: 1.15rem;
	padding: 0.7em 0.9em 0.55em;
	min-width: 3.2em;
	border-bottom-width: 6px;
	border-radius: 9px;
}
.atdt-intro__keys kbd:first-child { min-width: 4.4em; text-align: left; }
.atdt-intro__keys kbd:nth-child(2) {
	background: var(--atdt-ink);
	color: var(--atdt-surface);
	border-color: var(--atdt-ink);
	border-bottom-color: #000;
}

/* ---------- Innehåll ---------- */

.site-content { padding-top: 8px; }

.separate-containers .inside-article,
.one-container .site-content,
.inside-page-header {
	background: transparent;
}
.separate-containers .inside-article { padding: 40px 40px 44px; }

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > figure,
.entry-content > .wp-block-table,
.entry-header,
.entry-summary,
.entry-meta,
footer.entry-meta {
	max-width: var(--atdt-maxwidth);
}
.single .inside-article,
.page .inside-article {
	max-width: calc(var(--atdt-maxwidth) + 80px);
	margin-left: auto;
	margin-right: auto;
}

.entry-meta,
.entry-meta a {
	color: var(--atdt-muted);
	font-size: 0.95rem;
}
.entry-meta a:hover { color: var(--atdt-accent); }

.entry-content ul li::marker,
.entry-content ol li::marker { color: var(--atdt-accent); font-weight: 700; }

.entry-content blockquote {
	border-left: 4px solid var(--atdt-led);
	background: var(--atdt-surface);
	padding: 1em 1.3em;
	font-style: normal;
	border-radius: 0 var(--atdt-radius) var(--atdt-radius) 0;
}

.entry-content table {
	border-collapse: collapse;
	background: var(--atdt-surface);
	font-size: 1rem;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--atdt-neutral);
	padding: 0.55em 0.75em;
	text-align: left;
	vertical-align: top;
}
.entry-content th { background: var(--atdt-bg); font-weight: 700; }

.entry-content figure figcaption,
.atdt-fotokredit,
.atdt-teaserkredit {
	display: block;
	font-size: 0.85rem;
	color: var(--atdt-muted);
	margin-top: 0.4em;
}

/* Blogglistan: inga kort, bara en kapselkant mellan posterna. */
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
	border-bottom: 1px solid var(--atdt-neutral);
	padding-left: 0;
	padding-right: 0;
}
.blog .site-main,
.archive .site-main,
.search .site-main {
	max-width: calc(var(--atdt-maxwidth) + 80px);
	margin-left: auto;
	margin-right: auto;
	padding: 0 40px;
}
.blog .entry-title,
.archive .entry-title,
.search .entry-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a { color: var(--atdt-ink); text-decoration: none; }
.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover { color: var(--atdt-accent); text-decoration: underline; }

.read-more,
a.read-more {
	font-weight: 700;
}

.page-header,
.inside-page-header { padding-left: 0; padding-right: 0; }

/* Knappar som tangenter */
button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
	background: var(--atdt-ink);
	color: var(--atdt-surface);
	border: 1px solid var(--atdt-ink);
	border-bottom: 4px solid #000;
	border-radius: var(--atdt-radius);
	font-family: var(--atdt-font-display);
	font-weight: 700;
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
	background: var(--atdt-accent);
	border-color: var(--atdt-accent);
	border-bottom-color: #5c2c04;
	color: var(--atdt-on-accent);
}

input[type="search"],
input[type="text"],
input[type="email"],
textarea {
	background: var(--atdt-surface);
	color: var(--atdt-ink);
	border: 1px solid var(--atdt-neutral);
	border-radius: var(--atdt-radius);
}

/* ---------- Sidfot ---------- */

.site-footer,
.site-info {
	background: var(--atdt-ink) !important;
	color: var(--atdt-neutral) !important;
}
.site-info { border-top: 4px solid var(--atdt-led); }
.inside-site-info { padding-top: 28px; padding-bottom: 28px; }
.site-info a,
.footer-bar a,
.site-footer a {
	color: var(--atdt-led) !important;
}
.site-info a:hover,
.site-footer a:hover { color: var(--atdt-surface) !important; }
.site-info .footer-bar ul.menu {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin: 0;
}
.site-info .footer-bar ul.menu li { margin: 0; padding: 0; white-space: nowrap; }
.site-info .footer-bar { flex-shrink: 0; }
.copyright-bar { text-align: left; }
.site-info .footer-bar .widget { margin: 0; padding: 0; }
.copyright-bar { font-size: 0.95rem; }

/* ---------- Mobil ---------- */

@media (max-width: 768px) {
	body { font-size: 1.0625rem; }
	.inside-header { padding: 14px 16px; }
	.main-title { font-size: 1.15rem; }
	.atdt-intro__inner {
		grid-template-columns: 1fr;
		padding: 36px 16px 32px;
	}
	.atdt-intro__keys { grid-column: 1; grid-row: auto; margin-top: 18px; }
	.atdt-intro__keys kbd { font-size: 0.95rem; }
	.separate-containers .inside-article { padding: 28px 16px 32px; }
	.blog .site-main,
	.archive .site-main,
	.search .site-main { padding: 0 16px; }
	.blog .inside-article,
	.archive .inside-article,
	.search .inside-article { padding-left: 0; padding-right: 0; }
	.main-navigation .menu-toggle { padding-left: 12px; padding-right: 12px; }
	.main-navigation.toggled .main-nav ul li a { padding-left: 16px; }
}