/* ==========================================================================
   PublicPortal start page (Start/Index) - the page a user lands on after logging in from a phone, and
   a guest on opening the portal from a phone (the guest band adds a login button, .pp-start-login).

   Variant D, "greeting band" (owner's choice, 29.09.2026): the navbar's colour runs on into a band that
   carries the greeting, and the 2x2 topic cards sit half over the band's lower edge, so the page reads
   as part of the municipality's portal rather than as a separate screen.

   THE BAND'S COLOUR IS THE NAVBAR'S, whatever the municipality's theme. All ten generated themes paint
   `.topnavbar` with a background-color plus a left-to-right gradient, and the view copies the computed
   gradient from the live navbar onto the band (see the script in Start/Index.cshtml). Both span the full
   width with the same `to right` gradient, so each column of pixels matches and there is no seam. The
   colours below are only the fallback for a page where that script did not run: theme-e, the default.

   The page is reached only from a phone login, but it is an ordinary address, so it also stays readable
   on a desktop: the content column is capped and centred while the band still runs edge to edge.
   ========================================================================== */

/* The band has to cancel the page's own gutter to reach the edges and the navbar. Angle's
   `.content-wrapper` pads 15px below 768px and 20px from 768px, and adds a 1px dark top border (with
   margin-top -1px) that would otherwise draw a line between the navbar and the band. These mirror Angle's
   own width-only rule on purpose: they follow the gutter, not the mobile gate. */
.pp-start-page {
    --pp-start-gutter: 15px;
}

@media (min-width: 768px) {
    .pp-start-page {
        --pp-start-gutter: 20px;
    }
}

/* The band starts 8px HIGHER than the navbar's bottom edge, tucked under the navbar (z-index 1050 in the
   root context, above the whole page), and its padding gives those 8px back so the greeting does not
   move. It has to be there: on a phone whose pixel ratio is not a whole number (2.625, 2.75, 3.5, 1.75 -
   most Android phones; measured) the navbar's gradient stops a fraction of a pixel short of its box, and
   the script in Start/Index.cshtml makes the navbar's flat colour transparent on this page so that last
   device row shows what lies beneath it. What lies beneath must be the band, in the same colour; the
   page's light background there would only trade a dark hairline for a light one. */
