/* ==========================================================================
   MASINKO-CLEAN THEME — shared components
   Header, navigation, mega menu, footer, buttons, call badge, contact form.
   Desktop rules here; mobile overrides live in 06-responsive.css.
   ========================================================================== */

/* ---------- Buttons ---------- */
.mk a.mk-btn,
button.mk-btn {
    display: inline-block;
    font-family: var(--font);
    font-size: 22px;
    font-weight: var(--fw-semibold);
    color: var(--c-white);
    background: var(--c-cta);
    padding: 18px 40px;
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    /* Narančasti gumb uvijek govori velikim slovima — tako stoji na cijeloj
       Mašinkovoj stranici, pa se i ovdje čita kao isti gumb. */
    text-transform: uppercase;
    letter-spacing: .02em;
    border: 4px solid var(--c-cta);
    box-shadow: 0 6px 19px -5px rgba(0,0,0,.5);
    cursor: pointer;
    transition: transform .3s ease-out;
}
.mk-btn:hover { transform: translateY(-8px); }
.mk-btn-sm { padding: 12px 28px; font-size: 16px; }

/* ---------- Header ---------- */
.mk-header { background: var(--c-bg-light); position: relative; z-index: 200; }
.mk-header-row {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 24px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.mk-logo { display: flex; align-items: center; }
.mk-logo-icon { display: block; height: 45px; width: 45px; flex-shrink: 0; }
.mk-logo-text { font-family: var(--font); font-weight: var(--fw-bold); font-size: 20px; color: var(--c-white); margin-left: 8px; line-height: 1; }
.mk-nav { display: flex; align-items: center; gap: 40px; }
.mk-nav-list { display: flex; align-items: center; gap: 40px; }
.mk-nav-item { position: static; }
.mk-nav-link {
    font-size: 20px;
    font-weight: var(--fw-regular);
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    cursor: pointer;
}
.mk-nav-link .mk-caret { font-size: 11px; transition: transform .15s; }
.mk-nav-item:hover .mk-caret, .mk-nav-item.mk-open .mk-caret { transform: rotate(180deg); }

/* ---------- Mega menu ---------- */
.mk-mega {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    z-index: 150;
}
.mk-nav-item:hover .mk-mega,
.mk-nav-item:focus-within .mk-mega,
.mk-nav-item.mk-open .mk-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
.mk-mega-inner {
    max-width: 1110px;
    margin: 0 auto;
    padding: 40px 20px;
    background: var(--c-bg-panel);
    display: grid;
    gap: 48px;
}
.mk-mega-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-mega-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-mega-col h3 {
    font-size: 24px;
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    margin: 0 0 16px;
}
.mk-mega-col p { font-size: 20px; font-weight: var(--fw-regular); line-height: 1.7; margin: 0 0 20px; }
.mk-mega-links { display: flex; flex-direction: column; gap: 4px; }
.mk-mega-links a {
    font-size: 24px;
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    padding: 4px 0;
}
.mk-mega-links a:hover { color: var(--c-accent); }
.mk-mega-cta-box { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mk-mega-cta-box p { margin: 0; font-size: 20px; font-weight: var(--fw-regular); }

.mk-mega-card { padding: 10px; }
.mk-mega-card .mk-mega-icon { width: 59px; height: 59px; margin-bottom: 10px; }
.mk-mega-card .mk-mega-icon img { width: 100%; height: 100%; display: block; }
.mk-mega-card h3 { font-size: 24px; font-weight: var(--fw-extrabold); color: var(--c-text); margin: 0 0 3px; }
.mk-mega-card p { font-size: 20px; font-weight: var(--fw-regular); color: var(--c-text); margin: 0 0 30px; }
.mk-mega-2col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Mobile hamburger/nav — hidden on desktop by default (see 06-responsive.css
   for the ≤900px switch). Scoped under .mk-header so this always wins over
   any generic `button` reset that might exist elsewhere in the app. */
.mk-header .mk-burger { display: none; }
.mk-header .mk-mobile-nav { display: none; }

/* ---------- Footer ---------- */
.mk-footer { background: var(--c-bg-light); padding: 56px 0 40px; }
.mk-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 374fr) minmax(0, 285fr) minmax(0, 314fr) minmax(0, 167fr);
    gap: 0;
}
.mk-footer-brand img { height: 45px; margin-bottom: 16px; }
.mk-footer-brand p { font-size: 20px; font-weight: var(--fw-regular); line-height: 1.5; margin: 0; }
.mk-footer h4 { font-size: 23px; font-weight: var(--fw-semibold); margin: 0 0 43px; }
.mk-footer ul { display: flex; flex-direction: column; gap: 16px; }
.mk-footer a, .mk-footer li { font-size: 20px; font-weight: var(--fw-regular); }
/* info@masinko.hr has no natural break point (no space/hyphen); nowrap keeps
   it intact, the narrow-viewport font-size step in 06-responsive.css is
   what actually prevents overflow (measured true text width, not guessed). */
