/**
 * Globalni CSS — sve stranice (tokeni, reset, layout, dugmad).
 * Figma desktop se crta na okviru od 1440px — to je referenca „ekrana“, ne CSS širina kontejnera.
 * Glavni contained blok u kodu = 1320px (`.layout-container`). Druge širine u dizajnu → nove klase + isti obrazac (širina + 2× edge padding za prag).
 */

:root {
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafaff;
  --color-neutral-100: #f2f2f9;
  --color-neutral-500-text: #47475b;
  --color-neutral-900: #1c1c1e;
  --color-brand-pink-500: #ea7490;

  --font-sans: "Montserrat", system-ui, -apple-system, sans-serif;

  --layout-content-max: 1320px;
  --layout-edge-padding: 20px;

  /* Viewport breakpoints — jedan izvor istine za @media u projektu */
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;

  --focus-ring: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px var(--color-brand-pink-500);

  --btn-radius: 4px;
  --btn-font-weight: 600;
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;

  /* Prošireni tokeni (Laravel postojeći CSS — T-01); kanonski set iz dizajna iznad */
  --color-accent: #e0456e;
  --color-neutral-200: #e4e4eb;
  --color-neutral-400: #9999a6;
  --color-neutral-700: #47475b;
  --color-brand-pink-600: #d4145a;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-leading-heading: 22px;
  --font-leading-body-16: 1.5;
  --font-leading-tight: 1.3;
  --font-leading-ui: 16px;
  --font-leading-nav: 21px;
  --letter-tight: -0.196px;
  --layout-max: 1440px;
  --layout-padding-x: 60px;
  --header-top-height: 109px;
  --header-search-width: 430px;
  --header-search-height: 42px;
  --radius-pill: 90px;
  --radius-icon: 4px;
  --space-icon-gap: 15px;
  --space-util-gap: 30px;
  --space-nav-gap: 50px;
  --footer-padding-y: 70px;
  --footer-col-gap: 40px;
  --footer-col-max: 319px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-0);
}

/* Click affordance for interactive controls */
button:not([disabled]),
input[type="button"]:not([disabled]),
input[type="submit"]:not([disabled]),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 0;
  padding: 10px 16px;
  background: var(--color-neutral-900);
  color: var(--color-neutral-0);
  font-weight: 600;
  font-size: 13px;
  border-radius: 0 0 4px 4px;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
  z-index: 10000;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--focus-ring);
}

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

.layout-full {
  width: 100%;
}

.layout-container {
  box-sizing: border-box;
  width: var(--layout-content-max);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1360px) {
  .layout-container {
    width: 100%;
    padding-left: var(--layout-edge-padding);
    padding-right: var(--layout-edge-padding);
  }
}

/*
 * Breakpoints — DEVELOPMENT-GUIDELINES §3.4 / §3.4.1 / §3.4.2:
 *   Desktop: default (bez @media) — jedini izvor za vrednosti koje važe na ≥1024px
 *   Tablet + mobile: @media (max-width: 1023px)
 *   Mobile only:     @media (max-width: 767px)
 * min-width: 768px and max-width: 1023px — samo izuzetno, ne rutinski.
 * OBAVEZNO: u @media samo override — nikad duplirati property/vrednost identičnu desktopu;
 *   u 767px ne ponavljati ni identično onome iz 1023px (osim ako namerno nadjačavaš 1023).
 */

/* Druge contained širine: dodaj --layout-* + .layout-container-* + @media (širina + 2× --layout-edge-padding). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  margin: 0;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background-color: var(--color-brand-pink-500);
  border-color: var(--color-brand-pink-500);
  color: var(--color-neutral-0);
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(0.95);
  text-decoration: none;
}

.btn--secondary {
  background-color: var(--color-neutral-0);
  border-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-neutral-50);
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Odložene pozadine — data-lazy-bg + js/lazy-backgrounds.js */
.lazy-bg:not(.is-loaded) {
  background-color: var(--color-neutral-100);
}