/* 
 Theme Name:   2025Child
 Theme URI:    https://theinternetpresence.com
 Description:  Custom Template built from 2025 Theme
 Author:       Michael Rock
 Author URI:   https://theinternetpresence.com
 Template:     twentytwentyfive
 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 ==
--------------------------------------------*/
/********************/
/* Header Pinstripe */
/********************/
.pinstripe {
    background-image: url(https://bodyshop.internetpresencetesting.com/wp-content/uploads/2026/10/1280-red-pinstripe.png);
    background-size: 100%;
    background-position: bottom;
    background-repeat: repeat-x;
}
/***********/
/* Submenu */
/***********/
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
    min-width: 280px; 
	width: auto;
	z-index: 1;
    filter: alpha(opacity=95);
    opacity: 0.95;
	border:solid black 2px;
	font-size:1rem;
}
/*************************************************************/
/* Change background color on Submenu with transition effect */
/*************************************************************/
/* Smooth transition on the submenu item links */
.wp-block-navigation-item .wp-block-navigation__submenu-container a,
.nav-menu .sub-menu a,
.main-navigation ul ul a {
    transition: background-color 0.6s ease, color 0.6s ease;
}

/* Hover effect for the submenu item links */
.wp-block-navigation-item .wp-block-navigation__submenu-container a:hover,
.nav-menu .sub-menu a:hover,
.main-navigation ul ul a:hover {
    background-color: gold !important;
}

/**********************************************************************/
/* NAVIGATION HOVER UNDERLINE EFFECT Yellow line slides left to right */
/**********************************************************************/

/* Set up the nav link */
.wp-block-navigation-item__content {
    position: relative !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Create the yellow underline using ::after */
.wp-block-navigation-item__content::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #FFD700 !important; /* Yellow color */
    transition: width 0.4s ease !important; /* Controls speed */
}

/* On hover expand width from 0 to 100% */
.wp-block-navigation-item__content:hover::after {
    width: 100% !important;
}
/******************/
/* Media and Text */
/******************/
.wp-block-media-text.is-stacked-on-mobile {
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.5));
}
figure.wp-block-media-text__media {
    border-radius: 5px;
    border: black solid 1px;
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.5));
}
/*****************************/
/* Button Hover Color Change */
/*****************************/
/* Set CSS to do this on all buttons
.wp-block-button__link {
    transition: background-color 0.5s ease, color 0.5s ease;
}

.wp-block-button__link:hover {
    background-color: #007786 !important;
    color: #fefdff !important;
}
*/
/* Smooth transition on the specific button */
.slow-hover-button a, 
.wp-block-button__link.slow-hover-button {
    transition: background-color 0.5s ease, color 0.5s ease !important;
}

.slow-hover-button a:hover, 
.wp-block-button__link.slow-hover-button:hover {
    background-color: #007786 !important;
    color: #fefdff !important;
	/* Optional: slightly lifts the column up by 4px for a 3D effect */
    transform: translateY(-4px);
}


/******************************************************************************/
/* Fix scrolling to the right from the wordpress plugin LBC Animate Any Block */
/******************************************************************************/
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}
/**********************/
/* Make header sticky */
/**********************/
header.wp-block-template-part {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    filter: alpha(opacity=95);
    opacity: 0.95;
}
/*************************************/
/* Add content to Mobile Menu Button */
/*************************************/
button.wp-block-navigation__responsive-container-open::before {
    content: "Menu";
}
/********************/
/* Cover Block Text */
/********************/
.wp-block-cover h2 {
    color:black;
	text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
.wp-block-cover p {
    color:black;
	text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
/********************/
/* Footer Paragraph */
/********************/
footer p {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
/*****************************/
/* Cover Image Teal Gradient */
/*****************************/
/* Target the cover block overlay */
.teal-gradient-cover .wp-block-cover__background {
    background: linear-gradient(
        180deg,
        transparent 0%,
        #0f4c5c 100%
    ) !important;
    opacity: 1 !important;
}
/*****************************/
/* Cover Image Black Gradient */
/*****************************/
/* Target the cover block overlay */
.black-gradient-cover .wp-block-cover__background {
    background: linear-gradient(
        180deg,
        transparent 0%,
        #000000 100%
    ) !important;
    opacity: 1 !important;
}
/*************************************/
/* Custom COLUMN Effects on Homepage */
/*************************************/
/* Scale Image when you hover over it */
/* Apply the border radius and mask to the wrapping container */
.zoom-effect {
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Forces Safari and Chrome to respect the border radius during animation */
    webkit-mask-image: -webkit-radial-gradient(white, black); 
}
/* Smoothly prepare the image for the transition */
.zoom-effect img {
    transition: transform 0.3s ease-in-out;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/* Apply the scale of 1.04 on hover */
.zoom-effect:hover img {
    transform: scale(1.04);
}
/* Prepare the column for a smooth transition */
.hover-shadow-column {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Invisible initial state */
}
/* Apply the drop shadow when the cursor is over the column */
.hover-shadow-column:hover {
    /* 
       box-shadow syntax: X-offset Y-offset Blur Spread Color
       Adjust the "rgba" values (0,0,0,0.15) to make it darker or lighter 
    */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Optional: slightly lifts the column up by 4px for a 3D effect */
    transform: translateY(-4px); 
}
@media (min-width: 1500px)
{
	ul.wp-block-list {
    padding-left: 15%;
	}
}
/***************************************************/
/* Breakpoint for Hamburger menu on Mobile Devices */
/***************************************************/
/* Hide the standard horizontal menu and show the hamburger menu below 621px */
@media screen and (max-width: 621px) {
  .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
    display: none !important;
  }
  
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}

/* Ensure the full menu shows and the hamburger is hidden above 621px */
@media screen and (min-width: 622px) {
  .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
    display: flex !important;
  }
  
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}