/* ==========================================================================
   Crown Office Supplies — contact page

   Loads AFTER cos-home.css, which supplies the design system (tokens under
   .cos-page, plus .cos-btn / .cos-h1 / .cos-eyebrow / .cos-bleed / .cos-wrap).
   That reuse is deliberate: the contact page must feel like the same product
   as the homepage, and duplicating the token block would let the two drift.
   Only contact-specific components live here.

   Scoped to .cos-contact throughout so nothing can leak to other pages.
   ========================================================================== */

/* Electro renders #primary.content-area as a Bootstrap 75% column because the
   default page layout expects a sidebar. Same trap as the homepage template —
   without this the page renders ~870px wide inside a 1200px container. */
body.cos-contact-page .content-area {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Contains the .cos-bleed overhang (see cos-home.css) on this page too. */
body.cos-contact-page { overflow-x: hidden; }

@supports (overflow-x: clip) {
	body.cos-contact-page { overflow-x: clip; }
}

/* The theme prints a breadcrumb strip above the content; it fights the hero's
   full-bleed band, so it is pulled flush. */
body.cos-contact-page .breadcrumb { margin-bottom: 0; }

/* Visually-hidden heading (the "Ways to reach us" H2 is for structure only —
   the cards say it better than a label would). */
.cos-ct-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   1 — Hero
   -------------------------------------------------------------------------- */
.cos-ct-hero {
	background:
		radial-gradient(80% 120% at 12% 0%, #fbf7ff 0%, rgba(251, 247, 255, 0) 62%),
		var(--cos-surface-2);
}

.cos-ct-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.cos-page .cos-ct-hero__h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.5rem);
	margin-bottom: .35em;
}

.cos-ct-hero .cos-lead { margin-bottom: 22px; }

/* Live open/closed badge. The dot carries the state redundantly with the
   label, so it never relies on colour alone. */
.cos-ct-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 15px 8px 13px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	border: 1px solid var(--cos-line-strong);
	background: var(--cos-surface);
	color: var(--cos-text);
}

.cos-ct-status__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cos-muted);
	flex: none;
}

.cos-ct-status.is-open {
	border-color: rgba(22, 141, 91, .3);
	background: #f0faf5;
	color: #14603f;
}

.cos-ct-status.is-open .cos-ct-status__dot {
	background: #17a06a;
	box-shadow: 0 0 0 4px rgba(23, 160, 106, .18);
}

/* The phone panel — the single largest actionable element on the page,
   because "call us" is the answer for most people who land here. */
.cos-ct-call {
	position: relative;
	padding: clamp(26px, 3vw, 38px);
	border-radius: var(--cos-r-lg);
	background: linear-gradient(155deg, var(--cos-navy-700) 0%, var(--cos-navy) 60%, #1d0533 100%);
	color: #fff;
	box-shadow: 0 20px 50px -22px rgba(46, 9, 78, .6);
	overflow: hidden;
}

/* Soft brand glow, pinned to the panel rather than the bleed padding box. */
.cos-ct-call::before {
	content: "";
	position: absolute;
	top: -55%;
	right: -25%;
	width: 78%;
	height: 150%;
	background: radial-gradient(closest-side, rgba(254, 215, 0, .22), rgba(254, 215, 0, 0));
	pointer-events: none;
}

.cos-ct-call > * { position: relative; }

.cos-ct-call__label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cos-yellow);
	margin-bottom: 10px;
}

.cos-page .cos-ct-call__num {
	display: inline-block;
	font-family: var(--cos-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 2.9vw, 2.3rem);
	letter-spacing: -.03em;
	line-height: 1.1;
	color: #fff;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color .25s ease;
}

.cos-page .cos-ct-call__num:hover,
.cos-page .cos-ct-call__num:focus { color: var(--cos-yellow); }

/* The chat trigger that replaced the phone number (2026-07-22). Styled as a
   button rather than inheriting .cos-ct-call__num's plain-text look: it is an
   action, not a value you can read off and dial. Kept on the same visual tier
   so the card still has one obvious thing to do.

   `[hidden]` must be re-asserted — a display rule on the class would otherwise
   beat the attribute and the button would show even when Intercom is absent,
   which is the one failure this whole pattern exists to prevent. */
.cos-page .cos-ct-call__chat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--cos-yellow);
	color: var(--cos-ink);
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	letter-spacing: -.01em;
	cursor: pointer;
	transition: transform .3s var(--cos-ease), box-shadow .3s var(--cos-ease);
}

.cos-page .cos-ct-call__chat:hover,
.cos-page .cos-ct-call__chat:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--cos-shadow-yellow);
}

.cos-page .cos-ct-call__chat[hidden] { display: none; }

.cos-page .cos-ct-call__meta a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--cos-yellow);
	text-underline-offset: 3px;
}

.cos-ct-call__meta {
	display: block;
	margin-top: 12px;
	font-size: .85rem;
	color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   2 — Ways to reach us
   -------------------------------------------------------------------------- */
.cos-ct-ways { background: var(--cos-surface); }

/* Three cards again as of 2026-07-22 pm: chat, email, then phone. The phone
   card came back at the owner's request but stays LAST and is visually
   de-emphasised below — the order is the message. */
.cos-ct-ways__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* The phone card is a fallback, not a peer of the two staffed channels, so it
   reads one step quieter: no lift on hover, muted icon, lighter number. */
.cos-page .cos-ct-way--phone {
	background: transparent;
	border-style: dashed;
}

.cos-page .cos-ct-way--phone .cos-ct-way__v {
	color: var(--cos-muted);
	font-size: 1.05rem;
}

.cos-page .cos-ct-way--phone .cos-ct-way__icon {
	background: var(--cos-surface-3);
	color: var(--cos-muted);
}

.cos-page .cos-ct-way {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 26px 24px 24px;
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	background: var(--cos-surface);
	text-align: left;
	text-decoration: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: transform .5s var(--cos-ease), box-shadow .5s var(--cos-ease), border-color .3s ease;
}

.cos-page .cos-ct-way:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 10px rgba(22, 9, 31, .05), 0 26px 50px -22px rgba(46, 9, 78, .32);
	border-color: var(--cos-line-strong);
	text-decoration: none;
}

.cos-page .cos-ct-way:focus-visible {
	outline: 3px solid var(--cos-yellow);
	outline-offset: 3px;
}

.cos-ct-way__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: var(--cos-yellow-soft);
	color: var(--cos-navy);
	transition: background-color .3s ease, color .3s ease;
}

.cos-ct-way__icon svg { width: 22px; height: 22px; }

.cos-page .cos-ct-way:hover .cos-ct-way__icon {
	background: var(--cos-yellow);
	color: var(--cos-navy);
}

.cos-ct-way__t {
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -.02em;
	color: var(--cos-ink);
}

.cos-ct-way__v {
	font-weight: 650;
	font-size: 1rem;
	color: var(--cos-navy);
	font-variant-numeric: tabular-nums;
}

/* Long address, narrow column: allow it to break rather than overflow. */
.cos-ct-way__v--email {
	font-size: .9rem;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.cos-ct-way__d {
	margin-top: 6px;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--cos-muted);
}

.cos-ct-way__go {
	margin-top: 16px;
	font-size: .82rem;
	font-weight: 650;
	color: var(--cos-navy);
	opacity: .5;
	transition: opacity .3s ease, transform .4s var(--cos-ease);
}

.cos-page .cos-ct-way:hover .cos-ct-way__go {
	opacity: 1;
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   3 — Route by reason
   -------------------------------------------------------------------------- */
.cos-ct-routes { background: var(--cos-surface-2); }

.cos-ct-routes__grid {
	display: grid;
	gap: 14px;
}

.cos-page .cos-ct-route {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r);
	background: var(--cos-surface);
	text-decoration: none;
	transition: transform .45s var(--cos-ease), box-shadow .45s var(--cos-ease), border-color .3s ease;
}

.cos-page .cos-ct-route:hover {
	transform: translateX(4px);
	box-shadow: 0 3px 8px rgba(22, 9, 31, .04), 0 18px 36px -20px rgba(46, 9, 78, .30);
	border-color: var(--cos-line-strong);
	text-decoration: none;
}

.cos-page .cos-ct-route:focus-visible {
	outline: 3px solid var(--cos-yellow);
	outline-offset: 3px;
}

.cos-ct-route__n {
	font-family: var(--cos-font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	color: var(--cos-muted);
}

.cos-ct-route__t {
	display: block;
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -.02em;
	color: var(--cos-ink);
	margin-bottom: 3px;
}

.cos-ct-route__d {
	display: block;
	font-size: .89rem;
	line-height: 1.55;
	color: var(--cos-muted);
}

.cos-ct-route__alt {
	color: var(--cos-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cos-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cos-ct-route__go {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cos-surface-3);
	color: var(--cos-navy);
	flex: none;
	transition: background-color .3s ease, transform .45s var(--cos-ease);
}

.cos-ct-route__go svg { width: 17px; height: 17px; }

.cos-page .cos-ct-route:hover .cos-ct-route__go {
	background: var(--cos-yellow);
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4 — Visit / map
   -------------------------------------------------------------------------- */
.cos-ct-visit { background: var(--cos-surface); }

.cos-ct-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 3.5vw, 44px);
	align-items: stretch;
}

.cos-ct-panel { align-self: center; }

.cos-page .cos-ct-visit__h { margin-bottom: .4em; }

.cos-ct-addr {
	font-style: normal;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--cos-text);
	margin: 0 0 12px;
}

.cos-ct-hours__h {
	font-family: var(--cos-font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin: 30px 0 10px;
}

/* The old page built this out of floated spans padded with hard-coded
   whitespace, which is why the columns never lined up. A two-column grid per
   row cannot drift. */
.cos-ct-hours {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cos-line);
	max-width: 380px;
}

.cos-ct-hours__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--cos-line);
	font-size: .92rem;
}

.cos-ct-hours__d { color: var(--cos-text); }
.cos-ct-hours__t { color: var(--cos-muted); font-variant-numeric: tabular-nums; }

/* Today's row is emphasised so the hours table answers "are they open?"
   at a glance, not just "what are the hours in general?". */
.cos-ct-hours__row.is-today {
	font-weight: 700;
	color: var(--cos-ink);
}

.cos-ct-hours__row.is-today .cos-ct-hours__d,
.cos-ct-hours__row.is-today .cos-ct-hours__t { color: var(--cos-ink); }

.cos-ct-hours__row.is-today .cos-ct-hours__d::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--cos-yellow);
	vertical-align: middle;
}

.cos-ct-hours__tz {
	margin-top: 12px;
	font-size: .8rem;
	color: var(--cos-muted);
}

.cos-ct-map {
	position: relative;
	min-height: 380px;
	border-radius: var(--cos-r-lg);
	overflow: hidden;
	border: 1px solid var(--cos-line);
	box-shadow: 0 2px 6px rgba(22, 9, 31, .05), 0 24px 48px -28px rgba(46, 9, 78, .35);
	/* Google's embed has a hard white background; the tint stops it flashing
	   as a bright rectangle before the tiles paint. */
	background: var(--cos-surface-3);
}

.cos-ct-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --------------------------------------------------------------------------
   5 — Closing CTA
   -------------------------------------------------------------------------- */
.cos-ct-cta {
	background: linear-gradient(140deg, var(--cos-navy-700) 0%, var(--cos-navy) 55%, #1c0431 100%);
	color: #fff;
	text-align: center;
}

.cos-ct-cta__inner { max-width: 720px; }

.cos-page .cos-ct-cta .cos-h2 { color: #fff; }
.cos-ct-cta .cos-lead { color: rgba(255, 255, 255, .8); margin-inline: auto; }

.cos-ct-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.cos-ct-hero__grid,
	.cos-ct-visit__grid { grid-template-columns: minmax(0, 1fr); }

	.cos-ct-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cos-ct-map { min-height: 300px; }

	.cos-ct-hours { max-width: none; }
}

@media (max-width: 700px) {
	.cos-ct-ways__grid { grid-template-columns: minmax(0, 1fr); }

	/* Drop the numeral rather than let the three-column row crush the copy. */
	.cos-page .cos-ct-route { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
	.cos-ct-route__n { display: none; }

	.cos-ct-cta__actions .cos-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cos-page .cos-ct-way,
	.cos-page .cos-ct-route,
	.cos-ct-way__go,
	.cos-ct-route__go { transition: none; }

	.cos-page .cos-ct-way:hover,
	.cos-page .cos-ct-route:hover { transform: none; }
}