/* ==========================================================================
   Nettikortti public site

   One template, several curated themes. A theme is a set of custom
   properties (type, surfaces, shape) switched by <html data-theme="…">,
   plus a few structural rules at the end of this file.

   Tenant colours arrive inline from the server (see profiles/themes.py):
     --brand        the tenant's primary colour (fills only)
     --on-brand     black or white, readable on --brand
     --brand-text   --brand adjusted to >= 4.5:1 on the theme's backgrounds
     --accent / --on-accent / --accent-text   same, for the secondary colour
   Text never sits on --brand without --on-brand, and coloured text always
   uses --brand-text, so any colour a tenant picks stays readable.

   Contents: tokens · base · top bar · card · actions · sections · pages ·
   notices · account pages · footer · lightbox · themes · print
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens (the "clean" theme is the default)
   -------------------------------------------------------------------------- */
:root {
    /* Fallbacks; overridden inline per tenant */
    --brand: #1F3A5F;
    --on-brand: #FFFFFF;
    --brand-text: #1F3A5F;
    --accent: #C9962B;
    --on-accent: #000000;
    --accent-text: #7A5B1A;

    /* Surfaces and ink */
    --bg: #F2F3F5;
    --surface: #FFFFFF;
    --tone: #E9EBEF;
    --tone-hover: #DEE1E7;
    --ink: #14171F;
    --ink-2: #5A6170;
    --ok: #17794A;

    /* Type */
    --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: var(--font-body);
    --display-weight: 700;
    --display-tracking: -0.025em;
    --name-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.5rem);
    --name-leading: 1.08;
    --h2-size: 1.1875rem;
    --h2-weight: 700;
    --h2-tracking: -0.01em;

    /* Shape and rhythm */
    --radius-panel: 22px;
    --radius-btn: 14px;
    --radius-tile: 14px;
    --radius-img: 14px;
    --radius-logo: 24%;
    --page-pad: 0.75rem;
    --panel-bg: var(--surface);
    --panel-pad: 1.25rem;
    --section-gap: 0.75rem;
    --column: 34rem;

    --focus: var(--brand-text);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: 1.2;
    color: var(--ink);
    overflow-wrap: anywhere;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--brand-text);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

img {
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
}

.ph {
    line-height: 1;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Top bar: business name -> home, links to published pages
   -------------------------------------------------------------------------- */
.topbar {
    padding: 0.625rem var(--page-pad) 0;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    flex-wrap: wrap;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 0.5rem;
    min-height: 2.75rem;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    font-size: 1.0625rem;
    color: var(--ink);
    text-decoration: none;
}

.topbar-brand img {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-logo);
    object-fit: contain;
    background: #fff;
}

.topbar nav {
    margin-left: auto;
}

.topbar-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.125rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-btn);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.topbar-link:hover,
.topbar-link[aria-current="page"] {
    background: var(--tone);
}

/* --------------------------------------------------------------------------
   Card: the business card page
   -------------------------------------------------------------------------- */
.card {
    width: 100%;
    max-width: calc(var(--column) + 2 * var(--page-pad));
    margin: 0 auto;
    padding: var(--page-pad) var(--page-pad) 0;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

.card-head {
    background: var(--panel-bg);
    border-radius: var(--radius-panel);
    padding: var(--panel-pad);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Cover photo: the box has a fixed ratio, so the page never shifts. */
.cover {
    margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background: var(--tone);
}

.cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}

.logo {
    flex: none;
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-logo);
    object-fit: contain;
    background: #fff;
}

.logo--monogram {
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 2.25rem;
    line-height: 1;
}

/* With a cover the logo sits on its lower edge. */
.has-cover .logo {
    margin-top: -3.75rem;
    box-shadow: 0 0 0 4px var(--panel-bg);
}

.name {
    font-size: var(--name-size);
    line-height: var(--name-leading);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

.tagline {
    margin: 0.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--ink-2);
    text-wrap: pretty;
}

.status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.375rem;
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.status-dot {
    flex: none;
    align-self: center;
    width: 0.5625rem;
    height: 0.5625rem;
    margin-right: 0.125rem;
    border-radius: 50%;
    background: currentColor;
}

.status-label {
    font-weight: 700;
    color: var(--ink);
}

.status--open .status-dot,
.status--open .status-label {
    color: var(--ok);
}

.status--open .status-dot {
    background: var(--ok);
}

