/* ============================================================
   BALOCH HOTEL — HOMEPAGE
   ------------------------------------------------------------
   The homepage stays an Elementor page (145). This file only
   restyles it to match the agreed reference; it does not change
   the section order, which already mirrors the reference:

     hero → Shop Best Sellers → halwa selection panel →
     stats → Halwas → corporate gifting → heritage → FAQ

   Reference type scale, measured at 390px:
     section heading  32px / 35.2px  w400  ls -0.16px
     stat figure      36px / 36px    w600  ls -0.18px
     stat caption     20px / 26px    w400  ls -0.10px
     body             15px / 24px    ls 0.3px
     button           15px / 24px    w700 ls 0.3px, 16px 32px, r30px

   The page's own Elementor CSS set headings in Georgia at seven
   different sizes; the hard-coded serif families have since been
   stripped from the template itself, so these rules only have to
   set the scale.

   SELECTOR POLICY: widget-TYPE classes only, scoped to
   `.bh-home`. No `.elementor-element-<hash>` selectors.
   ============================================================ */



/* SPECIFICITY NOTE — read before editing selectors below.
   Elementor writes per-widget rules shaped like:
     .elementor-145 .elementor-element.elementor-element-<hash> .elementor-heading-title
   That is (0,4,0). A natural `.bh-home .elementor-widget-heading
   .elementor-heading-title` is only (0,3,0) and silently loses — the first
   pass of this file changed nothing on screen for exactly that reason.
   Adding `body` and `.elementor-element` brings these to (0,4,1), which wins
   without touching the `.elementor-element-<hash>` classes (those are
   regenerated on every template rebuild and must never be depended on). */

/* ------------------------------------------------------------
   1. TYPE SCALE
   ------------------------------------------------------------ */

/* `:not(.elementor-widget-theme-post-title)` matters: Elementor's post-title
   widget carries the `elementor-widget-heading` class too, so without this
   exclusion every product name in the card grid was picked up by the
   section-heading rule and rendered in the display serif. Product names
   belong in the body face. */
body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) .elementor-heading-title {
	font-family: var(--bh-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.16px;
	color: var(--bh-dark);
	text-wrap: balance;
}

/* Section headings — "Shop Best Sellers", "Halwas", "Faq". */
body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) h2.elementor-heading-title,
body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) h3.elementor-heading-title {
	font-size: 32px;
}

body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) h1.elementor-heading-title {
	font-size: 34px;
}

/* Body copy across the page. */
body.bh-home .elementor-element .elementor-widget-text-editor {
	font-family: var(--bh-font-body);
	font-size: var(--bh-body-size);
	line-height: var(--bh-body-lh);
	letter-spacing: var(--bh-body-ls);
	color: var(--bh-dark);
}

body.bh-home .elementor-element .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

@media (min-width: 1025px) {
	body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) h2.elementor-heading-title,
	body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) h3.elementor-heading-title {
		font-size: 42px;
		letter-spacing: -0.4px;
	}

	body.bh-home .elementor-element .elementor-widget-heading:not(.elementor-widget-theme-post-title) h1.elementor-heading-title {
		font-size: 48px;
		letter-spacing: -0.5px;
	}
}


/* ------------------------------------------------------------
   2. HERO (Elementor Slides)
   The reference anchors its hero copy to the lower third with a
   dark scrim, so white text stays legible over any photograph.
   ------------------------------------------------------------ */

/* Elementor lays `.swiper-slide-inner` out as a flex ROW: on that axis
   `justify-content` is horizontal and `align-items` is vertical. An
   earlier `justify-content: flex-end` here was meant to push the copy to
   the bottom of the slide and instead shoved it against the right edge —
   the heading measured 137→345px in a 375px slide.
   Switching the axis to `column` makes both intentions read correctly:
   flex-end is now "bottom" and center is now "horizontally centred".
   Horizontal/vertical position and text alignment are also set per slide
   in the template, so the Elementor panel stays truthful. */
.bh-home .elementor-widget-slides .swiper-slide-inner {
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 34px;
}

/* Desktop centres the block optically in the slide. On a phone the slide
   is only ~330px tall and the copy belongs low, over the darkest part of
   the scrim, so the bottom anchor stays there. */
