/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  anttirokka.fi:n lapsiteema. Kaikki sivuston custom CSS on tässä tiedostossa.
 Author:       Antti Rokka
 Author URI:   https://anttirokka.fi/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/*
 * Säännöt:
 * - Vain asioita, joita ei voi tehdä Bricksissä natiivisti. Jokaiselle säännölle kommentti miksi.
 * - Valitsimina vain Bricksin globaalit luokat, ei koskaan elementti-ID:itä (#brxe-…).
 * - Arvot Bricksin globaaleista muuttujista (var(--space-m) jne.).
 * - Bricksin perus-CSS on @layer bricks -kerroksessa, joten nämä säännöt voittavat sen ilman !importantia.
 * Ks. docs/tekninen-toteutus.md, kohta 3.3.
 */


/* 1. Perusta: saavutettavuus, ankkurit
   ========================================================================== */

/* Näkyvä fokus koko sivustolle. Bricksissä ei ole sivustonlaajuista :focus-visible-asetusta. */
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* Ankkurilinkit (/#tyot, /#mina, /#yhteys) eivät osu aivan reunaan. Ei natiivia asetusta. */
[id] {
	scroll-margin-top: var(--space-heading);
}

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


/* 2. Typografian hienosäätö
   ========================================================================== */

/* text-wrap ei ole Bricksin typografia-asetuksissa. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}


/* 3. Komponenttikohtaiset lisäykset
   ========================================================================== */

/* Pikseliruudukko heron taustalla, häivytys alaspäin (Paper: A3 / Projekti · Toteutus).
   Pikseli on 4 × 4 px:n neliö, 28 px:n välein. Neliö tehdään kartiogradientilla, jonka kärki on (4px, 4px):
   vasen yläneljännes (270–360°) on väriä ja loput läpinäkyvää, joten reunat ovat teräviä.
   Bricksin taustassa ei ole background-size-asetusta toistuvalle gradientille eikä mask-imagea. */
.hero,
.case-hero {
	position: relative;
	isolation: isolate;
}

.hero::before,
.case-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: conic-gradient(from 0deg at 4px 4px, transparent 0 270deg, rgba(244, 244, 242, 0.16) 270deg);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
	pointer-events: none;
}

/* Hover-efekti: site.js piirtää saman ruudukon canvakseen, ja kursorin lähellä pikselit muuttuvat punaisiksi.
   Kun canvas on valmis, CSS-ruudukko piilotetaan. Ilman JavaScriptiä jää yllä oleva staattinen ruudukko. */
.has-dot-field::before {
	content: none;
}

.dot-field {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	pointer-events: none;
}

/* Työn sivulla ruudukko ei jatku koko herolle: se päättyy otsikon alapuolelle, jotta kuvaus ja tagit pysyvät
   luettavina. site.js asettaa --grid-h:n otsikon alareunan mukaan (otsikko voi rivittyä); ilman JavaScriptiä
   käytetään oletuskorkeutta. Häivytys (mask) venyy tämän korkeuden mukaan, kuten etusivulla heron korkeuden mukaan. */
.case-hero::before,
.case-hero .dot-field {
	bottom: auto;
	height: var(--grid-h, 340px);
}

/* Työkortti ilman artikkelikuvaa: sama pikseliruudukko kuin mallissa ("Projektikuva"). Sama syy kuin yllä. */
.case-card {
	background-image: conic-gradient(from 0deg at 4px 4px, transparent 0 270deg, rgba(244, 244, 242, 0.12) 270deg);
	background-size: 28px 28px;
}

/* Työkortin hover: kuva lähenee ja himmennys kevenee. Bricksissä ei voi tyylitellä lapsielementtiä
   vanhemman hover-tilasta. Vain hiirilaitteilla; liike vain, jos käyttäjä ei ole rajoittanut sitä. */
@media (hover: hover) {
	.case-card__shade {
		transition: opacity 0.45s;
	}

	.case-card:hover .case-card__shade,
	.case-card:focus-within .case-card__shade {
		opacity: 0.78;
	}

	/* Punainen valo kulkee kortin reunaa pitkin kursorin kohdalla (sama ajatus kuin heron pisteissä).
	   Maskattu 1 px:n kehä; site.js päivittää --mx/--my. Bricksissä ei ole mask-asetuksia.
	   Sama valo työsivun kuvissa (.case-mockup); niissä ei ole tekstiä päällä, joten himmennystä ei tarvita. */
	.case-card::after,
	.case-mockup::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		padding: 1px;
		border-radius: calc(var(--radius-surface) - 1px);
		background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--brand), transparent 70%);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
		opacity: 0;
		transition: opacity 0.35s;
		pointer-events: none;
	}

	.case-mockup::after {
		border-radius: inherit;
	}

	.case-card:hover::after,
	.case-card:focus-within::after,
	.case-mockup:hover::after,
	.case-mockup:focus-visible::after {
		opacity: 1;
	}

	/* Lähenevä kuva pysyy kuvan rajoissa. */
	.case-mockup {
		overflow: hidden;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.case-card__image,
	.case-mockup img {
		transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.case-card:hover .case-card__image,
	.case-card:focus-within .case-card__image,
	.case-mockup:hover img,
	.case-mockup:focus-visible img {
		transform: scale(1.045);
	}
}

/* Pisteviiva: sama pistekuvio kuin taustaruudukossa. Kasvaa vasemmalta valikon linkin alle (hover, fokus,
   nykyinen osio) ja lomakekentän alaviivalle (fokus). Pseudo-elementtiä ja toistuvaa gradienttia ei voi
   tehdä Bricksissä. Luokan is-current asettaa site.js. */
.site-nav__link,
.contact__panel .form-group {
	position: relative;
}

.site-nav__link::after,
.contact__panel .form-group:has(> input, > textarea)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 3px;
	background: radial-gradient(circle at 1.5px 1.5px, var(--brand) 1.2px, transparent 1.6px) 0 0 / 7px 3px repeat-x;
	transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}

