/* ============================================================
   Tidsbegränsat innehåll – frontend-stil
   Bastypografi + två teman (Sommar / Ren) som täcker all HTML.
   Användarens egna inline-stilar (panelen) vinner alltid.
   ============================================================ */

/* --- Bas (gäller alltid, även utan tema) --------------------- */
.tbi-content { box-sizing: border-box; }
.tbi-content *,
.tbi-content *::before,
.tbi-content *::after { box-sizing: border-box; }
.tbi-content img { max-width: 100%; height: auto; }
.tbi-inner > :first-child { margin-top: 0; }
.tbi-inner > :last-child { margin-bottom: 0; }

/* ============================================================
   Temavariabler
   ============================================================ */
.tbi-theme-summer {
	--tbi-text: #2f3e3d;
	--tbi-text-soft: #5b6b6a;
	--tbi-heading: #10403f;
	--tbi-accent: #ff6b4a;          /* korall */
	--tbi-accent-strong: #e8503a;
	--tbi-accent-2: #0fa3a3;         /* hav/teal */
	--tbi-accent-2-strong: #0b7e7e;
	--tbi-sun: #ffb627;              /* sol */
	--tbi-highlight: #ffe3a3;        /* mjukt solljus */
	--tbi-surface: #fff8ef;          /* grädde */
	--tbi-surface-2: #f3e3cf;        /* sand */
	--tbi-pre-bg: #0e403f;
	--tbi-pre-text: #eafffb;
	--tbi-radius: 14px;
	--tbi-font-body: "Nunito Sans", "Nunito", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--tbi-font-head: "Poppins", "Quicksand", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.tbi-theme-clean {
	--tbi-text: #283039;
	--tbi-text-soft: #5b6571;
	--tbi-heading: #10151b;
	--tbi-accent: #2563eb;
	--tbi-accent-strong: #1d4ed8;
	--tbi-accent-2: #475569;
	--tbi-accent-2-strong: #334155;
	--tbi-sun: #60a5fa;
	--tbi-highlight: #dbeafe;
	--tbi-surface: #f6f8fb;
	--tbi-surface-2: #e6eaf0;
	--tbi-pre-bg: #1e293b;
	--tbi-pre-text: #e2e8f0;
	--tbi-radius: 10px;
	--tbi-font-body: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
	--tbi-font-head: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

/* ============================================================
   Gemensamma elementstilar (drivs av variablerna ovan)
   ============================================================ */
.tbi-styled .tbi-inner {
	font-family: var(--tbi-font-body);
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--tbi-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.tbi-styled .tbi-inner ::selection {
	background: var(--tbi-sun);
	color: #3a2a00;
}

/* Rubriker */
.tbi-styled .tbi-inner h1,
.tbi-styled .tbi-inner h2,
.tbi-styled .tbi-inner h3,
.tbi-styled .tbi-inner h4,
.tbi-styled .tbi-inner h5,
.tbi-styled .tbi-inner h6 {
	font-family: var(--tbi-font-head);
	color: var(--tbi-heading);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 1.6em 0 0.55em;
}
.tbi-styled .tbi-inner h1 { font-size: 2.15em; }
.tbi-styled .tbi-inner h2 { font-size: 1.7em; }
.tbi-styled .tbi-inner h3 { font-size: 1.4em; }
.tbi-styled .tbi-inner h4 { font-size: 1.2em; }
.tbi-styled .tbi-inner h5 { font-size: 1.05em; }
.tbi-styled .tbi-inner h6 {
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tbi-accent-2-strong);
}

/* Liten dekorativ accent under H2 (solnedgångsstrimma) */
.tbi-styled .tbi-inner h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 0.4em;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--tbi-accent), var(--tbi-sun));
}

/* Brödtext */
.tbi-styled .tbi-inner p { margin: 0 0 1.15em; }
.tbi-styled .tbi-inner strong { color: var(--tbi-heading); font-weight: 700; }
.tbi-styled .tbi-inner small { color: var(--tbi-text-soft); }

/* Länkar – sommarens "highlight" som växer vid hover */
.tbi-styled .tbi-inner a {
	color: var(--tbi-accent-strong);
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 -0.12em 0 var(--tbi-highlight);
	transition: box-shadow 0.2s ease, color 0.2s ease;
}
.tbi-styled .tbi-inner a:hover {
	color: var(--tbi-accent);
	box-shadow: inset 0 -0.7em 0 var(--tbi-highlight);
}
.tbi-styled .tbi-inner a:has(img) { box-shadow: none; }

/* Listor */
.tbi-styled .tbi-inner ul { list-style: none; padding-left: 1.5em; margin: 0 0 1.15em; }
.tbi-styled .tbi-inner ul li { position: relative; margin: 0.4em 0; }
.tbi-styled .tbi-inner ul li::before {
	content: "";
	position: absolute;
	left: -1.3em;
	top: 0.62em;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--tbi-sun), var(--tbi-accent));
}
.tbi-styled .tbi-inner ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.tbi-styled .tbi-inner ol li { margin: 0.4em 0; }
.tbi-styled .tbi-inner ol li::marker { color: var(--tbi-accent-strong); font-weight: 700; }
.tbi-styled .tbi-inner li > ul,
.tbi-styled .tbi-inner li > ol { margin: 0.3em 0; }

/* Citat */
.tbi-styled .tbi-inner blockquote {
	margin: 1.6em 0;
	padding: 1em 1.3em;
	border-left: 5px solid var(--tbi-accent);
	background: var(--tbi-surface);
	border-radius: 0 var(--tbi-radius) var(--tbi-radius) 0;
	font-style: italic;
	color: var(--tbi-text);
}
.tbi-styled .tbi-inner blockquote p:last-child { margin-bottom: 0; }
.tbi-styled .tbi-inner blockquote cite,
.tbi-styled .tbi-inner blockquote footer {
	display: block;
	margin-top: 0.6em;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9em;
	color: var(--tbi-accent-2-strong);
}

/* Tabeller */
.tbi-styled .tbi-inner table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	border-radius: var(--tbi-radius);
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(15, 163, 163, 0.12);
	font-size: 0.97em;
}
.tbi-styled .tbi-inner th {
	background: linear-gradient(135deg, var(--tbi-accent-2), var(--tbi-accent-2-strong));
	color: #fff;
	text-align: left;
	padding: 0.75em 1em;
	font-weight: 700;
}
.tbi-styled .tbi-inner td {
	padding: 0.65em 1em;
	border-bottom: 1px solid var(--tbi-surface-2);
}
.tbi-styled .tbi-inner tbody tr:nth-child(odd) { background: var(--tbi-surface); }
.tbi-styled .tbi-inner tbody tr:hover { background: var(--tbi-highlight); }
.tbi-styled .tbi-inner table caption {
	caption-side: bottom;
	margin-top: 0.6em;
	font-size: 0.85em;
	color: var(--tbi-text-soft);
}

/* Bilder & figurer */
.tbi-styled .tbi-inner img { border-radius: var(--tbi-radius); }
.tbi-styled .tbi-inner figure { margin: 1.6em 0; }
.tbi-styled .tbi-inner figure img {
	display: block;
	box-shadow: 0 10px 26px rgba(47, 62, 61, 0.16);
}
.tbi-styled .tbi-inner figcaption {
	margin-top: 0.6em;
	font-size: 0.85em;
	color: var(--tbi-text-soft);
	text-align: center;
	font-style: italic;
}

/* Knappar */
.tbi-styled .tbi-inner a.button,
.tbi-styled .tbi-inner button,
.tbi-styled .tbi-inner .wp-block-button__link,
.tbi-styled .tbi-inner input[type="submit"] {
	display: inline-block;
	background: linear-gradient(135deg, var(--tbi-accent), var(--tbi-sun));
	color: #fff;
	font-weight: 700;
	font-family: var(--tbi-font-head);
	padding: 0.7em 1.5em;
	border: none;
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(255, 107, 74, 0.32);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tbi-styled .tbi-inner a.button:hover,
.tbi-styled .tbi-inner button:hover,
.tbi-styled .tbi-inner .wp-block-button__link:hover,
.tbi-styled .tbi-inner input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(255, 107, 74, 0.42);
	color: #fff;
}

/* Kod */
.tbi-styled .tbi-inner code {
	background: var(--tbi-surface);
	color: var(--tbi-accent-strong);
	padding: 0.15em 0.45em;
	border-radius: 6px;
	border: 1px solid var(--tbi-surface-2);
	font-size: 0.9em;
}
.tbi-styled .tbi-inner pre {
	background: var(--tbi-pre-bg);
	color: var(--tbi-pre-text);
	padding: 1.1em 1.3em;
	border-radius: var(--tbi-radius);
	overflow: auto;
	margin: 1.6em 0;
	line-height: 1.5;
}
.tbi-styled .tbi-inner pre code {
	background: none;
	border: none;
	color: inherit;
	padding: 0;
	font-size: 0.92em;
}

/* Markering & avdelare */
.tbi-styled .tbi-inner mark {
	background: var(--tbi-highlight);
	color: inherit;
	padding: 0.05em 0.3em;
	border-radius: 4px;
}
.tbi-styled .tbi-inner hr {
	border: none;
	height: 3px;
	margin: 2.2em 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--tbi-accent), var(--tbi-sun), var(--tbi-accent-2));
	opacity: 0.75;
}

/* Definitionslistor */
.tbi-styled .tbi-inner dt { font-weight: 700; color: var(--tbi-accent-2-strong); margin-top: 0.8em; }
.tbi-styled .tbi-inner dd { margin: 0.2em 0 0.6em 1.2em; color: var(--tbi-text); }

/* Formulärfält (om något block innehåller sådana) */
.tbi-styled .tbi-inner input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.tbi-styled .tbi-inner textarea,
.tbi-styled .tbi-inner select {
	font-family: inherit;
	font-size: 1em;
	padding: 0.55em 0.8em;
	border: 1px solid var(--tbi-surface-2);
	border-radius: 10px;
	background: #fff;
	color: var(--tbi-text);
	max-width: 100%;
}
.tbi-styled .tbi-inner input:focus,
.tbi-styled .tbi-inner textarea:focus,
.tbi-styled .tbi-inner select:focus {
	outline: none;
	border-color: var(--tbi-accent);
	box-shadow: 0 0 0 3px var(--tbi-highlight);
}

/* Responsivt: lite mindre rubriker på små skärmar */
@media (max-width: 600px) {
	.tbi-styled .tbi-inner { font-size: 1rem; }
	.tbi-styled .tbi-inner h1 { font-size: 1.8em; }
	.tbi-styled .tbi-inner h2 { font-size: 1.45em; }
}