/*
Theme Name: Dansk Elefantgræs Forening
Theme URI: https://elefantgræs.nu
Author: Maibritt Rittermann
Description: Selvstændigt blok-tema til Dansk Elefantgræs Forening. Farver, fonte og layout styres fra theme.json.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dansk-elefantgraes
*/

/* Det meste af designet ligger i theme.json. Her kun det, theme.json ikke kan udtrykke. */

/* Synligt fokus for tastaturbrugere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--lilla);
	outline-offset: 3px;
}

/* Logoet i headeren: bredden styres af Site Logo-blokken, men det må ikke presse menuen ud på små skærme */
.deg-brand .wp-block-site-logo img {
	max-width: min(100%, 60vw);
	height: auto;
}

/* Tidslinje for kommende arrangementer */
.deg-tidslinje {
	border-left: 3px solid var(--wp--preset--color--lysegroen);
	padding-left: var(--wp--preset--spacing--40);
}
.deg-tidslinje > .wp-block-group {
	position: relative;
}
.deg-tidslinje > .wp-block-group::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--40) - 9.5px);
	top: 0.45em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--lysegroen);
	border: 3px solid var(--wp--preset--color--base);
}

/* Kort med ensartet højde */
.deg-kort {
	height: 100%;
}

/* Overskrifter må ikke knække midt i lange danske sammensatte ord på mobil */
h1, h2, h3 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Medlemsknappen i headeren skjules på små skærme, hvor menuen fylder.
   Skal vægte højere end WordPress' .wp-block-buttons.is-layout-flex { display: flex }. */
@media (max-width: 781px) {
	header .wp-block-buttons.deg-header-knap {
		display: none !important;
	}
}

/* Hero: på smalle skærme står teksten over hele billedet, så overlayet gøres jævnt mørkt */
@media (max-width: 781px) {
	.deg-hero .wp-block-cover__background {
		background: rgba(48, 51, 46, 0.72) !important;
	}
}

/* Genveje i footeren uden punkttegn */
.deg-genveje {
	list-style: none;
}

/* Bestyrelse og kontaktpersoner: ensartede, runde portrætter i gråtone */
.deg-personer {
	gap: var(--wp--preset--spacing--40);
}
.deg-person {
	text-align: center;
}
.deg-person > p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.deg-portraet,
.deg-initialer {
	width: 140px;
	height: 140px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	overflow: hidden;
}
.deg-portraet img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
}
.deg-initialer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--lys);
	color: var(--wp--preset--color--groen);
	font-family: var(--wp--preset--font-family--sofia-sans-extra-condensed);
	font-weight: 900;
	font-size: 2.75rem;
	line-height: 1;
}

/* Fold-ud-spørgsmål (FAQ) */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--lys);
	padding: 0.75rem 0;
}
.wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
}

/* Faktabokse: tabel uden kanter på lys baggrund */
.has-lys-background-color .wp-block-table td,
.has-lys-background-color .wp-block-table th {
	border: 0;
	border-bottom: 1px solid rgba(48, 51, 46, 0.15);
	padding: 0.5rem 0.75rem 0.5rem 0;
	vertical-align: top;
}
.has-lys-background-color .wp-block-table tr:last-child td {
	border-bottom: 0;
}
.has-lys-background-color .wp-block-table td:first-child {
	font-weight: 700;
	width: 38%;
}

/* Mobilmenu: venstrestillet i stedet for WordPress' højrestilling (arves fra headerens justering) */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

/* "Bliv medlem" i menuen vises kun i mobilmenuen (på store skærme står knappen ved siden af menuen) */
.wp-block-navigation .deg-kun-mobil {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .deg-kun-mobil {
	display: flex;
}
.wp-block-navigation__responsive-container.is-menu-open .deg-kun-mobil .wp-block-navigation-item__content {
	margin-top: 0.5rem;
	padding: 0.6rem 1.25rem !important;
	background: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--base) !important;
	border-radius: 4px;
	text-decoration: none;
}