/* Bricksin lomakeryhmässä on 20 px:n alatäyte; viiva asettuu kentän alareunan päälle.
   Lomakkeessa viiva on vaalea (--ink), koska punainen näyttäisi kentän virhetilalta. */
.contact__panel .form-group:has(> input, > textarea)::after {
	bottom: 19px;
	background-image: radial-gradient(circle at 1.5px 1.5px, var(--ink) 1.2px, transparent 1.6px);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-current::after,
.contact__panel .form-group:focus-within::after {
	width: 100%;
}

/* Kentän fokuksen näyttää pisteviiva, joten koko sivuston ääriviiva (osio 1) jätetään näistä kentistä pois. */
.contact__panel .form-group > input:focus-visible,
.contact__panel .form-group > textarea:focus-visible {
	outline: none;
}

/* Painikkeen painallus ja värin pehmeä vaihtuminen. Hover-väri on Bricksissä; :active-tilaa ja
   siirtymää ei voi asettaa lomakkeen painikkeelle. */
.contact__panel .bricks-button,
.locked-view__form #magic-login-shortcode .magic-login-submit {
	transition: background-color 0.25s, transform 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.contact__panel .bricks-button:active,
.locked-view__form #magic-login-shortcode .magic-login-submit:active {
	transform: scale(0.97);
}

.locked-view__form #magic-login-shortcode .magic-login-submit:hover {
	background-color: color-mix(in srgb, var(--accent), var(--brand) 45%);
}

/* Kopioi-painike sähköpostiosoitteen perässä. site.js luo painikkeen (kopiointi vaatii JavaScriptiä),
   joten sitä ei voi tyylitellä Bricksissä. */
.contact__copy {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-subtle);
	font-family: inherit;
	font-size: var(--size-caption);
	cursor: pointer;
	transition: color 0.2s;
}

