/*
 * contact.css — laddas bara på sidor med mallen "Contact".
 *
 * Sidan är två spalter: formuläret i en panel till vänster, och till höger
 * de kort som gör formuläret onödigt. Under dem ligger frågorna som annars
 * blir mejl.
 *
 * Formuläret är sidans tyngdpunkt och ska se ut som det: panelen ligger på
 * papper med ett hårstreck runt, medan korten bredvid är ljusgrå och
 * plattare. Skillnaden i yta är hela hierarkin — ingen skugga, ingen ram i
 * accentfärg, inget som skriker.
 *
 * Budget: ≤ 3 kB gzippad. Mät med ./scripts/css-budget.py.
 */

@layer layout {

	/*
	 * Ingressen ligger i brödtextspalten, inte över hela bredden. En
	 * rubrik som spänner 1440 px läses inte som en rubrik, den läses som
	 * en banderoll.
	 */
	.contact__intro {
		max-width: var(--content-max);
		margin-block-end: var(--space-xl);
	}

	.contact__grid {
		display: grid;
		gap: var(--space-l);
		align-items: start;
	}

	/*
	 * En spalt till brytpunkten. Formuläret först i DOM:en och därmed
	 * först på telefon: den som öppnar en kontaktsida har oftast redan
	 * bestämt sig för att skriva.
	 */
	@media (min-width: 900px) {
		.contact__grid {
			grid-template-columns: minmax(0, 1fr) 21rem;
			gap: var(--space-xl);
		}
	}

	.contact__aside {
		display: grid;
		gap: var(--space-s);
	}

	/*
	 * Korten följer med i sidled när man rullar förbi formuläret, men bara
	 * där det finns höjd att göra det i. En klistrad spalt på en kort skärm
	 * blir ett hopp, inte en hjälp.
	 */
	@media (min-width: 900px) and (min-height: 700px) {
		.contact__aside {
			position: sticky;
			inset-block-start: var(--space-l);
		}
	}

	.contact__faq {
		max-width: var(--content-max);
		margin-block-start: var(--space-2xl);
	}

	.contact__editor {
		margin-block-start: var(--space-l);
	}
}

