/* ======================================================
   Cafetalk Page Stylesheet (FULL FILE)
   - Base styles come from style.css
   - This file ONLY overrides what is needed
   - Desktop behavior unchanged
   - Mobile menu fixed
   ====================================================== */

   @import url("./style.css");

   /* ======================================================
      BODY
      ====================================================== */

   body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
   
     font-family: "Noto Sans JP", sans-serif !important;
   
     background-image: url("./img2/blackbackground.webp");
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     padding: 66px 0;
   }
   
    /* ======================================================
       MAIN CONTENT WRAPPER
       ====================================================== */
    
   .main-content {
     max-width: 440px;
     width: 100%;
     margin: 0 auto;
   
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   
     background: #333 !important;
     background-size: cover;
   
     border: 2px solid #f7ee3d;
      border-radius: 15px;
    }

    /* EVENT WHITE */

  

    .event.event-white .tag.white {
      background: #e5e21e;
      color: #0d37f1;
    }

    /* Cafetalk header logo (smaller & centered) */
    .menu-logo--cafetalk {
      display: block;
      width: 140px;
      margin: 16px auto 8px;
    }
   
   /* ======================================================
      MOBILE LAYOUT (≤ 440px)
      ====================================================== */
   
   @media only screen and (max-width: 440px) {

    body {
        padding: 0px 0;
    }
     .main-content {
       margin-top: 0;
       margin-bottom: 0;
       border: 0;
       border-radius: 0;
     }
   
     /* Shrink menu buttons (cafetalk only) */
     .menubtn,
     .menubtn-2 {
       width: 48px;
       height: 48px;
       top: 14px;
     }
   
     .menubtn-in,
     .menubtn-in-2 {
       width: 48px;
     }
   
     .menubtn img,
     .menubtn-2 img {
       width: 100%;
       height: auto;
     }
   }
   


   
   .events {
     width: 100%;
     padding: 40px 0 60px;
   
     background-image: url("./img2/004bg.webp");
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
   }
   
   /* ======================================================
      EVENT BLOCK
      ====================================================== */
   
   .event {
     max-width: 360px;
     margin: 0 auto 48px;
     padding: 32px 20px;
   
     text-align: center;
     color: #ffffff;
   }
   
   /* ======================================================
      TAG
      ====================================================== */
   
   .tag {
     display: inline-block;
     padding: 10px 28px;
   
     font-size: 18px;
     font-weight: 900;
     letter-spacing: 2px;
   
     border-radius: 4px;
     margin-bottom: 28px;
   }
   
   .tag.red {
     background: #e53935;
     color: #ffffff;
   }
   
   .tag.blue {
     background: #1e88e5;
     color: #ffffff;
   }
   
   /* ======================================================
      LABELS & TEXT
      ====================================================== */
   
   .label {
     font-size: 18px;
     font-weight: 700;
     color: #ffeb3b;
     margin: 24px 0 8px;
   }
   
   .text {
     font-size: 18px;
     line-height: 1.8;
     margin: 0;
     color: #ffffff;
   }
   
   .text.date {
     font-size: 32px;
     font-weight: 900;
     margin-bottom: 12px;
   }
   
   .bold {
     font-weight: 700;
   }
   
   .small {
     font-size: 13px;
     opacity: 0.9;
   }
   
   /* ======================================================
      CTA BUTTON
      ====================================================== */
   
   .cta {
     display: flex;
     justify-content: center;
     align-items: center;
   
     margin-top: 32px;
     padding: 30px 18px;
   
     border-radius: 999px;
   
     font-size: 30px;
     font-weight: 900;
     text-decoration: none;
     color: #ffffff;
   
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
   
     transition:
       background 0.3s ease,
       transform 0.2s ease,
       box-shadow 0.2s ease;
   }
   
   /* CTA COLORS */
   
   .cta.red {
     background: linear-gradient(135deg, #ff384a, #ff5463);
   }
   
   .cta.blue {
     background: linear-gradient(135deg, #6c63ff, #42a5f5);
   }
   
   /* CTA HOVER */
   
   .cta.red:hover {
     background: linear-gradient(135deg, #fd293b, #fd1f31);
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(253, 26, 26, 0.7);
   }
   
   .cta.blue:hover {
     background: linear-gradient(135deg, #686de0, #4834d4);
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(26, 49, 253, 0.75);
   }

/* TAG WHITE */

.tag.white {
  background: #ffffff;
  color: #333333; /* Dark text for a white tag */
}

/* CTA WHITE */

.cta.white {
  background: linear-gradient(135deg, #ffffff, #eeeeee); /* White gradient for button */
  color: #333333; /* Dark text for a white button */
}

.cta.white:hover {
  background: linear-gradient(135deg, #eeeeee, #dddddd); /* Slightly darker white on hover */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}