/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
*/

/* Responsive base typography
   Keep body and block styles using rem units and your theme.json base = 1.00rem
   This scales the whole typographic rhythm by adjusting the root font-size. 
   If you want absolutely no root scaling, drop the :root media queries and keep only the    fallback body/heading rules.
*/

:root {
  /* baseline — corresponds to theme.json base: 1.00rem */
  --site-root-scale: 1; /* 1 => 100% => 1rem = 16px (user agent) */
  font-size: calc(100% * var(--site-root-scale));
}

/* Small screens — slightly larger readable text */
@media (max-width: 599px) {
  :root { --site-root-scale: 1.05; } /* ~5% up for small devices */
}

/* Medium screens — default (no change) */
@media (min-width: 600px) and (max-width: 1199px) {
  :root { --site-root-scale: 1; }
}

/* Large screens — slightly larger for comfortable reading */
@media (min-width: 1200px) {
  :root { --site-root-scale: 1.0625; } /* ~6.25% up */
}

/* Optional: ensure basic body and heading rules fallback in case editor styles aren't compiled */

/* =========================================================
   Base typography fallbacks
   Provide sensible fallbacks if editor theme.json styles
   are not available.
   ========================================================= */
body {
  font-family: var(--wp--preset--font-family--body-font, "Montserrat Z, Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-size: var(--wp--preset--font-size--base, 1rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--heading-font, "Montserrat Z, Montserrat", system-ui, -apple-system, "Segoe UI");
  font-weight: 700;
  line-height: 1.15;
}

/* =========================================================
   Utility and accessibility helpers
   ========================================================= */

/* Visually hide but keep accessible to screen readers */
.screen-reader-text {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Ensure child stylesheet overrides parent: include this rule
   only if you cannot control stylesheet order. Otherwise enqueue
   this file after parent styles and remove !important usage. */
body .wp-block-navigation__container .wp-block-navigation__submenu-container {
  /* no !important here; keep as final fallback */
}

/* =========================================================
   End of file
   Place this file in the child theme root (style.css) and
   ensure it is enqueued/loaded after parent styles.
   ========================================================= */