/**
 * Landing Page — Moving Supplies
 *
 * Scoped to .alm-landing-main--moving and landing-specific components.
 * Depends on: tokens.css, base.css, buttons.css, cards.css, product-card.css
 * Loaded only when: is_page_template('page-templates/landing-moving-supplies.php')
 */

/* ═══════════════════════════════════════════════════════════════════
   MAIN WRAPPER
   ══════════════════════════════════════════════════════════════════ */

.alm-landing-main--moving {
	/* Reserve bottom space for mobile sticky CTA */
	padding-block-end: 80px;
}

@media (min-width: 768px) {
	.alm-landing-main--moving {
		padding-block-end: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED SECTION HELPERS
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-section-header {
	margin-block-end: var(--alm-space-10);
}

.alm-lm-section-header--row {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	gap:             var(--alm-space-6);
	flex-wrap:       wrap;
}

.alm-lm-section-sub {
	color:       var(--alm-color-text-secondary);
	max-width:   42rem;
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-hero {
	background-color: var(--alm-color-navy-primary);
	color:            var(--alm-color-text-inverse);
	padding-block:    clamp(3rem, 8vw, 6rem);
	overflow:         hidden;
}

.alm-lm-hero__inner {
	display:        flex;
	align-items:    center;
	gap:            var(--alm-space-12);
}

.alm-lm-hero__copy {
	flex:     1;
	min-width: 0;
}

.alm-lm-hero__eyebrow {
	display:        inline-block;
	font-size:      var(--alm-text-xs);
	font-weight:    var(--alm-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--alm-color-sand);
	margin-block-end: var(--alm-space-4);
}

.alm-lm-hero__heading {
	font-size:       clamp(1.75rem, 5vw, 3rem);
	font-weight:     var(--alm-weight-bold);
	line-height:     var(--alm-leading-tight);
	letter-spacing:  -0.02em;
	color:           var(--alm-color-text-inverse);
	margin-block-end: var(--alm-space-5);
}

.alm-lm-hero__sub {
	font-size:       var(--alm-text-md);
	color:           color-mix(in srgb, var(--alm-color-text-inverse) 80%, transparent);
	line-height:     var(--alm-leading-relaxed);
	max-width:       34rem;
	margin-block-end: var(--alm-space-8);
}

.alm-lm-hero__actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--alm-space-4);
}

/* Hero visual — abstract boxes illustration */
.alm-lm-hero__visual {
	flex-shrink: 0;
	width:       clamp(180px, 22vw, 280px);
}

.alm-lm-hero__visual-art {
	position: relative;
	height:   220px;
}

.alm-lm-hero__box,
.alm-lm-hero__roll {
	position:      absolute;
	border-radius: var(--alm-radius-lg);
}

.alm-lm-hero__box--lg {
	width:            120px;
	height:           110px;
	background-color: var(--alm-color-sand);
	inset-block-end:  0;
	inset-inline-end: 0;
	opacity:          0.9;
}

.alm-lm-hero__box--md {
	width:              90px;
	height:             80px;
	background-color:   var(--alm-color-navy-secondary);
	border:             2px solid var(--alm-color-sand);
	inset-block-start:  30px;
	inset-inline-start: 10px;
}

.alm-lm-hero__box--sm {
	width:              60px;
	height:             55px;
	background-color:   color-mix(in srgb, var(--alm-color-sand) 30%, var(--alm-color-navy-primary));
	inset-block-start:  0;
	inset-inline-end:   20px;
}

.alm-lm-hero__roll {
	width:              40px;
	height:             80px;
	border-radius:      var(--alm-radius-full);
	background-color:   var(--alm-color-navy-secondary);
	border:             2px solid rgba(255,255,255,0.15);
	inset-block-start:  60px;
	inset-inline-end:   130px;
}

@media (max-width: 47.99rem) {
	.alm-lm-hero__inner {
		flex-direction: column;
		text-align:     center;
	}

	.alm-lm-hero__sub {
		max-width: none;
	}

	.alm-lm-hero__actions {
		justify-content: center;
	}

	.alm-lm-hero__visual {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 2 — TRUST STRIP
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-trust {
	background-color: var(--alm-color-surface-subtle);
	border-block:     var(--alm-border-standard);
	padding-block:    var(--alm-space-6);
}

.alm-lm-trust__list {
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--alm-space-6) var(--alm-space-10);
	list-style:      none;
	margin:          0;
	padding:         0;
	justify-content: center;
}

.alm-lm-trust__item {
	display:     flex;
	align-items: center;
	gap:         var(--alm-space-3);
}

.alm-lm-trust__icon {
	color:      var(--alm-color-sand);
	flex-shrink: 0;
}

.alm-lm-trust__label {
	font-size:   var(--alm-text-sm);
	font-weight: var(--alm-weight-medium);
	color:       var(--alm-color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 3 — CHOOSE MOVING SIZE
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-moving-size__grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap:                   var(--alm-space-6);
	list-style:            none;
	margin:                0;
	padding:               0;
}

.alm-lm-size-card {
	display:          flex;
	flex-direction:   column;
	gap:              var(--alm-space-4);
	padding:          var(--alm-space-6);
	background-color: var(--alm-color-surface-raised);
	border:           var(--alm-border-standard);
	border-radius:    var(--alm-radius-xl);
	box-shadow:       var(--alm-shadow-xs);
	transition:       box-shadow var(--alm-duration-base) var(--alm-easing-standard),
	                  border-color var(--alm-duration-base) var(--alm-easing-standard);
}

.alm-lm-size-card:hover {
	box-shadow:   var(--alm-shadow-sm);
	border-color: var(--alm-color-sand);
}

.alm-lm-size-card__icon {
	color:       var(--alm-color-sand);
	flex-shrink: 0;
}

.alm-lm-size-card__content {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-1-5);
	flex:           1;
}

.alm-lm-size-card__heading {
	font-size:   var(--alm-text-md);
	font-weight: var(--alm-weight-bold);
	color:       var(--alm-color-text-primary);
}

.alm-lm-size-card__hint {
	display:        inline-block;
	font-size:      var(--alm-text-xs);
	font-weight:    var(--alm-weight-semibold);
	color:          var(--alm-color-sand-dark);
	letter-spacing: 0.04em;
}

.alm-lm-size-card__desc {
	font-size:    var(--alm-text-sm);
	color:        var(--alm-color-text-secondary);
	line-height:  var(--alm-leading-normal);
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 4 — PRODUCTS
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-products__grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:                   var(--alm-space-6);
	list-style:            none;
	margin:                0;
	padding:               0;
}

/* Empty state */
.alm-lm-products__empty {
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	text-align:       center;
	gap:              var(--alm-space-5);
	padding-block:    var(--alm-space-16);
	padding-inline:   var(--alm-space-6);
	background-color: var(--alm-color-surface-raised);
	border:           var(--alm-border-standard);
	border-radius:    var(--alm-radius-xl);
}

.alm-lm-products__empty-icon {
	color: var(--alm-color-text-muted);
}

.alm-lm-products__empty-heading {
	font-size:   var(--alm-text-xl);
	font-weight: var(--alm-weight-bold);
	color:       var(--alm-color-text-primary);
	margin:      0;
}

.alm-lm-products__empty-body {
	color:       var(--alm-color-text-secondary);
	max-width:   32rem;
	margin-block: 0;
}

.alm-lm-products__empty-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--alm-space-4);
	justify-content: center;
}

