/* ==============================================
   Kontaktformulär — mörk sektion före vidareskicket
   ==============================================

   Layouten byggs i Bricks: sektion -> container -> innehåll. Den mörka ytan,
   bredden och centreringen är sektionens och containerns jobb, inte den här
   filens — det är också vad projektreglerna säger. Här bor bara utseendet på
   det som är komponentens: textblockens typografi på mörk yta och formulärets
   fält.

   Klasserna sätts på Bricks-elementen, så all text går att redigera i byggaren
   och följer med i översättningsflödet. */

/* Rutnätet: text till vänster, formulär till höger.
   Under ~1100px ryms inte en formulärspalt bredvid texten utan att rubriken
   börjar brytas ord för ord — då staplas de.

   Klassen dubbleras för att väga tyngre än Bricks .brxe-block, som sätter
   display: flex med samma vikt och köas efter temats stilmall. Uppmätt utan
   den: grid-template-columns landade på "none" och spalterna staplades. */
.bcf-grid.bcf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: 64px;
  align-items: start;
}

@media (max-width: 1100px) {
  .bcf-grid.bcf-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Cellerna får aldrig bli bredare än rutnätet.
   Ett grid-spår med "1fr" är minmax(auto, 1fr), och auto-minimum är cellens
   min-content. Textblocket är en Bricks-flexkolumn, och Chrome räknar dess
   min-content som barnens MAX-content — uppmätt 527 px på en 333 px bred
   platta vid 390 px viewport: hela spåret, och därmed formuläret, stack ut
   ur den svarta ytan. min-width: 0 på cellerna gör att spåret följer
   rutnätet, och allt inuti radbryts som det ska. max-width: 100% är bältet
   för det som ändå försöker. */
.bcf-grid.bcf-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* Formuläret och WS Forms tiles följer sin spalt; fälten är 100 % med
   border-box längre ned, så inget i formuläret kan pressa ut bredden. */
.bcf-form.bcf-form,
.bcf-form.bcf-form .wsf-form,
.bcf-form.bcf-form .wsf-tile {
  min-width: 0;
  max-width: 100%;
}

/* ---- Texterna till vänster ----
   Inga färger här. Texten ärver sektionens färg i Bricks, och det som ska
   avvika (kickern) sätts på elementet i byggaren. Undantaget är punktlistan,
   vars färger är komponentens: gula siffror, dämpad text, tunna mörkgrå
   hårlinjer. */
/* Kontaktblocket ligger alltid på svart. Kickern bär också den globala klassen
   brokk-tagline (mörk text); komponentelement får bara en klassregel med samma
   specificitet och förlorade — svart på svart (2026-10-05). Två klasser vinner. */
.bcf-grid .bcf-kicker {
  color: var(--text-light-muted);
}

.bcf-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Ingen font-family: rubriken ärver Saira ur temastilen. */
.bcf-title { text-transform: uppercase; }

/* Bredden (53ch) sätts på elementet i komponenten "Contact block". Här bara taket:
   komponentelement får en klassselektor, inte ett id, och en fast max-width här
   vann tidigare över elementets "max 100%" så ingressen stack ut i mobil (2026-10-05). */
.bcf-lead { max-width: 100%; }

/* Punktlistan numreras av CSS, inte av texten.
   Redaktören skriver tre vanliga listpunkter och får 01, 02, 03 automatiskt.
   Skrivna för hand hamnar siffrorna fel så fort en punkt flyttas, och de följer
   med ut i åtta språk som text som inte ska översättas. */
.bcf-points {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bcf;
}

.bcf-points > ul * + li {
  margin-block-start: 0;
}

/* Blockflöde, inte flex: en punkt kan bära text OCH länkar ("Prefer to
   talk? +46 … · info@…"), och som flex-barn blev varje länk en egen ruta
   som bröts för sig på mobil. Siffran läggs i vänsterkanten med absolut
   position, så resten flyter som vanlig text. */
.bcf-points ul,
.bcf-points li {
  list-style: none;   /* ACSS ger listor i textelement sin punkt tillbaka */
  margin: 0;
  padding: 0;
}

.bcf-points li {
  position: relative;
  padding: var(--space-s) 0 var(--space-s) calc(2.2ch + var(--grid-gap, 16px));
  border-top: 1px solid var(--white-trans-20);
  font-size: var(--text-m);
  line-height: 1.5;
  color: var(--text-light-muted);
}

.bcf-points li:last-child { border-bottom: 1px solid var(--white-trans-10); }

.bcf-points li::before {
  counter-increment: bcf;
  content: counter(bcf, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-s);
  line-height: inherit;
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--primary);
}

