/* IT Support Hub inner pages as rooms in one building (inc/signs.php, page.php).
   Loaded on pages after signage.css. Each page sits in a .room--{wall} wrapper
   that sets its wall colour and carries --room, the code its section signs use.
   Hero rules repeat signage.css's selector weight (body + classes) so they win
   by coming later. */

/* ---------- Walls ---------- */
.room--yellow  { --wall-bg: var(--sign-yellow); --wall-ink: #000; --wall-sub: var(--yellow-ink); --tint: #FFF6CC; --pict-bg: #000; --pict-ink: var(--sign-yellow); }
.room--orange  { --wall-bg: var(--sign-orange); --wall-ink: #000; --wall-sub: #2B1405; --tint: #FDE6D8; --pict-bg: #000; --pict-ink: var(--sign-orange); }
.room--grey    { --wall-bg: var(--wall); --wall-ink: #000; --wall-sub: var(--ink-2); --tint: #FFF6CC; --pict-bg: #000; --pict-ink: var(--sign-yellow); }
.room--blue    { --wall-bg: var(--sign-blue); --wall-ink: #fff; --wall-sub: #D7E5FA; --tint: #E3EDF8; --pict-bg: var(--sign-blue); --pict-ink: #fff; }
.room--asphalt { --wall-bg: var(--asphalt); --wall-ink: #fff; --wall-sub: #C9CBC4; --tint: #ECEDEA; --pict-bg: var(--asphalt); --pict-ink: var(--sign-yellow); }
.room--hwy     { --wall-bg: var(--hwy); --wall-ink: #fff; --wall-sub: #D3EEDD; --tint: #E2F0E8; --pict-bg: var(--hwy); --pict-ink: #fff; }
.room--green   { --wall-bg: var(--sign-green); --wall-ink: #fff; --wall-sub: #fff; --tint: #E2F2E8; --pict-bg: var(--sign-green); --pict-ink: #fff; }
.room--black   { --wall-bg: #000; --wall-ink: #fff; --wall-sub: var(--on-dark-2); --tint: #FFF6CC; --pict-bg: #000; --pict-ink: var(--sign-yellow); }
.room--red     { --wall-bg: var(--sign-red); --wall-ink: #fff; --wall-sub: #fff; --tint: #FBE3E0; --pict-bg: var(--sign-red); --pict-ink: #fff; }
/* Light walls take black buttons; dark walls take yellow ones. */
.room--yellow, .room--orange, .room--grey { --btn-bg: #000; --btn-ink: #fff; --btn-hover: var(--asphalt); --ghost: #000; --wall-focus: #000; }
.room--blue, .room--asphalt, .room--hwy, .room--green, .room--black, .room--red { --btn-bg: var(--sign-yellow); --btn-ink: #000; --btn-hover: #FFE14D; --ghost: #fff; --wall-focus: var(--sign-yellow); }
.room { counter-reset: sec; }

/* ---------- Hero ---------- */
body .room .hero { --focus: var(--wall-focus); --ic-accent: var(--wall-ink); background: var(--wall-bg); color: var(--wall-ink); padding-bottom: clamp(40px, 5vw, 64px); }
body .room .hero .hero__lede { color: var(--wall-sub); }
body .room .hero .crumbs ol, body .room .hero .crumbs a, body .room .hero .crumbs a:hover { color: var(--wall-ink); }
body .room .hero .crumbs li + li::before { color: var(--wall-sub); }
body .room .hero .btn--light { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
body .room .hero .btn--light:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
body .room .hero .btn--ghost-light { border-color: var(--ghost); color: var(--ghost); }
body .room .hero .btn--ghost-light:hover { background: var(--ghost); color: var(--wall-bg); }
body .room .hero__media { box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 22px 40px -20px rgba(0, 0, 0, .6); }
/* Construction: a hazard stripe along the foot of the hero. */
body .room--hazard .hero::after { display: block; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(-45deg, #000 0 14px, var(--sign-yellow) 14px 28px); }

/* Door plate: pictogram, room code and zone. */
.door { margin: 0; padding: 5px; border-radius: 10px; background: #fff; color: #000; box-shadow: 0 2px 2px rgba(0, 0, 0, .18), 0 14px 26px -16px rgba(0, 0, 0, .5); }
.door__in { display: flex; align-items: center; gap: 14px; padding: 7px 16px 7px 7px; border: 2px solid #000; border-radius: 6px; }
.door__pict { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 4px; background: var(--pict-bg); color: var(--pict-ink); --ic-accent: var(--pict-ink); }
.door__pict .ic { width: 36px; height: 36px; stroke-width: 2; }
.door__id { display: flex; flex-direction: column; gap: 2px; }
.door__cap { font-family: var(--display); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.door__code { font-family: var(--display); font-size: 40px; font-weight: 900; line-height: .9; white-space: nowrap; }
.door__zone { max-width: 17em; padding-left: 14px; border-left: 2px solid #000; font-size: 14px; line-height: 1.3; }
.door__zone strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.1; }

/* Large pictogram sign, right column, for pages without a featured image. */
.bigsign { width: min(100%, 400px); margin-left: auto; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 26px 44px -22px rgba(0, 0, 0, .6); }
.bigsign__in { display: flex; flex-direction: column; overflow: hidden; border: 3px solid #000; border-radius: 8px; }
.bigsign__pict { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--pict-bg); --ic-accent: var(--pict-bg); }
.room--yellow .bigsign__pict, .room--orange .bigsign__pict, .room--grey .bigsign__pict, .room--black .bigsign__pict { color: #000; --ic-accent: #000; }
.bigsign__pict .ic { width: 58%; height: auto; stroke-width: 1.6; }
.bigsign__band { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 12px 18px 10px; background: var(--pict-bg); color: var(--pict-ink); font-size: 15px; font-weight: 700; }
.bigsign__code { font-family: var(--display); font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }

/* Feature signs under the hero. */
.fsigns { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: clamp(36px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.fs { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px 12px 12px; border: 2px solid #000; border-radius: 8px; background: #fff; color: #000; box-shadow: 0 0 0 4px #fff, 0 2px 2px rgba(0, 0, 0, .18), 0 18px 30px -18px rgba(0, 0, 0, .55); }
.fs__sym { flex: none; width: 52px; height: 52px; }
.fs__sym svg { display: block; width: 100%; height: 100%; }
.fs__txt { min-width: 0; }
.fs__txt strong { display: block; font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.08; overflow-wrap: anywhere; }
.fs__txt span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.fs--r { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.fs__band { padding: 6px 14px 4px; background: #000; color: var(--sign-yellow); font-family: var(--display); font-size: 15px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fs__amt { padding: 8px 14px 0; font-family: var(--display); font-size: 36px; font-weight: 900; line-height: 1; white-space: nowrap; }
.fs__unit { padding: 2px 14px 10px; font-size: 14px; color: var(--muted); }

/* ---------- Section signs: room code and letter, matched in the in-page menu ---------- */
.room :is(.prose-sections, .faq) h2::before {
	counter-increment: sec;
	content: var(--room) "-" counter(sec, upper-alpha);
	display: block; width: fit-content; margin: 0 0 16px; padding: 5px 10px 3px; border-radius: 4px;
	background: var(--pict-bg); color: var(--pict-ink);
	font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: .08em;
}
.room .subnav__links { counter-reset: nav; }
.room .subnav__links a::before {
	counter-increment: nav; content: counter(nav, upper-alpha);
	display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border-radius: 3px;
	background: var(--pict-bg); color: var(--pict-ink);
	font-family: var(--display); font-size: 14px; font-weight: 900; line-height: 1; vertical-align: 1px;
}
.room .subnav a[aria-current="true"] { border-bottom-color: var(--pict-bg); }
.room--yellow .subnav a[aria-current="true"], .room--grey .subnav a[aria-current="true"] { border-bottom-color: #000; }

/* ---------- Copy inside the bands ---------- */
.room .band--mint { --table-bg: var(--tint); background: var(--tint); }
/* Subheads carry a small floor-colour plate. */
.room :is(.band .wrap, .band__col, .pair > div) > h3 { display: flex; align-items: center; gap: 12px; }
.room :is(.band .wrap, .band__col, .pair > div) > h3::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 2px; background: var(--wall-bg); box-shadow: inset 0 0 0 2px #000; }
/* Plain lists: square markers in the wall colour. */
.room :is(.band .wrap, .band__col, .pair > div) > ul:not([class]) { padding-left: 0; list-style: none; }
.room :is(.band .wrap, .band__col, .pair > div) > ul:not([class]) > li { position: relative; padding-left: 26px; }
.room :is(.band .wrap, .band__col, .pair > div) > ul:not([class]) > li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 11px; height: 11px; border-radius: 1px; background: var(--wall-bg); box-shadow: inset 0 0 0 2px #000; }
.room .band--split .band__col > ul:not([class]) > li { padding-left: 24px; }
.room .band--split .band__col > ul:not([class]) > li::before { top: calc(14px + .5em); background: var(--wall-bg); }
/* Tables in the copy: a white sign plate with a black head band. */
.room :is(.band, .art__body) table:not(.cmp) { border: 2px solid #000; border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 6px #fff, var(--shadow-sign); }
.room :is(.band, .art__body) table:not(.cmp) thead th { padding-block: 12px; background: #000; border-bottom: 0; color: #fff; }
.room :is(.band, .art__body) table:not(.cmp) tbody tr:last-child :is(th, td) { border-bottom: 0; }
/* Fixed-quote jobs as work-order tags. */
.room .jobs { gap: 12px 16px; }
.room .jobs__row { align-items: center; padding: 14px 18px 14px 16px; border: 2px solid #000; border-left: 12px solid var(--wall-bg); border-radius: 6px; background: #fff; box-shadow: var(--shadow-sign); }
.room--black .jobs__row { border-left-color: var(--sign-yellow); }
.room .jobs__note { font-family: var(--display); font-size: 18px; font-weight: 800; color: #000; white-space: nowrap; }
/* In-page photos framed as plates. */
.room .aihi-fig { padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sign); }
.room .aihi-fig img { border: 2px solid #000; border-radius: 8px; }

/* ---------- City pages: their own layouts (city.css), retuned to the sign palette ---------- */
body.city--vaughan { --amber-bright: var(--sign-yellow); }
body.city--mississauga { --harbour: var(--hwy); --harbour-2: #00512E; --harbour-pale: #E2F0E8; }
body.city--oakville { --paper: var(--wall); --forest: var(--sign-blue); --rule: var(--line-strong); }
body.city .room .hero--green::before, body.city .room .hero--green::after { display: none; }
body.city .room .hero__media { border-radius: 12px; }
body.city .room .band .controls :is(th, td):first-child { padding-left: 16px; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1020px) {
	.bigsign { display: none; }
}
@media (max-width: 640px) {
	.door__code { font-size: 34px; }
	.door__zone { font-size: 13px; }
	.door__zone strong { font-size: 16px; }
	.fsigns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.room .jobs__row { flex-wrap: wrap; gap: 4px 12px; }
}