/* ============================================================
   Dabotek custom skin — overrides theme.css
   Loaded AFTER /css/theme.css in Master.cshtml (line ~520).
   Edit tokens in :root; do not touch theme.css (vendor bundle).
   ============================================================ */

/* ---------- 1. Design tokens ----------
   HSL triples mirror the shadcn token block from the Lovable mockup
   (https://dabotek-bolt-builder.lovable.app). Bootstrap --bs-* vars
   resolve to the same colors via hsl(). Tweak the HSL triples to
   restyle everything downstream.
*/
:root {
    /* Raw HSL triples from Lovable (shadcn convention: "H S% L%") */
    --db-primary-hsl:              230 100% 40%;
    --db-primary-foreground-hsl:   0 0% 100%;
    --db-background-hsl:           210 20% 98%;
    --db-foreground-hsl:           220 30% 12%;
    --db-card-hsl:                 0 0% 100%;
    --db-card-foreground-hsl:      220 30% 12%;
    --db-secondary-hsl:            210 25% 93%;
    --db-muted-hsl:                210 20% 95%;
    --db-muted-foreground-hsl:     220 10% 46%;
    --db-accent-hsl:               230 80% 55%;
    --db-border-hsl:               220 15% 88%;
    --db-navy-hsl:                 225 50% 15%;
    --db-navy-foreground-hsl:      210 30% 92%;
    --db-radius:                   0.5rem;

    /* Bootstrap / Cartzilla overrides (inherited by .btn, .bg-primary, etc.) */
    --bs-primary:             hsl(var(--db-primary-hsl));
    --bs-primary-rgb:         0, 34, 204;    /* precomputed from hsl(230 100% 40%) — keep in sync */
    --bs-secondary:           hsl(var(--db-secondary-hsl));
    --bs-body-bg:             hsl(var(--db-background-hsl));
    --bs-body-color:          hsl(var(--db-foreground-hsl));
    --bs-body-font-family:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-border-radius:       var(--db-radius);
    --bs-border-color:        hsl(var(--db-border-hsl));

    /* Dabotek-scoped (used by rules below, not by Bootstrap core) */
    --db-navbar-bg:           hsl(var(--db-card-hsl));
    --db-navbar-fg:           hsl(var(--db-foreground-hsl));
    --db-hero-bg:             hsl(var(--db-muted-hsl));
    --db-hero-fg:             hsl(var(--db-foreground-hsl));
    --db-card-bg:             hsl(var(--db-card-hsl));
    --db-card-shadow:         0 1px 3px hsl(var(--db-foreground-hsl) / 0.08);
    --db-footer-bg:           hsl(var(--db-navy-hsl));
    --db-footer-fg:           hsl(var(--db-navy-foreground-hsl));
    --db-accent:              hsl(var(--db-accent-hsl));

    /* Display font for headings (Lovable mockup uses Space Grotesk).
       Loaded via Google Fonts link in Master.cshtml. Falls back to the
       body Inter stack if Space Grotesk fails to load. */
    --db-heading-font-family: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 2. Global typography ---------- */
body {
    font-family: var(--bs-body-font-family);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--db-heading-font-family);
    font-weight: 700;
    color: hsl(var(--db-foreground-hsl));
}

/* ---------- 3. Navbar
   Targets: inline navbar in Master.cshtml lines ~600-1100.
*/
.navbar-sticky.bg-light {
    background-color: var(--db-navbar-bg) !important;
}

.navbar.navbar-light .nav-link {
    color: var(--db-navbar-fg);
    font-weight: 500;
}

.navbar.navbar-light .nav-link:hover,
.navbar.navbar-light .nav-link.active {
    color: var(--bs-primary);
}

.navbar-tool-icon-box {
    background-color: transparent;
    border-radius: var(--bs-border-radius);
}

.navbar-tool-label {
    background-color: var(--bs-primary);
}

/* ---------- 4. Hero / banner carousel
   Targets: Home.cshtml:65-82 (.tns-carousel > .tns-carousel-inner > div > .rounded-3).
*/
.tns-carousel.mb-3.mb-md-5 .rounded-3 {
    background: var(--db-hero-bg);
    color: var(--db-hero-fg);
    border-radius: var(--bs-border-radius) !important;
    padding-block: 3.5rem;
}

