/* actiontrade.se, konceptversion */

:root {
  --orange: #FF7A00;
  --orange-djup: #E06400;
  --svart: #000000;
  --yta: #161616;
  --kant: #2E2E2E;
  --vit: #FFFFFF;
  --gra-ljus: #A3A3A3;
  --papper: #F3F3F1;

  --rubrik: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --brod: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ram-max: 1200px;
  --ram-luft: clamp(20px, 4vw, 48px);
  --sektion-luft: clamp(72px, 10vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--brod);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--svart);
  background: var(--orange);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--rubrik);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.03em;
}

p { margin: 0 0 1em; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

.ram {
  max-width: var(--ram-max);
  margin: 0 auto;
  padding: 0 var(--ram-luft);
}

.hoppa {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--svart);
  color: var(--vit);
  padding: 10px 16px;
  z-index: 10;
}
.hoppa:focus { top: 12px; }

.ingress {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}

/* Knappar och länkar */

.knapp {
  display: inline-block;
  font-family: var(--rubrik);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.knapp-svart { background: var(--svart); color: var(--vit); }
.knapp-svart:hover { background: var(--yta); color: var(--orange); }

.textlank {
  font-family: var(--rubrik);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.textlank:hover { text-decoration-thickness: 4px; }
.textlank-ljus { color: var(--orange); }

/* Sidhuvud, följer med när man scrollar */

.topp {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--orange);
}

/* Rubriker hamnar under menyn, inte bakom den, när man hoppar via länk */
[id] { scroll-margin-top: 88px; }

/* Hoppa-länken ska synas ovanför menyn */
.hoppa { z-index: 100; }

.topp-inre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.varumarke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.varumarke-symbol { width: 34px; height: 34px; }
.varumarke-ord {
  font-family: var(--rubrik);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.huvudmeny {
  display: flex;
  align-items: center;
  gap: 28px;
}
.huvudmeny a:not(.knapp) {
  font-family: var(--rubrik);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.huvudmeny a:not(.knapp):hover,
.huvudmeny a[aria-current="page"] { border-bottom-color: currentColor; }

.meny-knapp {
  display: none;
  font: 700 1rem var(--rubrik);
  background: var(--svart);
  color: var(--vit);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}

/* Hero */

.hero-inre {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 48px;
  padding-top: clamp(48px, 8vw, 110px);
  padding-bottom: clamp(72px, 10vw, 140px);
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 6.75rem);
  line-height: .95;
  letter-spacing: -0.045em;
  margin-bottom: 32px;
}
.hero .ingress { max-width: 32rem; margin-bottom: 40px; }

.hero-knappar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}

.hero-symbol { justify-self: end; width: 100%; max-width: 420px; }
.stor-symbol { width: 100%; height: auto; }

/* Navet */

.hubb {
  background: var(--svart);
  color: var(--vit);
  padding: var(--sektion-luft) 0;
}

.sektion-topp { max-width: 40rem; margin-bottom: clamp(48px, 7vw, 88px); }
.sektion-topp h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  margin-bottom: 20px;
}
.sektion-topp p { color: var(--gra-ljus); font-size: 1.2rem; }

.hubb-karta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px) 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.hubb-linjer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hubb-linjer path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  opacity: .7;
  transition: opacity .25s, stroke-width .25s;
}
.hubb-linjer path.ledig { stroke-dasharray: 5 9; }
.hubb-linjer path.markerad { opacity: 1; stroke-width: 3; }
.hubb-linjer circle { fill: var(--orange); transition: r .25s; }

.hubb-kolumn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 64px);
}

.hubb-nav { position: relative; display: flex; justify-content: center; }

.hubb-karna {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  color: var(--svart);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 0 0 14px rgba(255, 122, 0, .12), 0 0 0 30px rgba(255, 122, 0, .06);
}
.karna-symbol { width: 34%; height: auto; }
.hubb-karna span {
  font-family: var(--rubrik);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: -0.04em;
}

/* Spårkort */

.spar {
  position: relative;
  background: var(--yta);
  padding: 28px 30px 30px;
  border-radius: 4px;
}
.spar-vanster { border-right: 6px solid var(--marke); }
.spar-hoger { border-left: 6px solid var(--marke); }

.spar-ledig {
  background: transparent;
  border: 2px dashed var(--kant);
}
.spar-ledig.spar-vanster { border-right: 6px solid var(--orange); }
.spar-ledig.spar-hoger { border-left: 6px solid var(--orange); }

.spar-lage {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--svart);
  background: var(--marke);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.spar-ledig .spar-lage { background: var(--orange); }

.spar-namn {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.1;
  margin-bottom: 6px;
}
.spar-logga { max-height: 48px; width: auto; }

.spar-rubrik {
  font-family: var(--rubrik);
  font-weight: 600;
  color: var(--vit);
  margin-bottom: 12px;
}
.spar-text { color: var(--gra-ljus); font-size: 1rem; margin-bottom: 20px; }

