/* fonts: https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap */

/* ============================================================
   Ameer Smoke Shop — design layer.
   Carries the approved homepage's layout, type and mood forward
   without its colours: every colour here resolves through
   tokens.css (--bs-* brand vars) or a site token built from them.
   No --bs-* variable is ever redefined here.
   ============================================================ */

/* ------------------------------------------------------------
   Site tokens — built FROM tokens.css variables, never raw hex.
   ------------------------------------------------------------ */
:root {
	--amr-display: 'Bebas Neue', 'Inter', system-ui, sans-serif;

	/* Scrims over client photography. Composite the dark surface
	   toward transparency so the photo shows through. */
	--amr-scrim-top: rgba(var(--bs-dark-rgb), .55);
	--amr-scrim-bottom: rgba(var(--bs-dark-rgb), .88);
	--amr-scrim-soft-top: rgba(var(--bs-dark-rgb), .35);
	--amr-scrim-soft-bottom: rgba(var(--bs-dark-rgb), .72);

	/* Green gradients for photo-less / gradient bands. */
	--amr-gradient-band: linear-gradient(
		135deg,
		var(--bs-primary) 0%,
		var(--bs-dark) 100%
	);
	--amr-gradient-band-soft: linear-gradient(
		180deg,
		rgba(var(--bs-primary-rgb), .14) 0%,
		transparent 70%
	);

	/* Frosted panel surfaces. */
	--amr-glass-bg: rgba(var(--bs-light-rgb), .10);
	--amr-glass-border: rgba(var(--bs-light-rgb), .22);
	--amr-glass-blur: blur(16px) saturate(140%);

	/* Shadows — resolved from the dark surface so they read on any band. */
	--amr-shadow-sm: 0 6px 16px rgba(var(--bs-dark-rgb), .28);
	--amr-shadow-lg: 0 18px 40px rgba(var(--bs-dark-rgb), .42);

	/* Focus ring — a real outline colour that reads on dark and light bands. */
	--amr-focus: var(--bs-secondary-text-emphasis);
}

[data-bs-theme="light"] {
	--amr-glass-bg: rgba(255, 255, 255, .62);
	--amr-glass-border: rgba(var(--bs-dark-rgb), .10);
	--amr-scrim-top: rgba(var(--bs-dark-rgb), .48);
	--amr-scrim-bottom: rgba(var(--bs-dark-rgb), .82);
	--amr-shadow-sm: 0 6px 16px rgba(var(--bs-dark-rgb), .10);
	--amr-shadow-lg: 0 18px 40px rgba(var(--bs-dark-rgb), .14);
	--amr-focus: var(--bs-primary-text-emphasis);
}

/* ------------------------------------------------------------
   Base type
   ------------------------------------------------------------ */
body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.amr-display,
.font-display {
	font-family: var(--amr-display);
	font-weight: 400;
	letter-spacing: .02em;
	line-height: 1.04;
}

/* Section rhythm shared by every band. */
.amr-section {
	padding-block: clamp(3rem, 8vw, 5.5rem);
}

.amr-section--tight {
	padding-block: clamp(2rem, 5vw, 3.25rem);
}

/* ------------------------------------------------------------
   Navbar — bg-body-tertiary is !important, so recolour through
   the variable it reads, plus the --bs-navbar-* colour set.
   ------------------------------------------------------------ */
.amr-navbar {
	--bs-tertiary-bg-rgb: 14, 21, 18;
	--bs-navbar-color: rgba(234, 244, 238, .82);
	--bs-navbar-hover-color: var(--bs-secondary-text-emphasis);
	--bs-navbar-active-color: var(--bs-secondary-text-emphasis);
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
	--bs-navbar-toggler-border-color: rgba(234, 244, 238, .30);
	--bs-navbar-nav-link-padding-x: .9rem;
}

.amr-navbar .navbar-toggler {
	--bs-navbar-toggler-icon-bg: none;
	border-color: rgba(234, 244, 238, .35);
}

.amr-navbar .navbar-toggler-icon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28234,244,238,.85%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Brand lock-up — type-set, since the client supplied no logo. */
.amr-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: rgba(var(--bs-secondary-rgb), .16);
	color: var(--bs-secondary-text-emphasis);
	font-size: .95rem;
}

/* Header logo sizing where a custom logo is later uploaded. */
.custom-logo {
	height: 40px;
	width: auto;
}

