/*
 * KOD accessibility fixes — CSS layer.
 * Target: Pojo "Atlanta" 1.6.2 theme on www.kod-ins.co.il (RTL, WordPress 5.1).
 * Minimal, scoped overrides only. Each block cites the WCAG 2.0 / IS 5568 criterion it serves.
 * Brand colours kept: blue #123a9e, light blue #289dcc, white. Only greys were darkened.
 */

/* ---------- Visually hidden utility (used by the PHP/JS layers) ---------- */
.kod-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- H1 produced from the existing title bar: keep its look (1.3.1, 2.4.6, 2.4.10 IL-AA) ---------- */
#page-header h1.title-primary {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* ---------- Focus visible (2.4.7 AA) ---------- */
/* The theme removes outlines on menu links, search and buttons. One consistent brand-blue ring with a white halo
   stays visible on white, grey and blue backgrounds. :focus fallback keeps old browsers covered. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.panel-title:focus {
	outline: 3px solid #123a9e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px #ffffff !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.panel-title:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.panel-title:focus-visible {
	outline: 3px solid #123a9e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px #ffffff !important;
}
/* Form fields: focus ring always (mouse users also need to see the active field). */
input:focus, select:focus, textarea:focus {
	outline: 3px solid #123a9e !important;
	outline-offset: 1px !important;
}
/* Dark surfaces: invert the ring. */
#outer-slidebar a:focus-visible, #outer-slidebar button:focus-visible, #outer-slidebar input:focus-visible,
#pojo-scroll-up a:focus-visible,
.rev_slider_wrapper .kod-slider-toggle:focus-visible {
	outline-color: #ffffff !important;
	box-shadow: 0 0 0 5px #123a9e !important;
}
/* Menu items clip the outline (overflow / line-height 100px): draw it inside. */
.sf-menu .sub-menu a:focus-visible {
	outline-color: #ffffff !important;
	outline-offset: -4px !important;
	box-shadow: none !important;
}
.sf-menu > li > a:focus-visible,
.mobile-menu a:focus-visible {
	outline-offset: -4px !important;
	box-shadow: none !important;
}

/* ---------- Drop-down sub-menus open on keyboard focus (2.1.1 A, 2.4.7 AA) ---------- */
/* Same position as the theme's hover state (.sf-menu li:hover ul): RTL anchors to the right edge. */
.sf-menu li:focus-within > ul.sub-menu,
.sf-menu li.kod-open > ul.sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	top: 100px;
	left: 0;
	z-index: 99;
}
.rtl .sf-menu li:focus-within > ul.sub-menu,
.rtl .sf-menu li.kod-open > ul.sub-menu { left: auto; right: 0; }
.sticky-header .sf-menu li:focus-within > ul.sub-menu,
.sticky-header .sf-menu li.kod-open > ul.sub-menu { top: 60px; }
/* Escape closes the open sub-menu even while focus stays on its parent link (1.4.13-style dismissal, 2.1.1 A). */
.sf-menu li.kod-dismissed > ul.sub-menu {
	display: none !important;
}

/* ---------- Text contrast (1.4.3 AA) ---------- */
/* Ratios below were computed with the WCAG 2.0 formula (03_TESTS/results/contrast_table.md). */
/* 0.9.3-min: every colour below is the closest shade of the original that passes (about 4.6:1), not a stronger one.
   Light surfaces. Theme body #818181 (3.9:1) and menu #777777 (4.48:1) on white -> #6d6d6d (5.07:1; 4.66:1 on #f3f3f3). */
