/*
Theme Name:   Catch Fullscreen Child
Theme URI:    https://test.graphics.berlin
Description:  Child theme for Catch Fullscreen with custom header effects
Author:       Maya-Maya
Author URI:   https://maya.graphics.berlin
Template:     catch-fullscreen
Version:      1.0.6
Text Domain:  catch-fullscreen-child
*/

/* ============================================
   Google icons - selfhosting
   ============================================ */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
/*  src: url(../../uploads/2026/05/MaterialIconsRound-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../../uploads/2026/05/MaterialIconsRound-Regular.woff2) format('woff2'),
    url(../../uploads/2026/05/MaterialIconsRound-Regular.woff) format('woff'),
    url(../../uploads/2026/05/MaterialIconsRound-Regular.ttf) format('truetype');
}

.material-icons-round {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 36px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* ============================================
   disable search icon
   ============================================
*/
.primary-search-wrapper {
	display:none !important;
}

/* ============================================
   carousel fix
   ============================================ */
.swiper-wrapper {
    transition-timing-function: linear !important;
	flex-direction: row;
    align-items: center;
	margin-bottom: 0.675rem;
}
.swiper-slide {
/*	background-color: rgba(51,51,51, 0.5); 
	display: flex !important; */
    align-items: center;
    flex-direction: column;
}
.carousel p{
	background-color: rgba(255,187,39,0.15);
	padding: 5px;
	border: 0 solid;
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 500;
	color: #666;
    text-align:center;
	margin-bottom: 0;
	hyphens: none;
}

/* ============================================
   VIDEO HEADER FIX
   ============================================ */

/* CRITICAL: Hide all YouTube UI elements */
.custom-header-media .wp-custom-header-video-button,
  .custom-header-media #wp-custom-header-video-button,
  .wp-custom-header-video-button:not(.media-ctrl-btn) {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
}
  .custom-header-media iframe[src*="youtube.com"],
  .custom-header-media iframe[src*="youtube-nocookie.com"] {
      opacity: 0 !important;
  }

  .custom-header-media iframe.youtube-header-ready {
      opacity: 1 !important;
      transition: opacity 0.25s ease-in-out;
  }

.wp-custom-header::before,
.custom-header-media::before,
.wp-custom-header::after,
.custom-header-media::after {
    display: none !important;
}

.custom-header-media iframe::before,
.custom-header-media iframe::after,
.wp-custom-header iframe::before,
.wp-custom-header iframe::after {
    display: none !important;
    content: none !important;
}
/* Z-INDEX FIX: Ensure text content is above media in all browsers (Firefox fix) */
.custom-header-media {
    z-index: 1 !important;
}

.custom-header-content,
.header-media-section {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* ============================================
   HEADER WITHOUT JUMP - USING TRANSFORM
   ============================================ */

body.home #header-content {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; 
    background-color: transparent !important;
    box-shadow: none !important;
    bottom: 0;
    top: auto;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s ease-in-out !important;
    transform: translateY(0) !important;
}

.home .header-top #header-content,
.home.normal-scrolling-enabled #header-content.main-nav-scrolled,
.home #header-content.main-nav-scrolled {
    bottom: 0 !important;
    top: auto !important;
    position: fixed !important;
    animation: none !important;
    -webkit-animation: none;
}

body.home.scrolled #header-content {
    transform: translateY(calc(-100vh + 100%)) !important;
    background-color: rgba(64, 64, 64, 1) !important;
}

.home #header-wrapper,
.home #header-content .wrapper {
    background-color: transparent !important;
    transition: background-color 0.6s ease-in-out !important;
    box-shadow: none !important;
}

body.home.scrolled #header-wrapper,
body.home.scrolled #header-content .wrapper {
    background-color: rgba(64, 64, 64, 1) !important;
}

/* ============================================
   LOGO - SMOOTH SIZE CHANGE VIA HEIGHT
   ============================================ */

