/*
Theme Name: selfm.aid
Theme URI: https://selfm-aid.ch
Description: Block theme for selfm.aid — a 1:1 Gutenberg recreation of the original Elementor design. All content is edited visually; this file only holds global rules that blocks cannot express (responsive text-style values and a few decorative styles).
Version: 0.1.0
Requires at least: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: selfmaid
*/

/* ------------------------------------------------------------------
 * Global text styles and page gutter per device.
 * Values come 1:1 from the Elementor global typography kit
 * (desktop > 1024px, tablet 768–1024px, mobile <= 767px).
 * Staff choose the style by name (e.g. "Text", "Page title"); the
 * per-device size follows automatically.
 * ------------------------------------------------------------------ */
:root {
	--selfmaid-gutter: 12.5vw;
}

@media (width <= 1024px) {
	:root {
		--selfmaid-gutter: 5vw;
	}

	body {
		--wp--preset--font-size--page-title: 3.5vw;
		--wp--preset--font-size--subtitle: 5vw;
		--wp--preset--font-size--bank-subtitle: 4vw;
		--wp--preset--font-size--heading: 2vw;
		--wp--preset--font-size--tile-heading: 2vw;
		--wp--preset--font-size--text-large: 1.6vw;
		--wp--preset--font-size--text: 1.6vw;
		--wp--preset--font-size--small: 1.2vw;
	}
}

@media (width <= 767px) {
	body {
		--wp--preset--font-size--page-title: 6.5vw;
		--wp--preset--font-size--subtitle: 10vw;
		--wp--preset--font-size--bank-subtitle: 7.5vw;
		--wp--preset--font-size--heading: 3.6vw;
		--wp--preset--font-size--tile-heading: 5.5vw;
		--wp--preset--font-size--text-large: 3.8vw;
		--wp--preset--font-size--text: 3.8vw;
		--wp--preset--font-size--small: 2.5vw;
		--wp--preset--font-size--button: 3.5vw;
		--wp--preset--font-size--menu: 4vw;
	}
}

/* Antonio only ships one (bold) face; the original rendered it at the requested weight. */
.has-antonio-font-family {
	line-height: 1;
}

/* ------------------------------------------------------------------
 * Block style: "Marker" — the yellow highlight behind headings.
 * (Replaces the decorative "icon-rectangle" images positioned under
 * headings in Elementor.) Choose it in Styles → Marker.
 * ------------------------------------------------------------------ */
