/*
Theme Name: Toustrup Mark
Theme URI: https://toustrupmark.dk
Description: Twenty Twenty-Three child theme for toustrupmark.dk — the post-Avada theme. Recreates the live Avada design on plain core blocks: Raleway everywhere, brand green #4CAF50, sticky white header with the logo left and a green pill CTA in the nav, full-width page heroes, the "Læs mere:" section sidebar, and the light three-column footer. Load-bearing rules ported from Avada's hand-written custom CSS (full original kept in tm-wordpress/migration/reference/avada-custom-css.css).
Author: Toustrup Mark
Template: twentytwentythree
Version: 1.1.0
Requires at least: 6.1
Tested up to: 6.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: toustrupmark
*/

/* Fonts, palette, base typography, buttons and nav colors live in
 * theme.json (Raleway variable woff2 files are theme-bundled in
 * assets/fonts/ and declared via settings.typography fontFace — the
 * mechanism parent TT3 itself uses on WP 6.2). This file holds only
 * what theme.json cannot express. */

/* ---------------------------------------------------------------------
 * Header
 * Live reference: sticky white bar; logo image left, nav right, the
 * last Hovedmenu item ("Tilmeld Introdag") rendered as a green pill.
 * parts/header.html renders as the single <header> child of
 * .wp-site-blocks, so the sticky/background styling goes there (the
 * inner .tm-header group alone would have no room to stick).
 * ------------------------------------------------------------------ */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tm-header {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.tm-header .tm-logo img {
	display: block;
	height: 44px;
	width: auto;
}

/* Nav CTA: "Tilmeld Introdag" is a normal Hovedmenu item, styled into
 * the live site's green pill via its href (covers both
 * wp-block-navigation-item anchor markups — plain and custom-link). */
.wp-block-navigation a[href*="introdag"] {
	background-color: var(--wp--preset--color--primary);
	border-radius: 25px;
	color: var(--wp--preset--color--base);
	font-weight: 700;
	padding: 13px 29px;
	font-size: 14px;
}

.wp-block-navigation a[href*="introdag"]:hover,
.wp-block-navigation a[href*="introdag"]:focus {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Page heroes
 * Live reference: full-width image band (~430px) opening nearly every
 * page, white 800-weight title + optional white bold subtitle,
 * vertically centered, soft text shadow. The converter emits these as
 * alignfull core/cover blocks containing h1.tm-hero-title and
 * p.tm-hero-sub.
 * ------------------------------------------------------------------ */
.wp-block-cover:has(.tm-hero-title) {
	min-height: 430px; /* safety net; an inline min-height on the cover wins */
}

.wp-block-cover .tm-hero-title {
	color: #fff;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.15;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.wp-block-cover .tm-hero-sub {
	color: #fff;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Heroes sit flush under the sticky header (templates render <main>
 * with no top margin); pages that do NOT open with a hero get the
 * breathing room back on their first block. */
main.wp-block-group > .wp-block-post-content > :first-child:not(.wp-block-cover) {
	margin-top: var(--wp--preset--spacing--50);
}

main.wp-block-group {
	/* kill the parent's 1.5rem blockGap margin so alignfull heroes sit
	   flush under the sticky header */
	margin-block-start: 0;
	margin-bottom: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------------
 * Section sidebar ("Læs mere:")
 * Provenance: fusion_options.custom_css section 7 "Sidemenu på
 * artikelsider" — plain vertical list, resting gray links, brand green
 * on hover/current, 0.1s transition. Restored to the live look (the
 * interim pill-strip experiment is gone). Markup contract with the
 * converter: core/columns 70/30; the sidebar column holds a
 * core/group.tm-sidebar wrapping ONLY the synced pattern
 * group.sidemenu (a core/list of links). The "Læs mere:" label is
 * generated HERE via ::before — same mechanism as live (Avada
 * custom_css .sidemenu::before). functions.php stamps
 * aria-current="page" at render time.
 * ------------------------------------------------------------------ */
.tm-sidebar .sidemenu::before {
	/* "Læs mere:" label — CSS-generated exactly as on live */
	content: "Læs mere:";
	display: block;
	color: var(--wp--preset--color--heading);
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.6em;
}

.sidemenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidemenu li {
	margin: 0 0 0.65em;
	padding: 0;
}

.sidemenu a {
	color: #616161;
	font-weight: 700; /* was: .sidemenu > li */
	text-decoration: none;
	transition: color 0.1s; /* was: .sidemenu > li */
}

.sidemenu a:hover,
.sidemenu a:focus,
.sidemenu .current-menu-item a,
.sidemenu a[aria-current="page"] {
	/* was: .sidemenu > .current-menu-item > a { color: #4caf50 } */
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------
 * Notice callout (.tm-notice)
 * Provenance: fusion_options.custom_css section 10 "Alert"
 * (.fusion-alert: 8px padding, 3px radius, 16px text, no shadow).
 * Replaces [fusion_alert] — the converter maps it to a paragraph with
 * this class. Kept subtle: small radius, brand-green edge, tertiary bg.
 * ------------------------------------------------------------------ */
.tm-notice {
	background-color: var(--wp--preset--color--tertiary);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 3px;
	font-size: 1rem;
	padding: 0.75em 1em;
}

/* ---------------------------------------------------------------------
 * Footer
 * Live reference: light #FEFEFE band, gray #616161 text, #333 column
 * headings, slim bottom bar with Privatliv | Cookies and the copyright
 * line. Background color comes from the "footer" palette preset in
 * parts/footer.html; this styles the text inside.
 * ------------------------------------------------------------------ */
.tm-footer {
	color: #616161;
	font-size: 0.95rem;
}

.tm-footer h2 {
	color: var(--wp--preset--color--heading);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.75em;
}

.tm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tm-footer li {
	margin: 0 0 0.5em;
	padding: 0;
}

.tm-footer a {
	color: #616161;
	text-decoration: none;
}

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

.tm-footer .tm-footer-bar {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * Forms — site-wide (Contact Form 7, Mailchimp for WP, and any other
 * front-end form). Avada shipped comprehensive form CSS that died with
 * the theme; these rules restore the live look, tokens sampled from the
 * live site 2026-08-08: inputs ~483px max, padding 8/15, 1px
 * rgba(10,10,10,.14) border, 3px radius, 16px text; submit = the brand
 * green pill (13px 29px, 700/14px), same as .wp-element-button.
 * ------------------------------------------------------------------ */
.wp-site-blocks form input[type="text"],
.wp-site-blocks form input[type="email"],
.wp-site-blocks form input[type="tel"],
.wp-site-blocks form input[type="url"],
.wp-site-blocks form input[type="number"],
.wp-site-blocks form input[type="date"],
.wp-site-blocks form select,
.wp-site-blocks form textarea {
	display: inline-block;
	width: 100%;
	max-width: 483px;
	padding: 8px 15px;
	border: 1px solid rgba(10, 10, 10, 0.14);
	border-radius: 3px;
	background: #fff;
	color: rgba(0, 0, 0, 0.7);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}

.wp-site-blocks form select {
	width: auto;
	min-width: 90px;
}

.wp-site-blocks form textarea {
	height: 150px;
	max-width: 640px;
}

.wp-site-blocks form input:focus,
.wp-site-blocks form select:focus,
.wp-site-blocks form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -1px;
	border-color: var(--wp--preset--color--primary);
}

/* Breathing room between form rows (CF7 wraps rows in <p>). */
.wp-site-blocks form p {
	margin-bottom: 1.1em;
}

/* Checkboxes/radios: brand accent + comfortable hit area. */
.wp-site-blocks form input[type="checkbox"],
.wp-site-blocks form input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	/* rem, not em: the input's own font-size is the browser's tiny native
	   control size, so em-based boxes rendered ~13px next to 20px text. */
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.45em;
	vertical-align: middle;
}

.wpcf7-list-item {
	margin: 0 1.4em 0.35em 0;
}

/* Submit buttons: the green pill, exactly like core buttons. */
.wp-site-blocks form input[type="submit"],
.wp-site-blocks form button[type="submit"] {
	display: inline-block;
	padding: 13px 29px;
	border: 0;
	border-radius: 25px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.1s ease-in-out;
}

.wp-site-blocks form input[type="submit"]:hover,
.wp-site-blocks form input[type="submit"]:focus,
.wp-site-blocks form button[type="submit"]:hover,
.wp-site-blocks form button[type="submit"]:focus {
	background: #3d8b40;
}

/* CF7 validation states keep their meaning but drop the harsh default. */
.wpcf7-not-valid-tip {
	color: #b32d2e;
	font-size: 0.85em;
	margin-top: 0.25em;
}
.wpcf7 form .wpcf7-response-output {
	border-color: var(--wp--preset--color--primary);
	border-radius: 3px;
	padding: 0.7em 1em;
	margin: 1.5em 0 0;
}

/* Stack labels above their inputs (uneven inline label widths made the
 * fields ragged). Checkbox/radio option labels stay inline. */
.wp-site-blocks form label {
	display: block;
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.3em;
}

.wpcf7-list-item label,
.wp-site-blocks form label:has(> input[type="checkbox"]),
.wp-site-blocks form label:has(> input[type="radio"]) {
	display: inline-block;
	font-weight: 400;
}

/* Footer columns: equalize the gap under each heading — the address
 * paragraph and the link lists inherit different top margins, which made
 * the Kontakt os column look lower than its neighbours. */
.tm-footer h2 {
	margin: 0 0 0.9em;
}

.tm-footer .wp-block-column > p,
.tm-footer .wp-block-column > ul {
	margin-block-start: 0;
}

/* Front-page sections: breathing room between the wide bands, centered
 * tile captions with the whole tile clickable. */
.tm-section {
	margin-top: var(--wp--preset--spacing--60);
}

.tm-tiles .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.tm-tiles h3 {
	font-size: 1.05rem;
	margin: 0.6em 0 0;
}

.tm-tiles h3 a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.tm-tiles h3 a:hover,
.tm-tiles h3 a:focus {
	color: var(--wp--preset--color--primary);
}

/* The nav block's generated link-color rule outranks the pill rule above —
 * pin the CTA text to white with header-scoped specificity. */
.tm-header .wp-block-navigation a[href*="introdag"],
.tm-header .wp-block-navigation a[href*="introdag"]:hover,
.tm-header .wp-block-navigation a[href*="introdag"]:focus,
.tm-header .wp-block-navigation a[href*="introdag"] .wp-block-navigation-item__label {
	color: #fff;
}

/* Turnstile: the plugin emits a spacer <br> after the widget which stacks
 * with paragraph margins into a huge gap before the submit button. */
.wp-site-blocks form br[class^="cf-turnstile-br"],
.wp-site-blocks form br[class*=" cf-turnstile-br"] {
	display: none;
}

.wp-site-blocks form .cf-turnstile {
	margin: 0 0 1.1em !important;
}