/**
 * JKPTG global responsive styles.
 *
 * Shared page-level adjustments belong here. Responsive rules that only
 * affect one component should remain in that component's stylesheet.
 */

@media (max-width: 767.98px) {
  :root {
    --jkptg-layout-page-gutter: 16px;
  }

  /* The page region owns the mobile gutter. Components inside it must not
   * subtract another gutter from their width. Leave the full-bleed home page
   * and the dedicated login/search/error shells to their own layouts. */
  body:not(.path-frontpage) main .jkptg-page-container:not(:has(.jkptg-main-banner)) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  body:not(.path-frontpage) main .jkptg-page-container:not(:has(.jkptg-main-banner)) .region-content {
    --jkptg-layout-content-gutter: 0px;
    padding-inline: var(--jkptg-layout-page-gutter);
  }

  /* These sections deliberately break out for a full-width background.
   * Restore their inner gutter while centering on the available page width. */
  body:not(.path-frontpage) .jkptg-page-container :is(
    .jkptg-profile:not(.node--type-profil-bahagian),
    .jkptg-profile-directory,
    .jkptg-journal-land__archive
  ) {
    --jkptg-layout-content-gutter: var(--jkptg-layout-page-gutter);
    left: auto;
    width: calc(100% + (2 * var(--jkptg-layout-page-gutter)));
    max-width: none;
    margin-inline: calc(0px - var(--jkptg-layout-page-gutter));
  }

  h1,
  .h1 {
    font-size: 2rem;
  }

  h2,
  .h2 {
    font-size: 1.75rem;
  }

  h3,
  .h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  html {
    font-size: 95%;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 100%;
  }
}