/*
 * Custom Irish — homepage hero overlay
 * ====================================
 * The client asked for an editable text overlay on the hero: at present the
 * photograph fills the whole first screen and nothing readable appears until
 * the visitor scrolls.
 *
 * ---------------------------------------------------------------------------
 * HOW THE WORK IS SPLIT
 * ---------------------------------------------------------------------------
 * CONTENT lives in Elementor — headline, occasions line, the print promise and
 * the rating block are ordinary widgets Sinead can edit, reword or reorder.
 *
 * POSITIONING AND THE CARD live here. Elementor's own position controls were
 * not used on purpose: the two heroes are built differently (see below), so the
 * overlay needs different mechanics at each breakpoint, and expressing that in
 * widget settings would leave the layout one careless drag away from breaking.
 * Keeping it in CSS means the copy is editable and the layout is not.
 *
 * It also survives the photograph being swapped, which the brief asks for
 * explicitly — nothing here depends on the current image.
 *
 * ---------------------------------------------------------------------------
 * THE TWO HEROES
 * ---------------------------------------------------------------------------
 * The homepage has two, and only one is visible at a time:
 *
 *   .elementor-element-4021a3fa   DESKTOP   image is a CSS background-image
 *                                           900px tall, display:none below 768px
 *   .elementor-element-dc43138    MOBILE    image is an image WIDGET in flow
 *                                           544px tall, hidden from 768px up
 *
 * That difference is the whole reason this file exists. On desktop the overlay
 * is just a flex child of a container that already has the picture behind it.
 * On mobile the picture is a real element in the document, so the overlay has
 * to be lifted out of flow and placed over it.
 *
 * ---------------------------------------------------------------------------
 * REVERT PATH
 * ---------------------------------------------------------------------------
 * Comment out the wp_enqueue_style( 'customirish-hero', ... ) line in
 * functions.php and the overlay falls back to plain stacked content inside the
 * hero — visible and readable, just unstyled. To remove it entirely, restore
 * postmeta `_elementor_data_herobak_20260811` on page 7105.
 * ---------------------------------------------------------------------------
 */

