/* =========================================================================
   ManicSoup — Divi 5 child theme styles
   A developer-tools brand: precise, confident, technical. Built on the
   existing ManicSoup palette so it sits naturally on the current site.

   Sections:
     1. Design tokens (CSS variables)
     2. Typography touches
     3. Buttons
     4. Header / nav + cart icon
     5. Footer
     6. Provision storefront (shortcode output) styling
     7. Utilities + responsive + a11y
   ========================================================================= */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
	/* Brand palette (from the site's existing global colors). */
	--ms-violet:      #5f249f;
	--ms-violet-600:  #4a1c7d;
	--ms-violet-050:  #f3edfa;
	--ms-navy:        #0b2340;
	--ms-navy-700:    #081a30;
	--ms-gold:        #ffc62b;
	--ms-teal:        #008c95;
	--ms-ink:         #1c1726;   /* near-black with a violet cast */
	--ms-body:        #3a3550;
	--ms-muted:       #6b6680;
	--ms-line:        #e7e3ef;
	--ms-surface:     #ffffff;
	--ms-surface-2:   #faf8fd;

	/* Type. Oswald (display) + Montserrat (body) match the current site. */
	--ms-font-display: "Oswald", "Montserrat", system-ui, sans-serif;
	--ms-font-body:    "Montserrat", system-ui, -apple-system, sans-serif;

	/* Shape + motion. */
	--ms-radius:      12px;
	--ms-radius-sm:   8px;
	--ms-radius-pill: 999px;
	--ms-shadow:      0 10px 30px rgba(11, 35, 64, 0.10);
	--ms-shadow-sm:   0 2px 8px rgba(11, 35, 64, 0.08);
	--ms-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 2. TYPOGRAPHY --------------------------------------------------------- */
body {
	font-family: var(--ms-font-body);
	color: var(--ms-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ms-font-display);
	color: var(--ms-ink);
	letter-spacing: -0.01em;
}

/* A subtle eyebrow style usable via Divi's CSS class field. */
.ms-eyebrow {
	font-family: var(--ms-font-display);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ms-violet);
}

/* 3. BUTTONS ------------------------------------------------------------ */
/* Style ONLY the buttons our theme adds, plus an opt-in class, so we don't
   fight Divi's per-module button settings the user sets in the builder. */
.ms-btn,
.manicsoup-cart-link {
	font-family: var(--ms-font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	border-radius: var(--ms-radius-sm);
	transition: transform 0.15s var(--ms-ease), box-shadow 0.15s var(--ms-ease), background-color 0.15s var(--ms-ease);
}

.ms-btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	background: var(--ms-navy);
	color: #fff;
	box-shadow: var(--ms-shadow-sm);
}
.ms-btn:hover {
	background: var(--ms-violet);
	color: var(--ms-gold);
	transform: translateY(-1px);
	box-shadow: var(--ms-shadow);
}
.ms-btn--gold { background: var(--ms-gold); color: var(--ms-navy); }
.ms-btn--gold:hover { background: var(--ms-violet); color: #fff; }

/* 4. HEADER / NAV + CART ICON ------------------------------------------- */
/* The cart item appended to the primary menu by functions.php. */
.manicsoup-cart-item { display: flex; align-items: center; }

.manicsoup-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.7em;
	color: inherit;
}

/* Cart glyph drawn in pure CSS (no icon font dependency). */
.manicsoup-cart-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 14.6l.9-1.6h7.5c.8 0 1.4-.4 1.7-1.1l3-5.4-1.7-1-3 5.4H8.5L4.3 2H1v2h2l3.6 7.6-1.4 2.4c-.7 1.3.2 3 1.7 3h12v-2H7.4c-.1 0-.2-.1-.2-.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 14.6l.9-1.6h7.5c.8 0 1.4-.4 1.7-1.1l3-5.4-1.7-1-3 5.4H8.5L4.3 2H1v2h2l3.6 7.6-1.4 2.4c-.7 1.3.2 3 1.7 3h12v-2H7.4c-.1 0-.2-.1-.2-.2z'/%3E%3C/svg%3E");
}

.manicsoup-cart-count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-gold);
	color: var(--ms-navy);
	font-family: var(--ms-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.manicsoup-cart-count.is-empty { opacity: 0.55; }

/* 5. FOOTER ------------------------------------------------------------- */
#main-footer .ms-footer-brand {
	font-family: var(--ms-font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* 6. PROVISION STOREFRONT ----------------------------------------------- */
/* Styling for the [provision_*] shortcode output so the store pages look
   like the brand even before native Divi modules exist. Scoped to Provision's
   own wrapper classes so it never bleeds into Divi modules. */

.prov-store,
.prov-products,
.prov-product,
.prov-cart,
.prov-account {
	font-family: var(--ms-font-body);
	color: var(--ms-body);
}

/* Product grid → clean cards. */
.prov-products .prov-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.prov-products .prov-card {
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow-sm);
	overflow: hidden;
	transition: transform 0.18s var(--ms-ease), box-shadow 0.18s var(--ms-ease);
}
.prov-products .prov-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ms-shadow);
}
.prov-products .prov-card-body { padding: 20px; }
.prov-products .prov-card-title {
	font-family: var(--ms-font-display);
	font-size: 1.25rem;
	color: var(--ms-ink);
	margin: 0 0 6px;
}
.prov-products .prov-card-price {
	font-family: var(--ms-font-display);
	color: var(--ms-violet);
	font-weight: 600;
}

/* Pricing / compare table. */
.prov-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ms-surface);
	border-radius: var(--ms-radius);
	overflow: hidden;
	box-shadow: var(--ms-shadow-sm);
}
.prov-compare-table th,
.prov-compare-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--ms-line);
	text-align: left;
}
.prov-compare-table thead th {
	background: var(--ms-navy);
	color: #fff;
	font-family: var(--ms-font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}
.prov-compare-table .prov-yes { color: var(--ms-teal); font-weight: 700; }
.prov-compare-table .prov-no { color: var(--ms-muted); }
.prov-compare-price .prov-interval { color: var(--ms-muted); font-size: 0.7em; }

/* Cart + checkout + account: shared form polish. */
.prov-cart input, .prov-checkout input, .prov-account input,
.prov-cart select, .prov-checkout select {
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-sm);
	padding: 0.7em 0.9em;
	font-family: var(--ms-font-body);
}
.prov-cart-total, .prov-checkout-total {
	font-family: var(--ms-font-display);
	font-size: 1.2rem;
	color: var(--ms-ink);
}

/* Provision's primary action buttons → brand. */
.prov-btn, .prov-add-to-cart, .prov-checkout-btn {
	font-family: var(--ms-font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	background: var(--ms-navy);
	color: #fff;
	border: none;
	border-radius: var(--ms-radius-sm);
	padding: 0.85em 1.6em;
	cursor: pointer;
	transition: background-color 0.15s var(--ms-ease), transform 0.15s var(--ms-ease);
}
.prov-btn:hover, .prov-add-to-cart:hover, .prov-checkout-btn:hover {
	background: var(--ms-violet);
	color: var(--ms-gold);
	transform: translateY(-1px);
}

/* 7. UTILITIES + RESPONSIVE + A11Y -------------------------------------- */
.ms-container { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

/* Visible keyboard focus everywhere our theme adds interactive elements. */
.manicsoup-cart-link:focus-visible,
.ms-btn:focus-visible,
.prov-btn:focus-visible {
	outline: 3px solid var(--ms-violet);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.prov-products .prov-product-grid { grid-template-columns: 1fr; }
	.manicsoup-cart-link { padding: 0.4em 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}