/* =============================================================
   HBC — KNAPPSYSTEM
   -------------------------------------------------------------
   EN gemensam definition för hela webbplatsen. Laddas sist på
   varje sida och överstyr sidornas egna regler.

   Geometrin är identisk för ALLA knappar:
       border-radius  0        (inga rundade hörn någonstans)
       padding        13px 24px
       font-size      14px
       font-weight    500
       font-family    Outfit
       ingen skugga

   Två färgvarianter:
       PRIMÄR   mörk botten #2A2A2A, vit text
                hover → #1A1A1A
       GHOST    vit botten, mörk text, 1px ram
                hover → inverterad (mörk botten, vit text)

   På mörka sektioner används samma två varianter — ghost blir
   där den ljusa, tydliga knappen.

   Lägg till nya knappklasser i listorna nedan, inte i sidornas
   egna stilblock.
   ============================================================= */

/* -------------------------------------------------------------
   1 · Gemensam geometri — gäller varenda knapp
   ------------------------------------------------------------- */
.btn,
.btn--primary, .btn--ghost, .btn--light, .btn--outline,
.nav__cta, .nav__drawer-cta, .nav__drawer-cta--ghost,
.page-hero__cta,
.card__btn, .card__btn--primary, .card__btn--ghost,
.home-btn, .home-btn--ghost,
.ftr__cta,
.tp-link, .om-link,
.sbtn, .sbtn--primary, .sbtn--ghost,
.aud-card__btn,
.cta-bar__btn,
.fcta__inner,
.boka-submit, .form-submit,
button[type="submit"]{
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Outfit", "Helvetica Neue", Helvetica, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* `display` ligger MEDVETET utanför geometriblocket ovan.
   Navbarens CTA ska försvinna under 1025px — den regeln bor i
   assets/mobile-nav.css (och i sidornas nav-block):

       @media (max-width: 1024px){ .nav__cta{ display: none !important; } }

   buttons.css laddas sist på varje sida. Ett villkorslöst
   `display: inline-flex !important` här vinner därför över den
   media queryn, och då visades både "Boka tid"-pillret och
   hamburgaren på mobil — headern bröt till två rader.
   Alla knappar UTOM .nav__cta får sitt display här; .nav__cta får
   ett värde utan !important så breakpointen kan styra den. */
.btn,
.btn--primary, .btn--ghost, .btn--light, .btn--outline,
.nav__drawer-cta, .nav__drawer-cta--ghost,
.page-hero__cta,
.card__btn, .card__btn--primary, .card__btn--ghost,
.home-btn, .home-btn--ghost,
.ftr__cta,
.tp-link, .om-link,
.sbtn, .sbtn--primary, .sbtn--ghost,
.aud-card__btn,
.cta-bar__btn,
.fcta__inner,
.boka-submit, .form-submit,
button[type="submit"]{
  display: inline-flex !important;
}

/* Utan !important — mobile-nav.css och sidornas nav-block avgör
   om navbarens CTA syns vid den aktuella brytpunkten. */
.nav__cta{
  display: inline-flex;
}

/* -------------------------------------------------------------
   2 · PRIMÄR — mörk botten, vit text
   ------------------------------------------------------------- */
.btn--primary,
.nav__cta, .nav__drawer-cta,
.page-hero__cta,
.card__btn--primary,
.home-btn,
.ftr__cta,
.tp-link, .om-link,
.sbtn--primary,
.aud-card__btn,
.cta-bar__btn,
.fcta__inner,
.boka-submit, .form-submit,
button[type="submit"]{
  background: #2A2A2A !important;
  color: #ffffff !important;
  border: 1px solid #2A2A2A !important;
}
.btn--primary:hover,
.nav__cta:hover, .nav__drawer-cta:hover,
.page-hero__cta:hover,
.card__btn--primary:hover,
.home-btn:hover,
.ftr__cta:hover,
.tp-link:hover, .om-link:hover,
.sbtn--primary:hover,
.aud-card__btn:hover,
.cta-bar__btn:hover,
.fcta__inner:hover,
.boka-submit:hover, .form-submit:hover,
button[type="submit"]:hover{
  background: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #ffffff !important;
}

/* Startsidans "Se våra behandlingar" under "Upptäck vad vi kan
   hjälpa dig med" — ensam väg till behandlingarna sedan korten
   togs bort från startsidan, därför ett steg större än standard. */
.home-btn--lg{
  padding: 19px 40px !important;
  font-size: 17px !important;
  gap: 14px !important;
}
.home-btn--lg .home-arrow{ font-size: 20px; }

/* -------------------------------------------------------------
   3 · GHOST — vit botten, mörk text, inverterar vid hover
   ------------------------------------------------------------- */
.btn--ghost,
.card__btn--ghost,
.nav__drawer-cta--ghost,
.home-btn--ghost,
.sbtn--ghost,
.btn--light, .btn--outline{
  background: #ffffff !important;
  color: #1A1A1A !important;
  border: 1px solid #1A1A1A !important;
}
.btn--ghost:hover,
.card__btn--ghost:hover,
.nav__drawer-cta--ghost:hover,
.home-btn--ghost:hover,
.sbtn--ghost:hover,
.btn--light:hover, .btn--outline:hover{
  background: #1A1A1A !important;
  color: #ffffff !important;
  border-color: #1A1A1A !important;
}

/* -------------------------------------------------------------
   4 · Detaljer
   ------------------------------------------------------------- */

/* Pilen ska följa med, inte ändra knappens höjd */
.btn .arrow, .nav__cta .arrow, .nav__drawer-cta .arrow,
.card__btn .arrow, .home-btn .home-arrow, .ftr__cta .ftr__arrow,
.page-hero__cta .arrow{
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.btn:hover .arrow, .nav__cta:hover .arrow, .nav__drawer-cta:hover .arrow,
.card__btn:hover .arrow, .home-btn:hover .home-arrow, .ftr__cta:hover .ftr__arrow,
.page-hero__cta:hover .arrow{ transform: translateX(3px); }

/* Synlig tangentbordsfokus på alla knappar */
.btn:focus-visible, .nav__cta:focus-visible, .nav__drawer-cta:focus-visible,
.page-hero__cta:focus-visible, .card__btn:focus-visible, .home-btn:focus-visible,
.ftr__cta:focus-visible, .sbtn:focus-visible, .aud-card__btn:focus-visible,
.cta-bar__btn:focus-visible, button[type="submit"]:focus-visible{
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
}

/* Hamburgermenyn och kortets stängkryss är ikonknappar, inte
   textknappar — de får samma skarpa hörn men behåller sin form. */
.nav__menu-btn,
.nav__drawer-close,
.card__close{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Kortknapparna delar rad och ska kunna krympa — samma padding
   som alla andra, men de får minska i bredd i stället för att
   spilla ut ur kortet. */
.card__btn{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* -------------------------------------------------------------
   5 · Mörka sektioner — färgerna inverteras, geometrin är
   oförändrad (samma radius, padding, storlek och vikt).
   Utan detta hamnar den mörka primärknappen på en mörk yta med
   1.07:1 i kontrast, alltså praktiskt taget osynlig.
   ------------------------------------------------------------- */
.cta-dark .btn--primary{
  background: #EFE9E1 !important;
  color: #1A1A1A !important;
  border-color: #EFE9E1 !important;
}
.cta-dark .btn--primary:hover{
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1A1A1A !important;
}
.cta-dark .btn--ghost{
  background: transparent !important;
  color: #EFE9E1 !important;
  border-color: rgba(239, 233, 225, 0.55) !important;
}
.cta-dark .btn--ghost:hover{
  background: #EFE9E1 !important;
  color: #1A1A1A !important;
  border-color: #EFE9E1 !important;
}

@media (prefers-reduced-motion: reduce){
  .btn, .nav__cta, .nav__drawer-cta, .page-hero__cta,
  .card__btn, .home-btn, .ftr__cta, .sbtn,
  .btn .arrow, .home-btn .home-arrow, .ftr__cta .ftr__arrow{
    transition: none !important;
  }
}