/* LifeSoulutions theme · site shell: tokens, base, buttons, the footer on the back cover, the side rail and the
   mobile drawer. Loaded after ngx-theme main.css; scoped to body[data-concept], token names as in ngx-theme. */

body[data-concept] {
    --main-color: #0e395b;
    --secondary-color: #786458;
    --selection-background: #0e395b;
    --selection-color: #f6f2eb;
    --body-color: #232424;
    --body-background: #f6f2eb;
    --container-background: transparent;
    --body-font-size: 17px;
    --body-line-height: 1.65;
    --paragraph-spacing: 18px;
    --heading-spacing: 20px;
    --h1-size: clamp(34px, 5vw, 64px);
    --h2-size: clamp(28px, 3.4vw, 44px);
    --h3-size: 24px;
    --h4-size: 20px;
    --h5-size: 18px;
    --h6-size: 16px;
    --h1-weight: 400; --h2-weight: 400; --h3-weight: 400; --h4-weight: 400; --h5-weight: 400; --h6-weight: 400;
    --h1-color: var(--main-color); --h2-color: var(--main-color); --h3-color: var(--main-color);
    --h4-color: var(--main-color); --h5-color: var(--main-color); --h6-color: var(--main-color);
    --link-color: var(--main-color);
    --link-hover-color: var(--secondary-color);
    --container: 1320px;
    --content-spacing: clamp(64px, 9vw, 128px);
    --mobile-paddings: clamp(20px, 5vw, 72px);
    --header-top-bottom-spacing: 0px;
    --menu-link-font-size: 15px;
    --menu-link-color: var(--main-color);
    --menu-link-hover-color: var(--secondary-color);
    --menu-link-active-color: var(--main-color);
    --menu-link-padding-top-bottom: 10px;
    --menu-link-padding-left-right: 0px;
    --menu-submenu-background: var(--body-background);
    --menu-submenu-color: var(--main-color);
    --menu-desktop-spacing: clamp(18px, 2.2vw, 34px);
    --hamburger-color: var(--main-color);
    --button-font-size: 15px;
    --button-font-weight: 500;
    --button-color: #f6f2eb;
    --button-text-transform: none;
    --button-border-radius: 4px;
    --button-border-width: 1px;
    --button-border-color: var(--main-color);
    --button-background-color: var(--main-color);
    --button-padding: 15px 24px;
    --button-hover-background-color: transparent;
    --button-hover-color: var(--main-color);
    --button-hover-border-color: var(--main-color);
    --focus-px: 2px;
    --focus-style: solid;
    --focus-offset: 4px;
    --focus-color: var(--main-color);
    --transition-time: 200ms;
    --scrollbar-color-track: var(--body-background);
    /* Added preview tokens (no production token renamed or removed). */
    --ls-ivory: #f6f2eb;
    --ls-stone: #ece9e4;
    --ls-greige: #ddd6ce;
    --ls-navy: #0e395b;
    --ls-taupe: #786458;
    --ls-ink: #232424;
    --ls-bluegrey: #606e7a;
    --ls-olive: #5b6339;
    --ls-olive-tint: #e4e4d0;
    --ls-olive-ink: #3e4527;
    --ls-navy-soft: #c9d4de;
    --ls-line: #d3cbc0;
    font-family: var(--body-font-family);
    font-size-adjust: from-font;
    overflow-x: clip;
}
body[data-concept] *, body[data-concept] *::before, body[data-concept] *::after { box-sizing: border-box; }
body[data-concept] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--ls-display, var(--body-font-family)); line-height: 1.18; text-wrap: balance; }
body[data-concept] :is(p, li, dd, blockquote) { text-wrap: pretty; }
body[data-concept] :is(button, summary, input) { font-family: inherit; }
body[data-concept] :is(a, button, [tabindex]):focus { box-shadow: none; }
body[data-concept] :is(a, button, [tabindex]):focus:not(:focus-visible) { outline: none; }
body[data-concept] :is(a, button, [tabindex]):focus-visible { outline: var(--focus-px) var(--focus-style) var(--focus-color); outline-offset: var(--focus-offset); }
body[data-concept] [hidden]:not([hidden="until-found"]) { display: none; }
body[data-concept] figure { margin: 0; }
body[data-concept] img { max-width: 100%; height: auto; }
body[data-concept] .container { width: 100%; max-width: var(--container); background: transparent; box-shadow: none; border-radius: 0; }
body[data-concept] .container::after { content: none; }
body[data-concept] .ls-wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--mobile-paddings)); margin-inline: auto; padding-inline: var(--mobile-paddings); }
body[data-concept] .skip-link:focus { z-index: 2000; }

/* Buttons: theme .button, values through tokens. */
body[data-concept] .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; text-align: center; line-height: 1.3; letter-spacing: .01em; }
body[data-concept] .ls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }

/* Signature of the brief: thin line ending in an arrow, on every secondary call to action. */
body[data-concept] .ls-more { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--link-color); font-size: 15px; letter-spacing: .01em; }
body[data-concept] .ls-more:hover { color: var(--link-hover-color); }
body[data-concept] .ls-line-arrow { --ls-arrow-length: 44px; position: relative; display: inline-block; flex: none; width: var(--ls-arrow-length); height: 1px; background: currentColor; transition: width var(--transition-time) ease; }
body[data-concept] .ls-line-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 70% 30%; }
body[data-concept] a:hover > .ls-line-arrow { width: calc(var(--ls-arrow-length) + 14px); }

/* Footer base; colours per concept. */
body[data-concept] #Footer { padding: 0; font-size: 15px; background: var(--ls-footer-bg, var(--main-color)); color: var(--ls-footer-ink, var(--ls-ivory)); --focus-color: currentColor; }
body[data-concept] #Footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
body[data-concept] #Footer a:hover { opacity: .78; }
body[data-concept] .ls-footer-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 56px; padding-block: 72px 48px; }
body[data-concept] .ls-footer-logo { display: block; width: 260px; height: auto; margin-bottom: 22px; }
body[data-concept] #Footer h2 { margin-bottom: 14px; font-family: var(--body-font-family); font-size: 15px; font-weight: 600; letter-spacing: .02em; color: inherit; }
body[data-concept] #Footer ul { margin: 0; padding: 0; list-style: none; }
body[data-concept] #Footer li { line-height: 1.45; }
body[data-concept] #Footer p { max-width: 340px; margin-bottom: 4px; }
body[data-concept] .ls-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; padding-block: 18px 26px; border-top: 1px solid currentColor; font-size: 13px; }
body[data-concept] #Footer .devbyngx { padding: 0; }
body[data-concept] #Footer .devbyngx a { gap: 10px; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; }
body[data-concept] #Footer .devbyngx img { width: 52px; height: auto; }
body[data-concept] #back-to-top { display: none; }


body[data-concept] .ls-status { display: inline-block; margin: 0; padding-bottom: 6px; font-size: 14px; letter-spacing: .02em; color: var(--ls-status-ink, var(--secondary-color)); border-bottom: 1px solid currentColor; }
/* ---------------------------------------------------------------- the top of the site */
/* One band at the top, on every screen: the mark back to the cover at the left and, centred, one small pill with the
   button that opens the contents (every page of the site) and the main links. The book lies below it. On a phone the
   pill keeps to the room beside the mark and scrolls sideways, the contents button as its icon. */
body.ls-book { --ls-rail: 0px; }
body.ls-book.admin-bar { --ls-adminbar: var(--wp-admin--admin-bar--height, 32px); }
.ls-ico { display: block; flex: none; width: 24px; height: 24px; }
.ls-top {
    position: fixed; inset: var(--ls-adminbar, 0px) 0 auto; z-index: 900;
    display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 76px; pointer-events: none;
}
.ls-top > * { pointer-events: auto; }
.ls-top-brand {
    position: absolute; top: 10px; left: max(16px, env(safe-area-inset-left)); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: #fbf8f2; box-shadow: 0 1px 2px rgb(58 36 14 / .22), 0 6px 10px -6px rgb(58 36 14 / .45);
}
.ls-top-brand img { display: block; width: 30px; height: 30px; }
.ls-top-nav {
    display: flex; align-items: center; min-width: 0; max-width: 100%; height: 44px; padding: 0 4px; border-radius: 999px;
    background: rgb(251 248 242 / .95);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 1px 2px rgb(58 36 14 / .22), 0 8px 16px -8px rgb(58 36 14 / .5);
}
.ls-top-links { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0 0 0 4px; padding: 0 0 0 4px; border-left: 1px solid rgb(14 57 91 / .18); list-style: none; }
.ls-top-links li { margin: 0; padding: 0; }
body[data-concept] .ls-top-nav a {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
    color: var(--ls-navy); text-decoration: none; white-space: nowrap;
    font-family: var(--ls-display); font-size: 1rem; font-weight: 500; letter-spacing: .03em; line-height: 1;
    transition: background-color .2s ease, scale .15s ease;
}
body[data-concept] .ls-top-nav .ls-top-contents { padding-inline: 12px 14px; }
body[data-concept] .ls-top-nav a:hover { background: rgb(14 57 91 / .08); color: var(--ls-navy); }
body[data-concept] .ls-top-nav a:active { scale: .97; }
body[data-concept] .ls-top-nav a[aria-current="page"] { background: rgb(14 57 91 / .12); }
body[data-concept] .ls-top-nav a:focus-visible, .ls-top-brand:focus-visible { outline: 2px solid var(--ls-navy); outline-offset: 2px; }
.ls-top-contents .ls-ico { width: 20px; height: 20px; }
@media (max-width: 759px) {
    .ls-top { padding: 0 12px 0 68px; }
    .ls-top-nav { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
    .ls-top-nav::-webkit-scrollbar { display: none; }
    body[data-concept] .ls-top-nav a { padding: 0 11px; font-size: .94rem; }
    body[data-concept] .ls-top-nav .ls-top-contents { padding-inline: 11px; }
    body[data-concept] .ls-top-nav a:focus-visible { outline-offset: -2px; }
    .ls-top-contents span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-concept] .ls-top-nav a { transition: none; }
}