.is-style-marker,
.is-style-marker-box {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.is-style-marker::before {
	content: "";
	position: absolute;
	z-index: -1;
	background: var(--wp--preset--color--yellow);
	pointer-events: none;
	/* Large titles: box behind the lower part of the words, offset to the right. */
	left: 0.3em;
	right: -0.35em;
	top: 0.08em;
	bottom: -0.08em;
}

h1.is-style-marker,
h2.is-style-marker,
h3.is-style-marker,
p.is-style-marker {
	width: fit-content;
}

.has-text-align-center:is(.is-style-marker, .is-style-marker-box) {
	margin-inline: auto;
}

/* Left-aligned marker titles stay on the left (constrained layouts centre children by default). */
.is-layout-constrained > :is(.is-style-marker, .is-style-marker-box):not(.has-text-align-center):not(.has-text-align-right) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Team member names: box covers the lower half of the name and the role line. */
.is-style-team-card > .is-style-marker::before {
	left: 19%;
	right: -28%;
	top: 0.75em;
	bottom: -2.1em;
}

/* ------------------------------------------------------------------
 * Block style: "Label" — yellow title box (e.g. "Our team" on the hero).
 * ------------------------------------------------------------------ */
.is-style-label {
	background: var(--wp--preset--color--yellow);
	text-align: center;
	line-height: 1.8 !important;
}

/* Without margins set, the box is centred at the original Team-page width. */
.is-style-label:not([style*="margin-left"]) {
	margin-inline: 37% !important;
}

/* ------------------------------------------------------------------
 * Block style: Cover "Hero" — page-top photo whose yellow label overlaps the
 * lower edge. (Height = the Cover's aspect ratio, set per device.)
 * ------------------------------------------------------------------ */
.wp-block-cover.is-style-hero {
	overflow: visible;
	padding: 0 !important;
}

.wp-block-cover.is-style-hero .wp-block-cover__inner-container > :last-child {
	/* Original: the label's 20px paragraph margin collapses with Elementor's -4% / -10% widget margin. */
	margin-bottom: calc(20px - 4vw);
}


@media (width <= 767px) {
	.wp-block-cover.is-style-hero .wp-block-cover__inner-container > :last-child {
		margin-bottom: calc(20px - 10vw);
	}
}

/* ------------------------------------------------------------------
 * Team member card (pattern "Team member").
 * ------------------------------------------------------------------ */
.is-style-team-card {
	text-align: center;
}

.is-style-team-card > * {
	position: relative;
	z-index: 1;
}

.is-style-team-card > .is-style-marker {
	z-index: 0;
}


/* ------------------------------------------------------------------
 * Accordion (team biographies) — matches the original grey bars.
 * ------------------------------------------------------------------ */
.wp-block-accordion {
	text-align: start;
}

.wp-block-accordion-heading {
	background: var(--wp--preset--color--light-grey);
	border: 1px solid rgba(0, 0, 0, 0.02);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 15px;
	font-weight: 800;
	line-height: 21px;
}

.wp-block-accordion .wp-block-accordion-heading__toggle {
	padding: 15px;
}

.wp-block-accordion .wp-block-accordion-panel:not([hidden]) {
	border: 1px solid #eee;
	padding: 15px;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.7;
	color: #333;
	background: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------
 * Partner logos: gentle shrink on hover, as on the original site.
 * ------------------------------------------------------------------ */
.is-style-logo-wall .wp-block-image img {
	transition: transform 0.3s;
}

.is-style-logo-wall .wp-block-image a:hover img {
	transform: scale(0.9);
}

/* Header: active menu item gets the yellow background. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--yellow);
}

/* Header: logo size per device and sticky behaviour (the template-part wrapper must be sticky). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header .site-logo {
	margin: 0;
	line-height: 0;
}

.site-header .site-logo img {
	width: 23.75vw;
	height: auto;
	display: block;
}

@media (width <= 767px) {
	.site-header .site-logo {
	margin: 0;
	line-height: 0;
}

.site-header .site-logo img {
		width: 36vw;
	}
}

.site-nav .wp-block-navigation-item__content {
	padding: 14px 2px;
}

/* Block style: Columns "Stack on phones" — columns sit side by side down to 768px and stack below,
   matching the original site's breakpoint (core's own "Stack on mobile" switches at 781px). */
@media (width <= 767px) {
	.wp-block-columns.is-style-stack-phone {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.is-style-stack-phone > .wp-block-column,
	.wp-block-columns.is-style-stack-phone-reverse > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.is-style-stack-phone-reverse {
		flex-direction: column-reverse;
	}

	/* Stacked columns touch (only their own padding separates them), as in the original. */
	.wp-block-columns:is(.is-style-stack-phone, .is-style-stack-phone-reverse, .has-device-widths) {
		row-gap: 0 !important;
	}
}


/* Galleries show one image per row on phones (<= 767px), as on the original site. */
@media (width <= 767px) {
	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100% !important;
	}
}

/* Never scroll sideways: some original layouts push buttons/images past the edge with negative margins. */
body {
	overflow-x: clip;
	overflow-wrap: break-word; /* as the original theme: long words and URLs wrap instead of running off screen */
}

/* Unstyled body text (no text style chosen) = the original theme's 15px / 27px. Text styles keep 1.5. */
:where(p:not([class*="-font-size"]), :where(ul, ol):not([class*="-font-size"]) > li:not([class*="-font-size"])) {
	line-height: 1.8;
}

/* Block style: Group "Banner" — image with its text shown over it on hover/focus, as on the original
   sponsor banners. Touch devices (no hover) and the editor always show the text. */
.is-style-banner {
	position: relative;
}

@media (hover: hover) {
	:where(body:not(.editor-styles-wrapper)) .is-style-banner > :not(figure) {
		position: absolute;
		inset-inline: 0;
		margin: 0;
		padding: 8px 12px;
		background: rgba(255, 255, 255, 0.9);
		color: var(--wp--preset--color--black);
		opacity: 0;
		transition: opacity 0.3s;
		pointer-events: none;
	}

	:where(body:not(.editor-styles-wrapper)) .is-style-banner > :not(figure):first-of-type {
		top: 10%;
	}

	:where(body:not(.editor-styles-wrapper)) .is-style-banner:hover > :not(figure),
	:where(body:not(.editor-styles-wrapper)) .is-style-banner:focus-within > :not(figure) {
		opacity: 1;
	}

	:where(body:not(.editor-styles-wrapper)) .is-style-banner:hover figure img {
		filter: blur(3px) opacity(0.35);
	}
}

/* Old content may name the font "antonio-bold" (Use Any Font plugin): same file, so it never falls back to a serif. */
@font-face {
	font-family: "antonio-bold";
	src: url("assets/fonts/antonio-bold.woff2") format("woff2");
	font-display: swap;
}

/* Block style: List "Spaced" — 20px between items (original lists made of paragraphs). */
.wp-block-list.is-style-spaced > li {
	margin-bottom: 20px;
}

/* Header: Facebook / Instagram menu items show the original line icons before their label. */
:is(.site-nav, .mobile-menu-nav) :is(.menu-icon-facebook, .menu-icon-instagram) > a::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.15em;
	vertical-align: -0.12em;
	background: currentColor;
	-webkit-mask: var(--selfmaid-icon) center / contain no-repeat;
	mask: var(--selfmaid-icon) center / contain no-repeat;
}

:is(.site-nav, .mobile-menu-nav) .menu-icon-facebook > a::before {
	--selfmaid-icon: url("assets/icons/facebook-line.svg");
}

:is(.site-nav, .mobile-menu-nav) .menu-icon-instagram > a::before {
	--selfmaid-icon: url("assets/icons/instagram-line.svg");
}

/* Block style: "Marker (box)" — the large yellow box behind a title (original "box" highlight image). */
.is-style-marker-box {
	z-index: 0;
	isolation: isolate;
	width: fit-content;
}

.is-style-marker-box::before {
	content: "";
	position: absolute;
	z-index: -1;
	background: var(--wp--preset--color--yellow);
	left: 0;
	right: -1em;
	top: 0;
	bottom: -0.65em;
	pointer-events: none;
}

.has-text-align-center.is-style-marker-box {
	margin-inline: auto;
}

/* Mobile menu (template part "Mobile menu"): submenus open on tap and expand inline (instead of floating dropdowns). */
.mobile-menu-nav .wp-block-navigation-item {
	width: 100%;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}

.mobile-menu-nav .wp-block-navigation-item__content {
	padding: 12px 0;
}

.mobile-menu-nav .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	border: 0 !important;
	box-shadow: none;
	padding-left: 1.25em !important;
	background: transparent !important;
}

