/*
==================================================================
FILNAMN: style.css
URL: https://kvartersmenyguiden.se/restaurant_detail/themes/theme16-tv3/style.css
DIR: /home/objdevehl/public_html/node_js_dev/kvartersmenyguiden/kmg-test/public/start/restaurant_detail/themes/theme16-tv3/style.css
VER: 1.4 / 2026-08-22

DESC:
- TV-layout för theme16-tv3.
- V1.3 läser textstorlek, färger, marginaler och transparens från TV-admin.
- V1.3 tonar ned ramar och innehåller TV Bro-läge för dekorationsbilder.
- V1.4 visar externa webbsidor i en helt kantlös helskärms-iframe.
==================================================================
*/

:root {
    color-scheme: dark;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    background: #020300;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    position: relative;
    color: var(--text, #f5f5f1);
    background: #020300;
    font-size: 16px;
}

.tv-external-stage {
    position: fixed;
    z-index: 10000;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.tv-external-stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: #000;
}

.tv-external-mode .jb-widget-container,
.tv-external-mode .jb-launcher {
    display: none !important;
}

.tv-background,
.tv-video-background,
.tv-shade {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.tv-background {
    z-index: 0;
    background-color: #020300;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tv-video-background {
    z-index: 0;
    overflow: hidden;
    background: transparent;
}

.tv-video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    border: 0;
    opacity: var(--video-opacity, .18);
    filter: saturate(.72) brightness(.62) contrast(1.08);
    transform: translate(-50%, -50%) scale(1.02);
}

.tv-shade {
    z-index: 1;
    background:
        radial-gradient(circle at 50% -10%, rgba(122, 165, 16, .45), transparent 38%),
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .92));
    opacity: var(--shade-opacity, .18);
}

.tv-menu-shell,
.tv-image-stage,
.tv-message {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.tv-menu-shell {
    display: grid;
    grid-template-rows: minmax(132px, 15.2vh) 1fr minmax(64px, 7.1vh);
    gap: .45vh;
    padding: var(--outer-padding-y, .5vh) var(--outer-padding-x, .6vw);
}

.tv-menu-shell-no-header {
    grid-template-rows: 1fr minmax(54px, 6.4vh);
    gap: .35vh;
    padding: var(--outer-padding-y, .35vh) var(--outer-padding-x, .42vw);
}

.tv-header {
    position: relative;
    display: grid;
    grid-template-columns: 25vw minmax(400px, 1fr) 13vw 24vw;
    align-items: center;
    min-height: 0;
}

.tv-header-food,
.tv-header-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.tv-header-food img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .7));
}

.tv-header-food-left img {
    object-position: left center;
    transform: scale(1.16) translateX(-1.4vw);
}

.tv-header-food-right img {
    object-position: right center;
    transform: scale(1.08) translateX(1vw);
}

.tv-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .75));
}

.tv-restaurant-name {
    color: var(--accent);
    font-size: 2.2em;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.tv-heading {
    align-self: center;
    min-width: 0;
    text-align: center;
    text-transform: uppercase;
}

.tv-heading h1 {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--header-title-font-size, 6vw);
    font-weight: 900;
    line-height: .82;
    letter-spacing: .045em;
    text-shadow: 0 0 9px rgba(151, 201, 26, .9), 0 5px 8px #000;
}

.tv-heading p {
    display: inline-block;
    margin: .9vh 0 0;
    padding: .3vh 1.7vw .34vh;
    color: #071000;
    background:
        linear-gradient(177deg, transparent 0 8%, var(--accent) 9% 88%, transparent 89%),
        var(--accent);
    clip-path: polygon(2% 10%, 98% 3%, 100% 82%, 3% 100%, 0 35%);
    font-size: var(--header-subtitle-font-size, 1.38vw);
    font-weight: 900;
    letter-spacing: .035em;
    line-height: 1.12;
    transform: rotate(-.35deg);
    box-shadow: 0 0 18px rgba(0, 0, 0, .65);
}

