/*
 * typography.css — Type Scale + Responsive Breakpoints
 * CRCKC Child Theme
 * Covers: heading & body font stacks, font sizes, link colours,
 *         site-title font in header/footer, and all @media breakpoints
 *         (tablet, desktop nav tweak, mobile).
 */

/* ============================================================
   BODY & PARAGRAPH FONT STACK
   ============================================================ */
p, li, td, th, input, textarea, select, button,
.wp-block-navigation, .wp-block-button__link,
.wp-block-post-excerpt, .wp-block-post-date {
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5, h6, .site-title, .wp-block-post-title {
  font-family: "Iansui", "Noto Sans TC", sans-serif;
  color: var(--crckc-text);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem,   1.25rem + 2vw,   3.3rem); font-weight: 400; }
h2 { font-size: clamp(1.6rem, 1.2rem  + 1vw,   2.4rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem,1.05rem + 0.7vw, 1.9rem); font-weight: 400; }
h4 { font-size: 1.2rem; font-weight: 500; }

p { font-size: 1rem; color: var(--crckc-text); }

.has-small-font-size, small {
  font-size: 0.92rem !important;
  color: var(--crckc-text-muted);
}

/* ============================================================
   LINKS
   ============================================================ */
a       { color: var(--crckc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--crckc-accent-dark); }

/* Site title font in header and footer */
header .wp-block-site-title,
header .wp-block-site-title a,
footer .wp-block-site-title,
footer .wp-block-site-title a { font-family: "Iansui", "Noto Sans TC", sans-serif; }

/* Global nav link colours (desktop, non-.kc-header context) */
.wp-block-navigation a       { color: var(--crckc-text); font-weight: 500; text-decoration: none; }
.wp-block-navigation a:hover { color: var(--crckc-accent); }

/* ============================================================
   RESPONSIVE — tablet  (≤ 1100px)
   ============================================================ */
@media (max-width: 1100px) {
  :root { --crckc-wide: 100%; }
  .crckc-ministry-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop nav: right padding on last nav item (≥ 782px) */
@media (min-width: 782px) {
  .wp-block-navigation .wp-block-navigation__container
  .wp-block-navigation-item__content:last-child {
    padding-right: 1rem !important;
  }
}

/* ============================================================
   RESPONSIVE — mobile  (≤ 781px)
   ============================================================ */
@media (max-width: 781px) {
  h1 { font-size: clamp(1.8rem, 1.35rem + 1.3vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 1.1rem  + 0.8vw, 1.9rem); }

  .wp-block-columns       { gap: 20px; }
  .wp-block-button__link  { width: 100%; text-align: center; }
  .wp-block-buttons       { width: 100%; }

  .wp-block-post-content h1,
  .wp-block-post-content h2,
  .wp-block-post-content p  { max-width: 100%; }

  .crckc-nowrap-heading   { white-space: normal; }
  .crckc-ministry-grid    { grid-template-columns: 1fr; }

  /* On mobile the background image must scroll with the page */
  .bg-photo {
    background-attachment: scroll   !important;
    background-position:   center center !important;
  }

  /* Override TT5 constrained group padding to use narrow mobile gutter */
  .wp-block-group.alignfull > .wp-block-group > .wp-block-group.alignwide {
    padding-left:  var(--crckc-mobile-gutter) !important;
    padding-right: var(--crckc-mobile-gutter) !important;
  }

  .wp-site-blocks .wp-block-post-content,
  .wp-site-blocks .wp-block-group {
    padding-left:  var(--crckc-mobile-gutter);
    padding-right: var(--crckc-mobile-gutter);
    box-sizing: border-box;
  }

  /* alignfull sections must always bleed edge-to-edge */
  .wp-site-blocks .wp-block-post-content > .alignfull,
  .wp-site-blocks .wp-block-post-content > .wp-block-group.alignfull {
    padding-left: 0; padding-right: 0;
  }

  /* All direct post-content children get the mobile gutter */
  .wp-site-blocks .wp-block-post-content > .wp-block-group,
  .wp-site-blocks .wp-block-post-content > .wp-block-columns,
  .wp-site-blocks .wp-block-post-content > .wp-block-heading,
  .wp-site-blocks .wp-block-post-content > p,
  .wp-site-blocks .wp-block-post-content > ul,
  .wp-site-blocks .wp-block-post-content > ol,
  .wp-site-blocks .wp-block-post-content > blockquote,
  .wp-site-blocks .wp-block-post-content > .wp-block-query {
    padding-left:  var(--crckc-mobile-gutter);
    padding-right: var(--crckc-mobile-gutter);
    box-sizing: border-box;
  }
}