/* ============================================================
   FONOR Invest — styles.css
   Ren HTML + CSS. Inga externa beroenden.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --paper:   #faf9f5;   /* sidbakgrund under hero */
  --ink:     #15171b;   /* nästan svart text */
  --muted:   #8f8f8a;   /* grå etiketter / metadata */
  --faint:   #b8b7b1;   /* svag grå */
  --line:    rgba(21, 23, 27, 0.10);  /* tunna avdelare */
  --cream:   #f4f1e8;   /* knapp / hero-rubrik */
  --orange:  #c46b34;   /* accent */
  --plate:   #1c1a17;   /* mörk platta bakom bolagsloggor */

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", "Book Antiqua",
           Georgia, Cambria, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Helvetica, Arial, sans-serif;

  --pad: clamp(22px, 5.2vw, 84px);   /* horisontell sidmarginal */
  --maxw: 1680px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;              /* skydd mot oavsiktlig horisontell scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* ---------- Header (över mörk hero) ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  padding: clamp(20px, 2.6vh, 30px) var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.wordmark {
  display: inline-block;
  line-height: 0;            /* ingen baslinjeluft under bilden */
}
.wordmark img {
  /* Bildens text upptar ca 58 % av filens höjd, resten är transparent luft.
     Höjden nedan ger samma optiska storlek som det gamla textordmärket. */
  height: clamp(22px, 1.9vw, 28px);
  width: auto;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;        /* fyller hela första skärmen */
  min-height: 100svh;       /* på mobil: hela synliga ytan vid laddning */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(56px, 9vh, 120px) var(--pad);
  /* extra luft nedtill så rubriken inte krockar med scroll-hinten */
  padding-bottom: clamp(150px, 23vh, 235px);
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(8,12,20,0.64) 0%, rgba(8,12,20,0.32) 44%, rgba(8,12,20,0.12) 100%),
    linear-gradient(0deg,  rgba(8,12,20,0.56) 0%, rgba(8,12,20,0.00) 46%),
    url("assets/hero.webp") center / cover no-repeat;
  background-color: #0e1620;
}
.hero__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.3vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 34ch;
  color: #f2eee4;
  text-wrap: balance;
}

/* ---------- Scroll-hint ---------- */
/* Ersätter den gamla "Våra innehav"-knappen — samma utseende på mobil och desktop. */
.hero-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vh, 18px);
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 4.5vh, 48px);
  transform: translateX(-50%);
  padding: 6px 14px;              /* större klickyta */
}
.hero-hint__label {
  font-family: var(--sans);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s ease;
}
.hero-hint:hover .hero-hint__label { color: #fff; }
.hero-hint__track {                /* svag heldragen bana — gör hinten synlig även i vilofas */
  position: relative;
  width: 1px;
  height: clamp(46px, 8vh, 78px);
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.hero-hint__line {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  transform-origin: top center;
  animation: hint-pulse 2.2s ease-in-out infinite;
}

/* Desktop: hinten sitter närmare nederkanten än på mobil */
@media (min-width: 601px) {
  .hero-hint {
    bottom: clamp(4px, 0.9vh, 12px);
    padding-bottom: 2px;              /* nästan hela klickytans luft bort — linjen får gå längst ned */
  }
}

/* ---------- Innehav ---------- */
.holdings {
  padding: clamp(56px, 9vh, 118px) var(--pad);
}
.holdings__inner { max-width: var(--maxw); margin: 0 auto; }

.section-head {
  margin-bottom: clamp(32px, 4vh, 52px);
}
.sh-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 7.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sh-title .sh-dot { color: var(--orange); }
.sh-count {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: var(--muted);
}

/* tabell / dropdown */
.t-head,
.t-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 84px 14px;
  gap: 1.25rem;
  align-items: center;
}
.t-head {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ink);
}
.t-head span {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-head .h-since,
.t-since { text-align: right; }

/* varje bolag = <details> */
.t-item { border-bottom: 1px solid var(--line); }
.t-row {                                  /* <summary> */
  grid-template-areas:
    "name   sector since chev"
    "more   sector since chev";
  row-gap: 0.35rem;
  padding: clamp(1.35rem, 3.1vh, 2.15rem) 0;
  cursor: pointer;
  list-style: none;
}
.t-name   { grid-area: name; }
.t-more   { grid-area: more; }
.t-sector { grid-area: sector; }
.t-since  { grid-area: since; }
.t-chev   { grid-area: chev; }
.t-row::-webkit-details-marker { display: none; }
.t-row:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 2px;
}
.t-item:hover .t-name { color: #000; }

.t-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.2s ease;
}
.t-more {                                 /* "Läs mer" / "Stäng" under namnet */
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}
.t-more::after { content: "Läs mer"; }
.t-item[open] .t-more::after { content: "Stäng"; }
.t-item[open] .t-more,
.t-item:hover .t-more { color: var(--orange); }

