/* Global reset, typography, layout primitives, and cross-block utility
   classes (.card, .btn, .solution-label, .cards-heading, .reveal). Every
   component in assets/css/styles.css can assume these exist. For generic
   spacing/layout helpers (margin, padding, flex, gap), see utilities.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - (2 * var(--container-gutter))));margin:0 auto}
section{padding:var(--section-space-sm) 0}
section[id]{scroll-margin-top:96px}

h1,h2,h3,h4,h5,h6{text-wrap:balance}
p,li{text-wrap:pretty}
h1{font-size:var(--fs-hero);line-height:var(--lh-display);letter-spacing:var(--tracking-display);margin:0 0 var(--space-4)}
h1 .highlight,h2 .highlight{color:var(--red)}

/* Free-form WordPress editor content (page.php, single-resenje.php,
   dogadjaj-main.php's the_content()) has no per-instance classes to hang
   styles on, unlike every hand-built block elsewhere — these are real tag
   selectors, scoped under .entry-content so they don't leak into hand-built
   blocks. Sizes borrow the same roles as the .text-* utilities in
   utilities.css (h2≈subhead, h3≈card-title-sm) rather than inventing new
   values. */
.entry-content{max-width:var(--content-measure);font-size:var(--fs-body);line-height:var(--lh-body)}
.entry-content h1{margin:0 0 var(--space-5);font-size:var(--fs-section);line-height:var(--lh-tight);letter-spacing:var(--tracking-heading)}
.entry-content h2{margin:var(--space-8) 0 var(--space-4);font-size:var(--fs-subhead);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}
.entry-content h3{margin:var(--space-6) 0 var(--space-3);font-size:var(--fs-card-title-sm);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}
.entry-content h4{margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-body-lg);font-weight:700}
.entry-content h5{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-body);font-weight:700}
.entry-content h6{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-body-sm);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.entry-content p{margin:0 0 var(--space-5)}
.entry-content a{color:var(--page-accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.entry-content a:hover{text-decoration:none}
.entry-content ul,.entry-content ol{margin:0 0 var(--space-5);padding-left:var(--space-6)}
.entry-content li{margin:0 0 var(--space-2)}
.entry-content blockquote{margin:0 0 var(--space-5);padding-left:var(--space-4);border-left:3px solid var(--line);color:var(--text-secondary);font-style:italic}
.entry-content > *:last-child{margin-bottom:0}

/* Contact Form 7 renders its submit as a bare <input type="submit"> with no
   class hook in the shortcode, so .wpcf7-submit rides the .btn structure here
   rather than being restyled from scratch in every form's page CSS. Its fill
   stays an explicit red (a form submit is a red brand action everywhere,
   including the schedule modal on a blue-accented solution page) rather than
   following --page-accent like .btn-primary. An <input> can't paint ::after,
   so it skips the dot .btn-primary would add — same as the rules it replaces. */
.btn,
.wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  min-height:48px;padding:0 var(--space-6);border-radius:14px;border:1px solid transparent;
  font-weight:760;font-size:var(--fs-control);line-height:1.2;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease,background-color .18s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover,
.wpcf7-submit:hover{transform:translateY(-1px)}
.btn:active,
.wpcf7-submit:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,
.wpcf7-submit:focus-visible{outline:3px solid rgba(var(--page-accent-rgb),.24);outline-offset:3px}
.btn-primary{
  color:#fff;background:var(--page-accent);
  box-shadow:0 14px 32px rgba(var(--page-accent-rgb),.22);
}
.wpcf7-submit{
  color:#fff;background:var(--red);
  box-shadow:0 14px 32px rgba(var(--red-rgb),.22);
}
.btn-primary-blue{
  background:var(--blue);
  box-shadow:0 14px 32px rgba(35,37,60,.28);
}
.btn-primary::after,
.btn-light::after,
.btn-secondary::after{
  content:"";
  width:16px;height:16px;flex:0 0 16px;
  background:var(--brand-dots);
}
.btn-secondary{background:#fff;border-color:#dddfe4;color:#2e323b}
.btn-secondary::after{color:var(--page-accent)}
.btn-secondary:hover{border-color:color-mix(in srgb, var(--page-accent) 22%, white);color:var(--page-accent)}
.btn-light{background:#fff;color:var(--page-accent);border-color:rgba(255,255,255,.32)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}

.solution-label{
  display:inline-flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);
  color:var(--red);font-size:var(--fs-label);font-weight:850;text-transform:uppercase;letter-spacing:.07em;
}
.solution-label:before{content:"";width:16px;height:16px;flex:0 0 16px;background:var(--brand-dots)}

.cards-heading{margin:var(--space-7) 0 var(--space-5);font-size:var(--fs-subhead);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}

.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);
  will-change:opacity,transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}