/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/**
 * Småje Klyngetun – Custom Button Style: us-btn-style_2
 * "Meld interesse"-knapp
 *
 * Design spec (Figma: MmY2eBSv9ZxPA0BjCwPS34, nodes 32:541 / 32:543 / 32:546 / 32:547 / 32:548)
 * ─────────────────────────────────────────────────────────────
 * Knapp bg:        #1E2601  (mørk olivengrønn)
 * Tekst:           #FFFFFF  25px / Bold / "Elms Sans"
 * Sirkel (normal): #F5F2E9  (lys krem), 35×35px
 * Pil:             #405908  (olivengrønn), chevron ned
 * Sirkel (hover):  #1E2601  med hvit pil
 * Tekst (hover):   #F5F2E9
 */

/* ──────────────────────────────────────────────
   Grunnstil
────────────────────────────────────────────── */
.w-btn.us-btn-style_2 {
    display:          inline-flex;
    align-items:      center;
    gap:              0;
    background-color: #1E2601;
    color:            #FFFFFF;
    font-family:      'Elms Sans', sans-serif;
    font-size:        25px;
    font-weight:      700;
    line-height:      1.3;
    letter-spacing:   0;
    padding:          10px 16px 10px 0 !important;
    border-radius:    100px;          /* full pill */
    border:           none;
    text-decoration:  none;
    transition:       background-color 0.25s ease, color 0.25s ease;
    cursor:           pointer;
}

/* ──────────────────────────────────────────────
   Sirkel-ikon til høyre (pseudo-element)
────────────────────────────────────────────── */
.w-btn.us-btn-style_2::after {
    content:          '';
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            35px;
    height:           35px;
    margin-left:      16px;
    border-radius:    50%;
    background-color: #F5F2E9;
    /* Chevron ned – SVG inline */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8' fill='none'%3E%3Cpath d='M1 1L7.5 7L14 1' stroke='%23405908' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: center;
    transition: background-color 0.25s ease, background-image 0.25s ease;
}

/* ──────────────────────────────────────────────
   Hover-state
────────────────────────────────────────────── */
.w-btn.us-btn-style_2:hover,
.w-btn.us-btn-style_2:focus-visible {
    background-color: #405908;
    color:            #F5F2E9;
    text-decoration:  none;
}

