/*
 Theme Name:   Mu Child
 Template:     blankslate
 Version:      1.0.0
*/
/* text-shadow เล็ก */
/* import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

/* ตั้งค่า default font Tailwind */
:root {
  --font-sans: "Prompt", sans-serif;
  --font-sarabun: "Sarabun", sans-serif;
}

.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: text-shadow 0.3s ease; /* เพิ่ม transition */
}
.text-shadow-sm:hover {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* text-shadow กลาง */
.text-shadow-md {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: text-shadow 0.3s ease;
}
.text-shadow-md:hover {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
}

/* text-shadow ใหญ่ */
.text-shadow-lg {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
  transition: text-shadow 0.3s ease;
}
.text-shadow-lg:hover {
  text-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/* ถ้าอยากได้แบบ glow effect */
.text-shadow-glow {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  transition: text-shadow 0.4s ease-in-out;
}
.text-shadow-glow:hover {
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.7);
}

 .calendar-container {
      position: relative;
      overflow: hidden;
      padding-top: 75%;
      height: 0;
    }

    .calendar-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* --- Facebook Zone --- */
    .facebook-zone {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .image-wrapper {
      position: relative;
      border-radius: 10px;
      width: 100%;
      height: 0;
      padding-top: 50%;
      overflow: hidden;
      cursor: pointer;
    }

    .image-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease-in-out;
    }

    .image-wrapper .image-title {
      font-size: 16px;
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      padding: 5px 5px;
      margin: 0;
      z-index: 2;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }

    .image-wrapper .image-title i {
      color: white;
    }

    .image-wrapper .text-overlay {
      padding: 10px 10px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: white;
      background-color: rgba(0, 0, 0, 0.7);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      z-index: 1;
    }

    .image-wrapper .text-overlay h3,
    .image-wrapper .text-overlay p {
      margin: 0;
      text-align: center;
      font-size: 16px;
    }

    .image-wrapper:hover .image-title {
      opacity: 0;
    }

    .image-wrapper:hover .text-overlay {
      opacity: 1;
      z-index: 2;
    }

    .image-wrapper:hover img {
      transform: scale(1.1);
    }

    .slide-button {
      position: relative;
      overflow: hidden;
      display: inline-block;
      padding: 10px 20px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: bold;
      border: 2px solid #ffffff;
      background-color: transparent;
      color: #ffffff;
      text-decoration: none;
      cursor: pointer;
      z-index: 1;
    }

    .slide-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background-color: #6495ED;
      transition: left 0.3s ease;
      z-index: -1;
    }

    .slide-button:hover::before {
      left: 0;
    }

    .slide-button:hover {
      color: #fff;
    }