/* ==========================================================================
   Simplicity Portal – grafisk profil hämtad från simplicity.se (tema "sceleton")
   ========================================================================== */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
    src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Färger från simplicity.se */
    --sp-ink: #1B140F;        /* text, sidfot, menyfält */
    --sp-brown: #6D5541;      /* länkar, accent, knapp-hover */
    --sp-taupe: #bdb7b2;      /* knappram, dämpad text på mörkt */
    --sp-sand: #E6E0DA;       /* ljus yta */
    --sp-sand-soft: #F4F1EE;  /* bakgrundsband (ljusare variant av sand) */
    --sp-line: #E3DED9;
    --sp-muted: #6f655d;
    --sp-white: #fff;
    --sp-pos: #2E6B4A;        /* positiv utveckling */
    --sp-neg: #B3261E;        /* negativ utveckling */

    --sp-font: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --sp-font-head: "univia-pro", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --sp-wrap: 1200px;
    --sp-gutter: 60px;
    --sp-header-h: 72px;
}

/* --- Bas ----------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sp-white);
    color: var(--sp-ink);
    font-family: var(--sp-font);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--sp-font-head);
    color: var(--sp-ink);
    font-weight: 700;
    letter-spacing: -.005em;
}
h1 { font-size: 2.5rem; line-height: 1.1; margin: 0 0 1.5rem; }
h2 { font-size: 1.625rem; line-height: 1.25; margin: 0 0 1rem; }
h3 { font-size: 1.25rem; line-height: 1.25; margin: 2rem 0 1rem; }

a { color: var(--sp-brown); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--sp-brown);
    outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

.sp-wrap {
    width: 100%;
    max-width: calc(var(--sp-wrap) + 2 * var(--sp-gutter));
    margin: 0 auto;
    padding: 0 var(--sp-gutter);
}

.sp-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--sp-ink); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.sp-skip:focus { left: 1rem; top: 1rem; }

/* --- Sidhuvud ------------------------------------------------------------ */

.sp-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--sp-white);
    border-bottom: 1px solid var(--sp-line);
}
.admin-bar .sp-header { top: 32px; }

.sp-header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--sp-header-h);
}

.sp-logo { display: inline-flex; align-items: center; line-height: 0; }
.sp-logo:hover { text-decoration: none; }
.sp-logo-img { width: 160px; height: 35px; object-fit: contain; object-position: left center; }
.sp-logo-text {
    font-family: var(--sp-font-head);
    font-size: 1.75rem; line-height: 1; font-weight: 700; color: var(--sp-ink);
    letter-spacing: -.02em;
}
.sp-logo-text span { color: var(--sp-brown); }

.sp-site-label {
    padding-left: 1.25rem;
    border-left: 1px solid var(--sp-taupe);
    font-family: var(--sp-font-head);
    font-size: 1rem;
    color: var(--sp-muted);
    white-space: nowrap;
}

.sp-nav { margin-left: auto; }
.sp-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.sp-nav-list a { font-size: .9375rem; color: var(--sp-ink); }
.sp-nav-list a:hover { color: var(--sp-brown); }

/* --- Innehåll ------------------------------------------------------------ */

.sp-main { flex: 1 0 auto; }

.sp-band { padding: 4rem 0 5rem; }
.sp-page-title { margin-bottom: 2rem; }
.sp-content { max-width: 46rem; }
.sp-content-portal { max-width: none; }

/* Inloggningsläge: sandfärgat band med vitt kort */
.sp-band-portal:has(.sms-login) {
    background: var(--sp-sand-soft);
    padding: 5rem 0 6rem;
}

.sp-button {
    display: inline-block;
    border: 2px solid var(--sp-taupe);
    border-radius: 3px;
    background: transparent;
    color: var(--sp-ink);
    padding: 12px 18px;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 .5rem .5rem 0;
}
.sp-button:hover { background: var(--sp-brown); border-color: var(--sp-brown); color: var(--sp-sand); text-decoration: none; }
.sp-button-solid { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }

/* --- Mina Sidor-pluginet (överskriver assets/mina-sidor.css) ------------- */

body .sms {
    --sms-blue: var(--sp-ink);
    --sms-pos: var(--sp-pos);
    --sms-neg: var(--sp-neg);
    --sms-line: var(--sp-line);
    --sms-head: var(--sp-sand-soft);
    color: var(--sp-ink);
    max-width: var(--sp-wrap);
}

body .sms h1, body .sms h2 { font-family: var(--sp-font-head); }
body .sms .sms-title { font-size: 2.25rem; margin: 1rem 0 .75rem; }
body .sms .sms-intro { color: var(--sp-muted); }
body .sms .sms-section { margin: 3rem 0; }
body .sms .sms-section h2 { font-size: 1.375rem; padding-bottom: .6rem; border-bottom: 2px solid var(--sp-ink); }

