/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================================
   Mobile / tablet responsive retrofit — Crochet by Nids
   ---------------------------------------------------------
   The site was built at fixed desktop widths: containers with
   hard-coded 1100px widths, grids using fixed pixel columns
   (e.g. 56px 890px 114px), and a nav that never collapses.
   That looks great on desktop but overflows the screen on
   phones/tablets. These rules make the layout fluid below
   992px and add a working hamburger menu (paired with the
   script in functions.php).
   ========================================================= */

/* ---------------------------------------------------------
   Product / pattern card images (all breakpoints)
   ---------------------------------------------------------
   Product photos are shot in portrait on a phone, but the card
   image slots were landscape (~4:3), so the top & bottom of each
   product got cropped off. Give the slots a portrait 4:5 ratio so
   much more of each photo shows, and keep object-fit:cover so a
   portrait photo still fills the slot with no letterbox gaps. */
.brxe-hmim, .brxe-hgim, .brxe-pgim,
.brxe-fgim, .brxe-fpim, .brxe-frim,
#brxe-ctm1, #brxe-ctm2, #brxe-ctm3, #brxe-ctm4 {
	aspect-ratio: 4 / 5 !important;
	height: auto !important;
}
.brxe-hmim img, .brxe-hgim img, .brxe-pgim img,
.brxe-fgim img, .brxe-fpim img, .brxe-frim img,
#brxe-ctm1 img, #brxe-ctm2 img, #brxe-ctm3 img, #brxe-ctm4 img {
	object-fit: cover !important;
	object-position: center !important;
}

/* The homepage "Ready to Ship" badge has a leading • dot that the other
   status pills don't. Hide it so every pill reads as plain text and the
   whole site's pills match. */
[class*="bddot"] { display: none !important; }

/* Header logo: the new logo is a wide (~2.5:1) horizontal wordmark, so
   drop the old circular 56px crop and show it at natural width, 52px tall. */
#brxe-hdrlgo {
	width: auto !important;
	height: 68px !important;
	border-radius: 0 !important;
	overflow: visible !important;
}
#brxe-hdrlgo img {
	width: auto !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	border-radius: 0 !important;
}

