/* Publika sidor. Bygger på stil.css - här ligger bara det som skiljer.
 *
 * Deltagaren möter det här på telefon, ofta stående i en butik eller på
 * väg någonstans. Bredare textrader och större tryckytor än i admin, där
 * någon sitter vid en skärm och matar in många fält.
 */

/* Här är löptext, inte ett verktyg. Brödtexten går därför i profilens
   New Century Schoolbook, medan formulärets etiketter och knappar behåller
   Akzidenz Grotesk - samma uppdelning som i manualens hierarki. */
.publik { font-family: var(--hs-brod); font-size: 1.02rem; }
.publik label, .publik .knapp, .publik .hjalp,
.publik input, .publik select, .publik textarea, .publik .fakta dt,
.publik .svag, .publik .markor { font-family: var(--hs-ui); }

.ram.smal { max-width: 44rem; }

/* Avsändaren: Hemslöjdens logotyp med föreningens namn under. Blocket ligger
   i publik/bas.html och visas bara när sidan hör till en förening.

   Frizonen är inte dekoration utan en regel i manualen: minst ordmärkets
   versalhöjd runt om. Ordmärket i filen mäter 81 px av logotypens 141, och
   versalerna knappt en tredjedel av höjden - vid 200 px visad bredd blir det
   ca 15 px, alltså är 1rem golvet. Krymp inte logotypen under 160 px heller;
   under det blir ordmärket oläsligt och då ska det inte stå där alls. */
.avsandare { margin: 0 0 1.5rem; }
.avsandare-logotyp {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}
.avsandare-namn {
  font-family: var(--hs-brod);
  font-weight: 700;
  font-size: 1rem;
  color: var(--hs-brun);
  margin: 1rem 0 0;
}

.publikhuvud {
  border-bottom: 3px solid var(--hs-brun);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}
.publikhuvud h1 { margin: 0.2rem 0 0; font-size: 1.7rem; }

/* Ingressen sätts i Akzidenz enligt hierarkin, inte i brödtextsnittet.
   Manualen säger fet; profilen har Medium och Black, och Black är rätt här -
   ingressen ska sticka ut mot brödtexten. */
.ingress {
  font-family: var(--hs-ui);
  font-weight: 900;
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--hs-brun);
}

.brodtext p { margin: 0 0 0.8rem; }
/* Löptexten går i New Century Schoolbook, som har en riktig fet skärning -
   här är <strong> alltså verklig fetstil, till skillnad från i admin. */
.publik .brodtext strong, .publik p strong { font-weight: 700; color: inherit; }

/* Villkoren kan innehålla en lång adress till en extern policy. Den ska inte
   kunna pressa ut sidan på en smal mobilskärm. */
.villkorstext { overflow-wrap: anywhere; }
/* Föreningens korta villkor inuti anmälningsformuläret. Mindre grad än
   formulärets egen text, och luften mellan blocken tas bort i kanterna så
   att texten inte ser ut att sväva i sitt fält. */
.villkorstext-liten { font-size: .88rem; overflow-wrap: anywhere; }
.villkorstext-liten > :first-child { margin-top: 0; }
.villkorstext-liten > :last-child { margin-bottom: 0; }
.villkorstext-liten h3 { font-size: 1rem; margin-bottom: .2rem; }


/* Tryckytan ska gå att träffa med tummen */
.knapp.stor {
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
}
@media (max-width: 460px) {
  .knapp.stor { display: block; width: 100%; text-align: center; }
}

/* Integritetsinformationen ska finnas, men inte tränga undan formuläret.
   Hopfälld är ett medvetet val: den som vill veta hittar den, den som redan
   vet slipper skrolla förbi den. */
.integritet {
  margin: 1.25rem 0;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  font-size: 0.85rem;
}
.integritet summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--hs-bla-lank);
}
.integritet p { margin: 0.6rem 0 0; }

.sidfot {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hs-ram);
  font-size: 0.82rem;
  color: var(--hs-svag);
}

/* --------------------------------------------------------------------------
 * Startsidan
 *
 * Enda publika sidan som vänder sig åt två håll: dels en förening som
 * funderar på att använda systemet, dels en deltagare som råkat hamna på
 * rotadressen. Den första får hero och skärmbilder, den andra ett avsnitt
 * längre ner - viktig men inte det man möts av.
 * -------------------------------------------------------------------------- */

.starttoppmeny { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.starttoppmeny .knapp { margin: 0; }

.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
.hero h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 0.9rem; }
.hero .ingress { margin: 0 0 1.4rem; }
.hero .hjalp { margin: 0.5rem 0 0; }

/* Två spalter först när det finns plats för både text och bild. Under det
   staplas de, och skärmbilderna hamnar under pitchen där de hör hemma. */
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
}

.skarmbilder { display: grid; gap: 1.1rem; }
.skarmbild { margin: 0; }
/* Hela bilden är klickytan. Knappen ska inte se ut som en knapp - den bär
   bilden, och det är bilden man tror sig klicka på. */
.skarmbildsyta {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.skarmbildsyta:focus-visible {
  outline: 3px solid var(--hs-bla);
  outline-offset: 2px;
}

/* width/height står också i markup, så rutan reserveras innan bilden hämtas
   och texten under inte hoppar. */
.skarmbildsyta img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
}
.skarmbild figcaption {
  font-family: var(--hs-ui);
  font-size: 0.8rem;
  color: var(--hs-svag);
  margin-top: 0.45rem;
}

/* Löptexten läses bäst i kort rad även när sidan i övrigt är bred. */
.startdel { margin-bottom: 2.75rem; max-width: 44rem; }
.startdel h2 { font-size: 1.35rem; margin: 0 0 0.7rem; }

.foreningslista { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.foreningslista li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hs-ram);
}
.foreningslista li:last-child { border-bottom: 0; }
/* Swish-betalning på kvittosidan (TASK-581/615/596). En telefon kan inte
   skanna sin egen skärm, så QR-koden (för dator, skannas med mobilen) och
   knappen som öppnar Swish-appen direkt (för mobilen) visas aldrig
   samtidigt. Vilken som syns avgörs med en bredd-brytpunkt i CSS, inte en
   user-agent-gissning på servern - samma brytpunkt (640px) som resten av
   sidans layout redan använder, se stil.css. Ingen JavaScript krävs, och
   sidan går att cacha utan att visa fel yta. */
.swish-qr-yta img { display: block; max-width: 300px; width: 100%; height: auto; }
.swish-lank-yta { display: none; }
@media (max-width: 640px) {
  .swish-qr-yta { display: none; }
  .swish-lank-yta { display: block; }
}