.tns-carousel h1,
.tns-carousel .h1 {
    font-size: clamp(1.75rem, 3vw, 3rem);
}

/* ---------- 5. Product card
   Targets: Home.cshtml:130, NOTO_ProductGroup.cshtml:196,
   NOTO_ProductSearch.cshtml:283 — all .card.product-card.card-static.
*/
.card.product-card {
    background-color: var(--db-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--db-card-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card.product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.card.product-card .product-title a {
    color: var(--bs-body-color);
}

.card.product-card .product-title a:hover {
    color: var(--bs-primary);
}

.card.product-card .product-meta {
    color: var(--db-accent);
}

.card.product-card .text-accent {
    color: var(--bs-primary) !important;
}

/* ---------- 6. Buttons
   Cartzilla's theme.css is Bootstrap 5.1 (no component-level --bs-btn-*
   tokens), and defines .btn-primary with explicit colors across every
   state including :hover/:focus/:active/:disabled. Override each state
   directly. Lovable's CTA dims via opacity on hover (not color darken).
*/
.btn {
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: hsl(var(--db-primary-foreground-hsl));
    box-shadow: none;
}

.btn-primary {
    border-radius: calc(var(--db-radius) - 2px);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    opacity: 0.9;
}

.btn-primary:active,
.btn-primary.active {
    opacity: 0.85;
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.55;
}

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: hsl(var(--db-primary-foreground-hsl));
}

.btn-shadow {
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.25);
}

/* theme.css sets .text-primary / .text-accent with !important;
   match specificity so Cartzilla's coral #fe696a no longer wins. */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-accent {
    color: var(--bs-primary) !important;
}

/* ---------- 7. Footer
   Targets: inline footer in Master.cshtml:~1295+ AND the
   duplicate Partials/Default/Footer.cshtml (both .footer.bg-dark).
*/
.footer.bg-dark {
    background-color: var(--db-footer-bg) !important;
    color: var(--db-footer-fg);
}

.footer .widget-title.text-light {
    color: var(--db-footer-fg) !important;
}

.footer .widget-list-link {
    color: color-mix(in srgb, var(--db-footer-fg) 70%, transparent);
}

.footer .widget-list-link:hover {
    color: var(--bs-primary);
}

.footer .bg-darker {
    background-color: color-mix(in srgb, var(--db-footer-bg) 85%, #000);
}

/* ---------- 8. Body background neutraliser
   Master.cshtml:528 sets <body class="bg-secondary"> which would
   otherwise override --bs-body-bg. Drop this rule if the mockup
   intentionally uses a gray body.
*/
body.bg-secondary {
    background-color: var(--bs-body-bg) !important;
}

/* ============================================================
   BLOCK GRID — Lovable visual port
   Styles for Umbraco's Block Grid block partials rendered by
   /Views/Partials/blockgrid/Components/*.cshtml. These rules pair
   with the Umbraco grid scaffold in /css/myblockgridlayout.css
   (do not duplicate grid layout here — only theming).
   ============================================================ */

/* ---------- 9. Block Grid container layout
   Provides max-width and inline padding for the whole grid.
*/
.umb-block-grid {
    container-type: inline-size;
    --my-container-max-width: 1280px;
    --my-container-padding: 0 1.5rem;
}

@container (min-width: 720px) {
    .umb-block-grid__layout-container {
        --my-container-padding: 0 2rem;
    }
}

.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
    max-width: var(--my-container-max-width);
    padding: var(--my-container-padding);
    margin-inline: auto;
    --umb-block-grid--areas-column-gap: 2rem;
    --umb-block-grid--areas-row-gap: 2rem;
}

.umb-block-grid__area {
    justify-content: flex-start;
}

/* Section blocks gain extra column-/row-gap so their inner items
   breathe a bit even when the block has no own padding. */
.umb-block-grid__layout-item[data-content-element-type-alias="oneColumnSectionBlock"] .umb-block-grid__layout-container,
.umb-block-grid__layout-item[data-content-element-type-alias="twoColumnSectionBlock"] .umb-block-grid__layout-container {
    --umb-block-grid--column-gap: 2rem;
    --umb-block-grid--row-gap: 2rem;
}

