/*
Theme Name:        Plugga
Theme URI:         https://markholmdata.com
Author:            Markholm Data AB
Description:       Modernt tema för en pluggsajt med övningsprov. Används tillsammans med tillägget Plugga Quiz. Ljust och mörkt läge, lokalt typsnitt (Plus Jakarta Sans) och mobilanpassad navigering.
Version:           1.0.0
Requires at least: 6.2
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       plugga
*/

/* ---------- Designvariabler (delas med tillägget) ---------- */

:root {
	--plg-bg: #f5f6fb;
	--plg-surface: #ffffff;
	--plg-surface-2: #f0f1f8;
	--plg-text: #14162b;
	--plg-muted: #636785;
	--plg-line: #e3e5f0;
	--plg-primary: #5b4cf5;
	--plg-primary-2: #8b5cf6;
	--plg-primary-soft: #eceafe;
	--plg-on-primary: #ffffff;
	--plg-right: #15803d;
	--plg-right-bg: #dcfce7;
	--plg-wrong: #dc2626;
	--plg-wrong-bg: #fee2e2;
	--plg-warn: #b45309;
	--plg-warn-bg: #fef3c7;
	--plg-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pt-header-h: 72px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--plg-bg: #0b0d1a;
		--plg-surface: #14172a;
		--plg-surface-2: #1c2038;
		--plg-text: #eef0ff;
		--plg-muted: #9ba0c4;
		--plg-line: #272c49;
		--plg-primary: #8174ff;
		--plg-primary-2: #a78bfa;
		--plg-primary-soft: #221f4a;
		--plg-right: #4ade80;
		--plg-right-bg: rgba(74, 222, 128, .14);
		--plg-wrong: #f87171;
		--plg-wrong-bg: rgba(248, 113, 113, .14);
		--plg-warn: #fbbf24;
		--plg-warn-bg: rgba(251, 191, 36, .12);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--plg-bg: #0b0d1a;
	--plg-surface: #14172a;
	--plg-surface-2: #1c2038;
	--plg-text: #eef0ff;
	--plg-muted: #9ba0c4;
	--plg-line: #272c49;
	--plg-primary: #8174ff;
	--plg-primary-2: #a78bfa;
	--plg-primary-soft: #221f4a;
	--plg-right: #4ade80;
	--plg-right-bg: rgba(74, 222, 128, .14);
	--plg-wrong: #f87171;
	--plg-wrong-bg: rgba(248, 113, 113, .14);
	--plg-warn: #fbbf24;
	--plg-warn-bg: rgba(251, 191, 36, .12);
	color-scheme: dark;
}

