/*
Theme Name: Hernád (Kadence child)
Theme URI: https://hernad.hu/
Description: Kadence child theme for Hernád Nagyközség. Hosts the "Hírmondó" editorial front page template and site-specific overrides, so the Kadence parent theme stays untouched and updatable.
Author: Hernád Nagyközség Önkormányzata
Template: kadence
Version: 1.0.0
Requires PHP: 8.0
Text Domain: kadence-hernad
*/

/* This file loads on EVERY page. The Hírmondó front page additionally loads
   assets/css/hirmondo.css, which is scoped to that template only. */

/* ---------------------------------------------------------------------------
   Sticky funding bar
   ---------------------------------------------------------------------------
   Replaces the two fixed corner badges that mu-plugin 096 used to pin to the
   bottom-left and bottom-right. That output was removed from 096 itself
   (original kept beside it as a .bak), so there is nothing left to hide here.

   Still needed: mu-plugin 098 reserves space for those badges with
   `body { padding-bottom: 185px !important }` (220/175 at other widths). It is
   left enabled because it also styles the Széchenyi project cards, so the
   padding is overridden below rather than the file disabled.
   --------------------------------------------------------------------------- */

.hernad-fundingbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid rgba(15, 23, 42, .12);
	box-shadow: 0 -2px 14px rgba(15, 23, 42, .08);
	/*
	 * NO backdrop-filter HERE. It used to carry `backdrop-filter: blur(8px)`,
	 * which cost real frame time and showed nothing.
	 *
	 * The bar's own background is `rgba(255,255,255,.97)` — 97% opaque. Only 3%
	 * of what is behind it reaches the eye, so blurring that 3% changes the
	 * rendered colour by a fraction of a percent: the effect was invisible. What
	 * it did do was force the compositor to snapshot and blur the backdrop behind
	 * a full-width `position: fixed` element, on every page of the site, every
	 * time anything moved.
	 *
	 * Found while chasing Total Blocking Time. Lighthouse's main-thread breakdown
	 * put 2,884 ms in "Style & Layout" against only 357 ms in "Script
	 * Evaluation" — the blocking here is rendering work, not JavaScript, which is
	 * the opposite of what the number is usually assumed to mean.
	 *
	 * If a frosted-glass look is ever wanted, lower the background alpha to
	 * around .75 first, or the blur is invisible again.
	 */
	padding: 8px 16px;
}

.hernad-fundingbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 46px;
	max-width: 1520px;
	margin: 0 auto;
}

/* Full colour and larger than the old badges. Height is the fixed dimension —
   the two logos have very different aspect ratios.

   `html body` prefix is not decoration: hirmondo.css sets
   `body.hm-page img { height: auto }` (0,1,2), which outranks a plain
   `.hernad-fundingbar img` (0,1,1) and blew the bar up to 355px tall on the
   front page while looking correct everywhere else. */
html body .hernad-fundingbar img {
	display: block;
	height: 100px;
	width: auto;
	max-width: 100%;
	filter: none;
	opacity: 1;
}

.hernad-fundingbar a {
	display: block;
	line-height: 0;
}

/* The bar floats over the page, so every page needs room to scroll clear of it.
   Measured height is 81px (64 logo + 8+8 padding + 1 border); 88 leaves a little
   air. Keep this in step with the logo height above, or the last line of a page
   ends up underneath the bar.

   `html body` + !important is required to beat mu-plugin 098's
   `body { padding-bottom: 185px !important }`, which reserved space for the
   removed corner badges and would otherwise leave ~100px of dead space. */
:root {
	--hernad-fundingbar-h: 124px;
}

html body {
	padding-bottom: var(--hernad-fundingbar-h) !important;
}

@media (max-width: 767px) {
	:root {
		--hernad-fundingbar-h: 68px;
	}

	.hernad-fundingbar {
		padding: 6px 12px;
	}

	/* Keep both logos on ONE row. Left to wrap, the wide Széchenyi Terv Plusz
	   lockup pushes the second logo to a second line and the bar grows to
	   ~137px — past the space reserved below, so it covers page content.

	   Height is chosen rather than capped by width: the two lockups together
	   measure about 6.2x their height, so at a 360px viewport
	   (6.2H + 14 gap + 24 padding <= 360) anything up to ~51px fits. 48px keeps
	   a margin and stays legible. A percentage max-width was tried first and is
	   wrong — it squeezed the wide logo down to 26px. */
	.hernad-fundingbar-inner {
		flex-wrap: nowrap;
		gap: 14px;
	}

	html body .hernad-fundingbar img {
		height: 48px;
		width: auto;
		max-width: none;
	}
}