.spar-lank {
  font-family: var(--rubrik);
  font-weight: 700;
  font-size: .95rem;
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* Hela kortet blir klickbart */
.spar-lank::after { content: ""; position: absolute; inset: 0; }
.spar:hover .spar-lank { text-decoration-thickness: 4px; }

/* Alvesta */

.alvesta {
  background: var(--vit);
  padding: var(--sektion-luft) 0;
  overflow: hidden;
}

.alvesta-inre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.nyhet {
  display: inline-block;
  font-family: var(--rubrik);
  font-weight: 700;
  font-size: .9rem;
  background: var(--orange);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.alvesta h2 {
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  line-height: 1;
  margin-bottom: 24px;
}
.alvesta .ingress { max-width: 30rem; margin-bottom: 32px; }

.produkter {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border-top: 2px solid var(--svart);
}
.produkter li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  border-bottom: 1px solid #D8D8D8;
}
.produkter strong { font-family: var(--rubrik); font-weight: 700; }
.produkter span { color: #555; }

.alvesta-bilder {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--papper);
  border-radius: 4px;
}
.alvesta-bilder img {
  position: absolute;
  height: auto;
  background: var(--vit);
  border-radius: 4px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35);
}
.bild-hushall { width: 50%; left: 7%; top: 7%; padding: 14px; }
.bild-toalett { width: 70%; right: 5%; bottom: 9%; padding: 18px 12px; }

/* Tommy */

.tommy {
  background: var(--svart);
  color: var(--vit);
  padding: var(--sektion-luft) 0;
}

.tommy-inre {
  display: grid;
  grid-template-columns: minmax(260px, 5fr) 7fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}

.tommy-portratt { margin: 0; }
.portratt-yta {
  aspect-ratio: 4 / 5;
  background: var(--orange);
  color: var(--svart);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  font-family: var(--rubrik);
  font-weight: 800;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: .8;
  letter-spacing: -0.06em;
}
.tommy-portratt figcaption { color: var(--gra-ljus); font-size: .9rem; margin-top: 12px; }

.tommy h2 {
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  line-height: 1;
  margin-bottom: 16px;
}
.tommy .ingress { color: var(--orange); margin-bottom: 28px; }
.tommy-text p:not(.ingress) { color: #D6D6D6; max-width: 36rem; }

.citat {
  margin: 36px 0;
  padding-left: 24px;
  border-left: 6px solid var(--orange);
}
.citat p {
  font-family: var(--rubrik);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--vit) !important;
  margin: 0;
}

/* Samarbeta och kontakt */

.samarbeta { padding: var(--sektion-luft) 0; }

.samarbeta-inre {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
}

.samarbeta-text h2 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
}
.samarbeta-text p { max-width: 34rem; }
.samarbeta-text .knapp { margin-top: 16px; }

.kontakt {
  background: var(--svart);
  color: var(--vit);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 4px;
}
.kontakt-rubrik { font-size: 1.5rem; margin-bottom: 20px; }
.kontakt-epost {
  display: inline-block;
  font-family: var(--rubrik);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  color: var(--orange);
  text-decoration: none;
  border-bottom: 3px solid var(--orange);
  margin-bottom: 24px;
  word-break: break-word;
}
.kontakt-epost:hover { color: var(--vit); border-bottom-color: var(--vit); }
.kontakt p { color: var(--gra-ljus); margin: 0; }

/* Sidfot */

.fot {
  background: var(--svart);
  color: var(--gra-ljus);
  font-size: .95rem;
  border-top: 1px solid var(--kant);
}

.fot-inre {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding-top: 56px;
  padding-bottom: 40px;
}

.varumarke-fot { color: var(--orange); margin-bottom: 18px; }
.fot-bolag p { margin: 0; line-height: 1.7; }

.fot-meny {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fot-meny a { color: var(--vit); text-decoration: none; }
.fot-meny a:hover { color: var(--orange); }

.fot-rad {
  grid-column: 1 / -1;
  border-top: 1px solid var(--kant);
  padding-top: 24px;
  margin: 8px 0 0;
}

/* Rörelse: linjerna ritas ut från navet en gång */

.hubb-karta.rita .hubb-linjer path {
  transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1), opacity .25s, stroke-width .25s;
}

/* Surfplatta */

@media (max-width: 1000px) {
  .hubb-karta { grid-template-columns: 1fr minmax(160px, 200px) 1fr; gap: 28px; }
  .spar { padding: 22px 22px 24px; }
}

/* Mobil */

@media (max-width: 860px) {
  .meny-knapp { display: inline-block; }

  .topp-inre { flex-wrap: wrap; }

  .huvudmeny {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
  }
  .huvudmeny.oppen { display: flex; }
  .huvudmeny a:not(.knapp) { font-size: 1.2rem; }
  .huvudmeny .knapp { margin-top: 12px; }

  .hero-inre { grid-template-columns: 1fr; }
  .hero-symbol { display: none; }

  /* Navet blir en lodrät linje med korten under */
  .hubb-karta { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hubb-linjer { display: none; }
  .hubb-nav { order: -1; justify-content: center; margin: 16px 0 48px; }
  .hubb-karna { width: 150px; }
  .hubb-kolumn { display: contents; }

  .spar { order: var(--ordning); }
  .spar,
  .spar-vanster,
  .spar-hoger { border-right: 0; border-left: 6px solid var(--marke); margin-bottom: 20px; }
  .spar-ledig.spar-vanster,
  .spar-ledig.spar-hoger { border-right: 2px dashed var(--kant); border-left: 6px solid var(--orange); }

  .alvesta-inre,
  .tommy-inre,
  .samarbeta-inre { grid-template-columns: 1fr; }

  .alvesta-bilder { order: -1; max-width: 480px; }

  .tommy-portratt { max-width: 320px; }

  .fot-inre { grid-template-columns: 1fr; }
  .fot-meny { align-items: flex-start; }
}