.mobile-menu-nav .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none !important;
}

.mobile-menu-nav .wp-block-navigation__submenu-icon {
	margin-left: auto;
	width: 1.2em;
	height: 1.2em;
}

/* Mobile / tablet menu: native Details block ("Menü") opening a panel below the header. */
.site-header .mobile-menu {
	margin: 0;
	background: none;
	border: 0;
}

.site-header .mobile-menu > summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--antonio);
	font-size: 0;            /* the word stays for screen readers; the icon is shown */
	width: 32px;
	height: 32px;
	background: linear-gradient(currentColor 0 0) center 8px / 24px 3px no-repeat,
		linear-gradient(currentColor 0 0) center 15px / 24px 3px no-repeat,
		linear-gradient(currentColor 0 0) center 22px / 24px 3px no-repeat;
}

.site-header .mobile-menu > summary::-webkit-details-marker {
	display: none;
}

.site-header .mobile-menu[open] > summary {
	background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%) center / 24px 24px no-repeat,
		linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%) center / 24px 24px no-repeat;
}

.site-header .mobile-menu > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-header .mobile-menu[open] > .mobile-menu-nav {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 100%);
	overflow-y: auto;
	padding: 8px 5vw 24px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.site-header {
	position: relative;
}

/* Block style: "Justified" (paragraphs) — core's text alignment has no "justify" for paragraphs. */
.is-style-justify {
	text-align: justify;
}

