/* ===========================================================================
   Elope Bridal - offers (mu-plugins/eb-offers.php).

   Loaded only on a page where an offer is showing; an offer that starts after
   a page was made fetches it from the browser on its first day. Nothing here
   draws anything while no offer is ticked and in date, because nothing is in
   the page.

   Two pieces:
   - the band across the top of every page (eb_render_offer_bar()): one slim
     ivy line above the header with the offer's title and its link. The
     detail is the card's to tell (on Services and Enquire), so the band stays
     one line on a laptop and about 44px on a phone, and her name and the
     headline are on the first screen;
   - the card on the Services and Enquire pages (eb_render_offer_card()):
     porcelain, the headline in Cormorant. The ring is kept for the moments
     that earn it (site.css): the card has no corner arc and no dot.

   Contrast, measured on ivy #262D27: petal 11.5:1, white 14.1:1,
   gilt-soft 7.4:1. On porcelain: ink 15.4:1, fern-deep 9.3:1, fern 7.0:1,
   gilt-deep 5.4:1 (the eyebrow, 13px caps).
   ======================================================================== */

/* ---- the band ------------------------------------------------------------ */
.eb-offer {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 8px 64px;
	background: var(--ivy); color: var(--petal);
	font-size: .9375rem; line-height: 1.45; text-align: center;
	border-bottom: 1px solid rgba(205, 186, 142, .22);
}
.eb-offer[hidden], .eb-offer__item[hidden] { display: none; }
/* Where the page has the card (Services, Enquire), the card tells it: the
   band as well said the same offer twice on one screen. The phone menu's
   top edge is measured from the header each time it opens, so it follows. */
body:has(.eb-offer-card:not([hidden])) .eb-offer { display: none; }
.eb-offer__in { min-width: 0; max-width: var(--col); }
.eb-offer__item { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 18px; overflow-wrap: anywhere; }
.eb-offer__item[hidden] { display: none; }
.eb-offer__title {
	font-weight: 500; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
/* The title and the link only: the detail is on the card. */
.eb-offer__detail, .eb-offer__sep { display: none; }
.eb-offer__link {
	color: var(--gilt-soft); font-weight: 500; white-space: nowrap;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
	transition: color .2s;
}
.eb-offer__link .eb-icon {
	display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.14em;
	transition: transform .35s var(--ease);
}
@media (hover: hover) {
	.eb-offer__link:hover { color: #fff; }
	.eb-offer__link:hover .eb-icon { transform: translateX(3px); }
}
/* The cross's own right edge on the column's edge (the icon sits 13px in
   from its 44px button's), not out in the gutter. */
.eb-offer__close {
	position: absolute; top: 50%; right: max(4px, calc(max(var(--gutter), (100% - var(--col)) / 2) - 13px)); translate: 0 -50%;
	width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
	border: 0; border-radius: 50%; background: transparent; color: var(--petal); cursor: pointer;
	transition: background-color .2s;
}
.eb-offer__close .eb-icon { width: 18px; height: 18px; }
@media (hover: hover) { .eb-offer__close:hover { background: rgba(238, 231, 217, .12); } }
/* The focus ring in the lighter gold: gilt-deep is too dark to see on ivy. */
.eb-offer :focus-visible { outline-color: var(--gilt-soft); }

/* The phone menu opens from the header's real bottom edge, measured by the
   band's script as the menu opens: with the band above the header, --head-h
   alone put the open menu over the header and its Close button. */
@media (max-width: 1080px) {
	:root[data-eb-menu-top] .eb-nav.is-open .eb-nav__list { inset-block-start: var(--eb-menu-top); }
}

@media (max-width: 640px) {
	.eb-offer { justify-content: flex-start; text-align: left; padding: 6px 52px 6px var(--gutter); font-size: .875rem; }
	.eb-offer__item { justify-content: flex-start; gap: 0 12px; }
	.eb-offer__title { font-size: .75rem; letter-spacing: .1em; }
}

/* ---- the card on Services and Enquire --------------------------------------- */
.eb-offer-card {
	position: relative; isolation: isolate; overflow: hidden;
	max-width: 40rem; margin: 0 0 clamp(32px, 4vw, 48px);
	padding: clamp(24px, 3.4vw, 40px);
	background: var(--porcelain); color: var(--ink);
	border: 1px solid rgba(128, 135, 109, .22); border-radius: var(--r-card, 16px);
	box-shadow: 0 24px 48px -40px rgba(38, 45, 39, .55);
}
.eb-offer-card[hidden], .eb-offer-card__item[hidden] { display: none; }
/* In the Enquire page's side column the column's own gap spaces it, and it
   is as wide as "What happens next" above it. */
.eb-enquire__aside .eb-offer-card { margin-bottom: 0; max-width: none; }
.eb-offer-card__ring { display: none; }
.eb-offer-card__eyebrow {
	margin: 0 0 .9rem;
	font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-deep);
}
.eb-offer-card__list { list-style: none; margin: 0; padding: 0; }
.eb-offer-card__item:not([hidden]) ~ .eb-offer-card__item:not([hidden]) {
	margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid rgba(128, 135, 109, .25);
}
.eb-offer-card__title {
	margin: 0; max-width: 24ch;
	font-family: var(--display); font-weight: 500; font-size: var(--t-h3, 1.8rem); line-height: 1.15;
	letter-spacing: -.005em; font-variant-numeric: lining-nums; color: var(--ink); overflow-wrap: anywhere;
}
.eb-offer-card__detail { margin: .6rem 0 0; max-width: var(--measure); color: var(--fern-deep); overflow-wrap: anywhere; }
.eb-offer-card__until {
	display: flex; align-items: center; gap: .5em; margin: .7rem 0 0;
	font-size: var(--t-small); color: var(--fern); font-variant-numeric: lining-nums;
}
.eb-offer-card__until .eb-icon { width: 1.1em; height: 1.1em; color: var(--gilt-deep); }
.eb-offer-card__link { margin-top: .5rem; }