/* Two-column section: vertically center the two columns against each
   other (Lovable centers text + image) and use Lovable's 4rem gap;
   otherwise the text column top-aligns and leaves a tall empty gap
   beside the image. */
.umb-block-grid__layout-item[data-content-element-type-alias="twoColumnSectionBlock"] .umb-block-grid__area-container {
    align-items: center;
    --umb-block-grid--areas-column-gap: 4rem;
}

/* Section-area images get a contained, rounded landscape crop instead
   of the full-height cover used by the standalone imageBlock. */
.umb-block-grid__area img.image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* Two-column image matches Lovable exactly: fixed 20rem height crop. */
.umb-block-grid__layout-item[data-content-element-type-alias="twoColumnSectionBlock"] img.image {
    height: 20rem;
    aspect-ratio: auto;
}

/* ---------- 10. Section blocks (one/two-column wrappers)
   Each section partial emits <section style="background-color:#@hex">
   plus optional [nobackgroundcolor] and [bright-contrast] attributes.
*/
.umb-block-grid__layout-item > section {
    padding-block: 5rem;
}

.umb-block-grid__layout-item > section[nobackgroundcolor] {
    background-color: hsl(var(--db-background-hsl));
}

section[bright-contrast] {
    color: white;
}

section[bright-contrast] h1,
section[bright-contrast] h2,
section[bright-contrast] h3,
section[bright-contrast] h4,
section[bright-contrast] p,
section[bright-contrast] strong {
    color: inherit;
}

/* Collapse top padding when consecutive nobackgroundcolor sections
   stack so the canvas reads as one continuous section. */
.umb-block-grid__layout-item:has(section[nobackgroundcolor]) +
.umb-block-grid__layout-item section[nobackgroundcolor] {
    padding-top: 0;
}

/* ---------- 11. Hero block
   Full-bleed image with dark gradient overlay, bottom-aligned headline.
   Matches Lovable's branche-page hero pattern.
*/
.hero {
    position: relative;
    width: 100%;
    /* Lovable uses 60vh; bound it so it never collapses on short laptops
       or becomes a giant banner on tall/4K monitors. 60vh = 783px at a
       ~1305px viewport, which sits under the 800px cap. */
    height: 60vh;
    min-height: 480px;
    max-height: 800px;
    display: flex;
    align-items: flex-end;
    padding-block: 5rem;
    color: white;
    overflow: hidden;
}

.hero .hero-background {
    position: absolute;
    inset: 0;
    background-position: 50% 50%;
    background-size: cover;
    z-index: 0;
}

.hero .hero-background::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Darken toward the bottom AND the left, where the bottom-left
       headline + subtitle sit, while keeping the right side lighter so
       the photo still shows. */
    background:
        linear-gradient(180deg, hsl(var(--db-navy-hsl) / 0.30) 0%, hsl(var(--db-navy-hsl) / 0.88) 100%),
        linear-gradient(90deg, hsl(var(--db-navy-hsl) / 0.55) 0%, hsl(var(--db-navy-hsl) / 0.05) 55%);
    pointer-events: none;
}

.hero .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--my-container-max-width);
    padding-inline: 1.5rem;
    margin-inline: auto;
}

.hero h1 {
    font-family: var(--db-heading-font-family);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 1.25rem;
    max-width: 16ch;
    color: inherit;
}

.hero[bright-contrast] {
    color: white;
}

/* Hero sits on a dark photo overlay, so all hero text must be light.
   The subtitle is a richTextBlock whose default .rich-text colors are
   muted gray / near-black — unreadable on the image. Force light text
   (with !important to also beat any inline color pasted from Lovable)
   and add a soft shadow so text stays legible over bright spots. */
.hero,
.hero .hero-content,
.hero .rich-text,
.hero .rich-text p,
.hero .rich-text li,
.hero .rich-text strong {
    color: rgba(255, 255, 255, 0.90) !important;
}

.hero h1,
.hero .rich-text h1,
.hero .rich-text h2,
.hero .rich-text h3 {
    color: #ffffff !important;
}

.hero .hero-content {
    text-shadow: 0 1px 14px hsl(var(--db-navy-hsl) / 0.45);
}