/* ------------------------------------------------------------
   Hero — dark band with a client photo as a full-bleed backdrop
   behind a frosted panel. Ambient token variables stay inside.
   ------------------------------------------------------------ */
.amr-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 72vh, 46rem);
	padding-block: clamp(4rem, 12vw, 8rem);
}

.amr-hero__img,
.amr-bleed__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.amr-hero__scrim,
.amr-bleed__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		var(--amr-scrim-top),
		var(--amr-scrim-bottom)
	);
}

.amr-hero__panel {
	background: var(--amr-glass-bg);
	-webkit-backdrop-filter: var(--amr-glass-blur);
	backdrop-filter: var(--amr-glass-blur);
	border: 1px solid var(--amr-glass-border);
	border-radius: var(--bs-border-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

/* Eyebrow — legible accent text, never the base fill colour. */
.amr-eyebrow {
	color: var(--bs-secondary-text-emphasis);
	letter-spacing: .18em;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
}

.amr-hero__title {
	color: #fff;
	font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
	margin-bottom: 1rem;
}

.amr-hero__sub {
	color: rgba(234, 244, 238, .84);
	max-width: 42ch;
}

/* Outline button over a dark band — reverses to solid so it stops
   reading as a hole punched in the photo. */
.amr-on-dark .btn-outline-light {
	--bs-btn-color: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, .55);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-color: var(--bs-dark);
	--bs-btn-hover-border-color: #fff;
	--bs-btn-active-bg: #fff;
	--bs-btn-active-color: var(--bs-dark);
	--bs-btn-active-border-color: #fff;
}

/* Buttons carry a lift alongside the colour shift so the state is
   perceptible even where the colour diff is subtle. */
.amr-hero .btn,
.amr-cta .btn {
	transition: transform .18s ease, box-shadow .18s ease;
}

.amr-hero .btn:hover,
.amr-hero .btn:focus-visible,
.amr-cta .btn:hover,
.amr-cta .btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--amr-shadow-sm);
}

/* ------------------------------------------------------------
   Trust strip — chips under the hero.
   ------------------------------------------------------------ */
.amr-trust {
	background: var(--bs-gradient-band-soft, transparent);
}

.amr-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1rem;
	border-radius: var(--bs-border-radius-pill);
	background: rgba(var(--bs-secondary-rgb), .12);
	border: 1px solid rgba(var(--bs-secondary-rgb), .28);
	color: var(--bs-secondary-text-emphasis);
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
}

.amr-chip i {
	font-size: .8rem;
}

/* ------------------------------------------------------------
   Section bands
   ------------------------------------------------------------ */

/* Full-bleed band — client photo backdrop under a scrim. */
.amr-bleed {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(22rem, 48vh, 34rem);
	padding-block: clamp(4rem, 10vw, 7rem);
}

.amr-bleed--soft .amr-bleed__scrim {
	background: linear-gradient(
		180deg,
		var(--amr-scrim-soft-top),
		var(--amr-scrim-soft-bottom)
	);
}

/* Gradient band — replaces the photo where the brief needs atmosphere
   without an image. Same structure and contrast behaviour. */
.amr-bleed--gradient {
	background: var(--amr-gradient-band);
}

.amr-bleed--gradient .amr-bleed__gradient {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--amr-gradient-band);
	opacity: .94;
}

.amr-heading-on-dark {
	color: #fff;
}

.amr-body-on-dark {
	color: rgba(234, 244, 238, .86);
}

/* Alternate section surface — a slightly lifted dark band so adjacent
   groups read as distinct without imagery. */
.amr-band {
	background-color: var(--bs-tertiary-bg);
}

.amr-band--alt {
	background-color: var(--bs-secondary-bg);
}

/* ------------------------------------------------------------
   Frosted panels / cards
   ------------------------------------------------------------ */
.amr-glass {
	background: var(--amr-glass-bg);
	-webkit-backdrop-filter: var(--amr-glass-blur);
	backdrop-filter: var(--amr-glass-blur);
	border: 1px solid var(--amr-glass-border);
	border-radius: var(--bs-border-radius-lg);
}

