/*
 * Dyslexia-friendly font, active when <html> has the class a11y-dyslexia.
 * Spec: specs/run/A1-digitalna-pristupacnost/session-3-dyslexia-font.md
 * Typeface: OpenDyslexic, SIL Open Font License 1.1; the files and the licence text are in font/opendyslexic/.
 *
 * The class is set on <html> by AccessibilitySettings::htmlClasses() (PHP, before the first paint) and by
 * js/accessibility.js (the bar). The wide typeface makes the fixed navbar wrap onto more rows: the "Navbar width" section keeps
 * that to two rows where the window allows, and syncNavbarOffset() in js/accessibility.js moves the page title down by what is
 * left. The sections "Boxes of fixed height" and "The bar itself" adapt the few boxes of fixed size that the wide letters did
 * not fit (measured, see the report).
 *
 * Everything except @font-face is screen only, like the font size (css/accessibility.css) and the high contrast: a
 * printout keeps its usual typeface and layout, and the font is not even downloaded for print.
 */

/* ---------- 1. Font faces ---------- */

@font-face {
	font-family: 'OpenDyslexic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/font/opendyslexic/OpenDyslexic-Regular.woff2') format('woff2'),
	     url('/font/opendyslexic/OpenDyslexic-Regular.woff') format('woff');
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/font/opendyslexic/OpenDyslexic-Bold.woff2') format('woff2'),
	     url('/font/opendyslexic/OpenDyslexic-Bold.woff') format('woff');
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/font/opendyslexic/OpenDyslexic-Italic.woff2') format('woff2'),
	     url('/font/opendyslexic/OpenDyslexic-Italic.woff') format('woff');
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('/font/opendyslexic/OpenDyslexic-BoldItalic.woff2') format('woff2'),
	     url('/font/opendyslexic/OpenDyslexic-BoldItalic.woff') format('woff');
}

