/*
Theme Name:   Iconic Socials Theme
Theme URI:    https://iconicsocials.de/
Description:  A specialized Theme, bulid for Iconic Socials Website
Author:       MCA
Author URI:   https://more-creative-arts.de
Template:     greyd-theme
Version:      1.0.1
License:      GPLv2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         Tags: blog, portfolio, entertainment, site-editing, block-patterns, block-styles
Text Domain:  iconicsocials
*/

/*****/
/*Row*/

@media (max-width: 599px) {
	.break-sm {
		flex-wrap: wrap !important;
	}

	.reverse-sm {
		flex-direction: column-reverse;
	}
}

@media (max-width: 992px) {
	.break-md {
		flex-wrap: wrap !important;
	}

	.reverse-md {
		flex-direction: column-reverse;
	}
}

@media (max-width: 1199px) {
	.break-lg {
		flex-wrap: wrap !important;
	}

	.reverse-lg {
		flex-direction: column-reverse;
	}
}

/**********************/
/*Media and Text Block*/

.wp-block-media-text {
	gap: var(--wp--preset--spacing--medium);
}

@media (max-width: 991.98px) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content.wp-block-media-text__content {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
	}

	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}
	.wp-block-media-text__content {
		padding: 0px !important;
	}
}


/* Scroll Offset – Theme Presets */

.scroll-offset-up-tiny {
	scroll-margin-top: var(--wp--preset--spacing--tiny);
}

.scroll-offset-up-small {
	scroll-margin-top: var(--wp--preset--spacing--small);
}

.scroll-offset-up-medium {
	scroll-margin-top: var(--wp--preset--spacing--medium);
}

.scroll-offset-up-large {
	scroll-margin-top: var(--wp--preset--spacing--large);
}

.scroll-offset-up-x-large {
	scroll-margin-top: var(--wp--preset--spacing--x-large);
}

/* nach unten */

.scroll-offset-down-tiny {
	scroll-margin-top: calc(var(--wp--preset--spacing--tiny) * -1);
}

.scroll-offset-down-small {
	scroll-margin-top: calc(var(--wp--preset--spacing--small) * -1);
}

.scroll-offset-down-medium {
	scroll-margin-top: calc(var(--wp--preset--spacing--medium) * -1);
}

.scroll-offset-down-large {
	scroll-margin-top: calc(var(--wp--preset--spacing--large) * -1);
}

.scroll-offset-down-x-large {
	scroll-margin-top: calc(var(--wp--preset--spacing--x-large) * -1);
}

/* HEADLINE H! anpassung Mobile */

@media (max-width: 599px) {
	.iconic-h1-headline h1 {
		font-size: clamp(2.8em, 2.8rem + ((1vw - 0.2em) * 1.024), 5em);
	}
	.iconic-h1-headline {
		max-width: clamp(360px, 75% ,599px);
	}
}



/***************************/
/* Navigation Colored Menu */ 

.wp-block-navigation .wp-block-navigation-item.current-menu-item {
	background-color: var(--wp--preset--color--secondary);
}


/* Logo Größe default size reset */
.wp-block-site-logo.is-default-size img {
	width: 100%;
}


/*************************************/
/* HEADER Hintergrundbild Berechnung */

.iconic-main-content {
  position: relative;
  background: transparent !important; /* vorhandenes WP-Backgroundbild deaktivieren */
}

.iconic-main-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* feste Bildbreite, kein Skalieren */
  --img-w: 1402px;
  width: var(--img-w);

  /* feste Bildhöhe, kein Skalieren */
  --img-h: 779px;
  height: var(--img-h);

  background-image: url("/wp-content/uploads/iconis_socials_verlauf_oben.png");
  background-repeat: no-repeat;
  background-position: left top; /* rechte Rundung bleibt exakt */

 /* ---- Firefox-sichere Linearisierung ---- */

  /* Viewport */
  --vw: 100vw;
}
@supports (width: 100dvw) {
  .iconic-main-content::before {
    --vw: 100dvw;
  }
}

.iconic-main-content::before {
  /*
    Steigung = (1392 - 336) / (2560 - 360)
             = 1056 / 2200
             = 0.48
  */

  --visible: clamp(
    336px,
    calc(336px + (var(--vw) - 360px) * 0.48),
    1392px
  );

  left: calc(var(--visible) - var(--img-w));
  pointer-events: none;
}
.iconic-main-content::before {
	background-size: var(--img-w) var(--img-h); /* 477px height */
	top: calc((var(--img-h) - 477px) * -1);
}

