/* ============================================================
   OPTIMUS STUDIO — Component Styles (WordPress / vanilla CSS)
   Version: 1.0  |  26. jun 2026.
   Zavisnost: tokens.css mora biti učitan prije ovog fajla.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   UTILITY KLASE — tipografija
───────────────────────────────────────────────────────────── */

.os-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height:  var(--lh-tight);
  color: var(--on-surface);
}

.os-display--xl { font-size: var(--fs-display-xl); }
.os-display--l  { font-size: var(--fs-display-l);  }
.os-display--m  { font-size: var(--fs-display-m);  }
.os-display--s  { font-size: var(--fs-display-s);  }

.os-wordmark {
  font-family:     var(--font-display);
  font-weight:     var(--fw-medium);
  letter-spacing:  var(--ls-wordmark);
  text-transform:  uppercase;
  line-height:     1;
}

.os-subbrand {
  font-family:     var(--font-body);
  font-weight:     var(--fw-bold);
  letter-spacing:  var(--ls-subbrand);
  text-transform:  uppercase;
  font-size:       var(--fs-label);
  color:           var(--accent);
}

.os-label {
  font-family:     var(--font-body);
  font-weight:     var(--fw-bold);
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  font-size:       var(--fs-label);
  color:           var(--text-on-light-muted);
}

/* Na tamnim sekcijama muted-za-svetlo je skoro nevidljiv — koristi
   muted-za-tamno da eyebrow ostane tih ali čitljiv (npr. „Po narudžbini"). */
.os-section--dark .os-label {
  color: var(--text-on-dark-muted);
}

.os-script {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

.os-body {
  font-family:  var(--font-body);
  font-size:    var(--fs-body-m);
  line-height:  var(--lh-body);
  color:        var(--on-surface);
}

/* ─────────────────────────────────────────────────────────────
   HAIRLINE UREĐAJI — potpis vizuelnog identiteta
───────────────────────────────────────────────────────────── */

/* Zlatna horizontalna crtica */
.os-hairline {
  display: block;
  height:  1.5px;
  width:   38px;
  background: var(--accent);
  border: none;
}

/* Flanking dashes oko sub-brand riječi */
.os-flank {
  display:     flex;
  align-items: center;
  gap:         14px;
}
.os-flank::before,
.os-flank::after {
  content:    '';
  display:    block;
  height:     1.5px;
  width:      34px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Vertikalna crtica */
.os-vrule {
  display:    block;
  width:      1.5px;
  background: var(--line-gold);
}

/* Tanak prsten */
.os-ring {
  display:       block;
  border:        1.5px solid var(--line-gold);
  border-radius: 50%;
}


/* ─────────────────────────────────────────────────────────────
   BUTTON
───────────────────────────────────────────────────────────── */

.os-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  font-family:     var(--font-body);
  font-size:       var(--fs-body-s);
  font-weight:     var(--fw-bold);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  padding:         11px 24px;
  border:          1.5px solid transparent;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  transition:      background var(--dur-fast) var(--ease-soft),
                   color       var(--dur-fast) var(--ease-soft),
                   border-color var(--dur-fast) var(--ease-soft),
                   transform   var(--dur-fast) var(--ease-soft),
                   box-shadow  var(--dur-fast) var(--ease-soft);
  -webkit-font-smoothing: antialiased;
}

.os-btn:active {
  transform: scale(0.98);
}

/* Primary — navy fill */
.os-btn--primary {
  background:   var(--surface);
  color:        var(--on-surface);
  border-color: var(--surface);
}
.os-btn--primary:hover {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--surface);
}

/* Gold — zlatni fill */
.os-btn--gold {
  background:   var(--accent);
  color:        var(--surface);
  border-color: var(--accent);
}
.os-btn--gold:hover {
  background:   var(--surface);
  border-color: var(--accent);
  color:        var(--on-surface);
}

/* Šalfija fill — Optimus Living CTA (žalfija je Living akcenat; koristi se
   eksplicitno da bude zeleno i tamo gde je kontekstualni --accent zlatan,
   npr. Living panel na umbrella split-hero-u). Hover invertuje na prozirno. */
.os-btn--sage {
  background:   var(--os-sage);
  color:        var(--os-linen);
  border-color: var(--os-sage);
}
.os-btn--sage:hover {
  background:   transparent;
  color:        var(--os-sage);
  border-color: var(--os-sage);
}

/* Outline — navy border, transparent */
.os-btn--outline {
  background:   transparent;
  color:        var(--on-surface);
  border-color: var(--accent);
}
.os-btn--outline:hover {
  background:   var(--accent);
  color:        var(--surface);
}

/* Outline light — za navy pozadinu */
.os-btn--outline-light {
  background:   transparent;
  color:        var(--text-on-dark);
  border-color: var(--line-on-dark);
}
.os-btn--outline-light:hover {
  background:   rgba(242, 236, 223, 0.12);
  border-color: rgba(242, 236, 223, 0.40);
  color:        var(--text-on-dark);
}

/* Ghost — samo tekst */
.os-btn--ghost {
  background:   transparent;
  color:        var(--on-surface);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.os-btn--ghost:hover {
  color: var(--accent);
}

/* Small varijanta */
.os-btn--sm {
  font-size: 0.7rem;
  padding:   8px 18px;
}

/* Disabled state */
.os-btn:disabled,
.os-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor:  not-allowed;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   TAG / BADGE
───────────────────────────────────────────────────────────── */

.os-tag {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--font-body);
  font-size:       0.6875rem;    /* 11px */
  font-weight:     var(--fw-bold);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         3px 10px;
  border-radius:   var(--radius-pill);
  white-space:     nowrap;
}