.pp-start-band {
    margin: calc(-1 * var(--pp-start-gutter) - 1px - 8px) calc(-1 * var(--pp-start-gutter)) 0;
    padding: 24px var(--pp-start-gutter) 62px;
    color: #ffffff;
    background-color: #1797be;
    background-image: linear-gradient(to right, #1797be 0%, #23b7e5 100%);
    background-repeat: repeat-x;
}

.pp-start-band-inner,
.pp-start {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.pp-start-band small {
    display: block;
    font-size: 14px;
    opacity: .92;
}

.pp-start-band h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.pp-start-band p {
    margin: 4px 0 0;
    font-size: 15px;
    opacity: .94;
}

/* The guest's way to log in (owner, 29.09.2026). The cards below are the page's first action and this
   is the second, so it is the quiet "tinted" button the owner chose for the navbar's options (variant 3):
   a dark veil over the band's own colour, white ink, no border or shadow. The veil darkens whatever
   theme the band copied, so the white label gains contrast on every one of them; 44px tall for a thumb. */
.pp-start-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin-top: 14px;
    padding: 0 20px 0 17px;
    border-radius: 22px;
    background: rgba(0, 0, 0, .16);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.pp-start-login:hover,
.pp-start-login:focus {
    color: #ffffff;
    text-decoration: none;
    background: rgba(0, 0, 0, .22);
}

.pp-start-login:active {
    background: rgba(0, 0, 0, .28);
}

.pp-start-login:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.pp-start {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
    color: #16232d;
}

/* Pulled up over the band's lower edge; later in the flow, so the cards paint above it. */
.pp-start-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: -46px;
}

/* The whole card is the link: a thumb does not have to find a small button inside it.
   Content starts at the top, not centred: two cards in a row are the same height, and centring would put
   their icons and titles at different heights whenever the descriptions wrap to a different number of lines. */
.pp-start-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 150px;
    padding: 16px 12px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e3e9ee;
    border-radius: 16px;
    box-shadow: 0 10px 22px -14px rgba(16, 40, 60, .5);
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.pp-start-card:hover,
.pp-start-card:focus {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 14px 26px -14px rgba(16, 40, 60, .6);
}

.pp-start-card:active {
    transform: scale(.98);
}

.pp-start-card:focus-visible {
    outline: 3px solid #1788c2;
    outline-offset: 2px;
}

.pp-start-card-tile {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.pp-start-card strong {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.2;
}

.pp-start-card-text {
    font-size: 13px;
    line-height: 1.35;
    color: #5d6f7c;
}

/* One colour per topic, only on the round icon tile; the rest of the card stays neutral.
   Every ink here clears 4.5:1 against its own tile. */
.pp-start-card--education .pp-start-card-tile { background: #fbeed6; color: #a8650a; }
.pp-start-card--urbanism  .pp-start-card-tile { background: #e3ebf8; color: #34609f; }
.pp-start-card--events    .pp-start-card-tile { background: #f8e3e8; color: #b03a5b; }
.pp-start-card--tourism   .pp-start-card-tile { background: #dcf0f3; color: #0e7c9b; }
.pp-start-card--noise     .pp-start-card-tile { background: #ece6f8; color: #5d3fa6; }
.pp-start-card--streets   .pp-start-card-tile { background: #e2f1e4; color: #256a33; }

/* A reminder, not a control: the menu itself is the hamburger in the navbar. The icon is a neutral
   slate and not the navbar's colour, so it does not compete with the band above. */
.pp-start-menuhint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    color: #5d6f7c;
    background: #ffffff;
    border: 1px dashed #c9d5de;
    border-radius: 12px;
}

.pp-start-menuhint-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #46596a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Install card of the phone app (Docs/PublicPortalPwa_Plan.md). Shown by pwa-register.js only on a phone in a
   browser tab. Variant "app tile with a frame, no fill" (owner, 02.10.2026): an offer, not a topic, so it is no
   white card like the topics but the app's name and icon on the page's own background inside a thin frame, with
   the action - Chrome's install button, or Safari's two steps - under the text. The [hidden] rules matter:
   display:flex would otherwise win over the attribute the script toggles. */
.pp-pwa-install {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d3e1eb;
    border-radius: 14px;
}

.pp-pwa-install[hidden],
.pp-pwa-install [hidden] {
    display: none;
}

/* Room on the right for the close button, which sits in the corner over the frame's padding. */
.pp-pwa-install-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 36px;
}

.pp-pwa-install-icon {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(16, 40, 60, .2);
}

.pp-pwa-install-name {
    min-width: 0;
}

.pp-pwa-install-name strong {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #16232d;
}

.pp-pwa-install-name span {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.35;
    color: #5d6f7c;
}

.pp-pwa-install-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.4;
    color: #46596a;
}

/* Full width and 50px tall for a thumb. #12719f, not the theme's lighter primary: white text on it clears
   4.5:1 (5.4:1). */
.pp-pwa-install-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: #12719f;
    color: #ffffff;
    font-size: 16.5px;
    font-weight: 700;
}

.pp-pwa-install-button:hover,
.pp-pwa-install-button:focus {
    background: #0f6189;
}

.pp-pwa-install-button:active {
    background: #0d5677;
}

.pp-pwa-install-button:focus-visible,
.pp-pwa-install-close:focus-visible {
    outline: 3px solid #1788c2;
    outline-offset: 2px;
}

.pp-pwa-install-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-pwa-install-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.3;
    color: #16232d;
}

.pp-pwa-install-step {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #12719f;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Safari's own share and add icons, drawn as lines so they read like its toolbar. */
.pp-pwa-install-step-icon {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #12719f;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-pwa-install-note {
    font-size: 13px;
    text-align: center;
    color: #5d6f7c;
}

.pp-pwa-install-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5d6f7c;
}

@media (prefers-reduced-motion: reduce) {
    .pp-start-card { transition: none; }
}