/* ================================================================
   Upptäck — css-designprinciper.md scope-override
   ================================================================
   Skuggar shared/css/variables.css inom body[data-tool="upptack"]
   utan att påverka andra sidor.

   Spec: projects/prototyp/docs/css-designprinciper.md
   Princip: specen styr, sidan följer.

   Etapper:
   - Etapp 1: Lager 1 (variabel-skuggning) + Lager 2 (link-defaults)
   - Etapp 2: Lager 3 (H1/H2 + Body 1 + tagline)
   - Etapp 3: Komponenter (pills, item-action, filter-status)
   - Etapp 4: Full-width hero (#00A09B + vit text)
   - Etapp 5 (denna fil): Full-width pills-section +
                          pills standardiserade mot .landing-tool-link
   ================================================================ */

/* ----------------------------------------------------------------
   LAGER 1 — Variabel-skuggning
   ---------------------------------------------------------------- */
body[data-tool="upptack"] {
  --color-primary:          #00A09B;
  --color-primary-rgb:      0, 160, 155;
  --color-primary-hover:    #008C87;
  --color-secondary-teal:   #00A09B;

  --color-text-primary:     #262626;
  --color-text-heading:     #262626;
  --color-text-secondary:   #959E9F;
  --color-text-muted:       #959E9F;

  --font-weight-bold:       800;
}

/* ------------------------------------
   LAGER 2 — Element-defaults
   ---------------------------------------------------------------- */
body[data-tool="upptack"] a:not([class]),
body[data-tool="upptack"] a.filter-clear {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #00A09B;
}

@media (max-width: 600px) {
  body[data-tool="upptack"] a:not([class]),
  body[data-tool="upptack"] a.filter-clear {
    font-size: 12px;
  }
}

/* ----------------------------------------------------------------
   HERO — Full-width header med teal bg och vit text
   Speglar landing-hero-mönstret men med solid #00A09B i stället
   för gradient.

   Storlek: matchar landing-hero (greeting 52/30, desc 16/15).
   Inner-wrapper max 760px centrerad.
   ---------------------------------------------------------------- */
body[data-tool="upptack"] .upptack-hero {
  background: #00A09B;
  padding: calc(var(--space-8) + var(--space-2)) var(--space-4);
  width: 100%;
}

body[data-tool="upptack"] .upptack-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

body[data-tool="upptack"] .upptack-hero .upptack-title {
  font-family: 'Rubik', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0 0 var(--space-2);
}

body[data-tool="upptack"] .upptack-hero .upptack-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.57;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  body[data-tool="upptack"] .upptack-hero {
    padding: var(--space-6) var(--space-3);
  }
  body[data-tool="upptack"] .upptack-hero .upptack-title {
    font-size: 30px;
  }
  body[data-tool="upptack"] .upptack-hero .upptack-subtitle {
    font-size: 15px;
  }
}

/* ----------------------------------------------------------------
   PILLS-SECTION — Full-width sektion mellan hero och innehåll
   Ger pills (filter-knappar) en egen yta. Inner-wrapper centrerar
   pills + filter-status med samma maxbredd som hero.

   Pill-designen i sig kommer från shared .landing-tool-link
   (standardiserad pill-look för "länkande element" som finns på
   alla verktygs-intro-sidor). Här lägger vi bara aktiv-state +
   sektion-container.
   ---------------------------------------------------------------- */
body[data-tool="upptack"] .upptack-pills-section {
  width: 100%;
  background: #FFFFFF;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  /* Sticky pills — följer med vid scroll, hamnar precis under navet.
     .app-header är 65px (desktop) / 56px (mobil) + 1px border.
     z-index < 100 (navet) men > sidans innehåll. */
  position: sticky;
  top: 65px;
  z-index: 50;
}

body[data-tool="upptack"] .upptack-pills-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Default bg — överallt annars är .landing-tool-link ett <a>-element
   (transparent bg). Här är de <button> som har browser-default
   ButtonFace (ljusgrå). Tvinga transparent så designen matchar. */