.bcf-points a { font-size: var(--text-xs); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bcf-points a:hover { color: var(--primary); }

/* Komponentens egna färger. De satt tidigare på en wrapper som byggde hela
   sektionen; nu när layouten är Bricks-element bor de på formuläret, som är det
   enda den här filen fortfarande äger. */
.bcf-form {
  --bcf-field: #141414;
  --bcf-border: #444;
  --bcf-accent: #ffcd00;
  --bcf-text: #fff;
  --bcf-faint: #a6a6a6;
}

/* Väljarna bär .bcf-form två gånger. WS Forms fem publika stilmallar köas
   efter temats och skriver annars över allt här med samma vikt — uppmätt:
   etiketterna blev mörka på mörkt och knappen sträckte sig över hela spalten.
   Två egna klasser före pluginets väljare vinner oavsett ordning.

   WS Forms variabler sätts på FORMULÄRET, inte på .bcf.
   Pluginet definierar dem på .wsf-form, som ligger innanför .bcf — och en
   custom property löses från närmaste förfader som definierar den. En
   definition på .bcf hade därför aldrig nått fälten; uppmätt: knappen förblev
   blå trots att variabeln var satt. På samma element avgör vikten i stället,
   och tre klasser slår pluginets ena. */
.bcf-form.bcf-form .wsf-form {
  --wsf-field-color: var(--bcf-text);
  --wsf-field-color-background: var(--bcf-field);
  --wsf-field-color-placeholder: #6f6f6f;
  --wsf-field-border-color: var(--bcf-border);
  --wsf-field-border-color-hover: #5a5a5a;
  --wsf-field-border-color-focus: var(--bcf-accent);
  --wsf-field-border-radius: var(--radius-xs, 2px);
  --wsf-label-color: var(--bcf-faint);
  /* Knappens färger: WS Forms egen primärregel väger tyngre än ACSS:s
     .btn--primary, så variablerna pekas på samma tokens som den klassen. */
  --wsf-field-button-primary-color: var(--primary-ultra-dark);
  --wsf-field-button-primary-color-background: var(--primary);
  --wsf-field-button-primary-color-background-hover: var(--primary-hover);
  --wsf-field-button-primary-color-background-focus: var(--primary-hover);
  --wsf-field-button-primary-color-hover: var(--primary-ultra-dark);
  --wsf-field-button-primary-border-color: var(--primary);
  --wsf-field-button-primary-border-color-hover: var(--primary-hover);
}

/* ---- Skicka-knappen ----
   Knappen bär bricks-button btn--primary (satt som fältklass i WS Form) och
   får färg, kant, radie, hover och versaler från ACSS precis som sajtens
   övriga knappar. WS Forms egen knappregel (.wsf-form button.wsf-button)
   väger tyngre än temastilens .bricks-button och skriver annars över
   typsnitt, storlek och padding — därför sätts de här om till ACSS:s
   knapptokens, och typsnittet till --font-condensed (samma familj som
   temastilen sätter direkt på .bricks-button). */
.bcf-form.bcf-form .wsf-form button.wsf-button.bricks-button {
  width: auto;
  min-width: var(--btn-min-width, 14rem);
  padding: var(--btn-pad-y, .875em) var(--btn-pad-x, 1.5em);
  font-family: var(--font-condensed);
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-weight, 600);
  line-height: var(--btn-line-height, 1);
  letter-spacing: var(--btn-letter-spacing, 0);
  text-transform: var(--btn-text-transform, uppercase);
  border-width: var(--btn-border-width, 2px);
  border-radius: var(--btn-radius, var(--radius-xs));
}

