/*
Theme Name:   Mini Master (Divi Child)
Theme URI:    https://minimastertrading.com
Description:  Child theme of Divi for Mini Master General Trading L.L.C. Layout and styling are built with Divi element settings and the Theme Builder; this stylesheet is intentionally kept near-empty.
Author:       Mini Master
Template:     Divi
Version:      1.0.0
Text Domain:  divi-child
*/

/* ---------------------------------------------------------------
   Everything on this site is styled with Divi element settings.
   Two exceptions live here, because Divi has no element setting
   for either: the brand marquee, and the hero's eyebrow + button
   pair (Divi's slider renders title -> content -> one button, so
   the pieces have to be re-ordered and the second button drawn).
   --------------------------------------------------------------- */

/* --- Top bar ----------------------------------------------------
   Divi columns are fixed fractions; the design groups address +
   phone at natural width and pushes the email to the far edge.
   ---------------------------------------------------------------- */

@media (min-width: 981px) {
	#mm-topbar .et_pb_row { display: flex; align-items: center; }
	#mm-topbar .et_pb_column { width: auto; margin: 0 0 0 30px; }
	#mm-topbar .et_pb_column:first-child { margin-left: 0; }
	#mm-topbar .et_pb_column:last-child { margin-left: auto; }
}

/* Divi gives a blurb icon a fixed 32px cell plus 15px of padding on the text
   cell. The design sets the icon beside its text with a single 8px gap. */
#mm-topbar .et_pb_main_blurb_image,
#mm-footer .et_pb_main_blurb_image {
	width: 1%;
	padding-right: 8px;
}

#mm-topbar .et_pb_blurb_container,
#mm-footer .et_pb_blurb_container {
	padding-left: 0;
}

/* Divi top-aligns the icon cell, which leaves a 15px icon sitting ~2px above
   the centre of its line. Every top-bar item is one line, so centring both
   cells lines the icon up with its text exactly. */
#mm-topbar .et_pb_main_blurb_image,
#mm-topbar .et_pb_blurb_container {
	vertical-align: middle;
}

/* --- Header -----------------------------------------------------
   Divi stacks columns below 981px; the header wants logo left and
   the menu toggle right on one line.
   ---------------------------------------------------------------- */

@media (max-width: 980px) {
	#mm-header .et_pb_row { display: flex; align-items: center; }
	#mm-header .et_pb_column { width: auto; margin: 0; }
	#mm-header .et_pb_column:nth-child(2) { margin-left: auto; }
	#mm-header .et_pb_column:nth-child(3) { display: none; }

	/* The dropdown is absolute against the nearest positioned ancestor, which
	   here is a column only as wide as the toggle. Making the menu and column
	   static hands it to the header row, so it spans the full width. */
	#mm-header .et_pb_menu,
	#mm-header .et_pb_menu_inner_container,
	#mm-header .et_pb_row > .et_pb_column { position: static; }
	#mm-header .et_pb_row { position: relative; }
	#mm-header .et_mobile_menu { left: 0; right: 0; width: auto; }

	/* Phone and email share one row instead of stacking. */
	#mm-topbar .et_pb_row { display: flex; align-items: center; gap: 16px; }
	#mm-topbar .et_pb_column { width: auto; margin: 0; }
	#mm-topbar .et_pb_column:last-child { margin-left: auto; }

	/* Cards stack, so the vertical dividers have nothing to divide. */
	#categories .et_pb_row .et_pb_column { border-right-width: 0; }
}

/* The address is off on phone; drop its now-empty column too. */
@media (max-width: 767px) {
	#mm-topbar .et_pb_column:first-child { display: none; }
}

/* --- Hero banner ------------------------------------------------ */

/* Line the hero text up with the 1300px content grid. */
#top .et_pb_container {
	width: 100%;
	max-width: 1300px;
	padding: 0 40px;
}

/* Slider dots: gold rings like the design, stacked bottom-right on
   desktop and left as Divi's centred horizontal row on mobile. */
#top .et-pb-controllers a {
	width: 11px;
	height: 11px;
	border: 1px solid #e3c07a;
	background-color: transparent;
	border-radius: 50%;
}

#top .et-pb-controllers a.et-pb-active-control {
	background-color: #c0912f;
}

