/*
 * Pragmatic responsive overrides for the fitness (AIT) theme.
 * The theme is a fixed 1000px display:table-cell layout with no real media
 * queries; this makes it usable on tablets/phones without redesigning it.
 * Loaded after wp_head (see main-layout.php) so it wins over theme + plugin CSS.
 * Added 2026 for the PHP 8.4 refresh. Bump ?v= on the link when changing this.
 */

img { max-width: 100% !important; height: auto !important; }
html { -webkit-text-size-adjust: 100%; }
.mobile-nav-toggle, .submenu-toggle { display: none; } /* hidden on desktop; appear <=1080px */

/* Tablets / small laptops: the 1000px center (and the theme's body{min-width:1000px})
   would overflow — make it fluid. */
@media (max-width: 1080px) {
	/* the theme locks body to min-width:1000px (desktop) and width/min/max:480px
	   (its old <=497px "mobile" block) — both cause horizontal overflow */
	html, body { width: auto !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden; }
	.whole-page, .mainpage-wrap, .mainpage, .footer-wrap { width: auto !important; max-width: 100% !important; }
}

/* Phones / small tablets: un-table the layout and stack everything. */
@media (max-width: 1080px) {
	/* the table scaffolding -> normal block flow */
	.table-wrap, .content-wrap, .header-wrap, .relative-holder,
	.mainpage-wrap, .mainpage, .footer-wrap, .footer-widgets .table-wrap,
	.cell-side, .page-side, .table-row, .table-cell {
		display: block !important;
		width: auto !important;
	}

	/* drop the fixed side-gutter cells that pad the 1000px center */
	.left-side.page-edge, .right-side.page-edge { display: none !important; }

	/* the theme hardcodes .wrapper widths (450/500px) */
	.wrapper, .left-side .wrapper { width: auto !important; }

	/* header: centre the logo, stack the menu below it */
	.page-head .cell-side { float: none !important; text-align: center; }
	.page-head .left-side .wrapper { padding-right: 66px !important; padding-top: 24px !important; } /* clear the hamburger + drop the logo clear of it */
	.logo { float: none !important; text-align: center; }
	.logo img { display: inline-block; }

	/* ── mobile nav: collapsed by default; the hamburger toggles .mainmenu.is-open ── */
	.page-head .right-side .wrapper { padding: 0 !important; } /* menu spans full width */
	.mainmenu, .mainmenu .menu { float: none !important; width: auto !important; }
	.mainmenu .menu { display: none !important; background: #211c1c; }
	.mainmenu.is-open .menu { display: block !important; }
	.mainmenu .menu li { float: none !important; display: block !important; width: auto !important; margin: 0 !important; } /* kill the theme's 30px horizontal-spacing margin */
	.mainmenu .menu > li { border-bottom: 1px solid rgba(255,255,255,.10); } /* full-width separators */
	.mainmenu .menu a { display: block; padding: 14px 18px !important; color: #f0f0f0 !important; border: 0 !important; text-align: left !important; } /* !important: the active item (current_page_item) is zeroed by the theme + the global a{padding:0} reset */

	/* parent items: link + caret share one row (flex); the sub-menu wraps below.
	   flex-basis:0 on the link stops the theme's hardcoded anchor width from
	   claiming the whole row and bumping the caret onto its own line. */
	.mainmenu .menu li.menu-item-has-children { display: flex !important; flex-wrap: wrap; align-items: stretch; }
	.mainmenu .menu-item-has-children > a { flex: 1 1 0% !important; min-width: 0; width: auto !important; }
	.mainmenu .menu-item-has-children > .submenu-toggle { flex: 0 0 56px; }
	.mainmenu .menu-item-has-children > .sub-menu { flex: 1 0 100%; }
	.submenu-toggle {
		display: flex !important; align-items: center; justify-content: center;
		background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.12);
		color: #fff; cursor: pointer; padding: 0; margin: 0;
	}
	.submenu-toggle::before { content: '\25BE'; font-size: 18px; line-height: 1; }
	.menu-item-has-children.is-open > .submenu-toggle::before { content: '\25B4'; }

	/* sub-menus */
	.mainmenu .sub-menu { display: none !important; position: static !important; width: auto !important; box-shadow: none !important; border: 0 !important; background: rgba(0,0,0,.28); margin: 0; padding: 0; }
	.mainmenu .menu-item-has-children.is-open > .sub-menu { display: block !important; }
	/* drop the theme's fixed 30px submenu-row height so the <li> wraps its <a> exactly
	   (otherwise the 46px <a> — which carries the hover bg — overflows the 30px row) */
	.mainmenu .sub-menu > li { border-top: 1px solid rgba(255,255,255,.06); height: auto !important; line-height: normal !important; }
	/* left-aligned + indented submenu items so the hierarchy reads clearly (theme's
	   12px/18px centred text was tiny and hard to parse) */
	.mainmenu .sub-menu a { text-align: left !important; font-size: 16px !important; line-height: 1.3 !important; padding: 14px 18px 14px 36px !important; }
	/* kill the theme's white desktop-dropdown hover (.mainmenu li ul li:hover>a {background:#eee}) that
	   filled the full-width mobile row with a light block; use a subtle dark highlight instead */
	.mainmenu .menu a:hover, .mainmenu .menu a:focus { background: rgba(255,255,255,.08) !important; color: #fff !important; }

	/* hamburger toggle button (mobile only) */
	.page-head { position: relative; }
	.mobile-nav-toggle {
		display: block; position: absolute; top: 14px; right: 14px; z-index: 60;
		width: 46px; height: 40px; padding: 9px; margin: 0;
		background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25);
		border-radius: 5px; cursor: pointer;
	}
	.mobile-nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
	.mobile-nav-toggle span + span { margin-top: 5px; }
	.mobile-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mobile-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
	.mobile-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* content + any page/blog sidebar stack full width */
	.content-wrapper, .page-content,
	.page-sidebar, .left-page-sidebar, .right-page-sidebar,
	.left-blog-sidebar, .right-blog-sidebar {
		float: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* the sidebar inner column + its widgets are fixed-width (~450px) in the theme;
	   make them fluid so widget content (recent posts, categories) isn't clipped */
	.page-side-left, .static-text, .static-text .text, .static-text .text-inside,
	.box, .widget-container, .postitems-wrapper, .postitem {
		width: auto !important; max-width: 100% !important; box-sizing: border-box;
	}

	/* footer widget columns stack; the right-widgets shadow-wrap needs no padding on mobile */
	.footer-widgets .left-widgets .widget-container,
	.footer-widgets .right-widgets .widget-container {
		width: auto !important;
		padding-left: 0 !important;
	}
	.footer-widgets .right-widgets .shadow-wrap { width: auto !important; padding: 0 !important; }

	/* shortcode grid columns -> full width */
	.sc-column, .sc-column.one-full, .sc-column.one-half, .sc-column.one-half-last,
	.sc-column.one-third, .sc-column.one-third-last, .sc-column.two-third,
	.sc-column.two-third-last, .sc-column.three-fourth, .sc-column.three-fourth-last {
		width: auto !important;
		float: none !important;
		margin-left: 0 !important;
	}

	/* Google Reviews widget: full width on small screens */
	.wp-google-reviews, .grw-widget, .grw-row { width: auto !important; max-width: 100% !important; }
}

/* Google Reviews: length is handled by the plugin's own read-more toggle.
   The inner container is plugin-locked, so give the widget the same ~1em breathing
   room as everything else by padding its outer .wp-gr wrapper. */
.wp-gr.wpac { padding: 1em !important; box-sizing: border-box !important; }

/* China resilience: when Google is unreachable (google-fallback.js probe adds
   .google-blocked to <html>), hide only the Google-hosted images — e.g. review
   avatars from lh3.googleusercontent — so they don't render as broken-image icons.
   Locally-cached avatars and the review names / stars / text are unaffected. */
.google-blocked img[src*="googleusercontent"],
.google-blocked img[src*="gstatic"],
.google-blocked img[src*="ggpht"] { display: none !important; }

/* ── Balanced padding (all widths) ──
   The theme uses asymmetric table-layout padding — left + oversized top/bottom but
   never right (the right gap used to come from the fixed page-edge gutters), e.g.
   [role=main]=0/0/40/50 and .page-head .page-side=27/0/70/0. Reset the structural
   cells and apply a uniform 1em to the content wrappers (header, footer, sidebar,
   main, and the reviews widget's wrapper). */
.page-head .page-side, .page-footer .page-side, .footer-wrap .cell-side, .footer-widgets .cell-side { padding: 0 !important; }
.page-side .wrapper, .cell-side .wrapper, #content.wrapper, [role="main"], .shadow-wrap { padding: 1em !important; }

/* Mobile body text: the theme's old <=497px block sets .mainpage to 18px with
   line-height:normal — too big/loose now that the layout is properly responsive. */
@media (max-width: 497px) {
	.mainpage, .mainpage p, .mainpage small { font-size: 16px !important; line-height: 1.3 !important; }

	/* widget nav links: the theme bumps these to 18px on mobile; 16px reads better */
	.widget_archive li a, .widget_categories li a, .widget_links li a, .widget_meta li a,
	.widget_nav_menu li a, .widget_pages li a, .widget_recent_entries li a, .widget_rss li a,
	.widget_submenu li a { font-size: 16px !important; line-height: 25px !important; }
}

/* Footer-widgets: stack the shadow-wrap's inner wrapper as a flex column. */
.shadow-wrap .wrapper { display: flex !important; flex-direction: column !important; }

/* Footer copyright line: full-width, centred, 12px, no margin.
   (!important overrides the inline width:300px/text-align:right and the
   .mainpage p mobile rule — the footer carries the .mainpage class.) */
.copyright p { width: 100% !important; text-align: center !important; font-size: 12px !important; margin: 0 !important; }
.copyright { margin: 0 !important; }

/* Header logo + tagline: no margin. */
.logo, .logo > a, .logo img, .tagline { margin: 0 !important; }

/* Mobile content order: the two content columns stack left(sidebar)-then-right(main)
   by default, so the reviews/links sidebar appears above the page content. Flip them
   so the main content (#content, right column) comes first and the sidebar (left
   column) follows — applies to all two-column templates (home, page, single, etc.). */
@media (max-width: 1080px) {
	.content-wrapper { display: flex !important; flex-direction: column !important; }
	.content-wrapper > .right-side { order: 1 !important; }
	.content-wrapper > .left-side  { order: 2 !important; }
}