/* Bold text: same weight as the original theme (OceanWP: 600). */
b,
strong {
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Per-device column widths (Elementor "column width" on tablet / phone).
 * Columns block with class "has-device-widths"; each column gets e.g. "phone-w-50" or
 * "tablet-w-70" (Advanced → Additional CSS class). Columns without a phone width are full width on phones.
 * ------------------------------------------------------------------ */
@media (width <= 767px) {
	.wp-block-columns.has-device-widths {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.has-device-widths > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-2 {
		flex-basis: 2% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-3 {
		flex-basis: 3% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-5 {
		flex-basis: 5% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-10 {
		flex-basis: 10% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-15 {
		flex-basis: 15% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-20 {
		flex-basis: 20% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-25 {
		flex-basis: 25% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-30 {
		flex-basis: 30% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-33 {
		flex-basis: 33% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-40 {
		flex-basis: 40% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-50 {
		flex-basis: 50% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-60 {
		flex-basis: 60% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-67 {
		flex-basis: 67% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-70 {
		flex-basis: 70% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-75 {
		flex-basis: 75% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-80 {
		flex-basis: 80% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-85 {
		flex-basis: 85% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-90 {
		flex-basis: 90% !important;
	}

	.wp-block-columns.has-device-widths > .phone-w-100 {
		flex-basis: 100% !important;
	}
}

@media (768px <= width <= 1024px) {

	.wp-block-columns.has-device-widths > .tablet-w-2 {
		flex-basis: 2% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-3 {
		flex-basis: 3% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-5 {
		flex-basis: 5% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-10 {
		flex-basis: 10% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-15 {
		flex-basis: 15% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-20 {
		flex-basis: 20% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-25 {
		flex-basis: 25% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-30 {
		flex-basis: 30% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-33 {
		flex-basis: 33% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-40 {
		flex-basis: 40% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-50 {
		flex-basis: 50% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-60 {
		flex-basis: 60% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-67 {
		flex-basis: 67% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-70 {
		flex-basis: 70% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-75 {
		flex-basis: 75% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-80 {
		flex-basis: 80% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-85 {
		flex-basis: 85% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-90 {
		flex-basis: 90% !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.has-device-widths > .tablet-w-100 {
		flex-basis: 100% !important;
		flex-grow: 0 !important;
	}
}

/* Images with a % width (from Elementor): the % refers to the column, as in the original.
 * Core shrinks aligned figures to their content (table/float), which would make the % tiny. */
.wp-block-image:is(.aligncenter, .alignleft, .alignright):has(> img[style*="%"], > a > img[style*="%"]) {
	display: block;
	float: none;
	margin-inline: 0;
}

.wp-block-image.aligncenter:has(> img[style*="%"], > a > img[style*="%"]) {
	text-align: center;
}

.wp-block-image.alignright:has(> img[style*="%"], > a > img[style*="%"]) {
	text-align: right;
}

/* List indent as in the original theme (OceanWP: 20px; browsers default to 40px). Block padding still overrides. */
:where(ul.wp-block-list, ol.wp-block-list) {
	padding-inline-start: 20px;
}

/* Column widths include the column padding (as in the original), so 30% + 70% stays exactly 30/70. */
.wp-block-columns > .wp-block-column {
	box-sizing: border-box;
}

/* A last, incomplete gallery row keeps the column width (as in the original) instead of stretching. */
body .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

/* Gallery captions below the image (as in the original), not overlaid on it. */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption) {
	flex-direction: column;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption {
	position: static;
	max-height: none;
	overflow: visible;
	padding: 8px 10px;
	background: none;
	color: inherit;
	text-shadow: none;
	text-align: center;
}

/* A text size chosen for the gallery (its size class) applies to the captions, at line height 1.5. */
.wp-block-gallery.has-nested-images[class*="-font-size"] figure.wp-block-image figcaption.wp-element-caption {
	font-size: inherit;
	line-height: 1.5;
}

/* Image wider than its column through negative side margins (Elementor "overhang"): centred in its widened box. */
.wp-block-image.is-overhang {
	text-align: center;
}

/* Counter numbers stay on one line (as in the original), even where the column is narrow. */
.is-counter-number {
	white-space: nowrap;
}

/* As the original theme: quotes lose their side indent on small phones. */
@media (max-width: 480px) {
	.wp-block-quote {
		margin-left: 0;
		margin-right: 0;
	}
}

/* As the original: fixed ("parallax") backgrounds only on large screens; tablets and phones scroll normally. */
@media (max-width: 1024px) {
	.wp-block-cover.has-parallax,
	.wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
	}
}