/* =========================================================
   TANDARA — SITE SHELL

   Zajednički standard lijevog stupca za:
   - index HR / EN
   - glavne podstranice
   - glavne rodoslovne grane HR / EN

   Izgled je usklađen s provjerenim sidebarom
   8 glavnih stranica.

   OVA DATOTEKA SADRŽI:
   - raspored stranice
   - lijevi stupac
   - HR / HOME / EN u jednom redu
   - glavni izbornik
   - AUTOR | fotografija | Jure / Tandara
   - FlagCounter
   - responsive prikaz

   OVA DATOTEKA NE SADRŽI:
   - početno stablo
   - hotspotove
   - rodoslovne podatke
   - dijagrame
   - print
   - posebne zakrpe pojedinih grana
   ========================================================= */


/* =========================================================
   OSNOVNE VRIJEDNOSTI
   ========================================================= */

:root {
  --shell-width:
    calc(300px + 2cm);

  --shell-background:
    #e7d3b0;

  --content-background:
    #e7c191;

  --shell-text:
    #4a3b2a;

  --shell-heading:
    #3b2f22;

  --shell-accent:
    #d4af37;

  --shell-border:
    #7a7a7a;

  --shell-soft-border:
    rgba(0, 0, 0, 0.08);

  --shell-top-control-size:
    66px;

  --shell-author-photo-size:
    170px;

  --shell-font:
    Georgia,
    "Times New Roman",
    serif;
}


/* =========================================================
   STRANICA I RASPORED
   ========================================================= */

html {
  min-height: 100%;
}

body {
  margin: 0;

  min-height: 100vh;
}

.site-layout {
  display: grid;

  grid-template-columns:
    var(--shell-width)
    minmax(0, 1fr);

  align-items: start;

  width: 100%;
  min-height: 100vh;
}

.site-content {
  width: 100%;
  min-width: 0;
  min-height: 100vh;

  background:
    var(--content-background);
}


/* =========================================================
   LIJEVI STUPAC
   ========================================================= */

.site-shell {
  position: sticky;
  top: 0;

  z-index: 20;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  width:
    var(--shell-width);

  height: 100vh;
  max-height: 100vh;

  margin: 0;

  padding:
    8px
    0
    16px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    var(--shell-background);

  border-right:
    4px solid
    var(--shell-border);

  color:
    var(--shell-text);

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-shell::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.site-shell,
.site-shell * {
  box-sizing: border-box;
}


/* =========================================================
   GORNJI RED

   HR ZASTAVA — HOME — EN ZASTAVA

   Sva tri elementa imaju ISTU VISINU.
   ========================================================= */

.site-shell__top {
  display: grid;

  grid-template-columns:
    max-content
    var(--shell-top-control-size)
    max-content;

  align-items: center;
  justify-content: center;

  gap: 10px;

  width: 100%;

  margin:
    0
    0
    6px;

  padding: 0;
}

.site-shell__top[hidden] {
  display: none;
}

.site-shell__top-control {
  display: flex;

  align-items: center;
  justify-content: center;

  height:
    var(--shell-top-control-size);

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  line-height: 0;

  text-decoration: none;

  transition:
    filter 0.15s ease;
}


/* =========================================================
   HOME
   ========================================================= */

.site-shell__home-control {
  width:
    var(--shell-top-control-size);

  height:
    var(--shell-top-control-size);
}

.site-shell__home-control img {
  display: block;

  width:
    var(--shell-top-control-size);

  height:
    var(--shell-top-control-size);

  object-fit:
    contain;
}


/* =========================================================
   ZASTAVE

   Visina je jednaka HOME tipki.
   Širina ostaje prema omjeru slike.
   ========================================================= */

.site-shell__flag-control {
  width: auto;

  min-width: 0;
}

.site-shell__flag-control img {
  display: block;

  width: auto;

  height:
    var(--shell-top-control-size);

  max-width: none;

  object-fit:
    contain;

  border-radius:
    5px;
}


/* =========================================================
   HOVER / AKTIVNI JEZIK

   Nema pomicanja elemenata.
   ========================================================= */

.site-shell__top-control:hover,
.site-shell__top-control:focus-visible {
  filter:
    drop-shadow(
      0 0 5px
      rgba(212, 175, 55, 0.85)
    );
}

.site-shell__top-control:focus-visible {
  outline:
    2px solid
    var(--shell-accent);

  outline-offset:
    2px;
}

.site-shell__top-control[aria-current="page"] {
  filter:
    drop-shadow(
      0 0 4px
      rgba(212, 175, 55, 0.75)
    );
}


/* =========================================================
   NASLOV
   ========================================================= */

.site-shell__title {
  width: 100%;

  margin:
    2px
    0
    10px;

  padding:
    0
    8px;

  color:
    var(--shell-heading);

  font-family:
    var(--shell-font);

  font-size:
    24px;

  line-height:
    1.2;

  font-weight:
    700;

  text-align:
    center;
}


/* =========================================================
   GLAVNA NAVIGACIJA
   ========================================================= */

.site-shell__navigation {
  width: 100%;

  margin: 0;
  padding: 0;
}

.site-shell__menu {
  width: 100%;

  margin: 0;

  padding:
    0
    20px;

  list-style:
    none;
}

.site-shell__menu li {
  display: flex;

  align-items: center;

  gap: 9px;

  width: 100%;

  margin: 0;

  padding:
    6px
    0;

  border-bottom:
    1px solid
    var(--shell-soft-border);

  border-left:
    2px solid
    transparent;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}


/*
   VAŽNO:
   nema padding-left animacije
   i ništa se ne pomiče na hover.
*/

.site-shell__menu li:hover {
  background:
    rgba(212, 175, 55, 0.10);

  border-left-color:
    var(--shell-accent);
}

.site-shell__menu li > img {
  display: block;

  flex:
    0
    0
    24px;

  width: 24px;
  height: 24px;

  object-fit:
    contain;
}

.site-shell__menu a {
  min-width: 0;

  color:
    var(--shell-text);

  font-family:
    var(--shell-font);

  font-size:
    17px;

  line-height:
    1.2;

  font-weight:
    400;

  text-decoration:
    none;

  overflow-wrap:
    anywhere;
}

.site-shell__menu a:hover,
.site-shell__menu a:focus-visible {
  color:
    #7a5e3a;
}

.site-shell__menu
a[aria-current="page"] {
  font-weight:
    700;
}

.site-shell__menu a:focus-visible {
  outline:
    2px solid
    var(--shell-accent);

  outline-offset:
    3px;

  border-radius:
    2px;
}


/* =========================================================
   AUTOR

   AUTOR | FOTOGRAFIJA | JURE
                       | TANDARA

   Fotografija ima fiksnu poziciju.
   Tekst lijevo i desno je ne može pomaknuti.
   ========================================================= */

.site-shell__author-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    var(--shell-author-photo-size)
    minmax(0, 1fr);

  align-items: center;

  width: 100%;

  margin:
    clamp(14px, 2.2vh, 26px)
    0
    10px;

  padding:
    0
    8px;
}

