/* ============================================================================
   GovTheme by Doghouse - demo/css/site.css
   The mock agency site's page layout and demo-only tooling: the pieces the kit
   (vendor/govtheme-ui) has no component for, and the footer's factory shape,
   which the kit's site-footer cannot render. The header, nav, hero, cards and
   the rest come from the kit bundle, which this file loads after - so a rule
   here can still tune one.
   ========================================================================== */

/* Shows the page the inline <style> in demo-page.twig hides until the CSS is
   in: an iframe's first paint is not held for stylesheets. */
body { visibility: visible; }

/* Article — the body shell under the article banner. Page layout, not a kit
   component: the factory's css/article.css:11-22 (wrap-width surface, 900px
   reading column). It sits inside a .gt-wrap, which gives the side gutter, and
   its blocks take their rhythm from a .gt-flow. */
.gt-article { max-width: var(--gt-maxw); margin-inline: auto; padding-block: clamp(var(--gt-space-10), 5vw, 56px) clamp(var(--gt-space-12), 6vw, var(--gt-space-16)); }
.gt-article__inner { max-width: 900px; }

/* ============================================================================
   LARGE-SITE PATTERNS — page layout, table of contents, prose lists,
   side-nav, news and events listings, facets, webform, contact grid, section
   heads, search results, back-to-top, footer, drawer menu.
   (Demo site.)
   ========================================================================== */

/* Page layout: breadcrumb and title, then the content grid with the block
   rhythm inside it. The kit has no page layout, so these are the factory
   theme's rules (css/chrome.css:195-210, css/base.css:92), trimmed for static
   pages: main can hold several wraps here, so only the breadcrumb's first one
   is padded and spaced. The grid is one column, and takes the 260px rail only
   when it holds a sidebar. */
#main > .gt-wrap:first-child { padding-top: var(--gt-space-8); }
#main > .gt-wrap:first-child > .gt-breadcrumb { margin-bottom: var(--gt-space-5); }
.gt-page-title { font-size: var(--gt-text-4xl); line-height: var(--gt-leading-tight); margin: 0 0 var(--gt-space-6); }
/* This site's own: the govtheme demo has no lead under its title, and the
   kit's paragraph reset would leave this one flush against the grid. */
.gt-page-title + .gt-lead { margin-bottom: var(--gt-space-8); }
.gt-wrap > .gt-page__layout { display: grid; grid-template-columns: 1fr; gap: var(--gt-space-10); padding-bottom: var(--gt-space-16); }
.gt-page__layout:has(.gt-page__sidebar) { grid-template-columns: 260px 1fr; }
.gt-page__content { min-width: 0; }
.gt-page__sidebar { position: sticky; top: 10rem; align-self: start; }
.gt-flow > * + * { margin-top: var(--gt-space-10); }
/* A band brings its own vertical padding, so two in a row take no flow gap.
   The factory's css/sections.css:32, keyed on the bands themselves: here they
   are direct flow children, not wrapped in Drupal's .gt-flow__item. The kit's
   .gt-vision is a band of its own class, padded through its wrap. */
.gt-flow > :is(.gt-band, .gt-vision) + :is(.gt-band, .gt-vision) { margin-top: 0; }
/* A TOC that never populated (no JS, or too few headings) leaves no gutter and
   no empty sidebar row. The factory's rules (css/chrome.css); after the column
   rule above so the override reads in order. */
.gt-page__layout:has(.gt-toc[hidden]) { grid-template-columns: 1fr; }
.gt-page__sidebar:has(> .gt-toc[hidden]) { display: none; }

/* "On this page" table of contents. The factory's toc component
   (components/01-atoms/toc/toc.css), verbatim; the kit has no toc yet. The
   links are built by demo/js/toc.js, the factory's behaviour. */
.gt-toc__title { font-family: var(--gt-font-mono); font-size: var(--gt-text-2xs); letter-spacing: var(--gt-tracking-caps); text-transform: uppercase; color: var(--gt-ink-3); margin-bottom: var(--gt-space-3); }
.gt-toc__list { list-style: none; margin: 0; padding: 0; }
.gt-toc a { display: block; padding: 7px 14px; border-left: 2px solid var(--gt-border); color: var(--gt-ink-2); text-decoration: none; font-size: var(--gt-text-sm); min-height: 24px; transition: color .14s, border-color .14s, background-color .14s; }
.gt-toc a:hover { color: var(--gt-primary); border-left-color: var(--gt-primary); background: var(--gt-surface-2); }
.gt-toc a[aria-current] { color: var(--gt-primary); font-weight: var(--gt-w-semibold); border-left-color: var(--gt-primary); background: var(--gt-primary-soft); }

/* Prose lists: indent and marker colour, which the kit's prose leaves to the
   browser. The factory's list rules (css/base.css), scoped to .gt-prose: the
   factory styles bare ul/ol for Drupal's rich text, and here a bare rule would
   reach the header, footer and menu lists. No margin reset, so the prose's own
   block spacing still applies. */
.gt-prose ul, .gt-prose ol { padding-left: var(--gt-space-5); color: var(--gt-ink-2); line-height: var(--gt-leading-relaxed); }
.gt-prose li::marker { color: var(--gt-ink-3); }

/* "In this section" side navigation (expandable tree) */
.gt-sidemenu__head { font-family: var(--gt-font-head); font-weight: var(--gt-w-bold); font-size: var(--gt-text-md); letter-spacing: var(--gt-head-tracking); padding-bottom: var(--gt-space-3); margin-bottom: 6px; border-bottom: 2px solid var(--gt-border-2); color: var(--gt-ink); }
.gt-sidemenu__head a { color: inherit; text-decoration: none; }
.gt-sidemenu ul { list-style: none; margin: 0; padding: 0; }
.gt-sidemenu a { display: block; padding: 9px 14px; border-left: 2px solid var(--gt-border); color: var(--gt-ink-2); text-decoration: none; font-size: var(--gt-text-sm); min-height: 24px; transition: color .14s, border-color .14s, background-color .14s; }
.gt-sidemenu a:hover { color: var(--gt-primary); border-left-color: var(--gt-primary); background: var(--gt-surface-2); }
.gt-sidemenu > ul > li > a { font-weight: var(--gt-w-medium); }
.gt-sidemenu a[aria-current] { color: var(--gt-primary); font-weight: var(--gt-w-semibold); border-left-color: var(--gt-primary); background: var(--gt-primary-soft); }
.gt-sidemenu ul ul a { padding-left: 28px; border-left-color: transparent; }
.gt-sidemenu ul ul { border-left: 2px solid var(--gt-border); margin-left: 0; }
.gt-sidemenu .is-current-parent > a { color: var(--gt-ink); font-weight: var(--gt-w-semibold); border-left-color: var(--gt-border-2); }

/* News listing: filter rail beside the card rows. The factory's
   css/listing.css:4-22, 27, trimmed: .gt-listing's own max-width (line 2) goes,
   as the wrap sets it, and so do the Views-only selectors and the newsbar's
   label and input rules, which the kit's .gt-vh and .gt-input cover. The count
   rules (listing.css:4-7) also serve the search page's count, whose factory
   rules (css/search.css:6-7) are the same values. */
.gt-listing__count, .gt-results__count { margin: 0 0 var(--gt-space-6); font-size: var(--gt-text-sm); color: var(--gt-ink-2); }
.gt-listing__count strong, .gt-results__count strong { color: var(--gt-ink); }
.gt-listing__grid { display: grid; grid-template-columns: 268px 1fr; gap: 44px; align-items: start; }
.gt-facets { position: sticky; top: 150px; }
.gt-listing__list { min-width: 0; }
.gt-listing__list .gt-card + .gt-card { margin-top: var(--gt-space-4); }
.gt-listing .gt-pagination { justify-content: center; margin-top: var(--gt-space-8); }
.gt-listing .gt-card--row .gt-card__media { width: 200px; flex: 0 0 200px; aspect-ratio: auto; }
.gt-listing .gt-newsbar { margin-bottom: var(--gt-space-5); }

/* Facet groups: the kit resets only the first group's padding; the last one's
   rule is the factory's css/search.css:26. A title that is the select's
   <label>, and so its only accessible name, still sits on its own line. */
.gt-facetgroup:last-child { border-bottom: none; }
label.gt-facetgroup__title { display: block; }

/* Events listing: featured spotlight, a heading row with the type filter, then
   the event rows. The factory's css/events.css:6-26, trimmed: .gt-events's own
   max-width (line 2) goes, as the wrap sets it, and so do the Views-only
   selectors; Drupal's .form-item is the kit's .gt-field. Two rules override
   kit values the kit has no option for, as the govtheme demo does: the
   spotlight's 420px height (events.css:6, over the kit's 500px) and the small
   grey filter label (events.css:20, over .gt-label). */
.gt-events .gt-spotlight { min-height: 420px; margin-bottom: var(--gt-space-8); }
.gt-events__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gt-space-4); margin-bottom: var(--gt-space-5); }
.gt-events__title { margin: 0; }
.gt-events__filter form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gt-space-3); margin: 0; }
/* Row direction is explicit: gt-field stacks its label by default. */
.gt-events__filter .gt-field { display: flex; flex-direction: row; align-items: center; gap: var(--gt-space-2); margin: 0; }
.gt-events__filter label { font-size: var(--gt-text-xs); font-weight: var(--gt-w-regular); color: var(--gt-ink-3); white-space: nowrap; }
.gt-events__filter .gt-select { width: auto; min-width: 200px; }
.gt-events__list { display: grid; gap: var(--gt-space-4); }

/* Webform card: the factory's webform component
   (components/03-organisms/webform/webform.css:4-9); the kit has no webform.
   Its action row is the kit's .gt-row of large buttons. */
.gt-webform form { background: var(--gt-surface); border: var(--gt-border-width) solid var(--gt-border); border-radius: var(--gt-radius-card); padding: var(--gt-space-10); }

/* Contact page: form beside its contact details. This site's own layout; the
   govtheme demo puts the details below the form. Collapses at 860px. */
.gt-contact__grid { grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }

/* Section-head eyebrow in the primary colour, spaced from its title: the
   factory's css/sections.css:42, over the kit's ink-3 eyebrow. The kit's
   .gt-section__head is bundle CSS with no component, so no option sets it. */
.gt-section__head .gt-eyebrow { color: var(--gt-primary); margin-bottom: 10px; }

/* Search results: search bar and count over the facet rail beside the rows.
   The factory's css/search.css:4-5, 19-20, trimmed: .gt-results's own
   max-width (line 2) goes, as the wrap sets it; the row and facet-group rules
   (8-14, 23, 25, 27) go, as the kit's .gt-result and .gt-facetgroup carry the
   same, and line 26 is the facet rule above; the pager rule (16) goes, as the
   page has no pager; the facets-list, dropdown and header-search rules (28-80)
   style Drupal markup. The count shares the listing's count rule. */
.gt-results__searchbar { display: flex; gap: 10px; max-width: 680px; margin-bottom: var(--gt-space-8); }
.gt-results__searchbar .gt-input-group { flex: 1; }
.gt-results__grid { display: grid; grid-template-columns: 284px 1fr; gap: var(--gt-space-12); align-items: start; }

/* Back-to-top: the factory's back-to-top component
   (components/01-atoms/back-to-top/back-to-top.css), verbatim; the kit has
   none. Hidden by visibility as well as opacity, so the invisible button
   leaves the tab order. */
.gt-totop { position: fixed; right: 22px; bottom: 52px; z-index: 70; width: 46px; height: 46px; border-radius: 50%; border: var(--gt-border-width) solid var(--gt-border-2); background: var(--gt-surface); color: var(--gt-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--gt-shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; transform: translateY(8px); }
.gt-totop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.gt-totop:hover { background: var(--gt-primary-soft); }
.gt-totop:focus-visible { box-shadow: var(--gt-focus-ring); }
/* Clear of the customiser's 56px bottom bar (css/marketing-chrome.css), which
   js/govtheme.js marks <body> for on a standalone page; inside the preview
   frame there is no bar and no class. */
@media (max-width: 720px) {
  .hp-railed .gt-totop { bottom: 108px; }
}

/* Site footer: the factory's shape (css/chrome.css:134-152, 159-172) over the
   kit's footer rules, which cannot style it: the kit renders h4 columns, the
   factory one nav whose top-level items are the columns. Scoped to the demo's
   footer, on a demo page (.gt-site) or in govtheme.html's specimen box
   (.gt-demo); :is() keeps the class's specificity. The colours are the kit's (its h4 and brand name),
   and the kit's .9 bottom-row opacity stays: the factory's .75 dims the legal
   links below AA. */
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main > nav { grid-column: 2 / -1; }
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main > nav > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gt-space-10); list-style: none; margin: 0; padding: 0; }
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main > nav > ul ul { list-style: none; margin: 0; padding: 0; }
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main > nav > ul > li > span { display: block; color: var(--gt-footer-heading); font-family: var(--gt-font-head); font-weight: var(--gt-head-weight); font-size: var(--gt-text-md); margin-bottom: 14px; }
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-logo { display: flex; align-self: start; color: var(--gt-footer-heading); padding: 0; min-height: 0; opacity: 1; }
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-logo:hover { text-decoration: none; }
:is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__bottom nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gt-space-5); flex-wrap: wrap; }
/* This site's own: the factory's footer has no tagline or credit. The tagline's
   .8 is above the .9 x .82 that the kit's bottom row holds to 5:1 or better. */
.gt-site-footer__tagline { margin-top: 14px; font-size: var(--gt-text-sm); opacity: .8; max-width: 32ch; }
.gt-site-footer__credit { display: flex; align-items: center; gap: 5px; }
.gt-site-footer__credit img { flex: none; margin-left: 2px; border-radius: var(--gt-radius-xs); }

/* Drawer menu: the factory's css/chrome.css:191-192, on direct children, with
   the kit's font size. The kit's own flat-link rule is .gt-drawer > a, which
   misses a link inside the nav; a descendant selector would reach
   the section sub-links and give them a weight and border their own rule
   (.gt-drawer details a) does not reset. */
.gt-drawer__nav > a { display: block; padding: 14px 4px; font-weight: var(--gt-w-semibold); font-size: var(--gt-text-md); border-bottom: var(--gt-border-width) solid var(--gt-border); color: var(--gt-ink); text-decoration: none; min-height: 44px; }
.gt-drawer__nav > a:hover { color: var(--gt-primary); }

/* The footer's collapse: the factory's css/chrome.css:159-162. The kit's own
   collapse rules come before its base footer rule in the bundle and lose on
   order; these win on specificity. */
@media (max-width: 900px) {
  :is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main { grid-template-columns: 1fr 1fr; gap: 28px; }
  :is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main > nav { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .gt-results__grid { grid-template-columns: 1fr; gap: 28px; }
  .gt-wrap > .gt-page__layout { grid-template-columns: 1fr; }
  .gt-page__sidebar { position: static; }
  /* A sidebar with nothing in it yet (the placeholders') keeps its column on
     wide screens, so the text holds its measure; stacked, it would still take
     a grid row and the layout's gap above the content. :has(*) rather than
     :empty, which whitespace in the div defeats. */
  .gt-page__sidebar:not(:has(*)) { display: none; }
  /* The rail unpins and stacks above the list (listing.css:42-45). */
  .gt-listing__grid { grid-template-columns: 1fr; gap: 28px; }
  .gt-facets { position: static; }
  .gt-contact__grid { grid-template-columns: 1fr; }
}

/* Narrow rows stack: full-width 16/9 media over the body (listing.css:47-50). */
@media (max-width: 560px) {
  .gt-listing .gt-card--row { flex-direction: column; }
  .gt-listing .gt-card--row .gt-card__media { width: 100%; flex: none; aspect-ratio: 16 / 9; }
  /* The footer stacks to one column (css/chrome.css:168-172). */
  :is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main { grid-template-columns: 1fr; }
  :is(.gt-site, .gt-demo) > .gt-site-footer .gt-site-footer__main > nav > ul { grid-template-columns: 1fr; }
}