/* ==========================================================================
   Osnova: reset, tipografija, raspored
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

svg.icon {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--s-4);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--c-ink);
    text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: 1; letter-spacing: -.035em; }
h2 { font-size: var(--fs-3xl); line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

/* Kontrast debljina kao u logotipu: "Derma" bold, "Plus" light */
h1 em, h2 em, h3 em,
.light {
    font-style: normal;
    font-weight: 300;
}

p {
    margin: 0 0 var(--s-4);
}

a {
    color: var(--c-link);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--c-link-hover);
}

:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

ul, ol {
    margin: 0 0 var(--s-4);
    padding-left: 1.25em;
}

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: var(--s-7) 0;
}

strong, b {
    font-weight: 700;
}

small {
    font-size: var(--fs-xs);
}

::selection {
    background: var(--c-lime);
    color: var(--c-ink);
}

.screen-reader-text,
.skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link:focus {
    position: fixed;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 200;
    padding: var(--s-3) var(--s-5);
    background: var(--c-ink);
    color: var(--c-white);
    border-radius: var(--r-sm);
}

/* Raspored */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.container--medium {
    max-width: calc(64rem + var(--gutter) * 2);
}

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

.section--green { background: var(--c-green-50); }
.section--sand { background: var(--c-sand-50); }

/* Dvije bež sekcije zaredom čine jednu plohu, pa između njih ostaje jednostruki razmak */
.section--sand + .section--sand { padding-top: 0; }

.section--forest,
.section--ink {
    color: var(--c-white);
}

.section--forest { background: var(--c-forest) var(--grad-brand-deep); }
.section--ink { background: var(--c-ink); }

.section--forest :is(h1, h2, h3, h4, h5, h6),
.section--ink :is(h1, h2, h3, h4, h5, h6) {
    color: var(--c-white);
}

.section--forest a:not(.btn),
.section--ink a:not(.btn) {
    color: var(--c-lime-soft);
}

.grid {
    display: grid;
    gap: var(--s-5);
}

@media (min-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .grid { gap: var(--s-6); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Sadržaj iz editora */
.entry-content {
    font-size: 1.0625rem; /* kao tekst stranice */
}

.entry-content > * + * {
    margin-top: var(--s-5);
}

/* Naslovi u tekstu: lakši od naslova sekcija, kao na staroj stranici (Poppins 500) */
.entry-content :is(h2, h3, h4) {
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    max-width: 36ch;
}

.entry-content h2 { font-size: var(--fs-xl); margin-top: var(--s-8); color: var(--c-forest-700); }
.entry-content h3 { font-size: var(--fs-lg); margin-top: var(--s-7); }
.entry-content h4 { font-size: var(--fs-md); }

.entry-content img {
    border-radius: var(--r-md);
}

.entry-content blockquote {
    margin-inline: 0;
    padding: var(--s-5) var(--s-6);
    background: var(--c-sand-50);
    border-left: 4px solid var(--c-green);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-lg);
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.entry-content :is(th, td) {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

.entry-content th {
    font-family: var(--font-display);
    background: var(--c-ink-50);
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}