/*
 * נגישות קוסטה (costa.co.il) - frontend styles.
 *
 * Goals:
 *   - Visible focus styles (never remove outlines).
 *   - Skip link visible on focus.
 *   - Toolbar fixed in a corner; does not cover important content.
 *   - prefers-reduced-motion honored when feature is enabled.
 *   - High-contrast / readable-font / text-spacing modes via body classes.
 */

/* ----- Skip link ----- */
.wpat-skip-link {
	position: absolute;
	left: -9999px;
	top: -9999px;
	z-index: 100000;
	background: #000;
	color: #fff;
	padding: 12px 16px;
	border-radius: 0 0 4px 0;
	text-decoration: none;
	font-weight: 700;
}

.wpat-skip-link:focus,
.wpat-skip-link:focus-visible {
	left: 0;
	top: 0;
	outline: 3px solid #ffbf00;
	outline-offset: 2px;
}

/* ----- Focus styles ----- */
body.wpat-focus-styles :focus-visible {
	outline: 3px solid #ffbf00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.25) !important;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
	body.wpat-reduced-motion *,
	body.wpat-reduced-motion *::before,
	body.wpat-reduced-motion *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ----- Toolbar ----- */
.wpat-toolbar {
	position: fixed;
	bottom: 16px;
	z-index: 99999;
	font-size: 16px;
	line-height: 1.4;
}

.wpat-toolbar--right { right: 16px; }
.wpat-toolbar--left  { left: 16px; }

button.wpat-toolbar__toggle {
	background: #111f49;
	color: #fff;
	border: 3px solid #fff;
	width: 68px;
	height: 68px;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
	font-size: 34px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

button.wpat-toolbar__toggle[aria-expanded="true"] {display:none}
button.wpat-toolbar__toggle:hover {background-color:#64B9E1!important}
button.wpat-toolbar__toggle img {filter:invert()}
.wpat-toolbar__toggle:hover {background-color:#64B9E1!important}

.wpat-toolbar__toggle:focus-visible {
	outline: 3px solid #ffbf00;
	outline-offset: 2px;
}

button.wpat-toolbar__close {border:0;padding:0;filter:invert()}
button.wpat-toolbar__close:hover {background:transparent;transform:scale(1.2)}
.wpat-toolbar__panel {
	background: #ffffff;
	color: #13234c;
	border: 1px solid #e5e9f2;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(2, 14, 48, 0.24);
	margin-bottom: 12px;
	width: min(94vw, 400px);
	max-height: 88vh;
	overflow: auto;
	letter-spacing:0.05em
}

.wpat-toolbar__list {
	list-style: none;
	padding: 10px;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.wpat-toolbar__header {
	display: flex;
	flex-direction:row-reverse;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #111f49, #1a2d62);
	color: #fff;
	padding: 16px 18px;
	border-radius: 18px 18px 0 0;
}

.wpat-toolbar__heading {
	flex: 1;
	min-width: 0;
}

/* px sizes on purpose: the sugat theme sets html{font-size:62.5%}, so rem values
   collapse to ~62% of the intended size. px also keeps the toolbar stable when
   the user scales the site text. color !important beats theme heading colors. */
.wpat-toolbar__header .wpat-toolbar__title {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing:0.05em;
	margin: 0;
	padding: 0;
	color: #fff !important;
}

.wpat-toolbar__header .wpat-toolbar__subtitle {
	font-size: 15px;
	margin: 3px 0 0;
	color: rgba(255, 255, 255, 0.88) !important;
	letter-spacing:0.05em
}

.wpat-toolbar__close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wpat-toolbar__close:focus-visible {
	outline: 3px solid #ffbf00;
	outline-offset: 2px;
	border-radius: 6px;
}

.wpat-toolbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	color: #111f49;
	padding: 6px;
}

.wpat-btn {
	display: flex;
	flex-direction: row;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	text-align: center;
	background: #fff;
	color: #13234c;
	border: 1px solid #dfe4ef !important;
	border-radius: 16px;
	padding: 14px 10px;
	min-height: 114px;
	cursor: pointer;
	font: inherit;
	text-decoration: none;
}

.wpat-btn:hover { border-color: #b8c4db !important; box-shadow: 0 8px 18px rgba(13, 31, 80, 0.08); }

.wpat-btn__icon {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wpat-btn__label {
	font-size: 16px;
	line-height: 1.2;
}

.wpat-btn[aria-pressed="true"] {
	background: #13234c;
	color: #fff !important;
	border-color: #13234c;
}

.wpat-btn[aria-pressed="true"] .wpat-icon-img {
	filter: brightness(0) invert(1);
}

.wpat-btn--reset {
	background: #fff;
	border-color: transparent;
	color: #13234c;
}
.wpat-btn--reset:hover { background: #f3f7ff; }

.wpat-btn--link { text-align: center; }

.wpat-toolbar__footer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid #e7ecf3;
}

.wpat-footer-btn {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 68px;
	padding: 12px 10px;
	color: #13234c !important;
	text-decoration: none;
	background: #fff;
	border: none;
	font: inherit;
	cursor: pointer;
}

.wpat-footer-btn + .wpat-footer-btn {
	border-inline-start: 1px solid #e7ecf3;
}

.wpat-footer-btn__icon {
	font-size: 22px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wpat-footer-btn__label {
	font-size: 16px;
	font-weight: 500;
}

.wpat-icon-img {
	width: 1em;
	height: 1em;
	display: block;
}

.wpat-icon-img--toggle {
	width: 34px;
	height: 34px;
}

.wpat-icon-img--badge {
	width: 28px;
	height: 28px;
}

.wpat-icon-img--close {
	width: 28px;
	height: 28px;
}

/* Force toolbar brand colors over aggressive theme styles. */
.wpat-toolbar__panel .wpat-btn,
.wpat-toolbar__panel .wpat-btn:visited {
	color: #13234c !important;
	border-color: #dfe4ef !important;
	text-decoration: none !important;
	width:100%;
	display:flex;
	flex-direction:column;
	border-radius:0;
	letter-spacing:0.05em;
	padding:10px!important
}
/* Concrete colors: the original values used Elementor globals
   (--e-global-color-*) that don't exist on sugat.com, leaving the hover
   background white while the icon got inverted to white. */
.wpat-toolbar__panel .wpat-btn:hover,
.wpat-toolbar__panel .wpat-btn:focus {
	background-color: #111f49;
	color: #fff !important;
	fill: #fff !important;
}

.wpat-toolbar__panel .wpat-btn:hover img,
.wpat-toolbar__panel .wpat-btn:focus img {
	filter:invert()
}

.wpat-toolbar__panel .wpat-btn[aria-pressed="true"],
.wpat-toolbar__panel .wpat-btn[aria-pressed="true"] * {
	color: #fff !important;
}

.wpat-toolbar__panel .wpat-footer-btn,
.wpat-toolbar__panel .wpat-footer-btn:visited,
.wpat-toolbar__panel .wpat-footer-btn:hover,
.wpat-toolbar__panel .wpat-footer-btn:focus {
	color: #13234c !important;
	text-decoration: none !important;
	display:flex;
	background-color:#fff;
	border:0
}

/* ----- Visual modes activated by body classes via JS ----- */

/* High contrast */
body.wpat-mode-high-contrast,
body.wpat-mode-high-contrast :not(.wpat-toolbar, .wpat-toolbar *) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}
body.wpat-mode-high-contrast a:not(.wpat-btn) {
	color: #ffbf00 !important;
	text-decoration: underline !important;
}
body.wpat-mode-high-contrast img,
body.wpat-mode-high-contrast video,
body.wpat-mode-high-contrast iframe {
	filter: contrast(1.2);
}

/* Highlight links */
body.wpat-mode-highlight-links a:not(.wpat-btn) {
	text-decoration: underline !important;
	outline: 2px dashed currentColor !important;
	outline-offset: 2px !important;
}

/* Readable font */
body.wpat-mode-readable-font,
body.wpat-mode-readable-font *:not(.wpat-toolbar, .wpat-toolbar *) {
	font-family: Arial, "Open Sans", "Heebo", "Rubik", sans-serif !important;
	letter-spacing: 0.02em !important;
}

/* Text spacing */
body.wpat-mode-text-spacing,
body.wpat-mode-text-spacing *:not(.wpat-toolbar, .wpat-toolbar *) {
	line-height: 1.8 !important;
	letter-spacing: 0.06em !important;
	word-spacing: 0.12em !important;
}
body.wpat-mode-text-spacing p,
body.wpat-mode-text-spacing li,
body.wpat-mode-text-spacing h1,
body.wpat-mode-text-spacing h2,
body.wpat-mode-text-spacing h3 {
	margin-bottom: 0.75em !important;
}

/* Stop animations - user-triggered, stronger than prefers-reduced-motion */
body.wpat-mode-stop-animations *,
body.wpat-mode-stop-animations *::before,
body.wpat-mode-stop-animations *::after {
	animation: none !important;
	transition: none !important;
}

/* Dark mode */
body.wpat-mode-dark-mode,
body.wpat-mode-dark-mode :not(.wpat-toolbar, .wpat-toolbar *) {
	background-color: #101010 !important;
	color: #f4f4f4 !important;
	border-color: #555 !important;
}
body.wpat-mode-dark-mode a:not(.wpat-btn, .wpat-footer-btn) {
	color: #9ecbff !important;
}

/* Text size handled via CSS variable on <html>.
   Values are rebased against the sugat theme baseline html{font-size:62.5%}
   (1rem = 10px), so "110" means 62.5% * 1.10 = 68.75%, not a jump to 110%. */
html[data-wpat-text-size="110"] { font-size: 68.75%; }
html[data-wpat-text-size="120"] { font-size: 75%; }
html[data-wpat-text-size="130"] { font-size: 81.25%; }
html[data-wpat-text-size="140"] { font-size: 87.5%; }
html[data-wpat-text-size="150"] { font-size: 93.75%; }
html[data-wpat-text-size="90"]  { font-size: 56.25%; }
html[data-wpat-text-size="80"]  { font-size: 50%; }

/* ----- Accessibility statement output ----- */
.wpat-statement {
	max-width: 780px;
	margin: 1.5em auto;
	padding: 1.5em;
	background: #f7f8fa;
	border: 1px solid #d8dde4;
	border-radius: 8px;
	color: #1d2230;
}
.wpat-statement h2 { margin-top: 0; }
.wpat-statement ul { padding-inline-start: 1.5em; }
.wpat-statement__updated { color: #555; }

/* ----- Small screens ----- */
@media (max-width: 480px) {
	.wpat-toolbar__panel { width: calc(100vw - 16px); }
	.wpat-toolbar__header .wpat-toolbar__title { font-size: 19px; }
	.wpat-btn { min-height: 112px; }
	.wpat-btn__icon { font-size: 26px; }
	.wpat-btn__label { font-size: 15px; }
	.wpat-footer-btn__label { font-size: 15px; }
	.wpat-toolbar {
		top: 110px;
		bottom: auto;
		left: 16px;
		right: auto;
	}
	button.wpat-toolbar__toggle {
		width: 50px;
		height: 50px;
		padding: 10px;
		opacity: 0.9;
		transition: opacity 0.2s ease;
	}

	button.wpat-toolbar__toggle:hover,
	button.wpat-toolbar__toggle:focus,
	button.wpat-toolbar__toggle:focus-visible {
		opacity: 1;
	}
}