@media only screen and (min-width: 576px) {
	.iconic-main-content::before {
		background-size: var(--img-w) var(--img-h); /* 564px height */
		top: calc((var(--img-h) - 564px) * -1);
	}
	
}

@media only screen and (min-width: 768px) {
	.iconic-main-content::before {
		background-size: var(--img-w) var(--img-h); /* 654px height */
		top: calc((var(--img-h) - 654px) * -1);
	}
	
}

@media only screen and (min-width: 992px) {
	.iconic-main-content::before {
		background-size: var(--img-w) var(--img-h); /* 779px height */
		top: calc((var(--img-h) - 779px) * -1);
	}
	
}




/*************************************/
/* HEADER höhe abstand berechnung    */


div.wp-block-spacer.iconic-heder-space {
	min-height: 18px !important;
	/* width: 20px;
	background: #000; */
}
@media only screen and (min-width: 504px) {
	div.wp-block-spacer.iconic-heder-space {
		min-height: 18px !important;
	}
}
@media only screen and (min-width: 599px) {
	div.wp-block-spacer.iconic-heder-space {
		min-height: 145px !important;
	}
}
@media only screen and (min-width: 768px) {
	div.wp-block-spacer.iconic-heder-space {
		min-height: 150px !important;
	}
}
@media only screen and (min-width: 808px) {
	div.wp-block-spacer.iconic-heder-space {
		min-height: 205px !important;
	}
}
@media only screen and (min-width: 992px) {
	div.wp-block-spacer.iconic-heder-space {
		min-height: 317px !important;
	}
}
@media only screen and (min-width: 1200px) {
	div.wp-block-spacer.iconic-heder-space {
		min-height: 274px !important;

	}
}



/**************************************/
/* FOOTER Hintergrund Bild Berechnung */

.iconic-bottom-content {
  position: relative;
  background: transparent !important; /* vorhandenes WP-Backgroundbild deaktivieren */
}

.iconic-bottom-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    /* feste Bildbreite und Höhe, kein Skalieren */
    --img-w: 1402px;
    width: var(--img-w);
    --img-h: 699px;
    height: var(--img-h);

    background-image: url("/wp-content/uploads/iconis_socials_verlauf_unten.png");
    background-repeat: no-repeat;
    background-position: left 0;

    /* ---- Firefox-sichere Linearisierung ---- */

  /* Viewport */
  --vw: 100vw;
}
@supports (width: 100dvw) {
  iconic-bottom-content::before {
    --vw: 100dvw;
  }
}

.iconic-bottom-content::before {
  /*
    Steigung = (1392 - 336) / (2560 - 360)
             = 1056 / 2200
             = 0.48
  */

  --visible: clamp(
    336px,
    calc(336px + (var(--vw) - 360px) * 0.48),
    1392px
  );

  left: calc(var(--visible) - var(--img-w));
  pointer-events: none;
}
.iconic-bottom-content::before {
	background-size: var(--img-w) var(--img-h); /* 561px height */
	bottom: calc((var(--img-h) - 561px) * -1);
}

@media only screen and (min-width: 768px) {
	.iconic-bottom-content::before {
		background-size: var(--img-w) var(--img-h);  /* 579px height */
		bottom: calc((var(--img-h) - 579px) * -1);
	}
	
}

@media only screen and (min-width: 992px) {
	.iconic-bottom-content::before {
		background-size: var(--img-w) var(--img-h); /* 699px height */
		bottom: calc((var(--img-h) - 699px) * -1);
	}
	
}
	  
/* ================================
   Header Icon Group – responsive width
   Firefox & Safari safe
   ================================ */

.header-icon-group {
  /* Safari iOS Viewport-Fix */
  --vw: 100vw;
}

@supports (width: 100dvw) {
  .header-icon-group {
    --vw: 100dvw;
  }
}