body,
.entry-content,
.textwidget,
#sidebar,
.sf-menu > li > a,
.sf-menu > li > a span,
.mobile-menu a,
.image-text-description {
	color: #6d6d6d;
}
.entry-meta, .entry-meta a, .wp-caption-text, .widget .post-date {
	color: #6d6d6d !important;
}
/* Top bar: #888888 on #eeeeee (3.0:1) -> #6a6a6a (4.66:1). */
#top-bar, #top-bar .textwidget, #top-bar a { color: #6a6a6a; }
/* Title bar: #979797 on #f3f3f3 (2.63:1) -> #6d6d6d (4.66:1). */
#page-header, #page-header .title-primary, #page-header div.breadcrumbs, #page-header div.breadcrumbs a { color: #6d6d6d; }
/* Dark footer #3a3a3a: text #7c7c7c (2.7:1) -> #a5a5a5 (4.62:1); widget titles #289dcc (3.68:1) -> #51b0d6 (4.62:1). */
#footer, #footer .textwidget, #footer a, #footer .opening-hours-wrap, #footer .day-title, #footer .day-time { color: #a5a5a5; }
#sidebar-footer .widget-title, #sidebar-footer .widget-title.kod-look-h5 { color: #51b0d6; }
/* Copyright strip #353535: text #595959 (1.75:1) -> #9f9f9f (4.63:1). */
#copyright, #copyright a, #copyright .container { color: #9f9f9f !important; }
/* Drop-down sub-menu #515151: hover/current #289dcc (2.56:1) -> #92cee5 (4.60:1). Item text stays white (7.9:1). */
.sf-menu .sub-menu li:hover > a, .nav-main .sf-menu .sub-menu li.current-menu-item > a, .sf-menu .sub-menu li a:focus { color: #92cee5; }
/* Light-blue #289dcc links, filters and FAQ questions on white (3.1:1) -> darker shade of the same hue #207da3 (4.64:1). */
.category-filters a,
#sidebar .menu li a:hover,
.pojo-toggle .panel-title,
.entry-content a:not(.button):not(.image-link) {
	color: #207da3;
}
/* Home "risk management" sub-heading has inline color #969696 (2.96:1 on its #f8f8f8 section) -> #707070 (4.66:1). */
.entry-content [style*="color:#969696"] { color: #707070 !important; }
/* Search button placeholder grey #cccccc on white (1.6:1). */
.search-submit, .search-submit .fa { color: #123a9e !important; }
input::placeholder, textarea::placeholder { color: #6b6b6b; opacity: 1; }
/* Revolution Slider captions on grey rgba(92,92,92) keep white text (6.7:1) — no change needed. */

/* ---------- Links distinguishable in body text (1.4.1 A) ---------- */
.entry-content p a:not(.button),
.entry-content li a:not(.button),
.textwidget p a,
.panel-body a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Accordion (FAQ): the theme already shows a +/− icon for the open/closed state, so no extra visual cue is added here.
   The state is now exposed to assistive technology by aria-expanded (JS layer). */

/* ---------- Pause buttons for moving content (2.2.2 A) ---------- */
.kod-slider-toggle {
	position: absolute;
	z-index: 100;
	bottom: 12px;
	left: 12px;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 14px;
	border: 2px solid #ffffff;
	border-radius: 4px;
	background: #123a9e;
	color: #ffffff;
	font: bold 15px/1.3 Arial, sans-serif;
	cursor: pointer;
}
/* A2 (0.9.3-a2): set only by fitSlideText() when slide text would be cut off (1.4.4, 1.4.12). Nothing changes while text fits.
   A data attribute, not a class: RevSlider rewrites the layers' class attribute while it animates. */
.rev_slider .tp-caption[data-kod-fit] {
	white-space: normal !important;
	width: max-content !important; /* RevSlider's layer wrappers are 0px wide: without this the text would wrap after every word */
}
.rev_slider_wrapper.kod-fit-overflow .rev_slider,
.rev_slider_wrapper.kod-fit-overflow .tp-revslider-mainul,
.rev_slider_wrapper.kod-fit-overflow .tp-revslider-slidesli {
	overflow: visible !important;
}
/* A3 (0.9.3-a3): the pause button sits in one fixed place under the slider, at every width and on every slide, so it
   never covers slide text or images and never moves while slides change. fitSlideText() reserves the room under it. */
.rev_slider_wrapper .kod-slider-toggle {
	top: calc(100% + 8px);
	bottom: auto;
}
.kod-carousel-toggle {
	display: inline-block;
	margin: 8px 0;
	min-height: 44px;
	padding: 6px 14px;
	border: 2px solid #123a9e;
	border-radius: 4px;
	background: #ffffff;
	color: #123a9e;
	font: bold 15px/1.3 Arial, sans-serif;
	cursor: pointer;
}

/* ---------- Target size (2.5.8, WCAG 2.2: recommended only) ----------
   Not enlarged on purpose: the theme positions the search icon inside the field, and a 44px minimum (phase 1)
   pushed the icon out of the field onto the blue search panel (regression found in phase 2). Social icons are 36px. */
#top-bar ul.social-links li a { display: inline-block; min-width: 36px; min-height: 36px; }

/* Skip-link target: #content gets tabindex="-1" so focus can move there; do not draw a ring around the whole content. */
#content[tabindex="-1"]:focus,
#content[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* ---------- Respect reduced motion (2.3.3 AAA, recommended) ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Reflow (1.4.10) and text spacing (1.4.12) passed in the baseline run; no override needed. */

/* ---------- Corrected heading levels keep their original look (1.3.1 A, 2.4.10 IL-AA) ---------- */
/* The PHP layer changes the tag (e.g. h5 -> h2) and adds .kod-look-hN. Values copied from the theme's h1-h6 rules.
   Widget titles (.widget-title) are excluded: their look comes from the theme's .widget-title rules, which apply to
   any tag. Verified with 03_TESTS/scripts/heading_style_diff.py (only intended colour changes remain). */
.kod-look-h2:not(.widget-title) { font-family: 'Alef Hebrew', Arial, sans-serif; font-size: 25px; font-weight: normal; line-height: 1.5em; text-transform: uppercase; color: #123a9e; }
.kod-look-h3:not(.widget-title) { font-family: 'Alef Hebrew', Arial, sans-serif; font-size: 19px; font-weight: bold; line-height: 1.4em; text-transform: uppercase; color: #123a9e; }
.kod-look-h5:not(.widget-title) { font-family: 'Alef Hebrew', Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 2em; text-transform: uppercase; color: #123a9e; }
.kod-look-h6:not(.widget-title) { font-family: 'Alef Hebrew', Arial, sans-serif; font-size: 19px; font-weight: bold; line-height: 2.5em; text-transform: uppercase; color: #7a7a7a; }
/* Builder widget titles were h5 with margin-top 0 in the theme. */
.pb-widget-title.kod-look-h5 { margin-top: 0; }

/* ---------- Static banner that replaces Revolution Slider (2.2.2 A, 1.1.1 A, 1.4.10) ---------- */
.kod-hero {
	/* The banner reuses id="page-header", which the theme fixes at height:61px / line-height:61px; let it grow
	   with its content so enlarged text or text spacing (1.4.4, 1.4.12) is never clipped. */
	height: auto !important;
	line-height: normal !important;
	overflow: visible !important;
	position: relative;
	background-color: #eef1f7;
	background-size: cover;
	background-position: center center;
	min-height: 280px;
}
.kod-hero-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 280px;
	padding-top: 24px;
	padding-bottom: 0;
}
.kod-hero-text { flex: 1 1 50%; padding: 24px 0; }
.kod-hero-title,
.kod-hero-line {
	display: inline-block;
	margin: 0 0 8px;
	padding: 7px 16px;
	font-family: 'Alef Hebrew', Arial, sans-serif;
	line-height: 1.3;
	color: #ffffff;
	text-transform: none;
}
.kod-hero-title { background: #5c5c5c; font-size: 38px; font-weight: 600; }
.kod-hero-line { background: #123a9e; font-size: 26px; }
.kod-hero-line-0 { background: #5c5c5c; }
.kod-hero-text > * + * { display: table; }
.kod-hero-img { flex: 0 1 40%; max-width: 40%; max-height: 420px; width: auto; height: auto; align-self: flex-end; }
@media (max-width: 767px) {
	.kod-hero-inner { flex-direction: column; align-items: stretch; }
	.kod-hero-title { font-size: 26px; }
	.kod-hero-line { font-size: 19px; }
	.kod-hero-img { max-width: 70%; align-self: center; max-height: 300px; }
}
/* Required-field marker in forms (3.3.2 A). */
.kod-required { color: #b00020; }
.kod-form-note { margin: 0 0 10px; color: #444444; }

/* ---------- Contact form: visible labels (3.3.2 A) ---------- */
/* The form uses "labels inside" mode: labels are screen-reader-only and the placeholder disappears while typing,
   and the required-field marker was invisible. Show the labels above the fields. Same effect as switching the
   Pojo form setting "Label position" from Inside to Top. */
.pojo-form.form-align-inside .label-field {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 0 5px;
	clip: auto;
	overflow: visible;
	font-weight: 700;
	line-height: 1.3;
	color: #333333;
}
/* 0.9.3-min: field borders keep the theme's #b4b4b5. Non-text contrast (1.4.11) is WCAG 2.1, not part of IS 5568. */