/*
Theme Name: Petal House
Theme URI: https://github.com/itsdiea/Petal-House
Author: Petal House
Description: Playful bilingual (English / Arabic) WooCommerce block theme for Petal House | بيت البتلة, a balloon-bouquet boutique in Qatar. Sky hero, blush product cards, rounded page frame, full RTL support.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petal-house
Tags: e-commerce, block-patterns, full-site-editing, rtl-language-support, translation-ready, wide-blocks
WC requires at least: 9.0
*/

/* ------------------------------------------------------------
   1. Arabic: swap font presets when the page language is Arabic
   ------------------------------------------------------------ */
html[lang|="ar"] body,
body.rtl {
	--wp--preset--font-family--display: var(--wp--preset--font-family--display-ar);
	--wp--preset--font-family--body: var(--wp--preset--font-family--body-ar);
	line-height: 1.7;
}
html[lang|="ar"] :is(h1, h2, h3, h4, h5, h6, .wp-block-site-title, .ph-hero-word),
body.rtl :is(h1, h2, h3, h4, h5, h6, .wp-block-site-title, .ph-hero-word) {
	letter-spacing: 0 !important; /* tracking breaks Arabic joins */
}
/* The Arabic wordmark is shorter: set it larger so the bouquet doesn't hide it */
body.rtl .ph-hero-word { font-size: clamp(4rem, 15vw, 13rem) !important; }

/* ------------------------------------------------------------
   2. Page frame: white site on a pink ground (from the reference)
   ------------------------------------------------------------ */
body {
	background: var(--wp--preset--color--page);
}
.wp-site-blocks {
	background: var(--wp--preset--color--white);
	margin-block: clamp(8px, 2vw, 24px);
	margin-inline: max(clamp(8px, 2vw, 24px), (100% - 1440px) / 2);
	border-radius: clamp(18px, 2.5vw, 28px);
	overflow: clip;
	min-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > main { flex: 1; }
@media (max-width: 600px) {
	.wp-site-blocks { margin: 8px; min-height: calc(100vh - 16px); }
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--sky-deep);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. Header: floating white pill
   ------------------------------------------------------------ */
.ph-header {
	position: relative;
	z-index: 20;
}
.ph-nav-pill {
	background: var(--wp--preset--color--white);
	border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--float);
	padding: 8px 12px !important;
}
.ph-nav-pill .wp-block-social-links {
	gap: 6px !important;
}
.ph-nav-pill .wp-block-social-links .wp-social-link {
	background: var(--wp--preset--color--pink) !important;
	color: var(--wp--preset--color--white) !important;
}
.ph-nav-pill .wp-block-social-links .wp-social-link-whatsapp {
	background: #25D366 !important;
}
.ph-brand {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ph-brand img { width: 30px; height: 30px; }
.ph-lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.ph-lang-switch a {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 3px 9px;
}
.ph-lang-switch .current-lang a { background: var(--wp--preset--color--blush); }

/* Header sitting on top of the homepage hero */
.ph-hero .ph-header { padding: 0 !important; }

/* ------------------------------------------------------------
   4. Homepage hero: wordmark with the bouquet in front of it
   ------------------------------------------------------------ */
.ph-hero {
	border-radius: clamp(14px, 2vw, 20px);
	overflow: hidden;
	min-height: min(760px, 92vh) !important;
}
.ph-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	min-height: inherit;
	gap: 0;
}
.ph-hero-stage {
	position: relative;
	flex: 1;
	display: grid;
	place-items: center;
	min-height: 360px;
}
.ph-hero > .wp-block-cover__inner-container > * { min-width: 0; }
.ph-hero-word {
	font-size: clamp(2.5rem, 8.4vw, 8rem) !important;
	position: relative;
	z-index: 1;
	margin: 0 !important;
	color: #fff;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	line-height: 1 !important;
	white-space: nowrap;
	text-shadow: 0 2px 24px rgba(60, 100, 150, 0.18);
}
.ph-hero-bouquet {
	position: absolute;
	z-index: 2;
	inset-inline-start: 50%;
	top: 50%;
	width: min(34%, 300px);
	margin: 0 !important;
	transform: translate(-50%, -44%);
	filter: drop-shadow(0 16px 24px rgba(60, 90, 130, 0.25));
	pointer-events: none;
}
.rtl .ph-hero-bouquet { transform: translate(50%, -44%); }
.ph-hero-bouquet img { width: 100%; height: auto; }
.ph-float {
	position: absolute;
	z-index: 2;
	margin: 0 !important;
	pointer-events: none;
	filter: drop-shadow(0 8px 12px rgba(120, 40, 80, 0.18));
}
.ph-float img { width: 100%; height: auto; }
.ph-float--a { width: clamp(44px, 7vw, 86px); inset-inline-end: 6%; top: 4%; }
.ph-float--b { width: clamp(40px, 6vw, 72px); inset-inline-start: 7%; top: 52%; }
.ph-float--c { width: clamp(28px, 4vw, 48px); inset-inline-end: 22%; bottom: 4%; }
@media (prefers-reduced-motion: no-preference) {
	.ph-float { animation: ph-bob 6s ease-in-out infinite; }
	.ph-float--b { animation-delay: -2s; }
	.ph-float--c { animation-delay: -4s; }
	@keyframes ph-bob { 50% { translate: 0 -10px; rotate: 8deg; } }
}
.ph-hero-foot {
	position: relative;
	z-index: 3;
}
.ph-hero-tagline {
	max-width: 34ch;
	background: rgba(255, 255, 255, 0.72);
	border-radius: 12px;
	padding: 10px 14px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ph-hero-tagline p { margin: 0; font-size: 0.875rem; line-height: 1.45; }
@media (max-width: 781px) {
	.ph-hero { min-height: 620px !important; }
	/* Phones: wordmark on one line on top, bouquet overlapping just below it */
	.ph-hero-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
	.ph-hero-word { font-size: 7.8vw !important; margin-top: 12px !important; }
	body.rtl .ph-hero-word { font-size: 17vw !important; }
	.ph-hero-bouquet,
	.rtl .ph-hero-bouquet {
		position: relative;
		inset: auto;
		transform: none;
		width: min(64%, 250px);
		margin-top: -0.35em !important;
	}
	.ph-hero-foot .wp-block-buttons { width: 100%; }
	.ph-hero-foot .wp-block-button { flex: 1 1 100%; }
	.ph-hero-foot .wp-block-button__link { width: 100%; }
}

/* ------------------------------------------------------------
   5. Buttons: secondary (white) style
   ------------------------------------------------------------ */
.wp-block-button.is-style-ph-secondary .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: 1px solid #EAD5DE;
}
.wp-block-button.is-style-ph-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--blush);
}

