/* 
 Theme Name:   Neve Child Theme
 Theme URI:    
 Description:  A child theme for Neve.
 Author:       Samui Web Solutions
 Author URI:   http://samuiwebsolutions.com
 Template:     neve
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

/* General styles for all social icon menu items */
.nav-ul li#menu-item-320 div.wrap a, .nav-ul li#menu-item-331 div.wrap a {
    display: block; /* Makes the whole area clickable */
    width: 24px;    /* Adjust this to the width of your icon images */
    height: 24px;   /* Adjust this to the height of your icon images */
    background-repeat: no-repeat;
    background-position: center; /* Centers the icon within the area */
    background-size: contain;    /* Ensures the icon fits without cropping */

    /* --- Hide the text label --- */
    font-size: 0px; /* Makes text invisible by shrinking font size */
    line-height: 0; /* Removes line height space */
    overflow: hidden; /* Hides any text that overflows */
    text-indent: -9999px; /* Pushes text far off-screen */
}

/* Specific styles for each social icon using their unique class */

.nav-ul li#menu-item-320 div.wrap a {
    background-image: url('https://nanaikohchang.com/wp-content/uploads/2025/06/Facebook-logo-2.png'); /* REPLACE with your Facebook icon URL */
}

.nav-ul li#menu-item-331 div.wrap a {
    background-image: url('https://nanaikohchang.com/wp-content/uploads/2025/06/Instagram-Logo.png'); /* REPLACE with your Instagram icon URL */
}

/* Optional: Hover effect */
.nav-ul li.social-icon a:hover {
    opacity: 0.7; /* Makes icon slightly transparent on hover */
    transition: opacity 0.2s ease-in-out; /* Smooth transition */
}

/* If you have a transparent header, you might need to adjust initial colors */
/* For example, if your icons are dark and your header becomes transparent over a dark section, */
/* you might need to swap the images for white versions or apply a CSS filter */
/* This is often better handled by having separate dark/light versions of the icons */
/* or by using the SVG method (Point 1) which allows color changes with CSS 'fill' */