/**
Theme Name: Vexis
Theme URI: https://wpplover.com/themes/vexis/
Author: WP Plover
Author URI: https://wpplover.com
Description: Vexis is a multipurpose Full Site Editing theme. Vexis theme utilizes the WordPress block editor and the extensions provided by the Plover Kit to create unique and eye-catching web design. Dark mode and mobile optimization can better retain visitors. It’s perfect for agencies, companies, and bloggers to create an impact online website. Startups or marketing campaigns can also easily create landing pages through the block editor, making Vexis the fastest and most adaptable theme for any creative endeavor.
Template: plover
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vexis
Tags: full-site-editing, editor-style, block-patterns, wide-blocks, block-styles, style-variations, threaded-comments, translation-ready, sticky-post, footer-widgets, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-image-header, featured-images, flexible-header, one-column, two-columns, three-columns, full-width-template, rtl-language-support, grid-layout, left-sidebar, right-sidebar, portfolio, blog, news
*/

@media (min-width: 782px) {
    .vexis-site-sidebar {
        position: relative;
        height: 100%;
    }

    .sidebar-cover.has-position-top-desktop {
        top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
    }
}

@media (max-width: 782px) {
    .sidebar-cover {
        min-height: auto !important;
    }
    .sidebar-content {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
      .sidebar-cover{
     display: none!important;
  }
}
@media (min-width: 783px) {

   .nav-menu  {
         display: none!important;
    }
    .header-row{
      justify-content: flex-end!important;
    }
}
 
   

/* จัดปุ่มให้เป็นวงกลม */
.wp-block-search__button {
  background: #c2185b !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: border-radius 0.3s ease;
}

/* ช่องค้นหาซ่อนตอนแรก */
.wp-block-search input[type="search"] {
  width: 0;
  opacity: 0;
  padding: 0;
  border: none;
  border-radius: 50px;
  background: #c2185b;
  color: white;
  transition: width 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

/* placeholder สีขาวจาง */
.wp-block-search input[type="search"]::placeholder {
  color: rgba(255,255,255,0.8);
}

/* โหมดแสดงช่องค้นหา */
.wp-block-search.active input[type="search"] {
  width: 250px;
  opacity: 1;
  padding: 10px 15px;
}

.wp-block-search input[type="search"]:focus {
  background: #c2185b !important;
}

/* --- Responsive สำหรับมือถือ --- */
@media (max-width: 768px) {
  /* ปรับความกว้างช่องค้นหาให้เล็กลง */
  .wp-block-search.active input[type="search"] {
    width: 150px; /* พอดีมือถือ */
    padding: 8px 12px;
  }

  /* จัดให้ปุ่ม + ช่องค้นหาเรียงแนวตั้งหรือแนวนอนสวยงาม */
  .wp-block-search {
    display: flex;
    align-items: center;
    gap: 5px; /* เว้นระยะเล็กๆ */
  }

  /* ถ้าอยู่ใน header row */
  .header-row .nav-search-group {
    flex-wrap: wrap; /* ให้เมนู + search ลงบรรทัดใหม่ถ้าแคบ */
    justify-content: center; /* กลางหน้า */
  }
.button-shortcode-row .wp-block-buttons>.wp-block-button {
    display: inline-block;
    margin: 0;
    margin-top: 11px!important;
}
  /* Navigation Menu ย่อระยะห่าง */
  .header-row .nav-menu {
    gap: 8px;
  }
}




/* เอา padding ด้านข้างออก Ifareme */
@media (max-width: 767px) {
    .no-padding-mobile {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
   .query-title{
  margin-bottom: 50px!important;

  
} 
}
.query-title{
  margin-top: -40px!important;
  
} 


.button-shortcode-row .wp-block-buttons>.wp-block-button {
    display: inline-block;
    margin: 0;
    margin-top: 13px;
    
}

.wp-block-button .wp-block-button__link:not(.has-background) {
  background: #ff217a !important; /* ใส่สีตรงๆ */
}

.my-tag-cloud a {
  display: block;          /* เรียงทีละบรรทัด */
  text-decoration: none;   /* ตัดเส้นใต้ */
  margin-bottom: 10px;      /* ระยะห่างแต่ละแท็ก */
  font-weight: 700;        /* ตัวหนา */
}

.my-tag-cloud a:hover {
  color: #c2185b;            /* สีเปลี่ยนเวลา hover */
  text-decoration: underline; /* ใส่เส้นใต้ */
}

.my-nav a{
  margin-top: 10px;
    font-size: 18px;
}
.is-menu-open{
  display: none;
}

.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-clos{
 background: #ffffff!important
}


.movie-eps select{
  background: #c2185b!important;
}


.vexis-content{
  padding-left: 20px!important;
  padding-right: 20px!important;
}