/**
 * phase-c-uicore-compat.css — Återanvändbar mall för 50+ wp-to-bosse-sajter
 * ═══════════════════════════════════════════════════════════════════════════
 * SAFE-fil — överlever Bosse-uppdateringar.
 *
 * GÄLLER FÖR BÅDE PHASE A OCH PHASE C (sedan Iteration 85):
 *   • Phase A — Sajt på preserved UiCore-chrome (cache/*.html). Filen kopieras
 *     automatiskt till sajtens assets/css/ + injiceras som <link> i alla cache-
 *     sidor av 16-patch-cache-pages.php (PATCH 4).
 *   • Phase C — Bosse-native overlay. Kopieras + injiceras i native-filerna av
 *     33-install-phase-c.sh + bin/cache-to-native.php.
 *
 * Filnamnet "phase-c-uicore-compat" är historiskt — bevaras för
 * bakåtkompatibilitet med befintliga Phase C-sajter där overrides.css gör
 * `@import url('phase-c-uicore-compat.css');`. Innehåll är dock universellt.
 *
 * SYFTE:
 * När en WordPress UiCore/Elementor-sajt konverteras till Bosse uppstår
 * CSS-konflikter mellan UiCore:s aggressiva element-/attribute-selectors och
 * Bosse-CORE:s class-selectors. Eftersom vi INTE får ändra Bosse-CORE-filer
 * löser vi det med cascade-vinst (!important + högre specificity) här.
 *
 * Versionera centralt — uppdatera EN gång i wp-to-bosse:
 *   _blueprint/templates/phase-c/assets-css/phase-c-uicore-compat.css
 * Vid nästa pipeline-körning (16-patch i Phase A, eller 33-install i Phase C)
 * kopieras senaste versionen till sajten automatiskt — idempotent.
 *
 * DOKUMENTERADE KONFLIKTER (8 st):
 *   1. .cms-image-wrapper inline-block bryter Elementor-kolumner
 *   2. img z-index: 4 lägger overlay bakom bilden
 *   3. Block-wrapper baseline-gap → line-height: 0 + overlay reset
 *   4. button[type="submit"]-orange bryter Logga ut
 *   5. UiCore element-hover äter Bosse-hover-outline
 *   6. .cms-image-overlay positioning fel ovanpå img
 *   7. .cms-image-btn äts av .elementor-button
 *   8. PEYS:s ljusa --cms-bg gör modal-text osynlig (vit-på-vit)
 *
 * Långsiktig plan: alla dessa fixar ska in upstream i Bosse-master via
 * BOSSE_UPSTREAM_PROPOSAL.md (i bin/-mappen). När Bosse-master är uppdaterad
 * kan denna fil successivt avvecklas.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE C — UiCore × Bosse-CMS-kompatibilitet
   ═══════════════════════════════════════════════════════════════════════════
   När Bosse cms.js wrappar img:er i .cms-image-wrapper vid edit-mode på en
   UiCore-/Elementor-snapshot uppstår tre CSS-konflikter. Bosse-CORE får inte
   ändras (CLAUDE.md), så vi löser dem här via cascade-vinst.

   Alla regler är scoped till `body.cms-edit-mode` så publik visning (utan
   inloggad admin) är ORÖRD. cms.js laddas inte alls för utloggade besökare,
   så då finns ingen DOM-mutation att kompensera för.

   Konflikt 1 — wrapper-layout:
   Bosse cms.css sätter `.cms-image-wrapper { display: inline-block }`. På
   Elementor-img (med t.ex. width="1000" height="667"-attribut) gör inline-block
   att wrappern shrink-to-fit:tar sin intrinsic-storlek istället för att fylla
   parent-kolumnen → bilden hänger ut, layout bryts.
   Vi tvingar `display: block; width: 100%` så wrappern ärver kolumnens bredd.

   Konflikt 2 — z-index på img:
   Bosse cms.css ger `[data-editable-image].cms-editable-active { z-index: 4 }`.
   .cms-image-overlay har default z-index: auto → overlay hamnar BAKOM bilden →
   "Ändra bild"-knappen oklickbar. Vi höjer overlay till z-index: 10 och
   neutraliserar img:s z-index så stacking-context flyttas till wrappern.

   Konflikt 3 — line-height-gap:
   Block-wrapper får baseline-gap under img. line-height: 0 på wrappern + reset
   till "normal" inuti overlay (där text behöver normal line-height). */

