/**
 * Kundens formulär för att skapa en sida. Se HN_Formular i
 * includes/class-hn-formular.php.
 *
 * ALLT är grindat på body.hn-form-klar, som hn-formular.js sätter först när
 * omgrupperingen gått igenom. Faller skriptet ser formuläret ut precis som
 * förut — aldrig halvvägs.
 *
 * Färgerna är HN:s (suitens CLAUDE.md § Stilprofil). Kundvänd yta, så
 * brödtexten är minst 15 px och dämpad text #4a4a4a — inte WP:s ljusare grå.
 */

.hn-form-klar {
	--hnf-bla: #00354e;
	--hnf-bla-hover: #14526f;
	--hnf-guld: #dd9b0c;
	--hnf-text: #1f2937;
	--hnf-dampad: #4a4a4a;
	--hnf-kant: #dcdcde;
	--hnf-kant-mjuk: #e8eaec;
	--hnf-yta: #ffffff;
	--hnf-yta-sank: #f4f6f7;
	--hnf-ok-text: #1e7e34;
	--hnf-ok-bg: #e6f4ea;
	--hnf-fel-text: #b32d2e;
	--hnf-fel-bg: #fbeceb;
}

/* ---- fältrader: etikett ovanför, inte i smal vänsterspalt ---- */
.hn-form-klar #geodirectory-add-post .mb-3.row,
.hn-form-klar #geodirectory-add-post [id$="_row"] {
	display: block;
	margin-bottom: 20px;
}
.hn-form-klar #geodirectory-add-post .col-form-label,
.hn-form-klar #geodirectory-add-post [id$="_row"] > label {
	display: block;
	width: auto;
	max-width: none;
	flex: none;
	padding: 0 0 3px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--hnf-text);
	text-align: left;
}
.hn-form-klar #geodirectory-add-post .col-sm-10,
.hn-form-klar #geodirectory-add-post .col-sm-9,
.hn-form-klar #geodirectory-add-post .col-sm-8 {
	width: 100%;
	max-width: none;
	flex: none;
	padding-left: 0;
	padding-right: 0;
}

/* hjälptexten: läsbar, och FÖRE fältet så man vet innan man skriver */
.hn-form-klar #geodirectory-add-post .form-text,
.hn-form-klar #geodirectory-add-post .geodir-help-text,
.hn-form-klar #geodirectory-add-post .description {
	display: block;
	margin: 0 0 7px;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--hnf-dampad);
}
.hn-form-klar .hnf-hjalp-forst { order: -1; }

/* ---- kontrollerna ---- */
.hn-form-klar #geodirectory-add-post input[type="text"],
.hn-form-klar #geodirectory-add-post input[type="email"],
.hn-form-klar #geodirectory-add-post input[type="url"],
.hn-form-klar #geodirectory-add-post input[type="tel"],
.hn-form-klar #geodirectory-add-post input[type="number"],
.hn-form-klar #geodirectory-add-post select,
.hn-form-klar #geodirectory-add-post textarea {
	font-size: 15.5px;
	color: var(--hnf-text);
	border: 1px solid var(--hnf-kant);
	border-radius: 6px;
	padding: 9px 11px;
	line-height: 1.4;
	background: var(--hnf-yta);
}
.hn-form-klar #geodirectory-add-post input:focus,
.hn-form-klar #geodirectory-add-post select:focus,
.hn-form-klar #geodirectory-add-post textarea:focus {
	border-color: var(--hnf-bla);
	box-shadow: 0 0 0 3px rgba(221, 155, 12, .18);
	outline: none;
}
.hn-form-klar #geodirectory-add-post ::placeholder { color: #767676; opacity: 1; }

/* ---- avsnitt ---- */
.hn-form-klar .hnf-avsnitt {
	border-top: 1px solid var(--hnf-kant);
	padding: 26px 0 2px;
	scroll-margin-top: 16px;
}
.hn-form-klar .hnf-avsnitt:first-of-type { border-top: none; }
.hn-form-klar .hnf-avsnitt-topp {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin-bottom: 4px;
}
.hn-form-klar .hnf-num {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hnf-bla);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.hn-form-klar .hnf-avsnitt h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--hnf-bla);
	line-height: 1.3;
}
.hn-form-klar .hnf-avsnitt-hjalp {
	margin: 0 0 18px 38px;
	max-width: 60ch;
	font-size: 15px;
	color: var(--hnf-dampad);
}

/* GeoDirs egna fieldsets ersätts av avsnitten ovan */
.hn-form-klar #geodirectory-add-post > fieldset > legend,
.hn-form-klar #geodirectory-add-post > fieldset > .geodir-fieldset-desc { display: none; }

/* ---- spåret högst upp ---- */
.hn-form-klar .hnf-spar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 24px 0 4px;
	padding: 12px 0;
	list-style: none;
	border-top: 1px solid var(--hnf-kant-mjuk);
	border-bottom: 1px solid var(--hnf-kant-mjuk);
}
.hn-form-klar .hnf-spar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hnf-dampad);
	text-decoration: none;
}
.hn-form-klar .hnf-spar a:hover { border-color: var(--hnf-kant); color: var(--hnf-bla); }
.hn-form-klar .hnf-spar .hnf-num { width: 19px; height: 19px; font-size: 11px; }