.site-shell__author-row[hidden] {
  display: none;
}


/* lijevo — AUTOR / AUTHOR */

.site-shell__author-label {
  min-width: 0;

  padding-right:
    6px;

  color:
    var(--shell-heading);

  font-family:
    var(--shell-font);

  font-size:
    clamp(
      10px,
      1vw,
      14px
    );

  line-height:
    1.1;

  font-weight:
    700;

  text-align:
    right;

  white-space:
    nowrap;
}


/* sredina — fotografija */

.site-shell__author-photo {
  display: block;

  width:
    var(--shell-author-photo-size);

  margin: 0;
  padding: 0;

  text-decoration:
    none;
}

.site-shell__author-photo img {
  display: block;

  width:
    var(--shell-author-photo-size);

  height:
    auto;

  margin: 0;

  border:
    3px solid
    #b99867;

  border-radius:
    12px;

  box-shadow:
    0 3px 8px
    rgba(0, 0, 0, 0.25);
}

.site-shell__author-photo:hover img,
.site-shell__author-photo:focus-visible img {
  border-color:
    var(--shell-accent);

  box-shadow:
    0 0 10px
    rgba(212, 175, 55, 0.45);
}

.site-shell__author-photo:focus-visible {
  outline: none;
}


/* desno — ime u dva reda */

.site-shell__author-name {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: center;

  min-width: 0;

  padding-left:
    7px;

  color:
    var(--shell-heading);

  font-family:
    var(--shell-font);

  font-size:
    clamp(
      12px,
      1.15vw,
      17px
    );

  line-height:
    1.12;

  font-weight:
    700;

  text-align:
    left;
}

.site-shell__author-name span {
  display: block;

  max-width: 100%;

  white-space:
    nowrap;
}


/* =========================================================
   FLAGCOUNTER
   ========================================================= */

.site-shell__flagbox {
  position: relative;

  width:
    calc(100% - 32px);

  margin:
    0 auto;

  padding: 0;

  text-align:
    left;
}

.site-shell__flagbox > a {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;
}

.site-shell__flagbox img {
  display: block;

  width: 100%;
  height: auto;

  max-width: none;

  border: 0;
}

.site-shell__flag-title {
  position: absolute;

  top: 1px;
  left: 1px;

  z-index: 5;

  display: flex;

  align-items: center;

  min-width:
    116px;

  height:
    24px;

  margin: 0;

  padding:
    0
    5px
    0
    2px;

  background:
    #ffffff;

  color:
    #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    17px;

  line-height:
    24px;

  font-weight:
    700;

  white-space:
    nowrap;
}

.site-shell__flagbox a:hover,
.site-shell__flagbox a:focus-visible {
  outline:
    2px solid
    var(--shell-accent);

  outline-offset:
    3px;

  border-radius:
    6px;
}


/* =========================================================
   SKRIVENI PRISTUPAČNI TEKST
   ========================================================= */

.site-shell__visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

  clip:
    rect(0 0 0 0);

  clip-path:
    inset(50%);

  border: 0;

  white-space:
    nowrap;
}


/* =========================================================
   TABLET / UŽI EKRAN
   ========================================================= */

@media (max-width: 900px) {

  .site-layout {
    display: block;
  }

  .site-content {
    min-height: 0;
  }

  .site-shell {
    position: relative;
    top: auto;

    width: 100%;

    height: auto;
    max-height: none;

    overflow: visible;

    border-right: 0;

    border-bottom:
      4px solid
      var(--shell-border);
  }

  .site-shell__menu {
    max-width:
      520px;

    margin-left:
      auto;

    margin-right:
      auto;
  }

}


/* =========================================================
   MALI MOBITEL
   ========================================================= */

@media (max-width: 420px) {

  :root {
    --shell-top-control-size:
      56px;

    --shell-author-photo-size:
      150px;
  }

  .site-shell__top {
    gap:
      8px;
  }

  .site-shell__title {
    font-size:
      21px;
  }

  .site-shell__menu {
    padding-left:
      14px;

    padding-right:
      14px;
  }

  .site-shell__menu a {
    font-size:
      16px;
  }

  .site-shell__author-row {
    padding:
      0
      4px;
  }

  .site-shell__author-label {
    padding-right:
      4px;

    font-size:
      clamp(
        9px,
        3vw,
        12px
      );
  }

  .site-shell__author-name {
    padding-left:
      4px;

    font-size:
      clamp(
        11px,
        3.5vw,
        15px
      );
  }

}