/*
 * Visit 2026 — page-visit-2026.php
 *
 * Loads after css/home-2026.css and shares its primitives (.rg-wrap, .rg-sec,
 * .rg-disp, .rg-label, .rg-subhead, .rg-btn, .rg-more, .rg-status, .rg-ctas).
 * Everything new is scoped under .rg-visit. Unlike the homepage this page is
 * cream by default, with one ink chapter, so the shared buttons and status dots
 * are re-coloured for a light ground here.
 *
 * Type roles are the live ones only: Graphik names the thing, Matter says what
 * it is, mono labels it.
 */

.rg-visit { --cream: #f8f5f0; --muted-l: #6d675e; --accent: #8a6a4f; --open-l: #5f7a2a; --hair: rgb(28 28 28 / .16); background: var(--cream); color: var(--ink); }
.rg-visit .rg-arr { width: 18px; height: 18px; flex: none; }
.rg-visit #hours, .rg-visit #plan, .rg-visit #find-us, .rg-visit #saturday { scroll-margin-top: var(--rg-header-h, 96px); }
.rg-visit p, .rg-visit ul, .rg-visit dl, .rg-visit dd, .rg-visit figure { margin: 0; }
.rg-visit ul { padding: 0; list-style: none; }
.rg-visit li { list-style: none; }
.rg-visit .rg-sec { padding-block: 112px; }

/* A cream page: the header's translucent bands read as washed-out grey, so they go solid (as on checkout). */
body.rg-visit26-page div.mainmenu,
body.rg-visit26-page div.breadcrumbs,
body.rg-visit26-page.scroll div.mainmenu,
body.rg-visit26-page.scroll div.breadcrumbs { background: #1c1c1c; }

/* The shared buttons and live dot, on a light ground */
.rg-visit .rg-btn { background: var(--ink); color: var(--cream); }
.rg-visit .rg-more { color: var(--ink); }
.rg-visit .rg-more:hover { background: var(--ink); color: var(--cream); }
/* One short line, never two: the dot says open or closed, the words say when. */
.rg-visit .rg-status { white-space: nowrap; text-transform: uppercase; font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; }
.rg-visit .rg-status i { background: var(--muted-l); }
.rg-visit .rg-status[data-state="open"] i { background: var(--open-l); box-shadow: 0 0 0 4px rgb(95 122 42 / .18); }
.rg-visit .rg-status[data-state="soon"] i { background: var(--tan); box-shadow: none; }
.rg-visit .rg-status[data-state="appt"] i { background: var(--tan); }

/* ---- 1. Opener ---- */
.rg-visit .vs-open .rg-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: stretch; padding-block: 56px 72px; }
.rg-visit .vs-copy { display: flex; flex-direction: column; min-width: 0; }
.rg-visit .vs-h1 { font-size: 168px; margin-top: 10px; }
.rg-visit .vs-lead { margin-top: 22px; max-width: 40ch; font: 400 20px/1.45 var(--body); }
.rg-visit .vs-now { margin-top: auto; padding-top: 36px; }
.rg-visit .vs-row { display: grid; grid-template-columns: 150px 1fr; gap: 6px 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ink); }
.rg-visit .vs-row > .rg-label { color: var(--muted-l); }
.rg-visit .vs-rows { border-bottom: 1px solid var(--ink); }
/* Any change to the usual hours: one outlined notice under the two live lines. Tan rule (the house accent; there is no orange in the palette), no fill
   (house chrome: 4px corners, 1px rules, no raised panels). It jumps to the detail in the hours. */
.rg-visit .vs-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--tan); border-radius: 4px; text-decoration: none; color: var(--ink); }
.rg-visit .vs-cal { width: 26px; height: 26px; color: var(--accent); }
.rg-visit .vs-alert .rg-label { font-size: 12px; color: var(--accent); }
.rg-visit .vs-what { display: block; font: 400 17px/1.35 var(--body); }
.rg-visit .vs-alert .rg-arr { transition: transform .2s; }
.rg-visit .vs-alert:hover .rg-arr { transform: translateX(4px); }
.rg-visit .vs-addr { margin-top: 24px; font: 400 18px/1.5 var(--body); }
.rg-visit .vs-addr a, .rg-visit .vs-facts a { text-decoration: none; }
.rg-visit .vs-addr a:hover, .rg-visit .vs-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rg-visit .vs-open .rg-ctas { margin-top: 22px; }
.rg-visit .vs-door { position: relative; overflow: hidden; border-radius: 4px; background: var(--cream-2); min-height: 560px; }
.rg-visit .vs-door img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 62% 50%; }
.rg-visit .vs-door figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 16px; background: linear-gradient(transparent, rgb(0 0 0 / .6)); color: var(--cream); font: 500 14px/1.4 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; }

