/* Location pages (WR-11): hub, provinces, towns. Loaded only on location pages. */

.rn-page--location { padding-block-end: clamp(1.5rem, 4vw, 2.5rem); }

/* Location FAQs: visible question and answer cards (rn-faq convention, read by inc/seo.php) */
.rn-prose .rn-faq { counter-reset: rnfaq; margin-block-start: 1.25rem; padding: .35rem clamp(1.1rem, 3vw, 1.75rem) 1.1rem; background: #fff; border-radius: var(--wp--custom--radius--l); box-shadow: var(--rn-shadow); }
.rn-prose .rn-faq > * { margin: 0; }
.rn-prose .rn-faq h3 { counter-increment: rnfaq; position: relative; margin-block-start: 0; padding: 1.15rem 0 .4rem 2.4rem; font-size: var(--wp--preset--font-size--m); line-height: 1.4; color: var(--rn-ink); }
.rn-prose .rn-faq h3:not(:first-child) { margin-top: .9rem; border-top: 1px dashed #D6EAE4; }
.rn-prose .rn-faq h3::before { content: counter(rnfaq, decimal-leading-zero); position: absolute; left: 0; top: 1.3rem; font-size: var(--wp--preset--font-size--xs); font-weight: 700; color: var(--rn-teal); font-variant-numeric: tabular-nums; }
.rn-prose .rn-faq p { padding-left: 2.4rem; }
.rn-prose .rn-faq p + p { margin-top: .6rem; }

/* Links section under the content */
.rn-loc-wrap { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.rn-loc { box-sizing: border-box; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--wp--custom--radius--l); background: #F3FAF7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--rn-ring); }
.rn-loc__title { position: relative; margin: 0 0 1.1rem; padding-top: 1.1rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--rn-ink); }
.rn-loc__title::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--rn-teal), #A4E5DC); }
.rn-loc__title:not(:first-child) { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.rn-loc__lede { margin: -.4rem 0 1.25rem; max-width: 60ch; }

.rn-loc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.rn-loc-grid--provinces { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }

.rn-loc-card a { box-sizing: border-box; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .2rem; min-height: 4.5rem; padding: 1rem 3.25rem 1rem 1.2rem; border-radius: var(--wp--custom--radius--m); background: #fff; color: var(--rn-ink); text-decoration: none; box-shadow: var(--rn-shadow); transition: transform .25s var(--rn-ease), box-shadow .25s var(--rn-ease), color .2s; }
.rn-loc-card a:hover { transform: translateY(-2px); box-shadow: var(--rn-shadow-lift); color: var(--rn-teal-ink); }
.rn-loc-card__name { font-weight: 700; line-height: 1.3; }
.rn-loc-card__meta { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); }
.rn-loc-card__arrow { position: absolute; right: 1rem; top: 50%; width: 2rem; height: 2rem; padding: .45rem; box-sizing: border-box; margin-top: -1rem; border-radius: 50%; background: #E2F4EE; color: var(--rn-teal-ink); transition: transform .25s var(--rn-ease); }
.rn-loc-card a:hover .rn-loc-card__arrow { transform: translateX(3px); }

/* Province cards on the hub get a pastel tint */
.rn-loc-grid--provinces .rn-loc-card a { min-height: 6.5rem; padding: 1.35rem 3.5rem 1.35rem 1.4rem; background: var(--rn-tint, var(--rn-mint)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), var(--rn-ring); color: var(--rn-tint-ink, var(--rn-ink)); }
.rn-loc-grid--provinces .rn-loc-card a:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), var(--rn-shadow-lift); }
.rn-loc-grid--provinces .rn-loc-card__name { font-size: var(--wp--preset--font-size--l); }
.rn-loc-grid--provinces .rn-loc-card__meta { align-self: flex-start; margin-top: .35rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .85); font-weight: 600; font-size: var(--wp--preset--font-size--xs); color: var(--rn-tint-ink, var(--rn-teal-ink)); }
.rn-loc-grid--provinces .rn-loc-card__arrow { background: #fff; }

/* Popular products */
.rn-loc-grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
@media (max-width: 600px) { .rn-loc-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .rn-loc-product a { font-size: var(--wp--preset--font-size--s); } .rn-loc-product__img img { padding: .6rem; } }
.rn-loc-product a { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: .7rem; padding: .6rem .6rem 1rem; border-radius: var(--wp--custom--radius--l); background: #fff; color: var(--rn-ink); text-decoration: none; font-weight: 600; box-shadow: var(--rn-shadow); transition: transform .25s var(--rn-ease), box-shadow .25s var(--rn-ease), color .2s; }
.rn-loc-product a:hover { transform: translateY(-3px); box-shadow: var(--rn-shadow-lift); color: var(--rn-teal-ink); }
.rn-loc-product__img { display: block; border-radius: calc(var(--wp--custom--radius--l) - .4rem); background: var(--rn-mint); }
.rn-loc-product__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 1rem; box-sizing: border-box; filter: drop-shadow(0 12px 12px rgba(23, 48, 46, .14)); }
.rn-loc-product__name { padding-inline: .5rem; line-height: 1.35; }

.rn-loc__up { margin: 1.5rem 0 0; }
.rn-loc__up:first-child { margin: 0 0 .5rem; }
.rn-loc__up a, .rn-loc__faq a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; background: #fff; color: var(--rn-teal-ink); font-weight: 600; font-size: var(--wp--preset--font-size--s); text-decoration: none; box-shadow: inset 0 0 0 1.5px #8FDDD3; transition: box-shadow .2s, background-color .2s; }
.rn-loc__up a:hover, .rn-loc__faq a:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--rn-teal-ink); }
.rn-loc__faq { margin: clamp(1.5rem, 4vw, 2rem) 0 0; }

@media (prefers-reduced-motion: reduce) {
	.rn-loc-card a, .rn-loc-product a, .rn-loc-card__arrow { transition: none; }
	.rn-loc-card a:hover, .rn-loc-product a:hover { transform: none; }
}