/* Fallback — solid-ish surface where backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.amr-glass {
		background: rgba(var(--bs-dark-rgb), .86);
	}

	[data-bs-theme="light"] .amr-glass {
		background: rgba(255, 255, 255, .94);
	}
}

/* Tile card — solid surface, icon-led, lift on hover/focus. */
.amr-tile {
	--bs-card-border-radius: var(--bs-border-radius-lg);
	--bs-card-border-color: rgba(var(--bs-light-rgb), .12);
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

[data-bs-theme="light"] .amr-tile {
	--bs-card-border-color: rgba(var(--bs-dark-rgb), .10);
}

.amr-tile:hover,
.amr-tile:focus-within {
	--bs-card-border-color: var(--bs-secondary-text-emphasis);
	box-shadow: var(--amr-shadow-lg);
	transform: translateY(-3px);
}

/* Icon badge — oversized Font Awesome icon in a green-tinted circle. */
.amr-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: rgba(var(--bs-secondary-rgb), .16);
	color: var(--bs-secondary-text-emphasis);
	font-size: 1.15rem;
}

.amr-icon-badge--lg {
	width: 4rem;
	height: 4rem;
	font-size: 1.4rem;
}

/* Photo-backed card: image on top, frosted caption below. */
.amr-photo-card {
	overflow: hidden;
	border-radius: var(--bs-border-radius-lg);
}

.amr-photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------
   Focus visibility — a real outline that reads on dark and light.
   ------------------------------------------------------------ */
.amr-tile:focus-visible,
.amr-glass a:focus-visible,
.amr-chip:focus-visible {
	outline: 3px solid var(--amr-focus);
	outline-offset: 2px;
}

a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
	outline: 3px solid var(--amr-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   Offer spotlight + CTA band
   ------------------------------------------------------------ */
.amr-offer {
	background: var(--amr-gradient-band);
	color: #fff;
}

.amr-offer__amount {
	font-family: var(--amr-display);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1;
	color: #fff;
}

.amr-cta {
	background-color: var(--bs-tertiary-bg);
}

/* Contact band — dark gradient, list links reverse to pure white. */
.amr-contact {
	background: var(--amr-gradient-band);
	color: #fff;
}

.amr-contact__label {
	color: var(--bs-secondary-text-emphasis);
	letter-spacing: .14em;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.amr-contact a:not(.btn),
.amr-contact .list-unstyled a:not(.btn),
.amr-contact .list-unstyled span {
	color: rgba(234, 244, 238, .90);
	text-decoration-color: transparent;
	transition: color .16s ease, text-decoration-color .16s ease;
}

.amr-contact a:not(.btn):hover,
.amr-contact a:not(.btn):focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   Review cards — quote + attribution.
   ------------------------------------------------------------ */
.amr-review__stars {
	color: var(--bs-secondary-text-emphasis);
	letter-spacing: .12em;
}

.amr-review__score {
	font-family: var(--amr-display);
	font-size: clamp(3rem, 8vw, 4.5rem);
	line-height: 1;
	color: var(--bs-secondary-text-emphasis);
}

/* ------------------------------------------------------------
   Map / ratio frames
   ------------------------------------------------------------ */
.amr-frame {
	border-radius: var(--bs-border-radius-lg);
	overflow: hidden;
	box-shadow: var(--amr-shadow-lg);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
	background-color: var(--bs-tertiary-bg);
	border-color: rgba(var(--bs-light-rgb), .10) !important;
}

.site-footer a:not(.btn) {
	color: var(--bs-secondary-text-emphasis);
	text-decoration-color: transparent;
	transition: color .16s ease, text-decoration-color .16s ease;
}

.site-footer a:not(.btn):hover,
.site-footer a:not(.btn):focus-visible {
	color: var(--bs-link-hover-color);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   Reveal — progressive enhancement, reduced-motion safe.
   ------------------------------------------------------------ */
.amr-reveal {
	opacity: 1;
}

.amr-js .amr-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.amr-js .amr-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------
   Reduced motion — keep colour, drop every transform/transition.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.amr-tile,
	.amr-hero .btn,
	.amr-cta .btn,
	.amr-contact a,
	.site-footer a {
		transition: none;
	}

	.amr-tile:hover,
	.amr-tile:focus-within {
		transform: none;
	}

	.amr-hero .btn:hover,
	.amr-hero .btn:focus-visible,
	.amr-cta .btn:hover,
	.amr-cta .btn:focus-visible {
		transform: none;
	}

	.amr-js .amr-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}