/* ==========================================================
   KNAPPAR
   1. Gemensam grund för textknappar
   2. Primärknapp
   3. Sekundärknapp
   4. Tertiärknapp
   5. Länkknapp
   6. Runda knappar (stäng & tillbaka till toppen)
   7. Focus på projektkort
   ========================================================== */


/* ================ 1. Gemensam grund ================== */

/* Delat av alla textknappar (primär, sekundär, tertiär och länk):
   centrerat innehåll, typografi och avstånd mellan text och ikon */
   .primary-btn,
   .secondary-btn,
   .tertiary-btn,
   .link-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 10em;
     gap: 0.4rem;
     font-size: var(--text-sm);
     font-weight: 500;
     font-family: var(--font-body);
     text-decoration: none;
   }
   
   /* Delat av de tre fyllda knapparna: pillerform med fast höjd */
   .primary-btn,
   .secondary-btn,
   .tertiary-btn {
     padding: 0 1em;
     height: 3.5em;
     border-radius: var(--radius-pill);
   }
   
   /* Delat vid klick: fetare text */
   .primary-btn:active,
   .secondary-btn:active,
   .tertiary-btn:active,
   .link-btn:active {
     font-weight: 600;
   }

   /* Synlig fokusring för tangentbordsnavigering på alla klickbara element. :where() nollar specificiteten så att egna regler kan skriva över */
   :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
  }

  /* Ljusare fokusring på mörk bakgrund så att den syns */
  .bg-dark :focus-visible {
  outline-color: var(--color-complementary);
  }
   
   /* ================ 2. Primärknapp ================== */
   
   /* Mörk knapp med vit text och skugga utåt, för huvudsakliga CTA-knappar */
   .primary-btn {
     background-color: var(--color-dark-text);
     color: var(--color-white);
     box-shadow: var(--shadow-btn);
   }
   
   /* Något ljusare bakgrund vid hovring och klick */
   .primary-btn:hover,
   .primary-btn:active {
     background-color: var(--color-dark-near);
   }
   
   /* Skuggning inåt vid klick */
   .primary-btn:active {
     box-shadow: inset 0px 2px 2px var(--color-dark-text);
   }
   
   
   /* ================ 3. Sekundärknapp ================== */
   
   /* Ljusgrå, lätt frostad knapp med mörk text, fungerar på både mörka och ljusa bakgrunder */
   .secondary-btn {
     background-color: var(--color-light-grey);
     backdrop-filter: blur(6px);
     color: var(--color-dark-text);
   }
   
   /* Mörkare grå bakgrund vid hovring och klick */
   .secondary-btn:hover,
   .secondary-btn:active {
     background-color: var(--color-mid-grey);
   }
   
   /* Skuggning inåt vid klick */
   .secondary-btn:active {
     box-shadow: inset 0px 2px 2px var(--color-grey);
   }
   
   
   /* ================ 4. Tertiärknapp ================== */
   
   /* Ljusgrön knapp med mörk text, för ljusa bakgrunder */
   .tertiary-btn {
     background-color: var(--color-primary-pale);
     color: var(--color-dark-text);
   }
   
   /* Mörkare grön bakgrund vid hovring och klick */
   .tertiary-btn:hover,
   .tertiary-btn:active {
     background-color: var(--color-primary-mid);
   }
   
   /* Skuggning inåt vid klick */
   .tertiary-btn:active {
     box-shadow: inset 0px 2px 2px var(--color-primary);
   }
   
   
   /* ================ 5. Länkknapp ================== */
   
   /* Textknapp utan bakgrund för diskreta länkar */
   .link-btn {
     height: 3em;
     color: var(--color-primary);
   }
   
   /* Vit variant för länkar på mörka sektioner (grön text får för låg kontrast mot mörk bakgrund) */
   .link-btn-white {
     color: var(--color-white);
   }
   
   /* Understrykning vid hovring och klick */
   .link-btn:hover,
   .link-btn:active {
     text-decoration: underline;
   }
   
   
   /* ================ 6. Runda knappar ================== */
   
   /* Delat av de runda knapparna: centrerad ikon i en cirkel */
   .close-btn,
   .back-top-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
   }
   
   /* Delat av stäng-knappen och tillbaka-till-toppen-knappen: ljus bakgrund utan ram, 3rem stor */
   .close-btn,
   .back-top-btn {
     border: none;
     background-color: var(--color-surface);
     width: 3rem;
     height: 3rem;
   }
   
   /* Stäng-knapp för mobilmenyn */
   .close-btn {
     font-size: var(--text-lg);
     cursor: pointer;
   }
   
   /* Knapp som skrollar tillbaka till toppen. Ligger till höger i .ending */
   .back-top-btn {
     position: absolute;
     right: 0;
   }
  
   
   /* Grön bakgrund vid hovring (för projektpilen när man hovrar över hela kortet) */
   .close-btn:hover,
   .back-top-btn:hover {
     background-color: var(--color-primary-mid);
   }
   
   /* Mörkgrön bakgrund vid klick */
   .close-btn:active,
   .back-top-btn:active {
     background-color: var(--color-dark-tag);
   }

  /* ================ 7. Focus på projektkort ================== */
 
  /* Fokusring runt hela kortet (länkens egen ring klipps av overflow: hidden) */
  .project-cards:has(a:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  }

  /* Dölj länkens egen ring, kortets ring ersätter den */
  .project-cards a:focus-visible {
  outline: none;
  }