/* ==========================================================================
   EDITORIAL STATIC PAGES (Sprint 2 Phase 11)
   Loaded AFTER the page-specific CSS on /cene, /krediti, /kupovina-ili-
   izdavanje, /o-nama, /uslovi, /politika. Retones shared static-page
   chrome onto the editorial system without rewriting per-page rules.
   ========================================================================== */

/* ----- Page surface ---------------------------------------------------- */
body { background: var(--warm-white); }

/* ----- Generic section containers ------------------------------------- */
.main-content {
    background: var(--warm-white);
}

.main-content > .container > section,
.main-content section.section-card,
.main-content .page-section,
.main-content .info-section,
.content-card,
.content-section {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(40px, 5vw, 64px) 0;
    border-bottom: 1px solid var(--hairline);
}

.content-section:last-of-type,
.main-content > .container > section:last-of-type {
    border-bottom: none;
}

/* ----- Titles ---------------------------------------------------------- */
.main-content h1:not(.hero__title),
.main-content h2,
.content-card h2,
.content-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
}

.main-content h1:not(.hero__title) {
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 24px;
}

.main-content h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    margin: 0 0 18px;
}

.main-content h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    margin: 1.5rem 0 0.75rem;
}

/* Section eyebrow pattern (where available) */
.section-eyebrow,
.eyebrow-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--taupe);
    margin: 0 0 14px;
}

/* ----- Prose / body text ----------------------------------------------
   Scope-uju se SAMO na direktnu prose decu .main-content / .content-card,
   ne na sve descendant `<p>` / `<a>` / `<ul>`. Ovo sprečava da rules
   nakače na canonical komponente (feature-card, editorial-table,
   numbered-step, sidebar-card, itd.) koje žive unutar .main-content.
   -------------------------------------------------------------------------- */
.main-content > .container > p,
.main-content > .container > div > p,
.content-card > p,
.prose p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
    max-width: 65ch;
    margin: 0 0 1.2rem;
}

.main-content p.lead,
.content-card p.lead,
.prose .lead {
    font-size: 1.2rem;
    color: var(--ink);
    opacity: 0.9;
}

.main-content > .container > p a,
.main-content > .container > div > p a,
.content-card > p a,
.prose p a,
.prose li a {
    color: var(--terracotta);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s;
}

.main-content > .container > p a:hover,
.main-content > .container > div > p a:hover,
.content-card > p a:hover,
.prose p a:hover,
.prose li a:hover {
    color: var(--terracotta-d);
}

.main-content > .container > ul:not(.no-prose),
.main-content > .container > ol:not(.no-prose),
.content-card > ul,
.content-card > ol,
.prose ul,
.prose ol {
    margin: 0 0 1.25rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
}

.main-content > .container > ul > li,
.main-content > .container > ol > li,
.content-card > ul > li,
.content-card > ol > li,
.prose li {
    margin-bottom: 0.5rem;
}

/* Data tables — canonical .editorial-table je u components/editorial-table.css.
   Legacy .prices-table / .data-table rules su izbrisani jer ti template-i sad
   koriste canonical markup. Nema više .main-content table preuzimanja. */

/* ----- Forms (calculator + buy-vs-rent + contact) --------------------- */
.main-content .form-control,
.main-content input[type="text"]:not(.filter-search__input):not(.search-input):not(.save-search-input):not(.search-box input),
.main-content input[type="number"],
.main-content input[type="email"],
.main-content input[type="tel"],
.main-content input[type="search"],
.main-content textarea,
.main-content select:not(.results-toolbar__select):not(.filter-select-sm):not(.save-search-select) {
    background: var(--cream);
    border: 1px solid var(--hairline-strong);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.main-content .form-control:focus,
.main-content input:focus,
.main-content textarea:focus,
.main-content select:focus {
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(184, 117, 92, 0.15);
}

.main-content label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
}

/* Calculator result panel — neutralize gradients */
.calculator-result,
.result-card,
.result-panel {
    background: var(--cream);
    border: 1px solid var(--hairline-strong);
    border-radius: 0;
    padding: clamp(24px, 3vw, 40px);
    box-shadow: none;
}

.calculator-result .result-value,
.result-card .result-value,
.result-amount {
    font-family: var(--font-display);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--ink);
}

.calculator-result .result-label,
.result-card .result-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
}

/* ----- Primary CTA buttons within static pages ------------------------ */
.main-content .btn-primary,
.content-card .btn-primary {
    background: var(--terracotta);
    color: var(--warm-white);
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
}

.main-content .btn-primary:hover,
.content-card .btn-primary:hover {
    background: var(--terracotta-d);
    filter: none;
}

.main-content .btn-secondary,
.main-content .btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 4px;
    padding: 11px 23px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.main-content .btn-secondary:hover,
.main-content .btn-outline:hover {
    background: var(--ink);
    color: var(--cream);
}

/* ==========================================================================
   Auth pages (login / register) — body has .auth-page class
   ========================================================================== */
.auth-page {
    background: var(--cream);
}

.auth-page main {
    background: var(--cream);
    padding: clamp(48px, 7vw, 96px) 24px;
}

.auth-page .auth-card {
    max-width: 460px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 56px);
    background: var(--warm-white);
    border: 1px solid var(--hairline-strong);
    border-radius: 4px;
    box-shadow: none;
}

.auth-page .auth-card h1,
.auth-page .auth-card h2 {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.15;
    color: var(--ink);
}

.auth-page .form-label,
.auth-page label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
}

.auth-page .form-control,
.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-page input[type="text"],
.auth-page input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--cream);
    border: 1px solid var(--hairline-strong);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-page .form-control:focus,
.auth-page input:focus {
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(184, 117, 92, 0.15);
}

.auth-page .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 18px;
}

.auth-page .form-check-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--taupe);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

.auth-page .forgot-password {
    display: inline-block;
    margin: 4px 0 18px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--terracotta);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.auth-page .btn,
.auth-page button[type="submit"] {
    width: 100%;
    padding: 13px 24px;
    background: var(--terracotta);
    color: var(--warm-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
}

.auth-page .btn:hover,
.auth-page button[type="submit"]:hover {
    background: var(--terracotta-d);
    filter: none;
}

.auth-page .alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.auth-page .alert-danger {
    background: rgba(184, 117, 92, 0.08);
    border: 1px solid rgba(184, 117, 92, 0.3);
    color: var(--terracotta-d);
}

.auth-page .alert-success {
    background: var(--paper);
    border: 1px solid var(--hairline-strong);
    color: var(--ink);
}

.auth-page .auth-footer,
.auth-page .auth-links {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--taupe);
}

.auth-page .auth-footer a,
.auth-page .auth-links a {
    color: var(--terracotta);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}