/*
 * Samtalshuset – Öppen mottagning
 * QUE_om.css
 *
 * Kompakt, mobilorienterad landningssida.
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@600;700&display=swap');


/* =========================================================
   GRUND / FÄRGER
   ========================================================= */

:root {
    --opm-wine: #7C3E35;
    --opm-wine-light: #9A5045;

    --opm-sand: #F5F1EA;
    --opm-sand-dark: #ECE4D8;
    --opm-cream: #FBF2E7;

    --opm-text: #444444;
    --opm-muted: #707070;
    --opm-white: #FFFFFF;

    --opm-border: #DED5C9;

    --opm-shadow:
        0 8px 28px rgba(70, 48, 40, 0.08);
}


* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    background: var(--opm-cream);
    color: var(--opm-text);

    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
}


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


a {
    color: var(--opm-wine);
}


.opm-page {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   GEMENSAM INNEHÅLLSBREDD
   ========================================================= */

.opm-content {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* =========================================================
   HERO
   ========================================================= */

.opm-hero {
    background: var(--opm-cream);
    text-align: center;

    padding:
        26px
        24px
        38px;

    border-top:
        3px solid var(--opm-wine);
}


.opm-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}


.opm-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 16px;
}


.opm-logo {
    display: block;

    width: auto;
    max-width: 300px;
    max-height: 180px;

    margin: 0 auto;
}


.opm-kicker,
.opm-section-label {
    color: var(--opm-wine);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    margin-bottom: 9px;
}


.opm-kicker {
    margin-bottom: 7px;
}


.opm-hero h1 {
    margin:
        0 auto
        15px;

    max-width: 720px;

    color: var(--opm-wine);

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(1.85rem, 5.5vw, 2.75rem);

    font-weight: 700;
    line-height: 1.15;
}


.opm-hero-lead {
    max-width: 600px;

    margin: 0 auto;

    color: var(--opm-muted);

    font-size: 1.04rem;
    line-height: 1.65;
}


/* =========================================================
   GENERELLA SEKTIONER
   ========================================================= */

.opm-section {
    padding:
        46px
        0;
}


.opm-section-light {
    background: var(--opm-white);
}


.opm-section-sand {
    background: var(--opm-sand);
}


.opm-section h2 {
    margin:
        0
        0
        18px;

    color: var(--opm-wine);

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(1.45rem, 4.5vw, 1.9rem);

    font-weight: 700;
    line-height: 1.25;
}


.opm-section p {
    margin:
        0
        0
        14px;

    font-size: 1rem;
    line-height: 1.72;
}


.opm-section p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SÅ FUNGERAR DET
   ========================================================= */

.opm-how {
    padding-top: 38px;
    padding-bottom: 34px;
}


.opm-steps {
    margin-top: 22px;
}


.opm-step {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding:
        14px
        0;

    border-bottom:
        1px solid var(--opm-border);
}


.opm-step:first-child {
    padding-top: 2px;
}


.opm-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}


.opm-step-number {
    flex:
        0 0
        38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--opm-wine);
    color: var(--opm-white);

    font-size: 0.9rem;
    font-weight: 700;
}


.opm-step-text {
    flex: 1;
}


.opm-step-text h3 {
    margin:
        0
        0
        3px;

    color: var(--opm-wine);

    font-size: 1rem;
    font-weight: 700;
}


.opm-step-text p {
    margin: 0;

    color: var(--opm-muted);

    font-size: 0.92rem;
    line-height: 1.55;
}


/* =========================================================
   NÄSTA ÖPPNA MOTTAGNING
   ========================================================= */

.opm-next {
    background: var(--opm-sand);

    padding:
        0
        0
        42px;
}


.opm-next-card {
    position: relative;

    background: var(--opm-white);

    border-top:
        4px solid var(--opm-wine);

    box-shadow: var(--opm-shadow);

    text-align: center;

    padding:
        30px
        28px
        30px;
}


.opm-next-card h2 {
    margin:
        4px
        0
        6px;

    color: var(--opm-wine);

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(1.35rem, 4.5vw, 1.8rem);

    line-height: 1.25;
}


.opm-event-time {
    margin-top: 4px;

    color: var(--opm-text);

    font-size: 1.15rem;
    font-weight: 700;
}


.opm-event-location {
    margin-top: 5px;

    color: var(--opm-muted);

    font-size: 0.96rem;
}


.opm-event-note {
    max-width: 470px;

    margin:
        15px auto
        20px;

    color: var(--opm-muted);

    font-size: 0.9rem;
}


/* =========================================================
   KNAPPAR
   ========================================================= */