body[data-tool="upptack"] .pill.landing-tool-link,
body[data-tool="upptack"] button.landing-tool-link {
  background: transparent;
}

/* Aktiv pill — teal bg + vit text. Behövs för att valet ska synas
   mot listan nedanför. .landing-tool-link hover-design (teal text
   + teal border + soft-teal bg) räcker inte som "vald" state. */
body[data-tool="upptack"] .pill.landing-tool-link.active,
body[data-tool="upptack"] .landing-tool-link.active {
  background: #00A09B;
  color: #FFFFFF;
  border-color: #00A09B;
}

body[data-tool="upptack"] .pill.landing-tool-link.active:hover,
body[data-tool="upptack"] .landing-tool-link.active:hover {
  background: #008C87;
  border-color: #008C87;
  color: #FFFFFF;
}

/* Filter-status placeras inom inner-wrappern, lite luft över */
body[data-tool="upptack"] .upptack-pills-inner .filter-status {
  margin-top: var(--space-3);
  margin-bottom: 0;                  /* sektion-padding ger luft under */
  justify-content: center;
  text-align: center;
}

@media (max-width: 600px) {
  body[data-tool="upptack"] .upptack-pills-section {
    padding: var(--space-4) var(--space-3);
    top: 56px;
  }
}

/* ----------------------------------------------------------------
   PAGE — Justering efter att hero och pills brutits loss
   Inga top-padding behövs. Lite luft över första tema.
   ---------------------------------------------------------------- */
body[data-tool="upptack"] .upptack-page {
  padding-top: var(--space-6);
}

@media (max-width: 600px) {
  body[data-tool="upptack"] .upptack-page {
    padding-top: var(--space-4);
  }
}

/* ----------------------------------------------------------------
   LAGER 3 — Typografi (temarubriker + Body 1 nere på sidan)
   .upptack-title/.upptack-subtitle styrs inom hero-scope ovan.
   ------------------------------------------------------- */
body[data-tool="upptack"] .upptack-tema-title {
  font-family: 'Rubik', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  color: #262626;
}

body[data-tool="upptack"] .upptack-item-text {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.57;
  color: #262626;
}

@media (max-width: 600px) {
  body[data-tool="upptack"] .upptack-tema-title {
    font-size: 20px;
  }
  body[data-tool="upptack"] .upptack-item-text {
    font-size: 15px;
  }
}

/* ----------------------------------------------------------------
   KOMPONENTER (utöver pills)
   ---------------------------------------------------------------- */

/* === Item-action ("Prata med en expert →" / "Beställ feedback →") === */
body[data-tool="upptack"] .upptack-item-action {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

body[data-tool="upptack"] .upptack-item:hover .upptack-item-action {
  color: #00A09B;
}

@media (max-width: 600px) {
  body[data-tool="upptack"] .upptack-item-action {
    font-size: 12px;
  }
}

/* === Item-länk (hela raden är klickbar <a>) === */
body[data-tool="upptack"] a.upptack-item {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 600px) {
  body[data-tool="upptack"] a.upptack-item {
    font-size: 15px;
  }
}

/* === Filter-status === */
body[data-tool="upptack"] .filter-status {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
}

body[data-tool="upptack"] a.filter-clear {
  font-weight: 500;
  cursor: pointer;
}

body[data-tool="upptack"] a.filter-clear:hover {
  text-decoration: underline;
}

body[data-tool="upptack"] .upptack-tema-count {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
}

/* ----------------------------------------------------------------
   BACK TO TOP — Floating-knapp nere till höger
   Visas när användaren scrollat ner > 400px. Klick = smooth scroll
   till toppen. GM3-design: rund teal knapp med vit pil.
   ---------------------------------------------------------------- */
body[data-tool="upptack"] .back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;                       /* under nav (100), över pills (50) */

  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;

  background: #00A09B;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* Dölj som default; .visible togglas av JS efter scrollY > 400 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}

body[data-tool="upptack"] .back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body[data-tool="upptack"] .back-to-top:hover {
  background: #008C87;
}

body[data-tool="upptack"] .back-to-top:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 160, 155, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
  body[data-tool="upptack"] .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}