/* KRITISK SCOPE: body.has-admin-bar (inte body.cms-edit-mode).
   `has-admin-bar`-class sätts synkront vid admin-bar:s script-execution och
   gäller från första load. `cms-edit-mode` aktiveras BARA när user klickar
   "Aktivera redigering". Cms.js wrappar imgs vid load oavsett edit-mode →
   wrappers existerar direkt, så vi behöver layout-fixarna direkt också.

   Alla properties med !important för att garantera vinst mot vad UiCore-CSS
   än kan ha satt (Elementor genererar ID-specifika regler med hög specificity). */
body.has-admin-bar .cms-image-wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    line-height: 0 !important;
    overflow: visible !important;
}

body.has-admin-bar .cms-image-wrapper > img,
body.has-admin-bar .cms-image-wrapper > picture {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    z-index: auto !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 4 — UiCore-snapshot:s `button[type="submit"]`-styling tar över
   Bosse:s ghost-styled "Logga ut"-knapp.
   Vi neutraliserar BARA de properties UiCore-button-CSS faktiskt sätter
   (background, border, padding, border-radius, display). LÄTT TOUCH — color,
   font-size, line-height, etc. får ärvas från Bosse-CORE-cascade så
   "Logga ut"-färgen blir vit (`.admin-bar--frontend` ger rgba(255,255,255,0.75)). */
.admin-bar__btn-logout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.4375rem 0.75rem !important;
    border-radius: 9px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    /* OBS: ingen color-override → Bosse-CORE-frontend-regel vinner (vit) */
}
.admin-bar__btn-logout:hover {
    background: color-mix(in srgb, #ef4444 22%, transparent) !important;
    border-color: color-mix(in srgb, #ef4444 40%, transparent) !important;
    /* color sätts av Bosse-CORE: #fecaca via .admin-bar--frontend */
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 5 — UiCore äter Bosse:s hover-outline + pen-icon på editable elements.
   UiCore har bl.a. `h1:hover, p:hover, img:hover` med element-specificity som
   slår Bosse:s class-selector. Vi tvingar Bosse:s edit-affordances att vinna. */

/* 5a. Position + overflow så pen-icon (positioned absolut UTANFÖR elementet)
   inte klipps av UiCore-overflow-rules eller hamnar fel relative to staticky
   parents. */
body.cms-edit-mode [data-editable-text].cms-editable-active,
body.cms-edit-mode [data-editable-image].cms-editable-active,
body.cms-edit-mode [data-editable-button].cms-editable-active {
    position: relative !important;
    overflow: visible !important;
}

/* 5b. Hover-outline + bakgrund — vinner mot UiCore */
body.cms-edit-mode [data-editable-text].cms-editable-active:hover,
body.cms-edit-mode [data-editable-image].cms-editable-active:hover,
body.cms-edit-mode [data-editable-button].cms-editable-active:hover {
    background-color: color-mix(in srgb, var(--cms-accent, #379b83) 10%, transparent) !important;
    outline: 2px solid color-mix(in srgb, var(--cms-accent, #379b83) 70%, transparent) !important;
    outline-offset: 2px !important;
    z-index: 5 !important;
}

/* 5c. Pen-icon ::after-pseudo (Bosse-CORE-styling — duplicerad här med !important
   för att UiCore:s element-selector som t.ex. `h1::after { content: none }`
   inte ska blockera Bosse:s pen-pseudo) */
body.cms-edit-mode [data-editable-text].cms-editable-active::after,
body.cms-edit-mode [data-editable-image].cms-editable-active::after,
body.cms-edit-mode [data-editable-button].cms-editable-active::after {
    content: '' !important;
    position: absolute !important;
    right: -6px !important;
    bottom: -6px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background-color: var(--cms-accent, #379b83) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0 !important;
    transform: scale(0.7) !important;
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    display: block !important;
}
body.cms-edit-mode [data-editable-text].cms-editable-active:hover::after,
body.cms-edit-mode [data-editable-image].cms-editable-active:hover::after,
body.cms-edit-mode [data-editable-button].cms-editable-active:hover::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 6 — UiCore äter `.cms-image-overlay`-positioning så "Ändra bild"-
   knappen hamnar UNDER bilden istället för centrerad ovanpå.
   Scope: `body.has-admin-bar` (inte cms-edit-mode) eftersom wrappern existerar
   så fort cms.js körts (vid load), inte bara i edit-mode. */
body.has-admin-bar .cms-image-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 10 !important;
    line-height: normal !important;
    border-radius: inherit;
    transition: opacity 180ms ease;
}
/* Overlay-synlighet ENDAST i edit-mode (inte vid bara-inloggad).
   Layout-defaults för wrappern är scoped till `has-admin-bar` ovan, men själva
   "Ändra bild"-affordansen ska bara synas när admin aktivt redigerar — inte
   distrahera bara av att man är inloggad. */
body.cms-edit-mode .cms-image-wrapper:hover .cms-image-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.has-admin-bar .cms-image-overlay > * {
    pointer-events: auto !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 7 — UiCore:s `button[type="submit"]`- eller `.elementor-button`-CSS
   vinner mot Bosse-CORE:s `.cms-image-btn`-styling (knappen "Ändra bild").
   Symptom: knappen ser grå/transparent ut innan första save → efter save
   triggas Bosse-styling. Vi tvingar Bosse-knapp-styling med !important. */
body.has-admin-bar .cms-image-btn {
    padding: 0.75rem 1.5rem !important;
    background: var(--cms-accent, #379b83) !important;
    background-color: var(--cms-accent, #379b83) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    transform: none !important;
    transition: background-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.has-admin-bar .cms-image-btn:hover {
    background: color-mix(in srgb, var(--cms-accent, #379b83) 85%, black) !important;
    background-color: color-mix(in srgb, var(--cms-accent, #379b83) 85%, black) !important;
    transform: scale(1.05) !important;
    color: #FFFFFF !important;
}
body.has-admin-bar .cms-image-btn:active {
    transform: scale(0.98) !important;
}
body.has-admin-bar .cms-image-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 8 — Bild-bibliotek-modal är osynlig på PEYS-tema (ljus --cms-bg).
   Bosse cms.js läser CSS-variabel via `getComputedStyle(document.documentElement)`
   — alltså FRÅN <html>, inte body. Min tidigare body-override nådde aldrig dit.
   Vi använder `:has()` för att override:a på html-elementet konditionellt
   (frontend-pages med admin-bar men inte admin-vyer).

   Iteration 78: utökar att täcka HELA cms-text-paletten — annars är desc-text
   i kommandopaletten (.cmd-palette__item-desc, .cmd-palette__input-placeholder)
   osynliga eftersom de använder --cms-text-muted / --cms-text-subtle, inte
   --cms-text. Samma problem drabbar tooltip-texter och toast-meddelanden.
   Sätter också --cms-border + --cms-surface-hover för konsistens. */
html:has(body.has-admin-bar:not(.cms-admin-mode)) {
    --cms-bg:             var(--cms-chrome-bg, var(--cms-brand, #033234));
    --cms-text:           #FFFFFF;
    --cms-text-muted:     rgba(255, 255, 255, 0.72);
    --cms-text-subtle:    rgba(255, 255, 255, 0.48);
    --cms-border:         rgba(255, 255, 255, 0.14);
    --cms-surface:        var(--cms-chrome-bg, var(--cms-brand, #033234));
    --cms-surface-hover:  rgba(255, 255, 255, 0.08);
}

/* Extra-säkerhet på själva palette-elementet: forcerar att variablerna
   gäller även om UiCore-CSS scopar om dem djupare. Använder same scope
   som ovan (:has()) så det inte påverkar admin-vyer. */
html:has(body.has-admin-bar:not(.cms-admin-mode)) .cmd-palette,
html:has(body.has-admin-bar:not(.cms-admin-mode)) .cmd-palette-backdrop {
    --cms-text:           #FFFFFF;
    --cms-text-muted:     rgba(255, 255, 255, 0.72);
    --cms-text-subtle:    rgba(255, 255, 255, 0.48);
    --cms-border:         rgba(255, 255, 255, 0.14);
    --cms-surface-hover:  rgba(255, 255, 255, 0.08);
}

/* ───────────────────────────────────────────────────────────────────────────
   Iteration 79 — Tvinga sans-serif (Bosse-default) på admin-UI-element.
   Cmd-palette + admin-bar har `font-family: inherit` som på publika sidor
   ärver UiCore:s serif-/heading-font. Det får cmd-palette-listen att se ut
   som om man läser en e-bok. Vi forcerar samma system-stack som Bosse-admin
   använder, scopad till admin-UI så vi inte rör sajtens publika typografi. */
body.has-admin-bar .cmd-palette,
body.has-admin-bar .cmd-palette *,
body.has-admin-bar .cmd-palette-backdrop,
body.has-admin-bar .cmd-palette-backdrop *,
body.has-admin-bar .admin-bar,
body.has-admin-bar .admin-bar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif !important;
    font-feature-settings: normal !important;
    letter-spacing: normal !important;
}

/* Fallback för browsers utan :has()-stöd (gamla Safari/Firefox <121).
   Sätter direkt på :root med scope via media-query — påverkar både frontend
   och admin men admin-vyer i Bosse är ändå designade att fungera med mörk bg. */
@supports not selector(:has(body)) {
    :root {
        --cms-modal-bg: var(--cms-chrome-bg, var(--cms-brand, #033234));
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 9 — Blog-single article startar för nära sticky UiCore-header.
   Phase C embed:ar `.projekt-single` i cache-snapshot där headern är
   `position: fixed` och tar ~80-100px höjd. Utan top-padding hamnar
   "Tillbaka till inlägg"-länken precis under headern (visuellt fel).
   Lösning: lägg `padding-top` motsvarande header-höjd + andrum. */
.projekt-single {
    padding-top: clamp(7rem, 12vh, 10rem) !important;
}

/* Mobil: lite mindre header-offset (UiCore mobil-header är typiskt 60-70px). */
@media (max-width: 768px) {
    .projekt-single {
        padding-top: clamp(5rem, 10vh, 7rem) !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Konflikt 10 — Hero-sektioner med min-height: 750-800px tar 85% av
   viewporten på undersidor (t.ex. /stader/X). Original-WP-designen var
   troligen tänkt för stor visuell impact direkt vid landning, men på Bosse-
   native med vår sticky-header känns det överdrivet.
   Cappar min-height på Elementor:s "section-height-min-height"-sektioner
   så ingen hero överstiger 60vh / 540px (mobil 50vh / 360px). Bevarar
   minimum 320px så hero inte kollapsar på extremt korta viewports. */
.elementor-section.elementor-section-height-min-height
  > .elementor-container {
    min-height: clamp(320px, 60vh, 540px) !important;
}

@media (max-width: 768px) {
    .elementor-section.elementor-section-height-min-height
      > .elementor-container {
        min-height: clamp(280px, 50vh, 360px) !important;
    }
}