/* ==========================================================================
   MATEJA BOLČINA — SKUPNI CSS  (mb-base.css)
   Naloži ga enkrat za celo stran, pred vsemi sekcijami.

   1.  Pisave (@font-face)
   2.  Design tokeni (barve, pisave, tipografska lestvica, razmiki)
   3.  Osnove (body, sidra, izbor, fokus)
   4.  Ponovljive komponente (.mb-*)
   5.  Odzivnost (tablični in mobilni tokeni)

   PISAVE: datoteke daj v assets/fonts/
     - Fenoom-Light.woff2
     - Fenoom-Light-Italic.woff2  (neobvezno)
     - Montserrat-Variable.woff2  (z latin-ext: č, š, ž)
   ========================================================================== */


/* ==========================================================================
   0. RESET (tema nima starša, zato osnove uredimo sami)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

.mb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================
   BACK TO TOP
========================================================== */

.mb-back-top {
  position: fixed;
  right: 30px;
  bottom: 28px;
  z-index: 999;

  display: flex;
  align-items: center;
  gap: 9px;

  color: #211F1D;
  text-decoration: none;

  /* skrit, dokler ne scrollamo */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease;
}


/* VIDEN PO SCROLLU */

.mb-back-top.is-visible {
  opacity: .65;
  visibility: visible;
  transform: translateY(0);
}


/* HOVER */

.mb-back-top.is-visible:hover {
  opacity: 1;
  transform: translateY(-3px);
}


/* BORDO PIKA */

.mb-back-top__dot {
  display: block;

  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: #7A2638;
}


/* PUŠČICA */

.mb-back-top__arrow {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
}


/* GLADKO POMIKANJE */

