/* Takteam-skin: renderar strukturytan i Takteams nya grafiska anda (marinblå/gul, Barlow/Rakkas).
   Viva-baren (header) behålls grön och pinnas. Skinnet gäller site-nav + strukturinnehållet. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Rakkas&display=swap');

:root {
  --tt-navy: #051e40;
  --tt-blue: #2d6abf;
  --tt-blue-light: #5788cc;
  --tt-pale: #cfdef2;
  --tt-yellow: #f5d722;
  --tt-orange: #ff6900;
  --tt-bg: #f5f4f1;
  --tt-line: #e3e6ea;
  --tt-text: #1b2a3f;
  --tt-muted: #5a6675;
}

body { font-family: "Barlow", Arial, sans-serif; background: var(--tt-bg); }

/* Pinna Viva-arbetsbaren (grön) överst */
.header { position: sticky; top: 0; z-index: 200; }

/* Sajtens nav (Tjänster m.fl.) i Takteam-stil, direkt under Viva-baren */
.top-nav { background: var(--tt-navy); border-bottom: 3px solid var(--tt-yellow); position: sticky; top: 0; z-index: 150; }
.top-nav__inner { padding: 0 1.2rem; }
.top-nav__item { color: #fff; letter-spacing: .02em; }
.top-nav__item:hover, .top-nav__item.is-open { color: var(--tt-yellow); border-bottom-color: var(--tt-yellow); }

/* Megameny i Takteam-stil */
.megamenu { border-top: 3px solid var(--tt-yellow); }
.megamenu__col-title { color: var(--tt-navy); }
.megamenu__col-title:hover { color: var(--tt-blue); }
.megamenu__link:hover { color: var(--tt-blue); }

/* Strukturytan (Takteam-sajt) */
.tt-site { font-family: "Barlow", Arial, sans-serif; }

.tt-hero2 {
  position: relative; overflow: hidden; border-radius: 18px; margin-bottom: 1.6rem;
  background: var(--tt-navy) url('assets/takteam/banner-hero-bg3.jpg') center/cover no-repeat;
  color: #fff; padding: 3.2rem 2.6rem;
}
.tt-hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5,30,64,.82) 38%, rgba(5,30,64,.30)); }
.tt-hero2 > * { position: relative; z-index: 1; }
.tt-hero2__since { font-size: .72rem; letter-spacing: .26em; opacity: .82; font-weight: 600; }
.tt-hero2__wordmark { font-family: "Barlow"; font-weight: 900; font-size: 3.6rem; line-height: .95; letter-spacing: .03em; margin: .2rem 0; }
.tt-hero2__tag { font-size: 1.15rem; opacity: .96; max-width: 520px; }
.tt-btn { display: inline-block; background: var(--tt-yellow); color: var(--tt-navy); font-weight: 800; padding: .72rem 1.5rem; border-radius: 7px; text-decoration: none; margin-top: 1.3rem; border: none; cursor: pointer; font-size: .92rem; letter-spacing: .02em; }
.tt-btn:hover { background: #ffe65a; }

.tt-eyebrow { color: var(--tt-blue); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .76rem; }
.tt-h2 { color: var(--tt-navy); font-size: 1.55rem; font-weight: 800; margin: .15rem 0 .35rem; }
.tt-lead { color: var(--tt-muted); max-width: 700px; line-height: 1.55; margin: 0 0 1rem; }
.tt-section-h { margin: 1.8rem 0 .9rem; }

.tt-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 1rem; }
.tt-svc-card { background: #fff; border: 1px solid var(--tt-line); border-top: 4px solid var(--tt-blue); border-radius: 12px; padding: 1.15rem 1.3rem; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tt-svc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(5,30,64,.12); border-top-color: var(--tt-yellow); }
.tt-svc-card__title { font-weight: 800; color: var(--tt-navy); font-size: 1.06rem; }
.tt-svc-card__meta { font-size: .76rem; color: var(--tt-blue); font-family: 'JetBrains Mono', monospace; margin-top: .3rem; word-break: break-all; }
.tt-svc-card__desc { font-size: .84rem; color: var(--tt-muted); margin-top: .45rem; line-height: 1.45; }

/* status-badge i Takteam-palett (återanvänder .tt-badge-strukturen, egna färger här) */
.tt-site .tt-badge--pelare { background: var(--tt-navy); color: var(--tt-yellow); }
.tt-site .tt-badge--flyttas { background: var(--tt-blue); color: #fff; }
.tt-site .tt-badge--ny { background: var(--tt-orange); color: #fff; }
.tt-site .tt-badge--intakt { background: var(--tt-yellow); color: var(--tt-navy); }
.tt-site .tt-badge--finns { background: var(--tt-bg); color: var(--tt-muted); border: 1px solid var(--tt-line); }
.tt-site .tt-badge--oplacerad { background: #ffe1c2; color: #8a4b16; }

.tt-crumbs2 { font-size: .82rem; color: var(--tt-muted); margin-bottom: .8rem; }
.tt-crumbs2 a { color: var(--tt-blue); cursor: pointer; text-decoration: none; }
.tt-crumbs2 a:hover { text-decoration: underline; }

.tt-secondary { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.tt-pill { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--tt-line); border-radius: 999px; padding: .45rem .95rem; font-weight: 600; color: var(--tt-navy); cursor: pointer; font-size: .85rem; }
.tt-pill:hover { border-color: var(--tt-yellow); color: var(--tt-blue); }

.tt-note { font-size: .8rem; color: var(--tt-muted); background: #fff; border: 1px solid var(--tt-line); border-left: 3px solid var(--tt-yellow); border-radius: 8px; padding: .7rem .95rem; margin: .8rem 0; max-width: 720px; }

@media (max-width: 560px) {
  .tt-hero2 { padding: 2rem 1.4rem; }
  .tt-hero2__wordmark { font-size: 2.4rem; }
  .tt-hero2__tag { font-size: 1rem; }
  .tt-svc-grid { grid-template-columns: 1fr; }
}