/* Samtyckestext till vänster om knappen, knappen högerställd i sin spalt. */
.bcf-form.bcf-form .bcf-consent {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-light-muted);
}
.bcf-form.bcf-form .bcf-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* margin-bottom 0: WS Form ger varje fältwrapper 20px under sig, och den
   sista raden skulle annars ligga 20px högre än samtyckestexten bredvid. */
.bcf-form.bcf-form .bcf-submit { display: flex; justify-content: flex-end; margin-bottom: 0; }

/* ---- Formuläret ----
   Väljarna bär .bcf-form i stället för bara .bcf-form. WS Forms fem
   publika stilmallar köas EFTER temats och skriver annars över allt här med
   samma vikt — uppmätt: fälten blev vita och knappen blå trots att reglerna
   nedan fanns. Två egna klasser före pluginets väljare vinner oavsett ordning,
   och slipper göra komponenten beroende av pluginets handtagsnamn.
   Fältens PLACERING styrs i WS Form (dess egna wsf-small-6 / wsf-extra-small-12
   ger tvåspalten), inte här. Den här filen ger dem bara sitt utseende på den
   mörka ytan. Att lägga ett eget rutnät ovanpå hade tagit ifrån redaktören
   möjligheten att flytta ett fält i formulärbyggaren. */
.bcf-form.bcf-form .wsf-form { margin: 0; }

.bcf-form.bcf-form .wsf-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bcf-faint);
}

.bcf-form.bcf-form .wsf-required-wrapper .wsf-text-danger { color: var(--bcf-accent); }

.bcf-form.bcf-form input.wsf-field[type="text"],
.bcf-form.bcf-form input.wsf-field[type="email"],
.bcf-form.bcf-form input.wsf-field[type="tel"],
.bcf-form.bcf-form select.wsf-field,
.bcf-form.bcf-form textarea.wsf-field {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: var(--bcf-field);
  border: 1px solid var(--bcf-border);
  border-radius: var(--radius-xs, 2px);
  color: var(--bcf-text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.bcf-form.bcf-form textarea.wsf-field {
  height: auto;
  min-height: 132px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

.bcf-form.bcf-form .wsf-field::placeholder { color: #6f6f6f; }
.bcf-form.bcf-form .wsf-field:focus { border-color: var(--bcf-accent); }

/* WS Form ritar sin egen pil i ett syskonelement; select har appearance:none
   från pluginets bas, så pilen är det enda som visar att det är en rullista. */
.bcf-form.bcf-form .wsf-select-arrow { color: var(--bcf-accent); }
.bcf-form.bcf-form select.wsf-field option { background: var(--bcf-field); color: var(--bcf-text); }

/* GDPR-kryssrutan och dess text */
.bcf-form.bcf-form .wsf-field-wrapper[data-type="checkbox"] .wsf-label,
.bcf-form.bcf-form .wsf-checkbox-label,
.bcf-form label.wsf-label-inline {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: #8a8a8a;
}

.bcf-form.bcf-form .wsf-field-wrapper[data-type="checkbox"] a { color: var(--bcf-faint); text-decoration: underline; }
.bcf-form.bcf-form input[type="checkbox"] { accent-color: var(--bcf-accent); }


/* ---- WS Forms meddelanden ---- */
.bcf-form.bcf-form .wsf-invalid-feedback,
.bcf-form.bcf-form .wsf-text-danger { font-size: 12px; color: #ff9a8a; }
.bcf-form.bcf-form .wsf-form-message { color: var(--bcf-text); }