@media screen {

	/* ---------- 2. Font family ---------- */

	/*
	 * Bootstrap sets font-family: inherit on inputs and buttons, but select2, the pickers and jQuery UI set their own,
	 * so the list is explicit. The last three lines are the places of the real stylesheets that set their own family
	 * and are not otherwise on the list: jQuery UI (.ui-widget, e.g. the calendar of the grid filters), the calendars of
	 * the date range picker, and the labels and messages of the eSavjetnik layout (css/esavjetnik.css).
	 */
	html.a11y-dyslexia body,
	html.a11y-dyslexia input, html.a11y-dyslexia button, html.a11y-dyslexia select, html.a11y-dyslexia textarea,
	html.a11y-dyslexia .form-control, html.a11y-dyslexia .btn, html.a11y-dyslexia .dropdown-menu,
	html.a11y-dyslexia .navbar, html.a11y-dyslexia .table, html.a11y-dyslexia .tooltip, html.a11y-dyslexia .popover,
	html.a11y-dyslexia .modal, html.a11y-dyslexia .select2-container, html.a11y-dyslexia .select2-drop,
	html.a11y-dyslexia .datepicker, html.a11y-dyslexia .daterangepicker, html.a11y-dyslexia .bootstrap-timepicker-widget,
	html.a11y-dyslexia .ui-autocomplete, html.a11y-dyslexia .jOrgChart, html.a11y-dyslexia #a11y-bar,
	html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3, html.a11y-dyslexia h4, html.a11y-dyslexia h5, html.a11y-dyslexia h6,
	html.a11y-dyslexia .ui-widget, html.a11y-dyslexia .ui-widget input, html.a11y-dyslexia .ui-widget select, html.a11y-dyslexia .ui-widget textarea, html.a11y-dyslexia .ui-widget button,
	html.a11y-dyslexia .daterangepicker .calendar th, html.a11y-dyslexia .daterangepicker .calendar td,
	html.a11y-dyslexia .control-label, html.a11y-dyslexia .formMainDiv label, html.a11y-dyslexia .msgDiv {
		font-family: 'OpenDyslexic', Verdana, 'Trebuchet MS', Arial, sans-serif !important;
	}

	/* ---------- 3. Spacing ---------- */

	html.a11y-dyslexia body {
		letter-spacing: 0.04em;
		word-spacing: 0.12em;
		line-height: 1.7;
		/* A word that is wider than its column (three narrow columns side by side, "Iskorišteno" and "Preostalo") breaks instead of being drawn over its neighbour. */
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/*
	 * The cells of a .table need their own two selectors: cosmo2.css sets the line height with ".table tbody > tr > td"
	 * and its kin (specificity 0,1,3), which beats "html.a11y-dyslexia td" (0,1,2).
	 */
	html.a11y-dyslexia p, html.a11y-dyslexia li, html.a11y-dyslexia td, html.a11y-dyslexia th, html.a11y-dyslexia label,
	html.a11y-dyslexia .table td, html.a11y-dyslexia .table th,
	html.a11y-dyslexia .form-control, html.a11y-dyslexia .dropdown-menu > li > a {
		line-height: 1.7;
	}

	html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3, html.a11y-dyslexia h4, html.a11y-dyslexia h5, html.a11y-dyslexia h6 {
		letter-spacing: 0.02em;
		line-height: 1.4;
	}

	/*
	 * Two places where css/fixes.css fixes the line height on purpose, and the rules above would undo it: the labels of the
	 * Yii forms are 30px high, like the fields next to them (so they stay level with them), and the number of a day in the
	 * calendars is one line of its own large size.
	 */
	html.a11y-dyslexia .yii-form-semis label {
		line-height: 30px;
	}

	html.a11y-dyslexia .date-label, html.a11y-dyslexia .date-label2 {
		line-height: 1em;
	}

	/*
	 * The browsers' own stylesheets reset letter-spacing and word-spacing on form controls to normal, so the spacing of
	 * <body> stops at them. Without this the text in fields and buttons would be the only text without the spacing.
	 */
	html.a11y-dyslexia input, html.a11y-dyslexia button, html.a11y-dyslexia select, html.a11y-dyslexia textarea {
		letter-spacing: inherit;
		word-spacing: inherit;
	}

	/* The button of a file field is drawn in the browser's own font unless it is told to take the one of the field. Two rules: an unknown pseudo-element drops the whole rule. */
	html.a11y-dyslexia input[type="file"]::file-selector-button {
		font-family: inherit;
		letter-spacing: inherit;
		word-spacing: inherit;
	}

	html.a11y-dyslexia input[type="file"]::-webkit-file-upload-button {
		font-family: inherit;
		letter-spacing: inherit;
		word-spacing: inherit;
	}

	/* ---------- 4. Exclusions: icons stay icons, code stays monospace ---------- */

	/* After the family rule above, so that they win where both match the same element (a .btn that also has .fa). */
	html.a11y-dyslexia .fa, html.a11y-dyslexia [class^="fa-"], html.a11y-dyslexia [class*=" fa-"] {
		font-family: FontAwesome !important;
		letter-spacing: 0;
		word-spacing: 0;
	}

	/*
	 * A few views put the icon class on an element that also holds the text ("Promijeni aktivni paket", "Odobreno"). The rule
	 * above then draws that text in Font Awesome, which has no letters, so the browser takes a serif font for it (the same
	 * with the mode off). Such an element gets the typeface for its text, and its icon, the ::before, keeps Font Awesome.
	 */
	html.a11y-dyslexia .fa:not(:empty), html.a11y-dyslexia [class^="fa-"]:not(:empty), html.a11y-dyslexia [class*=" fa-"]:not(:empty) {
		font-family: 'OpenDyslexic', Verdana, 'Trebuchet MS', Arial, sans-serif !important;
	}

	html.a11y-dyslexia .fa:not(:empty)::before, html.a11y-dyslexia [class^="fa-"]:not(:empty)::before, html.a11y-dyslexia [class*=" fa-"]:not(:empty)::before {
		font-family: FontAwesome !important;
	}

	html.a11y-dyslexia .glyphicon {
		font-family: 'Glyphicons Halflings' !important;
		letter-spacing: 0;
		word-spacing: 0;
	}

	/* Font Awesome 3 class names: nothing loads that font today, but the spacing must not reach them if it ever does. */
	html.a11y-dyslexia [class^="icon-"], html.a11y-dyslexia [class*=" icon-"] {
		letter-spacing: 0;
		word-spacing: 0;
	}

	html.a11y-dyslexia .ui-icon, html.a11y-dyslexia .select2-arrow b, html.a11y-dyslexia .caret {
		letter-spacing: 0;
	}

	html.a11y-dyslexia code, html.a11y-dyslexia pre, html.a11y-dyslexia kbd, html.a11y-dyslexia samp {
		font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
		letter-spacing: 0;
	}

	/* ---------- 4b. Boxes of fixed height ---------- */

	/*
	 * OpenDyslexic draws the marks of capital letters (Č Ć Š Ž) up to 1.3em above the baseline and the tails of g j p q y
	 * 0.26em below it: 1.56em in all, where Open Sans needs 1.1em. A box of fixed height then clips the letters or leaves
	 * them no room. Measured with the stylesheet as above (harness check-clip.js, zoom 85 to 150 %): .form-control (30px),
	 * .btn, .btn-sm, .btn-lg, the tabs, the navbar and the bar have room; these two did not:
	 */

	/* The chosen text of select2 sits in a box of 26px whose overflow is hidden, and the marks were cut off at the top. */
	html.a11y-dyslexia .select2-container .select2-choice > .select2-chosen {
		font-size: 14px;
		line-height: 28px;
	}

	/* .btn-xs is 22px high: the marks stuck out above the button (on the white page, white text is invisible there). */
	html.a11y-dyslexia .btn-xs {
		padding-top: 4px;
		padding-bottom: 1px;
	}

	/*
	 * The chosen items of a multiple select2 have a line height of 13px. A long name ("Splitsko-dalmatinska") no longer
	 * fitted on one line in the wide font, wrapped, and its two lines were drawn over each other. At 13px in an 18px line
	 * it fits again, the marks have room inside the item, and a name that still wraps has proper lines.
	 */
	html.a11y-dyslexia .select2-container-multi .select2-choices .select2-search-choice {
		font-size: 13px;
		line-height: 18px;
	}

	/*
	 * The terms of a description list (the names in tpl/user-activity.php) are one line of 160px with an ellipsis and hidden
	 * overflow: a name that fitted was cut off, and the line is too low for the marks of Č Š Ž, which were cut off at the top.
	 * They wrap instead and nothing is clipped (a float needs no overflow to hold its content).
	 */
	html.a11y-dyslexia .dl-horizontal dt {
		white-space: normal;
		overflow: visible;
	}

	/* The login box is 320px wide: the hint "Email / Korisničko ime" of its first field was cut off in the wide font. */
	html.a11y-dyslexia .login-box {
		max-width: 400px;
	}

	/* The title of the jQuery UI calendar (month and year) has 2.3em of margin on both sides for the two arrows; the wide font touched the right one. */
	html.a11y-dyslexia .ui-datepicker .ui-datepicker-title {
		font-size: 0.9em;
		letter-spacing: 0;
		word-spacing: 0;
	}

	/* ---------- 4c. The bar itself ---------- */

	/*
	 * The bar does not wrap from 768px up and its box hides what does not fit, and it is the way back out of this mode.
	 * In OpenDyslexic it needs about 1050px, where Open Sans needs about 690px, so its last buttons (reset, hide and, in a
	 * window under 800px, the switch of this very mode) went out of sight. No spacing, 12px, tighter buttons and only the
	 * icon of the title bring it down to about 740px.
	 */
	html.a11y-dyslexia #a11y-bar {
		font-size: 12px;
		letter-spacing: 0;
		word-spacing: 0;
	}

	html.a11y-dyslexia .a11y-bar__inner {
		gap: 3px;
	}

	html.a11y-dyslexia .a11y-btn {
		padding-left: 5px;
		padding-right: 5px;
	}

	html.a11y-dyslexia .a11y-bar__title {
		font-size: 0;
	}

	html.a11y-dyslexia .a11y-bar__title .fa {
		font-size: 14px;
	}

	/* ---------- 5. Navbar width ---------- */

	/*
	 * OpenDyslexic is much wider than Open Sans, and the administrator navbar (eight dropdowns and the user's name) is
	 * already close to the width of the container: it needs about 1130px in Open Sans and about 1550px in OpenDyslexic
	 * with the measures below, and the container is 1170px at most. It wraps, and the wrapped navbar covers the title
	 * unless syncNavbarOffset() in js/accessibility.js pushes #banner.page-header below it. The measures below only make
	 * the wrapped navbar smaller.
	 */
	html.a11y-dyslexia .navbar-nav > li > a {
		padding-left: 9px;
		padding-right: 9px;
		letter-spacing: 0;
		font-size: 13px;
	}

	html.a11y-dyslexia .navbar-brand {
		letter-spacing: 0;
	}

	/*
	 * Bootstrap 3.0 floats the brand, the items and the user's menu, and a floated list that does not fit next to the
	 * brand drops below it: the administrator navbar came out 4 rows (200px) high. As a flex row the items wrap inside
	 * the space that is left, and the user's menu stays at the right of the first row: 2 rows (100px) at 1200px and more,
	 * 3 rows at 992 to 1199px. The dropdowns are absolutely placed inside their li, so they open where they did.
	 */
	@media (min-width: 768px) {
		html.a11y-dyslexia .navbar-fixed-top > .container {
			display: flex;
			align-items: flex-start;
		}

		html.a11y-dyslexia .navbar-fixed-top > .container:before,
		html.a11y-dyslexia .navbar-fixed-top > .container:after {
			display: none;
		}

		html.a11y-dyslexia .navbar-fixed-top .navbar-header {
			flex: 0 0 auto;
		}

		html.a11y-dyslexia .navbar-fixed-top .navbar-collapse.collapse {
			display: flex !important;
			flex: 1 1 0%;
			min-width: 0;
			align-items: flex-start;
		}

		html.a11y-dyslexia .navbar-fixed-top .navbar-nav {
			display: flex;
			flex-wrap: wrap;
			float: none !important;
		}

		html.a11y-dyslexia .navbar-fixed-top .navbar-nav > li {
			float: none;
		}

		html.a11y-dyslexia .navbar-fixed-top .navbar-nav:not(.navbar-right) {
			flex: 1 1 0%;
			min-width: 0;
		}

		html.a11y-dyslexia .navbar-fixed-top .navbar-nav.navbar-right {
			flex: 0 0 auto;
			margin-left: auto;
		}
	}

	/*
	 * The menus of the navbar are fixed to the window (the navbar is fixed): what lies below the bottom edge cannot be
	 * reached. "Interno" has 30 lines. With the line height of 1.7 it was 644px high, 125px below a window of 650px, where
	 * it fits (647px) in the usual look. So they keep the usual line height.
	 */
	html.a11y-dyslexia .navbar .dropdown-menu > li > a {
		line-height: 1.428571429;
	}

}