.tv-screen-label {
    display: none;
}

.tv-columns {
    display: grid;
    grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
    gap: var(--column-gap, .52vw);
    min-height: 0;
}

.tv-column {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: var(--column-padding-y, .38vh) var(--column-padding-x, .58vw);
    border: 2px solid rgba(var(--border-rgb, 146, 189, 22), var(--border-opacity, .7));
    border-radius: .68vw;
    background: rgba(var(--panel-rgb, 0, 0, 0), var(--panel-opacity, .62));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .62), 0 5px 18px rgba(0, 0, 0, .28);
}

.tv-column > .tv-section:only-child {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tv-section + .tv-section {
    margin-top: .62vh;
    padding-top: .56vh;
    border-top: 1px solid rgba(var(--border-rgb, 146, 189, 22), var(--border-soft-opacity, .315));
}

.tv-section h2 {
    position: relative;
    z-index: 0;
    margin: -.12vh 0 .55vh;
    padding: .3vh .35vw .32vh;
    overflow: hidden;
    color: var(--accent);
    background:
        linear-gradient(90deg, transparent 0%, rgba(var(--border-rgb, 146, 189, 22), var(--heading-edge-opacity, .231)) 8%, rgba(var(--border-rgb, 146, 189, 22), var(--heading-bg-opacity, .42)) 48%, rgba(var(--border-rgb, 146, 189, 22), var(--heading-tail-opacity, .244)) 91%, transparent 100%);
    clip-path: polygon(3% 22%, 17% 8%, 36% 18%, 55% 4%, 72% 15%, 97% 3%, 92% 87%, 70% 76%, 52% 94%, 29% 82%, 7% 96%);
    font-size: var(--category-font-size, 2.05vw);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .018em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-shadow: 0 2px 2px #000;
    white-space: nowrap;
}

.tv-section-hero {
    display: block;
    width: 100%;
    height: min(20.5vh, 222px);
    margin: -.1vh 0 .5vh;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: screen;
    filter: drop-shadow(0 7px 11px rgba(0, 0, 0, .75));
}

.tv-category-description {
    margin: 0 0 .52vh;
    color: var(--description, #e1e1db);
    font-size: var(--description-font-size, .78vw);
    line-height: 1.12;
    text-align: center;
}

.tv-items {
    display: grid;
    gap: .3vh;
}

.tv-item {
    min-width: 0;
}

.tv-item-line {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: .33em;
    color: var(--accent);
    font-size: var(--item-font-size, 1.06vw);
    font-weight: 900;
    line-height: 1.04;
    text-transform: uppercase;
}

.tv-item-title {
    flex: 0 1 auto;
    min-width: 0;
}

.tv-item-dots {
    flex: 1 1 auto;
    min-width: .75em;
    height: .52em;
    border-bottom: 2px dotted rgba(var(--border-rgb, 146, 189, 22), var(--border-opacity, .7));
}

.tv-item-price {
    flex: 0 0 auto;
    color: var(--price);
    white-space: nowrap;
}

.tv-item-description {
    margin: .1vh .16vw .25vh 1.35em;
    color: var(--description, #e1e1db);
    font-size: var(--description-font-size, .78vw);
    line-height: 1.13;
}

.tv-section-note {
    margin-top: auto;
    padding: .48vh .65vw;
    color: rgba(255, 255, 255, .83);
    border: 1px solid rgba(var(--border-rgb, 146, 189, 22), var(--border-opacity, .7));
    border-radius: .62vw;
    background: rgba(var(--panel-rgb, 0, 0, 0), var(--panel-opacity, .62));
    font-size: var(--note-font-size, .72vw);
    line-height: 1.12;
    text-align: center;
}

.tv-section-note::before {
    margin-right: .65em;
    color: var(--accent);
    content: "❧";
    font-size: 1.35em;
}

.tv-section-extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5vw;
    margin-top: auto;
}

.tv-section-extra {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    min-height: 5.5vh;
    padding: .35vh .55vw;
    border: 1px solid rgba(var(--border-rgb, 146, 189, 22), var(--border-opacity, .7));
    border-radius: .62vw;
    background: rgba(var(--panel-rgb, 0, 0, 0), var(--panel-opacity, .62));
    text-align: center;
}

.tv-section-extra span {
    color: var(--description, #e1e1db);
    font-size: var(--extra-label-font-size, .75vw);
    letter-spacing: .03em;
}

.tv-section-extra strong {
    color: #16de40;
    font-size: var(--extra-price-font-size, 1.15vw);
    line-height: 1;
}

.tv-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
    overflow: hidden;
    padding: .34vh .7vw;
    border: 2px solid rgba(var(--border-rgb, 146, 189, 22), var(--border-opacity, .7));
    border-radius: 1vw;
    background: rgba(var(--panel-rgb, 0, 0, 0), var(--footer-opacity, .66));
}

.tv-footer span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text, #f5f5f1);
    font-size: var(--footer-font-size, 1.45vw);
    letter-spacing: .045em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.tv-footer span::before {
    margin-right: 1.2vw;
    color: var(--accent);
    font-family: Arial, sans-serif;
    font-size: 1.8em;
    font-weight: 400;
    line-height: .75;
}

.tv-footer span:nth-child(1)::before {
    content: "❧";
    transform: rotate(-18deg);
}

.tv-footer span:nth-child(2)::before {
    content: "♡";
}

.tv-footer span:nth-child(3)::before {
    content: "♨";
}

.tv-footer span + span {
    border-left: 1px solid rgba(var(--border-rgb, 146, 189, 22), var(--border-opacity, .7));
}

.tv-screen-2 .tv-footer span {
    padding: 0 .55vw;
    font-size: var(--footer-screen-two-font-size, 1.02vw);
    line-height: 1.05;
    white-space: normal;
}

.tv-screen-2 .tv-footer span::before {
    margin-right: .65vw;
    font-size: 1.35em;
}

/* Hörlursknappen från KMG:s jukebox visas diskret och försvinner efter 10 sekunder. */
.jb-widget-container,
.jb-launcher {
    opacity: 1;
    transition: opacity .6s ease, transform .28s ease !important;
}

.jb-launcher {
    right: 5px !important;
    bottom: 5px !important;
    transform: scale(.25) !important;
    transform-origin: right bottom !important;
}

body.kmg-tv-ui-hidden .jb-widget-container,
body.kmg-tv-ui-hidden .jb-launcher {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.kmg-tv-ui-hidden .jb-widget-container.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* TV Bro kan visa transparenta dekorationsbilder med svart yta; screen-blandning tar bort svart. */
.tv-png-compatibility .tv-header img,
.tv-png-compatibility .tv-section-hero {
    background: transparent !important;
    mix-blend-mode: screen;
}

.tv-image-stage {
    display: grid;
    place-items: center;
    padding: 0;
    background: #000;
}

.tv-image-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tv-message {
    display: grid;
    place-items: center;
    padding: 5vw;
    text-align: center;
}

.tv-message div {
    max-width: 800px;
    padding: 42px 54px;
    border: 2px solid var(--accent, #92bd16);
    border-radius: 24px;
    background: rgba(0, 0, 0, .78);
}

.tv-message strong {
    color: var(--accent, #92bd16);
    font-size: clamp(34px, 5vw, 80px);
}

.tv-message p {
    font-size: clamp(20px, 2.2vw, 40px);
}

.tv-message small {
    color: rgba(255, 255, 255, .55);
}

@media (max-aspect-ratio: 4/3) {
    .tv-menu-shell {
        padding-inline: .4vw;
    }

    .tv-header {
        grid-template-columns: 22vw minmax(300px, 1fr) 15vw 20vw;
    }

    .tv-column {
        padding-inline: .55vw;
    }

    .tv-item-description {
        margin-left: .3em;
    }
}