html {
  scroll-behavior: smooth;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

  .mb-back-top {
    right: 18px;
    bottom: 18px;
    gap: 7px;
  }

  .mb-back-top__dot {
    width: 8px;
    height: 8px;
  }

  .mb-back-top__arrow {
    font-size: 15px;
  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .mb-back-top {
    transition: none;
  }

}


/* ==========================================================================
   1. PISAVE
   ========================================================================== */

/*
  Preload (v <head>, ne v CSS):
  <link rel="preload" href="../fonts/Fenoom-Light.woff2"
        as="font" type="font/woff2" crossorigin>
*/

@font-face {
  font-family: "Fenoom Light";
  src: url("../fonts/Fenoom-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Poševna različica: če je nimaš, izbriši ta blok, brskalnik bo poševnico simuliral. */
@font-face {
  font-family: "Fenoom Light";
  src: url("../fonts/Fenoom-Light-Italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Montserrat kot variabilna pisava (300–500), vključuje latin-ext */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. DESIGN TOKENI
   ========================================================================== */

:root {

  /* Barve */
  --mb-ink:      #211F1D;
  --mb-ivory:    #F3EEE6;
  --mb-ivory-2:  #F7F2EB;
  --mb-oxblood:  #7A2638;
  --mb-stone:    #D6C6B5;
  --mb-olive:    #626450;

  /* Besedilo na svetlem ozadju */
  --mb-text:         var(--mb-ink);
  --mb-text-soft:    rgba(33, 31, 29, .74);
  --mb-text-muted:   rgba(33, 31, 29, .62);
  --mb-rule:         rgba(33, 31, 29, .16);

  /* Besedilo na temnem ozadju */
  --mb-on-dark:        var(--mb-ivory);
  --mb-on-dark-soft:   rgba(243, 238, 230, .78);
  --mb-on-dark-muted:  rgba(243, 238, 230, .62);
  --mb-on-dark-rule:   rgba(243, 238, 230, .22);

  /* Pisave */
  --mb-font-display: "Fenoom Light", "Iowan Old Style", Georgia, serif;
  --mb-font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tipografska lestvica (namizje) */
  --mb-h1:        clamp(44px, 5vw, 76px);
  --mb-h2:        clamp(40px, 5vw, 76px);
  --mb-h3:        clamp(30px, 2.6vw, 40px);
  --mb-lead:      15px;
  --mb-body:      14px;
  --mb-small:     12px;
  --mb-eyebrow:   11px;

  --mb-lh-display: 1.04;
  --mb-lh-body:    1.75;

  --mb-track-display: -.025em;
  --mb-track-label:   .24em;
  --mb-track-link:    .14em;

  /* Postavitev */
  --mb-container:   min(1320px, calc(100% - 112px));
  --mb-section-y:   110px;
  --mb-header-h:    84px;

  /* Gibanje */
  --mb-ease: cubic-bezier(.2, .6, .2, 1);
}


/* ==========================================================================
   3. OSNOVE
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--mb-header-h);   /* sidra ne zaidejo pod fiksno glavo */
}

body {
  font-family: var(--mb-font-body);
  color: var(--mb-text);
  background: var(--mb-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: var(--mb-oxblood);
  color: var(--mb-ivory);
}

:focus-visible {
  outline: 2px solid var(--mb-oxblood);
  outline-offset: 4px;
}

/* na temnih površinah je fokus svetel */
.mb-bg-ink :focus-visible,
.mb-bg-oxblood :focus-visible {
  outline-color: var(--mb-ivory);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   4. KOMPONENTE
   ========================================================================== */

/* Površine sekcij */

.mb-bg-ivory   { background: var(--mb-ivory);   color: var(--mb-text); }
.mb-bg-ink     { background: var(--mb-ink);     color: var(--mb-on-dark); }
.mb-bg-oxblood { background: var(--mb-oxblood); color: var(--mb-on-dark); }

.mb-section {
  padding-block: var(--mb-section-y);
}

.mb-container {
  width: var(--mb-container);
  margin-inline: auto;
}


/* Tipografija */

.mb-h1,
.mb-h2,
.mb-h3 {
  margin: 0;
  font-family: var(--mb-font-display);
  font-weight: 300;
  line-height: var(--mb-lh-display);
  letter-spacing: var(--mb-track-display);
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  color: inherit;
}

.mb-h1 { font-size: var(--mb-h1); }
.mb-h2 { font-size: var(--mb-h2); }
.mb-h3 { font-size: var(--mb-h3); line-height: 1.08; letter-spacing: -.015em; }

.mb-lead,
.mb-body {
  margin: 0;
  font-family: var(--mb-font-body);
  font-weight: 300;
  line-height: var(--mb-lh-body);
  color: var(--mb-text-soft);
}

.mb-lead { font-size: var(--mb-lead); }
.mb-body { font-size: var(--mb-body); }

.mb-bg-ink .mb-lead,
.mb-bg-ink .mb-body,
.mb-bg-oxblood .mb-lead,
.mb-bg-oxblood .mb-body {
  color: var(--mb-on-dark-soft);
}


/* Oznaka nad naslovom (eyebrow) — s piko ali brez */

.mb-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;

  font-family: var(--mb-font-body);
  font-size: var(--mb-eyebrow);
  font-weight: 500;
  letter-spacing: var(--mb-track-label);
  text-transform: uppercase;

  color: var(--mb-text-muted);
}

.mb-eyebrow img {
  display: block;
  width: 40px;
  height: 40px;
}

.mb-bg-ink .mb-eyebrow,
.mb-bg-oxblood .mb-eyebrow {
  color: var(--mb-on-dark-muted);
}


/* Povezava s podčrtanjem in puščico */

.mb-link,
.mb-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  width: fit-content;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);

  font-family: var(--mb-font-body);
  font-size: var(--mb-small);
  font-weight: 500;
  letter-spacing: var(--mb-track-link);
  text-transform: uppercase;
  text-decoration: none;

  color: inherit;

  transition: border-color .3s ease, color .3s ease;
}

.mb-link::after {
  content: "→";
  font-size: 16px;
  transition: transform .35s ease;
}

.mb-link:hover {
  border-bottom-color: currentColor;
}

.mb-link:hover::after {
  transform: translateX(6px);
}

.mb-bg-ivory .mb-link:hover {
  color: var(--mb-oxblood);
}


/* Gumb z obrobo */

.mb-btn,
.mb-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;

  min-width: 280px;
  padding: 18px 24px;

  border: 1px solid color-mix(in srgb, currentColor 72%, transparent);

  font-family: var(--mb-font-body);
  font-size: var(--mb-small);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;

  color: inherit;

  transition: background .25s ease, color .25s ease;
}

.mb-btn:hover {
  background: var(--mb-ivory);
  color: var(--mb-oxblood);
}


/* Pika (znak blagovne znamke) */

.mb-dot {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mb-dot--sm {
  width: 30px;
  height: 30px;
}


/* Slika, ki zapolni okvir in ne vpliva na višino vrstic */

.mb-cover {
  position: relative;
  overflow: hidden;
}

.mb-cover > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .mb-link,
  .mb-link::after,
  .mb-btn {
    transition: none;
  }
}


/* ==========================================================================
   5. ODZIVNOST (spreminjamo samo vrednosti tokenov)
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --mb-container: min(1320px, calc(100% - 64px));
    --mb-section-y: 90px;
  }
}

@media (max-width: 767px) {
  :root {
    --mb-h1: clamp(38px, 11vw, 50px);
    --mb-h2: clamp(38px, 11vw, 50px);
    --mb-h3: 32px;

    --mb-container: calc(100% - 36px);
    --mb-section-y: 70px;
    --mb-header-h: 68px;
  }
}