/* Medlemspåminnelsen. Designsystemets tokens, inga egna färgvärden utom som
   reservvärden för det fall temats tokens inte hunnit laddas. */

.gbm-notis {
	/* Utgångsläget är dolt. Regeln står som `display: none` och inte som
	   attributet [hidden], därför att en klassregel annars slår webbläsarens
	   egen [hidden]-regel och rutan blir synlig fast den inte ska vara det —
	   samma fälla som gjorde bildarkivets navknappar döda men klickbara. */
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	width: min(320px, calc(100vw - 40px));
	box-sizing: border-box;
	padding: 22px 22px 20px;
	background: var(--gb-bg, #FFFFFF);
	border: 1px solid var(--gb-border, #E8E2D6);
	border-radius: 4px;
	box-shadow: 0 10px 34px rgba(31, 27, 22, 0.14);
	font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
	color: var(--gb-ink-soft, #3A332B);
}

.gbm-notis--synlig {
	display: block;
	animation: gbm-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes gbm-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gbm-notis--synlig { animation: none; }
}

.gbm-notis::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--gb-accent, #9C4A2A);
	border-radius: 4px 0 0 4px;
}

.gbm-notis__rubrik {
	margin: 0 26px 8px 0;
	font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
	font-style: italic;
	font-size: 21px;
	line-height: 1.2;
	color: var(--gb-ink, #1F1B16);
}

.gbm-notis__text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
}

.gbm-notis__knapp {
	display: inline-block;
	padding: 10px 20px;
	background: var(--gb-accent, #9C4A2A);
	color: #FFFFFF;
	border-radius: 3px;
	font-size: 15px;
	text-decoration: none;
	transition: background 160ms ease;
}
/* `:focus` måste stå bredvid `:focus-visible`. Ett musklick ger `:focus` men
   inte `:focus-visible`, och då tar Astras `a:hover, a:focus` över färgen: ink
   på terrakotta, uppmätt 2,79 mot WCAG AA:s 4,5. Komponenten måste äga hela
   sitt tillstånd, annars fyller temat i resten. */
.gbm-notis__knapp:hover,
.gbm-notis__knapp:focus,
.gbm-notis__knapp:focus-visible {
	background: var(--gb-ink, #1F1B16);
	color: #FFFFFF;
	text-decoration: none;
}

.gbm-notis__redan {
	display: block;
	margin: 12px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--gb-muted, #6B6258);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
/* Bakgrunden måste nollställas här också. Elementet är en <button>, och Astra
   ger knappar en egen hover-bakgrund — den slog igenom eftersom `background:
   none` bara stod i viloläget. Följden var ink text på ink botten: länken
   försvann helt när musen låg på den. Uppmätt 1,00. */
.gbm-notis__redan:hover,
.gbm-notis__redan:focus,
.gbm-notis__redan:focus-visible {
	background: none;
	color: var(--gb-ink, #1F1B16);
}

.gbm-notis__stang {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--gb-muted, #6B6258);
	cursor: pointer;
}
.gbm-notis__stang:hover {
	background: var(--gb-accent-soft, rgba(156, 74, 42, 0.08));
	color: var(--gb-accent, #9C4A2A);
}

/* På mobil sitter rutan längst ner i hela bredden — ett hörn på en liten
   skärm blir ändå halva ytan, och då är ett band ärligare. */
@media (max-width: 500px) {
	.gbm-notis {
		right: 10px;
		left: 10px;
		bottom: 10px;
		width: auto;
		padding: 18px 18px 16px;
	}
	.gbm-notis__rubrik { font-size: 19px; }
	.gbm-notis__text   { font-size: 14.5px; margin-bottom: 14px; }
}

/* Låga fönster — framför allt en telefon i liggande läge, där rutan annars
   uppmätt tog 58 % av skärmhöjden. En påminnelse som skymmer halva sidan är
   inte diskret, hur snyggt hörnet än ser ut på en stor skärm. */
@media (max-height: 520px) {
	.gbm-notis          { padding: 14px 16px 13px; }
	.gbm-notis__rubrik  { font-size: 17px; margin-bottom: 5px; }
	.gbm-notis__text    { font-size: 13.5px; line-height: 1.45; margin-bottom: 11px; }
	.gbm-notis__knapp   { padding: 8px 17px; font-size: 14px; }
	.gbm-notis__redan   { margin-top: 9px; }
}

/* Fingret behöver mer yta än muspekaren. Knappen ser likadan ut — det är
   träffytan som växer. */
@media (pointer: coarse) {
	.gbm-notis__stang { width: 44px; height: 44px; top: 6px; right: 6px; }
	/* Den bredare knappen äter in i rubrikens rad — uppmätt överlapp innan
	   marginalen höjdes, alltså rubriktext under krysset. */
	.gbm-notis__rubrik { margin-right: 46px; }
}