/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
/** Yusaso Teal — shared public typography presentation. */

:is(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 0.65rem;
    color: var(--heading-font-color);}

:is(.page_heading, .page_content_header) h1 {
    text-align: center;
}

h2 {
    color: var(--primary-font-color); /* Oct 17 2026 - primitive, no catalog token (her ruling) */
    margin-bottom: 8px;
    text-align: left;}

/* Mobile typography steps headings down twice and paragraph copy once while
   leaving every wider presentation unchanged. */

body.public_shell p {
    margin-block: 0 0.625rem;
    color: var(--primary-font-color);}

h2.breadcrumbs.page_heading_context {
    color: var(--yusaso-blue);}

/* ==========================================================================
   RESPONSIVE TIERS (Oct 11 2026)
   Mobile-first hardening for every device size in the canon (see the DevTools
   preset list). Everything above this line is the normal CSS; these blocks
   only refine it for narrower or wider screens. Add new size fixes here.
   ========================================================================== */

/* 320–428px — Mobile Small + Mobile Large (iPhone SE, iPhone 16, Pixel 9 / 9 Pro / 10, Galaxy A55, Galaxy Z Fold 6 cover, Pixel 9 Pro Fold cover) */
@media (max-width: 428px) {
    h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
    h2.breadcrumbs { flex-wrap: wrap; }
}

/* 768–1024px — Tablet (own tier): iPad Mini landscape (768), Galaxy Z Fold 6 unfolded (~884), Pixel 9 Pro Fold unfolded (~841), Surface Pro 10 / 13 (~912), 1024 */
@media (min-width: 768px) and (max-width: 1024px) {
    h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
}

/* 1025–1400px — Narrow Desktop: any desktop browser window narrower than the full site width (Nest Hub Max 1280, laptops, resized windows); the three-column layout switches on at 1401 */
@media (min-width: 1025px) and (max-width: 1400px) {
    h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
}