/*
Theme Name:        School Storefronts Theme
Theme URI:         https://automatedintelligentsolutions.com/plugins/school-storefronts
Description:       Hello Elementor child theme carrying the School Storefronts demo design system: clean card-based layout, school-color aware buttons and accents, and styled WooCommerce grids. Pairs with the School Storefronts plugin — every element keyed to var(--ssf-primary)/var(--ssf-secondary) recolors itself per school automatically.
Author:            Automated Intelligent Solutions, Inc.
Author URI:        https://automatedintelligentsolutions.com
Template:          hello-elementor
Version:           1.0.0
Requires at least: 6.2
Tested up to:      6.8
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       school-storefronts-theme
*/

/* =====================================================================
   Design tokens — the demo page's system. School pages override the two
   brand vars via the School Storefronts plugin; these are the fallbacks.
===================================================================== */
:root {
	--ssf-ink: #1a1d24;
	--ssf-muted: #5c6270;
	--ssf-line: #e4e7ec;
	--ssf-bg: #f6f7f9;
	--ssf-card: #ffffff;
	--ssf-radius: 14px;
	/* --ssf-primary / --ssf-secondary come from the plugin per school. */
}

/* =====================================================================
   Base
===================================================================== */
body {
	font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	background: var(--ssf-bg);
	color: var(--ssf-ink);
	line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	color: var(--ssf-ink);
	line-height: 1.25;
}
a {
	color: var(--ssf-primary, #1f4e8c);
}

/* =====================================================================
   Hero helper — add the class "ssf-hero" to any Elementor section or
   container to get the demo's gradient hero in the current school's color.
===================================================================== */
.ssf-hero {
	background: linear-gradient(120deg, color-mix(in srgb, var(--ssf-primary, #1f4e8c) 78%, #000) 0%, var(--ssf-primary, #1f4e8c) 55%, color-mix(in srgb, var(--ssf-primary, #1f4e8c) 72%, #fff) 100%);
	color: #fff;
	border-radius: var(--ssf-radius);
}
.ssf-hero h1, .ssf-hero h2, .ssf-hero h3, .ssf-hero p {
	color: #fff;
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.ssf-hero {
		background: var(--ssf-primary, #1f4e8c);
	}
}

/* Accent stripe helper — thin secondary-color bar (demo's header stripe). */
.ssf-stripe {
	height: 10px;
	background: var(--ssf-secondary, #f2b632);
	border-radius: 0 0 var(--ssf-radius) var(--ssf-radius);
}

/* =====================================================================
   Buttons — Woo + Elementor + plugin, all in school primary
===================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link,
.elementor-button,
button[type="submit"] {
	background-color: var(--ssf-primary, #1f4e8c);
	color: #fff;
	border: none;
	border-radius: 9px;
	font-weight: 600;
	padding: 10px 18px;
	transition: filter 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
button[type="submit"]:hover {
	background-color: var(--ssf-primary, #1f4e8c);
	color: #fff;
	filter: brightness(1.12);
}

/* =====================================================================
   WooCommerce product grid — the demo's card look
===================================================================== */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--ssf-card);
	border: 1px solid var(--ssf-line);
	border-radius: var(--ssf-radius);
	overflow: hidden;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	padding-bottom: 14px;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(20, 30, 60, 0.12);
}
.woocommerce ul.products li.product a img,
.wc-block-grid__product img {
	margin-bottom: 10px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	padding: 0 14px;
	color: var(--ssf-ink);
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--ssf-primary, #1f4e8c);
	font-weight: 700;
	padding: 0 14px;
}
.woocommerce ul.products li.product .button {
	margin: 10px 14px 0;
}
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background: var(--ssf-secondary, #f2b632);
	color: var(--ssf-ink);
	font-weight: 700;
	border-radius: 20px;
	padding: 4px 12px;
	line-height: 1.6;
	min-height: 0;
	min-width: 0;
}
.woocommerce .star-rating span::before {
	color: var(--ssf-secondary, #f2b632);
}

/* Stock states (matches demo's ok / low / out colors) */
.woocommerce p.stock.in-stock {
	color: #1e7e4f;
	font-weight: 600;
}
.woocommerce p.stock.out-of-stock {
	color: #a6192e;
	font-weight: 600;
}

/* =====================================================================
   Single product & notices
===================================================================== */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ssf-primary, #1f4e8c);
	font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--ssf-primary, #1f4e8c);
}
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--ssf-primary, #1f4e8c);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ssf-primary, #1f4e8c);
}

/* =====================================================================
   Forms — demo input style
===================================================================== */
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	border: 1px solid #d5d9e0;
	border-radius: 9px;
	padding: 10px 14px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--ssf-ink);
}
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--ssf-primary, #1f4e8c);
	outline-offset: 1px;
}

/* =====================================================================
   Cart / checkout tables
===================================================================== */
.woocommerce table.shop_table {
	border: 1px solid var(--ssf-line);
	border-radius: var(--ssf-radius);
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background: #eef1f6;
	color: var(--ssf-muted);
	text-transform: uppercase;
	font-size: 11.5px;
	letter-spacing: 0.5px;
}

/* =====================================================================
   Generic card helper — add "ssf-card" to any Elementor container
===================================================================== */
.ssf-card {
	background: var(--ssf-card);
	border: 1px solid var(--ssf-line);
	border-radius: var(--ssf-radius);
	padding: 18px;
}

/* Pills (demo's mascot chip) */
.ssf-pill-generic {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 12px;
	border-radius: 20px;
	background: #eef1f6;
	color: var(--ssf-primary, #1f4e8c);
}