@media (min-width: 1025px) {
	/* Symmetric block padding, or the 30px Elementor puts on the top edge
	   alone drags the "centred" block half of that below the true centre. */
	.bh-home .elementor-widget-slides .swiper-slide-inner {
		justify-content: center;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	/* Elementor gives the slide heading a 30px bottom margin, which is
	   spacing *between* it and the description — but on the last child it
	   would also count as height and push the whole block off centre. */
	.bh-home .elementor-widget-slides .elementor-slide-button {
		margin-bottom: 0;
	}
}

/* Elementor caps slide contents at 66% of the slide, which is only
   ~208px on a phone — too narrow for a three-word headline. */
@media (max-width: 767px) {
	.bh-home .elementor-widget-slides .swiper-slide-contents {
		max-width: 100%;
		width: 100%;
	}
}

/* Scrim: without it the headline sat on the lightest part of the
   halwa photograph and was effectively unreadable.
   The ::after needs a positioned host — Elementor leaves
   .swiper-slide-bg `static`, so an absolute child would escape it. */
.bh-home .elementor-widget-slides .swiper-slide-bg {
	position: relative;
}

.bh-home .elementor-widget-slides .swiper-slide-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(29, 23, 18, 0) 35%,
		rgba(29, 23, 18, 0.55) 100%
	);
	pointer-events: none;
}

body.bh-home .elementor-element .elementor-widget-slides .elementor-slide-heading {
	font-family: var(--bh-font-display);
	font-weight: 400;
	letter-spacing: -0.4px;
	line-height: 1.08;
	text-wrap: balance;
}

body.bh-home .elementor-element .elementor-widget-slides .elementor-slide-description {
	font-family: var(--bh-font-body);
	font-size: 14px;
	letter-spacing: 0.3px;
}

/* Hero CTA — white pill, as the reference uses over imagery. Geometry is
   the shared button spec from section 4. */
body.bh-home .elementor-element .elementor-widget-slides .elementor-slide-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--bh-btn-pad);
	border: 0;
	border-radius: var(--bh-btn-radius);
	background: var(--bh-white);
	color: var(--bh-dark);
	font-family: var(--bh-font-body);
	font-size: var(--bh-btn-sec-size);
	font-weight: var(--bh-btn-sec-weight);
	line-height: var(--bh-btn-sec-lh);
	letter-spacing: var(--bh-btn-sec-ls);
	text-transform: none;
	text-decoration: none;
}

body.bh-home .elementor-element .elementor-widget-slides .elementor-slide-button:hover {
	background: var(--bh-cream);
	color: var(--bh-red);
}

/* Carousel dots */
.bh-home .elementor-widget-slides .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.55);
	opacity: 1;
}

.bh-home .elementor-widget-slides .swiper-pagination-bullet-active {
	background: var(--bh-white);
	width: 22px;
	border-radius: 4px;
}


/* ------------------------------------------------------------
   3. SECTION RHYTHM
   Mobile spacing was inherited from desktop, which made the page
   over 10,000px tall on a phone.
   ------------------------------------------------------------ */

/* NOTE: heading alignment is deliberately NOT set here. Each heading
   widget carries its own `align` / `align_mobile` setting in Elementor,
   and forcing text-align from CSS overrode them — it pushed the centred
   "948,362+" stat to the left. Alignment is set per-widget in the
   template instead, so the Elementor panel stays truthful. */

/* Two top-level containers carry explicit horizontal margins in the
   template (`margin-left: 5px`, `margin: 0 10px`) while Elementor also
   sets their width to 100% of the parent. Margin sits outside the width,
   so their right edge landed 5-10px past the screen — invisible only
   because `overflow-x: clip` was hiding it.
   `width: auto` lets the box shrink to accommodate its own margins. */
body.bh-home .elementor > .e-con,
body.bh-home .elementor > .elementor-section {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	/* A floor, not the source of truth: every section also carries
	   `padding_mobile: 20px` on its left/right in the template, which is
	   the reference's gutter (20px each side => a 335px content column at
	   375px). This rule only guarantees that a section added later can
	   never touch the screen edge.
	   Sections are children of the .elementor wrapper, not of <body>. */
	.bh-home .elementor > .e-con,
	.bh-home .elementor > .elementor-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* The hero is deliberately full-bleed. */
	.bh-home .elementor > .e-con:has(.elementor-widget-slides) {
		padding-left: 0;
		padding-right: 0;
	}
}


/* ------------------------------------------------------------
   4. BUTTONS
   One geometry for every button on the page, taken from the
   reference: 15px/24px w700 ls 0.3px, 16px 32px padding, 30px
   radius. Padding + line-height alone produce the 56px height,
   so nothing relies on `min-height` — which is what left the
   labels sitting against the top edge before.
   ------------------------------------------------------------ */

body.bh-home .elementor-element .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--bh-btn-pad);
	border: 0;
	border-radius: var(--bh-btn-radius);
	background-color: var(--bh-red);
	color: var(--bh-white);
	font-family: var(--bh-font-body);
	font-size: var(--bh-btn-sec-size);
	font-weight: var(--bh-btn-sec-weight);
	line-height: var(--bh-btn-sec-lh);
	letter-spacing: var(--bh-btn-sec-ls);
	text-transform: none;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

