/* Added 18 Oct 2026 (Darko): company details in the footer, the BilVakten product
   slide and the /contact, /privacy and /support pages, for Apple and Google
   developer verification. styles.css is the minified 2016 template and is left
   untouched; everything new lives here. */

/* ---- Footer: company details, page links ---- */
#footer .company {
  font-style: normal;
  margin: 6px auto 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#footer .company span { white-space: nowrap; }
#footer .company span + span::before { content: "\00B7"; margin: 0 .55em; opacity: .651; }
#footer .company a,
#footer .footer_links a { color: #fff; }
#footer .company a:hover,
#footer .footer_links a:hover { text-decoration: underline; }
#footer .footer_links { margin: 14px 0 10px; }
#footer .footer_links a { opacity: .851; margin: 0 .8em; }
#footer .footer_links a[aria-current="page"] { opacity: 1; font-weight: bold; }
#footer .copyright { margin-top: 4px; }

/* One line from about 1000 px up; below that the line would wrap and start a row
   with a stray dot, so the items stack one per line instead. */
@media screen and (max-width: 1000px) {
  #footer .company { flex-direction: column; }
  #footer .company span { white-space: normal; }
  #footer .company span + span::before { content: none; }
}

@media screen and (max-width: 640px) {
  #footer .footer_links a { display: inline-block; margin: 4px .6em; }
}

/* ---- Products: BilVakten on a phone (it has no website to screenshot) ----
   Sized off --h so it matches the browser frame's height at each breakpoint
   of the template (349 / 265 / 253 / 237 / 198 px). */
.app_phone {
  --h: 349px;
  float: right;
  margin-right: 70px;
  margin-bottom: 18px;
  width: calc(var(--h) * .52);
  height: var(--h);
  padding: calc(var(--h) * .03);
  border-radius: calc(var(--h) * .085);
  background: #1b1c1d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 14px rgba(0, 0, 0, .12);
  position: relative;
  text-align: left;
}
.app_phone_screen {
  height: 100%;
  border-radius: calc(var(--h) * .06);
  background: #e9ecef;
  overflow: hidden;
  position: relative;
  font-size: calc(var(--h) * .037);
  line-height: 1.35;
}
/* Swedish parking sign: white P on road-sign blue. */
.app_sign {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 9%;
  background: #1d5ca8;
  border: calc(var(--h) * .007) solid #fff;
  box-shadow: 0 0 0 1px #1d5ca8;
  color: #fff;
  font-family: ProximaNova-Black, ProximaNova, 'Helvetica Neue', Arial, sans-serif;
  font-size: calc(var(--h) * .14);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app_note {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 9%;
  padding: .8em .9em;
  border-radius: .9em;
  background: #fff;
  color: #1b1c1d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.app_note strong { display: block; margin-bottom: .2em; font-family: ProximaNova-Black, ProximaNova, 'Helvetica Neue', Arial, sans-serif; }

/* 481-900 px (tablets): the template kept two columns here and its scaled browser
   frame spilled over the slide's text and into the next slide (live before this
   change too). Stack picture over text, the way the template's own <=480 px
   layout does. */
@media screen and (min-width: 481px) and (max-width: 900px) {
  #products .ui.equal.width.grid.two-cols .column { width: 100%; padding: 0 24px; }
  #products .ui.equal.width.grid.two-cols .column.left.aligned { max-width: 560px; margin: 0 auto; }
  #products .blank_browser { -webkit-transform: none; -ms-transform: none; transform: none; float: none; margin: 0 auto 26px; }
  #products .app_phone { float: none; margin: 0 auto 26px; }
}

@media screen and (max-width: 1024px) { .app_phone { --h: 265px; margin-right: 50px; } }
@media screen and (max-width: 800px) { .app_phone { margin-right: 30px; } }
@media screen and (max-width: 480px) { .app_phone { --h: 253px; float: none; margin: 0 auto 26px; } }
@media screen and (max-width: 397px) { .app_phone { --h: 237px; } }
@media screen and (max-width: 320px) { .app_phone { --h: 198px; } }

/* ---- Sub-pages: /contact, /privacy, /support ---- */
.page_head {
  background: url(../images/2880x1800_bg_productized_consulting_for_designers.jpg) right center / cover no-repeat !important;
  padding: 140px 0 70px !important;
  text-align: center;
}
.page_head .header { margin: 0; }
.page_head .sub.header { margin-top: 10px; }
.page_body { padding: 60px 0 80px !important; background: #f2f2f2 !important; }
.page_body .ui.text.container { font-size: 20px; line-height: 1.6; }
.page_body p { margin: 0 0 1em; }
.page_body a { color: #1b1c1d; text-decoration: underline; }
.page_body .note { font-size: 16px; opacity: .75; }

.company_card {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 32px;
  margin: 0;
}
.company_card dt { font-family: ProximaNova-Black, ProximaNova, 'Helvetica Neue', Arial, sans-serif; }
.company_card dd { margin: 0; }

@media screen and (max-width: 640px) {
  .page_head { padding: 100px 16px 44px !important; }
  .page_body { padding: 36px 0 56px !important; }
  .page_body .ui.text.container { font-size: 18px; }
  .company_card { grid-template-columns: 1fr; gap: 2px; }
  .company_card dd { margin-bottom: 14px; }
}

/* Short sub-pages: keep the footer at the bottom of the screen (no white strip under it). */
body.subpage .pusher { min-height: 100vh; display: flex; flex-direction: column; }
body.subpage .page_body { flex: 1 0 auto; }

/* Darko, 19 Oct 2026: wide screens scrolled sideways by 14 px (live since 2016).
   The #about and #footer grids keep Semantic UI's -1rem side margins inside
   segments with no side padding, so they ran 14 px past the right edge above
   1024 px (the template zeroes them at 1024 and below). #products is NOT
   included: it has 25 px side padding, its grid never overflowed, and zeroing it
   narrows the slider so the next slide's browser frame covers the text. */
#about > .ui.grid,
#footer > .ui.grid { margin-left: 0; margin-right: 0; }

/* 1025-1124 px: the full 494 px browser frame (plus its 15 px margin) is wider
   than its column, so it spilled out to the left and covered the end of the
   BilVakten text from the next slide (live before too, 1025-1095 px). Use the
   template's own 1024 px frame size there. */
@media screen and (min-width: 1025px) and (max-width: 1124px) {
  #products .blank_browser { border-radius: 7px; width: 376px; height: 265px; background-size: cover; }
  #products .blank_browser .browser_url { font-size: 14px; top: 10px; left: 84px; }
  #products .blank_browser .image { width: 372px; height: 220px; top: 43px; border-radius: 0 0 7px 7px; }
  #products .app_phone { --h: 265px; }
}