/**
 * Harhålet Blockmönster - Frontend styles
 *
 * Målar Salients faktiska content-struktur:
 * body > #ajax-content-wrap > .container-wrap > .container.main-content > .row > [block]
 */

:root {
    --hbm-content-width: 780px;
    --hbm-content-align: 0;
}

/* ─── Gör .row till blockelement så max-width fungerar på barnen ── */

body.hbm-narrow-all .container.main-content > .row {
    display: block;
}

/* ─── Smalare content-bredd ───────────────────────────────────── */

body.hbm-narrow-all .container.main-content > .row > * {
    max-width: var(--hbm-content-width);
    margin-left: var(--hbm-content-align);
    margin-right: auto;
    box-sizing: border-box;
}

/* Backup-selektor för teman som använder andra wrappers */
body.hbm-narrow-all
    :is(.entry-content, .post-content, .nectar-post-content, .wp-block-post-content, article)
    > :is(
        p, h1, h2, h3, h4, h5, h6,
        ul, ol, blockquote, figure,
        .wp-block-heading, .wp-block-image, .wp-block-group,
        .wp-block-gallery, .wp-block-media-text, .wp-block-separator,
        .wp-block-quote, .wp-block-columns, .wp-block-cover
    ) {
    max-width: var(--hbm-content-width);
    margin-left: var(--hbm-content-align);
    margin-right: auto;
}

/* ─── Enkel, konsekvent block-spacing ─────────────────────────── */

/* Eftersom .row är display:block nu måste vi sätta avstånden själva.
   Vi använder margin-bottom på alla block för att få förutsägbar spacing. */
body.hbm-narrow-all .container.main-content > .row > * {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

/* Rubriker får lite extra luft ovanför för att markera sektioner */
body.hbm-narrow-all .container.main-content > .row > h2,
body.hbm-narrow-all .container.main-content > .row > h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

/* Första elementet (h1) ska inte ha margin-top */
body.hbm-narrow-all .container.main-content > .row > :first-child {
    margin-top: 0;
}

/* ─── Vänsterställda bilder ───────────────────────────────────── */

body.hbm-narrow-all .wp-block-image {
    text-align: left;
}

body.hbm-narrow-all .wp-block-image.aligncenter {
    text-align: left;
    margin-left: var(--hbm-content-align) !important;
    margin-right: auto !important;
}

body.hbm-narrow-all .wp-block-image img {
    height: auto;
    max-width: 100%;
    cursor: pointer;
}

body.hbm-narrow-all .wp-block-image figcaption {
    text-align: left;
    font-style: italic;
}

/* ─── Rensa fetstil som följer med klistrad rubriktext ────────── */

body.hbm-narrow-all :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) :is(strong, b) {
    font-weight: inherit;
}

/* ─── Vänsterställning av all text ────────────────────────────── */

body.hbm-narrow-all .has-text-align-center {
    text-align: left !important;
}

/* ─── Faktaruta — tvinga rätt padding/margin ──────────────────── */

body.hbm-narrow-all .wp-block-group.has-background {
    padding: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    box-sizing: border-box;
}

/* Inre block inuti faktarutan ska fylla gruppen */
body.hbm-narrow-all .wp-block-group > * {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Spacing inne i faktarutan */
body.hbm-narrow-all .wp-block-group.has-background h4.wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

body.hbm-narrow-all .wp-block-group.has-background ul.wp-block-list,
body.hbm-narrow-all .wp-block-group.has-background ol.wp-block-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 1.2rem;
}

body.hbm-narrow-all .wp-block-group.has-background ul.wp-block-list li,
body.hbm-narrow-all .wp-block-group.has-background ol.wp-block-list li {
    margin-bottom: 0.3rem;
}

body.hbm-narrow-all .wp-block-media-text > * {
    max-width: 100%;
}

/* ─── Lightbox ────────────────────────────────────────────────── */

.hbm-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 10, 0);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
    cursor: zoom-out;
}

.hbm-lightbox.is-open {
    opacity: 1;
    background: rgba(20, 16, 10, 0.92);
}

.hbm-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.25s ease;
    cursor: default;
}

.hbm-lightbox.is-open img {
    transform: scale(1);
}

.hbm-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, sans-serif;
}

.hbm-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

.hbm-lightbox-caption {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    max-width: 80%;
    opacity: 0.85;
    pointer-events: none;
}

/* Visa hand-pekaren på galleri-bilder */
body.hbm-narrow-all .wp-block-gallery img,
body.hbm-narrow-all .wp-block-image img {
    cursor: zoom-in;
}