/**
 * MDC primitives.
 *
 * Every class is prefixed mdc- so nothing collides with Elementor, Hello
 * Elementor or a plugin. Apply them in Elementor's "CSS Classes" field on a
 * container or widget rather than restyling each widget individually; that is
 * what keeps 60 pages from carrying 60 divergent button designs.
 *
 * The journey rules at the bottom are load-bearing. See DEC-0004.
 */

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.mdc-wrap {
	max-width: var(--mdc-wrap);
	margin-inline: auto;
	padding-inline: var(--mdc-gutter);
}

.mdc-stack > * + * { margin-top: var(--mdc-s-5); }
.mdc-stack-tight > * + * { margin-top: var(--mdc-s-3); }
.mdc-stack-loose > * + * { margin-top: var(--mdc-s-7); }

/* -----------------------------------------------------------------------------
   Buttons
   .mdc-btn is the shape; one modifier supplies the colour.
   -------------------------------------------------------------------------- */

.mdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 13px 26px;
	border: 1.5px solid transparent;
	border-radius: var(--mdc-r-btn);
	font: 700 .98rem/1.2 var(--mdc-f-body);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s, border-color .18s, color .18s;
}

/* Yellow on near-black: 13.6:1. The primary action. */
.mdc-btn-primary {
	background: var(--mdc-yellow);
	color: #14173A;
}

.mdc-btn-primary:hover,
.mdc-btn-primary:focus-visible {
	background: var(--mdc-yellow-soft);
}

/* Red is the secondary action and the selected state. White on Red 700 is
   6.5:1, which is why the button uses Red 700 and not brand red. */
.mdc-btn-accent {
	background: var(--mdc-red-700);
	color: #fff;
}

.mdc-btn-accent:hover,
.mdc-btn-accent:focus-visible {
	background: var(--mdc-red);
}

.mdc-btn-ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

.mdc-btn-ghost:hover,
.mdc-btn-ghost:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, .06);
}

.mdc-on-light .mdc-btn-ghost {
	color: var(--mdc-blue);
	border-color: rgba(26, 32, 109, .35);
}

.mdc-on-light .mdc-btn-ghost:hover,
.mdc-on-light .mdc-btn-ghost:focus-visible {
	border-color: var(--mdc-blue);
	background: var(--mdc-blue-50);
}

.mdc-btn-block { width: 100%; }

/* -----------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.mdc-panel {
	background: var(--mdc-panel);
	border: 1px solid var(--mdc-line-2);
	border-radius: var(--mdc-r-panel);
	padding: var(--mdc-s-7);
}

.mdc-card {
	background: var(--mdc-card);
	border: 1px solid var(--mdc-line-2);
	border-radius: var(--mdc-r-card);
	padding: var(--mdc-s-5);
	height: 100%;
}

/* A card that is one big link. The anchor covers the card, so the title stays
   the accessible name and the rest of the card is not announced as a link. */
.mdc-card-link { position: relative; transition: border-color .18s, background-color .18s; }
.mdc-card-link:hover,
.mdc-card-link:focus-within { border-color: var(--mdc-line); background: var(--mdc-card-2); }
.mdc-card-link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

@media (max-width: 767px) {
	.mdc-panel { padding: var(--mdc-s-5); }
}

/* -----------------------------------------------------------------------------
   Tags and content labels
   Colour never carries meaning alone: each label has text, and the three
   content labels also carry an icon. Required by the brand constraints.
   -------------------------------------------------------------------------- */

