everywhere else, so the page's own title keeps the h1. Both are styled by the class, not the tag. */ .hm-head .hm-wordmark { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: calc(clamp(48px, 7vw, 96px) * var(--hm-scale, 1)); font-weight: 700; line-height: .9; letter-spacing: -.02em; } .hm-head .hm-wordmark a { display: flex; align-items: center; justify-content: center; gap: 20px; color: inherit; text-decoration: none; } .hm-head .hm-wordmark a:hover, .hm-head .hm-wordmark a:focus-visible { text-decoration: none; } .hm-head .hm-crest { display: block; flex: none; color: var(--hm-ink); } /* Sized in em against the wordmark, so it tracks both the clamp() and the accessibility text-size control. The arms are 2006x2549, so 0.787:1. The WIDTH is stated rather than left to `auto`. With `auto` the browser has no box for the crest until the SVG itself arrives, and on /albumok/ — where it queues behind 170 gallery images — it landed after first paint and pushed the whole page down: Lighthouse measured CLS 0.20 there against 0 on lighter pages. 1.05em x 0.787 = 0.826em reserves the exact space from the first frame, on any page, whatever the network does. */ .hm-head .hm-crest img { display: block; height: 1.05em; width: 0.826em; max-width: none; } .hm-head .hm-tagline { text-align: center; font-size: .833em; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; color: var(--hm-ink); } /* --- Navigation --------------------------------------------------------- */ .hm-head .hm-nav { border-bottom: 1px solid var(--hm-ink); padding: 12px var(--hm-gutter); } .hm-head .hm-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; font-size: .889em; font-weight: 700; } .hm-head .hm-nav li { margin: 0; } .hm-head .hm-nav a.is-current { color: var(--hm-red); } /* Menu entries that exist only as a grouping label (url "#") — rendered as plain text rather than a link that goes nowhere. */ .hm-head .hm-nav-plain { color: var(--hm-muted); cursor: default; } /* ========================================================================== Direction C — "Zászló": the masthead as a banner -------------------------------------------------------------------------- Switched with `wp option update hernad_colour_direction flag` (and back with `arms`); the body class comes from hernad_colour_direction() in inc/colour.php. Nothing here is a fork of the design — the palette and the eight Rovat colours are the same, this only spends them more boldly. The band is the DEEP azure #004a83, not #005ca1, and that is a contrast decision rather than a taste one: gold on #005ca1 is 4.20:1, which is large text only, while on #004a83 it is 5.55:1 and can carry the tagline. White on the deep band is 9.10:1. ========================================================================== */ body.hm-dir-flag .hm-head .hm-mast { background: var(--hm-azure-deep, #004a83); color: #ffffff; /* the double rule turns gold — the one place gold does structural work */ border-bottom: 4px solid var(--hm-gold, #f8c301); } body.hm-dir-flag .hm-head .hm-mast-side, body.hm-dir-flag .hm-head .hm-date, body.hm-dir-flag .hm-head .hm-hours-today { color: rgba(255, 255, 255, .88); } body.hm-dir-flag .hm-head .hm-wordmark, body.hm-dir-flag .hm-head .hm-wordmark a, body.hm-dir-flag .hm-head .hm-weather { color: #ffffff; } body.hm-dir-flag .hm-head .hm-tagline { color: var(--hm-gold, #f8c301); } body.hm-dir-flag .hm-head .hm-weather-range { color: rgba(255, 255, 255, .8); } /* The alert is red on paper. Red on a blue band is both illegible and heraldic nonsense, so it takes the gold instead — still the loudest thing in the bar. */ body.hm-dir-flag .hm-head .hm-alert { color: var(--hm-gold, #f8c301); font-weight: 700; } /* Every weather condition goes to one colour here: the tinted line art was tuned for a paper ground and the muted tones disappear on deep blue. */ body.hm-dir-flag .hm-head .hm-weather-icon, body.hm-dir-flag .hm-head .hm-weather-icon--sun, body.hm-dir-flag .hm-head .hm-weather-icon--moon, body.hm-dir-flag .hm-head .hm-weather-icon--cloud, body.hm-dir-flag .hm-head .hm-weather-icon--fog, body.hm-dir-flag .hm-head .hm-weather-icon--rain, body.hm-dir-flag .hm-head .hm-weather-icon--snow, body.hm-dir-flag .hm-head .hm-weather-icon--storm { color: var(--hm-gold, #f8c301); } /* Every

