/*
 Theme Name: NE Pipelines theme
 Template: twentytwentyfive
 Version: 1.0
*/

:root {
  --bg: #ffffff;
  --background: #ffffff;
  --text: #000000;
  --nepl-blue:#287BBF;
  --nepl-green:#62A96D;
}

/*.is-position-sticky { top: 0px !important; }*/
/* .wp-block-cover__background {
    background: linear-gradient(
        90deg,
        var(--nepl-green) 0%,
        var(--nepl-green) 40%,
        rgba(14, 56, 62, 0) 32%
    ) !important;
} */

/* Hide on desktop / Show on mobile */
@media (max-width: 781px) {
    /* .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    } */
    .desktop-only {
        display: none !important;
    }
    /* .mobile-only {
        display: block !important;
    } */
}

/* Show on desktop / Hide on mobile */
@media (min-width: 782px) {
    /* .mobile-only {
        display: none;
    }
    .desktop-only {
        display: block;
    } */
    .mobile-only {
        display: none !important;
    }
    /* .desktop-only {
        display: block !important;
    } */
}

.missing-left-chevron-image img,
.missing-left-chevron-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Coordinates: Top-Left Notch -> Top-Right -> Right Point -> Bottom-Right -> Bottom-Left Notch */
    clip-path: polygon(
        10% 0%, 
        100% 0%, 
        100% 50%, 
        100% 100%, 
        10% 100%, 
        22% 50%
    );
}

.chevron-image img,
.chevron-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Coordinates: Top-Left Notch -> Top-Right -> Right Point -> Bottom-Right -> Bottom-Left Notch */
    clip-path: polygon(
        10% 0%, 
        88% 0%, 
        100% 50%, 
        88% 100%, 
        10% 100%, 
        22% 50%
    );
}

.desktop-only .wp-block-cover__background {
    background: #ffffff !important;
    opacity: 1 !important;
    /* Defines the white shape: Top-Left -> Top-Right (before point) -> Point -> Bottom-Right (after point) -> Bottom-Left */
    clip-path: polygon(
        0% 0%, 
        42% 0%, 
        50% 50%, 
        42% 100%, 
        0% 100%
    );
}

/* .wp-block-template-part {
    position: static !important;
} */

/* Apply 'nowrap' strictly on mobile screens so it stays on 1 row */
@media (max-width: 781px) {
    .wp-block-navigation__container,
    .wp-block-navigation-responsive__container-content {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
}

/* Allow normal wrapping on desktop viewports so links stack instead of overlapping the logo */
@media (min-width: 782px) {
    .wp-block-navigation__container,
    .wp-block-navigation-responsive__container-content {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
}

.wp-block-template-part.header,
header.wp-block-template-part {
    /* position: fixed; */
    position: sticky !important;
	
    top: 0;
    z-index: 999;
	width: 100%;
}

.fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

.wp-block-button__link {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
	background-color:var(--nepl-green) !important;
}

.wp-block-button__link:hover {
    background-color: var(--nepl-blue) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-4px);
}

.service-row.wp-block-columns {
    align-items: flex-start;
    min-height: 300px; /* locks row height so nothing below ever reflows */
}

.service-row .label-col {
    flex: 1 1 0% !important;
}

.service-row .reveal-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

/* Reveal column: zero-width by default, expands on hover */
.service-row .reveal-col {
    flex: 0 0 0% !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* transition: flex 0.4s ease, opacity 0.3s ease; */
    transform: translateX(20px);   /* starts slightly offset for the swipe-in */
    transition: flex 0.4s ease, opacity 0.3s ease, max-height 0.4s ease, transform 0.4s ease;

    /*white-space: nowrap; /* prevents text wrapping weirdly while column width is still 0 */
}

.service-row:hover .reveal-content {
	flex: 1 1 0% !important;
    max-height: 500px; /* increase if your description text wraps to more lines */
    opacity: 1;
}

/* .service-row img {
    transition: transform 0.35s ease;
} */

/* Image column: wide by default, shrinks on hover */
.service-row .img-col {
    flex: 2 1 0% !important;
    transition: flex 0.4s ease;
	/* height: 300px;
	object-fit: cover; */
}

/* On hover: label:image:reveal = 1:1:1 (33%/33%/33%) */
.service-row:hover .img-col {
    flex: 1 1 0% !important;
}

.service-row:hover .label-col {
    flex: 1 1 0% !important;
}

.service-row .img-col img {
    /* flex: 2 1 0% !important; */
    width: 100%;
    height: 300px;         /* adjust to taste */
    object-fit: cover;
    display: block;
}

.service-row:hover .img-col img {
    flex: 1 1 0% !important;
}

.service-row:hover .reveal-col {
    flex: 1 1 0% !important;
	max-height: 500px;
    opacity: 1;
	transform: translateX(0);
    /*white-space: normal; /* restore normal wrapping once expanded */
}

.wp-block-separator {
	color: var(--nepl-green);
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* .service-row img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.35s ease;
} */

/* .service-row:hover img {
    transform: scale(1.03);
} */

/* For the navbar to transition from transparent to solid when scrolling.
   Shame it's not the right fit */

/* .is-position-sticky {
    /* background-color: transparent; */
	/*
	background: linear-gradient(to bottom, #1B917B 0%, rgba(27, 145, 123, 0) 100%);
    transition: background-color 0.3s ease;
} */

/*
.is-position-sticky.scrolled {
    background-color: #1B917B;
    /* background-color: #0d7d67; */ /*
} */

/* Position the column relative so the link overlay stays contained */
.service-card {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect: Add drop shadow and slight lift */
.service-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-3px);
}

/* Expand the inner link overlay across the entire column wrapper */
.service-card a {
    text-decoration: none;
    color: inherit;
}

.service-card a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* disappearing version */
/* .homepage-header {
    background-color: transparent;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0); /* Invisible initial shadow */
    /* transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.homepage-header.scrolled {
    background-color: white !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; /* Visible shadow when scrolled */
    /* background-color: #0d7d67; */
/*}*/

/* Permanently there version */
.homepage-header {
    background-color: white !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}