/**
 * Theme Name: Podcast Tvé Město
 */

:root {
   --background-color: #CDCED0;
}

/* Poppins Regular */
@font-face {
   font-family: 'Poppins';
   src: url('fonts/Poppins-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Poppins Italic */
@font-face {
   font-family: 'Poppins';
   src: url('fonts/Poppins-Italic.ttf') format('truetype');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Poppins Bold */
@font-face {
   font-family: 'Poppins';
   src: url('fonts/Poppins-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Poppins Bold Italic */
@font-face {
   font-family: 'Poppins';
   src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
}


html,
body {
   background-color: var(--background-color);
   padding: 0;
   margin: 0;
}

header {
   font-family: 'Poppins', sans-serif;
   background: white;

   h1 {
      margin: 0;
   }
}

.site-logo {
   display: inline-block;
   width: 80px;
   height: auto;
}

.site-header-layout {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   padding: 10px;
}

.site-title {
   flex: 1;
   text-align: center;
}

.site-category-city {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: 20px;
   background-color: white;
   border-radius: 12px;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

.category-logo-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;

   width: 250px;
   aspect-ratio: 3 / 4;
   overflow: hidden;
   background-color: white;

   img {
      width: 100%;
      height: auto;
      object-fit: contain;
   }
}

.category-name-button {
   color: black;
   background-color: transparent;
   border: 2px solid #ACC036;
   border-radius: 8px;
   padding: 8px 24px;
   font-family: 'Poppins', sans-serif;
   font-size: 16px;
   cursor: pointer;
}

.category-name-button:hover {
   background-color: rgba(172, 192, 54, 0.25);
}

.category-grid {   
    grid-template-columns: repeat(3, 1fr);
    padding: 2rem;
    gap: 2rem;
}

/* Tablet */
@media (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil */
@media (max-width: 774px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}