/* =========================================================
   INSANE LABAN - FOOD HYGIENE RATING BADGE
   =========================================================
   |
   | Styles what renderHygieneBadge() produces in
   | hygiene-rating.php.
   |
   | Two sizes. .fhrs-sm for the footer, where it sits among
   | other things; .fhrs-lg for the payment page, where it is
   | doing persuading rather than reassuring.
   |
   | The whole badge is a link to the FSA listing. That is
   | deliberate - a hygiene claim a customer cannot check is
   | worth very little, and the FSA page is the check.
   |
========================================================= */

.fhrs-badge{
    display:inline-flex;
    align-items:center;
    gap:13px;
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(255,255,255,.05);
    color:inherit;
    text-decoration:none;
    transition:border-color .2s ease,background .2s ease;
}


.fhrs-badge:hover{
    border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.08);
}


/* ---------------------------------------------------------
   THE OFFICIAL ARTWORK
   ---------------------------------------------------------
   |
   | Used whenever Images/fhrs/fhrs-<rating>.png is present.
   | Fixed height, auto width, so whichever version of the
   | FSA badge gets downloaded sits correctly without having
   | to match a particular aspect ratio.
   |
--------------------------------------------------------- */

.fhrs-badge img{
    display:block;
    height:52px;
    width:auto;
    border-radius:4px;
}


.fhrs-lg img{
    height:72px;
}


/* ---------------------------------------------------------
   THE FALLBACK MARK
   ---------------------------------------------------------
   |
   | Shown only when the official image has not been added.
   |
   | Intentionally plain, and intentionally nothing like the
   | FSA's green-and-black badge. A near-copy of an official
   | mark reads as a business pretending to have something it
   | has not been given - even when, as here, the rating is
   | real. An honest label that links to the source is the
   | better failure mode.
   |
--------------------------------------------------------- */

.fhrs-mark{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px 12px;
    border-radius:10px;
    background:#0f4d2a;
    color:#fff;
    line-height:1.1;
}


.fhrs-mark-label{
    font-size:8.5px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
    opacity:.85;
}


.fhrs-mark-value{
    font-size:24px;
    font-weight:800;
}


.fhrs-mark-value small{
    font-size:11px;
    font-weight:700;
    opacity:.7;
}


.fhrs-lg .fhrs-mark{
    padding:11px 16px;
}

.fhrs-lg .fhrs-mark-value{
    font-size:32px;
}


/* ---------------------------------------------------------
   THE TEXT
--------------------------------------------------------- */

.fhrs-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}


.fhrs-text strong{
    font-size:13px;
    font-weight:700;
    line-height:1.3;
}


.fhrs-text span{
    font-size:11.5px;
    line-height:1.4;
    opacity:.7;
}


.fhrs-verify{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:2px;
    font-size:11px !important;
    font-weight:700;
    opacity:.85 !important;
}


.fhrs-verify i{
    font-size:9px;
}


.fhrs-lg .fhrs-text strong{
    font-size:15px;
}

.fhrs-lg .fhrs-text span{
    font-size:12.5px;
}


/* ---------------------------------------------------------
   ON A LIGHT SURFACE
   ---------------------------------------------------------
   |
   | The customer pages are dark, but the payment page's
   | cards are pale. Add .on-light there.
   |
--------------------------------------------------------- */

.fhrs-badge.on-light{
    border-color:rgba(20,16,12,.14);
    background:rgba(20,16,12,.03);
    color:#16120e;
}


.fhrs-badge.on-light:hover{
    border-color:rgba(20,16,12,.28);
    background:rgba(20,16,12,.06);
}


@media (max-width:560px){

    .fhrs-badge{
        gap:11px;
        padding:10px 12px;
    }

    .fhrs-badge img{
        height:46px;
    }

    .fhrs-lg img{
        height:56px;
    }
}


@media (prefers-reduced-motion:reduce){
    .fhrs-badge{transition:none}
}


/* =========================================================
   IN THE FOOTER
   =========================================================
   |
   | The wrapper site-footer.php puts around the badge.
   | Centred, with the same breathing room as the allergen
   | notice it sits above.
   |
========================================================= */

.site-footer-hygiene{
    display:flex;
    justify-content:center;
    padding:18px 20px 4px;
}


@media (max-width:560px){

    .site-footer-hygiene{
        padding:14px 16px 2px;
    }
}