.header-icon-group {
  /*
    Linear:
    min: 330px
    max: 1400px
    viewport: 360 → 2560

    Steigung:
    (1400 - 330) / (2560 - 360)
    = 1070 / 2200
    ≈ 0.48636
  */

  width: clamp(
    330px,
    calc(330px + (var(--vw) - 360px) * 0.48636),
    1400px
  );
}

	  
/* ================================
   Footer Icon Group – responsive width
   Firefox & Safari safe
   ================================ */

.footer-icon-group {
  /* Safari iOS Viewport-Fix */
  --vw: 100vw;
}

@supports (width: 100dvw) {
  .footer-icon-group {
    --vw: 100dvw;
  }
}

.footer-icon-group {
  /*
    Linear:
    min: 250px
    max: 1295px
    viewport: 360 → 2560

    Steigung:
    (1295 - 250) / (2560 - 360)
    = 1045 / 2200
    ≈ 0.475
  */

  width: clamp(
    250px,
    calc(250px + (var(--vw) - 360px) * 0.475),
    1295px
  );
}

	  

/********************************/
/* Accordion-icon Farbanpassung */


.servie-accordion {
	.wp-block-greyd-accordion__title {
		.icon {
			color: transparent;
		}
		.icon.arrow_down_alt:before {
			background:url(/wp-content/uploads/2026/01/button_arrow_down_ws.svg) no-repeat;
			display: inline-block;
			width: 50px;
			height: 50px;
 			transition: background .2s;
		}
		.icon.arrow_down_alt:hover::before {
  			background:url(/wp-content/uploads/2026/01/button_arrow_down_ye.svg) no-repeat;
		}
		
		.icon.arrow_up_alt:before {
			background:url(/wp-content/uploads/2026/01/button_arrow_up_ws.svg) no-repeat;
			display: inline-block;
			width: 50px;
			height: 50px;
		}
		.icon.arrow_up_alt:hover::before {
  			background:url(/wp-content/uploads/2026/01/button_arrow_up_ye.svg) no-repeat;
		}
	}	
}

/********************************/
/* Social Icons Farbanpassung on Hover */


.iconic-icon circle {
  fill: #000;            /* Standardfarbe */
  transition: fill .2s;
}

.iconic-icon:hover circle {
  fill: var(--wp--preset--color--primary);         /* neue Farbe nur für die circles */
}

.iconic-icon.twitch path:nth-of-type(1),
.iconic-icon.twitch path:nth-of-type(3) {
	fill: #4B5FFF;
	transition: fill .2s;
}
.iconic-icon.twitch:hover path:nth-of-type(1),
.iconic-icon.twitch:hover path:nth-of-type(3) {
	fill: #000;
}

.iconic-icon-wy circle {
  fill: #fff;            /* Standardfarbe */
  transition: fill .2s;
}

.iconic-icon-wy:hover circle {
  fill: var(--wp--preset--color--secondary);         /* neue Farbe nur für die circles */
}


/*********************************/
/*    Scoller Kachel Sizing      */


.wp-block-query.is-style-scroller .greyd-posts-slider > .query-pages-wrapper {
	container-type: inline-size;
}


.wp-block-query.is-style-scroller .greyd-posts-slider > .query-pages-wrapper > .query-page {
	--container-size: 39cqw;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--container-size)), 1fr)) !important;
}
.wp-block-query.is-style-scroller article > .dynamic > .greyd-content-box.success-kachel {
	min-width: var(--container-size);
}
.wp-block-query.is-style-scroller article > .dynamic > .greyd-content-box.success-kachel img {
		min-width: calc(var(--container-size) - var(--wp--preset--spacing--small) - var(--wp--preset--spacing--small));
		height: calc((var(--container-size) / 3 * 4 ) - 100px);
	}

@media only screen and (max-width: 768px) {
	.wp-block-query.is-style-scroller .greyd-posts-slider > .query-pages-wrapper > .query-page {
		--container-size: 66cqw;
		grid-template-columns: repeat(auto-fill, minmax(min(var(--container-size)), 1fr)) !important;
	}
	.wp-block-query.is-style-scroller article > .dynamic > .greyd-content-box.success-kachel {
		min-width: var(--container-size);
	}
		.wp-block-query.is-style-scroller article > .dynamic > .greyd-content-box.success-kachel img {
		min-width: calc(var(--container-size) - var(--wp--preset--spacing--small) - var(--wp--preset--spacing--small));
		height: calc((var(--container-size) / 3 * 4 ) - 80px);
	}
}