/* Dev-only notice — admin only */
.alm-lm-products__dev-notice {
	padding:          var(--alm-space-4);
	background-color: var(--alm-color-warning-bg);
	border:           1px solid var(--alm-color-warning);
	border-radius:    var(--alm-radius-md);
	font-size:        var(--alm-text-sm);
	color:            var(--alm-color-warning);
	margin-block-end: var(--alm-space-6);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 5 — NEEDS
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-needs__grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap:                   var(--alm-space-6);
	list-style:            none;
	margin:                0;
	padding:               0;
}

.alm-lm-need-card {
	padding: var(--alm-space-6);
}

.alm-lm-need-card__icon {
	color:            var(--alm-color-sand);
	margin-block-end: var(--alm-space-4);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 6 — ESTIMATOR
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-estimator__layout {
	display:   grid;
	gap:       var(--alm-space-12);
	align-items: start;
}

@media (min-width: 768px) {
	.alm-lm-estimator__layout {
		grid-template-columns: 1fr 1.3fr;
		gap:                   var(--alm-space-16);
	}
}

.alm-lm-estimator__widget {
	background-color: var(--alm-color-surface-raised);
	border:           var(--alm-border-standard);
	border-radius:    var(--alm-radius-xl);
	padding:          var(--alm-space-8);
	box-shadow:       var(--alm-shadow-sm);
}

.alm-lm-estimator__form {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-6);
}