.t-sector,
.t-since {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  color: var(--muted);
}
.t-since { font-variant-numeric: tabular-nums; }

.t-chev {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg);              /* nedåtpil */
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.t-item[open] .t-chev { transform: rotate(225deg); }   /* uppåt när öppen */
.t-item:hover .t-chev { border-color: var(--ink); }

/* utfälld info */
.t-panel {
  padding: 0.3rem 0 clamp(1.6rem, 3.5vh, 2.4rem);
  animation: t-reveal 0.28s ease;
}
@keyframes t-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.t-logo {
  display: block;              /* egen rad, annars ställer sig .t-link bredvid loggan */
  margin: 1.8rem 0 0;          /* luft mot texten ovanför; .t-link sköter luften nedåt */
}
.t-logo img {
  height: auto;
  width: auto;
  max-height: 72px;                      /* höjd- + breddtak balanserar fyrkantiga vs breda loggor */
  max-width: 108px;
  object-fit: contain;
}
.t-desc {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: #303236;
  max-width: 62ch;
}
.t-link {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--orange);
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
.t-link:hover { color: var(--orange); }

/* ---------- Kontaktsektion ---------- */
.contact-band {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 9vh, 116px) var(--pad);
}
.contact-band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.contact-band__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0.7rem 0 0;
}
.contact-band__details { padding-top: 0.35rem; }
.contact-band__mail {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--orange);
  transition: text-decoration-color 0.2s ease;
}
.contact-band__mail:hover { text-decoration-color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(28px, 5vh, 46px) var(--pad);
}
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 0.96rem;
  color: var(--muted);
}
.site-footer a:hover { color: var(--ink); }

/* ---------- Fokus / tillgänglighet ---------- */
a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   Responsivt
   ============================================================ */
@media (max-width: 760px) {
  .contact-band__inner { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); }
}

@media (max-width: 720px) {
  .t-head { grid-template-columns: 1fr auto 14px; }
  .t-head .h-sector { display: none; }

  .t-row {
    grid-template-columns: 1fr auto 14px;
    grid-template-areas:
      "name   since  chev"
      "sector sector ."
      "more   more   .";
    row-gap: 0.3rem;
    align-items: baseline;
  }
  .t-name   { grid-area: name; }
  .t-since  { grid-area: since; }
  .t-sector { grid-area: sector; text-align: left; }
  .t-more   { grid-area: more; text-align: left; }
  .t-chev   { grid-area: chev; align-self: center; }
}

@media (max-width: 600px) {
  /* --- Mobil hero: centrerad fet sans, mörk gloria + vinjett, scroll-hint --- */
  .site-header {
    border-bottom: none;
  }
  .hero {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(56px, 9vh, 120px);   /* mobilen centrerar — behåll ursprunglig luft */
    background:
      radial-gradient(ellipse 120% 46% at 50% 47%, rgba(10,16,32,0.82) 0%, rgba(10,16,32,0) 72%),
      radial-gradient(ellipse 135% 96% at 50% 50%, rgba(8,12,20,0) 38%, rgba(8,12,20,0.44) 100%),
      url("assets/hero.webp") center / cover no-repeat;
    background-color: #0e1620;
  }
  .hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    color: #f2eee4;
    max-width: none;
    text-wrap: normal;
    letter-spacing: -0.01em;
    font-size: clamp(2.4rem, 9.6vw, 3.1rem);
    line-height: 1.1;
  }
  .hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
  .hero h1 .line > span { display: block; }
}

/* Ridå-animation för rubriken — endast mobil, endast om rörelse tillåts */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .hero h1 .line > span {
    transform: translateY(112%);
    animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero h1 .line:nth-child(1) > span { animation-delay: 0.05s; }
  .hero h1 .line:nth-child(2) > span { animation-delay: 0.17s; }
  .hero h1 .line:nth-child(3) > span { animation-delay: 0.29s; }
}

@keyframes hero-rise {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}
@keyframes hint-pulse {
  0%, 100% { transform: scaleY(0.15); opacity: 0.35; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

@media (max-width: 560px) {
  .site-footer__inner { flex-direction: column; gap: 0.35rem; }
}