/*
 Theme Name:   ICARE-FISH Theme
 Theme URI:    https://icare-fish.org/
 Description:  A child theme for GeneratePress
 Author:       Mike Hazleton
 Author URI:   https://www.wildboardigital.co.uk/
 Template:     generatepress
 Version:      1.0.0
*/

/* --- General Styling --- */

p {
    margin-bottom: 0.5em !important;
}

/* --- Header & Nav Styling --- */
.site-header,
.inside-header {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.site-header {
    width: 100%;
    background-color: #ffffff !important;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    border-bottom: 1px solid #eaeaea;
}

.inside-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-navigation {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.main-navigation .main-nav ul li a {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #228dc5 !important; /* ← Updated default color */
    padding: 10px 15px !important;
    text-transform: none;
    transition: color 0.3s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
    color: #3dbb7e !important; /* ← Updated hover color */
}

.site-logo {
	padding-left: 10px !important;
}

/* Shrink menu items gradually before 768px */
@media (max-width: 1024px) {
    .main-navigation .main-nav > ul > li > a {
        padding: 8px 10px !important;
        font-size: 16px;
    }
}

@media (max-width: 950px) {
    .main-navigation .main-nav > ul > li > a {
        padding: 6px 8px !important;
        font-size: 15px;
    }
}

@media (max-width: 830px) {
    .main-navigation .main-nav > ul > li > a {
        padding: 4px 6px !important;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .main-navigation .main-nav > ul > li > a {
        padding: 8px 10px !important;
        font-size: 16px;
		line-height: 30px !important;
    }
	
	.main-navigation .main-nav > ul > li:last-child > a {
        padding-bottom: 20px !important; /* or however much you need */
    }
}



/* Video Header */

/* Outer block with inline background */
div[style*="--inline-bg-image"] {
  position: relative;
  z-index: 0;
  background: none !important;
  overflow: visible;
}

/* Wrapper for background video */
.icf-video-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Static fallback image (shows before video loads or if video fails) */
.icf-video-fallback {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}

/* Video element itself (used for both .icf-video-bg and .icf-header-video) */
.icf-header-video,
.icf-video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  margin: 0;
  border: none;
  z-index: 1;
}

/* Optional dark overlay for better text contrast */
.icf-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* Adjust opacity here */
  z-index: 2;
  pointer-events: none;
}

/* Main content block (e.g., GenerateBlocks container) */
.gb-element-10f9be52 {
  position: relative;
  z-index: 3; /* Above video & overlay */
  background: none !important;
  overflow: visible;
}

/* Text container inside the block */
.gb-element-1c56d85f {
  position: relative;
  z-index: 3;
  color: white;
}

/* Shape dividers stay on top */
.gb-shape {
  position: relative;
  z-index: 4;
}

/* Uncomment below to hide video + overlay on mobile */
@media (max-width: 767px) {
  /*.icf-video-bg-wrapper,
  .icf-video-overlay {
    display: none;
  }*/
}

/* Make Swiper navigation arrows white */
.cb-button-next.swiper-button-next::after,
.cb-button-prev.swiper-button-prev::after {
    color: white !important;
    /* Optional: adjust size if needed */
    font-size: 40px;
	
}

.cb-button-prev {
    left: 10px; /* or increase the px value to move it further left */
    z-index: 10; /* make sure it's above other content */
}

.cb-button-next {
    right: 10px; /* move it away from the edge */
    z-index: 10;
}




.highlighted-heading {
    display: inline-block;         /* Shrinks background to just the content + padding */
    padding: 10px 20px !important;             /* Top/bottom: 5px, left/right: 20px */
    border-radius: 5px;            /* Optional: for rounded corners */
}


.wp-block-column > .gb-element-83030f83,
.wp-block-column > .gb-element-0739bbfe,
.wp-block-column > .gb-element-cd81e50a {
  display: flex;
  justify-content: center;
}

.wp-block-column[style*="flex-basis:33.33%"] {
  display: flex !important;
  align-items: center !important;
}

.footer-widgets-container {
    padding-bottom: 10px !important;
}

.inside-footer-widgets {
    display: flex;
    gap: 30px; /* optional spacing between widgets */
    flex-wrap: wrap;
}

.footer-widget-1 {
    flex: 0 0 65% !important;
}

.footer-widget-2 {
    flex: 0 0 30% !important;
}

.inside-site-info {
    padding-top: 0px !important;
}

.site-logo a {
    position: relative;
    z-index: 10;
	margin-right: 10px;
}

.header-donate-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #ff4a4a;
    color: white !important;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    margin-left: 10px;
	margin-right: 10px;
    white-space: nowrap;
}