/* ---------- 12. Card block
   White card with subtle shadow + soft radius. .--medium variant
   overlays caption on the image. Fallback "Missing image" centered.
*/
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: hsl(var(--db-card-hsl));
    color: hsl(var(--db-card-foreground-hsl));
    border: 1px solid hsl(var(--db-border-hsl));
    border-radius: var(--db-radius);
    box-shadow: var(--db-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.card:hover {
    box-shadow: 0 12px 32px hsl(var(--db-foreground-hsl) / 0.10);
    transform: translateY(-2px);
}

.card .card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: hsl(var(--db-muted-hsl));
}

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

/* "Missing image" placeholder rendered as <p> by cardBlock.cshtml */
.card .card-media > p {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: hsl(var(--db-muted-foreground-hsl));
    font-size: 0.875rem;
}

.card .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.card .card-content h4 {
    font-family: var(--db-heading-font-family);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: hsl(var(--db-foreground-hsl));
}

.card .card-content > div,
.card .card-content > div > p {
    margin: 0;
    color: hsl(var(--db-muted-foreground-hsl));
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* Medium variant — overlay caption on image */
.card.--medium {
    height: auto;
}

.card.--medium .card-media {
    aspect-ratio: 4 / 3;
}

.card.--medium .card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 45%,
        hsl(var(--db-navy-hsl) / 0.78) 100%
    );
    pointer-events: none;
}

.card.--medium .card-content {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}

.card.--medium .card-content h4 {
    color: white;
    font-size: 1.5rem;
}

.card.--medium .card-content > div,
.card.--medium .card-content > div > p {
    color: rgba(255, 255, 255, 0.88);
}

/* "Læs mere →" style links inside card content */
.card .card-content a {
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    margin-top: auto;
}

.card .card-content a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 13. Headline block
   Plain <h2> placed inside a layout item.
*/
.umb-block-grid__layout-item > h2 {
    font-family: var(--db-heading-font-family);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: hsl(var(--db-foreground-hsl));
}

/* ---------- 14. Image block
   Plain content image, rounded corners, fills its grid cell.
*/
img.image {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: var(--db-radius);
    display: block;
}

/* ---------- 15. Rich-text block
   Typography for content authored in the rich text editor. Note:
   editors pasting from Lovable bring along inline Tailwind --tw-*
   variables and font-family overrides on individual elements; the
   inline styles win on specificity, so this block is the FALLBACK
   for plainly-authored content.
*/
.rich-text {
    color: hsl(var(--db-foreground-hsl));
    font-weight: 400;
    line-height: 1.65;
    /* Single column. (The original blockgrid CSS flowed full-width rich
       text into 2 newspaper columns via columns: clamp(1, span-10, 2);
       Lovable uses single-column prose, so that is removed.) */
    columns: 1;
}

.rich-text > *:first-child { margin-top: 0; }

/* Neutralise inline backgrounds dragged in from Lovable paste.
   Pasted content carries `background-color: rgb(249,250,251)` on every
   element; harmless on a light section, but on a colored/bright-contrast
   section it paints light rectangles behind each text line (the "white
   notch over navy" artifact). Stylesheet !important beats inline
   non-important styles. Content should never set its own background, so
   this is safe across the board. NOTE: this is a band-aid — the durable
   fix is to strip inline styles on save (see follow-up). */
.rich-text [style*="background"],
.card .card-content [style*="background"] {
    background-color: transparent !important;
    background-image: none !important;
}

.rich-text h1 {
    font-family: var(--db-heading-font-family);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: hsl(var(--db-foreground-hsl));
}

.rich-text h2 {
    font-family: var(--db-heading-font-family);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.875rem;
    color: hsl(var(--db-foreground-hsl));
}

