/**
 * Intro theme fixes (TranebjergIS, 2026-07).
 * Loaded site-wide after style.css.
 */

/* --- Fixed-header overlap: push content below the 73px fixed header on pages
       that have no hero banner (i.e. everything except the front page). --- */
body:not(.home) .site-content {
	padding-top: 100px;
}
/* a touch more room when the WP admin bar is showing (logged-in admins) */
body.admin-bar:not(.home) .site-content {
	padding-top: 132px;
}

/* --- Anchored scrolling: make in-page jumps stop below the fixed header
       instead of hiding the section title under it. --- */
:target,
#referater, #kalender, #regnskab,
[id^="pg-11-"] {
	scroll-margin-top: 90px;
}
html {
	scroll-behavior: smooth;
}

/* --- #4: bring the front-page KALENDER band into the gold design system
       (was coral #ff7d65, which clashed with the gold palette). --- */
.panel-row-style-for-11-2,
#pg-11-2 > .panel-row-style {
	background-color: #f6edcb !important; /* light gold tint, matches the #f2d25b accent family */
}

/* --- #4: cohesive section/page headings on inner pages, echoing the
       front-page section headings (gold underline accent). --- */
body:not(.home) .entry-title,
body:not(.home) .page-title,
body:not(.home) .em-item-title,
body:not(.home) #content > .row > h2:first-child {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 3px solid #f2d25b;
	margin-bottom: 18px;
}

/* ==========================================================================
   Inner-page styling pass (2026-07): tighter spacing, member directory table,
   and fixes for the misleading hover + the logo background.
   ========================================================================== */

/* #19: trim the gap under the fixed header and drop empty title blocks. */
body:not(.home) .site-content { padding-top: 88px; }
body.admin-bar:not(.home) .site-content { padding-top: 120px; }
body:not(.home) .entry-header { margin: 0 0 14px; padding: 0; }
body:not(.home) .entry-title:empty,
body:not(.home) .entry-header:empty { display: none; }