/* ---- knappval (samma språk som målgruppsknapparna i hn-malgrupp.css) ---- */
.hn-form-klar .hnf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.hn-form-klar .hnf-chip {
	font: 700 14.5px/1.3 inherit;
	color: var(--hnf-bla);
	background: var(--hnf-yta);
	border: 1.5px solid var(--hnf-bla);
	border-radius: 999px;
	padding: 7px 15px;
	cursor: pointer;
}
.hn-form-klar .hnf-chip:hover { background: #fdf6e6; }
.hn-form-klar .hnf-chip[aria-pressed="true"] {
	background: var(--hnf-ok-bg);
	border-color: var(--hnf-ok-text);
	color: var(--hnf-ok-text);
}
.hn-form-klar .hnf-chip:focus-visible { outline: 3px solid var(--hnf-guld); outline-offset: 2px; }

/* underkategorier fälls ut under sin förälder */
.hn-form-klar .hnf-underkat {
	margin-top: 11px;
	padding: 12px 15px;
	border-left: 3px solid var(--hnf-bla);
	border-radius: 0 7px 7px 0;
	background: var(--hnf-yta-sank);
}
.hn-form-klar .hnf-underkat > p { margin: 0 0 8px; font-size: 14.5px; color: var(--hnf-dampad); }
.hn-form-klar .hnf-underkat > p b { color: var(--hnf-bla); }
.hn-form-klar .hnf-underkat .hnf-chip { font-size: 13.5px; padding: 5px 13px; border-width: 1px; }

/* ---- genvägen (hämta uppgifter från din befintliga sida) ---- */
.hn-form-klar .hnf-genvag {
	margin: 22px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--hnf-kant);
	border-radius: 8px;
	background: var(--hnf-yta-sank);
}
.hn-form-klar .hnf-genvag h2 {
	margin: 0 0 3px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--hnf-bla);
}
.hn-form-klar .hnf-genvag > p { margin: 0 0 12px; font-size: 15px; color: var(--hnf-dampad); }
/* knappen låg tidigare ovanpå hjälptexten — egen rad, inget överlapp */
.hn-form-klar .hnf-genvag .mb-3.row { margin-bottom: 14px; }
.hn-form-klar .hnf-genvag .mb-3.row:last-child { margin-bottom: 0; }
.hn-form-klar .hnf-genvag button,
.hn-form-klar .hnf-genvag .button,
.hn-form-klar .hnf-genvag input[type="button"] {
	position: static;
	float: none;
	margin-top: 8px;
}

/* ---- felsammanfattning ---- */
.hn-form-klar .hnf-fel {
	border: 1px solid var(--hnf-fel-text);
	border-left-width: 4px;
	border-radius: 7px;
	background: var(--hnf-fel-bg);
	padding: 15px 17px;
	margin: 0 0 22px;
	scroll-margin-top: 20px;
}
.hn-form-klar .hnf-fel h2 {
	margin: 0 0 6px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--hnf-fel-text);
}
.hn-form-klar .hnf-fel ul { margin: 0; padding-left: 19px; font-size: 15px; color: var(--hnf-text); }
.hn-form-klar .hnf-fel li { margin: 3px 0; }
.hn-form-klar .hnf-fel a { color: var(--hnf-fel-text); font-weight: 700; }
.hn-form-klar .hnf-trasig { border-color: var(--hnf-fel-text) !important; }

/* ---- villkorade block ---- */
.hn-form-klar .hnf-villkorat {
	border-left: 2px solid var(--hnf-kant);
	padding-left: 15px;
}
.hn-form-klar [hidden] { display: none !important; }

/* ---- fält på rad ---- */
.hn-form-klar .hnf-rad { display: flex; gap: 14px; flex-wrap: wrap; }
.hn-form-klar .hnf-rad > * { flex: 1 1 190px; min-width: 0; }

/* ---- skicka + support sist ---- */
.hn-form-klar .hnf-support {
	margin-top: 24px;
	padding: 15px 18px;
	border: 1px solid var(--hnf-kant);
	border-radius: 8px;
	background: var(--hnf-yta-sank);
	font-size: 15px;
	color: var(--hnf-dampad);
}
.hn-form-klar .hnf-support h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--hnf-bla); }
.hn-form-klar .hnf-support a { color: var(--hnf-bla); font-weight: 700; }

@media (max-width: 600px) {
	.hn-form-klar .hnf-avsnitt-hjalp { margin-left: 0; }
	.hn-form-klar .hnf-rad { gap: 0; }
	.hn-form-klar .hnf-rad > * { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.hn-form-klar * { transition: none !important; animation: none !important; }
}

/* "Visa alla 11" — samma knappform, men neutral så den inte läses som ett val */
.hn-form-klar .hnf-chip.hnf-mer {
	border-style: dashed;
	color: var(--hnf-dampad);
	border-color: var(--hnf-kant);
	font-weight: 400;
}
.hn-form-klar .hnf-chip.hnf-mer:hover {
	border-color: var(--hnf-bla);
	color: var(--hnf-bla);
	background: var(--hnf-yta);
}

/* select2 initieras EFTER vår JS, så dess container går inte att hitta med
   querySelector vid uppstart. CSS bryr sig inte om ordningen. */
.hn-form-klar [data-hnf-chips] .select2-container,
.hn-form-klar [data-hnf-chips] .select2 {
	display: none !important;
}

/* "Hämta uppgifter"-knappen sitter i ett eget <p> — egen rad, inte klämd
   intill hjälptexten (så såg den ut innan omgrupperingen också). */
.hn-form-klar .hnf-genvag .hnf-genvag-knapp {
	margin: 10px 0 0;
}

/* Platsen kunde inte slås upp — ett besked, inte ett fel. Kunden skickar in
   ändå; kartnålen sätts i granskningen. */
.hn-form-klar .hnf-platsbesked {
	margin: 8px 0 0;
	padding: 10px 13px;
	border-left: 3px solid var(--hnf-guld);
	border-radius: 0 6px 6px 0;
	background: #fef7e0;
	font-size: 14.5px;
	line-height: 1.45;
	color: #6b5400;
}