.header-donate-button:hover {
    background-color: #ffcc00;
    color: #000;
}

@media (max-width: 768px) {
    .main-navigation.mobile-menu-control-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }

    .header-donate-button {
        margin-left: auto;
    }
}


@media (max-width: 1025px) {
	.gb-element-ddbc1707 {
		padding-top: 0px !important;
	}}
	
@media (max-width: 1025px) {	
	.gb-element-50d48199 {
		
		padding-bottom: 0px !important;
	}}
	
	@media (max-width: 768px) {
  .gb-element-5a3761e5 {
    display: none !important;
  }
}

	@media (max-width: 1000px) {
	.gb-element-5ae0cb2c {
		padding-left: 10px !important;
		padding-right: 10px !important;
		  font-size: 16px !important;
	}}
	
		@media (max-width: 900px) {
	.gb-element-5ae0cb2c {
		  font-size: 15px !important;
	}}
	
		@media (max-width: 769px) {
	.gb-element-5ae0cb2c {
		padding-left: 10px !important;
		padding-right: 10px !important;
		  font-size: 17px !important;
	}}
	
	
		@media (max-width: 1000px) {
	.gb-element-50d48199 {
		
				padding-left: 10px !important;
		
	}}
	
.gb-element-3967a9ce {
	
	margin-left: auto !important; 
	margin-right: auto !important;
	
}

@media (max-width: 769px) {

.gb-element-48b579b9,
.gb-element-f1fc8153,
.gb-element-850c51df {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}}

@media (max-width: 768px) {
  .footer-widget-2 {
    text-align: center !important;
  }

  .footer-widget-2 .wp-block-heading,
  .footer-widget-2 p {
    text-align: center !important;
  }
}

.centered-heading-block {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;        /* center text inside the h1 */
  min-height: 200px;         /* set height so vertical centering works */
}

/* Make the ::marker (default arrow) larger */
summary::marker {
  font-size: 1.5em; /* Adjust size as needed */
}

/* Hide summary text when the parent <details> is open */
details[open] > summary {
  color: transparent;
}

/* Keep the arrow visible even when the text is hidden */
details[open] > summary::marker {
  color: white; /* Customize marker color if needed */
}

.comments-area {
    display: none;
}

footer.entry-meta {
    display: none !important;
}

.wave-divider-container {
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}

.wave-divider-container svg {
  width: 100%;
  height: 80px;
  display: block;
}

@media screen and (max-width: 790px) {
  .hideimgmobile {
    display: none !important;
  }
}


.social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-start; /* Left align */
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}
  .social-icons .icon {
    width: 50px;   /* Icon size */
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
  }
  .social-icons .icon:hover {
    transform: scale(1.1);
  }

  /* LinkedIn */
  .social-icons .linkedin {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/lb-1.png');
  }
  .social-icons .linkedin:hover {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/inc-1.png');
  }

  /* Instagram */
  .social-icons .instagram {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/ib-1.png');
  }
  .social-icons .instagram:hover {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/ic-1.png');
  }

  /* X (Twitter) */
  .social-icons .x-twitter {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/xb-1.png');
  }
  .social-icons .x-twitter:hover {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/xc-5.png');
  }

  /* Slack */
  .social-icons .slack {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/sb-1.png');
  }
  .social-icons .slack:hover {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/sc-1.png');
  }

  /* Substack */
  .social-icons .substack {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/ssb-1.png');
  }
  .social-icons .substack:hover {
    background-image: url('https://icare-fish.org/wp-content/uploads/2025/08/ssc-1.png');
  }
  
