/* ============================================================
   ber-nard.si rebuild — shared design system.
   Replica of the ber-nard.si (Framer) design system, extracted
   from the live site's CSS/DOM (2026-07-08) and pixel-verified
   at 1920/1600/1440/1300/1000/810/600 px on the svetovanje page.
   Framer declares six breakpoints (>=1920, 1740-1919.98,
   1440-1739.98, 1280-1439.98, 810-1279.98, <=809.98) but renders
   fluid within each range; real switches happen at 1280 and 810.
   ============================================================ */
@font-face {
  font-family: "PolySans Neutral";
  src: url("/assets/polysans-neutral.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: "PolySans Neutral", "Inter", sans-serif;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 400;
  color: rgb(32, 32, 32);
  background: #fff;
  display: flex;
  justify-content: center;
}
/* --- canvas --- */
.canvas {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  width: 100%;
  padding: 120px 0 120px 40px;
  position: relative;
}
/* left spacer column reserves room for the fixed rail */
.spacer { flex: none; width: 440px; }
/* --- fixed rail elements (desktop + tablet) --- */
.logo {
  position: fixed;
  top: 120px;
  left: 40px;
  width: 86px;
  height: 18px;
  z-index: 1;
  display: block;
}
.logo img, .logo svg { width: 100%; height: 100%; display: block; }
h1.pagetitle {
  position: fixed;
  top: 160px;
  left: 38px;
  z-index: 1;
  font-size: 70px;
  line-height: 70px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgb(32, 32, 32);
  white-space: pre;
}
.nav {
  position: fixed;
  bottom: 120px;
  left: 40px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nav a {
  font-family: "PolySans", sans-serif; /* live site never loads this cut -> system sans, replicated */
  font-size: 18px;
  letter-spacing: -0.02em;
  color: rgb(109, 109, 109);
  text-decoration: none;
}
.nav a.current, .nav a:hover { color: #111; }
/* --- mobile header + overlay menu (phone only) --- */
.mheader, .moverlay, .mtoggle { display: none; }
/* --- content column --- */
.content {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-flow: column;
  gap: 100px;
  padding: 0 40px 0 0;
}
.group { display: flex; flex-flow: column; gap: 50px; width: 100%; }
.content img { width: 100%; border-radius: 10px; display: block; object-fit: cover; }
img.hero { aspect-ratio: 1.92733; }
img.secondary { aspect-ratio: 1.5; }
.textblock { width: 750px; max-width: 100%; }
.content p, .content li { color: rgb(109, 109, 109); }
.content .dark, .content p .em { color: rgb(32, 32, 32); }
.textblock p + p { margin-top: 0; } /* Framer --framer-paragraph-spacing:0px */
.em { /* emphasis on the live site = dark color, normal weight — never bold */ }
ul, ol { list-style: none; width: 750px; max-width: 100%; }
ol { counter-reset: n; }
ol li { counter-increment: n; }
ol li::before { content: counter(n) ". "; }
/* --- tiles --- */
.tiles { display: flex; flex-direction: column; gap: 25px; width: 100%; }
.tile {
  background: rgb(217, 217, 217);
  border-radius: 10px;
  padding: 46px 30px;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.05em;
  color: rgb(26, 26, 26);
}
.tile--dark { background: rgb(150, 150, 150); }
/* --- lists section --- */
.lists { display: flex; flex-flow: column; gap: 25px; }
.sub { display: flex; flex-flow: column; gap: 10px; }
/* --- form --- */
form { width: 750px; max-width: 100%; }
.form-intro { color: rgb(109, 109, 109); margin-bottom: 40px; }
.form-row { display: flex; gap: 40px; margin-top: 32px; }
.form-field { flex: 1; }
.form-field label { display: block; margin-bottom: 8px; color: rgb(32, 32, 32); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgb(217, 217, 217);
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: -0.02em;
  color: rgb(32, 32, 32);
  padding: 6px 0;
  border-radius: 0;
  appearance: none;
  outline: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgb(153, 153, 153); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color: rgb(32, 32, 32); }
textarea { resize: none; min-height: 66px; }
.submit-row { display: flex; justify-content: flex-end; margin-top: 40px; }
button.submit {
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: -0.02em;
  color: rgb(32, 32, 32);
  cursor: pointer;
}
button.submit:hover { color: rgb(109, 109, 109); }
/* --- footer (live Framer component: root gap 50, padding-top 50;
   "Zasebnost" plain text above the row; row "Frame 27" gap 35) --- */
.footer { display: flex; flex-flow: column; gap: 50px; width: 100%; padding-top: 50px; }
.cta { color: rgb(32, 32, 32); text-decoration: none; }
.cta:hover { color: rgb(109, 109, 109); }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-links a, .footer-links span { color: rgb(109, 109, 109); text-decoration: none; }
.footer-links a:hover { color: rgb(32, 32, 32); }
.f-row { display: flex; gap: 35px; }

/* Desktop breakpoints (1280-1439 / 1440-1739 / 1740-1919 / >=1920) share the
   base values above — the live site is fluid within each range (measured). */
/* ============ breakpoint: 810-1279.98 (tablet) ============ */
@media (min-width: 810px) and (max-width: 1279.98px) {
  body { font-size: 14px; }
  .canvas { padding: 60px 0 60px 40px; }
  .spacer { width: 202px; }
  .logo { top: 60px; left: 19px; }
  h1.pagetitle {
    top: 100px;
    left: 19px;
    font-size: 35px;
    line-height: 35px;
  }
  .nav { left: 20px; }
  .nav a { font-size: 14px; }
  .content { gap: 60px; padding: 0 20px 0 0; }
  .group { gap: 40px; }
  .tiles { gap: 20px; }
  .tile { padding: 30px 20px; font-size: 14px; line-height: 17px; }
  .lists { gap: 20px; }
  /* live tablet: info@ / Zasebnost / [Instagram  Designed by] (row gap 35, rows gap 5) */
  .footer { padding-top: 30px; }
  .footer-links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 35px; row-gap: 5px; }
  .f-row { display: contents; }
  .f-mail { order: -1; }
  .f-zaseb, .f-mail { grid-column: 1 / -1; }
}
/* ============ breakpoint: <=809.98 (phone) ============ */
@media (max-width: 809.98px) {
  body { font-size: 14px; }
  .canvas {
    flex-direction: column;
    gap: 10px;
    padding: 90px 0 40px;
  }
  .spacer { display: none; }
  .logo, .nav { display: none; }
  /* phone: 75px fixed top header with logo + menu toggle */
  .mheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 75px;
    padding: 0 15px;
    background: #fff;
    z-index: 3;
  }
  .mheader .mlogo { width: 86px; height: 18px; display: block; }
  .mheader .mlogo img { width: 100%; height: 100%; display: block; }
  .mheader label {
    width: 30px; height: 30px;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    cursor: pointer;
  }
  .mheader label span { display: block; height: 1.5px; background: rgb(32, 32, 32); }
  .moverlay {
    display: flex;
    position: fixed;
    inset: 0;
    background: #121212;
    z-index: 2;
    padding: 90px 15px 60px;
    transform: translateY(-100%);
    transition: transform .3s ease;
  }
  .moverlay nav { display: flex; flex-direction: column; gap: 7px; }
  .moverlay a { font-size: 18px; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
  #menu:checked ~ .moverlay { transform: translateY(0); }
  h1.pagetitle {
    position: static;
    font-size: 40px;
    line-height: 40px;
    padding: 0 15px;
  }
  .content { flex: none; gap: 60px; width: 100%; padding: 0; }
  .group { gap: 30px; padding: 0 15px; }
  .tiles { gap: 15px; }
  .tile { padding: 30px 20px; font-size: 14px; line-height: 17px; }
  .lists { gap: 15px; }
  .form-row { flex-direction: column; gap: 24px; margin-top: 24px; }
  /* live phone order: info@, Zasebnost, Instagram, Designed by (gap 5) */
  .footer { padding-top: 30px; }
  .footer-links { gap: 5px; }
  .f-row { display: contents; }
  .f-mail { order: -1; }
  .cta-line2 { display: block; }
}
/* hover feedback (QA 2026-08-01)
   Site-wide interaction feedback. Grayscale only, no new colours, no shadows.
   Everything eases on the same curve as the mobile menu: cubic-bezier(.27,0,.51,1).
   Two moves only: text links deepen one step, tiles darken one step, and any
   trailing arrow nudges right. */
.arw { display: inline-block; transition: transform .2s cubic-bezier(.27, 0, .51, 1); }
a:hover .arw { transform: translateX(4px); }
.content a, .nav a, .footer-links a, .footer-links span, .cta {
  transition: color .2s cubic-bezier(.27, 0, .51, 1);
}
.content p a:hover, .content li a:hover { color: rgb(8, 8, 8); }
/* tiles: one step darker on the same grayscale ramp */
.tile { transition: background-color .2s cubic-bezier(.27, 0, .51, 1); }
a.tile:hover, a:hover > .tile { background: rgb(199, 199, 199); }
a.tile--dark:hover, a:hover > .tile--dark { background: rgb(132, 132, 132); }

@media (prefers-reduced-motion: reduce) {
  .moverlay { transition: none; }
  .arw { transition: none; }
  a:hover .arw { transform: none; }
  .content a, .nav a, .footer-links a, .footer-links span, .cta, .tile { transition: none; }
}


/* Inter 600 subsets — exact copies of the reference @font-face rules (emphasis runs render in Inter 600) */
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-f291989f.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F }
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-847e9200.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-a1e9f8dc.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+1F00-1FFF }
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-a26ba202.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0370-03FF }
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-e46bce5a.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-a4c529c3.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Inter"; src: url("/assets/fonts/font-7cc62c78.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB }

/* hover feedback: image links (project/study tiles, posts) dim site-wide (QA 2026-08-01) */
a img { transition: filter .2s cubic-bezier(.27,0,.51,1), opacity .2s cubic-bezier(.27,0,.51,1); }
a:hover img { filter: brightness(0.85); }
.logo:hover img, .mlogo:hover img { filter: none; opacity: .75; }