/* Very narrow phones: same arithmetic, less room. */
@media (max-width: 360px) {
	:root {
		--hernad-fundingbar-h: 60px;
	}

	html body .hernad-fundingbar img {
		height: 40px;
	}
}

/* ---------------------------------------------------------------------------
   Széchenyi Terv Plusz cards — remove the dead space
   ---------------------------------------------------------------------------
   mu-plugin 096 puts `min-height: 290px` on every card while the content needs
   about 229px, and the "Megnyitás →" link has `margin-top: auto`, so the
   surplus collected as ~58px of blank card. Dropping the floor lets the cards
   size to their content; they still end up equal height because the grid
   stretches them, and the link still sits on the baseline of each card.

   `html body` prefix for the usual reason — the mu-plugin's inline <style>
   prints after this file.
   --------------------------------------------------------------------------- */

html body .hernad-sztp-footer-card {
	min-height: 0 !important;
}

/* ---------------------------------------------------------------------------
   Közérdekű elérhetőségek — pack the contact cards
   ---------------------------------------------------------------------------
   mu-plugin 062 lays the cards out with `display: grid` and two columns but
   never sets `align-items`, so every card stretched to the tallest one in its
   row: the MVM card — three phone numbers — was 786px tall because it sat
   beside the Semmelweis opening hours, and the page was mostly white space.

   `align-items: start` fixes the card heights but not the layout, because grid
   still aligns rows: a 1145px card leaves a 359px hole beside it. These entries
   are independent of one another and there is nothing to align across, so this
   drops grid for a multi-column flow, which packs each column as tightly as the
   content allows. Cards read down the first column and then the second, which
   is the right order for a directory.

   The mu-plugin is untouched. `html body` for the usual reason on this site —
   its inline <style> prints after this stylesheet, so a plain class selector
   would lose on source order.
   --------------------------------------------------------------------------- */

html body .hernad-contact-directory-shell {
	display: block;
	columns: 2;
	column-gap: 22px;
}

html body .hernad-contact-card {
	/* Never split a contact across a column break. */
	break-inside: avoid;
	margin: 0 0 22px;
}

/* The opening card (orvosi ügyelet) stays full width above the columns — it is
   the one entry everyone is looking for. `column-span` replaces the
   `grid-column: 1 / -1` the mu-plugin used, which means nothing outside grid. */
html body .hernad-contact-card:first-child {
	column-span: all;
	margin-bottom: 22px;
}

@media (max-width: 860px) {
	html body .hernad-contact-directory-shell {
		columns: 1;
	}

	html body .hernad-contact-card,
	html body .hernad-contact-card:first-child {
		margin-bottom: 18px;
	}
}

/* ---------------------------------------------------------------------------
   Post meta: the date, and nothing else
   ---------------------------------------------------------------------------
   Kadence prints "By <author> · <date>". On a municipal site the author is the
   office rather than a person, and the accounts these posts were imported under
   are login names — "stx", "pama" — which mean nothing to a reader. Several
   posts have no author attached at all and rendered a bare "By" followed by
   nothing.

   The date stays because it tells the reader whether a hirdetmény is current,
   which is the one piece of meta that matters here.
   --------------------------------------------------------------------------- */

.entry-meta .posted-by {
	display: none;
}

/* Where the post has been edited since publishing, Kadence prints BOTH dates —
   `entry-date published` and `updated` — which on 6 of the 19 entries on a
   single page rendered the same day twice over. Keep the later one, since
   "when was this last changed" is what a reader of a notice actually needs.

   Only fires when an `updated` sibling exists; when publish and modify are the
   same moment Kadence emits one <time class="published updated">, which has no
   sibling and is left alone. */
.entry-meta .posted-on time.published:has(+ time.updated) {
	display: none;
}