.rich-text h3 {
    font-family: var(--db-heading-font-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.5rem 0 0.5rem;
    color: hsl(var(--db-foreground-hsl));
}

.rich-text h4 {
    font-family: var(--db-heading-font-family);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
    color: hsl(var(--db-foreground-hsl));
}

.rich-text p {
    margin: 0 0 1rem;
    color: hsl(var(--db-muted-foreground-hsl));
}

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

.rich-text strong {
    color: hsl(var(--db-foreground-hsl));
    font-weight: 600;
}

.rich-text a {
    color: var(--bs-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.rich-text a:hover {
    text-decoration-thickness: 2px;
}

/* Small uppercase label pattern — first <p> with single <strong> child,
   centered. Matches Lovable's "PRODUKTER" section tag style. */
.rich-text > p:first-child:has(> strong:only-child) {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    color: var(--bs-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.rich-text > p:first-child:has(> strong:only-child) strong {
    color: inherit;
    font-weight: inherit;
}

/* Centered headline when rich-text contains a centered heading */
.rich-text:has(> p[style*="text-align: center"]) {
    text-align: center;
    columns: 1;
}

/* Centered intro pattern (label + headline + subtitle): constrain the
   subtitle paragraph width like the Lovable mockup (~60ch, centered). */
.rich-text:has(> p[style*="text-align: center"]) p {
    max-width: 62ch;
    margin-inline: auto;
}

/* Label left-aligns inside two-column sections (e.g. "OM DABOTEK"),
   where the mockup keeps the whole text block flush left. */
.umb-block-grid__layout-item[data-content-element-type-alias="twoColumnSectionBlock"] .rich-text > p:first-child:has(> strong:only-child) {
    text-align: left;
}

/* Checklist — Lovable renders plain <ul> items with a blue check icon.
   NOTE: this applies to ALL unordered lists inside .rich-text; if an
   editor needs plain bullets in a rich-text block, scope this rule
   tighter (e.g. via a CSS class on the list). */
.rich-text ul {
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rich-text ul li {
    position: relative;
    padding-left: 1.875rem;
    color: hsl(var(--db-foreground-hsl));
    font-weight: 500;
}

.rich-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--bs-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 16. Call-to-action block
   Primary-filled button. [bright-contrast] sections invert it to white.
*/
.call-to-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-primary);
    color: hsl(var(--db-primary-foreground-hsl));
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.875rem 1.75rem;
    margin-block: 0.625rem;
    border-radius: calc(var(--db-radius) - 0.125rem);
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px hsl(var(--db-foreground-hsl) / 0.08);
}

.call-to-action:hover,
.call-to-action:focus-visible {
    opacity: 0.92;
    color: hsl(var(--db-primary-foreground-hsl));
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.25);
    text-decoration: none;
}

.call-to-action:active {
    opacity: 0.86;
    transform: translateY(1px);
}

[bright-contrast] .call-to-action {
    background-color: white;
    color: hsl(var(--db-foreground-hsl));
}

[bright-contrast] .call-to-action:hover,
[bright-contrast] .call-to-action:focus-visible {
    color: hsl(var(--db-foreground-hsl));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* ---------- 17. Inspiration block
   Four-column staggered grid. Kept from the previous layout but with
   Lovable spacing rhythm. Below 1024px the columns collapse via the
   Umbraco scaffold's small-device rule.
*/
.inspiration {
    padding-block: 4rem;
}

.inspiration .area-container {
    max-width: var(--my-container-max-width);
    padding-inline: 1.5rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    column-gap: 2rem;
}

.inspiration .left-area  { grid-column-end: span 1; margin-bottom: 4rem; }
.inspiration .right-area { grid-column-end: span 1; margin-top: 4rem; }
.inspiration .content-area { grid-column-end: span 2; }

@media (max-width: 1023.98px) {
    .inspiration .area-container {
        grid-template-columns: 1fr;
    }
    .inspiration .left-area,
    .inspiration .right-area,
    .inspiration .content-area {
        grid-column-end: span 1;
        margin: 0;
    }
}

.umb-block-grid__layout-item[data-content-element-type-alias="inspirationBlock"] .umb-block-grid__area[data-area-alias="leftArea"] {
    justify-content: flex-start;
}

.umb-block-grid__layout-item[data-content-element-type-alias="inspirationBlock"] .umb-block-grid__area[data-area-alias="rightArea"] {
    justify-content: flex-end;
}

/* Hero block-area container: kill default container padding since
   the hero handles its own bleed. */
.umb-block-grid__layout-item[data-content-element-type-alias="heroBlock"] .umb-block-grid__area-container,
.umb-block-grid__layout-item[data-content-element-type-alias="heroBlock"] .umb-block-grid__block--view::part(area-container) {
    padding: 0;
}

/* ---------- 18. Default heading scale (outside .rich-text)
   For headlineBlock and others that drop a heading directly into a
   layout item.
*/
.umb-block-grid h3 {
    font-family: var(--db-heading-font-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: hsl(var(--db-foreground-hsl));
}

.umb-block-grid h4 {
    font-family: var(--db-heading-font-family);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: hsl(var(--db-foreground-hsl));
}

p.lead-paragraph {
    font-size: 1.125rem;
    color: hsl(var(--db-muted-foreground-hsl));
}

/* ---------- 19. Missing partial fallback
   Styled by items.cshtml's catch block. Keep visible enough during
   the upgrade but not visually noisy in production.
*/
.umb-block-grid__layout-item > pre {
    background: #fff8f8;
    border: 1px solid #fcc;
    border-radius: var(--db-radius);
    padding: 0.75rem;
    font-size: 11px;
    color: #a00;
    overflow-x: auto;
}

/* ---------- 20. Four-column section = product / feature card grid
   fourColumnSectionBlock holds 4 areas, each a richTextBlock (h4 title
   + p description). Render each area as a Lovable product card. Styled
   by block alias — no editor-applied class needed, since this block
   always represents a card grid. (Mockup icons need a content field;
   not added here.)
*/
.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .umb-block-grid__area-container {
    --umb-block-grid--areas-column-gap: 1.5rem;
    --umb-block-grid--areas-row-gap: 1.5rem;
    align-items: stretch;
}

/* The AREA is the card. The four areas sit in one stretched grid row, so
   they are already equal height — putting the card chrome on the area
   gives robust equal-height cards (bottoms aligned) without depending on
   propagating height through Umbraco's nested grids. The .rich-text
   inside is just transparent content, top-aligned. */
.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .umb-block-grid__area {
    justify-content: flex-start;
    background: hsl(var(--db-card-hsl));
    border: 1px solid hsl(var(--db-border-hsl));
    border-radius: var(--db-radius);
    padding: 1.5rem;
    box-shadow: var(--db-card-shadow);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .umb-block-grid__area:hover {
    box-shadow: 0 12px 32px hsl(var(--db-foreground-hsl) / 0.10);
    transform: translateY(-2px);
}

.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .rich-text {
    columns: 1;
    background: none;
    border: 0;
    padding: 0;
}

/* Tight icon -> title -> description grouping: kill the default h4 top
   margin and any empty paragraphs the editor leaves around the inserted
   image, so all cards start consistently. */
.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .rich-text h4 {
    margin: 0 0 0.5rem;
}

.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .rich-text p {
    font-size: 0.875rem;
}

.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .rich-text p:empty {
    display: none;
}

/* Icon: render the inserted image as the lavender badge, and force it
   blue regardless of the source SVG/PNG colour. An <img> can't be
   recoloured normally, so brightness(0) first flattens any colour to
   black, then the filter chain tints it to the primary blue.
   (Approximate — for a pixel-exact match use the pre-coloured SVGs in
   wwwroot/icons.) */
.umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .rich-text img {
    display: block;
    width: 3rem;
    height: 3rem;
    padding: 0.7rem;
    margin: 0 0 1rem;
    box-sizing: border-box;
    background: hsl(var(--db-primary-hsl) / 0.10);
    border-radius: 0.625rem;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(9%) sepia(99%) saturate(6481%) hue-rotate(246deg) brightness(97%) contrast(143%);
}

/* Stack the four cards full width on small screens (the Umbraco scaffold
   otherwise leaves them at 3/4 width in a 4-column grid). */
@media (max-width: 1023.98px) {
    .umb-block-grid__layout-item[data-content-element-type-alias="fourColumnSectionBlock"] .umb-block-grid__area {
        grid-column-end: span 4;
    }
}

/* ---------- 21. Centered intro (eyebrow + heading)
   A rich-text whose heading carries inline `text-align: center` (authored
   in the RTE) is a section intro: constrain its width and center it, and
   render a leading centered <h3> (e.g. "Produkter") as the small blue
   uppercase eyebrow label above the heading.
   NOTE: this treats ANY centered <h3> in rich-text as an eyebrow label;
   if an editor wants a large centered h3, use h2 instead.
*/
.rich-text:has(h2[style*="text-align: center"]),
.rich-text:has(h3[style*="text-align: center"]) {
    text-align: center;
    columns: 1;
    max-width: 42rem;
    margin-inline: auto;
}

.rich-text h3[style*="text-align: center"] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin: 0 0 0.75rem;
}