@media (max-width: 991px) {

	/* Keep all media inside the viewport */
	img, svg, video, iframe { max-width: 100% !important; height: auto; }

	/* Any multi-column Bricks grid collapses to a single column */
	.brxe-container.brx-grid,
	.brxe-block.brx-grid,
	.brxe-div.brx-grid { grid-template-columns: 1fr !important; }

	/* ...except product / pattern listing grids, which look better
	   two-up on phones so more items are visible per screen.
	   (Home, Shop, Patterns, Free Patterns.) */
	#brxe-hmgrd,
	#brxe-hggrd,
	#brxe-pggrd,
	#brxe-fggrd,
	#brxe-ctgrd,
	#brxe-fpgrd,
	#brxe-frgrd {
		grid-template-columns: 1fr 1fr !important;
		gap: 14px !important;
	}

	/* Hero call-to-action buttons: give the stacked buttons room to breathe */
	#brxe-hrbtn { gap: 16px !important; }

	/* ---- Card pills / badges on the 2-up mobile cards ----
	   All pills across the site (products, patterns, categories) are
	   normalised to one small size. Status / level tags hug the top-left;
	   price and any secondary tag sit bottom-right so nothing collides on
	   the narrow cards. Nested label / price text is forced to match too,
	   because some badges wrap their label in a child element that keeps
	   its own desktop font size. */
	/* Top-left: status badges (bd / bd1 / bd2) + pattern difficulty pills
	   (lvli / lvlb) + category tags. Substring selectors catch every
	   conditional variant; note "brxe-XXbd" never matches the "brxe-XXbody"
	   content wrappers, so card text is untouched. */
	[class*="brxe-hmbd"],
	[class*="brxe-hgbd"],
	[class*="brxe-pgbd"],
	[class*="brxe-fgbd"],
	[class*="brxe-fpbd"],
	[class*="brxe-frbd"],
	[class*="brxe-pglvl"],
	[class*="brxe-fplvl"],
	#brxe-ctbdg1, #brxe-ctbdg2, #brxe-ctbdg3, #brxe-ctbdg4 {
		top: 8px !important;
		left: 8px !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		height: auto !important;
		padding: 3px 9px !important;
		font-size: 11px !important;
		line-height: 1.45 !important;
		white-space: nowrap !important;
	}
	/* Bottom-right: price chips + the free-pattern difficulty pill */
	[class*="brxe-hmpr"],
	[class*="brxe-hgpr"],
	[class*="brxe-pgpr"],
	[class*="brxe-fppr"],
	[class*="brxe-frlvl"] {
		top: auto !important;
		bottom: 8px !important;
		right: 8px !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		padding: 3px 9px !important;
		font-size: 11px !important;
		line-height: 1.45 !important;
		white-space: nowrap !important;
	}
	/* Force any nested label / price text to the same 11px */
	[class*="brxe-hmbd"] *, [class*="brxe-hgbd"] *,
	[class*="brxe-pgbd"] *, [class*="brxe-fgbd"] *,
	[class*="brxe-fpbd"] *, [class*="brxe-frbd"] *,
	[class*="brxe-pglvl"] *, [class*="brxe-fplvl"] *, [class*="brxe-frlvl"] *,
	[class*="brxe-hmpr"] *, [class*="brxe-hgpr"] *,
	[class*="brxe-pgpr"] *, [class*="brxe-fppr"] * {
		font-size: 11px !important;
	}

	/* ---- "Have something special in mind" custom-order steps ----
	   Centre the whole block on mobile and stack each step vertically
	   (number badge above centred text). Hide the absolute dashed
	   timeline spine — it was drawn for the desktop left-aligned
	   layout and looks broken once the steps stack. */
	#brxe-culft { align-items: center !important; text-align: center !important; }
	#brxe-custpline { display: none !important; }
	#brxe-custp { gap: 24px !important; }
	#brxe-cus1, #brxe-cus2, #brxe-cus3, #brxe-cus4 {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 8px !important;
	}
	#brxe-cus1 *, #brxe-cus2 *, #brxe-cus3 *, #brxe-cus4 * {
		text-align: center !important;
		align-items: center !important;
	}

	/* Containers/sections never exceed the screen width */
	.brxe-container, .brxe-block, .brxe-div,
	section, .brxe-section { max-width: 100% !important; }

	/* ---- Header: logo hard-left, actions hard-right ----
	   The middle column holds the (hidden) menu; without explicit
	   placement the actions auto-flow into it and bunch up in the
	   centre-left. Pin logo to col 1 and actions to col 3. */
	#brxe-hdrctr {
		grid-template-columns: auto 1fr auto !important;
		column-gap: 10px !important;
		align-items: center !important;
		position: relative;
	}
	#brxe-hdrlgo {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}
	#brxe-hdract {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		gap: 6px !important;
	}

	/* Hide the inline desktop menu; the hamburger reveals it below. */
	#brxe-hdrnav { display: none !important; }

	/* When open, the nav becomes a full-width row spanning every header
	   column (accordion style) and drops below the logo/actions row.
	   Kept in normal flow deliberately — the header is a grid and an
	   absolutely-positioned grid item's containing block collapses to a
	   single cell, so overlay positioning is unreliable here. */
	body.cbn-menu-open #brxe-hdrnav {
		display: flex !important;
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		width: 100% !important;
		max-width: 100% !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		background: #fff;
		padding: 6px 0;
		margin-top: 10px;
		border-top: 1px solid rgba(0, 0, 0, .08);
		box-shadow: 0 14px 26px rgba(0, 0, 0, .12);
	}

	#brxe-hdrnav > a,
	#brxe-hdrnav .brxe-text-link {
		width: 100%;
		padding: 13px 22px !important;
		border-bottom: 1px solid rgba(0, 0, 0, .05);
	}
	#brxe-hdrnav > a:last-child { border-bottom: 0; }

	/* Hamburger button (injected by functions.php) */
	.cbn-mobile-toggle {
		display: inline-flex !important;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		padding: 9px;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: inherit;
	}
	.cbn-mobile-toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}
	body.cbn-menu-open .cbn-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.cbn-menu-open .cbn-mobile-toggle span:nth-child(2) { opacity: 0; }
	body.cbn-menu-open .cbn-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Hamburger is desktop-hidden; the full menu shows instead */
@media (min-width: 992px) {
	.cbn-mobile-toggle { display: none !important; }
}