/*
Theme Name: Ahjo Comms
Theme URI: https://ahjocomms.fi
Template: twentytwentyfive
Author: WebAula
Author URI: https://webaula.fi
Description: Child theme of Twenty Twenty-Five for Ahjo Comms.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
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: ahjocomms
*/

/* ==========================================================================
   AHJO COMMS — CHILD THEME
   Parent (twentytwentyfive-style) loads first; everything here layers on top.
   Design tokens and block defaults belong in theme.json, not here. This file
   is for what theme.json cannot express.
   ========================================================================== */


/* ==========================================================================
   GLOBAL
   ========================================================================== */

/* — placeholder: site-wide element overrides — */


/* ==========================================================================
   HEADER
   Läpinäkyvä, hero-videon päällä. Ei kiinnitetty vieritykseen (static).
   Toistaiseksi vain etusivulla: muilla sivuilla tarvitaan tumma teksti
   vaaleaa taustaa vasten, joka ratkaistaan kun muut sivupohjat tehdään.
   ========================================================================== */

.home .wp-site-blocks > header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 10;
}

.wp-site-blocks > header .wp-block-group.alignfull {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: center;
}

.wp-site-blocks > header .wp-block-image {
	margin: 0;
}

/* Mitat ovat lohkon omissa attribuuteissa, jotta editori ja etusivu näyttävät
   samalta ja asiakas voi säätää kokoa lohkon asetuksista. */
.wp-site-blocks > header .wp-block-image img {
	display: block;
}


/* ==========================================================================
   OFF-CANVAS VALIKKO
   Sama luokkasanasto kuin nokianpanimossa, mutta ilman jQueryä.
   Paneeli tulostetaan wp_footerissa body-tasolle, joten se ei ole headerin
   pinoamiskontekstissa eikä z-indeksiä tarvitse kikkailla.
   ========================================================================== */

.offcanvas-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 24px;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 100px;
	background: transparent;
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.offcanvas-toggle:hover,
.offcanvas-toggle:focus-visible {
	border-color: var(--wp--preset--color--base);
	background: rgba( 255, 255, 255, 0.08 );
}

.offcanvas-toggle svg {
	display: block;
	flex: none;
}

.offcanvas {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 1000;
	display: flex;
	width: min( 460px, 100% );
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.offcanvas.open {
	transform: none;
	visibility: visible;
	transition: transform 0.35s ease, visibility 0s;
}

.offcanvas-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--wp--preset--spacing--60);
	overflow-y: auto;
}

.offcanvas-close {
	align-self: flex-end;
	margin-bottom: var(--wp--preset--spacing--50);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

/* menu_class landetaan ul-elementtiin itseensä, ei sen emoon. */
.offcanvas-nav,
.offcanvas-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.offcanvas-nav li + li {
	border-top: 1px solid var(--wp--preset--color--light);
}

.offcanvas-nav a {
	display: block;
	padding: 14px 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--large);
	text-decoration: none;
}

.offcanvas-nav a:hover,
.offcanvas-nav a:focus-visible {
	color: var(--wp--preset--color--primary);
}

#offcanvas-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

#offcanvas-overlay.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0s;
}

body.offcanvas-active {
	overflow: hidden;
}

 ( prefers-reduced-motion: reduce ) {
	.offcanvas,
	#offcanvas-overlay {
		transition: none;
	}
}


/* ==========================================================================
   HERO
   XD: otsikko 1067px, ingressi 740px, kaikki keskitetty taulun keskelle.
   ========================================================================== */

/* Pilleri kutistuu sisältönsä levyiseksi; lohkoryhmä olisi muuten levyinen. */
.ahjo-hero__badge {
	width: fit-content;
	margin-inline: auto;
}

/* Ingressin rivinpituus speksin mukaan. */
.ahjo-hero__lead {
	max-width: 740px;
	margin-inline: auto;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

/* — placeholder — */


/* ==========================================================================
   FOOTER
   Musta pohja liekkitekstuurilla. Kuva on neliö, joten se rajataan coverilla
   ja ankkuroidaan alareunaan, missä liekki on kirkkaimmillaan.
   ========================================================================== */

.ahjo-footer {
	background-color: var(--wp--preset--color--contrast);
	background-image: url( assets/img/flame-bg.webp );
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--80);
}

.ahjo-footer .wp-block-image {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ahjo-footer .wp-block-image img {
	display: block;
}

.ahjo-footer p {
	line-height: 1.7;
}

.ahjo-footer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ahjo-footer a:hover,
.ahjo-footer a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Sosiaalisen median ikonit: ympyräreunus, valkoinen tunnus. */
.ahjo-footer .wp-block-social-links {
	gap: 12px;
	margin-top: var(--wp--preset--spacing--40);
}

.ahjo-footer .wp-block-social-links.is-style-logos-only .wp-block-social-link {
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 50%;
	color: var(--wp--preset--color--base);
}

.ahjo-footer .wp-block-social-links.is-style-logos-only .wp-block-social-link a {
	padding: 10px;
	color: inherit;
}

.ahjo-footer .wp-block-social-links.is-style-logos-only .wp-block-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Palkintomerkit: eri kokoisia lähdetiedostoja, joten korkeus vakioidaan. */
.ahjo-footer__badges {
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--70);
}

.ahjo-footer__badges .wp-block-image {
	margin: 0;
}