/* --------------------------------------------------------------------------
   Actions: one or two big primary buttons, the rest as compact tiles
   -------------------------------------------------------------------------- */
.actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.actions-primary {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: var(--radius-btn);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
}

.btn .ph {
    font-size: 1.375rem;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--brand);
    color: var(--on-brand);
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--brand) 88%, var(--on-brand));
}

.btn-quiet {
    min-height: 2.75rem;
    padding: 0.375rem 1rem;
    background: var(--tone);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.btn-quiet:hover {
    background: var(--tone-hover);
}

.btn-quiet .ph {
    font-size: 1.125rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 100%;
    min-height: 4.5rem;
    padding: 0.625rem 0.25rem;
    border-radius: var(--radius-tile);
    background: var(--tone);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 120ms ease, transform 120ms ease;
}

.tile .ph {
    font-size: 1.5rem;
    color: var(--brand-text);
}

.tile:hover {
    background: var(--tone-hover);
}

.tile:active {
    transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* On phones the two columns dissolve and sections interleave by order. */
.col-main,
.col-aside {
    display: contents;
}

.section {
    background: var(--panel-bg);
    border-radius: var(--radius-panel);
    padding: var(--panel-pad);
}

.section--about    { order: 1; }
.section--services { order: 2; }
.section--hours    { order: 3; }
.section--photos   { order: 4; }
.section--contact  { order: 5; }
.section--social   { order: 6; }
.section--share    { order: 7; }

.section-title {
    margin-bottom: 0.875rem;
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    letter-spacing: var(--h2-tracking);
}

.about-text {
    font-size: 1.0625rem;
    text-wrap: pretty;
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* Services: a list with optional price and duration */
.services {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service {
    display: flex;
    gap: 0.875rem;
}

.service-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-tile);
    background: var(--tone);
    color: var(--brand-text);
    font-size: 1.25rem;
}

.service-body {
    flex: 1;
    min-width: 0;
}

/* Name and price share a line when they fit. The name never shrinks below
   its longest word: if that leaves no room, the price moves to its own line
   instead of the name breaking mid-word. */
.service-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
}

.service-name {
    flex: 1 1 60%;
    flex: 1 1 min-content;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.service-tail {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    max-width: 100%;
    margin-left: auto;
}

.service-leader {
    display: none;
}

.service-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink);
}

