/*
Theme Name:     Neve Child
Theme URI:      https://themeisle.com/themes/neve/
Template: neve
Author:         ThemeIsle
Author URI:     https://themeisle.com
Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles
*/



/* Nagłówki H2 wewnątrz treści wpisu / strony  */
.entry-content h2{
	/* spraw, by element mierzył się „na tekst” */
	display:inline-block;          /* fallback dla starszych przeglądarek  */
	width:fit-content;             /* nowoczesny sposób (większość przeglądarek) */

	/* własna ramka i odstępy */
	border:1px solid currentColor; /* kolor ramki = kolor tekstu            */
	padding:var(--wp--preset--spacing--20);
    margin-bottom: 10px;
	/* zachowaj standardowe marginesy nagłówków 
	margin:1.5em 0 .8em; */
}

/* Jeśli nagłówki pojawiają się też w innych miejscach
   (np. w sidebarze) i nie chcesz tam ramki,
   zwęź selektor tylko do głównego obszaru treści motywu Neve: */
.nv-content-wrap.entry-content h2{
	/* …ten sam zestaw deklaracji co wyżej… */
}


/*--------------------------------------------------
  Linia + kółko w sekcji .my-line-section
  – Desktop:      linia w 17 % szerokości kontenera
  – Mobile ≤768 px linia w  5 % szerokości kontenera
  Kontener (lub jego rodzic) ma max-width: 1200 px; margin: 0 auto;
--------------------------------------------------*/

/* =========  WSPÓLNE  (niezależne od szerokości) ========== */
.my-line-section{
  position: relative;               /* tylko informacyjnie */
}

/* pionowa linia */
.my-line-section .vertical-line{
  position: fixed;
  top: 0;
  left: 50%;                        /* odniesienie – środek okna */
  width: 2px;
  height: 100vh;                    /* pełna wysokość ekranu */
  z-index: 9999;

  /* zmienna --gradStop ustawiana w JS; start = 25 % */
  --gradStop: 25%;
  background: linear-gradient(
      to bottom,
      #CE231C 0%,
      #CE231C var(--gradStop),
      #3D4F8F var(--gradStop),
      #3D4F8F 100%
  );
  transition: --gradStop 0.2s linear;
}

/* kółko */
.my-line-section .circle{
  position: fixed;
  top: 25%;                         /* JS będzie zmieniać 25 → 75 */
  left: 50%;
  width: 30px;
  height: 30px;
  background: #CE231C;
  border-radius: 50%;
  z-index: 9999;

/*   transition: top 0.2s linear; */
}

/* =========  DESKTOP  (≥ 769 px) – linia w 17 % kontenera  ========== */
@media (min-width: 769px){
  /* 0.5 − 0.17 = 0.33  → przesunięcie o 33 % szerokości kontenera
     –1 px / –15 px – żeby wyśrodkować odpowiednio 2-px linię i 30-px kółko */
  .my-line-section .vertical-line{
    transform: translateX(calc(-0.33 * min(100vw, 1200px) - 1px));
  }
  .my-line-section .circle{
    transform: translateX(calc(-0.33 * min(100vw, 1200px) - 15px));
  }
}

/* =========  MOBILE  (≤ 768 px) – linia w 5 % kontenera  ========== */
@media (max-width: 768px){
  /* 0.5 − 0.05 = 0.45  → przesunięcie o 45 % szerokości kontenera */
  .my-line-section .vertical-line{
    transform: translateX(calc(-0.45 * min(100vw, 1200px) - 1px));
  }
  .my-line-section .circle{
    transform: translateX(calc(-0.45 * min(100vw, 1200px) - 15px));
  }
}