.contact__copy:hover,
.contact__copy.is-done {
	color: var(--ink);
}

@media (max-width: 767px) {
	.contact__copy {
		margin-left: 0;
		align-self: flex-start;
	}
}

/* Prototyypin näyttämö (docs/tekninen-toteutus.md 7.2). Tilat vaihtaa assets/js/site.js
   lisäämällä .case-media-elementtiin luokan is-proto-active. Tilasidonnaista näkyvyyttä
   ei voi tehdä Bricksissä ilman tilaluokkaa. */
.case-media.is-proto-active .proto-stage__poster,
.case-media.is-proto-active .proto-stage__shade,
.case-media.is-proto-active .proto-stage__open {
	display: none;
}

.case-media.is-proto-active .proto-stage__viewport,
.case-media.is-proto-active .proto-stage__close {
	display: flex;
}

/* Iframe renderöidään suunnitellussa koossa ja skaalataan (transform) näyttämöön. */
.proto-stage__frame {
	flex-shrink: 0;
	overflow: hidden;
	background-color: #fff;
	transform-origin: center center;
}

/* site.js luo iframen; Bricksissä ei ole iframe-elementtiä, jota voisi tyylitellä. */
.proto-stage__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Mobiiliproton laitekehys. Kehys skaalautuu iframen mukana. */
.proto-stage--mobile .proto-stage__frame {
	border-radius: 48px;
	box-shadow: 0 0 0 12px #000, 0 0 0 13px var(--line-strong);
}

/* Selaimen button-oletusreunat ja -fontti pois (Bricksin elementit custom tagilla <button>). */
.proto-stage__open,
.proto-stage__close {
	font-family: inherit;
}

.proto-stage__open {
	border: 0;
}


/* 4. Kolmannen osapuolen merkintä (Magic Login -lomake)
   ========================================================================== */

/* Lukitun näkymän kirjautumislomake näyttää samalta kuin etusivun yhteydenottolomake.
   Lomakkeen HTML tulee lisäosan shortcodesta, eikä sitä voi tyylitellä Bricksissä. Lisäosan oma CSS
   (valkoiset laatikot, 320 px keskitetty leveys) käyttää ID-valitsimia, joten valitsin alkaa
   Shortcode-elementin luokalla .locked-view__form. */
.locked-view__form #magic-login-shortcode {
	display: block;
	width: 100%;
	margin: 0;
}

/* Lisäosan ohjeteksti piiloon, kun lomake on näkyvissä: sama ohje on jo näkymän leipätekstissä.
   Lähetyksen jälkeen lomake piiloutuu, ja kuittaus jää näkyviin. */
.locked-view__form #magic-login-shortcode:has(form) .message {
	display: none;
}

/* Kuittaus ja virhe näyttävät samalta, eikä lomake jää näkyviin kummassakaan tapauksessa.
   Näin lomake ei paljasta, onko osoite kutsuttujen joukossa (tekstit ovat shortcoden attribuuteissa). */
.locked-view__form #magic-login-shortcode:has(#login_error) form {
	display: none;
}

.locked-view__form #magic-login-shortcode .message,
.locked-view__form #magic-login-shortcode #login_error {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: var(--size-body);
}

.locked-view__form #magic-login-shortcode label {
	margin-bottom: 5px;
	color: var(--ink-subtle);
	font-size: var(--size-body);
	font-weight: 400;
}

.locked-view__form #magic-login-shortcode .input {
	width: 100%;
	height: 41px;
	padding: 0 12px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: var(--size-body);
	line-height: 40px;
}

.locked-view__form #magic-login-shortcode .input::placeholder {
	color: var(--ink-faint);
	opacity: 1;
}

.locked-view__form #magic-login-shortcode .magic-login-submit {
	width: auto;
	margin: 20px 0 0;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background-color: var(--accent);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--size-body);
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.15;
}


/* 5. Apuluokat
   ========================================================================== */