/*
 * DEV-only responsive outer-canvas experiment.
 * The canvas controls page edges; component-level reading measures stay local.
 */
:root {
  --lk-canvas-gutter: clamp(1rem, 4vw, 1.25rem);
  --lk-canvas-start: max(var(--lk-canvas-gutter), env(safe-area-inset-left, 0px));
  --lk-canvas-end: max(var(--lk-canvas-gutter), env(safe-area-inset-right, 0px));
  --lk-header-row-breath: 0.5rem;
  --lk-pinned-nav-breath: 0.5rem;
  --lk-pinned-header-height: calc(2.875rem + 2 * var(--lk-pinned-nav-breath));
  --lk-pinned-mobile-header-height: calc(2.75rem + 2 * var(--lk-pinned-nav-breath));
  --lk-nonhome-medium-padding-block: 4rem;
}

@media (min-width: 30rem) {
  :root {
    --lk-canvas-gutter: clamp(1.5rem, 5vw, 2rem);
  }
}

@media (min-width: 48rem) {
  :root {
    --lk-canvas-gutter: clamp(2.875rem, 6vw, 3.8125rem);
    --lk-nonhome-medium-padding-block: 5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --lk-canvas-gutter: clamp(3.5rem, 5.5vw, 4.9375rem);
    --lk-nonhome-medium-padding-block: 7rem;
  }
}

@media (min-width: 90rem) {
  :root {
    --lk-canvas-gutter: clamp(4.5rem, 5vw, 6rem);
  }
}

@media (min-width: 120rem) {
  :root {
    --lk-canvas-gutter: clamp(5rem, 4vw, 6rem);
  }
}

/* Shared outer rails. Local --lk-page-max values remain semantic caps. */
.lk-page-frame {
  width: min(
    calc(100% - var(--lk-canvas-start) - var(--lk-canvas-end)),
    var(--lk-page-max, 100%)
  );
}

.lk-home__frame {
  width: calc(100% - var(--lk-canvas-start) - var(--lk-canvas-end));
  max-width: none;
}

/* Medium editorial fields use the complete shared canvas. Their component-level
   grids and reading measures still control line length, while the outer content
   edges now meet the same rails as the header. Transactional booking/account
   panels retain their purpose-built caps. */
[data-background-role='medium']:not(.lk-booking__stage):not(.lk-customer-panel__stage) > .lk-page-frame {
  --lk-page-max: 100%;
}

/* Canonical non-home spacing for every medium-green section. The section
   shell owns only the background; its direct frame owns the shared vertical
   rhythm so page-local shell padding cannot double the intended clearance. */
body:not(.home) .lk-site-main [data-background-role='medium'] {
  padding-block: 0;
}

body:not(.home) .lk-site-main [data-background-role='medium'] > .lk-page-frame {
  padding-block: var(--lk-nonhome-medium-padding-block);
}

/* Replace page-local outer subtractions while retaining composition caps. */
.lk-treatment-list__frame {
  width: min(
    calc(100% - var(--lk-canvas-start) - var(--lk-canvas-end)),
    77.375rem
  );
}

.lk-treatment-process__frame {
  width: min(
    calc(100% - var(--lk-canvas-start) - var(--lk-canvas-end)),
    90rem
  );
}

/* Fixed desktop compositions remain centred inside the wider canvas. */
@media (min-width: 75rem) {
  .lk-site-header__inner {
    width: calc(100% - var(--lk-canvas-start) - var(--lk-canvas-end));
    max-width: none;
  }



  .lk-treatments__inner,
  .lk-lea__inner,
  .lk-therapy__inner {
    justify-content: center;
  }

  .lk-site-header {
    height: calc(5rem + 2 * var(--lk-header-row-breath));
  }

  .lk-site-header__controls,
  .lk-site-brand {
    inset-block-end: var(--lk-header-row-breath);
  }

  .lk-site-header.is-nav-fixed .lk-site-header__controls {
    inset-inline-end: var(--lk-canvas-end);
    inset-block-start: var(--lk-pinned-nav-breath);
    inset-block-end: auto;
  }

  .lk-site-header.is-nav-fixed::before {
    height: var(--lk-pinned-header-height);
  }

  .lk-site-header.is-nav-fixed .lk-site-brand {
    inset-inline-start: var(--lk-canvas-start);
    inset-block-end: auto;
  }

  .lk-site-header.is-nav-fixed:not(.is-brand-fixed) .lk-site-brand {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: auto;
    inset-block-end: var(--lk-header-row-breath);
  }

  body.admin-bar .lk-site-header.is-nav-fixed .lk-site-header__controls {
    inset-block-start: calc(32px + var(--lk-pinned-nav-breath));
  }

}

@media (max-width: 74.9375rem) {
  .lk-site-header {
    --lk-header-left: var(--lk-canvas-start);
    --lk-header-right: var(--lk-canvas-end);
    height: calc(7.625rem + 2 * var(--lk-header-row-breath));
  }

  /* The compact header remains full-width; its children use the canvas rails. */
  .lk-site-header__inner {
    width: 100%;
  }

  .lk-site-brand {
    inset-block-start: calc(2.375rem + var(--lk-header-row-breath));
  }

  .lk-menu-toggle,
  .lk-header-shortcuts {
    inset-block-start: calc(2.4375rem + var(--lk-header-row-breath));
  }

  .lk-site-header.is-nav-fixed:not(.is-menu-open)::before {
    height: var(--lk-pinned-mobile-header-height);
  }

  .lk-site-header.is-nav-fixed:not(.is-menu-open) .lk-menu-toggle,
  .lk-site-header.is-nav-fixed:not(.is-menu-open) .lk-header-shortcuts {
    inset-block-start: var(--lk-pinned-nav-breath);
  }

  .lk-site-header.is-nav-fixed:not(.is-brand-fixed) .lk-site-brand {
    position: absolute;
    inset-block-start: calc(2.375rem + var(--lk-header-row-breath));
  }

  body.admin-bar .lk-site-header.is-nav-fixed:not(.is-menu-open) .lk-menu-toggle,
  body.admin-bar .lk-site-header.is-nav-fixed:not(.is-menu-open) .lk-header-shortcuts {
    inset-block-start: calc(32px + var(--lk-pinned-nav-breath));
  }
}

@media (max-width: 782px) {
  body.admin-bar .lk-site-header.is-nav-fixed:not(.is-menu-open) .lk-menu-toggle,
  body.admin-bar .lk-site-header.is-nav-fixed:not(.is-menu-open) .lk-header-shortcuts {
    inset-block-start: calc(46px + var(--lk-pinned-nav-breath));
  }

}