/* ---------------------------------------------------------------------------
   The featured image at the top of a news post
   ---------------------------------------------------------------------------
   mu-plugin 150 caps it with `max-height: min(50cqw, 70vh)`. On a 1900x1000
   screen that resolves to 527px, and because most of the council's photographs
   are portrait — phone photos of wreaths, plaques, notices — a 922x2048 image
   renders 237px wide inside a 1054px column. That is 409px of empty space down
   each side, and it pushes the headline off the first screen entirely.

   The header image now CROPS to fill the column, at the council's request, so
   there is no empty space beside a portrait photograph.

   The mechanism is a height ceiling plus `object-fit: cover` — NOT a forced
   aspect ratio. That distinction was found by testing: forcing 16:9 also
   applied to images that are already wide and short, and a 806x266 notice
   graphic was blown up 1.58x and cropped at the sides to fill a 16:9 box. With
   a ceiling instead, `height: auto` leaves such an image at its own proportions
   and only images TALLER than the ceiling are cropped — which is exactly the
   set that had the empty space.

   `object-position: center` keeps the middle of the frame. That is the right
   default for these photographs — wreaths, plaques, people at a ceremony are
   all centred by whoever took them — but it does mean a portrait photo loses
   its top and bottom. If a particular post ever crops badly, the fix is a
   better-composed featured image rather than a different rule.

   This overrides mu-plugin 150, which sets `object-fit: contain` and its own
   max-height; `html body` beats its (0,3,1) without touching that file.

   ON THE UPSCALING GUARD. That mu-plugin caps the width at the file's own
   width — `max-width: min(100%, var(--hernad-thumb-natural-width))` — with the
   comment "so it is never upscaled". That is a real concern and it is why the
   cap here is loosened rather than removed: the image may be stretched up to
   25% beyond its natural width, and no further.

   25% is chosen, not arbitrary. This post's photograph is 922px wide in a
   1054px column, which is a 14% stretch and invisible on a photograph; a
   featured image small enough that filling the column would mean more than
   25% is too small to headline an article, and letterboxes rather than turning
   to mush. Nothing is upscaled on a post whose image is already wide enough.
   --------------------------------------------------------------------------- */

html body .wp-site-blocks .post-thumbnail img.hernad-thumb-fit {
	width: 100%;
	height: auto;
	max-height: min(42vh, 430px);
	max-width: min( 100%, calc( var( --hernad-thumb-natural-width, 100% ) * 1.25 ) );
	object-fit: cover;
	object-position: center;
}

/* ---------------------------------------------------------------------------
   Long Hungarian words in headings must not be chopped mid-word
   ---------------------------------------------------------------------------
   On a 375px phone, /onkormanyzat/ rendered its title as

       Önkormányza
       t

   The mu-plugin heading (`h1.wp-block-heading.hernad-muni`) sets
   `word-break: break-word` at 37.5px inside a 263px container. "Önkormányzat"
   needs about 270px, and `break-word` — a legacy alias that behaves like
   `overflow-wrap: anywhere` — breaks eagerly at whatever character reaches the
   edge, with no hyphen to tell the reader a word was split.

   MEASURED, BECAUSE THE ARITHMETIC IS THE WHOLE STORY. At a 375px viewport the
   heading box is 263px wide (24px page padding + 16px group margin + 16px group
   padding, each side), and "Önkormányzat" in this face renders:

       34px  → 253px   fits
       37.5px → 280px  does not

   The mu-plugin sets `font-size: clamp(34px, 10vw, 42px) !important`. Its own
   floor of 34px would have been fine; the middle term is what overshoots —
   10vw is 37.5px at 375px, and every phone wider than ~340px overflows. So this
   is not "the heading is too big", it is "the fluid term outgrew the floor".

   THE FIX IS A SMALLER FLUID TERM, not hyphenation. `hyphens: auto` was tried
   first and does not help here: Chrome ships hyphenation patterns for a fixed
   set of languages and Hungarian is not reliably among them, so the word fell
   through to `overflow-wrap` and still broke without a hyphen. It is kept below
   as a safety net for browsers that do have the patterns, but the thing that
   actually fixes the page is making the word fit.

   `clamp(24px, 8vw, 32px)` gives 30px at 375px — 224px of word in a 263px box,
   39px of slack, so a longer title or a reader who has scaled the text up does
   not immediately re-break it.

   ON THE `!important` AND THE SELECTOR WEIGHT. The mu-plugin's rule is
   `body.page .hernad-muni-title, … , body.page .hernad-native-page h1` at
   (0,2,1) with `!important`. Beating it needs both the flag and at least equal
   specificity, hence `html body.page …` at (0,2,2) and (0,2,3). The mu-plugin
   file is untouched.

   NOT DONE, deliberately: the heading only gets 263px of a 375px screen because
   112px goes to nested padding. Reclaiming that would help every page on a
   phone, but it moves the layout of all content in those groups, which is a
   bigger change than the reported bug and belongs in its own pass.
   --------------------------------------------------------------------------- */

html body .entry-content h1,
html body .entry-content h2,
html body .entry-content h3,
html body .entry-content-wrap h1,
html body .entry-content-wrap h2,
html body .entry-content-wrap h3,
html body .entry-hero h1.entry-title {
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
	/* Safari still wants the prefix for hyphens. */
	-webkit-hyphens: auto;
}