.alm-lm-estimator__group {
	border:  none;
	margin:  0;
	padding: 0;
}

.alm-lm-estimator__group legend {
	font-size:        var(--alm-text-sm);
	font-weight:      var(--alm-weight-medium);
	color:            var(--alm-color-text-primary);
	margin-block-end: var(--alm-space-3);
	padding:          0;
}

.alm-lm-estimator__options {
	display:   grid;
	grid-template-columns: repeat(2, 1fr);
	gap:       var(--alm-space-2);
}

.alm-lm-estimator__option {
	display:         flex;
	align-items:     center;
	gap:             var(--alm-space-2);
	padding:         var(--alm-space-3) var(--alm-space-4);
	background-color: var(--alm-color-surface-subtle);
	border:          var(--alm-border-standard);
	border-radius:   var(--alm-radius-lg);
	cursor:          pointer;
	transition:      background-color var(--alm-duration-fast) var(--alm-easing-standard),
	                 border-color var(--alm-duration-fast) var(--alm-easing-standard);
	font-size:       var(--alm-text-sm);
}

.alm-lm-estimator__option input[type="radio"] {
	accent-color: var(--alm-color-navy-primary);
	flex-shrink:  0;
}

.alm-lm-estimator__option:has(input:checked) {
	background-color: var(--alm-color-navy-primary-10);
	border-color:     var(--alm-color-navy-primary);
}

.alm-lm-estimator__option:focus-within {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

.alm-lm-estimator__group--checks {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-3);
}

.alm-lm-estimator__check {
	display:     flex;
	align-items: flex-start;
	gap:         var(--alm-space-3);
	font-size:   var(--alm-text-sm);
	cursor:      pointer;
	color:       var(--alm-color-text-primary);
}

.alm-lm-estimator__check input[type="checkbox"] {
	accent-color: var(--alm-color-navy-primary);
	margin-block-start: 0.15em;
	flex-shrink:  0;
	width:        1rem;
	height:       1rem;
}

/* Result panel */
.alm-lm-estimator__result {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-5);
}

.alm-lm-estimator__result[hidden] {
	display: none;
}

.alm-lm-estimator__result-title {
	font-size:   var(--alm-text-xl);
	font-weight: var(--alm-weight-bold);
	color:       var(--alm-color-navy-primary);
	margin:      0;
}

.alm-lm-estimator__result-cats {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-2);
}

.alm-lm-estimator__result-cats li {
	display:          flex;
	align-items:      center;
	gap:              var(--alm-space-2);
	font-size:        var(--alm-text-sm);
	color:            var(--alm-color-text-secondary);
	margin-block-end: 0;
}

.alm-lm-estimator__result-cats li::before {
	content:         "";
	display:         inline-block;
	width:           6px;
	height:          6px;
	border-radius:   50%;
	background-color: var(--alm-color-sand);
	flex-shrink:     0;
}

.alm-lm-estimator__disclaimer {
	font-size:   var(--alm-text-xs);
	color:       var(--alm-color-text-muted);
	margin-block: 0;
	font-style:  italic;
}

.alm-lm-estimator__result-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--alm-space-3);
}

.alm-lm-estimator__reset {
	background:  none;
	border:      none;
	color:       var(--alm-color-text-muted);
	font-size:   var(--alm-text-sm);
	cursor:      pointer;
	padding:     0;
	text-decoration: underline;
	text-underline-offset: 3px;
	align-self:  flex-start;
}

.alm-lm-estimator__reset:hover {
	color: var(--alm-color-text-primary);
}

.alm-lm-estimator__reset:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 7 — DELIVERY
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-delivery__areas-wrap {
	margin-block-end: var(--alm-space-6);
}

.alm-lm-delivery__areas {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:                   var(--alm-space-3);
	list-style:            none;
	margin:                0;
	padding:               0;
}

.alm-lm-delivery__area {
	display:          flex;
	align-items:      center;
	gap:              var(--alm-space-2);
	font-size:        var(--alm-text-sm);
	font-weight:      var(--alm-weight-medium);
	padding:          var(--alm-space-2-5) var(--alm-space-4);
	background-color: var(--alm-color-surface-subtle);
	border-radius:    var(--alm-radius-full);
	color:            var(--alm-color-text-primary);
	margin-block-end: 0;
}

.alm-lm-delivery__area svg {
	color:      var(--alm-color-success);
	flex-shrink: 0;
}