.opm-primary-button,
.opm-secondary-button {
    display: inline-block;

    min-width: 220px;

    padding:
        13px
        27px;

    border-radius: 4px;

    text-decoration: none;
    text-align: center;

    font-family:
        'Lato',
        Arial,
        sans-serif;

    font-size: 0.88rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.opm-primary-button {
    background: var(--opm-wine);
    color: var(--opm-white);

    box-shadow:
        0 5px 15px rgba(124, 62, 53, 0.18);
}


.opm-primary-button:hover,
.opm-primary-button:focus {
    background: var(--opm-wine-light);
    color: var(--opm-white);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(124, 62, 53, 0.22);
}


.opm-secondary-button {
    background: var(--opm-white);
    color: var(--opm-wine);
}


.opm-secondary-button:hover,
.opm-secondary-button:focus {
    background: var(--opm-sand);
    color: var(--opm-wine);
}


/* =========================================================
   PRIS-/KVALITETSMARKERING
   ========================================================= */

.opm-highlight {
    margin:
        24px
        0
        20px;

    padding:
        22px
        22px;

    background: var(--opm-white);

    border-left:
        4px solid var(--opm-wine);
}


.opm-highlight p {
    margin-bottom: 9px;
}


.opm-highlight p:last-child {
    margin-bottom: 0;
}


.opm-small-text {
    color: var(--opm-muted);

    font-size: 0.88rem !important;
}


/* =========================================================
   AVSLUTANDE CTA
   ========================================================= */

.opm-final {
    background: var(--opm-wine);
    color: var(--opm-white);

    text-align: center;

    padding:
        46px
        0;
}


.opm-section-label-light {
    color:
        rgba(255, 255, 255, 0.75);
}


.opm-final h2 {
    margin:
        0
        0
        6px;

    color: var(--opm-white);

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(1.55rem, 4.5vw, 2rem);

    line-height: 1.25;
}


.opm-final p {
    margin:
        0
        0
        20px;

    color:
        rgba(255, 255, 255, 0.85);

    font-size: 1.02rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.opm-footer {
    background: #493E3A;

    color:
        rgba(255, 255, 255, 0.72);

    text-align: center;

    padding:
        26px
        24px;
}


.opm-footer p {
    margin:
        2px
        0;

    font-size: 0.82rem;
    letter-spacing: 0.04em;
}


.opm-footer a {
    color: var(--opm-white);
    text-decoration: none;
}


.opm-footer a:hover {
    text-decoration: underline;
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    .opm-hero {
        padding:
            34px
            40px
            48px;
    }


    .opm-section {
        padding:
            54px
            0;
    }


    .opm-how {
        padding-top: 44px;
        padding-bottom: 38px;
    }


    .opm-next {
        padding-bottom: 50px;
    }


    .opm-next-card {
        padding:
            34px
            48px
            34px;
    }


    .opm-final {
        padding:
            54px
            0;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 768px) {

    .opm-content {
        padding-left: 20px;
        padding-right: 20px;
    }


    .opm-hero {
        padding:
            22px
            20px
            32px;
    }


    .opm-logo-link {
        margin-bottom: 14px;
    }


    .opm-logo {
        max-width: 250px;
        max-height: 150px;
    }


    .opm-hero h1 {
        font-size: 1.85rem;
        line-height: 1.15;
        max-width: 560px;
    }


    .opm-hero-lead {
        font-size: 1rem;
        line-height: 1.6;
    }


    .opm-section {
        padding:
            38px
            0;
    }


    .opm-how {
        padding-top: 32px;
        padding-bottom: 28px;
    }


    .opm-next {
        padding-bottom: 36px;
    }


    .opm-next-card {
        padding:
            26px
            22px
            26px;
    }


    .opm-highlight {
        margin:
            20px
            0
            18px;

        padding:
            19px
            18px;
    }


    .opm-final {
        padding:
            42px
            0;
    }


    .opm-primary-button,
    .opm-secondary-button {
        width: 100%;
        max-width: 330px;
    }

}


/* =========================================================
   MYCKET SMÅ MOBILSKÄRMAR
   ========================================================= */

@media (max-width: 390px) {

    .opm-content {
        padding-left: 17px;
        padding-right: 17px;
    }


    .opm-logo {
        max-width: 220px;
    }


    .opm-hero h1 {
        font-size: 1.7rem;
    }


    .opm-next-card {
        padding:
            24px
            18px;
    }


    .opm-step {
        gap: 13px;
    }


    .opm-step-number {
        flex-basis: 36px;

        width: 36px;
        height: 36px;
    }

}