@media (max-width: 700px) {
	html body.page .entry-content h1,
	html body.page .entry-content-wrap h1,
	html body.page .hernad-muni-title,
	html body.page .hernad-gb-title,
	html body.page .hernad-native-page h1,
	html body.page h1.hernad-muni,
	html body .entry-hero h1.entry-title {
		font-size: clamp(24px, 8vw, 32px) !important;
		line-height: 1.18 !important;
	}
}

/* The skip link's landing point (printed by hernad_hirmondo_masthead).
 *
 * It carries no content, so it must take up no room and draw nothing. The
 * outline is suppressed only because there is nothing to outline — an empty box
 * would show as a stray 2px line when focused. Keyboard users still get the
 * feedback that matters: the page moves to the content and the next Tab lands
 * inside it. Every other focusable element keeps its indicator. */
#hm-content-start {
	outline: none;
}

/* ---------------------------------------------------------------------------
   Content tables — centring, and not collapsing on a phone
   ---------------------------------------------------------------------------
   Reported on /gyermekorvosi-rendelo/, whose consulting-hours table sits off to
   the left while every paragraph around it is centred. Measured in a 1080px
   container:

       table width 485px    gap left 37px    gap right 555px

   The table carries `class="aligncenter"` and its computed margins were 0.

   NOT because the class is undefined — that was the first guess and it is wrong.
   Kadence's global.min.css does give `.aligncenter` `display: block` with auto
   side margins. It loses to mu-plugin 062's inline block, which sets

       .hernad-inst-detail-card table { width: 100%; margin: 20px 0 28px; }

   and that `margin` SHORTHAND re-declares the left and right margins as 0. A
   longhand `margin-block` would not have. The mu-plugin's inline <style> prints
   after the theme stylesheet and outranks a bare `.aligncenter`, so the auto
   margins never survived. `html body …` (0,2,2) beats it without touching the
   mu-plugin. Nine published pages mark a table with aligncenter.

   Mobile was the worse half. The editor wrote an inline `width: 48.4752%`, which
   at a 375px viewport resolves against a 332px container and leaves the table
   **143px wide** — narrower than its own first column — with 170px of empty space
   beside it. Percentage widths chosen on a desktop do not survive a phone, so
   below 700px any table with an inline width is made to fill its container.

   `[style*="width"]` is deliberately narrow: it only overrides tables where an
   editor pinned a width, and leaves auto-width tables to size themselves.

   ON THIS PARTICULAR PAGE the mobile half is belt-and-braces: mu-plugin 062
   already stacks its own cards' tables below 760px (`table, thead, tbody, tr, td
   { display: block; width: 100% }`). The rule below still earns its place — 25
   published items pin an inline table width and most are not inside one of those
   cards. Worth knowing: that stacking turns this timetable into a single column
   in which the empty cells become blank rows. It is the mu-plugin author's
   deliberate responsive pattern, not a bug introduced here, and it is left alone.

   Scoped to content tables. The front page's office-hours table (.hm-office) is
   in the Hírmondó template, outside .entry-content, and is not touched.
   --------------------------------------------------------------------------- */

html body .entry-content table.aligncenter,
html body .entry-content-wrap table.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Row headers keep the weight the cells had before they became headers.
 *
 * The consulting-hours table on /gyermekorvosi-rendelo/ had its day names in
 * plain <td>; marking them up as <th scope="row"> — which is what they are, and
 * what a screen reader needs to announce "Szerda" alongside "12.00 – 15.00" —
 * also made them bold, because <th> is bold in the theme's table styling. The
 * markup is right and stays; only the inherited boldness is undone, so the page
 * looks exactly as the council had it.
 *
 * Column headers are deliberately NOT included: they were already bold, by way
 * of the <strong> that the <th> replaced. */
html body .entry-content th[scope="row"],
html body .entry-content-wrap th[scope="row"] {
	font-weight: 400;
}

/* A table with an inline pixel width can otherwise push the page sideways. */
html body .entry-content table,
html body .entry-content-wrap table {
	max-width: 100%;
}

@media (max-width: 700px) {
	html body .entry-content table[style*="width"],
	html body .entry-content-wrap table[style*="width"] {
		width: 100% !important;
	}
}

/* A fixed bar is pointless on paper and would repeat on every sheet. */
@media print {
	.hernad-fundingbar {
		display: none;
	}

	html body {
		padding-bottom: 0 !important;
	}
}