/* #17: stop non-link titles going gold on hover (looked clickable, wasn't). */
.single .hentry:hover .entry-title,
.page .hentry:hover .entry-title,
.single-event .em-item:hover .em-item-title { color: #333; }

/* #21: the logo is now transparent; keep it readable on the dark header with a
   clean white pill, while the login page shows it background-free. */
.header-fixed .site-logo {
	background: #fff;
	padding: 6px 12px;
	border-radius: 6px;
}

/* #14 + #18: member-directory / content tables on inner pages. */
body:not(.home) .entry-content table,
body:not(.home) .tis-users {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 28px;
	font-size: 15px;
}
body:not(.home) .entry-content th,
body:not(.home) .tis-users th {
	text-align: left;
	font-weight: 700;
	color: #333;
	padding: 12px 16px;
	border-bottom: 3px solid #f2d25b;
	white-space: nowrap;
}
body:not(.home) .entry-content td,
body:not(.home) .tis-users td {
	padding: 12px 16px;
	border-bottom: 1px solid #eee;
	color: #444;
}
body:not(.home) .entry-content tr:hover td,
body:not(.home) .tis-users tbody tr:hover td { background: #faf6e6; }
.tis-users td, .tis-users td a { color: #333; }
.tis-users td a { word-break: break-word; }

/* #18 / #5: comfortable reading rhythm on inner pages. */
body:not(.home) .entry-content { line-height: 1.7; }
/* Force readable dark body text (the theme's default content colour is a low-contrast
   grey that made these long documents look washed-out/dull). */
body:not(.home) .entry-content,
body:not(.home) .entry-content p,
body:not(.home) .entry-content li,
body:not(.home) .entry-content td,
body:not(.home) .entry-content span { color: #3a3a3a; }
body:not(.home) .entry-content p  { margin: 0 0 16px; }

/* Section headings on content pages (Vedtægter, Arbejdsopgaver, …) — gold-underlined,
   clearly separated, so long documents read as tidy sections instead of a grey wall. */
body:not(.home) .entry-content h2 {
	color: #2b2b2b;
	font-weight: 700;
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f2d25b;
}
body:not(.home) .entry-content h3 {
	color: #2b2b2b;
	font-weight: 700;
	margin: 26px 0 10px;
}
body:not(.home) .entry-content > h2:first-child,
body:not(.home) .entry-content > h3:first-child { margin-top: 6px; }

/* Custom gold bullets + comfortable spacing for the many checklists on these pages. */
body:not(.home) .entry-content ul { list-style: none; margin: 0 0 22px; padding: 0; }
body:not(.home) .entry-content ul > li {
	position: relative;
	padding: 2px 0 2px 26px;
	margin: 0 0 8px;
	line-height: 1.6;
}
body:not(.home) .entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 11px;
	width: 8px;
	height: 8px;
	background: #f2d25b;
	border-radius: 50%;
}
body:not(.home) .entry-content ol { margin: 0 0 22px; padding-left: 22px; }
body:not(.home) .entry-content ol > li { margin: 0 0 8px; padding-left: 6px; line-height: 1.6; }
body:not(.home) .entry-content ol > li::marker { color: #b8a24a; font-weight: 700; }

/* Inline bold "mini sub-headings" that these pages use (e.g. "Traktor den store:",
   "§ 1") — give them a touch more presence in the sea of text. */
body:not(.home) .entry-content strong,
body:not(.home) .entry-content b { color: #2b2b2b; }
body:not(.home) .entry-content a { color: #a8871f; }
body:not(.home) .entry-content a:hover { color: #7d6417; }


/* Collapse residual top spacing so inner content sits just under the header. */
body:not(.home) #primary,
body:not(.home) #main,
body:not(.home) .content-area,
body:not(.home) .site-content > .row,
body:not(.home) #main > table:first-child,
body:not(.home) .entry-content > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* #20: Referater (meeting minutes) house style — see CLAUDE.md section 5. */
.entry-content .referat-meta {
	background: #f6edcb;
	border-left: 4px solid #f2d25b;
	padding: 14px 20px;
	margin: 0 0 26px;
	border-radius: 2px;
}
.entry-content .referat-meta p { margin: 4px 0; color: #333; }
.single .entry-content h3 {
	margin: 26px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
	color: #333;
}

/* Prev/next navigation on single events & referater — was plain text; make it
   two on-brand cards ("Forrige"/"Næste" label + title) with a gold hover. */
.post-navigation { margin: 40px 0 8px; padding-top: 22px; border-top: 1px solid #eee; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; }
.post-navigation .nav-previous, .post-navigation .nav-next { flex: 1 1 0; min-width: 0; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a {
	display: block;
	padding: 12px 18px;
	border: 1px solid #e6e0c8;
	border-radius: 6px;
	background: #fff;
	color: #2b2b2b;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.post-navigation a:hover {
	background: #faf6e6;
	border-color: #f2d25b;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
	color: #111;
}
/* Small gold uppercase label above each title. */
.post-navigation .nav-previous a::before,
.post-navigation .nav-next a::before {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #b8a24a;
	margin-bottom: 3px;
}
.post-navigation .nav-previous a::before { content: "Forrige"; }
.post-navigation .nav-next a::before { content: "Næste"; }
.post-navigation .meta-nav { color: #b8a24a; font-weight: 700; }
.post-navigation a:hover .meta-nav { color: #d9b93a; }

/* Front-page "Referater" recent-posts widget: turn the plain bullet list into a
   clean, on-brand list of dated rows (gold date pills, hover accent). */
.widget_recent_entries ul { list-style: none; margin: 0; padding: 0; }
.widget_recent_entries li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 13px 16px 13px 16px;
	border-bottom: 1px solid #ececec;
	border-left: 3px solid transparent;
	transition: background .15s ease, border-color .15s ease, padding-left .15s ease;
}
.widget_recent_entries li:first-child { border-top: 1px solid #ececec; }
.widget_recent_entries li:hover {
	background: #faf6e6;
	border-left-color: #f2d25b;
	padding-left: 20px;
}
.widget_recent_entries li a {
	color: #2b2b2b;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}
.widget_recent_entries li a:hover { color: #111; }
.widget_recent_entries .post-date {
	flex: 0 0 auto;
	color: #7d7333;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	background: #f6edcb;
	border-radius: 20px;
	padding: 4px 12px;
	white-space: nowrap;
}

/* #16 + #2: calendar add-event "+" and subscribe buttons, positioned at the
   top-right of the calendar (outside EM's AJAX nav so their clicks work and
   they survive month changes). */
.tis-cal-actions {
	position: absolute;
	top: 6px;
	right: 4px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.tis-cal-actions .sowb-button { margin: 0; font-size: 26px !important; line-height: 1; padding: 2px; }
.tis-cal-actions .sowb-button .sow-icon-fontawesome,
.tis-cal-actions .sowb-button i,
.tis-cal-actions .sowb-button svg {
	font-size: 26px !important;
	width: 26px !important;
	height: 26px !important;
}

/* #1: keep the Regnskab section visible on mobile (it had a mobile_displayN
   class hiding it) and let its wide table scroll horizontally. */
@media (max-width: 900px) {
	/* Row 6 is the Regnskab section; its cell/widgets carry mobile_displayN. */
	[class*="for-11-6"].mobile_displayN,
	[class*="for-11-6"] .mobile_displayN,
	.regnskab.mobile_displayN,
	.regnskab {
		display: block !important;
	}
	.regnskab table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Phone overflow guard: nothing should push the page wider than the screen
	   (e.g. stray non-breaking-space runs, wide media). Long words wrap. */
	html, body { overflow-x: hidden; }

	/* #2 mobile: the calendar +/subscribe buttons were absolutely positioned at the
	   top of the calendar box, which sits under the fixed header on phones. Flow them
	   as a centred toolbar BELOW the calendar instead (JS appends them last). */
	.tis-cal-actions {
		position: static !important;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40px;
		margin: 6px 0 2px;
		padding: 8px 0;
	}
	.tis-cal-actions .sowb-button { font-size: 32px !important; padding: 6px !important; }
	.tis-cal-actions .sowb-button .sow-icon-fontawesome,
	.tis-cal-actions .sowb-button i,
	.tis-cal-actions .sowb-button svg { font-size: 32px !important; width: 32px !important; height: 32px !important; }

	/* Front-page SiteOrigin rows: stack cells full-width so none overflow (the
	   regnskab cell sat side-by-side and pushed the page ~47px wide). The "stretch"
	   rows are display:flex, so cells must be told to stack in a column — otherwise
	   width:100% just squishes them side-by-side (which pushed the calendar ~20%
	   to the right). */
	.siteorigin-panels-stretch { flex-direction: column !important; }
	.panel-grid-cell { width: 100% !important; float: none !important; margin-right: 0 !important; }
	.panel-grid-cell .textwidget, .panel-grid-cell .so-widget-tinymce { max-width: 100%; overflow-x: auto; }
	body:not(.home) .entry-content { overflow-wrap: break-word; word-break: break-word; }
	.entry-content img, .entry-content iframe, .entry-content video,
	.entry-content pre, .entry-content table { max-width: 100%; }

	/* Wide TablePress regnskab tables (front page + Regnskaber page): make the
	   table its own horizontal-scroll box instead of blowing out the page. */
	.tablepress-scroll-wrapper, .dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.entry-content table.tablepress, .regnskab .tablepress, .tablepress {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 13px;
	}
	.tablepress td, .tablepress th { white-space: nowrap; padding: 6px 9px; }

	/* #Brugere: stack the members table into readable "label: value" cards. */
	.tis-users { font-size: 15px; }
	.tis-users thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tis-users, .tis-users tbody, .tis-users tr, .tis-users td { display: block; width: auto; }
	.tis-users tr {
		margin: 0 0 16px;
		border: 1px solid #eee;
		border-left: 4px solid #f2d25b;
		border-radius: 4px;
		overflow: hidden;
	}
	.tis-users td {
		padding: 10px 14px;
		border: 0;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 14px;
	}
	.tis-users td:last-child { border-bottom: 0; }
	.tis-users td::before {
		content: attr(data-label);
		font-weight: 700;
		color: #333;
		flex: 0 0 auto;
	}
	.tis-users td a { text-align: right; word-break: break-all; }
	.tis-users td:empty { display: none; }

	/* Keep the prev/next event cards side by side (horizontal) on phones too —
	   "Forrige" on the left, "Næste" on the right — just tighter so both fit a
	   narrow screen. (Was flex-direction:column, which stacked them vertically.) */
	.post-navigation .nav-links { flex-direction: row; gap: 10px; }
	.post-navigation a { padding: 10px 12px; font-size: 14px; }
	.post-navigation .nav-previous a::before,
	.post-navigation .nav-next a::before { font-size: 10px; letter-spacing: .5px; }

	/* #5: footer nav (Vedtægter/Brugere/Arbejdsopgaver) — the theme floats these
	   in a fixed 30px-tall, max-content box that clips/cramps on mobile. Stack
	   them, centre them, and give proper tap targets. */
	#footer .footer-nav {
		width: 100% !important;
		height: auto !important;
		margin-bottom: 18px !important;
	}
	#footer .footer-nav ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
	#footer .footer-nav li {
		float: none !important;
		margin: 0 !important;
		width: auto;
	}
	#footer .footer-nav a {
		display: inline-block;
		padding: 10px 8px;
		font-size: 16px;
	}
	#footer { padding: 26px 16px; }
	#footer .to-top { bottom: 16px; right: 16px; }
}

/* ── Front-page quick-links bar (Brugere / Vedtægter / Arbejdsopgaver; links rewritten
   server-side in functions.php). A slim gold #f2d25b band flush between the hero photo
   and the KALENDER band, with dark #222 buttons (cream #f6edcb text, 2px radius,
   hover → white); 15px labels.

   The SiteOrigin widget wrappers carry legacy theme classes ("button dark solid rounded
   topknap mobile_displayN") from the original overlaid-on-photo design: .button.dark.solid
   painted each wrapper as a dark rounded plate around the button, plus margin 60px 10px 15px,
   and foundation.css overlays the row onto the photo (margin-top:-411px, margin-bottom:200px
   !important) with 40px generated row padding. All neutralized below.

   Breakpoints: .mobile_displayN hides the buttons ≤900px, so the painted bar is ≥901px only;
   at 783–900px the row is flattened to zero height (nothing paints); ≤782px keeps the theme's
   original mobile layout untouched (front page leads with KALENDER, links live in the footer). ── */
@media (min-width: 783px) {
	#pg-11-1 {
		margin: 0 calc(50% - 50vw) !important;  /* cancel the -411px overlay; full-bleed strip */
		background: transparent;
		padding: 0 !important;
		box-shadow: none;
	}
	#pg-11-1 .panel-row-style {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center !important;
		align-items: center;
		gap: 20px;
		max-width: 1080px;
		margin: 0 auto !important;
		padding: 0 !important;                  /* kill the generated 40px row padding */
	}
	#pg-11-1 .panel-grid-cell {
		width: auto !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		max-width: none !important;
	}
	#pg-11-1 .panel-grid-cell .so-panel,
	#pg-11-1 .so-widget-sow-button { margin: 0 !important; }
	/* flatten the legacy "button dark solid rounded" plate to an invisible wrapper */
	#pg-11-1 .panel-widget-style {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}
/* Surface: gold band with dark buttons (user's pick 2026-07-11 over the dark-#222-bar
   variant; inverts the usual gold-button-on-dark pairing, so this row is deliberately
   the one place gold is a fill). */
@media (min-width: 901px) {
	#pg-11-1 {
		background: #f2d25b;
		padding: 15px 16px !important;
	}
}
#pg-11-1 .sowb-button {
	display: inline-block;
	background: #222 !important;
	color: #f6edcb !important;
	font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 15px !important;
	line-height: 1.2 !important;
	padding: 14px 32px !important;
	min-width: 160px;
	text-align: center;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease !important;
}
#pg-11-1 .sowb-button span { color: inherit !important; font-weight: inherit !important; }
#pg-11-1 .sowb-button:hover,
#pg-11-1 .sowb-button:focus {
	background: #fff !important;
	color: #222 !important;
	box-shadow: none !important;
}
#pg-11-1 .sowb-button:focus-visible {
	outline: 2px solid #222;
	outline-offset: 2px;
}

/* ===== Other buttons aligned to the quick-links bar identity (2026-07-12) ===== */

/* #2: "Se alle regnskaber" CTA on the front page (links to the Regnskaber page):
   dark #222 fill + cream text + white hover, matching the hero quick-links bar.
   The SiteOrigin widget wrapper carries the legacy "button dark solid rounded" classes,
   which paint it as a full-width #333 plate (the old look); neutralise it so only the
   clean centred pill shows — same wrapper fix as the hero bar. */
#pl-11 .panel-widget-style:has(a.sowb-button[href*="/regnskaber/"]) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	text-align: center;
}
#pl-11 a.sowb-button[href*="/regnskaber/"] {
	display: inline-block;
	background: #222 !important;
	color: #f6edcb !important;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700 !important;
	padding: 14px 34px !important;
	min-width: 200px;
	text-align: center;
	transition: background-color .2s ease, color .2s ease !important;
}
#pl-11 a.sowb-button[href*="/regnskaber/"] span { color: inherit !important; font-weight: inherit !important; }
#pl-11 a.sowb-button[href*="/regnskaber/"]:hover,
#pl-11 a.sowb-button[href*="/regnskaber/"]:focus {
	background: #fff !important;
	color: #222 !important;
	box-shadow: none !important;
}

/* #1: calendar action buttons (add-event "+" and subscribe RSS) at the top-right of
   the KALENDER band. Give them the bar's colour scheme + hover and make the two
   consistent: dark #222 circular icon buttons with cream icons, hover -> white disc
   + dark icon. (Overrides the earlier plain-icon sizing above; later rule wins.) */
.tis-cal-actions .sowb-button {
	width: 42px !important;
	height: 42px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #222 !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 1 !important;
	transition: background-color .2s ease !important;
}
.tis-cal-actions .sowb-button span { display: inline-flex; align-items: center; justify-content: center; }
.tis-cal-actions .sowb-button .sow-icon-fontawesome,
.tis-cal-actions .sowb-button i,
.tis-cal-actions .sowb-button svg {
	color: #f6edcb !important;
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
}
.tis-cal-actions .sowb-button svg path,
.tis-cal-actions .sowb-button svg use { fill: #f6edcb !important; }
.tis-cal-actions .sowb-button:hover,
.tis-cal-actions .sowb-button:focus { background: #fff !important; }
.tis-cal-actions .sowb-button:hover .sow-icon-fontawesome,
.tis-cal-actions .sowb-button:focus .sow-icon-fontawesome,
.tis-cal-actions .sowb-button:hover i,
.tis-cal-actions .sowb-button:hover svg { color: #222 !important; }
.tis-cal-actions .sowb-button:hover svg path,
.tis-cal-actions .sowb-button:hover svg use { fill: #222 !important; }

/* ===== Calendar "event booked" indicators → brand gold (2026-07-12) =====
   Events Manager marks a booked day with TWO default greens: the desktop event PILL
   (#a8d144, via the inline --event-background-color on .em-cal-event) and the MOBILE
   filled day-circle (.em-cal-day-date.colored, a separate #00d084). Recolour BOTH to
   gold #f2d25b with dark #222 text, matching the page's accent. Pure CSS (overrides the
   inline vars with !important) so it holds regardless of EM's option value or AJAX cache.
   Desktop's neutral grey date-rings were never green, so the mobile fill is size-scoped
   to avoid tinting them. */
.em.em-calendar .em-cal-event { --event-background-color: #f2d25b !important; --event-border-color: #e0b93f !important; }
.em.em-calendar .em-cal-event > div {
	background-color: #f2d25b !important;
	border-color: #e0b93f !important;
	color: #222 !important;
}
.em.em-calendar .em-cal-event > div a { color: #222 !important; }
.em.em-calendar .em-cal-day .ring { --date-border-color: #f2d25b !important; }
/* mobile / small calendar: the filled day-circle + its date number */
.em.em-calendar.size-small .em-cal-day-date.colored { background-color: #f2d25b !important; }
.em.em-calendar.size-small .em-cal-day-date.colored a,
.em.em-calendar.size-small .em-cal-day-date.colored .ring a { color: #222 !important; }
/* Neutralise EM's leftover green ring-border variables (the event colour #00d084 comes in
   as inline --date-border-color* vars driving the one-/two-event ring borders) so no green
   remains anywhere on a booked day. */
.em.em-calendar .em-cal-day-date.colored,
.em.em-calendar .em-cal-day-date.colored .ring,
.em.em-calendar .em-cal-day-date.colored .ring.one,
.em.em-calendar .em-cal-day-date.colored .ring.two {
	--date-border-color: #f2d25b !important;
	--date-border-color-top: #f2d25b !important;
	--date-border-color-right: #f2d25b !important;
	--date-border-color-bottom: #f2d25b !important;
	--date-border-color-left: #f2d25b !important;
}
.em.em-calendar .em-cal-day-date.colored a,
.em.em-calendar.size-small .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored a,
.em.em-calendar.size-medium .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored a,
.em.em-calendar.size-large .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored a {
	border-color: #f2d25b !important;
	border-width: 0 !important;
}

/* ===== Quick-links nav bar on MOBILE/tablet (2026-07-12) =====
   The bar (#pg-11-1) was desktop-only: its three buttons' wrappers carry .mobile_displayN
   (display:none ≤900px) and the row keeps the desktop -411px overlay margin, so on a phone
   it collapses to 0px and the links are unreachable (the footer copies were removed). Show
   it across the whole ≤900px range (exactly where the buttons are otherwise hidden, so no
   tablet dead-zone): un-hide the buttons, drop the overlay margin, and lay the three out as
   a full-bleed gold bar of equal-width dark pills — the same identity as desktop, just
   smaller text so three fit a narrow screen. */
@media (max-width: 900px) {
	#pg-11-1 {
		margin: 0px calc(50% - 50vw) !important;   /* cancel -411px overlay; full-bleed */
		margin-top: 15px !important;
		background: #f2d25b !important;
		padding: 8px 5px !important;             /* minimal edge padding → buttons span the width */
		box-shadow: none !important;
	}
	/* The .panel-row-style ALSO carries .mobile_displayN, so it must be turned into a
	   visible flex ROW here (and NOT caught by the block-forcing rule below, or it stacks). */
	#pg-11-1 .panel-row-style {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch;
		gap: 5px;                                /* only a small gap between the buttons */
		max-width: none;                         /* fill the full screen width */
		margin: 0 auto !important;
		padding: 0 !important;
	}
	#pg-11-1 .panel-grid-cell {
		flex: 1 1 0 !important;                  /* three EQUAL cells filling the row */
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;                   /* KILL the ~30px SiteOrigin cell padding that
		                                            shrank the content box to 64px and centred the pill */
		max-width: none !important;
		display: block !important;               /* plain block so the block <a> child fills it */
	}
	/* un-hide the per-button wrappers AND dissolve them with display:contents (they carry
	   .mobile_displayN, but target by .panel-widget-style/.so-panel/etc — NOT bare
	   .mobile_displayN, which would also hit .panel-row-style above and clobber its flex).
	   display:contents removes the wrappers' own boxes so the <a> is a direct BLOCK child of
	   the (block) cell and fills the full third — the nested wrappers otherwise shrink to
	   content (64px) and the long label overflows/gets cut off. */
	#pg-11-1 .so-panel,
	#pg-11-1 .panel-widget-style,
	#pg-11-1 .so-widget-sow-button,
	#pg-11-1 .ow-button-base {
		display: contents !important;
	}
	#pg-11-1 .sowb-button {
		display: block !important;               /* block child of the block cell → fills the full third */
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		padding: 11px 2px !important;
		font-size: 11px !important;
		letter-spacing: 0 !important;
	}
	/* Cut the big empty gap above KALENDER: it sat under three stacked mobile paddings meant to
	   clear the fixed header (stretch row 40px + cell 30px + .kalender 100px). The nav bar now
	   sits directly above KALENDER, so drop them to a small gap. NB: tis-fixes.js renames the
	   section to id="kalender" (so #pg-11-2 doesn't exist), and the cell keeps id #pgc-11-2-1. */
	#kalender,
	#kalender > .panel-row-style,
	#kalender .intro-stretch { padding-top: 6px !important; }
	#kalender .panel-grid-cell,
	#pgc-11-2-1 { padding-top: 0 !important; }
	/*.kalender { padding-top: 6px !important; }*/
}