/*
	Theme Name: Baloch Hotel Child
	Theme URI: https://balochhotel.com/
	Description: Child theme for Hello Elementor. Holds all Baloch Hotel design tokens and page-level CSS so that customisations survive parent-theme updates. Product-page styling lives in assets/css/product.css and is loaded only where it is needed.
	Author: Baloch Hotel
	Template: hello-elementor
	Version: 1.0.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: baloch-hotel-child
*/

/* ============================================================
   BRAND TOKENS
   Single source of truth. Change a value here and it
   propagates everywhere — do not hard-code these colours
   anywhere else in the child theme.
   ============================================================ */

:root {
	/* --- Brand palette (matches Elementor Global Colours, Kit 5) --- */
	--bh-red:        #9F1B1D;  /* Primary   — main CTA, headings accent */
	--bh-red-dark:   #7E1517;  /* Primary hover/active                  */
	--bh-gold:       #E8B340;  /* Secondary — badges, rating stars      */
	--bh-gold-dark:  #C9942A;  /* Secondary hover                       */
	--bh-dark:       #3E2A1D;  /* Text      — body copy, dark buttons   */
	--bh-dark-hover: #2A1C13;  /* Dark button hover                     */
	--bh-green:      #007E5C;  /* Accent    — WhatsApp                  */
	--bh-green-dark: #00654A;  /* WhatsApp hover                        */
	--bh-cream:      #FFFCEF;  /* Page background (matches Elementor Kit) */
	--bh-white:      #FFFFFF;

	/* Derived tints — kept as tokens so opacity is consistent */
	--bh-line:       rgba(62, 42, 29, 0.12); /* hairline borders */
	--bh-line-soft:  rgba(62, 42, 29, 0.06);
	--bh-muted:      rgba(62, 42, 29, 0.62); /* secondary text   */

	/* --- Typography ---
	   Reference (aljannatsweets.com) uses two commercially licensed
	   faces: "Miller Banner" (display serif) and "Founders Grotesk"
	   (body/UI grotesque). Those files cannot be reused legally, so
	   these variables hold the licence-clear equivalents.
	   To swap in a licensed face later, change ONLY these two lines. */
	--bh-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--bh-font-body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

	/* --- Type scale (mobile-first, mirrors the reference exactly) --- */
	--bh-h1-size:   32px;
	--bh-h1-lh:     1.1;
	--bh-h1-ls:     -0.16px;
	--bh-h1-weight: 400;

	--bh-body-size: 15px;
	--bh-body-lh:   24px;
	--bh-body-ls:   0.3px;

	/* Primary CTA tier — the reference's "Add to cart" / "Buy it now".
	   Measured: 16px / 25.6px, w600, ls 0.32px, uppercase, 16px 32px
	   padding, 30px radius => 58px tall. */
	--bh-btn-size:   16px;
	--bh-btn-weight: 600;
	--bh-btn-lh:     25.6px;
	--bh-btn-ls:     0.32px;

	/* Secondary tier — the reference's section buttons ("Order now",
	   "Contact us", "Shop now"). Measured: 15px / 24px, w700, ls 0.3px,
	   sentence case, same padding and radius => 56px tall.
	   Height comes from padding + line-height alone, so no rule needs a
	   min-height to hold these open (which is what left earlier labels
	   sitting against the top edge). */
	--bh-btn-sec-size:   15px;
	--bh-btn-sec-weight: 700;
	--bh-btn-sec-lh:     24px;
	--bh-btn-sec-ls:     0.3px;

	/* --- Control metrics (measured from the reference) --- */
	--bh-btn-height: 58px;
	--bh-btn-pad:    16px 32px;
	--bh-btn-radius: 30px;
	--bh-qty-height: 48px;
	--bh-gap:        16px;

	/* Gift pictogram used by the Corporate Gifting block. Held as a
	   token so it is applied as a CSS mask and inherits currentColor,
	   rather than being pasted into Elementor content as raw markup. */
	--bh-gift-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='12.5' rx='3'/%3E%3Cpath d='M3 13.5h18M12 8.5V21'/%3E%3Cpath d='M12 8.5S10.3 3.2 7.9 3.2a2.4 2.4 0 0 0 0 5.3H12Z'/%3E%3Cpath d='M12 8.5s1.7-5.3 4.1-5.3a2.4 2.4 0 0 1 0 5.3H12Z'/%3E%3C/svg%3E");
}

/* The page ground. `body` already carries this from the Elementor Kit,
   but the root element does not — so the overscroll/rubber-band area
   above and below the page rendered white on touch devices, and any
   route that does not load a Kit stylesheet fell back to white too.
   `html` is (0,0,1); nothing else on the site sets it. */
html {
	background-color: var(--bh-cream);
}

/* Elementor's Kit already paints `body` cream on every route that loads
   it. This is the safety net for the ones that do not (and it loses to
   the Kit harmlessly where both apply, since both are (0,0,1) and the
   Kit's stylesheet is enqueued after this one). */
body {
	background-color: var(--bh-cream);
}

/* WordPress gives `.alignwide` blocks a fixed -80px margin on each side
   so they can break out of a narrow prose column. The cart and checkout
   are alignwide blocks, and below about 1024px there is nothing to break
   out of — the block kept its parent's width and simply slid 80px off
   the left edge, cutting the cart off screen (only `overflow-x: clip`
   stopped the page scrolling sideways as well).
   Desktop keeps the intended break-out. */
@media (max-width: 1024px) {
	.site-main .alignwide,
	.page-content .alignwide,
	.site-main .alignfull,
	.page-content .alignfull {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}

/* This stylesheet holds the design tokens plus the handful of global
   safety nets above — the page ground and the alignwide guard, both of
   which have to apply on every route including the WooCommerce block
   pages. Everything else is component CSS, split into assets/css/*.css
   and enqueued conditionally from functions.php — see that file for the
   map. Do not grow this file with component styling. */