/* ---------- Bas ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; min-height: 100vh;
	font-family: var(--plg-font); font-size: 16px; line-height: 1.55;
	color: var(--plg-text); background: var(--plg-bg);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	background-image:
		radial-gradient(900px 500px at 100% -10%, color-mix(in srgb, var(--plg-primary) 10%, transparent), transparent 70%),
		radial-gradient(700px 420px at -10% 10%, color-mix(in srgb, #06b6d4 7%, transparent), transparent 70%);
	background-attachment: fixed;
}
.pt-theme-anim, .pt-theme-anim * { transition: background-color .35s, border-color .35s, color .2s !important; }
img { max-width: 100%; height: auto; }
a { color: var(--plg-primary); }
button { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--plg-primary) 30%, transparent); }

.pt-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--plg-primary); color: #fff; padding: 10px 14px; border-radius: 10px; }
.pt-skip:focus { left: 8px; }

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

.pt-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--plg-bg) 78%, transparent);
	backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--plg-line) 70%, transparent);
}
.admin-bar .pt-header { top: 32px; }
.pt-header__inner { max-width: 1120px; margin: 0 auto; height: var(--pt-header-h); padding: 0 20px; display: flex; align-items: center; gap: 24px; }

.pt-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--plg-text); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.pt-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--plg-primary), var(--plg-primary-2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--plg-primary) 40%, transparent); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.pt-brand__mark svg { width: 22px; height: 22px; }
.pt-brand:hover .pt-brand__mark { transform: rotate(-8deg) scale(1.06); }
.pt-brand__img { width: auto; max-height: 40px; }

.pt-nav { display: flex; gap: 4px; margin-right: auto; }
.pt-nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--plg-muted); font-weight: 700; font-size: .95rem; transition: color .2s, background .2s; }
.pt-nav a svg { width: 18px; height: 18px; }
.pt-nav a:hover { color: var(--plg-text); background: var(--plg-surface-2); }
.pt-nav a.is-active { color: var(--plg-primary); background: var(--plg-primary-soft); }

.pt-tabbar { display: none; }

.pt-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pt-theme-toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--plg-line); background: var(--plg-surface); color: var(--plg-text); cursor: pointer; transition: border-color .2s, transform .3s; }
.pt-theme-toggle:hover { border-color: var(--plg-primary); transform: rotate(15deg); }
.pt-theme-toggle svg { width: 20px; height: 20px; }
.pt-moon { display: none; }
:root[data-theme="dark"] .pt-sun { display: none; }
:root[data-theme="dark"] .pt-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pt-sun { display: none; }
	:root:not([data-theme="light"]) .pt-moon { display: block; }
}

.pt-user { position: relative; }
.pt-avatar { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; font-weight: 800; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #f97316, #db2777); box-shadow: 0 0 0 3px var(--plg-bg), 0 0 0 5px color-mix(in srgb, #db2777 35%, transparent); transition: transform .2s; }
.pt-avatar:hover { transform: scale(1.06); }
.pt-user__menu { position: absolute; right: 0; top: calc(100% + 10px); width: 240px; padding: 8px; border-radius: 18px; background: var(--plg-surface); border: 1px solid var(--plg-line); box-shadow: 0 20px 48px rgba(10, 12, 30, .18); animation: pt-drop .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes pt-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pt-user__menu p { margin: 0 0 6px; padding: 10px 12px; border-bottom: 1px solid var(--plg-line); }
.pt-user__menu b { display: block; }
.pt-user__menu small { color: var(--plg-muted); word-break: break-all; }
.pt-user__menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--plg-text); text-decoration: none; font-weight: 600; font-size: .94rem; }
.pt-user__menu a:hover { background: var(--plg-surface-2); }
.pt-user__menu .pt-logout { color: var(--plg-wrong); }

.pt-main { min-height: calc(100vh - var(--pt-header-h)); }

/* Vanliga sidor */
.pt-content { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
.pt-article { background: var(--plg-surface); border: 1px solid var(--plg-line); border-radius: 24px; padding: 32px; margin-bottom: 20px; }
.pt-title { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 16px; }
.pt-title a { color: inherit; text-decoration: none; }
.pt-entry > *:first-child { margin-top: 0; }

/* ---------- Inloggningssidan ---------- */

.plugga-auth-page .pt-main { min-height: 100vh; }
.pt-auth { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.pt-auth__brand {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center; padding: 56px;
	color: #fff; background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 45%, #db2777 100%);
}
.pt-auth__brand .pt-brand { color: #fff; margin-bottom: 48px; }
.pt-auth__brand .pt-brand__mark { background: rgba(255, 255, 255, .18); box-shadow: none; }
.pt-auth__brand-inner { position: relative; z-index: 2; max-width: 460px; }
.pt-auth__brand h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.04em; margin: 0 0 18px; font-weight: 800; }
.pt-auth__brand p { font-size: 1.1rem; opacity: .9; margin: 0; max-width: 400px; }

.pt-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
.pt-blob--1 { width: 460px; height: 460px; right: -140px; top: -140px; background: rgba(255, 255, 255, .1); animation: pt-drift 14s ease-in-out infinite; }
.pt-blob--2 { width: 300px; height: 300px; left: -100px; bottom: -120px; background: rgba(255, 255, 255, .08); animation: pt-drift 18s ease-in-out infinite reverse; }
@keyframes pt-drift { 50% { transform: translate(-30px, 30px) scale(1.08); } }

.pt-float { position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 20px 40px rgba(20, 10, 60, .25); animation: pt-bob 6s ease-in-out infinite; }
.pt-float b { display: block; font-size: 1rem; }
.pt-float small { display: block; opacity: .85; font-size: .8rem; }
.pt-float--a { right: 12%; top: 16%; }
.pt-float--b { right: 8%; bottom: 20%; animation-delay: -2s; }
.pt-float--c { left: 56px; bottom: 9%; animation-delay: -4s; }
.pt-float__ok { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #22c55e; font-weight: 900; }
.pt-float--b svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.pt-float--b .bg { stroke: rgba(255, 255, 255, .25); }
.pt-float--b .fg { stroke: #fff; stroke-linecap: round; }
.pt-float--c b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #7c3aed; font-size: .85rem; }
.pt-float--c span { font-weight: 700; }
@keyframes pt-bob { 50% { transform: translateY(-14px); } }

.pt-auth__form { position: relative; display: grid; place-items: center; padding: 40px 24px; }
.pt-auth__card { width: min(420px, 100%); animation: pt-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pt-rise { from { opacity: 0; transform: translateY(18px); } }
.pt-auth__card h2 { font-size: 2rem; letter-spacing: -.03em; margin: 0 0 6px; }
.pt-auth__lead { color: var(--plg-muted); margin: 0 0 26px; }
.pt-auth__mobile-brand { display: none; margin-bottom: 28px; }
.pt-theme-toggle--float { position: absolute; top: 20px; right: 20px; }

/* ---------- Mobil: flikmeny i botten ---------- */

@media (max-width: 760px) {
	:root { --pt-header-h: 62px; }
	.pt-header__inner { padding: 0 16px; gap: 12px; }
	.pt-brand__name { font-size: 1.1rem; }
	.pt-header .pt-nav { display: none; }
	.pt-tabbar {
		display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 200;
		justify-content: space-around; gap: 4px; padding: 6px; border-radius: 22px;
		background: color-mix(in srgb, var(--plg-surface) 88%, transparent);
		backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
		border: 1px solid var(--plg-line); box-shadow: 0 12px 36px rgba(10, 12, 30, .18);
	}
	.pt-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; font-size: .72rem; font-weight: 700; border-radius: 16px; text-decoration: none; color: var(--plg-muted); transition: color .2s, background .2s; }
	.pt-tabbar a svg { width: 22px; height: 22px; }
	.pt-tabbar a.is-active { color: var(--plg-primary); background: var(--plg-primary-soft); }
	body:has(.pt-tabbar) .pt-main { padding-bottom: 90px; }
	body[data-plg-view="quiz"] .pt-tabbar { display: none; }

	.pt-auth { grid-template-columns: 1fr; }
	.pt-auth__brand { display: none; }
	.pt-auth__mobile-brand { display: block; }
	.pt-auth__form { align-items: start; padding-top: 48px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
	.pt-float--c { display: none; }
	.pt-auth__brand { padding: 40px; }
}
@media screen and (max-width: 782px) {
	.admin-bar .pt-header { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}