.service-note {
    margin: 0.125rem 0 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.service-duration {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.service-duration + .service-text::before {
    content: "· ";
}

/* Opening hours */
.hours {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.hours th,
.hours td {
    padding: 0.4375rem 0.75rem;
    font-weight: 400;
    text-align: left;
}

.hours th {
    border-radius: 10px 0 0 10px;
}

.hours td {
    border-radius: 0 10px 10px 0;
    text-align: right;
    white-space: nowrap;
}

.hours .is-closed td {
    color: var(--ink-2);
}

.hours .is-today th,
.hours .is-today td {
    background: var(--tone);
    font-weight: 700;
}

.hours-wrap {
    margin: 0 -0.75rem;
}

.today-badge {
    margin-left: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-text);
}

.hours-text {
    margin: 0;
    white-space: pre-line;
}

/* Photos */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-img);
    background: var(--tone);
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

/* The first photo leads; an odd one out at the end fills its row. */
.gallery li:first-child {
    grid-column: 1 / -1;
}

.gallery li:first-child .gallery-item {
    aspect-ratio: 3 / 2;
}

.gallery--1 li:first-child .gallery-item {
    aspect-ratio: 4 / 3;
}

.gallery--even li:last-child {
    grid-column: 1 / -1;
}

.gallery--even li:last-child .gallery-item {
    aspect-ratio: 2 / 1;
}

.gallery--2 li:last-child .gallery-item {
    aspect-ratio: 3 / 2;
}

/* Contact details */
.contact {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.contact-item > .ph {
    flex: none;
    margin-top: 0.1875rem;
    font-size: 1.25rem;
    color: var(--ink-2);
}

.contact-item a {
    overflow-wrap: anywhere;
}

.contact-value {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

a.contact-value:hover {
    text-decoration: underline;
}

.contact-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Social links: icon and name, never an icon alone */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem 0 0.875rem;
    border-radius: var(--radius-btn);
    background: var(--tone);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.social-link .ph {
    font-size: 1.25rem;
}

.social-link:hover {
    background: var(--tone-hover);
}

/* Share: small, the visitor is already here */
.share {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.share-qr {
    flex: none;
    width: 5.5rem;
    height: 5.5rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: #fff;
}

.share-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}

.share-hint {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

/* "Coming soon": a site without content yet */
.soon {
    margin: 0;
    color: var(--ink-2);
    font-size: 1.0625rem;
    text-wrap: pretty;
}

.soon strong {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   CMS pages, page list, error pages
   -------------------------------------------------------------------------- */
.page {
    width: 100%;
    max-width: calc(42rem + 2 * var(--page-pad));
    margin: 0 auto;
    padding: var(--page-pad) var(--page-pad) 0;
}

.page-panel {
    background: var(--panel-bg);
    border-radius: var(--radius-panel);
    padding: clamp(1.25rem, 5vw, 2.5rem);
}

.page-title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.375rem);
    line-height: 1.12;
    text-wrap: balance;
}

.page-content {
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-content > :last-child {
    margin-bottom: 0;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    margin: 2em 0 0.5em;
}

.page-content h1,
.page-content h2 {
    font-size: 1.5rem;
}

.page-content h3 {
    font-size: 1.25rem;
}

.page-content h4 {
    font-size: 1.0625rem;
}

.page-content ul,
.page-content ol {
    margin: 0 0 1em;
    padding-left: 1.375rem;
}

.page-content li {
    margin-bottom: 0.375rem;
}

.page-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-tile);
    background: var(--tone);
}

.page-content blockquote p:last-child {
    margin-bottom: 0;
}

.page-content pre {
    padding: 1rem;
    overflow-x: auto;
    border-radius: var(--radius-tile);
    background: var(--tone);
    font-size: 0.9375rem;
}

.page-content hr {
    height: 0.25rem;
    width: 3rem;
    margin: 2rem 0;
    border: 0;
    border-radius: 2px;
    background: var(--tone-hover);
}

.page-back {
    margin: 1.25rem 0 0;
    padding: 0 0.5rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.75rem 1.125rem;
    border-radius: var(--radius-tile);
    background: var(--tone);
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.link-list a:hover {
    background: var(--tone-hover);
}

.link-list .ph {
    flex: none;
    font-size: 1.25rem;
    color: var(--brand-text);
}

/* Centred notice: 404, empty states, fallback page */
.notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 28rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 12vh, 6rem) 1.25rem 2rem;
    text-align: center;
}

.notice .notice-code {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 22vw, 7rem);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: 1;
    color: var(--brand-text);
}

.notice-title {
    margin-bottom: 0.625rem;
    font-size: 1.625rem;
}

.notice p {
    color: var(--ink-2);
}