.w-btn.us-btn-style_2:hover::after,
.w-btn.us-btn-style_2:focus-visible::after {
    background-color: #1E2601;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8' fill='none'%3E%3Cpath d='M1 1L7.5 7L14 1' stroke='%23F5F2E9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ──────────────────────────────────────────────
   Row hover – bakgrunnsfarge
   Bruk: legg klassen "row-hover-green" på raden i WPBakery
────────────────────────────────────────────── */
.row-hover-green,
.g-cols.row-hover-green,
.wpb_row.row-hover-green,
.vc_row.row-hover-green {
    transition: background-color 0.35s ease,
                box-shadow 0.35s ease,
                transform 0.35s ease;
    cursor: pointer;
}

.row-hover-green:hover,
.g-cols.row-hover-green:hover,
.wpb_row.row-hover-green:hover,
.vc_row.row-hover-green:hover {
    background-color: #405908 !important;
    box-shadow: 0 6px 28px rgba(64, 89, 8, 0.35) !important;
    transform: scale(1.005);
    position: relative;
    z-index: 2;
}

.row-hover-green:hover *,
.g-cols.row-hover-green:hover *,
.wpb_row.row-hover-green:hover *,
.vc_row.row-hover-green:hover * {
    color: #ffffff !important;
}

/* ──────────────────────────────────────────────
   row-no-hover-green – 5-kolonne mobil uten hover
   Identisk layout som row-hover-green på mobil,
   men ingen hover-effekt eller cursor: pointer
────────────────────────────────────────────── */
@media (max-width: 767px) {
    .g-cols.row-no-hover-green,
    .wpb_row.row-no-hover-green,
    .vc_row.row-no-hover-green {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .g-cols.row-no-hover-green > .wpb_column,
    .wpb_row.row-no-hover-green > .wpb_column,
    .vc_row.row-no-hover-green > .wpb_column {
        width: 20% !important;
        min-width: 0 !important;
        flex: 0 0 20% !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
    }

    .g-cols.row-no-hover-green .vc_column-inner,
    .wpb_row.row-no-hover-green .vc_column-inner {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .g-cols.row-no-hover-green > .wpb_column:first-child .vc_column-inner,
    .wpb_row.row-no-hover-green > .wpb_column:first-child .vc_column-inner {
        padding-left: 20px !important;
    }

    .g-cols.row-no-hover-green > .wpb_column:last-child .vc_column-inner,
    .wpb_row.row-no-hover-green > .wpb_column:last-child .vc_column-inner {
        padding-right: 20px !important;
    }

    .g-cols.row-no-hover-green p,
    .g-cols.row-no-hover-green .wpb_wrapper,
    .g-cols.row-no-hover-green .wpb_text_column,
    .wpb_row.row-no-hover-green p,
    .wpb_row.row-no-hover-green .wpb_wrapper,
    .wpb_row.row-no-hover-green .wpb_text_column {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.3 !important;
        width: 100% !important;
    }

    .g-cols.row-no-hover-green p,
    .g-cols.row-no-hover-green span,
    .wpb_row.row-no-hover-green p,
    .wpb_row.row-no-hover-green span {
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ──────────────────────────────────────────────
   mobile-align-left – venstrestill på mobil
   Bruk: legg klassen på wrapper-elementet
──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mobile-align-left,
    .mobile-align-left .w-hwrapper {
        text-align: left !important;
        justify-content: flex-start !important;
    }
}

/* ──────────────────────────────────────────────
   Mobil – litt mindre (knapp)
────────────────────────────────────────────── */
@media (max-width: 768px) {
    .w-btn.us-btn-style_2 {
        font-size: 18px;
        padding:   8px 12px 8px 0 !important;
    }
    .w-btn.us-btn-style_2::after {
        width:       30px;
        height:      30px;
        margin-left: 12px;
    }
}

/* ──────────────────────────────────────────────
   row-hover-green – tving 5 kolonner på mobil
   WPBakery sin vc_col-sm-1/5 kollapser normalt
   til full bredde. Her overstyrer vi det.
────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Rad: flex-container for 5-kolonne-layout */
    .g-cols.row-hover-green,
    .wpb_row.row-hover-green,
    .vc_row.row-hover-green {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    /* Kolonner: flex-items, 20% bredde */
    .g-cols.row-hover-green > .wpb_column,
    .wpb_row.row-hover-green > .wpb_column,
    .vc_row.row-hover-green > .wpb_column {
        width: 20% !important;
        min-width: 0 !important;
        flex: 0 0 20% !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
    }

    /* vc_column-inner: også flex for vertikal sentrering */
    .g-cols.row-hover-green .vc_column-inner,
    .wpb_row.row-hover-green .vc_column-inner {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Første kolonne: ekstra padding venstre */
    .g-cols.row-hover-green > .wpb_column:first-child .vc_column-inner,
    .wpb_row.row-hover-green > .wpb_column:first-child .vc_column-inner {
        padding-left: 20px !important;
    }

    /* Siste kolonne: padding høyre */
    .g-cols.row-hover-green > .wpb_column:last-child .vc_column-inner,
    .wpb_row.row-hover-green > .wpb_column:last-child .vc_column-inner {
        padding-right: 20px !important;
    }

    /* Nullstill margin/padding på alle tekst-elementer */
    .g-cols.row-hover-green p,
    .g-cols.row-hover-green .wpb_wrapper,
    .g-cols.row-hover-green .wpb_text_column,
    .wpb_row.row-hover-green p,
    .wpb_row.row-hover-green .wpb_wrapper,
    .wpb_row.row-hover-green .wpb_text_column {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.3 !important;
        width: 100% !important;
    }

    /* Reduser font-størrelse så teksten passer */
    .g-cols.row-hover-green p,
    .g-cols.row-hover-green span,
    .wpb_row.row-hover-green p,
    .wpb_row.row-hover-green span {
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}