/* ---- 2. Opening hours ---- */
.rg-visit .vs-week { border-top: 1px solid var(--ink); }
.rg-visit .vs-shead { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; }
.rg-visit .vs-h2 { font-size: 112px; margin-top: 14px; }
.rg-visit .vs-h2-l { font-size: 132px; margin-top: 14px; }
.rg-visit .vs-shead p { max-width: 44ch; font: 400 20px/1.45 var(--body); }
/* One hours area. A switch picks the café or the bike shop, so only one week is ever on screen. */
.rg-visit .vs-hrs { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; margin-top: 56px; align-items: start; }
.rg-visit .vs-pick { display: inline-flex; border: 1px solid var(--ink); border-radius: 100px; padding: 4px; }
/* The tag is named: .elementor-kit-43 button would otherwise put Exo 2 and its own colours on these. */
.rg-visit button.vs-pick-btn { min-height: 48px; padding: 0 26px; border: 0; border-radius: 100px; background: none; color: var(--ink); cursor: pointer; font: 500 18px/1 var(--mono-med); letter-spacing: .05em; text-transform: uppercase; box-shadow: none; }
.rg-visit button.vs-pick-btn:hover, .rg-visit button.vs-pick-btn:focus { background: none; color: var(--ink); }
.rg-visit button.vs-pick-btn[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.rg-visit .vs-live { margin-top: 28px; }
.rg-visit .vs-ahead { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--ink); max-width: 420px; }
.rg-visit .vs-ahead + .vs-ahead { margin-top: 24px; }
.rg-visit .vs-ahead .rg-label { color: var(--accent); }
.rg-visit .vs-when { margin-top: 10px; font-size: 44px; line-height: .92; }
.rg-visit .vs-note { margin-top: 10px; font: 400 18px/1.45 var(--body); }
.rg-visit .vs-days { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.rg-visit .vs-days li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; align-items: baseline; padding: 15px 0; }
.rg-visit .vs-days li + li { border-top: 1px solid var(--hair); }
.rg-visit .vs-d { font-size: 36px; line-height: .95; }
.rg-visit .vs-d em { margin-left: 12px; font: 500 12px/1 var(--mono-med); font-style: normal; letter-spacing: .14em; color: var(--muted-l); vertical-align: .45em; }
.rg-visit .vs-h { font: 400 20px/1.3 var(--body); font-variant-numeric: tabular-nums; text-align: right; }
.rg-visit .vs-off .vs-d, .rg-visit .vs-off .vs-h { color: var(--muted-l); }
.rg-visit .vs-x { grid-column: 1 / -1; font: 400 16px/1.4 var(--body); color: var(--accent); }
.rg-visit .vs-tz { margin-top: 16px; font: 400 15px/1.5 var(--body); color: var(--muted-l); }

/* ---- 3. What brings you in (ink) ---- */
.rg-visit .vs-why { background: var(--ink); color: var(--cream); }
.rg-visit .vs-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.rg-visit .vs-why .rg-label { color: var(--muted-d); }
.rg-visit .vs-list { margin-top: 56px; border-top: 1px solid var(--cream); }
.rg-visit .vs-list li { border-bottom: 1px solid var(--ink-line); }
.rg-visit .vs-list li:last-child { border-bottom-color: var(--cream); }
/* Fixed tracks: each row is its own grid, so fr/auto tracks sized to each row's words and the copy wandered. */
.rg-visit .vs-list a { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px 32px; align-items: start; padding: 26px 0; text-decoration: none; color: var(--cream); }
.rg-visit .vs-nm { font-size: 48px; line-height: .92; }
.rg-visit .vs-ln { font: 400 17px/1.5 var(--body); color: var(--cream-2); }
.rg-visit .vs-ln small { display: block; margin-top: 6px; font: 500 13px/1.5 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
.rg-visit .vs-go { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--mono-med); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.rg-visit .vs-list a:hover .vs-go { color: var(--tan); }
.rg-visit .vs-pin { position: sticky; top: calc(var(--rg-header-h, 96px) + 24px); overflow: hidden; border-radius: 4px; background: var(--ink-2); aspect-ratio: 4 / 5; }
.rg-visit .vs-pin img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }

/* ---- 4. Find us ---- */
.rg-visit .vs-here > .rg-wrap > .rg-label { color: var(--muted-l); }
.rg-visit .vs-here .vs-grid { margin-top: 56px; align-items: stretch; }
.rg-visit .vs-map { position: relative; display: block; min-height: 520px; overflow: hidden; border-radius: 4px; background: var(--cream-2); }
/* Our own drawing of the streets (images/visit-map.svg, from OpenStreetMap): sand ground, off-white roads, an ink pin. */
.rg-visit .vs-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rg-visit .vs-facts { border-top: 1px solid var(--ink); }
.rg-visit .vs-facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.rg-visit .vs-facts div:last-child { border-bottom-color: var(--ink); }
.rg-visit .vs-facts dt { font: 500 14px/1.5 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-l); }
.rg-visit .vs-facts dd { font: 400 18px/1.45 var(--body); }
.rg-visit .vs-here .rg-ctas { margin-top: 28px; }

/* ---- 5. Saturday ---- */
.rg-visit .vs-sat { position: relative; display: grid; align-items: end; min-height: 640px; background: var(--ink); color: var(--cream); overflow: hidden; }
.rg-visit .vs-sat-img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 62% 35%; }
/* Two scrims: the usual one up from the foot, and one in from the left, where the words sit. The words have
   to hold over whatever is in the frame (a white jersey, in the current photograph). */
.rg-visit .vs-sat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / 0) 80%), linear-gradient(180deg, rgb(0 0 0 / .1) 25%, rgb(0 0 0 / .8) 100%); }
.rg-visit .vs-sat .rg-wrap { position: relative; z-index: 2; width: 100%; padding-block: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; }
.rg-visit .vs-sat .rg-subhead { margin-top: 14px; }
.rg-visit .vs-skip { margin-top: 12px; font: 400 18px/1.45 var(--body); color: var(--cream-2); }
.rg-visit .vs-sat .rg-btn { background: var(--cream); color: var(--ink); }

@media (max-width: 900px) {
	.rg-visit .rg-sec { padding-block: 72px; }
	.rg-visit .rg-btn, .rg-visit .rg-more { font-size: 15px; padding: 0 20px; }
	/* Phone: the answer first (open? where?), the photograph after it. */
	.rg-visit .vs-open .rg-wrap { grid-template-columns: 1fr; gap: 32px; padding-block: 32px 56px; }
	.rg-visit .vs-h1 { font-size: 96px; }
	.rg-visit .vs-lead { margin-top: 16px; font-size: 17px; }
	.rg-visit .vs-now { padding-top: 28px; }
	.rg-visit .vs-row { grid-template-columns: 1fr; padding: 12px 0; }
	.rg-visit .rg-status { font-size: 13px; }
	.rg-visit .vs-addr { font-size: 17px; }
	.rg-visit .vs-door { min-height: 0; aspect-ratio: 4 / 3; }
	.rg-visit .vs-door figcaption { font-size: 11px; letter-spacing: .08em; white-space: nowrap; padding: 40px 14px 12px; }
	.rg-visit .vs-shead, .rg-visit .vs-grid { grid-template-columns: 1fr; gap: 24px; }
	.rg-visit .vs-h2, .rg-visit .vs-h2-l { font-size: 68px; }
	.rg-visit .vs-shead p { font-size: 17px; }
	.rg-visit .vs-hrs { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
	.rg-visit .vs-pick { display: flex; }
	.rg-visit button.vs-pick-btn { flex: 1; padding: 0 10px; font-size: 15px; }
	.rg-visit .vs-live { margin-top: 22px; }
	.rg-visit .vs-ahead { margin-top: 26px; max-width: none; }
	.rg-visit .vs-when { font-size: 36px; }
	.rg-visit .vs-note { font-size: 17px; }
	.rg-visit .vs-days li { padding: 13px 0; }
	.rg-visit .vs-d { font-size: 28px; }
	.rg-visit .vs-d em { margin-left: 8px; font-size: 10px; }
	.rg-visit .vs-h { font-size: 17px; }
	.rg-visit .vs-list { margin-top: 32px; }
	.rg-visit .vs-list a { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
	.rg-visit .vs-nm { font-size: 38px; }
	.rg-visit .vs-ln { font-size: 16px; }
	.rg-visit .vs-go { grid-column: 1; }
	.rg-visit .vs-why .vs-grid > div:first-child { display: contents; }
	.rg-visit .vs-head { order: -2; }
	.rg-visit .vs-pin { position: relative; top: 0; aspect-ratio: 4 / 3; order: -1; }
	.rg-visit .vs-here .vs-grid { margin-top: 32px; }
	.rg-visit .vs-map { min-height: 0; aspect-ratio: 4 / 3; }
	.rg-visit .vs-facts div { grid-template-columns: 1fr; padding: 14px 0; }
	.rg-visit .vs-facts dd { font-size: 17px; }
	.rg-visit .vs-sat { min-height: 520px; }
	.rg-visit .vs-sat .rg-wrap { padding-block: 32px; }
	.rg-visit .vs-sat .rg-subhead { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.rg-visit .vs-alert .rg-arr { transition: none; }
}