.ci-hero-overlay,
.elementor-element-ciherod,
.elementor-element-ciherom {
	/*
	 * The card. Cream at 0.94 rather than a solid fill so the photograph still
	 * reads underneath it — the brief wants an overlay, not a panel that hides
	 * the picture it sits on.
	 *
	 * backdrop-filter softens whatever is behind the card, which keeps the text
	 * legible over a busy photograph without pushing the alpha up. Browsers
	 * without it simply get the flat 0.94, which is already sufficient contrast
	 * (measured below), so no fallback is needed.
	 */
	background-color: rgba(244, 241, 234, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 15px;
	text-align: center;
	box-sizing: border-box;
}

/*
 * MEASURED CONTRAST against the card at rgba(244,241,234,0.94) composited over
 * the hero photograph's lightest region — the worst case, since a lighter
 * backdrop lifts the composite and lowers the ratio:
 *
 *   composited card       ~#F4F1EB
 *   title  #0D3739 on it   12.6:1   passes AAA
 *   body   #3F4A44 on it    8.1:1   passes AAA
 *   stars  #C7A550 on it    2.2:1   DECORATIVE ONLY — aria-hidden in the markup,
 *                                   with the accessible name carried by the
 *                                   "5-Star Reviews" line beneath it. Gold on
 *                                   cream cannot reach 4.5:1 at any usable
 *                                   weight, which is why the stars are not the
 *                                   only way that rating is conveyed.
 */

/* --------------------------------------------------------------------------
   Ornaments
   --------------------------------------------------------------------------
   A gold rule with a ringed motif at its centre, matching the reference the
   client supplied. TWO of them: above the headline, and above "Preview your
   artwork before we print."

   REPLACED 15 Aug with the client's own artwork — a gold rule with a spiral
   centre and flanking diamonds, supplied as
   assets/images/gold-ornament-divider-sm.webp (300 x 22).

   It was also uploaded to the media library, but the THEME copy is the one
   referenced here, deliberately: a wp-content/uploads URL carries the staging
   hostname and would have to be re-pointed for production, whereas this path is
   relative to the stylesheet and travels with the theme rsync. The two files are
   byte-identical (md5 c7e111522f63aa600de1629f3bb7ad96), so nothing is lost by
   preferring the theme one. If the media-library copy is ever deleted, this
   keeps working.

   The previous version was an inline SVG data URI, kept below in the revert note
   in case the drawn rule is ever wanted back. The reasons it was drawn rather
   than typed still hold and still apply to the image: there is no glyph for
   Sinead to delete by accident while editing the copy, and it needs no font to
   be present. Both are pseudo-elements, so neither is part of the editable
   content.

   REVERT — the SVG that was here:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' fill='none' stroke='%23C7A550' stroke-width='1'%3E%3Cpath d='M0 7 H88' stroke-opacity='0.35'/%3E%3Cpath d='M8 7 H88'/%3E%3Cpath d='M132 7 H212'/%3E%3Cpath d='M132 7 H220' stroke-opacity='0.35'/%3E%3Cpath d='M94 7 l4 -4 4 4 -4 4 z' fill='%23C7A550' stroke='none'/%3E%3Cpath d='M118 7 l4 -4 4 4 -4 4 z' fill='%23C7A550' stroke='none'/%3E%3Ccircle cx='110' cy='7' r='5'/%3E%3Ccircle cx='110' cy='7' r='1.6' fill='%23C7A550' stroke='none'/%3E%3C/svg%3E")

   ATTACHED TO THE WIDGETS, NOT THE CARD. The first version hung the ornament
   off the card's own ::before. As a flex item that pseudo-element rendered but
   did not reserve height — the title's box started at exactly the card's
   padding-top, so no amount of margin on the ornament pushed the headline down
   and the capitals kept touching the rule. Each widget wrapper is an ordinary
   block container, so a ::before inside one occupies real space and the margins
   below behave predictably.

   The SVG uses single-quoted attributes so the whole thing sits inside a
   double-quoted CSS url() without escaping.
   -------------------------------------------------------------------------- */
.elementor-element-ciherod .ci-hero-title::before,
.elementor-element-ciherom .ci-hero-title::before,
.elementor-element-ciherod .ci-hero-promise::before,
.elementor-element-ciherom .ci-hero-promise::before {
	content: "";
	display: block;
	height: 16px;
	background-image: url("assets/images/gold-ornament-divider-sm.webp");
	background-repeat: no-repeat;
	background-position: center;
	/* contain, so the ornament shrinks with a narrow card instead of clipping. */
	background-size: contain;
	/*
	 * Full strength. The old 0.9 was softening a drawn SVG that was too assertive
	 * at full opacity; this is finished artwork whose ends already taper, so
	 * fading it again only makes the gold muddy against the cream card.
	 */
	opacity: 1;
	/*
	 * The title runs at line-height 0.95, so Cormorant's ascenders overflow the
	 * top of their own line box, which is why this is set by eye rather than
	 * computed. Halved from 14px on request.
	 */
	margin: 0 0 7px;
}

/* The top ornament also needs clearance from the card's edge above it. Most of
   that gap is the card's own padding-top; this is the last nudge. */
.elementor-element-ciherod .ci-hero-title::before,
.elementor-element-ciherom .ci-hero-title::before {
	margin-top: 3px;
}

/* The second ornament separates two blocks of copy, so it needs room above it
   as well as below — otherwise it crowds the occasions line it follows. */
.elementor-element-ciherod .ci-hero-promise::before,
.elementor-element-ciherom .ci-hero-promise::before {
	margin-top: 6px;
}

/*
 * SPECIFICITY NOTE — read before editing any selector in this file.
 *
 * theme-type.css carries
 *     body .elementor-widget-heading h1.elementor-heading-title   (0,2,2)
 *     body .elementor-widget-text-editor                          (0,1,2)
 * both at !important. A rule like `.ci-hero-title .elementor-heading-title`
 * scores (0,2,0) and loses to the first of those, so the hero title silently
 * rendered at the global h1 size and line-height — 62.7px / 1.23 on desktop and
 * 41.6px / 1.23 on mobile — no matter what was written here.
 *
 * Every rule below therefore leads with the container's element class, which
 * takes each selector to (0,3,1) and clears both. If you add a rule to this
 * file and it appears to do nothing, this is why.
 */
.elementor-element-ciherod .ci-hero-title,
.elementor-element-ciherom .ci-hero-title,
.elementor-element-ciherod .ci-hero-title h1.elementor-heading-title,
.elementor-element-ciherom .ci-hero-title h1.elementor-heading-title {
	/*
	 * SPEC SHEET, 15 Aug. This is an H1 — Gerald confirmed it explicitly — so it
	 * takes the H1 values: 64px / lh 1.15 / ls -0.5px on desktop, 40px / lh 1.2 /
	 * ls -0.5px on mobile. It inherits them from theme-type.css rather than
	 * repeating the numbers, so the sheet lives in one place.
	 *
	 * This REPLACES two hero-specific decisions, both deliberate at the time:
	 *   - the 48px cap, which made the hero smaller than a normal page H1;
	 *   - line-height 0.95, chosen because Cormorant's short ascenders leave a
	 *     visible trough at 1.0 and the client had asked for barely any gap.
	 * The sheet says 1.15, so 1.15 it is. If the looser leading is wrong for
	 * this card, that is a change to the sheet, not to this file.
	 */
	font-size: var(--fs-hero) !important;
	line-height: var(--lh-h1) !important;
	letter-spacing: var(--ls-h1) !important;
	font-weight: 400 !important;
	color: var(--c-h1, var(--c-teal)) !important;
	margin: 0 !important;
	/* Balances the two lines instead of leaving one word stranded. Ignored by
	   browsers without support, which fall back to normal wrapping. */
	text-wrap: balance;
}

/*
 * The occasions line must stay on ONE line at every width — it reads as a list
 * of four things, and wrapping "New Home" onto its own row makes it look like a
 * heading for whatever follows. nowrap plus a size that is allowed to go quite
 * small is the trade; the line is supporting copy, not something anyone reads
 * word by word.
 */
.elementor-element-ciherod .ci-hero-occasions p,
.elementor-element-ciherom .ci-hero-occasions p {
	font-size: clamp(12px, 0.5rem + 1.15vw, 19.2px) !important;
	white-space: nowrap !important;
	line-height: 1.4 !important;
	color: var(--c-teal) !important;
	margin: 0 !important;
}

.elementor-element-ciherod .ci-hero-promise p,
.elementor-element-ciherom .ci-hero-promise p {
	font-size: clamp(15px, 0.85rem + 0.35vw, 18px) !important;
	line-height: 1.5 !important;
	color: #3F4A44 !important;
	margin: 0 !important;
}

.elementor-element-ciherod .ci-hero-stars,
.elementor-element-ciherom .ci-hero-stars {
	color: var(--c-gold) !important;
	/* Tracking keeps the five glyphs from crowding into a single gold smear. */
	letter-spacing: 0.22em !important;
	/* Nudges the block left by half the trailing letter-space so the row of
	   stars is optically centred rather than mathematically centred. */
	text-indent: 0.22em;
	font-size: clamp(17px, 0.95rem + 0.5vw, 22px) !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.elementor-element-ciherod .ci-hero-reviews,
.elementor-element-ciherom .ci-hero-reviews {
	font-size: clamp(14px, 0.8rem + 0.3vw, 17px) !important;
	line-height: 1.4 !important;
	color: var(--c-teal) !important;
	/* Tight against the stars — they are one unit, not two lines of copy. */
	margin: 0.1em 0 0 !important;
}

/* Elementor wraps every widget; collapse the default gaps so the card's own
   padding and row gap are the only spacing in play. */
.elementor-element-ciherod > .elementor-element,
.elementor-element-ciherom > .elementor-element,
.ci-hero-overlay .elementor-widget-container {
	margin: 0 !important;
}

/* ==========================================================================
   DESKTOP — top left, over the background image
   --------------------------------------------------------------------------
   The parent container is already flex, column, centred on both axes. Rather
   than change the parent (which would move anything added to the hero later),
   the overlay positions itself:

     align-self: flex-start   pulls it to the LEFT  (cross axis, column layout)
     margin-bottom: auto      pushes it to the TOP  (absorbs the free space that
                              justify-content: center would otherwise split)
   ========================================================================== */
@media (min-width: 768px) {

	.ci-hero-overlay--desktop,
	.elementor-element-ciherod {
		align-self: flex-start !important;
		margin-bottom: auto !important;
		/*
		 * Inset from the top-left corner. Uses the same clamp shape as the
		 * type so the card does not crowd the corner on a laptop while
		 * drifting into the middle of a wide monitor.
		 *
		 * Halved on request — was clamp(40px, 6vh, 96px) top and
		 * clamp(24px, 5vw, 104px) left, which held the card too far into the
		 * middle of the photograph. Every term is exactly 50% of the original
		 * so the scaling behaviour is unchanged, only the distance.
		 */
		margin-top: clamp(20px, 3vh, 48px) !important;
		margin-left: clamp(12px, 2.5vw, 52px) !important;
		width: min(560px, 42vw) !important;
		max-width: 560px !important;
		/* Top padding is larger than the rest: the ornament is the first thing in
		   the card and was rendering hard against the top border. */
		/* Top padding halved on request — it is the space above the first
		   ornament. Sides and bottom unchanged. */
		padding: clamp(12px, 1.25vw, 17px) clamp(24px, 2.4vw, 40px) clamp(22px, 2.2vw, 34px) !important;
		display: flex !important;
		flex-direction: column !important;
		gap: clamp(10px, 1vw, 16px) !important;
	}

	/* The mobile copy must never appear on desktop, and vice versa. Both heroes
	   carry an overlay, and only the hero itself is hidden by Elementor — the
	   overlay inside a hidden hero is hidden with it, but stating this guards
	   against the hero's own visibility settings being changed later. */
	.ci-hero-overlay--mobile,
	.elementor-element-ciherom {
		display: none !important;
	}
	/*
	 * Space above each ornament, halved on desktop.
	 *
	 * The first one only has to account for its own margin — the card's
	 * padding-top above was halved with it.
	 *
	 * The second is not just its margin: the card is a flex column with
	 * `gap`, so the space above that ornament is gap + margin-top. At 1200px
	 * that was 12 + 6 = 18px, and halving it means the margin has to go
	 * NEGATIVE to cancel part of the gap. That is why this reads oddly — the
	 * gap cannot be changed here without also moving every other row in the
	 * card, which was not what was asked for.
	 */
	.elementor-element-ciherod .ci-hero-title::before {
		margin-top: 0 !important;
	}

	.elementor-element-ciherod .ci-hero-promise::before {
		margin-top: -3px !important;
	}
}

/* ==========================================================================
   MOBILE — over the top of the in-flow image
   --------------------------------------------------------------------------
   The mobile hero's picture is an image WIDGET, so it occupies real space in
   the document and a flex child would push it down the page rather than sit on
   it. The overlay is therefore taken out of flow and pinned to the top of the
   container.

   The container needs position: relative for that to resolve against the hero
   rather than the page. It is set here rather than in Elementor so the two
   halves of the mechanism stay in one file.
   ========================================================================== */
@media (max-width: 767px) {

	.elementor-element-dc43138 {
		position: relative !important;
	}

	.ci-hero-overlay--desktop,
	.elementor-element-ciherod {
		display: none !important;
	}

	/*
	 * Occasions line, mobile size.
	 *
	 * Restated inside this media block rather than left to the clamp in the
	 * typography section above. That clamp was being beaten on this page and
	 * the line stayed at 19.2px, which with white-space: nowrap pushed
	 * "New Home" straight out through the right edge of the card instead of
	 * wrapping. Sized here against the real card width:
	 *
	 *   card is viewport - 2x side inset, less ~36px of its own padding
	 *   the full string needs ~368px at 19.2px, so it scales linearly from that
	 *
	 *   360px phone -> 14.4px needs 276px, 294px available
	 *   390px phone -> 15.6px needs 299px, 305px available
	 *   430px phone -> 17px   needs 326px, 364px available
	 *
	 * Specificity is deliberately high so it cannot lose the same way again.
	 */
	/*
	 * Promise line and rating label — a size up, leading down, so the card
	 * gains legibility without gaining height. Same reasoning as the occasions
	 * line above it.
	 */
	.elementor-element-ciherom .ci-hero-promise p {
		font-size: clamp(15px, 4.3vw, 18px) !important;
		line-height: 1.25 !important;
	}

	.elementor-element-ciherom .ci-hero-reviews {
		font-size: clamp(14.5px, 4.1vw, 17px) !important;
		line-height: 1.15 !important;
	}

	.elementor-element-ciherom .ci-hero-occasions p,
	.elementor-element-ciherom .elementor-widget-container p,
	.ci-hero-overlay--mobile .ci-hero-occasions p {
		/* Bumped from clamp(10.5px, 3.2vw, 14px) on request. Leading drops with
		   it so the row reads larger without occupying more height. */
		font-size: clamp(11.5px, 3.6vw, 15px) !important;
		line-height: 1.15 !important;
		white-space: nowrap !important;
	}

	.ci-hero-overlay--mobile,
	.elementor-element-ciherom {
		position: absolute !important;
		/*
		 * --ci-hero-img-top is the gap between the top of the hero container and
		 * the top of the photograph. An absolutely positioned child resolves
		 * top:0 against the container's PADDING box, not against the image, so
		 * without this the card floats above the picture and sits on the section
		 * background instead of on the photo.
		 *
		 * Measured at a steady 40px across 390 / 430 / 767px — it comes from the
		 * image widget's own top margin, not from section padding (which is 0).
		 * Declared as a variable so that if the gap is ever changed in Elementor
		 * there is one number to update, named for what it means.
		 */
		--ci-hero-img-top: 40px;
		/*
		 * Cut to 25% of the previous offset on request — the card was sitting
		 * ~53px down from the top of the hero, which read as a band of dead space
		 * above it. The whole expression is scaled rather than replaced with a
		 * flat number so the relationship to the image offset is still visible.
		 */
		top: calc((var(--ci-hero-img-top) + clamp(12px, 3.5vw, 22px)) * 0.25) !important;
		left: clamp(12px, 4vw, 24px) !important;
		right: clamp(12px, 4vw, 24px) !important;
		width: auto !important;
		z-index: 2;
		padding: clamp(18px, 5vw, 25px) clamp(16px, 4.5vw, 24px) clamp(18px, 5vw, 26px) !important;
		display: flex !important;
		flex-direction: column !important;
		gap: clamp(8px, 2.5vw, 14px) !important;
	}
}

/*
 * Very short phones.
 *
 * The card is pinned to the top of a 544px image. On a 568px-tall handset in
 * landscape, or a small device with browser chrome eating the viewport, a card
 * this tall can overrun the bottom of the photograph and sit half on the
 * section below it. Tightening the padding and type keeps it inside the image.
 */
@media (max-width: 767px) and (max-height: 700px) {
	.ci-hero-overlay--mobile,
	.elementor-element-ciherom {
		/* Same 25% offset as the main mobile rule, so a short phone does not
		   reintroduce the dead band above the card. */
		top: calc((var(--ci-hero-img-top, 40px) + 8px) * 0.25) !important;
		padding: 16px 16px 12px !important;
		gap: 6px !important;
	}

	.ci-hero-title,
	.ci-hero-title .elementor-heading-title {
		font-size: clamp(24px, 6vw, 30px) !important;
	}
}

/*
 * Reduced transparency.
 *
 * A visitor who has asked their OS to reduce transparency has usually done so
 * because layered translucent surfaces are hard for them to read. Give them the
 * opaque card.
 */
@media (prefers-reduced-transparency: reduce) {
	.ci-hero-overlay {
		background-color: #F4F1EB;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}