.home .site-branding .custom-logo,
.home .site-branding img {
    width: auto !important;
    max-width: none !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.home:not(.scrolled) .site-branding .custom-logo,
body.home:not(.scrolled) .site-branding img {
    height: 116px !important;
}

body.scrolled .site-branding .custom-logo,
body.scrolled .site-branding img {
    height: 50px !important;
}

body.scrolled .site-branding .custom-logo,
body.scrolled .site-branding p.site-title {
	font-size: 18px;
}

body.scrolled .site-branding .custom-logo,
body.scrolled .site-branding p.site-description, 
body.scrolled .site-contact span {
	font-size: 11px;
}

body.scrolled .site-header-main > div {
	padding: 0;
	margin-left: 25px;
}

/* ============================================
   ADDITIONAL THEME OVERRIDES
   ============================================ */

body:not(.normal-scrolling-enabled).menu-is-open .header-top #header-content,
body:not(.normal-scrolling-enabled).menu-is-open #header-content.main-nav-scrolled {
    bottom: 0 !important;
    top: auto !important;
}

.home.header-top-disabled #header-content {
    bottom: 0 !important;
    overflow-y: visible !important;
    position: fixed !important;
}

body:not(.header-media-disabled).header-top-disabled #header-content.main-nav-scrolled + *,
body:not(.home) #masthead + * {
    margin-top: 0 !important;
}

/* Gradient Background Color */
.page .site #content.site-content {
	background-image: -webkit-linear-gradient(90deg, #fff0d0, #f0f0f0);
	background-image: linear-gradient(0deg, #fff0d0, #f0f0f0);
	background-attachment: scroll !important;
}

/*Block of video styles*/
.video_block {
	margin-bottom: 1rem;
}

blockquote {
	font-size: 1rem;
	font-weight: 400;
}

.wp-block-pullquote {
	background-color: rgba(255,255,255,0.4);
	border-radius: 8px;
	border: 0;
}

.fluid-layout #header-content, .boxed-layout #header-content .wrapper, .site-primary-menu.toggled-on, #tertiary, #footer-menu-wrapper, .site-footer {
	background-color: #404040;
}

body:not(.header-center-layout) .site-branding {
	margin-right: 0;

}	
.site-contact {
	padding: 14px 0;
	margin-right: auto;
	margin-left: 25px;
}

.site-contact span, .site-contact span a {
	display: inline-block;
	position: relative;
	color: #fff;
	font-size: 0.875rem;
	letter-spacing: 0.15em;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
}

.site-contact a:hover, a:focus, a:active {
	color: #ffbb27;
}

.mobile-header-fallback {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page .site #content.site-content {
    padding-bottom: 0 !important;
}

.entry-content > :last-child {
    margin-bottom: 0 !important;
    display: block;
}

.entry-content > figure:last-child img,
.entry-content > .wp-block-image:last-child img {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

#tertiary .footer-widget-1 section {
	margin: 0;
	padding: 0;
}

h4.footer-name {
	font-size: 1.25em;
	margin-top: 0.25em;
}

.footer-name mark {
	padding-left: 0;
}

.footer-logo img {
		width: 30%;
}
  #colophon .footer-widget-area.three > .wrapper {
      display: flex;
      flex-wrap: wrap;
  }

  #colophon .footer-widget-area.three .widget-column {
      float: none;
      clear: none;
      width: 100%;
  }

/* ============================================
   NON-HOME PAGE
   ============================================ */

body:not(.home) #header-content {
    position: fixed !important;
    bottom: auto;
    top: 0;
	background-color: rgba(64, 64, 64, 1);
    transition: unset;
}

body:not(.home) .site-branding .custom-logo,
body:not(.home) .site-branding img {
    height: 58px !important;
	transition: unset;
}

body:not(.home) .site-content {
	padding: 180px 0;
}

/* ============================================
   ADMIN BAR
   ============================================ */

body.home.admin-bar #header-content {
    bottom: 0;
    top: auto;
}
body:not(.home).admin-bar #header-content {
    bottom: auto;
    top: 32px;
}

body.home.admin-bar.scrolled #header-content {
    transform: translateY(calc(-100vh + 100% + 32px)) !important;
}

@media screen and (max-width: 782px) {
    body.home.admin-bar.scrolled #header-content {
        transform: translateY(calc(-100vh + 100% + 46px)) !important;
    }
}

/* ============================================
   CUSTOM VIDEO CONTROLS
   ============================================ */

