/*!
 * Blog - CSS
 * Migrated 2026-05-21 from WPCode snippet #8082.
 * Enqueue condition: is_singular('post') / is_home()
 */

/* ====================== */

/* === BASE STYLES ====== */

/* ====================== */



#custom-post-type-title, .playa-blog-post {

  max-width: 800px;

  margin-inline: auto;

  padding: 2.5rem 1.5rem;

  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 1rem;

  line-height: 1.7;

  color: #222;

  box-sizing: border-box;

}



/* ====================== */

/* === HEADINGS ======== */

/* ====================== */



#custom-post-type-title,

.playa-blog-post h2,

.playa-blog-post h3,

.playa-blog-post h4 {

  font-weight: 700;

  line-height: 1.3;

  padding-top: 2rem;

  padding-bottom: 1rem;

  color: #111;

}



#custom-post-type-title {

  font-size: clamp(2rem, 5vw, 2.5rem);

  padding-top: 7rem;

  padding-bottom: 0rem;

}



.playa-blog-post h2 {

  font-size: clamp(1.5rem, 4vw, 2rem);

  padding-top: 1.5rem;

  padding-bottom: 1rem;

}



.playa-blog-post h3 {

  font-size: clamp(1.25rem, 3vw, 1.5rem);

  color: #444;

  padding-top: 1rem;

  padding-bottom: 0.5rem;

}



/* ====================== */

/* === PARAGRAPHS ====== */

/* ====================== */



.playa-blog-post p {

  padding-bottom: 1.25rem;

  font-size: 1.05rem;

  line-height: 1.7;

  color: #333;

}



/* ====================== */

/* === LINKS =========== */

/* ====================== */



.playa-blog-post a {

  color: #007cba;

  text-decoration: underline;

  transition: all 0.2s ease-in-out;

}



.playa-blog-post a:hover {

  color: #005e9c;

  text-decoration: none;

}



.playa-blog-post a:focus {

  outline: 2px dashed #007cba;

  outline-offset: 2px;

  transition: outline 0.2s ease-in-out;

}



/* ====================== */

/* === BUTTON LINKS ==== */

/* ====================== */



.playa-blog-post a[role="button"] {

  display: inline-block;

  background-color: #000;

  color: #fff;

  padding: 0.75rem 1.5rem;

  border-radius: 0.375rem;

  text-align: center;

  text-decoration: none;

  font-weight: 600;

  box-sizing: border-box;

}



.playa-blog-post a[role="button"]:hover {

  background-color: #222;

}



/* ========================= */

/* === PRODUCT BLOCKS ===== */

/* ========================= */



.product-block {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 2rem;

  padding-top: 3rem;

  flex-wrap: wrap;

}



.product-content {

  flex: 1 1 55%;

  min-width: 260px;

}



.product-image {

  flex: 1 1 40%;

  min-width: 240px;

  text-align: center;

}



.product-image img {

  max-width: 100%;

  height: auto;

  display: block;

  margin-inline: auto;

  border-radius: 0.5rem;

  transition: transform 0.2s ease-in-out;

}



.product-image img:hover {

  transform: scale(1.03);

}



.product-title {

  font-size: clamp(1.4rem, 4vw, 1.65rem);

  font-weight: 700;

  color: #111;

  padding-top: 0;

  padding-bottom: 0.75rem;

}



/* =========================== */

/* === INTRO SECTION ======== */

/* =========================== */



.intro-section {

  padding-bottom: 2.5rem;

}



.intro-section p {

  font-size: 1.1rem;

  color: #333;

  padding-bottom: 1rem;

}



/* ============================= */

/* === MEDIA ELEMENTS ========= */

/* ============================= */



.playa-blog-post img,

.playa-blog-post video,

.playa-blog-post iframe {

  max-width: 100%;

  height: auto;

  display: block;

  margin-block: 1.5rem;

  border-radius: 0.5rem;

}



/* ============================= */

/* === BLOCKQUOTE, LISTS, HR === */

/* ============================= */



.playa-blog-post blockquote {

  border-inline-start: 0.25rem solid #ffcc00;

  background-color: #fffbe6;

  padding: 1rem 1.25rem;

  font-style: italic;

  color: #333;

}



.playa-blog-post ul,

.playa-blog-post ol {

  padding-inline-start: 1.5rem;

  padding-bottom: 1.25rem;

}



.playa-blog-post li {

  padding-bottom: 0.75rem;

}



.playa-blog-post hr {

  border: none;

  border-top: 1px solid #ddd;

  margin-block: 2rem;

}



/* ============================= */

/* === RESPONSIVE (Mobile) ==== */

/* ============================= */



@media screen and (max-width: 767px) {

  #custom-post-type-title {

    padding-inline: 1rem;

  }

	

.playa-blog-post {

    padding-inline: 1rem;

    font-size: 1rem;

  }



  .product-block {

    flex-direction: column;

    gap: 1.25rem;

    padding-top: 2rem;

  }



  .product-content,

  .product-image {

    flex: 1 1 100%;

    max-width: 100%;

  }



  .playa-blog-post p {

    font-size: 1.05rem;

    line-height: 1.8;

  }



  .playa-blog-post a[role="button"] {

    width: 100%;

  }

}



/* ============================= */

/* === DARK MODE SUPPORT ====== */

/* ============================= */



@media (prefers-color-scheme: dark) {

  #custom-post-type-title, .playa-blog-post {

    color: #eee;

    background-color: #111;

  }



  .playa-blog-post a {

    color: #4aa8ff;

  }



  .playa-blog-post a:hover {

    color: #add8ff;

  }



  .product-title {

    color: #fff;

  }



  .playa-blog-post blockquote {

    background-color: #333;

    border-inline-start-color: #ffcc00;

    color: #ddd;

  }

}