/* Mobile fixes from the 2026-10-23 phone/tablet test. Loaded on every page from header.php; "html" prefix wins over the page stylesheets. */

/* Menu button: 44px tap area without moving the icon */
html .navbar-toggle { padding: 14px 10px; margin: -14px -10px; box-sizing: content-box; }
html .close-menu { padding: 12px; margin: -12px; }

/* Landscape phones and short screens: the whole menu fits */
@media (max-height: 560px) {
  html .menu-list { top: 5.5rem; bottom: 4.5rem; }
  html .menu-list > li { font-size: 1.35rem; margin-top: 1.1rem; }
  html .menu-list > li:first-child { margin-top: 0; }
  html .menu-footer { bottom: 1.2rem; }
  html .menu-footer .copy { display: none; }
  html .menu-footer .rg-ig-menu { margin: 0 !important; }
}

/* Footer Instagram link: bigger tap area */
html .footer .flex-item a[href*="instagram"] { padding: 8px 0; }

@media (max-width: 767.98px) {
  /* readable small labels (were 10px) */
  html .rg-hero h1 small { font-size: 11px; }
  html .pg-label, html .rgp-label, html .rgw-label { font-size: 11px; }
  html .rgp-cap { font-size: 11px; }
  html .rgw-cap i { font-size: 12px; }
  html .rgp-tabs a { font-size: 12px; }
}
/* touch screens (phones and tablets): 44px tap height for the portfolio tabs and the home consultation link */
@media (hover: none), (max-width: 767.98px) {
  html .rgp-tabs a { padding: 14px 0 16px; }
  html .rgw-link { display: inline-block; padding: 14px 0; }
}
@media (min-width: 768px) and (max-width: 1299.98px) { html .rg-hero h1 small { font-size: 12px; } }

/* 2026-10-23 round 2 (user: contact sits too far right; portfolio one photo per row; photo filters cut off) */
@media (max-width: 767.98px) {
  /* the theme wrapper already has 20px side padding: no second gutter, so content lines up with the logo */
  html .pg-wrap, html .rgp-wrap, html .rgw-wrap { padding-left: 0; padding-right: 0; }
  html .pg-info a, html .pg-info span { overflow-wrap: anywhere; }
  /* portfolio: one photo per row, captions always shown */
  html .rgp-grid { columns: 1; }
  html .rgp-item { margin-bottom: 14px; }
  html .rgp-cap { font-size: 12px; left: 14px; bottom: 12px; }
  /* tabs and room filters wrap instead of scrolling off the edge */
  html .rgp-tabs { flex-wrap: wrap; overflow: visible; gap: 0 22px; }
  html .rgp-filters { flex-wrap: wrap; overflow: visible; margin: 0 0 22px; padding: 0; gap: 8px; }
  html .rgp-filters button { padding: 10px 14px; }
  html .rgt-wall { margin: 0; padding: 0 0 10px; }
}