@layer components {

	/* --- Ingressen --- */

	.contact__eyebrow {
		margin-block-end: var(--space-2xs);
		font-size: var(--step--1);
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.contact__title {
		font-size: var(--step-4);
		line-height: 1.1;
	}

	.contact__lead {
		margin-block-start: var(--space-s);
		font-size: var(--step-1);
		line-height: 1.5;
		color: var(--color-body);
	}

	/* --- Panelen --- */

	.contact-panel {
		padding: clamp(var(--space-m), 3vw, var(--space-xl));
		border: 1px solid var(--color-line);
		border-radius: var(--radius-panel);
		background: var(--color-paper);
	}

	.contact-panel__title {
		margin-block-end: var(--space-m);
		font-size: var(--step-2);
	}

	/* --- Kvittot --- */

	.contact-panel--sent {
		display: grid;
		justify-items: start;
		gap: var(--space-xs);
	}

	.contact-panel--sent .contact-panel__title {
		margin-block-end: 0;
	}

	/*
	 * Bocken i petrol och inte i grönt. Sajten har ingen grön ton, och en
	 * enda främmande färg för ett kvitto är en färg för mycket.
	 */
	.contact-panel__mark {
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border-radius: var(--radius-pill);
		background: var(--color-surface-blush);
		color: var(--color-accent-ink);
	}

	.contact-panel__mark svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.contact-panel__text {
		color: var(--color-body);
	}

	.contact-panel__link {
		font-weight: 500;
		color: var(--color-accent-ink);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	/* --- Formuläret --- */

	.contact-form {
		display: grid;
		gap: var(--space-m);
	}

	.contact-form__row {
		display: grid;
		gap: var(--space-m);
	}

	@media (min-width: 560px) {
		.contact-form__row {
			grid-template-columns: 1fr 1fr;
		}
	}

	/*
	 * Honungsfällan. `display: none` skulle duga mot de flesta robotar,
	 * men en del hoppar över just det — fältet flyttas därför ur bild i
	 * stället för att gömmas.
	 */
	.contact-form__trap {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.contact-field {
		display: grid;
		gap: var(--space-3xs);
		min-width: 0;
	}

	.contact-field__label {
		display: flex;
		gap: var(--space-2xs);
		align-items: baseline;
		font-size: var(--step--1);
		font-weight: 500;
		color: var(--color-ink);
	}

	.contact-field__optional {
		font-weight: 400;
		color: var(--color-ink-muted);
	}

	.contact-field__input {
		width: 100%;
		padding: 0.75rem var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		background: var(--color-paper);
		font: inherit;
		color: var(--color-ink);
		transition: border-color 0.15s ease;
	}

	.contact-field__input::placeholder {
		color: var(--color-ink-muted);
	}

	.contact-field__input:hover {
		border-color: var(--color-body);
	}

	/*
	 * Fokusramen är temats egen (base.css), men kanten byts samtidigt till
	 * accentfärgen: en ram utanför fältet och ett fält som ser likadant ut
	 * som sina grannar säger bara halva saken om var man står.
	 */
	.contact-field__input:focus-visible {
		border-color: var(--color-accent);
	}

	.contact-field__textarea {
		min-height: 10rem;
		resize: vertical;
		line-height: 1.6;
	}

	/*
	 * Listan får temats pil i stället för operativsystemets. `appearance`
	 * tar bort den inbyggda, och pilen ligger i markupen som SVG så att
	 * den ärver färg som allt annat.
	 */
	.contact-field__select {
		position: relative;
		display: grid;
	}

	.contact-field__select select {
		appearance: none;
		padding-inline-end: var(--space-xl);
		cursor: pointer;
	}

	.contact-field__chevron {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--space-s);
		display: grid;
		place-items: center;
		translate: 0 -50%;
		pointer-events: none;
		color: var(--color-body);
	}

	.contact-field__chevron svg {
		width: 1.15rem;
		height: 1.15rem;
	}

	.contact-field__input.is-invalid {
		border-color: var(--color-danger);
	}

	.contact-field__error {
		font-size: var(--step--1);
		color: var(--color-danger);
	}

	.contact-form__alert {
		margin-block-end: var(--space-m);
		padding: var(--space-xs) var(--space-s);
		border-radius: var(--radius-card);
		background: var(--color-surface-blush);
		font-size: var(--step--1);
		color: var(--color-danger);
	}

	.contact-form__foot {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s) var(--space-m);
		align-items: center;
	}

	.contact-form__submit {
		padding: 0.85rem var(--space-l);
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		font: inherit;
		font-weight: 500;
		color: var(--color-button-text);
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	.contact-form__submit:hover {
		background: var(--color-ink);
	}

	.contact-form__note {
		flex: 1 1 14rem;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.contact-form__note a {
		color: var(--color-body);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.contact-form__note a:hover {
		color: var(--color-accent);
	}

	/* --- Korten --- */

	.contact-card {
		padding: var(--space-m);
		border-radius: var(--radius-panel);
		background: var(--color-surface-card);
	}

	.contact-card__title {
		font-size: var(--step-0);
		font-weight: 600;
	}

	.contact-card__address {
		display: inline-block;
		margin-block-start: var(--space-2xs);
		font-size: var(--step-1);
		font-weight: 500;
		color: var(--color-accent-ink);
		overflow-wrap: anywhere;
	}

	.contact-card__address:hover {
		color: var(--color-accent);
	}

	.contact-card__text {
		margin-block-start: var(--space-2xs);
		font-size: var(--step--1);
		line-height: 1.6;
		color: var(--color-body);
	}

	.contact-card__text--muted {
		color: var(--color-ink-muted);
	}

	.contact-card__list {
		display: grid;
		gap: var(--space-s);
		margin-block-start: var(--space-s);
		padding: 0;
		list-style: none;
	}

	.contact-card__list li {
		display: grid;
		gap: 0.15rem;
	}

	.contact-card__list a {
		font-weight: 500;
		color: var(--color-ink);
	}

	.contact-card__list a:hover {
		color: var(--color-accent);
	}

	.contact-card__list span {
		font-size: var(--step--1);
		line-height: 1.5;
		color: var(--color-body);
	}

	/* --- Frågorna --- */

	.contact__faq-title {
		margin-block-end: var(--space-m);
		font-size: var(--step-2);
	}

	.contact-faq__item {
		border-block-end: 1px solid var(--color-line);
	}

	.contact-faq__question {
		display: flex;
		gap: var(--space-s);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-s);
		font-weight: 500;
		color: var(--color-ink);
		cursor: pointer;
		list-style: none;
	}

	/* Safari ritar en egen triangel utan den här. */
	.contact-faq__question::-webkit-details-marker {
		display: none;
	}

	.contact-faq__question:hover {
		color: var(--color-accent);
	}

	.contact-faq__icon svg {
		width: 1.15rem;
		height: 1.15rem;
		color: var(--color-body);
	}

	/*
	 * Plus blir minus när svaret fälls ut: den lodräta stapeln roteras
	 * bort. Rörelsen säger vilken väg det går, vilket en bytt ikon inte
	 * gör.
	 */
	.contact-faq__bar {
		transform-origin: center;
		transition: opacity 0.2s ease, rotate 0.2s ease;
	}

	.contact-faq__item[open] .contact-faq__bar {
		rotate: 90deg;
		opacity: 0;
	}

	.contact-faq__answer {
		padding-block-end: var(--space-m);
		line-height: 1.65;
		color: var(--color-body);
	}
}

@layer utilities {

	/*
	 * Rörelse är en preferens, inte en dekoration. Den som bett om mindre
	 * av den ska inte få en ikon som snurrar.
	 */
	@media (prefers-reduced-motion: reduce) {
		.contact-faq__bar,
		.contact-field__input,
		.contact-form__submit {
			transition: none;
		}
	}
}