/* ------------------------------------------------------------
   6. Product cards: cutout on blush, name + price centered
   ------------------------------------------------------------ */
.ph-products .wc-block-product,
.ph-products li.wp-block-post {
	text-align: center;
}
.ph-products :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) {
	background: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	margin-bottom: 10px;
}
.ph-products :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) img {
	aspect-ratio: 4 / 5 !important;
	object-fit: contain !important;
	padding: 8%;
	transition: transform 0.35s ease;
}
.ph-products a:hover img { transform: scale(1.04); }
.ph-products .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.9375rem !important;
	margin: 0 0 2px !important;
}
.ph-products .wc-block-components-product-price,
.ph-products .wp-block-woocommerce-product-price {
	font-variant-numeric: tabular-nums;
}
.ph-products .wc-block-components-product-sale-badge,
.ph-products .wc-block-components-product-badge {
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	border: 0;
	font-weight: 700;
}

/* Single product gallery on blush */
.ph-single-gallery .woocommerce-product-gallery__image,
.ph-single-gallery .wc-block-product-gallery-large-image,
.ph-single-gallery .wp-block-woocommerce-product-image-gallery {
	background: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}
.ph-single-gallery img { object-fit: contain; }

/* ------------------------------------------------------------
   7. Cards, chips, steps
   ------------------------------------------------------------ */
.ph-card {
	background: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--card);
}
.ph-occasion {
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.ph-occasion:hover { transform: translateY(-3px); }
.ph-occasion img { width: 64px; height: 64px; margin-inline: auto; }
.ph-occasion a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ph-occasion a::after { content: ""; position: absolute; inset: 0; }
.ph-occasion { position: relative; }
.ph-step-num {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--pink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	margin: 0 !important;
}
.ph-banner { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.ph-banner .ph-banner-img img { max-height: 360px; width: auto; margin-inline: auto; }

/* ------------------------------------------------------------
   8. WhatsApp floating button (mobile-first ordering)
   ------------------------------------------------------------ */
.ph-wa-float {
	position: fixed;
	z-index: 50;
	inset-inline-end: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	margin: 0 !important;
}
.ph-wa-float .wp-block-button__link {
	background: #25D366 !important;
	border-color: #25D366 !important;
	color: #fff !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

/* ------------------------------------------------------------
   9. WooCommerce: forms and notices in brand colors
   ------------------------------------------------------------ */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout select {
	border-radius: 10px !important;
	border-color: #EAD5DE !important;
}
.wc-block-components-button:not(.is-link) {
	border-radius: 6px !important;
	font-weight: 600 !important;
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--wp--preset--color--pink) !important;
	color: var(--wp--preset--color--ink) !important;
}
.wc-block-components-notice-banner { border-radius: 12px; }
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--pink) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Footer */
.ph-footer a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ph-footer a:hover { text-decoration: underline; }
.ph-footer ul.wp-block-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

@media (max-width: 1024px) {
	.ph-nav-pill .ph-socials { display: none; }
}
@media (max-width: 600px) {
	.ph-nav-pill .wp-block-site-title { font-size: 0.875rem; }
}

/* ------------------------------------------------------------
   10. Product page: Add to cart (white) + Buy now (pink)
   ------------------------------------------------------------ */
.single-product form.cart:not(.variations_form),
.single-product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}
.single-product form.cart .quantity input.qty {
	height: 100%;
	min-height: 46px;
	width: 72px;
	border: 1px solid #EAD5DE;
	border-radius: 6px;
	text-align: center;
	font: inherit;
}
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 140px;
	min-height: 46px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}
.single-product form.cart .single_add_to_cart_button:not(.ph-buy-now) {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: 1px solid #EAD5DE;
}
.single-product form.cart .single_add_to_cart_button:not(.ph-buy-now):hover {
	background: var(--wp--preset--color--blush);
}
.single-product form.cart .ph-buy-now {
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--pink);
}
.single-product form.cart .ph-buy-now:hover {
	background: #EE78A8;
	border-color: #EE78A8;
}
.single-product form.cart .single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.single-product form.cart .quantity,
.single-product form.cart .single_add_to_cart_button {
	margin: 0 !important;
}

/* E-gift promo on the homepage */
.ph-egift-promo__img img { max-width: 180px; margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
	.ph-egift-promo__img img { animation: ph-bob 6s ease-in-out infinite; }
}