.custom-media-controls {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%) !important;
    z-index: 1001 !important;
    
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    align-items: center !important;
    justify-content: center !important;
    
    width: auto !important;
    height: auto !important;
    min-width: 127px !important;
    min-height: 54px !important;
    
    transition: bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.custom-media-controls button.media-ctrl-btn {
    background-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffbb27 !important;
    border-radius: 50% !important;
    width: 54px !important;
    height: 54px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    
    font-size: 20px !important;
    line-height: 1 !important;
    
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.custom-media-controls button.media-ctrl-btn:hover {
    background-color: rgba(255, 202, 39, 0.85) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.custom-media-controls button.media-ctrl-btn:active {
    transform: scale(1.05) !important;
}

.control-icon {
    font-size: 26px !important;
    display: block !important;
    line-height: 1 !important;
}

/* ============================================
   RESPONSIVE - temporarily disabled
   ============================================ */

@media screen and (max-width: 667px) {
	
	html body .modula-fancybox-show-thumbs .modula-fancybox-inner {
		right: 0 !important; 
	} 
    .custom-media-controls button.media-ctrl-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }
    
    .control-icon {
        font-size: 22px !important;
    }
    
    .custom-media-controls {
        gap: 12px !important;
    } 
	
	blockquote, .wp-block-pullquote blockquote p {
		font-size: 0.9rem;
	}
	
	figure.wp-block-pullquote {
		padding: 15px 35px;
	}
	/* show fallback */
    .mobile-header-fallback {
        display: block !important;
		position: absolute !important;
    }
    /* hide video-container */
    .wp-custom-header,
    .wp-custom-header-video-button {
        display: none !important;
    }
    /* hide controls */
    .custom-media-controls {
        display: none !important;
    }
	
	#tertiary .footer-widget-1 section {
		margin: 0;
		padding: 0 0 0 42px;
	}

} /* @media screen and (max-width: 667px) */

	@media screen and (min-width: 667px)	{
		#tertiary .footer-widget-1 section {
			padding: 0 0 0 25px;
		}
		h4.footer-name {
			margin-top: 0;
		}
	}

  @media screen and (min-width: 840px) {
      #colophon .footer-widget-area.three .widget-column.footer-widget-1,
      #colophon .footer-widget-area.three .widget-column.footer-widget-3 {
          width: 50%;
      }

      #colophon .footer-widget-area.three .widget-column:nth-child(3) {
          width: 100%;
      }
	  		
	 .footer-logo img{
	 	 width: 50%;
 	 }
	  
	  h4.footer-name {
		  font-size: 1.25em;
	  }

  } /* @media screen and (max-width: 840px) */

 @media screen and (min-width: 1024px) {
      #colophon .footer-widget-area.three .widget-column.footer-widget-1,
	  #colophon .footer-widget-area.three .widget-column.footer-widget-2, 
	  #colophon .footer-widget-area.three .widget-column.footer-widget-3 {
          width: 33.3%;
      }
	 
	  body.scrolled .site-branding .custom-logo,
	  body.scrolled .site-branding img {
    	  height: 58px !important;
	  }

	  body.scrolled .site-header-main > div {
		  padding: 14px 0;
	  }
	 
	  h4.footer-name {
		  margin-top: 0.25em;
	  }
	  
	  p.footer-caption {
		  font-size: 0.75rem;
 	  }
  } /* @media screen and (max-width: 1024px) */
@media screen and (min-width: 1200px) {
	p.footer-caption {
		 font-size: 0.9375rem;
	 }
	
	  body.scrolled .site-branding .custom-logo,
	  body.scrolled .site-branding p.site-title {
		font-size: 1.5rem;
	  }

	  body.scrolled .site-branding .custom-logo,
	  body.scrolled .site-branding p.site-description, 
 	  body.scrolled .site-contact span {
		 font-size: 0.8125rem;
	  }

}

@media screen and (min-width: 100em) {
    blockquote, .wp-block-pullquote blockquote p {
		font-size: 1rem;
		font-weight: 400;
	}
		
	.footer-logo img{
		width: 40%;
	}
} /* @media screen and (min-width: 100em) */

/* ============================================
   FULLPAGE.JS OVERRIDES
   ============================================ */

.fp-enabled #header-content {
    position: fixed !important;
    bottom: 0 !important;
}