.mk-footer-email { white-space: nowrap; }
.mk-footer a:hover { color: var(--c-accent); }

/* ---------- Call badge (shared by every appliance illustration) ---------- */
.mk-call-badge-wrap { position: relative; }
.mk-call-badge-wrap > img { display: block; width: 100%; height: auto; }
.mk-call-badge {
    position: absolute;
    left: 10px;
    top: 103px;
    width: 163px;
    height: 157px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    z-index: 3;
    opacity: 0;
    transition: opacity .2s ease;
}
.mk-call-badge.mk-tada-play {
    opacity: 1;
    animation: mk-tada 1.2s ease both;
}
/* Default badge position assumes the illustration's subject sits on the
   image's right side. Mirrors to the opposite side via the component's own
   $position param for the one illustration where the person is on the left. */
.mk-call-badge--right { left: auto; right: 10px; }
.mk-call-badge-number { font-family: var(--font); font-weight: var(--fw-extrabold); font-size: 19px; display: block; }
.mk-call-badge-label { font-family: var(--font); font-weight: var(--fw-bold); font-size: 17px; }

/* ---------- Contact form ---------- */
.mk-contact-card form { text-align: left; }
.mk-form-field { margin-bottom: 20px; }
.mk-form-field label { display: block; font-size: 16px; margin-bottom: 6px; color: var(--c-text); }
.mk-form-field textarea,
.mk-form-field input[type=text],
.mk-form-field input[type=email] {
    width: 100%;
    font-family: var(--font);
    font-size: 16px;
    padding: 12px 14px;
    border: 2px solid var(--c-bg-light);
    border-radius: 6px;
    background: var(--c-bg-panel);
    color: var(--c-text);
}
.mk-form-field textarea:focus,
.mk-form-field input:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-white);
}
.mk-form-field textarea:autofill,
.mk-form-field input:autofill {
    -webkit-text-fill-color: var(--c-text);
    box-shadow: 0 0 0 1000px var(--c-bg-panel) inset;
    -webkit-box-shadow: 0 0 0 1000px var(--c-bg-panel) inset;
}
.mk-form-field textarea:disabled,
.mk-form-field input:disabled {
    background: var(--c-bg-panel);
    color: var(--c-figcaption);
    cursor: not-allowed;
}
.mk-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-form-hint {
    font-size: 14px;
    margin: 0 0 10px;
    display: none;
}
.mk-form-hint.mk-visible { display: block; }
.mk-form-hint a { color: var(--c-accent); font-weight: var(--fw-semibold); }
.mk-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-form-submit { text-align: center; margin-top: 8px; }
.mk-form-success {
    text-align: center;
    font-size: 18px;
    font-weight: var(--fw-regular);
    color: var(--c-text);
    background: var(--c-bg-panel);
    border: 2px solid var(--c-bg-light);
    padding: 16px 20px;
    border-radius: 6px;
}
.mk-form-error {
    background: var(--c-error-bg);
    color: var(--c-error-text);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ---------- Kalkulator cijene ----------
   Ista pravila kao kontakt forma: ista polja, isti gumb, isti razmaci. Padajući
   izbornik kontakt forma nema, pa se ovdje piše po uzoru na njezina polja. */
.mk-calc { max-width: 560px; margin: 0 0 28px; text-align: left; }
.mk-calc .mk-form-field select {
    width: 100%;
    font-family: var(--font);
    font-size: 16px;
    padding: 12px 14px;
    border: 2px solid var(--c-bg-light);
    border-radius: 6px;
    background: var(--c-bg-panel);
    color: var(--c-text);
    cursor: pointer;
}
.mk-calc .mk-form-field select:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-white);
}
.mk-calc-potvrda {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; color: var(--c-text); margin: 0 0 14px; cursor: pointer;
}
.mk-calc-potvrda input { width: 20px; height: 20px; flex: none; accent-color: var(--c-accent); }
/* „hidden" ne gasi ono što klasa postavi na flex — bez ovoga pitanje o pećnici
   stoji na ekranu i kad ploča nije odabrana. */
.mk-calc-potvrda[hidden] { display: none; }
/* Kvačica koja pripada polju iznad sebe treba malo zraka da se ne slijepi s njim. */
.mk-form-field .mk-calc-potvrda { margin-top: 12px; }

.mk-calc-rezultat {
    max-width: 560px;
    background: var(--c-bg-panel);
    border: 2px solid var(--c-bg-light);
    border-radius: 6px;
    padding: 22px 24px;
    margin: 0 0 28px;
}
.mk-calc-red {
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 16px; color: var(--c-text); padding: 7px 0;
}
.mk-calc-red--zbroj { font-size: 19px; align-items: baseline; }
.mk-calc-red--zbroj strong { color: var(--c-cta); }
.mk-calc-napomena { font-size: 15px; line-height: 1.6; color: var(--c-text); margin: 14px 0 18px; }

/* ---------- Accessibility utility ---------- */
.mk-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}