/* Milestone Timeline */

.timeline-wrapper {
  position: relative;
  padding-left: 30px; /* space for line and dot */
  border-left: 3px solid #009688;
}

.timeline-item {
  position: relative; /* anchor for absolute positioning */
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5em;
}

.timeline-item .marker {
  position: absolute;
  left: calc(-30px - 10px - 2px); /* padding-left + half of marker size */
  top: 3px;
  width: 20px;
  height: 20px;
  background-color: #009688;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #009688;
  z-index: 1;
}

.timeline-item .text {
  padding-left: 15px; /* gap from dot to text */
}

/* Make superscripts 50% of surrounding text */
sup {
  font-size: 70%;
  vertical-align: super;
  line-height: 0;
}

/* Remove underline (but keep blue) when the link wraps a <sup> */
.entry-content a:has(> sup),
.wp-block-post-content a:has(> sup),
.editor-styles-wrapper a:has(> sup) {  /* editor parity */
  text-decoration: none !important;    /* remove underline */
  color: #3dbb7e !important;   
}

.entry-content a:has(> sup):hover,
.wp-block-post-content a:has(> sup):hover,
.editor-styles-wrapper a:has(> sup):hover {
  text-decoration: underline !important; /* optional hover cue */
}

.profile-header {
	line-height: 0.5em !important;
}

.profile-sub-header {
	line-height: 0.5em !important;
}

.wp-block-columns.is-layout-flex:has(.profile-image, .profile-text) {
    gap: 0em;
}

/* Keep the button row fixed to the left */
.tab-buttons {
  display: flex;
  justify-content: flex-start; /* buttons always left */
  gap: 5px; /* tighter spacing for tab look */
  border-bottom: 2px solid #333; /* bottom line like tab strip */
  background: none; /* remove solid bar */
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Reset any Gutenberg/GB default centering */
.tab-buttons .wp-block-buttons {
  margin: 0;
  justify-content: flex-start !important;
  text-align: left !important;
  width: auto; /* so it only wraps the buttons */
}

/* Base tab style */
.tab-buttons .wp-block-button__link {
  background: #f5f5f5;   /* inactive light grey */
  color: #fff !important;
  padding: 10px 20px;
  border: 1px solid #333;
  border-bottom: none;   /* so it blends into content area */
  border-radius: 6px 6px 0 0; /* rounded top corners */
  font-weight: bold;
  text-decoration: none !important;
  position: relative;
  top: 2px; /* sits slightly down to align with border */
}

/* Active tab */
.tab-buttons .wp-block-button__link.active {
  background: #228dc5;
  color: #fff !important;
  top: 2px;
  z-index: 2; /* sits above content border */
}



/* Hover for inactive tabs */
.tab-buttons .wp-block-button__link:hover,
.tab-buttons .wp-block-button__link.active:hover,
.tab-buttons .wp-block-button__link:not(.active):hover  {
  background: #fff;
  color: #228dc5 !important;
}


/* Tab content defaults */
.tab-content {
  display: none !important;
  margin-top: -1px; /* pull up to meet tabs cleanly */
  padding: 20px;
  text-align: left; /* ensures text doesn’t center unless you want it */
  border: 1px solid #333;
  border-radius: 0 6px 6px 6px; /* rounded except top-left */
  background: #fff;
  z-index: 1;
}

/* Active tab shows */
.tab-content.active {
  display: block !important;
}

/* If you want only images centered inside content */
.tab-content img {
  display: block;
  margin: 0 auto;
}

/* Reset GB buttons */
:where(.wp-block-button__link) {
  border-radius: 0px !important;
}

/* Resize SVGs */
.svg-form .gb-shape svg {
  width: 70px !important;   /* adjust to desired size */
  height: 70px !important;  /* keep equal for square scaling */
}

.history-carousel .swiper-pagination-bullet-active {
  background-color: #ffffff !important; /* your active color */
}


.list-about li {
  line-height: 1.3;   /* adjust spacing within each line of text */
  margin-bottom: 13px; /* extra spacing between list items */
}