/* ==========================================================================
   BalkanNews: temporary maintenance pages
   Shared stylesheet for balkannews-com-tr.html (Turkish) and balkannews-ba.html (Bosnian).

   Files in this folder (keep them together, same folder):
     balkannews-com-tr.html                       Turkish page  (balkannews.com.tr)
     balkannews-ba.html                           Bosnian page  (balkannews.ba)
     styles.css                                   this file
     sarajevo-background.jpg                      background photo, 2560 x 1440
     red-hat-display-extrabold-latin.woff2        font, basic Latin
     red-hat-display-extrabold-latin-ext.woff2    font, Turkish/Bosnian letters (İ, Ş, Ğ, Č, Ć, Đ, Š, Ž)

   Font: Red Hat Display ExtraBold, SIL Open Font License 1.1 (https://openfontlicense.org)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Font
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("red-hat-display-extrabold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+2000-206F;
}

@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("red-hat-display-extrabold-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-017F;
}


/* --------------------------------------------------------------------------
   2. Design tokens
   1em = headline font size. All proportions were measured
   from the supplied 3840 x 2160 artwork.
   -------------------------------------------------------------------------- */
:root {
  --red: #bd1717;
  --white: #fff;
  --ink: #1b1410;
  --font: "Red Hat Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --track: -0.037em;      /* letter-spacing of all display type */
  --cap: 0.7em;           /* cap height of Red Hat Display */
  --bar: 0.166em;         /* bracket bar thickness */
  --arm: 0.472em;         /* bracket arm length */
  --rule: 0.019em;        /* thin white rule above and below the red box */
  --box-h: 0.912em;       /* red box height */
  --box-px: 0.056em;      /* red box side padding */
  --logo-pad: 0.1485em;   /* bracket overhang above and below the box */

  /* Viewport height unit: small-viewport (svh) where supported, see below. */
  --vh: 1vh;

  /* Page margins */
  --gx: max(20px, 5vw, env(safe-area-inset-left), env(safe-area-inset-right));
  --gy: max(64px, calc(9 * var(--vh)));

  /* Size of the text block, in em (set per language below) */
  --fit-w: 9.36;
  --fit-h: 3.62;

  /* Fluid type: the artwork's own scale (6.287vw), capped so the whole block always fits. */
  --fs: min(
    6.287vw,
    calc((100vw - 2 * var(--gx)) / var(--fit-w)),
    calc((100 * var(--vh) - 2 * var(--gy)) / var(--fit-h))
  );
}

/* Mobile browsers: measure against the visible area, not behind the toolbars. */
@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

html[lang="tr"] { --fit-w: 7.75; --fit-h: 4.75; }
html[lang="bs"] { --fit-w: 7.55; --fit-h: 3.62; }

/* Portrait screens: type is sized to the screen width, not to the 16:9 artwork. */
@media (orientation: portrait) {
  :root {
    --gy: max(72px, calc(10 * var(--vh)));
    --fs: min(
      calc((100vw - 2 * var(--gx)) / var(--fit-w)),
      calc((100 * var(--vh) - 2 * var(--gy)) / var(--fit-h))
    );
  }
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Visually hidden, still read by screen readers and search engines */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   4. Background: Sarajevo at sunset
   -------------------------------------------------------------------------- */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #6b4a33;   /* shown for a moment while the photo loads */
}

.scene__photo {
  position: absolute;
  inset: 0;
  background-image: url("sarajevo-background.jpg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: 50% 55%;
  animation: settle 16s cubic-bezier(.22, .61, .36, 1) both;
}

/* Very light vignette: calms the edges and keeps the white type crisp */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .28) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .18) 100%);
}


/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--gy) var(--gx);
}

.headline {
  margin: 0;
  font-size: var(--fs);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .02em .25em rgba(0, 0, 0, .18);
}

.line {
  display: block;
  line-height: var(--cap);                       /* line box = cap height, so the gaps below are exact */
  letter-spacing: var(--track);
  padding-inline-end: calc(-1 * var(--track));   /* cancels the trailing negative tracking, keeps it centred */
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. [ BALKANNEWS ] lock-up
   -------------------------------------------------------------------------- */
.logo {
  position: relative;
  display: inline-block;
  padding: var(--logo-pad) var(--bar);
  line-height: 1;
  text-shadow: none;
}

/* The two white brackets */
.logo::before,
.logo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--arm);
  border: solid var(--white);
  border-width: calc(var(--logo-pad) + var(--rule)) 0;
}

.logo::before {
  left: 0;
  border-left-width: var(--bar);
}

.logo::after {
  right: 0;
  border-right-width: var(--bar);
}

/* The red box */
.logo__box {
  position: relative;
  display: block;
  height: calc(var(--box-h) + 2 * var(--rule));
  padding-inline: var(--box-px) calc(var(--box-px) - var(--track));
  border-block: var(--rule) solid var(--white);
  background: var(--red);
  line-height: var(--box-h);
  letter-spacing: var(--track);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   7. Turkish page: DAHA İYİ BİR / [BALKANNEWS] / İÇİN / KISA BİR MOLA...
   "İÇİN" sits on its own line under the lock-up on every screen.
   -------------------------------------------------------------------------- */
html[lang="tr"] .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: .236em;
}

html[lang="tr"] .word {
  margin-top: .3em;
  line-height: var(--cap);
  letter-spacing: var(--track);
  padding-inline-end: calc(-1 * var(--track));
  white-space: nowrap;
}

html[lang="tr"] .l3 {
  margin-top: .36em;
}


/* --------------------------------------------------------------------------
   8. Bosnian page: KRATKA PAUZA / ZA BOLJI / [BALKANNEWS]
   -------------------------------------------------------------------------- */
html[lang="bs"] .l2 {
  margin-top: .476em;
}

html[lang="bs"] .headline > .logo {
  display: block;
  width: fit-content;
  margin: .182em auto 0;
}


/* --------------------------------------------------------------------------
   9. Motion (switched off for visitors who prefer reduced motion)
   -------------------------------------------------------------------------- */
.headline > * {
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}

.headline > :nth-child(2) { animation-delay: .12s; }
.headline > :nth-child(3) { animation-delay: .24s; }

.logo::before { animation: from-left .9s .35s cubic-bezier(.2, .7, .2, 1) both; }
.logo::after { animation: from-right .9s .35s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes settle {
  from { transform: scale(1.07); }
  to { transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(.18em); }
  to { opacity: 1; transform: none; }
}

@keyframes from-left {
  from { opacity: 0; transform: translateX(.35em); }
  to { opacity: 1; transform: none; }
}

@keyframes from-right {
  from { opacity: 0; transform: translateX(-.35em); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}