in the band, not just the ones named above. The base reset in this file sets `.hm-head p { color: var(--hm-ink) }`, so any paragraph not listed explicitly stays ink — which put the "Keresés · E-ügyintézés" line at 1.99:1 on the blue. Colouring the container catches them all. */ body.hm-dir-flag .hm-head .hm-mast p { color: rgba(255, 255, 255, .88); } /* The buttons outline themselves in `currentColor`, so making the text white is enough to make the whole button white against the band. */ body.hm-dir-flag .hm-head .hm-mast-links a { color: #ffffff; } body.hm-dir-flag .hm-head .hm-mast-btn:hover, body.hm-dir-flag .hm-head .hm-mast-btn:focus-visible, body.hm-dir-flag .hm-head .hm-mast-links a.hernad-eugyintezes-btn:hover, body.hm-dir-flag .hm-head .hm-mast-links a.hernad-eugyintezes-btn:focus-visible { background: #ffffff !important; color: var(--hm-azure-deep, #004a83) !important; } /* The search field on the band: white outline and white type, with a placeholder light enough to read on deep azure — #c8d9e8 measures 6.30:1, where plain white would be 9.10:1 but would look like typed-in text. */ body.hm-dir-flag .hm-head .hm-search { color: #ffffff; } body.hm-dir-flag .hm-head .hm-search-field::placeholder { color: #c8d9e8; } body.hm-dir-flag .hm-head .hm-search:focus-within { outline-color: var(--hm-gold, #f8c301); } body.hm-dir-flag .hm-head .hm-search-submit:hover { background: #ffffff; color: var(--hm-azure-deep, #004a83); } /* mu-plugin 010 styles this link as a green pill; the reset that undoes that uses `color: inherit !important`, which outranks the rule above. Matching its specificity and importance is the only way to reach it. */ body.hm-dir-flag .hm-head .hm-mast-links a.hernad-eugyintezes-btn { color: #ffffff !important; } body.hm-dir-flag .hm-head .hm-sep { color: rgba(255, 255, 255, .45); } /* The arms are azure with a gold band — on an azure banner the shield's own field would merge into the background and only the black outline would hold it together. A paper plaque behind it keeps the heraldry legible and reads as a badge pinned to the banner, which is the honest way to place a coat of arms on a coloured field. */ body.hm-dir-flag .hm-head .hm-crest { background: var(--hm-paper); padding: 6px 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); } /* Focus rings have to be visible against the band, not against paper. */ body.hm-dir-flag .hm-head .hm-mast :focus-visible { outline-color: var(--hm-gold, #f8c301); } /* The navigation stays on paper — a second full-width colour band would bury the masthead it is meant to sit under — but picks up a gold rule to tie it to the banner. */ body.hm-dir-flag .hm-head .hm-nav { border-bottom: 3px solid var(--hm-gold, #f8c301); } /* Solid buttons rather than outlined ones. */ body.hm-dir-flag .hm-btn, body.hm-dir-flag .hm-cta { background: var(--hm-green); border-color: var(--hm-green); color: #ffffff; } /* High contrast wins over the direction, always. The whole point of that mode is that nothing depends on hue, so the banner reverts to ink on paper and the gold rules become ink. */ body[data-contrast="high"].hm-dir-flag .hm-head .hm-mast { background: var(--hm-paper); color: var(--hm-ink); border-bottom: 3px double var(--hm-ink); } /* The E-ügyintézés link is not listed here on purpose: the mu-plugin reset pins it to `color: inherit !important`, which no plain rule can outrank, so it takes its colour from the

above — which this rule turns to ink. */ body[data-contrast="high"].hm-dir-flag .hm-head .hm-mast p, body[data-contrast="high"].hm-dir-flag .hm-head .hm-mast-side, body[data-contrast="high"].hm-dir-flag .hm-head .hm-date, body[data-contrast="high"].hm-dir-flag .hm-head .hm-hours-today, body[data-contrast="high"].hm-dir-flag .hm-head .hm-wordmark, body[data-contrast="high"].hm-dir-flag .hm-head .hm-wordmark a, body[data-contrast="high"].hm-dir-flag .hm-head .hm-weather, body[data-contrast="high"].hm-dir-flag .hm-head .hm-tagline, body[data-contrast="high"].hm-dir-flag .hm-head .hm-alert, body[data-contrast="high"].hm-dir-flag .hm-head .hm-mast-links a, body[data-contrast="high"].hm-dir-flag .hm-head .hm-weather-icon { color: var(--hm-ink); } body[data-contrast="high"].hm-dir-flag .hm-head .hm-search { color: var(--hm-ink); } body[data-contrast="high"].hm-dir-flag .hm-head .hm-search-field::placeholder { color: var(--hm-muted); } body[data-contrast="high"].hm-dir-flag .hm-head .hm-crest { background: none; padding: 0; box-shadow: none; } body[data-contrast="high"].hm-dir-flag .hm-head .hm-nav { border-bottom-color: var(--hm-ink); } /* NOT tinted, deliberately: the funding bar. The Széchenyi and EU marks have presentation rules attached to the funding, and are drawn for a white field. Putting them on a coloured band risks breaching that for decoration. */ /* --- Kadence's own header ------------------------------------------------ On every page except the Hírmondó template, Kadence still renders #masthead right after this one. The body class is added in functions.php so the rule cannot accidentally fire on the front page, where #masthead does not exist at all. `display: none` rather than removing the header in PHP: Kadence's header markup carries the mobile nav and search that other code may look for, and the flat wrapping .hm-nav above already covers small screens. -------------------------------------------------------------------------- */ body.hm-shared-head #masthead { display: none !important; } /* Kadence prints its own skip link, in English ("Skip to content") on a Hungarian site, and the masthead above now supplies a working Hungarian one. Two skip links is one too many for a keyboard user tabbing in, so the English one goes. */ body.hm-shared-head #wrapper > .skip-link { display: none !important; } /* Kadence runs these pages with `transparent-header`, where the header floats over the content, and mu-plugin `hernad-transparent-header-offset` pushes the content back down with `body.transparent-header:not(.home) main.wrap { padding-top: var(--hernad-header-h, 131px) }`. With #masthead hidden there is nothing to clear, so that 131px was simply a band of empty page between the navigation rule and the title. The mu-plugin is left alone — it is still correct for any context where Kadence's header renders. The offset is just cancelled where we replaced it. */ body.hm-shared-head #inner-wrap, body.hm-shared-head main.wrap { padding-top: 0 !important; } /* Same story one level down: the first content block carries its own leading margin (52px, 84px under 700px), which was also there to clear the floating header. Stacked on the padding below it that came to 108px of empty page on a phone, before a single word of the article. `html body...` and !important are both required, not decoration. FOUR mu-plugins set this margin — hernad-municipal-hard-style, onkormanyzat-card-fix-css, onkormanyzat-final-style and hernad-municipal-style-extend — each as `body.page .hernad-muni-page-restored { margin-top: 52px !important }`. That is (0,3,0) with !important and prints after this file, so anything short of (0,3,1)-plus-!important loses on source order. */ html body.hm-shared-head .entry-content > *:first-child, html body.hm-shared-head .entry-content-wrap > *:first-child { margin-top: 0 !important; } /* With those two compensations gone the gap is Kadence's own 32px, which is tight under a 56px page title and the masthead's double rule. This sets the spacing deliberately instead of inheriting whatever is left over. */ body.hm-shared-head .entry-content-wrap { padding-top: 48px; } @media (max-width: 767px) { body.hm-shared-head .entry-content-wrap { padding-top: 32px; } } /* --- The page-title band ------------------------------------------------ Kadence gives `.entry-header` inside the hero `min-height: 200px` and centres the title in it. The title itself, with its underline rule, is about 104px, so 96px of the band is empty — on top of the masthead above it and the content padding below it, that is the gap that made every subpage open with a screenful of nothing. Sized to its content instead, with padding that is stated rather than left over. Measured on /emberek/: 200px band -> 130px, and the first content sits 178px below the masthead instead of 248px. ------------------------------------------------------------------------ */ body.hm-shared-head .entry-hero .entry-header { min-height: 0; padding: 22px 0 18px; } /* The h1's own 34px top margin was there to push the title down inside the 200px band; the band no longer needs it. Kept as a small optical lead-in. (0,3,1) with the tag, so it outranks the mu-plugins' `.page .entry-title`. */ body.hm-shared-head .entry-hero .entry-header h1.entry-title { margin-top: 0; margin-bottom: 6px; } @media (max-width: 767px) { body.hm-shared-head .entry-hero .entry-header { padding: 16px 0 14px; } } /* On the 179 pages whose content opens with the page title AS A HEADING, this band is that title a second time. The whole hero goes, not just the h1: an empty 128px band would be the gap all over again. The list lives in functions.php — `hernad_pages_with_own_title()` — along with the reasoning for why it has to be a list and not a rule. */ body.hm-shared-head.hm-own-title .entry-hero { display: none; } /* The nine pages whose visible title is a styled

/ rather than a heading. `display: none` would take the page's only
out of the accessibility tree along with it, so the hero is hidden from the screen and kept for screen readers — the page keeps exactly one h1, and sighted readers see the title once. `hernad_pages_with_unmarked_title()` lists them. */ body.hm-shared-head.hm-own-title-unmarked .entry-hero { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The text-size buttons have to move subpage content too — a control that only resized the header strip above the article would be worse than none. Scaling the root font size does nothing here: Kadence and the mu-plugins size everything in px and vw (the page title is `clamp(42px, 4vw, 56px)`), so rem never enters into it. `zoom` does what the reader actually wants — it reflows the layout at a larger size, exactly like browser zoom, instead of transform-scaling a fixed-width page into a horizontal scrollbar. Applied to #wrapper, not : the sticky funding bar is a direct child of and must keep its own scale and its fixed positioning. --hm-scale defaults to 1, so this is inert until a button is pressed. */ body.hm-shared-head #wrapper { zoom: var(--hm-scale, 1); } /* --- Small screens ------------------------------------------------------- */ @media (max-width: 767px) { .hm-head { --hm-gutter: 20px; font-size: calc(17px * var(--hm-scale, 1)); } .hm-head .hm-a11y { justify-content: flex-start; } .hm-head .hm-mast { grid-template-columns: 1fr; text-align: center; gap: 10px; } .hm-head .hm-mast-right { text-align: center; } /* The masthead centres on phones, so the two action buttons do too. */ .hm-head .hm-mast-links { justify-content: center; } /* The masthead centres on phones, so the flex weather line must too. */ .hm-head .hm-weather { justify-content: center; } .hm-head .hm-mast-left { order: 2; } .hm-head .hm-mast-centre { order: 1; } .hm-head .hm-mast-right { order: 3; } .hm-head .hm-nav ul { justify-content: flex-start; gap: 10px 20px; } } @media (prefers-reduced-motion: reduce) { .hm-head * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }