/*
 * bcds.css — B.C. Design System component styles, hand-ported for server-rendered
 * HTML (Thymeleaf). Owned by IAS; shared by any app that links it.
 *
 * Upstream reference (always port from SOURCE css, never from the compiled bundle):
 *   @bcgov/design-system-react-components v0.8.1
 *     src/components/Header/Header.css
 *     src/components/Footer/Footer.css
 *     src/components/Subheader/Subheader.css
 * Token layer: @bcgov/design-tokens v5.0.0, css-prefixed build. Link
 *   /static/plugins/bcgov-design-system/design-tokens/5.0.0/variables.css
 * BEFORE this file (custom properties must exist on :root).
 *
 *
 * TABLE OF CONTENTS
 *   1. HEADER  (.bcds-header)
 *   2. FOOTER  (.bcds-footer)
 *   3. SUBHEADER  (.bcds-Subheader)
 */

/***************************************************************************
    1. HEADER  — port of Header.css
    Markup:
      <header class="bcds-header">
        <div class="bcds-header--container">
          <img id="bcgov-logo-header" src=".../BCID_H_rgb_pos.svg" alt="Government of British Columbia">
          <ul class="bcds-header--skiplinks"><li><a href="#main-content">Skip to main content</a></li></ul>
          <div class="bcds-header--line"></div>
          <span class="bcds-header--title">Product name</span>
        </div>
      </header>
*/
.bcds-header {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	background-color: var(--bcds-surface-color-forms-default);
	border-bottom: var(--bcds-layout-border-width-small) solid var(--bcds-surface-color-border-default);
	min-height: 65px;
	padding: var(--bcds-layout-padding-none) var(--bcds-layout-padding-medium);
	width: 100%;
}

.bcds-header > .bcds-header--container {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--bcds-layout-padding-medium);
	max-width: 1100px;
}

.bcds-header > .bcds-header--container > .bcds-header--title {
	flex-grow: 1;
	font: var(--bcds-typography-bold-h4);
	color: var(--bcds-typography-color-primary);
	margin: 0;
}

/* Skip links: visually hidden until focused (pushed off-canvas by margin-left). */
.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
}

.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li {
	margin: 0;
}

.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a,
.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button {
	background-color: var(--bcds-surface-color-forms-default);
	box-sizing: border-box;
	color: var(--bcds-typography-color-link);
	font: var(--bcds-typography-regular-body);
	margin-top: -17.5px; /* centre the link visually in a single line-height header */
	padding: var(--bcds-layout-padding-xsmall) var(--bcds-layout-padding-medium);
	position: absolute;
	margin-left: -100000px;
}

.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a:focus,
.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button:focus {
	margin-left: 0; /* line up left edge with left edge of logo image */
	white-space: nowrap;
}

.bcds-header > .bcds-header--container > .bcds-header--line {
	background-color: var(--bcds-surface-color-border-default);
	width: 1px;
	height: 32px;
}

.bcds-header > .bcds-header--container #bcgov-logo-header {
	min-width: 129px;
	width: 129px;
	display: block;
}

/***************************************************************************
    2. FOOTER  — port of Footer.css
    Markup (compact form: acknowledgement block optional):
      <footer class="bcds-footer">
        [<div class="bcds-footer--acknowledgement"><div class="bcds-footer--acknowledgement-text"><p>…</p></div></div>]
        <div class="bcds-footer--container">
          <div class="bcds-footer--container-content">
            <div class="bcds-footer--logo-links horizontal">
              <div class="bcds-footer--logo"><img id="bcgov-logo-footer" …><p>contact line</p></div>
              <figure class="bcds-footer--links"><figcaption class="bcds-footer--links-title">More info</figcaption><ul><li><a>…</a></li></ul></figure>
            </div>
            <hr>
            <p class="bcds-footer--copyright">© 2026 Government of British Columbia.</p>
          </div>
        </div>
      </footer>
*/
.bcds-footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.bcds-footer > .bcds-footer--acknowledgement {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	border-top: var(--bcds-layout-border-width-large) solid var(--bcds-theme-gold-60);
	border-bottom: var(--bcds-layout-border-width-large) solid var(--bcds-theme-gold-60);
	background-color: var(--bcds-theme-gray-110);
	padding: var(--bcds-layout-padding-xlarge);
}

.bcds-footer > .bcds-footer--acknowledgement > .bcds-footer--acknowledgement-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: stretch;
	color: var(--bcds-typography-color-primary-invert);
	font: var(--bcds-typography-regular-small-body);
	max-width: 1100px;
	width: 100%;
}

.bcds-footer > .bcds-footer--acknowledgement > .bcds-footer--acknowledgement-text > p {
	color: inherit;
	font: inherit;
	margin: var(--bcds-layout-margin-none);
}

.bcds-footer > .bcds-footer--container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	background-color: var(--bcds-surface-color-background-light-gray);
	padding: var(--bcds-layout-padding-xlarge);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--bcds-layout-padding-xlarge);
	max-width: 1100px;
	width: 100%;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: var(--bcds-layout-padding-medium) var(--bcds-layout-padding-xlarge);
	justify-content: space-between;
	width: 100%;
}

/* `horizontal` = logo/contact left, links right (the default) */
.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links.horizontal {
	flex-direction: row;
}

/* `vertical` = stacked blocks, used when several link groups are present */
.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links.vertical {
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--bcds-layout-padding-xlarge);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo {
	display: flex;
	flex-direction: column;
	gap: var(--bcds-layout-padding-large);
	min-width: 324px;
	width: 576px;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo > #bcgov-logo-footer {
	width: 146px;
	min-width: 146px;
	display: block;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo > p {
	font: var(--bcds-typography-regular-small-body);
	color: var(--bcds-typography-color-primary);
	margin: var(--bcds-layout-margin-none);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo > p > a {
	color: var(--bcds-typography-color-secondary);
	font: var(--bcds-typography-regular-small-body);
	text-decoration: underline;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo > p > a:hover {
	text-decoration: none;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--links {
	margin: var(--bcds-layout-margin-none);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links.horizontal > .bcds-footer--links {
	min-width: min(320px, 100%);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--links > .bcds-footer--links-title {
	display: block;
	font: var(--bcds-typography-bold-small-body);
	color: var(--bcds-typography-color-primary);
	margin-bottom: var(--bcds-layout-padding-medium);
	text-transform: uppercase;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--links > ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	gap: var(--bcds-layout-padding-small) var(--bcds-layout-padding-xlarge);
	list-style: none;
	margin: var(--bcds-layout-margin-none);
	padding: var(--bcds-layout-padding-none);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links.vertical > .bcds-footer--links > ul {
	grid-template-columns: repeat(4, 1fr);
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--links > ul > li {
	font: var(--bcds-typography-regular-small-body);
	margin: 0;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--links > ul > li > a {
	color: var(--bcds-typography-color-primary);
	text-decoration: none;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--links > ul > li > a:hover {
	text-decoration: underline;
}

.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {
	background-color: var(--bcds-surface-color-border-dark);
	border: var(--bcds-layout-border-width-none);
	height: var(--bcds-layout-border-width-small);
	margin: var(--bcds-layout-margin-none);
	opacity: 1;
	width: 100%;
}

p.bcds-footer--copyright {
	color: var(--bcds-typography-color-secondary);
	font: var(--bcds-typography-regular-body);
	margin: var(--bcds-layout-margin-none);
}

/* Tablet: links drop beneath the logo block */
@media (max-width: 991px) {
	.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links {
		flex-wrap: wrap;
	}

	.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo {
		max-width: 324px;
	}

	.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links.vertical > .bcds-footer--links > ul {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Extra small screens: tighter padding, single column of links in vertical mode */
@media (max-width: 575px) {
	.bcds-footer > .bcds-footer--acknowledgement {
		padding: var(--bcds-layout-padding-xlarge) var(--bcds-layout-padding-medium);
	}

	.bcds-footer > .bcds-footer--container {
		padding: var(--bcds-layout-padding-medium);
	}

	.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {
		gap: var(--bcds-layout-padding-medium);
	}

	.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links > .bcds-footer--logo {
		gap: var(--bcds-layout-padding-medium);
		min-width: 0;
	}

	.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > .bcds-footer--logo-links.vertical > .bcds-footer--links > ul {
		grid-template-columns: repeat(1, 1fr);
	}
}

/***************************************************************************
    3. SUBHEADER  — port of Subheader.css
    Secondary navigation bar rendered immediately below the header. Deviation from
    upstream: the divider between items is drawn on the separator <li> itself instead
    of the Separator component.
    Markup:
      <div class="bcds-Subheader">
        <nav class="bcds-Subheader--Container medium" aria-label="…">
          <ul class="bcds-Subheader--List">
            <li class="bcds-Subheader--Item"><a href="…">Item</a></li>
            <li class="bcds-Subheader--Separator" role="presentation" aria-hidden="true"></li>
            <li class="bcds-Subheader--Item"><a href="…">Item</a></li>
          </ul>
        </nav>
      </div>
*/
.bcds-Subheader {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	padding: var(--bcds-layout-padding-none) var(--bcds-layout-padding-medium);
	background-color: var(--bcds-surface-color-background-white);
	border-bottom: var(--bcds-layout-border-width-small) solid var(--bcds-surface-color-border-default);
}

.bcds-Subheader--Container {
	box-sizing: border-box;
	display: flex;
	flex-grow: 1;
	max-width: 1100px;
}

ul.bcds-Subheader--List {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcds-layout-margin-small);
	list-style: none;
	padding: unset;
	margin: unset;
}

li.bcds-Subheader--Item {
	display: flex;
	align-items: center;
}

li.bcds-Subheader--Separator {
	display: flex;
	align-self: stretch;
	margin: var(--bcds-layout-margin-hair) var(--bcds-layout-margin-none);
	width: 1px;
	background-color: var(--bcds-surface-color-border-default);
}

/* Sizing */
.bcds-Subheader--Container.small > .bcds-Subheader--List {
	padding: var(--bcds-layout-padding-hair) var(--bcds-layout-padding-none);
	min-height: 32px;
}

.bcds-Subheader--Container.small > .bcds-Subheader--List > .bcds-Subheader--Item {
	padding: var(--bcds-layout-padding-none);
}

.bcds-Subheader--Container.medium > .bcds-Subheader--List {
	padding: var(--bcds-layout-padding-xsmall) var(--bcds-layout-padding-none);
	min-height: 40px;
}

.bcds-Subheader--Container.medium > .bcds-Subheader--List > .bcds-Subheader--Item {
	padding: var(--bcds-layout-padding-none) var(--bcds-layout-padding-small);
}