.notice .btn {
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Account pages (login, register, dashboard) and messages
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section-plain {
    padding: 2.5rem 0;
}

.alert {
    padding: 0.875rem 1.125rem;
    border-radius: var(--radius-tile);
    margin-bottom: 1rem;
}

.alert-success { background: #D1FAE5; color: #065F46; }
.alert-error   { background: #FEE2E2; color: #991B1B; }
.alert-info    { background: #DBEAFE; color: #1E40AF; }

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem 0.875rem;
    font: inherit;
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid #B6BBC6;
    border-radius: 10px;
}

.form-input::placeholder {
    color: var(--ink-2);
}

.form-input:focus {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--brand-text);
}

.form-help {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.form-error {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: #B91C1C;
}

.auth-card {
    max-width: 26rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-panel);
}

.auth-title {
    margin-bottom: 1.5rem;
    font-size: 1.625rem;
    text-align: center;
}

.auth-footer {
    margin: 1.5rem 0 0;
    font-size: 0.9375rem;
    text-align: center;
    color: var(--ink-2);
}

.dashboard-title {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.panel {
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-panel);
}

.panel-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.detail-list {
    margin: 0;
}

.detail-list dt {
    font-size: 0.875rem;
    color: var(--ink-2);
}

.detail-list dd {
    margin: 0 0 0.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.detail-list dd:last-child {
    margin-bottom: 0;
}

.site-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-name {
    margin: 0;
    font-weight: 700;
}

.site-domains {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.badge {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
}

.badge-success { background: #D1FAE5; color: #065F46; }
.badge-muted   { background: var(--tone); color: var(--ink-2); }

.text-muted {
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    padding: 2.5rem 1.25rem 2rem;
    font-size: 0.875rem;
    color: var(--ink-2);
    text-align: center;
}

.site-footer p {
    margin: 0;
}

.made-with {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
    color: var(--ink-2);
    font-weight: 600;
    text-decoration: none;
}

.made-with:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Lightbox (progressive enhancement over plain image links)
   -------------------------------------------------------------------------- */
.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(8 9 11 / 0.94);
    color: #fff;
}

.lightbox::backdrop {
    background: rgb(8 9 11 / 0.94);
}

.lightbox[open] {
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
}

.lightbox-image {
    display: block;
    max-width: min(100vw - 1.5rem, 75rem);
    max-height: calc(100dvh - 7rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

.lightbox-caption {
    min-height: 3.5rem;
    margin: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    font-size: 0.9375rem;
    text-align: center;
}

.lightbox-btn {
    position: fixed;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    font-size: 1.375rem;
    cursor: pointer;
}

.lightbox-btn:hover {
    background: rgb(255 255 255 / 0.26);
}

.lightbox-btn:focus-visible {
    outline-color: #fff;
}

.lightbox-close { top: 0.75rem; right: 0.75rem; }
.lightbox-prev  { left: 0.75rem; top: calc(50% - 1.5rem); }
.lightbox-next  { right: 0.75rem; top: calc(50% - 1.5rem); }

/* --------------------------------------------------------------------------
   Wider screens: shared rules
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
    :root {
        --page-pad: 1.5rem;
        --panel-pad: 1.75rem;
    }

    .card {
        padding-top: 2rem;
    }

    /* Photos become a mosaic on a 12-column grid: every count fills its rows. */
    .gallery {
        grid-template-columns: repeat(12, 1fr);
    }

    .gallery li,
    .gallery li:first-child,
    .gallery--even li:last-child {
        grid-column: span 4;
    }

    .gallery .gallery-item,
    .gallery li:first-child .gallery-item,
    .gallery--even li:last-child .gallery-item {
        height: 100%;
        aspect-ratio: 1;
    }

    .gallery--1 li:first-child {
        grid-column: span 12;
    }

    .gallery--1 li:first-child .gallery-item {
        aspect-ratio: 16 / 9;
    }

    .gallery--2 li,
    .gallery--2 li:first-child,
    .gallery--2 li:last-child,
    .gallery--4 li,
    .gallery--4 li:first-child,
    .gallery--4 li:last-child,
    .gallery--5 li:nth-child(-n+2) {
        grid-column: span 6;
    }

    .gallery--2 .gallery-item,
    .gallery--2 li:first-child .gallery-item,
    .gallery--2 li:last-child .gallery-item,
    .gallery--4 .gallery-item,
    .gallery--4 li:first-child .gallery-item,
    .gallery--4 li:last-child .gallery-item,
    .gallery--5 li:nth-child(-n+2) .gallery-item {
        aspect-ratio: 4 / 3;
    }

    .gallery--7 li:nth-child(n+4),
    .gallery--8 li,
    .gallery--8 li:first-child,
    .gallery--8 li:last-child {
        grid-column: span 3;
    }

    /* Three or six photos: the first one leads at double size. */
    .gallery--lead li:first-child {
        grid-column: span 8;
        grid-row: span 2;
    }

    .gallery--lead li:first-child .gallery-item {
        aspect-ratio: auto;
    }
}

/* ==========================================================================
   THEMES
   ========================================================================== */

/* --------------------------------------------------------------------------
   clean (default): white panels on a soft grey ground. Two columns on
   desktop: the card stays in view on the left, details scroll on the right.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
    [data-theme="clean"] .card--full,
    [data-theme="dark"] .card--full {
        display: grid;
        grid-template-columns: 24rem minmax(0, 1fr);
        align-items: start;
        gap: 1.25rem;
        max-width: 68rem;
    }

    [data-theme="clean"] .card--full .card-body,
    [data-theme="dark"] .card--full .card-body {
        gap: 1.25rem;
    }

    [data-theme="clean"] .card--full .cover,
    [data-theme="dark"] .card--full .cover {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 960px) and (min-height: 760px) {
    [data-theme="clean"] .card--full .card-head,
    [data-theme="dark"] .card--full .card-head {
        position: sticky;
        top: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   warm: paper ground, serif headings, round shapes, menu-style price list.
   No panels: sections breathe on the page. Centred identity.
   -------------------------------------------------------------------------- */
[data-theme="warm"] {
    --bg: #F6F0E7;
    --surface: #F6F0E7;
    --tone: #EDE4D6;
    --tone-hover: #E3D8C6;
    --ink: #2A211B;
    --ink-2: #6A5C50;
    --ok: #2E6B45;

    --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --display-weight: 600;
    --display-tracking: -0.02em;
    --name-size: clamp(2.25rem, 1.5rem + 4vw, 3.5rem);
    --name-leading: 1.02;
    --h2-size: 1.625rem;
    --h2-weight: 600;
    --h2-tracking: -0.015em;

    --radius-panel: 28px;
    --radius-btn: 999px;
    --radius-tile: 22px;
    --radius-img: 22px;
    --radius-logo: 50%;
    --page-pad: 1.25rem;
    --panel-bg: transparent;
    --panel-pad: 0rem;
    --section-gap: 2.75rem;
    --column: 38rem;
}

[data-theme="warm"] .card {
    padding-top: 1.25rem;
}

[data-theme="warm"] .card-head {
    gap: 1.5rem;
}

[data-theme="warm"] .cover {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-panel);
}

[data-theme="warm"] .identity {
    align-items: center;
    text-align: center;
}

[data-theme="warm"] .logo {
    width: 6rem;
    height: 6rem;
}

[data-theme="warm"] .has-cover .logo {
    margin-top: -4.5rem;
    box-shadow: 0 0 0 6px var(--bg);
}

[data-theme="warm"] .status {
    justify-content: center;
}

[data-theme="warm"] .tagline {
    font-size: 1.125rem;
}

[data-theme="warm"] .section-title {
    margin-bottom: 1.125rem;
}

[data-theme="warm"] .about-text {
    font-size: 1.125rem;
    line-height: 1.6;
}

[data-theme="warm"] .services {
    gap: 1.125rem;
}

[data-theme="warm"] .service-name {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* The menu leader between a dish and its price. */
[data-theme="warm"] .service-name {
    flex: 0 1 auto;
}

[data-theme="warm"] .service-tail {
    flex: 1 0 auto;
}

[data-theme="warm"] .service-leader {
    display: block;
    flex: 1 0 1.5rem;
    align-self: flex-end;
    margin-bottom: 0.3125rem;
    border-bottom: 2px dotted color-mix(in srgb, var(--ink-2) 50%, transparent);
}

[data-theme="warm"] .service-price {
    font-weight: 500;
}

[data-theme="warm"] .share-qr {
    border-radius: 16px;
    padding: 0.375rem;
}

@media (min-width: 600px) {
    [data-theme="warm"] {
        --panel-pad: 0rem;
        --section-gap: 3.5rem;
    }

    [data-theme="warm"] .card {
        padding-top: 2.5rem;
    }

    [data-theme="warm"] .cover {
        aspect-ratio: 2 / 1;
    }

    [data-theme="warm"] .actions {
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------------------
   dark: near-black ground, geometric type, pills. The cover bleeds to the
   screen edges on phones.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --bg: #0F1013;
    --surface: #1A1C21;
    --tone: #262930;
    --tone-hover: #30343D;
    --ink: #F3F4F6;
    --ink-2: #A4A9B4;
    --ok: #5DD696;

    --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display-weight: 700;
    --display-tracking: -0.035em;
    --name-size: clamp(2.125rem, 1.4rem + 3.6vw, 3rem);
    --name-leading: 1.02;
    --h2-size: 1.25rem;
    --h2-tracking: -0.02em;

    --radius-panel: 26px;
    --radius-btn: 999px;
    --radius-tile: 18px;
    --radius-img: 16px;
    --radius-logo: 50%;
    --page-pad: 0.75rem;

    color-scheme: dark;
}

[data-theme="dark"] .form-input {
    border-color: #4A4F5A;
}

[data-theme="dark"] .alert-success { background: #12382A; color: #9BE8C2; }
[data-theme="dark"] .alert-error   { background: #45191B; color: #FFB4B4; }
[data-theme="dark"] .alert-info    { background: #172E52; color: #B3D2FF; }
[data-theme="dark"] .form-error    { color: #FF9C9C; }

@media (max-width: 959.98px) {
    /* The head sits straight on the ground; the cover runs edge to edge. */
    [data-theme="dark"] .card-head {
        --panel-bg: var(--bg);
        padding: 0 0.5rem 0.75rem;
        border-radius: 0;
    }

    [data-theme="dark"] .has-cover .card-head {
        padding-top: 0;
    }

    [data-theme="dark"] .card:not(.has-cover) .card-head {
        padding-top: 1.25rem;
    }

    [data-theme="dark"] .cover {
        margin: calc(var(--page-pad) * -1) calc((var(--page-pad) + 0.5rem) * -1) 0;
        border-radius: 0;
        aspect-ratio: 4 / 3;
    }

    [data-theme="dark"] .has-cover {
        padding-top: var(--page-pad);
    }
}

@media (min-width: 600px) and (max-width: 959.98px) {
    [data-theme="dark"] .card.has-cover {
        padding-top: 1.5rem;
    }

    [data-theme="dark"] .cover {
        margin: 0;
        border-radius: var(--radius-panel);
        aspect-ratio: 2 / 1;
    }
}

/* --------------------------------------------------------------------------
   bold: the head is a solid block of the brand colour, edge to edge. Heavy
   grotesque, square corners, thick rules.
   -------------------------------------------------------------------------- */
[data-theme="bold"] {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --tone: #EFEFEC;
    --tone-hover: #E2E2DD;
    --ink: #0B0B0B;
    --ink-2: #55554F;
    --ok: #17794A;

    --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display-weight: 900;
    --display-tracking: -0.03em;
    --name-size: clamp(2.5rem, 1.4rem + 6vw, 4.5rem);
    --name-leading: 0.95;
    --h2-size: 1.5rem;
    --h2-weight: 900;
    --h2-tracking: -0.02em;

    --radius-panel: 0px;
    --radius-btn: 0px;
    --radius-tile: 0px;
    --radius-img: 0px;
    --radius-logo: 0px;
    --page-pad: 1.25rem;
    --panel-bg: transparent;
    --panel-pad: 0rem;
    --section-gap: 2.75rem;
    --column: 44rem;
}

[data-theme="bold"] .card {
    max-width: none;
    padding: 0;
}

[data-theme="bold"] .card-head {
    --focus: var(--on-brand);
    background: var(--brand);
    color: var(--on-brand);
    padding: 1.75rem var(--page-pad) 1.5rem;
    gap: 1.5rem;
}

[data-theme="bold"] .card-head .name,
[data-theme="bold"] .card-head .tagline,
[data-theme="bold"] .card-head .status,
[data-theme="bold"] .card-head .status-label,
[data-theme="bold"] .card-head .soon,
[data-theme="bold"] .card-head .soon strong {
    color: var(--on-brand);
}

[data-theme="bold"] .tagline {
    font-size: 1.125rem;
    font-weight: 500;
}

/* On the brand block, state is carried by the dot's shape, not by a colour. */
[data-theme="bold"] .card-head .status-dot {
    background: var(--on-brand);
    color: var(--on-brand);
}

[data-theme="bold"] .card-head .status--closed .status-dot {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--on-brand);
}

[data-theme="bold"] .cover {
    margin: -1.75rem calc(var(--page-pad) * -1) 0;
    aspect-ratio: 16 / 9;
}

[data-theme="bold"] .logo--monogram {
    background: var(--on-brand);
    color: var(--brand);
}

[data-theme="bold"] .has-cover .logo {
    box-shadow: 0 0 0 4px var(--brand);
}

[data-theme="bold"] .card-head .btn-primary {
    background: var(--on-brand);
    color: var(--brand);
}

[data-theme="bold"] .card-head .btn-primary:hover {
    background: color-mix(in srgb, var(--on-brand) 88%, var(--brand));
}

[data-theme="bold"] .btn {
    font-weight: 900;
    letter-spacing: -0.01em;
}

[data-theme="bold"] .tile {
    background: transparent;
    color: var(--on-brand);
    box-shadow: inset 0 0 0 2px var(--on-brand);
    font-weight: 700;
}

[data-theme="bold"] .tile .ph {
    color: var(--on-brand);
}

[data-theme="bold"] .tile:hover {
    background: var(--on-brand);
    color: var(--brand);
}

[data-theme="bold"] .tile:hover .ph {
    color: var(--brand);
}

[data-theme="bold"] .card-body {
    width: 100%;
    max-width: calc(var(--column) + 2 * var(--page-pad));
    margin: 0 auto;
    padding: 2.5rem var(--page-pad) 0;
}

/* A thick bar in the secondary colour opens every section. */
[data-theme="bold"] .section-title::before {
    content: "";
    display: block;
    width: 3rem;
    height: 0.5rem;
    margin-bottom: 0.875rem;
    background: var(--accent);
}

[data-theme="bold"] .services {
    gap: 0;
}

[data-theme="bold"] .service {
    padding: 0.875rem 0;
    border-top: 2px solid var(--ink);
}

[data-theme="bold"] .service:last-child {
    border-bottom: 2px solid var(--ink);
}

[data-theme="bold"] .service-name {
    font-weight: 700;
    font-size: 1.0625rem;
}

[data-theme="bold"] .service-price {
    font-weight: 900;
}

[data-theme="bold"] .hours th,
[data-theme="bold"] .hours td {
    border-radius: 0;
}

[data-theme="bold"] .hours .is-today th,
[data-theme="bold"] .hours .is-today td {
    background: var(--ink);
    color: var(--bg);
}

[data-theme="bold"] .hours .is-today .today-badge {
    color: var(--bg);
}

[data-theme="bold"] .gallery {
    gap: 0.25rem;
}

[data-theme="bold"] .share-qr {
    border-radius: 0;
    padding: 0;
}

[data-theme="bold"] .page,
[data-theme="bold"] .notice {
    padding-top: 2rem;
}

[data-theme="bold"] .topbar {
    padding-bottom: 0.625rem;
}

@media (min-width: 600px) {
    [data-theme="bold"] {
        --page-pad: 2rem;
        --panel-pad: 0rem;
        --section-gap: 3.5rem;
    }

    [data-theme="bold"] .card {
        padding-top: 0;
    }

    [data-theme="bold"] .card-head {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    [data-theme="bold"] .cover {
        margin-top: -2.5rem;
        aspect-ratio: auto;
        height: clamp(15rem, 36vw, 26rem);
    }

    [data-theme="bold"] .identity,
    [data-theme="bold"] .actions {
        width: 100%;
        max-width: var(--column);
        margin-inline: auto;
    }
}

@media (min-width: 960px) {
    [data-theme="bold"] {
        --column: 66rem;
    }

    /* Identity on the left, actions on the right of the brand block. */
    [data-theme="bold"] .card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24rem;
        column-gap: 3rem;
        align-items: end;
        padding-inline: max(var(--page-pad), calc((100vw - var(--column)) / 2));
    }

    [data-theme="bold"] .cover {
        grid-column: 1 / -1;
        margin-inline: calc(max(var(--page-pad), (100vw - var(--column)) / 2) * -1);
    }

    [data-theme="bold"] .identity,
    [data-theme="bold"] .actions {
        max-width: none;
        margin: 0;
    }

    [data-theme="bold"] .card--full .card-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 22rem;
        column-gap: 4rem;
        align-items: start;
    }

    [data-theme="bold"] .card--full .col-main,
    [data-theme="bold"] .card--full .col-aside {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);
    }

    [data-theme="bold"] .card--compact .card-body {
        max-width: calc(34rem + 2 * var(--page-pad));
        margin-left: max(0px, calc((100vw - var(--column)) / 2 - var(--page-pad)));
    }
}

/* --------------------------------------------------------------------------
   classic: formal and centred. Ivory ground, serif headings, a band of the
   brand colour across the top, small radii.
   -------------------------------------------------------------------------- */
[data-theme="classic"] {
    --bg: #FAF9F6;
    --surface: #FFFFFF;
    --tone: #EFEDE7;
    --tone-hover: #E4E1D8;
    --ink: #1B1E27;
    --ink-2: #5B6070;
    --ok: #1F6B45;

    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --display-weight: 600;
    --display-tracking: -0.012em;
    --name-size: clamp(2rem, 1.5rem + 2.6vw, 2.875rem);
    --name-leading: 1.1;
    --h2-size: 1.5rem;
    --h2-weight: 600;
    --h2-tracking: -0.01em;

    --radius-panel: 4px;
    --radius-btn: 4px;
    --radius-tile: 4px;
    --radius-img: 3px;
    --radius-logo: 50%;
    --page-pad: 1.25rem;
    --panel-bg: transparent;
    --panel-pad: 0rem;
    --section-gap: 2.75rem;
    --column: 36rem;
}

[data-theme="classic"] body {
    font-size: 1.0625rem;
    border-top: 0.625rem solid var(--brand);
}

[data-theme="classic"] .card {
    padding-top: 1.75rem;
}

[data-theme="classic"] .card-head {
    gap: 1.5rem;
}

[data-theme="classic"] .cover {
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-panel);
}

[data-theme="classic"] .identity {
    align-items: center;
    text-align: center;
}

[data-theme="classic"] .logo {
    width: 5.5rem;
    height: 5.5rem;
}

[data-theme="classic"] .has-cover .logo {
    margin-top: -4.25rem;
    box-shadow: 0 0 0 5px var(--bg);
}

[data-theme="classic"] .logo--monogram {
    font-weight: 400;
}

/* A short bar in the secondary colour closes the name block. */
[data-theme="classic"] .identity-text::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.1875rem;
    margin: 1.125rem auto 0;
    background: var(--accent);
}

[data-theme="classic"] .status {
    justify-content: center;
}

[data-theme="classic"] .section-title {
    margin-bottom: 1rem;
}

[data-theme="classic"] .service-name {
    font-size: 1.0625rem;
}

[data-theme="classic"] .tile,
[data-theme="classic"] .social-link,
[data-theme="classic"] .btn-quiet,
[data-theme="classic"] .link-list a {
    background: var(--tone);
}

[data-theme="classic"] .hours th {
    border-radius: 3px 0 0 3px;
}

[data-theme="classic"] .hours td {
    border-radius: 0 3px 3px 0;
}

[data-theme="classic"] .share-qr {
    border-radius: 3px;
}

@media (min-width: 600px) {
    [data-theme="classic"] {
        --panel-pad: 0rem;
        --section-gap: 3.25rem;
    }

    [data-theme="classic"] .card {
        padding-top: 3rem;
    }

    [data-theme="classic"] .cover {
        aspect-ratio: 2 / 1;
    }

    [data-theme="classic"] .actions {
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:active,
    .tile:active,
    .gallery-item:hover img {
        transform: none;
    }
}

/* ==========================================================================
   Print: a clean black-on-white contact sheet
   ========================================================================== */
@media print {
    :root, [data-theme] {
        --bg: #fff;
        --surface: #fff;
        --panel-bg: transparent;
        --tone: transparent;
        --ink: #000;
        --ink-2: #333;
        --ok: #000;
        --brand-text: #000;
        --accent-text: #000;
        --panel-pad: 0rem;
        --page-pad: 0rem;
        --section-gap: 1.25rem;
        --name-size: 22pt;
        --h2-size: 12pt;
        color-scheme: light;
    }

    html, body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;
    }

    body {
        display: block;
        min-height: 0;
        border: 0 !important;
    }

    .topbar,
    .skip-link,
    .cover,
    .actions,
    .section--photos,
    .section--social,
    .share-text .btn,
    .contact-more,
    .made-with,
    .lightbox,
    .page-back {
        display: none !important;
    }

    .card,
    .card-body,
    .card-head {
        display: block !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        color: #000 !important;
        position: static !important;
    }

    .col-main,
    .col-aside {
        display: block !important;
    }

    .card-head {
        padding-bottom: 0.75rem !important;
        margin-bottom: 1rem !important;
        border-bottom: 1.5pt solid #000;
    }

    .identity {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .identity-text::after,
    .section-title::before {
        display: none !important;
    }

    .logo {
        width: 48pt !important;
        height: 48pt !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    .logo--monogram {
        display: none !important;
    }

    .name,
    .tagline,
    .status,
    .status-label {
        color: #000 !important;
    }

    .status {
        justify-content: flex-start !important;
    }

    .section {
        margin: 0 0 1rem !important;
        padding: 0 !important;
        break-inside: avoid;
    }

    .section-title {
        margin-bottom: 0.375rem !important;
    }

    .service {
        padding: 0 !important;
        border: 0 !important;
    }

    .services {
        gap: 0.5rem !important;
    }

    .service-icon {
        display: none !important;
    }

    .hours {
        max-width: 22rem;
    }

    .hours-wrap {
        margin: 0;
    }

    .hours th,
    .hours td {
        padding: 0.125rem 0;
        background: none !important;
        color: #000 !important;
    }

    .today-badge {
        display: none;
    }

    .contact-value {
        color: #000 !important;
    }

    .share-qr {
        width: 72pt;
        height: 72pt;
        padding: 0;
    }

    .site-footer {
        padding: 1rem 0 0;
        justify-content: flex-start;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}