/*
Theme Name: Adamuszewska (TT5 Child)
Author: Syl Kowalska
Author URI: https://sylkowalska.pl
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.9
Requires PHP: 7.4
Text Domain: tt5-child
Description: UWAGA: Motyw potomny - nie należy usuwać motywu rodzica (twentytwentyfive)!
*/

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body a:hover {
  text-decoration: none;
}

.wp-block-accordion-heading__toggle:hover
  .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

::selection {
  background-color: var(--wp--preset--color--accent-1-root);
  color: var(--wp--preset--color--white);
}

/* stylowanie "notatek" */
.ttc-notes {
  transform: translate(1.5em, -1.1em) rotateZ(-8deg);
  white-space: nowrap;
}

/* ================================================
   MARKER (wyróżnienia na różowo)
   Tło elementu w trzech częściach: lewy koniec, środek (z gradientem), prawy koniec.
   Dzięki temu fraza zawija się jak zwykły tekst, a każda linia dostaje własny kawałek markera.
   Kolor różu jest wpisany w obrazy jako %23ff09a0 (cztery razy) - zmiana koloru = podmiana tego ciągu.
   ================================================ */

:root {
  --ttc-marker-left: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2030%20100%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20fill=%27%23ff09a0%27%20fill-opacity=%27.08%27%20d=%27M30%2012.3%20L16%2013.6%20C5%2015%200%2028%200%2052%20C0%2076%203%2092%2012%2093.6%20L30%2092.3%20Z%27/%3E%3C/svg%3E");
  --ttc-marker-mid: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20x2=%271%27%20y1=%270%27%20y2=%270%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23ff09a0%27%20stop-opacity=%27.08%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23ff09a0%27%20stop-opacity=%27.25%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill=%27url%28%23g%29%27%20d=%27M0%2012.3%20L100%201.7%20L100%2081.7%20L0%2092.3%20Z%27/%3E%3C/svg%3E");
  --ttc-marker-right: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2030%20100%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20fill=%27%23ff09a0%27%20fill-opacity=%27.25%27%20d=%27M0%201.7%20L16%20.6%20C25%20.2%2030%208%2030%2028%20C30%2054%2025%2078%2014%2080.4%20L0%2081.7%20Z%27/%3E%3C/svg%3E");
}

p strong,
h2 strong,
.wp-block-accordion-heading__toggle-title strong {
  font-weight: initial;
  background-image:
    var(--ttc-marker-left), var(--ttc-marker-mid), var(--ttc-marker-right);
  background-repeat: no-repeat;
  background-size:
    0.55em 0.72em,
    calc(100% - 1.1em) 0.72em,
    0.55em 0.72em;
  background-position:
    left 0 bottom 0.08em,
    left 0.55em bottom 0.08em,
    right 0 bottom 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ttc-section h2 {
  font-size: clamp(2rem, 4vw, 6rem);
}

@media (min-width: 782px) and (max-width: 1160px) {
  .ttc-pt-hero {
    background-position: calc(
        100% + max((1024px - 100vw) * 1.1, (1160px - 100vw) * 0.7)
      )
      0 !important;
  }
}

/* dodatkowe stylowanie dla sekcji na mainpage */
@media (max-width: 781px) {
  .ttc-pt-hero {
    background-size: 100% auto !important;
    background-position: 50% 0 !important;
    padding-top: 100vw !important;
  }

  .ttc-pt-about {
    background-size: 100% auto !important;
    background-position: 50% 0 !important;
  }

  .ttc-pt-about > .wp-block-group.alignwide {
    padding-top: calc(135.5vw + var(--wp--preset--spacing--60)) !important;
  }

  .ttc-pt-about .wp-block-column:empty {
    display: none;
  }

  .ttc-pt-about .wp-block-column:not(:empty) {
    padding-top: 0 !important;
  }

  .ttc-pt-offer > .wp-block-group.alignwide {
    padding-top: 30rem !important;
  }
}