/*
Theme Name: IBNG Blocks
Theme URI: https://ittybittyniftygifties.com
Author: gibson•works, llc
Author URI: https://bekee.com
Description: Full site editing block theme for Itty Bitty Nifty Gifties. Replaces the Astra + Elementor Pro setup. Brand tokens (Quicksand + Marsh Mallow Pop Heart, the teal/coral/candy palette) live in theme.json; header, footer, and all templates are edited in the Site Editor.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ibng-blocks
Tags: full-site-editing, block-templates, e-commerce
*/

/* =========================================================
   IBNG custom styles (Gibsonworks)
   ========================================================= */

/* Header: drop shadow so it reads as a layer above the cream body */
header.wp-block-group {
	box-shadow: 0 3px 16px rgba(25, 80, 112, 0.12);
	position: relative;
	z-index: 5;
}

/* Trim the big gap between header and the first content */
main.wp-block-group {
	padding-top: var(--wp--preset--spacing--40);
}

/* Separator with a heart sitting on the rule (echoes the bekee.com squiggle).
   SVG carries a cream disc so the heart masks the line behind it.
   To use the actual Marsh Mallow heart glyph instead of this SVG, swap the
   background-image on ::after for a text glyph; see note in CONVERSION-PLAN. */
.wp-block-separator {
	border: 0 !important;
	height: 48px;
	opacity: 1;
	position: relative;
	background: none;
	margin-block: var(--wp--preset--spacing--30);
}
.wp-block-separator::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(25, 80, 112, 0.30) 15%, rgba(25, 80, 112, 0.30) 85%, transparent);
}
.wp-block-separator::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23FFFDF9'/%3E%3Cpath d='M24 33s-9.5-5.7-9.5-12.2c0-3.2 2.4-5.3 5.2-5.3 2 0 3.6 1.2 4.3 2.9 0.7-1.7 2.3-2.9 4.3-2.9 2.8 0 5.2 2.1 5.2 5.3C33.5 27.3 24 33 24 33z' fill='%23F58663'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Footer wordmark: lowercase, on one line (no wrap) */
footer .wp-block-site-title,
footer .wp-block-site-title a {
	text-transform: lowercase;
	white-space: nowrap;
}

/* CTA buttons: white on teal (~7:1, AA pass). Hover darkens the teal. */
.wp-block-button__link,
.wp-element-button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
a.add_to_cart_button,
.products .button {
	background-color: #195070 !important;
	color: #FFFDF9 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
a.add_to_cart_button:hover,
.products .button:hover {
	background-color: #123f59 !important;
	color: #FFFDF9 !important;
}

/* Hero logo a touch smaller */
main img.wp-image-1881 {
	width: 240px;
	height: auto;
}

/* Header account + cart icons, grouped flush right */
.ibng-account-cart {
	gap: 0.9rem;
	align-items: center;
}
.ibng-account {
	display: inline-flex;
	line-height: 0;
}
.ibng-account svg {
	width: 24px;
	height: 24px;
}
.ibng-account-cart .wc-block-mini-cart__button {
	color: #195070;
}

/* Pre-footer "Itty Bitty Tidbits" Mailchimp signup band */
.ibng-tidbits h2 {
	font-size: 2.4rem;
	margin-bottom: 0.25em;
}
.ibng-tidbits .ibng-tidbits-fields {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 480px;
	margin: 1.25rem auto 0;
}
.ibng-tidbits input[type="email"] {
	flex: 1 1 240px;
	padding: 0.7em 1.1em;
	border-radius: 999px;
	border: 2px solid #195070;
	background: #FFFDF9;
	color: #23201d;
	font: inherit;
}
.ibng-tidbits input[type="submit"] {
	background: #195070;
	color: #FFFDF9;
	border: 0;
	border-radius: 999px;
	padding: 0.7em 1.6em;
	font-weight: 700;
	cursor: pointer;
}
.ibng-tidbits input[type="submit"]:hover {
	background: #23201d;
}
.ibng-tidbits .mc4wp-response {
	text-align: center;
	margin-top: 0.75rem;
}

/* Trademark on the footer wordmark (the brand mark). ™ (filed, not yet registered). */
footer .wp-block-site-title a::after {
	content: "\2122";
	font-size: 0.42em;
	vertical-align: super;
	margin-left: 0.06em;
	text-transform: none;
}

/* FAQ "Open All" toggle: subtle outline button */
#faq-open-all {
	background: transparent;
	border: 2px solid #195070;
	color: #195070;
	border-radius: 999px;
	padding: 0.45em 1.3em;
	font-weight: 700;
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	margin-bottom: 1.25rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#faq-open-all:hover,
#faq-open-all:focus-visible {
	background: #195070;
	color: #FFFDF9;
}

/* Checkout: the .woocommerce block and .col2-set were hard-capped at 1000px and
   left-aligned, so the whole checkout sat narrow and off to the left. Force the
   checkout content to fill its (centered) container. */
.woocommerce-checkout .woocommerce {
	max-width: 1140px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.woocommerce-checkout .woocommerce .col2-set,
.woocommerce-checkout form.checkout,
.woocommerce-checkout #customer_details {
	width: 100% !important;
	max-width: 100% !important;
}