/* The display's stylesheet.
 *
 * Replaces three third-party downloads with one local file:
 *
 *   fonts.googleapis.com   two stylesheets, then the font files they name
 *   www.w3schools.com      23 kB of w3.css, for nineteen class names
 *
 * The w3schools one was the worrying one. It answers 403 to anything that does
 * not look like a browser, so the Pi gets through today only because Chromium
 * sends a browser user-agent -- a third-party site with bot protection sitting
 * in the boot path of every unit in the field. If they tighten it, every display
 * goes unstyled at once and nothing reports why.
 *
 * The rules below are the real w3.css rules for the classes the page actually
 * uses, extracted rather than rewritten, so the layout is unchanged to the pixel.
 * w3-nowrap is not among them: it is used in the markup and has never existed in
 * w3.css, so it has never done anything. Left alone rather than "fixed", because
 * giving it meaning now would change a layout that currently works.
 */

/* ---------------------------------------------------------------- the fonts */

@font-face {
  font-family: 'Squada One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/squada-one.woff2') format('woff2');
}

/* Arabic only: Amiri is used for the recited ayah and nothing else, so the
   latin subsets Google also serves are 29 kB nobody would ever see. */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/amiri-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FE74, U+FE76-FEFC;
}

/* ------------------------------------------------------ w3.css, what is used
 *
 * "What is used" means more than the classes in the markup.
 *
 * The first attempt kept only rules naming a w3- class, and the page leans hard
 * on the ones that do not. Without `html{box-sizing:border-box}` the prayer
 * cards became content-box, so six no longer fitted a row and Isha wrapped
 * underneath -- and the am/pm mark shifted for the same reason. Without
 * `body{margin:0}` the browser's default margin came back as a white frame
 * round the whole screen. `img{vertical-align:middle}` was missing too, which
 * would have left every prayer icon and the weather glyph sitting a few pixels
 * low on the baseline.
 *
 * So every element-level rule in w3.css is kept, whole and unedited, and only
 * the class rules are filtered. That is 5.6 kB of 23 and no judgement calls --
 * deciding which element rules "matter" is precisely what went wrong.
 */

html {box-sizing:border-box}
*,*:before,*:after {box-sizing:inherit}
html {-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body {margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section {display:block}
summary {display:list-item}
audio,canvas,progress,video {display:inline-block}
progress {vertical-align:baseline}
audio:not([controls]) {display:none;height:0}
[hidden],template {display:none}
a {background-color:transparent}
a:active,a:hover {outline-width:0}
abbr[title] {border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong {font-weight:bolder}
dfn {font-style:italic}
mark {background:#ff0;color:#000}
small {font-size:80%}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub {bottom:-0.25em}
sup {top:-0.5em}
figure {margin:1em 40px}
img {border-style:none}
code,kbd,pre,samp {font-family:monospace,monospace;font-size:1em}
hr {box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup {font:inherit;margin:0}
optgroup {font-weight:bold}
button,input {overflow:visible}
button,select {text-transform:none}
button,[type=button],[type=reset],[type=submit] {-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {outline:1px dotted ButtonText}
fieldset {border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend {color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
textarea {overflow:auto}
[type=checkbox],[type=radio] {padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {height:auto}
[type=search] {-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration {-webkit-appearance:none}
::-webkit-file-upload-button {-webkit-appearance:button;font:inherit}
html,body {font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}
html {overflow-x:hidden}
h1 {font-size:36px}
h2 {font-size:30px}
h3 {font-size:24px}
h4 {font-size:20px}
h5 {font-size:18px}
h6 {font-size:16px}
h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}
hr {border:0;border-top:1px solid #eee;margin:20px 0}
img {vertical-align:middle}
a {color:inherit}

/* ------------------------------------------ the classes in use */
@media (min-width:601px){
  .w3-col.m1{width:8.33333%}
  .w3-col.m2{width:16.66666%}
  .w3-col.m3,.w3-quarter{width:24.99999%}
  .w3-col.m4,.w3-third{width:33.33333%}
  .w3-col.m5{width:41.66666%}
  .w3-col.m6,.w3-half{width:49.99999%}
  .w3-col.m7{width:58.33333%}
  .w3-col.m8,.w3-twothird{width:66.66666%}
  .w3-col.m9,.w3-threequarter{width:74.99999%}
  .w3-col.m10{width:83.33333%}
  .w3-col.m11{width:91.66666%}
  .w3-col.m12{width:99.99999%}
}
@media (min-width:993px){
  .w3-col.l1{width:8.33333%}
  .w3-col.l2{width:16.66666%}
  .w3-col.l3{width:24.99999%}
  .w3-col.l4{width:33.33333%}
  .w3-col.l5{width:41.66666%}
  .w3-col.l6{width:49.99999%}
  .w3-col.l7{width:58.33333%}
  .w3-col.l8{width:66.66666%}
  .w3-col.l9{width:74.99999%}
  .w3-col.l10{width:83.33333%}
  .w3-col.l11{width:91.66666%}
  .w3-col.l12{width:99.99999%}
}
.w3-monospace {font-family:monospace}
.w3-badge,.w3-tag {background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}
.w3-tooltip,.w3-display-container {position:relative}
.w3-center .w3-bar {display:inline-block;width:auto}
.w3-bar-block.w3-center .w3-bar-item {text-align:center}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after {content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter {float:left;width:100%}
.w3-col.s1 {width:8.33333%}
.w3-col.s2 {width:16.66666%}
.w3-col.s3 {width:24.99999%}
.w3-col.s4 {width:33.33333%}
.w3-col.s5 {width:41.66666%}
.w3-col.s6 {width:49.99999%}
.w3-col.s7 {width:58.33333%}
.w3-col.s8 {width:66.66666%}
.w3-col.s9 {width:74.99999%}
.w3-col.s10 {width:83.33333%}
.w3-col.s11 {width:91.66666%}
.w3-col.s12 {width:99.99999%}
.w3-display-topmiddle {position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover {display:block}
.w3-display-container:hover span.w3-display-hover {display:inline-block}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col {padding:0 8px}
.w3-container,.w3-panel {padding:0.01em 16px}
.w3-card-4,.w3-hover-shadow:hover {box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-small {font-size:12px!important}
.w3-center {text-align:center!important}
.w3-padding {padding:8px 16px!important}
.w3-right {float:right!important}
.w3-green,.w3-hover-green:hover {color:#fff!important;background-color:#4CAF50!important}
.w3-orange,.w3-hover-orange:hover {color:#000!important;background-color:#ff9800!important}
.w3-yellow,.w3-hover-yellow:hover {color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover {color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover {color:#fff!important;background-color:#000!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover {color:#3a3a3a!important}