@media (min-width: 768px) {
	#top .et-pb-controllers {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		width: auto;
		left: auto;
		/* Sits on the 1300px content grid, like the hero text above it.
		   Bottom offset clears the stats bar that overlaps the slider. */
		right: max(40px, calc((100% - 1300px) / 2 + 40px));
		bottom: 132px;
	}

	#top .et-pb-controllers a {
		margin: 0;
	}
}

.et_pb_slider .et_pb_slide_description {
	display: flex;
	flex-direction: column;
}

/* Lets the eyebrow / lead / buttons be ordered against the title. */
.et_pb_slider .et_pb_slide_content {
	display: contents;
}

.mm-hero__eyebrow { order: 1; }
.et_pb_slider .et_pb_slide_title { order: 2; max-width: 820px; }
.mm-hero__lead { order: 3; max-width: 660px; }
.mm-hero__cta { order: 4; }

.mm-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #e3c07a;
}

.mm-hero__eyebrow::before {
	content: "";
	flex: none;
	width: 52px;
	height: 2px;
	background: #c0912f;
}

.mm-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 38px;
}

.mm-hero__cta .mm-btn {
	padding: 19px 34px;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	transition: background-color .3s ease, color .3s ease;
}

.mm-hero__cta .mm-btn--gold { background: #c0912f; }
.mm-hero__cta .mm-btn--gold:hover { background: #fff; color: #0f2b54; }
.mm-hero__cta .mm-btn--ghost { border: 1px solid rgba(255, 255, 255, 0.45); }
.mm-hero__cta .mm-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 767px) {
	#top .et_pb_container { padding: 0 24px; }
	.mm-hero__eyebrow { display: block; font-size: 11px; letter-spacing: 0.16em; }
	.mm-hero__eyebrow::before { display: none; }
	.mm-hero__cta .mm-btn { padding: 16px 26px; font-size: 12px; }
}

/* --- Bullet markers ---------------------------------------------
   Divi puts the marker at the top of the line box, which leaves it
   sitting above the cap height. These offsets are the design's.
   ---------------------------------------------------------------- */

#about .et_pb_blurb .et_pb_main_blurb_image {
	padding-top: 9px;
}

#retail .et_pb_blurb .et_pb_main_blurb_image {
	padding-top: 8px;
}

/* --- Category cards ---------------------------------------------
   Divi emits hover styles for modules but not for columns, and the
   card hover in the design covers the whole cell.
   ---------------------------------------------------------------- */

#categories .et_pb_row .et_pb_column {
	transition: background-color .3s ease, box-shadow .3s ease;
}

#categories .et_pb_row .et_pb_column:hover {
	background-color: #123a6b;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* --- Product / figure grids -------------------------------------
   Divi's gutter scale steps 0 -> 36px -> 71px; the design uses 18px.
   ---------------------------------------------------------------- */

@media (min-width: 981px) {
	.mm-grid.et_pb_row {
		display: flex;
		gap: 18px;
	}

	.mm-grid.et_pb_row > .et_pb_column {
		width: auto;
		flex: 1 1 0;
		margin: 0;
	}
}

/* Caption hugs its text and sits on the bottom edge of the photo. */
.mm-figcap.et_pb_text {
	width: -moz-fit-content;
	width: fit-content;
}

/* --- Brand marquee ---------------------------------------------- */

.et_pb_row.mm-marquee {
	overflow: hidden;
	/* Softens the clipped logos at each end of the boxed strip. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

@media (max-width: 767px) {
	.et_pb_row.mm-marquee {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	}
}

.et_pb_row.mm-marquee .et_pb_column.mm-marquee__track {
	display: flex;
	width: max-content;
	max-width: none;
	animation: mm-marquee-left 42s linear infinite;
}

.et_pb_row.mm-marquee--reverse .et_pb_column.mm-marquee__track {
	animation-name: mm-marquee-right;
}

.mm-marquee__track .et_pb_image {
	flex: 0 0 190px;
	margin: 0 16px 0 0;
}

.mm-marquee__track .et_pb_image .et_pb_image_wrap,
.mm-marquee__track .et_pb_image img {
	display: block;
	width: 100%;
	height: 68px;
	object-fit: contain;
}

@keyframes mm-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes mm-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_row.mm-marquee .et_pb_column.mm-marquee__track { animation: none; }
}