/* ============================================================
   CARECOM® Blazor reimplementation — global stylesheet.

   Everything below is genuinely cross-cutting: design tokens,
   base typography, layout primitives used by multiple pages, and
   the few utility classes (.container, .jumbotron, .bullet-list,
   .signature) that appear all over the site.

   Component- and page-specific styles live in scoped *.razor.css
   files next to each .razor — see e.g. SiteFooter.razor.css,
   Home.razor.css. The compiler rewrites those rules with a unique
   [b-xxxxx] scope-id attribute so they never leak globally.
   ============================================================ */

:root {
    --bg: #ffffff;
    --bg-muted: #f4f6f8;
    --bg-quote: #1d242b;
    --fg: #1d242b;
    --fg-soft: #4a5560;
    --fg-muted: #7a8590;
    --accent: #1f6f8b;
    --accent-dark: #134453;
    --accent-soft: #e3eef3;
    --border: #e2e6ea;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
    --radius: 4px;
    --radius-lg: 8px;
    --content-w: 1100px;
    --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ----- External link marker (mirrors carecom.de's .externalLink::after) -----
   Any anchor that opens in a new tab gets a small "external" glyph after it.
   The marker is suppressed for:
   - anchors that wrap an image (logos, icons),
   - anchors that explicitly opt out via class="no-extlink".
   Dark-surface overrides (footer, cookie banner) live in those components'
   own scoped CSS files. */
a[target="_blank"]:not(.no-extlink):not(:has(img))::after {
    content: " \2197"; /* U+2197 NORTH EAST ARROW */
    font-size: .85em;
    color: var(--fg-muted);
    margin-left: .15em;
    display: inline-block;
    transform: translateY(-.05em);
    text-decoration: none;
}
a[target="_blank"]:not(.no-extlink):not(:has(img)):hover::after {
    color: var(--accent);
}

/* ----- Animated underline for in-flow prose links --------------------------
   On hover an accent underline wipes in from the left instead of the hard
   default underline. Scoped to the article body (.layout-grid__main) of every
   SitePage — header, footer and sidebar sit outside it and stay unaffected.
   Headings links, image links and the icon-bearing shop-link are excluded;
   they are not running text. */
.layout-grid__main a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size .25s ease;
}
.layout-grid__main a:hover {
    text-decoration: none;
    background-size: 100% 1.5px;
}
.layout-grid__main :is(h1, h2, h3, h4) a,
.layout-grid__main a.shop-link,
.layout-grid__main a:has(img) {
    background-image: none;
}
@media (prefers-reduced-motion: reduce) {
    .layout-grid__main a { transition: none; }
}

h1, h2, h3, h4 { color: var(--fg); line-height: 1.25; }
h1 { font-size: 2.4rem; margin: 0 0 1rem; font-weight: 300; }

/* FocusOnNavigate (Routes.razor) sets programmatic focus on the H1 after
   every route change for screen-reader friendliness — it also adds
   tabindex="-1", which takes the H1 out of the normal Tab order. Since
   the H1 is therefore never reachable by keyboard anyway, we can safely
   suppress the default focus ring across the board. */
h1:focus { outline: none; }
h2 { font-size: 1.6rem; margin: 1.4rem 0 .8rem; font-weight: 400; }
h3 { font-size: 1.2rem; margin: 1rem 0 .6rem; font-weight: 600; }
h4 { font-size: .95rem; margin: 0 0 .4rem; font-weight: 600; color: var(--fg-soft); letter-spacing: .02em; }

p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.95em; }

.container {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container--carousel { padding-top: 1.5rem; }

.muted { color: var(--fg-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   Page layout primitives — shared by SitePage, BlogEntry, NotFound
   ============================================================ */
.page             { display: flex; flex-direction: column; min-height: 100vh; }
.page__main       { flex: 1; }
.main-layout      { padding-top: 1.5rem; padding-bottom: 3rem; }

.layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 2.5rem;
}
.layout-grid__main { min-width: 0; }

/* ============================================================
   Cross-page content patterns
   ============================================================ */
.jumbotron {
    background: var(--bg-muted);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin: 1.2rem 0 1.6rem;
}
.jumbotron p { margin: 0; font-size: 1.05rem; color: var(--fg-soft); }
.jumbotron p + p { margin-top: .8rem; }

.bullet-list { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.bullet-list li { padding: .35rem 0 .35rem 1.4rem; position: relative; }
.bullet-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.signature { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--fg); margin: 1rem 0; }

/* ------------ Shop-link (Selbstbedienung pointer) -----------
   Inline link decorated with a small shopping-bag icon. Used in
   prose on the Distribution page and as an aside on Home (DE only).
   Plain `inline` (NOT inline-flex) so the anchor sits cleanly on the
   text baseline; the SVG uses vertical-align to drop itself onto the
   same baseline as the surrounding letters. */
.shop-link__icon {
    width: 1em;
    height: 1em;
    vertical-align: -.18em;
    margin-right: .25em;
}

/* ============================================================
   Blazor template error UI (rendered by App.razor, outside any
   component scope, so this rule must stay global).
   ============================================================ */
#blazor-error-ui {
    color-scheme: light only;
    background: #ffeb3b;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ============================================================
   Scroll-reveal utility — elements fade + lift in as they scroll
   into view. Progressive enhancement: the hidden start state is
   gated behind the `js` class (set synchronously in App.razor's
   <head>), so without JavaScript every .reveal element stays
   visible. reveal.js adds `is-visible` via IntersectionObserver.
   prefers-reduced-motion disables the motion entirely.
   ============================================================ */
.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Responsive — only rules for cross-component / global selectors
   live here. Per-component responsive overrides sit inside each
   component's scoped CSS file.
   ============================================================ */
@media (max-width: 980px) {
    .layout-grid { grid-template-columns: 1fr; }
}