.alm-lm-delivery__neutral {
	font-size:        var(--alm-text-md);
	color:            var(--alm-color-text-secondary);
	max-width:        36rem;
	margin-block-end: var(--alm-space-6);
}

.alm-lm-delivery__footnote {
	font-size:    var(--alm-text-xs);
	color:        var(--alm-color-text-muted);
	margin-block: var(--alm-space-4) var(--alm-space-6);
	font-style:   italic;
}

.alm-lm-delivery__action {
	margin-block-start: var(--alm-space-2);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 8 — FAQ
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-faq__accordion {
	display:        flex;
	flex-direction: column;
	gap:            0;
	border:         var(--alm-border-standard);
	border-radius:  var(--alm-radius-xl);
	overflow:       hidden;
}

.alm-lm-faq__item {
	border-bottom: var(--alm-border-standard);
}

.alm-lm-faq__item:last-child {
	border-bottom: none;
}

/* Reset browser default <details> / <summary> markers */
.alm-lm-faq__item > summary {
	list-style: none;
}

.alm-lm-faq__item > summary::-webkit-details-marker {
	display: none;
}

.alm-lm-faq__question {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         var(--alm-space-5) var(--alm-space-6);
	font-family:     var(--alm-font-arabic);
	font-size:       var(--alm-text-base);
	font-weight:     var(--alm-weight-semibold);
	color:           var(--alm-color-text-primary);
	text-align:      start;
	cursor:          pointer;
	gap:             var(--alm-space-4);
	transition:      background-color var(--alm-duration-fast) var(--alm-easing-standard);
	min-height:      44px;
}

.alm-lm-faq__question:hover {
	background-color: var(--alm-color-surface-subtle);
}

.alm-lm-faq__question:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: calc(-1 * var(--alm-focus-ring-offset));
}

.alm-lm-faq__item[open] > .alm-lm-faq__question {
	background-color: var(--alm-color-surface-subtle);
	color:            var(--alm-color-navy-primary);
}

.alm-lm-faq__chevron {
	flex-shrink: 0;
	color:       var(--alm-color-text-muted);
	transition:  transform var(--alm-duration-base) var(--alm-easing-standard);
}

.alm-lm-faq__item[open] > .alm-lm-faq__question .alm-lm-faq__chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.alm-lm-faq__chevron {
		transition: none;
	}
}

.alm-lm-faq__panel {
	padding:          0 var(--alm-space-6) var(--alm-space-5);
	background-color: var(--alm-color-surface-subtle);
}

.alm-lm-faq__answer {
	color:       var(--alm-color-text-secondary);
	font-size:   var(--alm-text-sm);
	line-height: var(--alm-leading-relaxed);
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 9 — FINAL CTA
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-final-cta {
	background-color: var(--alm-color-sand-light);
	text-align:       center;
}

.alm-lm-final-cta__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--alm-space-6);
	max-width:      36rem;
	margin-inline:  auto;
}

.alm-lm-final-cta__heading {
	font-size:   clamp(1.5rem, 4vw, 2.25rem);
	font-weight: var(--alm-weight-bold);
	color:       var(--alm-color-navy-primary);
	margin:      0;
}

.alm-lm-final-cta__body {
	color:       var(--alm-color-text-secondary);
	font-size:   var(--alm-text-md);
	margin-block: 0;
}

.alm-lm-final-cta__actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--alm-space-4);
	justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 10 — MOBILE STICKY CTA
   ══════════════════════════════════════════════════════════════════ */

.alm-lm-sticky-cta {
	position:   fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index:    var(--alm-z-sticky);
	background-color: var(--alm-color-surface-raised);
	border-top: var(--alm-border-standard);
	box-shadow: 0 -4px 16px rgba(14, 34, 58, 0.12);
	padding-block-end: env(safe-area-inset-bottom, 0px);
}

.alm-lm-sticky-cta__inner {
	display:     flex;
	gap:         var(--alm-space-3);
	padding:     var(--alm-space-3) var(--alm-space-4);
	max-width:   var(--alm-container-xl);
	margin-inline: auto;
}

.alm-lm-sticky-cta__btn {
	flex:        1;
	min-height:  44px;
}

/* Only shown on mobile */
@media (min-width: 768px) {
	.alm-lm-sticky-cta {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.alm-lm-size-card,
	.alm-lm-estimator__option {
		transition: none;
	}
}