body .sms .sms-table { font-size: 1rem; }
body .sms .sms-table th,
body .sms .sms-table td { padding: .7rem .75rem; }
body .sms .sms-table thead th {
    background: var(--sp-sand-soft);
    font-weight: 600;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-muted);
}
body .sms .sms-table tbody tr:hover td { background: #FAF8F6; }
body .sms .sms-table tfoot td { border-top: 2px solid var(--sp-ink); border-bottom: 0; }
body .sms .sms-kv th { font-weight: 400; color: var(--sp-muted); }
body .sms .sms-kv td { font-weight: 600; }

/* Knappar som på simplicity.se: fylld = svart, ghost = taupe ram */
body .sms .sms-btn {
    background: var(--sp-ink);
    color: #fff;
    border: 2px solid var(--sp-ink);
    border-radius: 3px;
    padding: .8rem 1.6rem;
    font-family: var(--sp-font);
    font-weight: 700;
    font-size: 1rem;
    transition: background-color .15s, border-color .15s, color .15s;
}
body .sms .sms-btn:hover { filter: none; background: var(--sp-brown); border-color: var(--sp-brown); color: #fff; text-decoration: none; }
body .sms .sms-btn-sm { padding: .4rem .9rem; font-size: .875rem; }
body .sms .sms-btn-ghost { background: transparent; color: var(--sp-ink); border-color: var(--sp-taupe); }
body .sms .sms-btn-ghost:hover { background: var(--sp-brown); border-color: var(--sp-brown); color: var(--sp-sand); }

/* Inloggningskort */
body .sms-login {
    max-width: 440px;
    margin: 0 auto;
    background: var(--sp-white);
    padding: 2.5rem 2.5rem 2rem;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(27, 20, 15, .06), 0 8px 24px rgba(27, 20, 15, .06);
}
body .sms-login h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }
body .sms-login label { font-weight: 600; font-size: .9375rem; }
body .sms-login input[type=text],
body .sms-login input[type=password] {
    font-family: var(--sp-font);
    font-size: 1.0625rem;
    padding: .75rem .8rem;
    border: 1px solid var(--sp-taupe);
    border-radius: 3px;
    background: #fff;
    color: var(--sp-ink);
}
body .sms-login input:focus { border-color: var(--sp-brown); outline: 2px solid rgba(109, 85, 65, .25); outline-offset: 0; }
body .sms-login .sms-btn { width: 100%; margin-top: 1.25rem; padding: .9rem; }
body .sms-login .sms-help { color: var(--sp-muted); font-size: .9375rem; line-height: 1.5; }
body .sms-login .sms-help a { font-size: inherit; }
body .sms .sms-alert { background: #FBEDEC; border-left-color: var(--sp-neg); color: var(--sp-ink); }

/* --- Sidfot -------------------------------------------------------------- */

.sp-footer {
    flex-shrink: 0;
    background: var(--sp-ink);
    color: #fff;
    padding: 4.5rem 0 0;
    font-size: .9375rem;
}
.sp-footer a { color: #fff; font-weight: 400; font-size: inherit; }
.sp-footer a:hover { color: var(--sp-taupe); }
.sp-footer p { margin: 0 0 .9rem; }
.sp-muted { color: var(--sp-muted); }
.sp-footer .sp-muted { color: var(--sp-taupe); }

.sp-risk {
    max-width: 52rem;
    color: var(--sp-taupe);
    margin-bottom: 2.5rem !important;
}
.sp-risk strong { color: #fff; }

.sp-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding: 2.5rem 0 3.5rem; border-top: 1px solid rgba(255, 255, 255, .15); }
.sp-footer-col + .sp-footer-col { border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 2rem; }
.sp-footer-h { color: #fff; font-size: 1.25rem; margin: 0 0 1rem; }
.sp-footer-list { list-style: none; margin: 0; padding: 0; }
.sp-footer-list li { margin: 0 0 .5rem; }

.sp-copy { border-top: 1px solid rgba(255, 255, 255, .15); padding: 1.25rem 0; font-size: .875rem; color: var(--sp-taupe); }

/* --- Responsivt ---------------------------------------------------------- */

@media (max-width: 1024px) {
    :root { --sp-gutter: 32px; }
    h1 { font-size: 2.25rem; }
}

@media (max-width: 768px) {
    :root { --sp-gutter: 16px; --sp-header-h: 60px; }
    .sp-logo-img { width: 120px; height: 30px; }
    .sp-logo-text { font-size: 1.4rem; }
    .sp-site-label { padding-left: .9rem; font-size: .9375rem; }
    .sp-nav-list { gap: 1rem; }
    .sp-nav-list li:not(:first-child) { display: none; } /* bara "Till simplicity.se" på mobil */
    .sp-band { padding: 2.5rem 0 3.5rem; }
    .sp-band-portal:has(.sms-login) { padding: 2rem 0 3rem; }
    body .sms-login { padding: 1.75rem 1.25rem 1.5rem; }
    body .sms .sms-title { font-size: 1.75rem; }
    .sp-footer-cols { grid-template-columns: 1fr; gap: 1.75rem; }
    .sp-footer-col + .sp-footer-col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 1.75rem; }
}

@media (max-width: 480px) {
    .sp-nav { display: none; }
}

@media (max-width: 782px) {
    .admin-bar .sp-header { top: 46px; }
}

/* --- Utskrift ------------------------------------------------------------ */

@media print {
    .sp-header, .sp-footer, .sp-skip { display: none !important; }
    .sp-band { padding: 0; background: none !important; }
    body { font-size: 10pt; }
}