/* ==========================================================

   Foundation UI
   Version: 1.0.0

   Pizzapatrullen Core

   Johan & Alfred

   Vi kom.
   Vi åt.
   Vi recenserade.

========================================================== */


/* ----------------------------------------------------------
   Informationskort
---------------------------------------------------------- */

.pp-info-card{

    background:#FCFCFB;

    border:1px solid #ECECEC;

    border-top:none;

    border-radius:18px;

    padding:34px;

    margin:40px 0;

    box-shadow:
        0 14px 38px rgba(20,20,20,.05);

    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        box-shadow .18s cubic-bezier(.2,.8,.2,1);   

}


/* ----------------------------------------------------------
   Pizzapatrullen
---------------------------------------------------------- */

.pp-brand{

    font-size:11px;

    font-weight:700;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:#B6B6B6;

    margin-bottom:10px;

}


/* ----------------------------------------------------------
   Rubrik
---------------------------------------------------------- */

.pp-header{

    margin-bottom:26px;

}

.pp-title{

    margin:0;

    font-size:34px;

    line-height:1.2;

    font-weight:700;

    color:#2F3437;

}

.pp-subtitle{

    margin-top:6px;
    margin-bottom:18px;

    font-size:16px;

    font-style:italic;

    font-weight:400;

    color:#999999;

}


/* ----------------------------------------------------------
   Status
---------------------------------------------------------- */

.pp-status{

    margin-bottom:28px;

}

.pp-status-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    background:#F6F6F6;

}

.pp-open{

    color:#2E7D32;

    background:#EDF8EF;

}

.pp-closed{

    color:#C62828;

    background:#FFF1F1;

}

.pp-opening-hours{

    margin-top:14px;

    font-size:15px;

    color:#707070;

}

/* ----------------------------------------------------------
   Kontakt
---------------------------------------------------------- */

.pp-contact{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:34px;

}

.pp-contact-item{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:17px;

    line-height:1.6;

    color:#444;

}

.pp-contact-item .pp-icon{

    width:30px;

    text-align:center;

    font-size:20px;

    flex-shrink:0;

}

.pp-contact-item a{

    color:#2F3437;

    text-decoration:none;

    font-weight:600;

    transition:color .18s ease;

}

.pp-contact-item a:hover{

    color:#D62828;

}


/* ----------------------------------------------------------
   Bekvämlighet
---------------------------------------------------------- */

.pp-features{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:34px;

}

.pp-feature{

    display:inline-flex;

    align-items:center;

    padding:9px 14px;

    border-radius:999px;

    background:#F5F5F5;

    color:#555;

    font-size:14px;

    font-weight:600;

}


/* ----------------------------------------------------------
   Åtgärder
---------------------------------------------------------- */

.pp-actions{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:8px;

    margin-bottom:34px;

}

.pp-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    padding:15px 20px;

    border-radius:14px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    color:#FFFFFF;

    background:#D62828;

    box-shadow:
        0 6px 18px rgba(214,40,40,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;

}

.pp-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(214,40,40,.22);

    opacity:.96;

}

/* Telefon */

.pp-button-phone{

    background:#D62828;

    box-shadow:
        0 6px 18px rgba(214,40,40,.18);

}

.pp-button-web{

    background:#2E8B57;

    box-shadow:
        0 6px 18px rgba(46,139,87,.18);

}

.pp-button-map{

    background:#3367D6;

    box-shadow:
        0 6px 18px rgba(51,103,214,.18);

}
/* ----------------------------------------------------------
   Signatur
---------------------------------------------------------- */

.pp-signature{

    margin-top:42px;

    padding-top:28px;

    border-top:1px solid #ECECEC;

    text-align:center;

}

.pp-signature-text{

    font-size:16px;

    line-height:2;

    font-weight:400;

    color:#8E8E8E;

}

.pp-signature-year{

    margin-top:18px;

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#BBBBBB;

}

.pp-signature .pp-since{

    margin-top:14px;

    font-size:13px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#A5A5A5;

}


/* ----------------------------------------------------------
   Hover
---------------------------------------------------------- */

.pp-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(214,40,40,.22);

    opacity:.96;

    filter:brightness(1.05);

}


/* ----------------------------------------------------------
   Länkar
---------------------------------------------------------- */

.pp-info-card a{

    transition:
        color .18s ease,
        opacity .18s ease;

}

.pp-info-card a:hover{

    opacity:.88;

}


/* ----------------------------------------------------------
   Typografi
---------------------------------------------------------- */

.pp-title{

    letter-spacing:-0.03em;

}

.pp-contact-item strong{

    font-weight:700;

}


/* ----------------------------------------------------------
   Mobil
---------------------------------------------------------- */

@media (max-width:768px){

    .pp-info-card{

        padding:24px;

        margin:24px 0;

        border-radius:16px;

    }

    .pp-title{

        font-size:30px;

    }

    .pp-contact-item{

        font-size:16px;

    }

    .pp-button{

        padding:16px;

        font-size:17px;

    }

    .pp-signature p{

        font-size:17px;

    }
	
	/* ----------------------------------------------------------
   Knappar - Tillstånd
---------------------------------------------------------- */

.pp-button,
.pp-button:link,
.pp-button:visited,
.pp-button:hover,
.pp-button:focus,
.pp-button:active{

    color:#FFFFFF !important;

    text-decoration:none;

}

.pp-button img.emoji{

    vertical-align:middle;

}

.pp-button{

    color:#fff !important;

}

.pp-button *{

    color:#fff !important;

}

/* ==========================================
   Tvinga vita knappar i Foundation
========================================== */

.pp-actions a.pp-button,
.pp-actions a.pp-button:link,
.pp-actions a.pp-button:visited,
.pp-actions a.pp-button:hover,
.pp-actions a.pp-button:focus,
.pp-actions a.pp-button:active {

    color: #ffffff !important;
    text-decoration: none !important;

}

.pp-actions a.pp-button * {

    color: inherit !important;

}

}