/* Dot indicator */
.os-tag--dot::before {
  content:       '';
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* Gold */
.os-tag--gold {
  background: rgba(198, 160, 106, 0.14);
  color:      var(--gold-700);
}
.os-tag--gold.os-tag--dot::before { background: var(--os-gold); }

/* Navy */
.os-tag--navy {
  background: rgba(23, 42, 58, 0.08);
  color:      var(--os-navy);
}
.os-tag--navy.os-tag--dot::before { background: var(--os-navy); }

/* Blue (Living) */
.os-tag--blue {
  background: rgba(107, 139, 164, 0.14);
  color:      var(--accent);
}
.os-tag--blue.os-tag--dot::before { background: var(--accent); }

/* Solid navy */
.os-tag--solid {
  background: var(--os-navy);
  color:      var(--text-on-dark);
}

/* Light — za navy pozadinu */
.os-tag--light {
  background: rgba(242, 236, 223, 0.16);
  color:      var(--text-on-dark);
}


/* ─────────────────────────────────────────────────────────────
   CARD
───────────────────────────────────────────────────────────── */

.os-card {
  background:    var(--surface);
  border-radius: var(--radius-lg);
  color:         var(--on-surface);
  padding:       var(--sp-6);
  box-shadow:    var(--shadow-md);
  transition:    transform var(--dur-med) var(--ease-soft),
                 box-shadow var(--dur-med) var(--ease-soft);
}

.os-card--interactive:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.os-card--interactive:active {
  transform: translateY(0);
}

/* Hairline border varijanta */
.os-card--hairline {
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-on-light);
}

/* Surface varijante */
.os-card--paper  { background: var(--surface-page); }
.os-card--cream  { background: var(--os-cream); }
.os-card--navy   {
  background: var(--os-navy);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line-on-dark);
  color:      var(--text-on-dark);
}

/* Card naslovi */
.os-card__title {
  font-family:  var(--font-display);
  font-weight:  var(--fw-medium);
  font-size:    var(--fs-display-s);
  line-height:  var(--lh-snug);
  margin:       var(--sp-3) 0 var(--sp-2);
  color:        var(--on-surface);
}
.os-card--navy .os-card__title { color: var(--text-on-dark); }

.os-card__body {
  font-family:  var(--font-body);
  font-size:    var(--fs-body-s);
  line-height:  var(--lh-body);
  color:        var(--on-surface);
}
.os-card--navy .os-card__body { color: var(--text-on-dark-muted); }


/* ─────────────────────────────────────────────────────────────
   SECTION — tipični layout blokovi
───────────────────────────────────────────────────────────── */

/* Hero / header sekcija na navy */
.os-section--dark {
  background: var(--surface);
  color:      var(--on-surface);
  padding:    var(--sp-10) var(--sp-6);
}

/* Sekcija na cream */
.os-section--light {
  background: var(--surface);
  color:      var(--on-surface);
  padding:    var(--sp-10) var(--sp-6);
}

/* Sekcija na paper (default) */
.os-section--paper {
  background: var(--surface);
  color:      var(--on-surface);
  padding:    var(--sp-10) var(--sp-6);
}

/* Kontejner sa max-width */
.os-container {
  max-width:  var(--maxw-content);
  margin:     0 auto;
  padding:    0 var(--sp-6);
}

/* Dvostupačna mreža — Doors lijevo / Living desno */
.os-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
}

@media (max-width: 768px) {
  .os-container {
    padding-inline: var(--sp-5);
  }

  .os-split {
    grid-template-columns: 1fr;
  }
}

/* Kartica mreža */
.os-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--sp-5);
}


/* ─────────────────────────────────────────────────────────────
   DIVIDER — goldena crtica
───────────────────────────────────────────────────────────── */

.os-divider {
  border:     none;
  border-top: 1.5px solid var(--line-gold);
  margin:     var(--sp-7) 0;
}

.os-divider--soft {
  border-top-color: var(--line-gold-soft);
}


/* ─────────────────────────────────────────────────────────────
   INPUT / FORMA
───────────────────────────────────────────────────────────── */

.os-input {
  font-family:      var(--font-body);
  font-size:        var(--fs-body-m);
  color:            var(--os-graphite);
  background:       var(--surface-card);
  border:           1.5px solid var(--line-on-light);
  border-radius:    var(--radius-md);
  padding:          10px 16px;
  width:            100%;
  transition:       border-color var(--dur-fast) var(--ease-soft),
                    box-shadow   var(--dur-fast) var(--ease-soft);
  outline:          none;
  -webkit-font-smoothing: antialiased;
}

.os-input:focus {
  border-color: var(--os-gold);
  box-shadow:   0 0 0 3px rgba(198, 160, 106, 0.18);
}

.os-input::placeholder {
  color: var(--text-on-light-muted);
}

/* Label iznad input-a */
.os-input-label {
  display:         block;
  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  font-weight:     var(--fw-bold);
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  color:           var(--os-navy);
  margin-bottom:   var(--sp-2);
}