/* LovelikeTH public layout alignment — shared desktop shell + preserved reading widths. */
:root {
  /* 1212px outer shell with 16px desktop gutters = 1180px visible content line. */
  --ll-public-shell-max: 1212px;
  --ll-public-content-max: 1180px;
  --ll-public-shell-gutter: 16px;
}

/*
 * Shared public topbar glass follows the same visible left/right line as page
 * content. Its own border is the visual edge, so it uses the 1180px content
 * width rather than the 1212px padded outer shell.
 */
body.ll-public-page nav.ll-public-topbar.navbar-custom.fixed-top > .container,
body.ll-blog-page nav.ll-public-topbar.navbar-custom.fixed-top > .container,
body.monoka-liquid-home nav.ll-public-topbar.navbar-custom.fixed-top > .container {
  width: min(calc(100% - 32px), var(--ll-public-content-max));
  max-width: var(--ll-public-content-max);
}

/* Shared footer/copyright content uses the padded 1212px shell. */
body.ll-public-page .ll-public-footer .container,
body.ll-public-page .ll-public-copyright .container,
body.ll-blog-page .ll-public-footer .container,
body.ll-blog-page .ll-public-copyright .container,
body.monoka-liquid-home .ll-public-footer .container,
body.monoka-liquid-home .ll-public-copyright .container {
  box-sizing: border-box;
  width: min(100%, var(--ll-public-shell-max));
  max-width: var(--ll-public-shell-max);
  padding-right: var(--ll-public-shell-gutter);
  padding-left: var(--ll-public-shell-gutter);
}

/* General public pages: 1180px usable content area at desktop. */
body.ll-public-page:not(.ll-api-docs-public-page) .page-main > .my-3 > .container,
body.ll-public-page:not(.ll-api-docs-public-page) .page-main > .my-md-5 > .container {
  box-sizing: border-box;
  width: min(100%, var(--ll-public-shell-max));
  max-width: var(--ll-public-shell-max);
  padding-right: var(--ll-public-shell-gutter);
  padding-left: var(--ll-public-shell-gutter);
}

/*
 * Platform landing pages previously added another 24px page gutter inside the
 * shared container. Remove only that duplicate desktop inset; card/hero inner
 * padding is intentionally untouched. Tablet/mobile retain their existing
 * page-specific spacing.
 */
@media (min-width: 992px) {
  body.ll-platform-services-public-page .ll-platform-landing {
    width: 100%;
    max-width: var(--ll-public-content-max);
    padding-right: 0;
    padding-left: 0;
  }
}

/* Blog page-level shells only; article reading width remains 900px. */
body.ll-blog-page .ll-blog-main > .container,
body.ll-blog-page .ll-blog-main .ll-blog-shell,
body.ll-blog-page .ll-blog-main .ll-blog-container,
body.ll-blog-page .ll-blog-single__container {
  box-sizing: border-box;
  width: min(100%, var(--ll-public-shell-max));
  max-width: var(--ll-public-shell-max);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--ll-public-shell-gutter);
  padding-left: var(--ll-public-shell-gutter);
}

/*
 * Homepage outer containers use the same shell. The stronger hero selector is
 * deliberate: liquid-home.css previously fixed the hero at 1240px.
 */
body.monoka-liquid-home .monoka-home-hero .header-content > .container,
body.monoka-liquid-home main .container,
body.monoka-liquid-home .footer > .container,
body.monoka-liquid-home .copyright > .container {
  box-sizing: border-box;
  width: min(100%, var(--ll-public-shell-max));
  max-width: var(--ll-public-shell-max);
  padding-right: var(--ll-public-shell-gutter);
  padding-left: var(--ll-public-shell-gutter);
}

/*
 * Intentional narrow reading components are not widened: About remains a
 * 1040px document, FAQ/article copy keeps its own limits, and API docs retain
 * the wider sidebar/code canvas.
 */
body.ll-api-docs-public-page .ll-api-public-container,
body.ll-blog-api-docs-page .ll-api-public-container {
  max-width: none;
}

@media (max-width: 991.98px) {
  /* Shared topbar switches to its established responsive card behavior. */
  body.ll-public-page nav.ll-public-topbar.navbar-custom.fixed-top > .container,
  body.ll-blog-page nav.ll-public-topbar.navbar-custom.fixed-top > .container,
  body.monoka-liquid-home nav.ll-public-topbar.navbar-custom.fixed-top > .container {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  :root { --ll-public-shell-gutter: 14px; }
}

@media (max-width: 479.98px) {
  :root { --ll-public-shell-gutter: 12px; }
}


/* LovelikeTH public typography — Inter for Latin/UI, Noto Sans Thai for Thai. */
body.ll-public-page,
body.ll-blog-page,
body.monoka-liquid-home,
body.monoka-liquid-auth {
  font-family: "Inter", "Noto Sans Thai", sans-serif;
}

body.ll-public-page :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, small, strong),
body.ll-blog-page :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, small, strong),
body.monoka-liquid-home :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, small, strong),
body.monoka-liquid-auth :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, small, strong) {
  font-family: "Inter", "Noto Sans Thai", sans-serif;
}