/*! ===================================================================== * Manhajie — Mobile & Android Watch friendliness enhancements * --------------------------------------------------------------------- * This file is hand-maintained on top of the (static) Twenty Twenty-Four * export. It is loaded LAST in on every page so its rules win on * equal specificity. It only progressively enhances small screens; the * desktop layout is left untouched. * * Tiers: * - base / all screens : robustness guards (no accidental h-scroll, etc.) * - <= 781px : phone (matches the theme's own mobile breakpoint) * - coarse pointer : finger-sized tap targets (>= 44px) * - <= 360px : small phones * - <= 300px / 240px : Wear OS / Android watch territory * ===================================================================== */ /* ---------- Base guards (all screens) ---------- */ html { -webkit-text-size-adjust: 100%; /* stop iOS/Android auto-inflating text */ text-size-adjust: 100%; } body { overflow-x: hidden; /* safety net against accidental sideways scroll */ } /* Media never forces the page wider than the viewport */ img, .wp-block-image img, figure { max-width: 100%; height: auto; } /* Gentler tap flash on touch */ a, button, input, textarea, label, .wp-block-social-link-anchor { -webkit-tap-highlight-color: rgba(17, 17, 17, 0.10); } /* The site currently ships no navigation menu items, so the responsive * "hamburger" toggle only ever opens an EMPTY dialog — a dead end on touch. * Hide the toggle (and the now-empty nav region). Remove this block if a * real menu is added later. */ .wp-block-navigation__responsive-container-open { display: none !important; } /* ===================================================================== * Phone tier (<= 781px — the theme's mobile breakpoint) * ===================================================================== */ @media (max-width: 781px) { /* Honour notch / rounded-corner safe areas on top of the theme padding */ .has-global-padding { padding-left: max(var(--wp--style--root--padding-left), env(safe-area-inset-left)); padding-right: max(var(--wp--style--root--padding-right), env(safe-area-inset-right)); } /* Form fields: 16px minimum prevents iOS zooming in on focus; comfortable * padding and full width make them easy to use with a thumb. */ .wp-block-jetpack-input, .grunion-field, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea { font-size: 16px !important; box-sizing: border-box; width: 100%; max-width: 100%; } /* The message box ships with rows="20" — far too tall on a phone. Cap it * to a sensible, still-resizable height. */ .wp-block-jetpack-field-textarea textarea, textarea.grunion-field { height: 9em !important; min-height: 6em; } /* Submit / form buttons: full-width, finger-tall, easy to hit. * !important is required: Jetpack ships a higher-specificity rule * `.wp-block-jetpack-contact-form :is(.wp-block-button__link, …)` that * collapses the button to ~0 min-height via an unset custom property. */ .wp-block-button__link, .wp-block-jetpack-button button, .wp-block-jetpack-contact-form .wp-block-button__link, .jetpack-contact-form__form button[type="submit"], button[type="submit"] { min-height: 48px !important; padding-top: 0.7em !important; padding-bottom: 0.7em !important; display: inline-flex; align-items: center; justify-content: center; } } /* ===================================================================== * Touch targets (any coarse pointer, plus narrow screens) * WCAG 2.5.5 / platform guidance: ~44px minimum hit area. * ===================================================================== */ @media (pointer: coarse), (max-width: 600px) { /* Footer social icons: 24px glyph -> 44px tap area via padding. */ .wp-block-social-link .wp-block-social-link-anchor, ul.wp-block-social-links .wp-social-link a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; box-sizing: border-box; } /* Let the row breathe / wrap cleanly when targets grow. */ ul.wp-block-social-links { flex-wrap: wrap; gap: 4px; row-gap: 4px; } /* Nav close button (header/footer) — finger sized. */ .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Generic links inside running text get a little more vertical room so * they are not pixel-thin tap targets, without changing their look. */ .wp-block-site-title a, p a, h1 a, h3 a, h5 a { padding-block: 2px; } /* Weglot language switcher: keep it usable with a thumb and clear of the * home indicator; enlarge the current-language button and menu items. */ .country-selector.weglot-dropdown { bottom: max(12px, env(safe-area-inset-bottom)) !important; right: max(12px, env(safe-area-inset-right)) !important; } .country-selector.weglot-dropdown .wgcurrent { min-height: 44px; display: flex; align-items: center; } .country-selector.weglot-dropdown ul li a, .country-selector.weglot-dropdown ul li { min-height: 40px; line-height: 1.4; } .country-selector.weglot-dropdown ul li a { display: flex; align-items: center; padding: 8px 14px !important; } } /* ===================================================================== * Small phones (<= 360px) * ===================================================================== */ @media (max-width: 360px) { /* Trim the many decorative spacers so content isn't buried under scroll. */ .wp-block-spacer[aria-hidden="true"] { height: 18px !important; } /* Keep the hero title bold but never let it crowd the edges. */ main h1.wp-block-heading { font-size: clamp(2rem, 13vw, 2.6rem) !important; overflow-wrap: break-word; } } /* ===================================================================== * Android watch / very small screens (<= 300px) * ===================================================================== */ @media (max-width: 300px) { /* Reclaim horizontal space — the fluid theme padding is generous here. */ .has-global-padding { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } /* Tighten the type scale so a full thought fits on a tiny display. */ main h1.wp-block-heading { font-size: 1.85rem !important; line-height: 1.05; } h3.wp-block-heading { font-size: 1.2rem !important; line-height: 1.2; } h5.wp-block-heading { font-size: 0.95rem !important; line-height: 1.4; } /* Cap the hero image so it doesn't consume the whole watch face. */ main figure.wp-block-image img { max-height: 42vh; width: auto; margin-inline: auto; display: block; } /* Smaller spacers + shorter message box on a watch. */ .wp-block-spacer[aria-hidden="true"] { height: 12px !important; } .wp-block-jetpack-field-textarea textarea, textarea.grunion-field { height: 6em !important; min-height: 4.5em; } /* The contact form's vertical layout gets snug; keep gaps modest. */ .wp-block-jetpack-contact-form .wp-block-jetpack-field-name, .wp-block-jetpack-contact-form .wp-block-jetpack-field-email, .wp-block-jetpack-contact-form .wp-block-jetpack-field-textarea { margin-top: 0.75em; } } /* ===================================================================== * Tiny watch faces (<= 240px) * ===================================================================== */ @media (max-width: 240px) { main h1.wp-block-heading { font-size: 1.5rem !important; } .has-global-padding { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } /* Stack the footer social row centred so nothing clips. */ ul.wp-block-social-links { justify-content: center; } } /* Respect reduced-motion just in case any enhancement animates later. */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }