/* wcag_main.css
   Combined build of wcag.css + wcag_c.css + wcag_d.css, in that same
   cascade order (each later block was written to sit on top of the ones
   before it). The three source files are kept on disk unchanged as the
   dated, per-fix rationale record - each rule below still carries its
   original comment - this file is what actually ships.

   Two rule sub-selectors from wcag_c.css were dropped here because a
   later, broader rule (from wcag_d.css) already covers the exact same
   elements - both drops are called out inline where they would have been.
*/

/* === from wcag.css === */

/* Focus indicator: no single flat color can hit the required 3:1 non-text
   contrast (WCAG 1.4.11) against both the site's white page background and
   its darkest colored boxes (footer #156055, quick-link teasers as dark as
   #8f1e25) at once - the luminance ranges needed don't overlap. Layer a
   white box-shadow ring behind the existing blue outline instead: on light
   backgrounds the white ring is invisible and the blue ring alone is
   clearly visible (~6:1); on dark backgrounds the white ring alone is
   clearly visible (always >=3:1), even where the blue ring blends in.
   `outline` (not box-shadow) stays the primary ring on purpose - Windows/
   browser forced-colors (high-contrast) mode overrides outline colors
   automatically but ignores box-shadow entirely, so relying on box-shadow
   alone would make focus invisible in that mode. The box-shadow spread
   matches outline-offset exactly, so the white ring fills precisely the
   gap between the element and the outline, with the outline painted on
   top - a clean two-tone halo, not two overlapping rings.

   (Previously used `border: 2px solid #fff` for the same "add white"
   intent - switched to box-shadow because a real `border` changes the box
   model, causing a layout shift/reflow on every focus; outline/box-shadow
   affect neither.) */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 3px solid #005fcc !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #000;
	color: #fff;
	padding: 8px 16px;
	z-index: 100000;
}
.skip-link:focus {
	left: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ts-wrapper:focus-within {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff;
}

blockquote p a,
blockquote p a span {
	color: #0047ab;
	background-color: #fefefe;
}

p a[href^='tel:'],
p a[href^='mailto:'] {
	color: #304770 !important;
}

.skincolored_section p a[href^='tel:'],
.skincolored_section p a[href^='mailto:'] {
	color: #ffffff !important;
}

a[target='_blank'][rel~='noreferrer'][rel~='noopener'] {
	color: #304770 !important;
}

/* Footer background is #218476 - force white link text for WCAG contrast.
   Selectors below add "footer" to match/beat the specificity of the
   a[target=_blank]... and p a[href^=tel/mailto] rules above, which would
   otherwise win (same !important, higher specificity) for footer links
   that open in a new tab or are phone/email links. */
footer a,
footer a:visited,
footer a:hover,
footer a:focus,
footer a[target='_blank'][rel~='noreferrer'][rel~='noopener'],
footer a[href^='tel:'],
footer a[href^='mailto:'] {
	color: #ffffff !important;
}

/* === from wcag_c.css === */

/* Enhanced (AAA) color contrast: white footer text/links on the footer's
   teal-green background (--primary-color-green, #218476) measure 4.53:1 -
   enough for AA but short of the AAA 7:1 threshold. Darken the footer
   background slightly (barely perceptible shift) so existing white footer
   text clears 7:1 without having to change every footer text color.
   .separator_top/.separator_bottom (the footer's angled top edge) use
   `background-color: inherit` (see parent theme helpers.less), so they
   pick up this same shade automatically - no seam is introduced. */
footer {
	background-color: #156055 !important;
}

/* Minimum (AA, 4.5:1) and enhanced (AAA, 7:1) color contrast: default
   in-text link color (--primary-color-light-blue, #5179a0) drops to
   ~4:1 on the light-gray WPBakery content backgrounds (#efefef) used
   throughout the site, below both thresholds. Scope to .wpb_content_element
   (WPBakery text columns and video widgets alike) so footer/tel/mailto
   links - already handled above - are left alone. Also exclude
   button-styled links (.btn, .vc_btn3): those already pair a dark
   background with white text on purpose, and forcing this dark-blue
   text color on them would crush their contrast instead of fixing it
   (e.g. "Osztály oldala" buttons: #304770 background).

   .neutralize_links is the parent theme's own utility class for "quick
   link" teaser boxes: it deliberately makes the link inherit its color
   from the surrounding heading instead of using normal link styling,
   because these boxes sit on all sorts of colored skin backgrounds
   (brand green/red/blue/etc. with white text). Excluding it here avoids
   fighting that - without the exclusion, this rule was forcing dark-blue
   text onto e.g. a white-on-brand-green/red box, crushing contrast to
   ~1.1-1.8:1 instead of fixing anything (see homepage quick-link grid). */
.wpb_content_element a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(.neutralize_links a),
.wp-block-paragraph a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(footer *) {
	color: #2f5170 !important;
}

.wpb_content_element a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(.neutralize_links a):hover,
.wpb_content_element a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(.neutralize_links a):focus,
.wp-block-paragraph a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(footer *):hover,
.wp-block-paragraph a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(footer *):focus {
	color: #1f3d55 !important;
}

/* Links must be distinguishable without relying on color: any in-text link
   surrounded by plain paragraph text needs a non-color cue (underline) so
   it doesn't rely on the color difference alone - this includes tel:/
   mailto: links (already darkened above for contrast, but never
   underlined, so a tel:/mailto: link inline in body copy - like a "write
   to us at x@y" sentence - still fails this rule). Some pages (e.g.
   custom page templates rendering block-editor content directly, without
   going through WPBakery) use raw Gutenberg .wp-block-paragraph markup
   instead of .wpb_content_element, so both are covered - same issue,
   different markup source.

   (wcag_c.css's original also matched `.wpb_content_element p a` here -
   dropped, it's a strict subset of the `.wpb_content_element a` rule
   further below from wcag_d.css, which underlines every link in that
   wrapper regardless of whether a <p> sits in between.) */
.wp-block-paragraph a:not(.btn):not(.vc_btn3):not(footer *),
blockquote .wp-block-paragraph a {
	text-decoration: underline;
}

/* Links must be distinguishable without relying on color: a blockquote
   "opens in a new tab" link (target="_blank" + rel="noreferrer noopener")
   not wrapped in a .wp-block-paragraph (so not already covered by the
   rule above) still reads as color-only-distinguished otherwise - already
   darkened to #304770 by the wcag.css block above, but never underlined.

   (wcag_c.css's original also matched `.wpb_content_element
   a[target=_blank]...` and `.wp-block-paragraph a[target=_blank]...`
   here - both dropped as redundant: the former is a strict subset of the
   wcag_d.css `.wpb_content_element a` underline rule below (target
   attribute irrelevant, it underlines every link there), and the latter
   is a strict subset of the plain `.wp-block-paragraph a` rule
   immediately above (also target-attribute-agnostic).) */
blockquote a[target='_blank'][rel~='noreferrer'][rel~='noopener'] {
	text-decoration: underline;
}

/* Enhanced (AAA, 7:1) color contrast: the same .neutralize_links "quick
   link" boxes, when on a light-gray skin (.light_section) rather than a
   colored brand skin, still need a dark, readable link color - just a
   touch darker than the general in-text link color above, since the
   background here (#e5e5e5) is slightly darker than the #efefef/#f9f9f9
   used elsewhere. */
.light_section .neutralize_links a {
	color: #2c4a67 !important;
}

/* Enhanced (AAA, 7:1) color contrast: white teaser-box headings/text on
   the "Szakrendelés" (--primary-color-blue) and "Elérhetőség"
   (--primary-color-light-blue) box backgrounds measure 6.4:1 and 4.57:1 -
   fine for AA, short of AAA. These backgrounds are painted by the parent
   theme via `nth-of-type(3)`/`nth-of-type(4)` on the triangular-separator
   column (see healthflex-child custom.css) - darken the same two
   variables' effective output slightly (minimal, same hue) by targeting
   those exact selectors so every occurrence of these two recurring
   teaser-box skins clears AAA, on this page and any other page reusing
   the same component. */
section:not(#main-page-container) .container .row > div.sep_triangular_downhill_top:nth-of-type(3) {
	background-color: #33507a !important;
	border-color: #33507a !important;
}
section:not(#main-page-container) .container .row > div.sep_triangular_uphill_top:nth-of-type(4) {
	background-color: #355476 !important;
	border-color: #355476 !important;
}

/* Enhanced (AAA, 7:1) color contrast: white ".btn-primary" ("Tovább" /
   read-more) button text on --primary-color-green (#218476) measures
   4.53:1 - the same green/white pairing already darkened for the footer
   above, but .btn-primary is used standalone in post listings too
   (outside <footer>), so it needs its own rule with the same darkened
   shade for consistency. */
.btn.btn-primary {
	background-color: #156055 !important;
	border-color: #156055 !important;
}

/* Minimum (AA, 4.5:1) color contrast: pagination links reuse the same
   --primary-color-light-blue (#5179a0) in-text link color, which drops
   to 4.34:1 against the pagination's near-white background (#f9f9f9) -
   just under the 4.5:1 minimum. Same darkened color already used for
   in-text links elsewhere (.wpb_content_element a), applied here since
   pagination lives outside that wrapper. */
.pagination > li > a {
	color: #2f5170 !important;
}

/* Enhanced (AAA, 7:1) color contrast: WPBakery grid "Olvass tovább"
   buttons use the built-in js_composer "juicy pink" btn3 skin
   (near-white text on #b93b42), measuring 5.48:1. Darken that skin's
   background wherever it's used as a button (not just this grid) so any
   vc_btn3-color-juicy-pink button site-wide clears AAA. */
.vc_btn3-color-juicy-pink {
	background-color: #8f2d33 !important;
	border-color: #8f2d33 !important;
}

/* Enhanced (AAA, 7:1) color contrast: white text on --primary-color-green
   (#218476) inside the homepage's "with_button" boxed teaser (the
   "Tájékozódjon..." call-out) measures 4.53:1 - the same green/white
   pairing already darkened for the footer and .btn-primary above. */
.boxed.content.with_button {
	background-color: #156055 !important;
}

/* Enhanced (AAA, 7:1) color contrast: the homepage's four "quick link"
   teaser boxes (Osztályaink / Szakrendelések / Kérdések-válaszok /
   Látogatási rend) each use a different brand skin color behind white
   text - dark-green, green, light-green and red - each just short of
   7:1 (6.08/4.53/5.01/6.49). These skins come from the site's Redux
   theme options (not a reusable CSS class), so each box is targeted by
   its own per-instance WPBakery class; darkened to the same brand hue.

   Each of these tiles is actually two nested boxes: the outer
   `.wpb_column.vc_custom_XXXX` wrapper (whose own `.separator_top`/
   `.separator_bottom` children draw the diagonal zigzag edges via
   `background-color: inherit`), and an inner `.teaser_box.boxed` that
   only covers the flat middle. WPBakery injects its own per-element
   `.vc_custom_XXXX { background-color: ... }` rule (its "Design Options"
   custom-CSS feature) at the *same* specificity as a bare `.vc_custom_XXXX`
   selector, so a plain `.vc_custom_XXXX, .vc_custom_XXXX .teaser_box.boxed`
   rule only reliably wins on the higher-specificity second half (the inner
   box) - the outer wrapper (and so the diagonal edges) could still show
   WPBakery's original, undarkened color depending on injection order,
   producing a visible two-tone seam right at the diagonal cut. Qualifying
   the outer selector with `.wpb_column` (already on every one of these
   elements) bumps its specificity so it wins deterministically, keeping
   the diagonal edges and the flat middle the exact same shade. */
.wpb_column.vc_custom_1770024796851,
.vc_custom_1770024796851 .teaser_box.boxed {
	background-color: #155850 !important; /* dark-green */
}
.wpb_column.vc_custom_1770024760044,
.vc_custom_1770024760044 .teaser_box.boxed {
	background-color: #156055 !important; /* green */
}
.wpb_column.vc_custom_1770025788158,
.vc_custom_1770025788158 .teaser_box.boxed {
	background-color: #1a5f56 !important; /* light-green */
}
.wpb_column.vc_custom_1770024667636,
.vc_custom_1770024667636 .teaser_box.boxed {
	background-color: #8f1e25 !important; /* red */
}

/* === from wcag_d.css === */

/* Elements must meet minimum (AA, 4.5:1) color contrast ratio: the doctor
   search page (page-orvoskereso.php, [doctor_search]) renders each result
   as a WPBakery "boxed" teaser (.content.boxed.with_button) - the name
   (.hgroup h4) and specialty (.hgroup p) inside it never had an explicit
   text color, so they inherited the theme's default body text (black /
   #666) while their own ancestor paints a dark green background
   (#156055, darkened for AAA by the `.boxed.content.with_button` rule
   above) - black-on-dark-green measures roughly 1:1. Same underlying
   .content.boxed/.content.boxed_special "boxed" skin is reused for every
   other team-member/quick-link teaser across the site and is paired with
   a colored brand background by design there, so forcing white text is
   safe for those. Doctor cards specifically get their own white-card
   design instead - see the `.doctor-card` override directly below, which
   wins via higher specificity. */
.content.boxed .hgroup h4,
.content.boxed .hgroup p,
.content.boxed_special .hgroup h4,
.content.boxed_special .hgroup p {
	color: #ffffff !important;
}

/* Doctor search result cards (page-orvoskereso.php, [doctor_search]) -
   requested as a white card with dark text instead of the green "boxed"
   skin every other teaser on the site uses (see the general
   .content.boxed rules above/below). Overrides both the AAA-driven dark
   background (`.boxed.content.with_button`) and the white text that
   background required, with a clean white card and near-black text -
   #1a1a1a on white is ~18:1 for the name, #4d4d4d ~7.5:1 for the
   specialty line underneath it, both comfortably past AAA. */
a.doctor-card .content.boxed.with_button {
	background-color: #ffffff !important;
}
a.doctor-card .content.boxed .hgroup h4 {
	color: #1a1a1a !important;
}
a.doctor-card .content.boxed .hgroup p {
	color: #4d4d4d !important;
}

/* Elements must meet enhanced (AAA, 7:1) color contrast: `.skincolored_section`
   (WPBakery's per-widget "skin color" background helper - used by the
   phone/booking teaser icons and pricing-box labels built from
   AppointmentBooking.php/SpecialistOrder.php output) is painted with the
   site's raw --primary-color-green (#218476) behind white text, measuring
   4.53:1 - enough for AA but short of AAA. Reuse the same darkened green
   already applied to the footer/.btn-primary/.boxed.content.with_button
   above so the shift stays visually consistent across the site. Every
   occurrence of this class found in an audit of all published pages used
   this same green - no other skin color was observed in current content. */
.skincolored_section {
	background-color: #156055 !important;
}

/* Links must be distinguishable without relying on color + minimum/enhanced
   color contrast: the rules above already darkened and underlined in-text
   links for WPBakery output (.wpb_content_element) and Gutenberg
   paragraphs (.wp-block-paragraph), but raw Gutenberg **list** content
   (.wp-block-list, e.g. the "Közérdekű adatok" document lists and the
   "Ápolj otthon" post body) uses the same undarkened --primary-color-light-blue
   (#5179a0) with no underline, which was never covered by those selectors.
   Same treatment, extended to list markup. */
.wp-block-list a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(footer *) {
	color: #2f5170 !important;
	text-decoration: underline;
}

.wp-block-list a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(footer *):hover,
.wp-block-list a:not([href^='tel:']):not([href^='mailto:']):not(.btn):not(.vc_btn3):not(footer *):focus {
	color: #1f3d55 !important;
}

/* Links must be distinguishable without relying on color: the WPBakery
   underline rule above only matched links inside a <p>, so it missed the
   same "opens in a new tab" links (already color-darkened to #304770) when
   they sit in other content shapes instead - a <table> (the "Közérdekű
   adatok" / "Általános közzétételi lista" document tables), a plain <ul>
   the editor typed directly into a WPBakery text column instead of a real
   Gutenberg list, or a WPBakery accordion panel's own heading
   (.vc_tta-panel-body). Underline links in all of these the same way,
   regardless of which element wraps them - this is also what makes the
   two wcag_c.css sub-selectors called out above redundant. */
.wp-block-list a:not(.btn):not(.vc_btn3):not(footer *),
.wp-block-table a:not(.btn):not(.vc_btn3):not(footer *),
.wpb_content_element a:not(.btn):not(.vc_btn3):not(footer *):not(.neutralize_links a),
.vc_tta-panel-body a:not(.btn):not(.vc_btn3):not(footer *) {
	text-decoration: underline;
}

/* Elements must meet minimum (AA, 3:1 large-text) color contrast: the
   [main_hero] shortcode (functions.php, main_hero_templet()) sets its own
   ".hero-link" button to white-on-teal (#ffffff on #2e8b7e, its intended
   design) via an inline <style> block, but the shortcode is placed inside
   a WPBakery text column, so the generic in-text-link darkening rule above
   (`.wpb_content_element a`) also matches it and overrides that white to
   the dark link-blue (#2f5170) meant for plain body copy - 2.01:1 on this
   teal background. `#hero .hero-link` outweighs that rule's specificity
   (multiple :not() clauses but no ID) via the shortcode's own `#hero`
   wrapper, so this restores the button's original, already-compliant
   white text without having to touch every other .wpb_content_element
   link.

   :hover is handled separately from the base/:focus state: on hover the
   button's own inline styles (functions.php) flip the *background* to
   white and the text to teal (rgb(46,139,126)) for a color-swap effect.
   An earlier version of this rule also forced white text on :hover,
   which - combined with that white hover background - made the button's
   text invisible (white-on-white). Restore the button's actual intended
   hover color instead of white, which both matches the original design
   and clears 3:1 against the white hover background (~4.1:1). */
#hero .hero-link,
#hero .hero-link:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}
#hero .hero-link:hover {
	color: #2e8b7e !important;
	text-decoration: none !important;
}