.mdc-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.mdc-tag-neutral { background: var(--mdc-raise); color: var(--mdc-text); }
.mdc-tag-yellow  { background: var(--mdc-yellow-100); color: #3D3200; }
.mdc-tag-blue    { background: var(--mdc-blue-600); color: #fff; }

/* The three content kinds. Keep these three and only these three. */
.mdc-label-official  { background: var(--mdc-blue-600); color: #fff; }
.mdc-label-guidance  { background: var(--mdc-yellow-100); color: #3D3200; }
.mdc-label-community { background: rgba(0, 165, 81, .18); color: var(--mdc-green-300); }

.mdc-on-light .mdc-label-community { background: var(--mdc-green-50); color: var(--mdc-green-700); }

/* Official vs community source badge on directory cards. */
.mdc-badge-official  { background: var(--mdc-blue-600); color: #fff; }
.mdc-badge-community { background: rgba(0, 165, 81, .18); color: var(--mdc-green-300); }
.mdc-on-light .mdc-badge-community { background: var(--mdc-green-50); color: var(--mdc-green-700); }

/* -----------------------------------------------------------------------------
   Callouts
   One shape, four intents. The left border plus the label text means the
   intent reads without relying on colour.
   -------------------------------------------------------------------------- */

.mdc-callout {
	border-radius: var(--mdc-r-card);
	border-left: 4px solid var(--mdc-line);
	padding: var(--mdc-s-5);
	background: var(--mdc-card);
}

.mdc-callout-official  { border-left-color: var(--mdc-blue-300); }
.mdc-callout-guidance  { border-left-color: var(--mdc-yellow); }
.mdc-callout-community { border-left-color: var(--mdc-green-300); }
.mdc-callout-warning   { border-left-color: var(--mdc-red-300); }

.mdc-callout-t {
	font: 700 .82rem/1.4 var(--mdc-f-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mdc-muted);
	margin-bottom: var(--mdc-s-2);
}

/* -----------------------------------------------------------------------------
   Last reviewed
   Appears on every practical guide and every directory card. Its presence is
   the visible half of the trust claim; do not make it optional in a template.
   -------------------------------------------------------------------------- */

.mdc-reviewed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .86rem;
	color: var(--mdc-faint);
}

.mdc-reviewed::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mdc-green);
	flex: none;
}

/* -----------------------------------------------------------------------------
   Official source list
   -------------------------------------------------------------------------- */

.mdc-sources { list-style: none; margin: 0; padding: 0; }
.mdc-sources li + li { margin-top: var(--mdc-s-3); padding-top: var(--mdc-s-3); border-top: 1px solid var(--mdc-line-2); }
.mdc-sources a { font-weight: 700; }
.mdc-sources .mdc-src-org { display: block; font-size: .84rem; color: var(--mdc-faint); }

/* An external link gets a marker so a government link is obviously leaving. */
.mdc-ext::after {
	content: " ↗";
	font-size: .85em;
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Empty states
   Every filtered loop needs one. An empty result that says nothing reads as a
   broken page.
   -------------------------------------------------------------------------- */

.mdc-empty {
	border: 1px dashed var(--mdc-line);
	border-radius: var(--mdc-r-card);
	padding: var(--mdc-s-7) var(--mdc-s-5);
	text-align: center;
	color: var(--mdc-muted);
}

/* -----------------------------------------------------------------------------
   Filter chips
   Rendered server-side from the GET parameters. Each chip is a link that
   removes its own parameter, so filtering works without JavaScript.
   -------------------------------------------------------------------------- */

.mdc-chips { display: flex; flex-wrap: wrap; gap: var(--mdc-s-2); align-items: center; }

.mdc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--mdc-line);
	background: var(--mdc-card);
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
}

.mdc-chip[aria-pressed="true"],
.mdc-chip-active {
	background: var(--mdc-red-700);
	border-color: var(--mdc-red-700);
	color: #fff;
}

.mdc-chip-remove::after { content: "×"; font-size: 1.1em; line-height: 1; }

/* -----------------------------------------------------------------------------
   Journey visibility — DEC-0004
   -----------------------------------------------------------------------------
   The server sends every variant. These rules reveal the one that matches the
   attributes mdc-journey.js puts on <html> before first paint. The HTML is
   byte-identical for every visitor, so Nginx FastCGI cache stays whole.
   Do not replace any of this with a server-side cookie condition.

   With no JavaScript, and before any choice is made, no data-journey attribute
   exists, so the "default" variant shows and the rest stay hidden. The page
   must therefore always ship a [data-mdc-variant="default"] block.
   -------------------------------------------------------------------------- */

[data-mdc-variant],
[data-mdc-place-variant] {
	display: none;
}

[data-mdc-variant="default"] {
	display: revert;
}

html[data-journey] [data-mdc-variant="default"] { display: none; }
html[data-journey="planning"] [data-mdc-variant="planning"] { display: revert; }
html[data-journey="arrived"]  [data-mdc-variant="arrived"]  { display: revert; }
html[data-journey="settled"]  [data-mdc-variant="settled"]  { display: revert; }

/* Place variants cannot be matched in CSS, because that would mean one rule
   per city slug and a stylesheet edit every time a city is added. The script
   marks the matching block instead. There is deliberately no default place
   block: before a place is chosen, none of them show. */
[data-mdc-place-variant].mdc-is-current { display: revert; }

/* The location question appears only after a journey has been chosen, and the
   personalized start block only after the location question is answered. */
[data-mdc-step="location"],
[data-mdc-step="start"] { display: none; }

html[data-journey-answered] [data-mdc-step="location"] { display: revert; }
html[data-place-answered]   [data-mdc-step="start"]    { display: revert; }

/* A reset control is pointless until there is something to reset. */
[data-mdc-reset] { display: none; }
html[data-journey-answered] [data-mdc-reset] { display: inline-flex; }

/* The selected journey and place controls show as chosen. */
html[data-journey="planning"] [data-mdc-journey="planning"],
html[data-journey="arrived"]  [data-mdc-journey="arrived"],
html[data-journey="settled"]  [data-mdc-journey="settled"] {
	background: var(--mdc-red-700);
	border-color: var(--mdc-red-700);
	color: #fff;
}