body.bh-home .elementor-element .elementor-widget-button .elementor-button:hover,
body.bh-home .elementor-element .elementor-widget-button .elementor-button:focus {
	background-color: var(--bh-red-dark);
	color: var(--bh-white);
}

/* Elementor wraps the label in its own flex box; without this the
   `gap` above is applied twice and the icon drifts. */
body.bh-home .elementor-element .elementor-widget-button .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Product-card buttons keep their own compact treatment — the
   reference's "+ Quick add" pill: 13px/20.8px, 10px 20px, r30px. */
body.bh-home .e-loop-item .elementor-element .elementor-widget-button .elementor-button {
	padding: 9px 12px;
	font-size: 11.5px;
	line-height: 1.3;
	letter-spacing: 0.2px;
	background-color: var(--bh-green);
}

body.bh-home .e-loop-item .elementor-element .elementor-widget-button .elementor-button:hover {
	background-color: var(--bh-green-dark);
}


/* ------------------------------------------------------------
   5. STATS  ("948,362+ Satisfied Customers")
   A display figure, not a section label — bigger and heavier than
   the shared heading scale. `.bh-stat-figure` is a CSS class set on
   the widget in Elementor, so it survives rebuilds.
   Alignment stays with the widget's own setting.
   ------------------------------------------------------------ */

/* `.bh-stat-figure` is repeated deliberately. The shared heading rule in
   section 1 lands at (0,5,2) because of its `:not()` and tag selector; a
   single-class version of this rule would be (0,4,1) and lose. Repeating
   the class three times reaches (0,6,1), which clears (0,5,2) on both
   counts, without hard-coding a tag name — so it still works whether the
   widget renders as h2 or h3. */
body.bh-home .elementor-element.bh-stat-figure.bh-stat-figure.bh-stat-figure .elementor-heading-title {
	font-size: 36px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.18px;
}

@media (min-width: 1025px) {
	body.bh-home .elementor-element.bh-stat-figure.bh-stat-figure.bh-stat-figure .elementor-heading-title {
		font-size: 56px;
	}
}


/* ------------------------------------------------------------
   6. CORPORATE GIFTING
   Reference block: 32px gift pictogram, display heading, one line
   of copy, pill CTA — all centred on the page cream, 48px 20px.
   The band's own fill and rounded panel were removed from the
   template so it reads as page background.

   The icon is drawn as a CSS mask rather than added to the
   Elementor content, so the template keeps only real copy in it
   and the glyph inherits `currentColor`.
   ------------------------------------------------------------ */

/* The pseudo-element hangs off the widget itself, not off an inner
   `.elementor-widget-container` — Elementor 4 renders the heading tag as
   a direct child of the widget and emits no container div for it. */
body.bh-home .elementor-element.bh-gift-heading::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 14px;
	background-color: var(--bh-dark);
	-webkit-mask: var(--bh-gift-icon) center / contain no-repeat;
	mask: var(--bh-gift-icon) center / contain no-repeat;
}

/* Eyebrow line ("A BALOCH HOTEL FAVOURITE") is hidden, not deleted:
   remove the `bh-eyebrow-hidden` class on the widget in Elementor to
   bring it back. */
body.bh-home .elementor-element.bh-eyebrow-hidden {
	display: none;
}


/* ------------------------------------------------------------
   7. FAQ ACCORDION
   The visible title is the `<a class="elementor-accordion-title">`
   INSIDE `.elementor-tab-title`, and Elementor styles that anchor
   directly — so styling only the wrapper left the titles in the
   template's Georgia. Both are set here.
   ------------------------------------------------------------ */

body.bh-home .elementor-element .elementor-widget-accordion .elementor-tab-title,
body.bh-home .elementor-element .elementor-widget-accordion .elementor-accordion-title {
	font-family: var(--bh-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.2px;
	color: var(--bh-dark);
}

body.bh-home .elementor-element .elementor-widget-accordion .elementor-active .elementor-accordion-title {
	color: var(--bh-red);
}

body.bh-home .elementor-element .elementor-widget-accordion .elementor-tab-content,
body.bh-home .elementor-element .elementor-widget-accordion .elementor-tab-content p {
	font-family: var(--bh-font-body);
	font-size: 15px;
	line-height: 24px;
	letter-spacing: var(--bh-body-ls);
	color: var(--bh-dark);
}


/* ------------------------------------------------------------
   8. MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.bh-home .elementor-element .elementor-widget-button .elementor-button {
		transition: none;
	}
}