/*
Theme Name: Gymverse Custom
Theme URI: https://gymverse.app/
Template: gym
Author: PMM Alliance
Description: Child theme of the Dooble "Gymverse" theme. Adds a separate homepage template so a new design can be built without touching the parent theme, and carries site-wide fixes for the duplicate <title> tag and the missing page headings. Deactivate to return the site to the parent theme exactly as Dooble shipped it.
Version: 0.7.0
Requires PHP: 7.4
Text Domain: gymverse-custom
*/

/* ---------------------------------------------------------------------------
   Child styles.
   Parent stylesheets load first (see functions.php), so anything here wins
   at equal specificity. Build the new homepage design in this file.
   --------------------------------------------------------------------------- */

/* Inner pages: heading added by page.php. Modest defaults, adjust to taste. */
.page-content {
	padding-block: 3rem 4rem;
}

.page-content .page-title {
	margin: 0 0 1.5rem;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
}

/* ---------------------------------------------------------------------------
   Blog defence.

   The parent theme resets figures globally with `figure { font-size: 0;
   line-height: 1px }`, which is fine for its own layout but silently collapses
   any <figcaption> to zero size. No article carries a caption today, so nothing
   is broken right now, but the first person to add an image caption in a post
   would find it invisible with no obvious cause.

   The blog plugin namespaces everything under .gvb-root, so scoping the undo
   there keeps it away from the homepage's own figures.
   --------------------------------------------------------------------------- */
.gvb-root figure {
	font-size: inherit;
	line-height: inherit;
}

.gvb-root figcaption {
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   FAQ fallback.

   The parent collapses .faq-panel to height:0 and only its JavaScript ever
   restores the height, so with scripts blocked or broken the answers are
   unreachable. This makes an open item readable without JavaScript. When the
   script does run it sets an inline height, which wins over this rule, so the
   animation is unaffected.
   --------------------------------------------------------------------------- */
.faq details[open] .faq-panel {
	height: auto;
}

/* ---------------------------------------------------------------------------
   Show the "Blog" label inside the mobile menu.

   Alon, 25 Aug 2026: the mobile menu should say "Blog", the same as desktop.

   The parent hides the top level nav item on mobile in two places, one of them
   with !important, so the drawer opened straight onto the seven category links
   and the word "Blog" never appeared:

       .site-menu-list > li > a          { display: none; }
       .site-menu-list > li > .menu-link { display: none !important; }

   This brings it back as the first row of the drawer, styled to sit above the
   categories rather than look like one of them. The chevron stays hidden — the
   list is already open, so there is nothing to indicate.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {

	/*
	 * The li is a flex row on desktop, holding the label beside nothing
	 * because the label was hidden. Revealing the label put it alongside
	 * the category list and stretched it to the full 398px height, so the
	 * row has to stack on mobile.
	 */
	.site-menu .site-menu-list > li {
		flex-direction: column;
	}

	.site-menu .site-menu-list > li > .menu-link {
		display: flex !important;
		align-items: center;
		padding: 14px 13px;
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
}

/* ---------------------------------------------------------------------------
   The "Blog" label beside the hamburger.

   The parent gives the button a fixed 30px square, so a label inside it would
   be clipped. Widening it to fit is all that is needed; .nav .hamburger is
   (0,2,0) against the parent's (0,1,0), so no !important.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {

	.nav .hamburger {
		width: auto;
		gap: 8px;
	}

	.nav .hamburger .hamburger-label {
		font-family: "Montserrat", sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		color: #fff;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
   A dropdown arrow instead of a hamburger.

   Alon, 25 Aug 2026: the mobile trigger should be a dropdown arrow, not a
   burger, matching the desktop nav.

   The arrow reuses the exact geometry of the desktop chevron in the parent's
   style.css (8px square, two 1.5px borders, rotated 45deg) so the two read as
   the same control. It also flips to point up while the menu is open, which is
   what a dropdown is expected to do.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {

	.nav .hamburger::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 1.5px solid #fff;
		border-bottom: 1.5px solid #fff;
		transform: rotate(45deg);
		margin-top: -4px;
		transition: transform 0.2s ease, margin-top 0.2s ease;
	}

	header.is-menu-open .nav .hamburger::after {
		transform: rotate(-135deg);
		margin-top: 3px;
	}
}