/**
 * QRIDA brand + Drupal bridging layer on top of QGDS.
 *
 * QGDS (qld.bootstrap.css) provides the Queensland Government look using
 * --qld-* design tokens. QRIDA is a Queensland Government entity, so the QGDS
 * default "Queensland blue" palette is already on-brand (matches the existing
 * "Delivering for Queensland" blue, #005EB8). This file only:
 *   1. bridges Drupal-specific markup that QGDS' component templates do not
 *      know about (regions, blocks, admin toolbar, messages), and
 *   2. carries the small set of QRIDA-specific brand accents.
 *
 * Keep this file lean: prefer QGDS classes in templates over new CSS here.
 */

/* ---------------------------------------------------------------------------
 * 1. Layout bridging
 * ------------------------------------------------------------------------- */

/* Drupal's page wrapper should not constrain QGDS full-bleed chrome. */
#page-wrapper,
#page {
  width: 100%;
}

/* Main content: paragraphs/nodes own their own vertical rhythm (some are
   full-bleed heroes that must sit flush under the nav), so only guarantee a
   little breathing room above the footer. */
.qld-main-content {
  display: block;
}

.qld-main-content > .updated-date:last-child {
  margin-bottom: 2rem;
}

/* Keep the admin toolbar from sitting over fixed/sticky chrome. */
body.toolbar-fixed .qld-header {
  position: relative;
}

/* ---------------------------------------------------------------------------
 * 2. Drupal status messages -> QGDS in-page alerts
 *    status-messages.html.twig outputs QGDS .alert markup; this only maps the
 *    Drupal message "type" data attribute to the right QGDS variant when the
 *    template cannot set the class directly.
 * ------------------------------------------------------------------------- */

.messages__wrapper {
  margin-block: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * 3. Local tasks (admin tabs) sit inside the content container.
 * ------------------------------------------------------------------------- */

nav[aria-labelledby="primary-tabs"],
nav[aria-labelledby="secondary-tabs"] {
  margin-block: 1rem;
}

/* ---------------------------------------------------------------------------
 * 3b. Breadcrumb spacing.
 *    QGDS sets --qld-breadcrumb-padding-y: 2rem, which leaves a tall empty band
 *    between the header and the page title. Tighten the vertical rhythm so the
 *    trail reads as a compact strip, not a section of its own.
 * ------------------------------------------------------------------------- */

.qld-breadcrumb .breadcrumb {
  --qld-breadcrumb-padding-y: 0.5rem;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 4. QRIDA brand accents
 *    The program hero / tiles use a "DfQ Blue" gradient that is asserted by
 *    ProgramRebrandColoursTest; that lives inline in the relevant templates
 *    and in paragraph-tiles.css. Nothing extra is needed here for it, but the
 *    accessible gold focus ring is a QRIDA accessibility decision retained
 *    on top of QGDS.
 *
 *    THE FOCUS INDICATOR IS TWO-TONE.
 *
 *    Gold alone reaches only 1.65:1 on white and 1.52:1 on the nav bar, so it
 *    cannot carry SC 1.4.11 by itself on a light ground. The design system's
 *    navy does clear 3:1 there, but a navy ring on a blue-and-white navigation
 *    is weak wayfinding: legible is not the same as noticeable, and a focus
 *    indicator should sit outside the palette the design already uses.
 *
 *    So the ring is drawn in two adjacent bands, gold between two hairlines of
 *    the design system's black, after GOV.UK. Whatever is behind it, one band
 *    always clears 3:1:
 *
 *      ground              gold      black
 *      #ffffff  page        1.65      21.00
 *      #f5f5f5  nav bar     1.52      19.26
 *      #005eb8  pre-header  3.87       3.29
 *      #003e96  button      5.97       2.13
 *
 *    and the two bands are 12.70:1 against each other, so the boundary between
 *    them is perceivable in its own right.
 *
 *    Gold stays the recognisable colour. The black is only ever a hairline.
 * ------------------------------------------------------------------------- */

:root {
  /* QA 2026-09-03, items 1 and 5: "remove the yellow keyline", raised against
     the header search box, the contact form fields and the region select.
     Those are not a keyline. They are the keyboard focus indicator, and it is
     painted only under :focus-visible, so it shows on a search box or a select
     because the browser correctly treats clicking into a text control as a
     keyboard interaction. Deleting it would fail WCAG 2.4.7 and 1.4.11.

     What was wrong is the colour, not the ring. The accent is now the design
     system's own focus navy instead of a custom gold, so the yellow is gone
     from every control on the site.

     The two-tone stays, and the first attempt at this proved why. Restoring
     QGDS's own light/dark focus switch wholesale and letting each rule read
     --qld-focus-color measured two failures immediately: a body link on white
     picked up the dark-ground cyan at 1.1:1, and a button on the #005eb8 blue
     picked up the light-ground navy at 1.9:1. The switch depends on section
     classes this theme does not apply consistently, so the colour alone cannot
     be trusted to suit its ground. A second band of the opposite polarity can:
     navy carries the ring on light grounds, white carries it on dark ones, and
     the two are 12.14:1 against each other, so the boundary between them is
     perceivable whatever sits behind. */
  --qrida-focus-color: var(--qld-light-focus, #002e85);
  --qrida-focus-contrast-color: #ffffff;
  --qrida-focus-width: 3px;

  /* The companion band, outward for standalone controls and inward for the
     flush-packed navigation rows. 6px of spread with a 3px outline sitting
     1px in from the edge leaves 1px of black inside the gold and 2px outside
     it, so the gold never touches the ground directly. */
  --qrida-focus-ring: 0 0 0 6px var(--qrida-focus-contrast-color);
  --qrida-focus-ring-inset: inset 0 0 0 6px var(--qrida-focus-contrast-color);

  /* Retune the design system's own focus tokens rather than out-specify its
     several dozen focus rules one by one. Every QGDS focus outline reads
     --qld-focus-color, which resolves from these two; nothing else in
     qld.bootstrap.css reads them. This is what converges the skip link, the
     header links, the buttons, the breadcrumb, the pager, the tabs and the
     form controls onto one indicator instead of the four the header carried
     (gold, navy, pale cyan and a 2px gold). */
  /* Both QGDS focus tokens converge on the navy, so any design system rule
     this file does not restate still draws the same accent. The dark-ground
     cyan is deliberately not kept: the section classes that would select it
     are not applied consistently here, so it landed on white grounds. Every
     control that genuinely sits on a dark ground is covered by a rule in this
     file, which adds the white band. */
  --qld-light-focus: #002e85;
  --qld-light-focus-rgb: 0, 46, 133;
  --qld-dark-focus: #002e85;
  --qld-dark-focus-rgb: 0, 46, 133;
}

/* The four places QGDS hardcodes a focus colour rather than reading its own
   tokens are now left alone. They used to be forced onto the site gold, which
   was actively wrong on one of them: the design system paints a black ring on
   the global alert precisely because the alert's warning variant is yellow,
   and overriding that to gold put a yellow ring on a yellow panel. Its own
   values are its design intent and they are already contrast-correct. */

/* btn-white: a QRIDA button variant (e.g. icon buttons on dark/brand panels)
   that QGDS does not define. Built on the QGDS .btn base. */
.btn.btn-white {
  background-color: #fff;
  border: 2px solid #fff;
  color: var(--brand-primary, #005EB8);
}

/* :focus, not :focus-visible: the design system's own a.btn:focus rules repaint
   the fill on a plain mouse focus, and a pair written only for :focus-visible
   leaves that case reverting to whatever the .btn state machine last set. */
.btn.btn-white:hover,
.btn.btn-white:focus {
  background-color: transparent;
  color: #fff;
}

/* The indicator itself, on everything that can take focus.
   a.btn / a.qld-header-link / .qld-skip-links__item are named because the
   design system carries its own rule for each at (0,2,1) and (0,2,0), and a
   bare a:focus-visible loses to them. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
a.btn:focus-visible,
.btn:focus-visible,
a.qld-header-link:focus-visible,
.qld-cta-link:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.breadcrumb-item a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.qld-text-input:focus-visible,
.qld-select:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: 1px;
  box-shadow: var(--qrida-focus-ring);
}

/* The pressed, selected and open button states, which the design system
   carries at a specificity the rule above cannot reach.
 *
 * qld.bootstrap.css writes
 *   .btn-check:checked+.btn:focus-visible, :not(.btn-check)+.btn:active:focus-visible,
 *   .btn:first-child:active:focus-visible, .btn.active:focus-visible,
 *   .btn.show:focus-visible { box-shadow: var(--qld-btn-focus-box-shadow) }
 * at (0,3,0), against (0,2,0) for the site rule above, so the design system's
 * own 1px drop shadow won and the companion band was dropped on exactly the
 * buttons that carry a selected state. Measured on the selected program tab,
 * keyboard focus drew the gold outline with box-shadow
 * `rgb(0,0,0) 0px 1px 2px 0px` instead of the 6px black band, so the ring lost
 * the half that carries it on a light ground.
 *
 * The outline itself already came through; only the second band is restated. */
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:active:focus-visible,
.btn:first-child:active:focus-visible,
.btn-check:checked + .btn:focus-visible {
  box-shadow: var(--qrida-focus-ring);
}

/* Rows that sit flush against their neighbours take the same two bands drawn
   inward instead, because an outward ring would overlap the labels either
   side of it. The design system insets its own navigation rings for the same
   reason. Same colours, same order, same 6px. The navigation's own copy of
   this is in section 12, next to the rule that suppresses a mouse ring. */
.qld-skip-links__item:focus {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: -4px;
  box-shadow: var(--qrida-focus-ring-inset);
}

/* The "On this page" nav sticks and scrolls on desktop, so it is a scroll
   container and an outward ring on a full-width row would be clipped at its
   edges (SC 2.4.11). Same two bands, drawn inward, like the primary nav rows.
   The design system also zeroes box-shadow here, at a specificity a bare
   .nav-link rule cannot reach. */
.qld-side-navigation .nav-link:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: -4px;
  box-shadow: var(--qrida-focus-ring-inset);
}

/* The pager. The design system carries its own focus treatment at
   .pagination .page-item .page-link:focus, an inset blue hairline that beats a
   bare .page-link rule, so the pager was the one component still drawing a
   different indicator from everything else. */
.qld-pagination .pagination .page-item .page-link:focus-visible,
.pagination .page-item .page-link:focus-visible,
.pagination .page-item.previous .page-link:focus-visible,
.pagination .page-item.next .page-link:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: 1px;
  box-shadow: var(--qrida-focus-ring);
}

/* Form controls, where the design system asserts box-shadow:none !important
   on focus (.qld-text-input:focus, .form-select:focus, .qld-select:focus,
   .form-control:focus). Nothing short of another !important reaches them, and
   without the companion band the header search field carried a gold ring at
   1.65:1 on white, which is the exact failure this indicator exists to fix. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.qld-text-input:focus-visible,
.qld-select:focus-visible {
  box-shadow: var(--qrida-focus-ring) !important;
}

/* The pre-header utility links flatten every button property to nothing,
   box-shadow included, which stripped the companion band off "Contact us"
   while its neighbour two words away kept it. */
.qld-header-pre-header .qld-header-utility .menu a:focus-visible,
.qld-header-pre-header .qld-header-utility .menu a.btn:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: 1px;
  box-shadow: var(--qrida-focus-ring);
}

/* ---------------------------------------------------------------------------
 * 5. Header site-search
 *    QGDS styles the #qld-header-search shell; this aligns the Drupal-rendered
 *    search form fields with the QGDS look (input + submit on one row).
 * ------------------------------------------------------------------------- */

.qld-header-site-search .qld-header-search-form .content {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.qld-header-site-search form {
  display: flex;
  width: 100%;
  margin: 0;
}

.qld-header-site-search .form-item,
.qld-header-site-search .js-form-item {
  flex: 1 1 auto;
  margin: 0;
}

.qld-header-site-search input[type="search"],
.qld-header-site-search input[type="text"] {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--qld-light-border-alt, #848484);
  border-right: 0;
  border-radius: 0;
  font-family: inherit;
}

.qld-header-site-search .form-actions,
.qld-header-site-search [data-drupal-selector$="actions"] {
  flex: 0 0 auto;
  margin: 0;
}

.qld-header-site-search .form-actions .button,
.qld-header-site-search input[type="submit"],
.qld-header-site-search button[type="submit"] {
  height: 100%;
  border: 0;
  border-radius: 0;
  padding-inline: 1rem;
  background-color: var(--brand-primary, #005EB8);
  color: #fff;
  cursor: pointer;
}

/* Search submit: the magnifier ON the button, per deck p2 ("replace the button
   text Search with the magnifying icon as per current QRIDA website").
 *
 * The complete deck resolves the earlier incomplete instruction: remove the
 * icon from inside the field and use it on the submit. The search-results
 * target on page 23 also shows the compact icon submit, so all three rendered
 * search contexts share the same treatment. The extra selectors beat the
 * baseline forms.css rule, which is required because that rule is !important.
 *
 * The icon is a background-image on the control, not a pseudo-element: Drupal
 * renders this as <input type="submit">, and an input cannot have ::before.
 * The value text is hidden with font-size, not removed; the accessible name
 * comes from the aria-label set in
 * govcms_bartik_form_search_block_form_alter(). */
.qld-header-site-search form.search-form input[type="submit"],
.qld-header-site-search form.search-form button[type="submit"],
.paragraph-text-search form.search-form input[type="submit"],
.paragraph-text-search form.search-form button[type="submit"],
#block-mainpagecontent form.search-form input[type="submit"],
#block-mainpagecontent form.search-form button[type="submit"] {
  font-size: 0 !important;
  min-width: 3.25rem;
  padding-inline: 1rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.25rem 1.25rem !important;
}

/* ---------------------------------------------------------------------------
 * 6. Back-to-top button (behaviour in js/index.js, look here)
 * ------------------------------------------------------------------------- */

.qld-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1020;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--brand-primary, #005EB8);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.qld-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.qld-back-to-top .qld-icon {
  background-color: #fff;
}

/* ---------------------------------------------------------------------------
 * 7. Footer social icons
 *    The footer_middle region holds a QRIDA block of inline-SVG social links
 *    (.footer-middle-socials > .footer-middle-social > .field-social-svg). The
 *    raw SVGs carry no width/height, so without sizing they expand to the full
 *    column. QGDS does not style this bespoke markup, so constrain it here.
 * ------------------------------------------------------------------------- */

/* QGDS "Follow us" column: vertical list of icon + label links. */
.qld-footer .footer-middle-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.qld-footer .footer-middle-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  color: #fff;
}

/* Was text-decoration: none, so hovering a social link removed its underline
   while every other footer link thickened one. Now it emphasises the same way:
   0.5px at rest to 2px on hover, at the footer's own underline offset. */
.qld-footer .footer-middle-social:hover,
.qld-footer .footer-middle-social:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

.qld-footer .footer-middle-socials svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex-shrink: 0;
}

.qld-footer .footer-social-label {
  font-size: 0.875rem;
}

/* The "Follow us" heading is supplied by the template; hide the socials block's
   own "Like or follow QRIDA on socials" body copy. */
.qld-footer .footer-col--social .field--name-body {
  display: none;
}

/* QGDS footer is left-aligned, not centred. */
.qld-footer .footer-socials,
.qld-footer .region-footer-middle,
.qld-footer .region-footer-middle .container,
.qld-footer .footer-content,
.qld-footer .footer-acknowledgements,
.qld-footer .footer-acknowledgements * {
  text-align: left;
}

/* Dark QGDS footer laid out as columns with vertical dividers. */
.qld-footer .footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* 992px, not 768px: the design system keys its whole stacked-footer branch to
   max-width 991.98px, so opening the four-column grid at 768 put the two in
   conflict for that whole band. The social column's labels crossed its divider,
   the headings kept their stacked spacing, and the columns were too narrow for
   their content. Matching the breakpoint lets the footer stay stacked until the
   design system says otherwise. */
@media (min-width: 992px) {
  .qld-footer .footer-columns {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2.5rem;
  }
  .qld-footer .footer-col.border-column {
    /* Suppress the QGDS .border-column::after divider so it doesn't double up
       with the border-right below (two lines per column). */
    --qld-footer-column-border-color: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 2.5rem;
  }
}

/* The WoG links are rendered into their own column with drupal_menu(); hide the
   duplicate footer-menu block that still renders inside footer_bottom. */
.qld-footer .footer-col--ack .block-menu,
.qld-footer .footer-col--ack nav.menu--footer {
  display: none;
}

/* Column headings (Contact us / Follow us). */
.qld-footer .footer-heading {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  /* --qld-footer-spacing, the value the design system uses under its own
     footer headings. It was 0.5rem. */
  margin-bottom: 1rem;
}

/* Contact column outline button (white on the dark footer).
 *
 * inline-flex, not inline-block: the design system centres a .btn label with
 * align-items/justify-content, and only a flex container honours them. As
 * inline-block this was the worst-centred button on the site, with the label
 * sitting about 3px above the middle of the 52px control.
 *
 * border-radius is not restated: .btn already takes --qld-btn-border-radius
 * (0.25rem), so a local 4px was a duplicate of the token it shadowed. */
.qld-footer .footer-col .footer-contact-btn {
  display: inline-flex;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-weight: 600;
  /* Override the footer left-align rule so the label is centred. */
  text-align: center !important;
  text-decoration: none;
}

.qld-footer .footer-contact-btn:hover,
.qld-footer .footer-contact-btn:focus-visible {
  /* Underline the label and hold the outline, rather than inverting to a white
     fill. Matches the button behaviour on the other Queensland Government
     sites this footer is modelled on. */
  background: transparent;
  color: #fff;
  text-decoration-line: underline;
  text-decoration-color: currentcolor;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

/* Contact-column phone line. */
.qld-footer .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.qld-footer .footer-contact-item .qld-icon {
  background-color: #fff;
  flex-shrink: 0;
}

/* Align the Acknowledgement column heading with the other column headings (the
   acknowledgement block's heading carries a default top margin the template
   .footer-heading columns don't). */
.qld-footer .footer-col--ack > .block:first-child :is(h1, h2, h3, h4) {
  margin-top: 0;
}

.qld-footer .footer-crest {
  margin-bottom: 0.75rem;
}

/* Hide "Powered by Drupal" from the government footer. */
.qld-footer .block-system-powered-by-block {
  display: none;
}

/* Footer columns are left-aligned (the acknowledgement block centres itself). */
.qld-footer .footer-col,
.qld-footer .footer-col :where(h1, h2, h3, h4, h5, p, div, span, li, a, ul) {
  text-align: left !important;
}

/* Socials block: a left-aligned footer column, not a big centred banner. */
.qld-footer .footer-socials h1,
.qld-footer .footer-socials h2,
.qld-footer .footer-socials h3,
.qld-footer .footer-socials p,
.qld-footer .region-footer-middle h1,
.qld-footer .region-footer-middle h2,
.qld-footer .region-footer-middle h3,
.qld-footer .region-footer-middle p {
  text-align: left !important;
}

.qld-footer .footer-socials h1,
.qld-footer .footer-socials h2,
.qld-footer .region-footer-middle h2 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.qld-footer .footer-middle-social {
  display: inline-flex;
  border: 0;
  color: currentColor;
  text-decoration: none;
}

.qld-footer .footer-middle-socials svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

/* No opacity fade on hover. Every other footer link holds its colour and
   thickens its underline; this one dimmed to 0.8 instead, which is the "text
   fade colour" QRIDA flagged as inconsistent. The underline emphasis below is
   the whole hover treatment. */

/* QGDS footer link lists have no bullet markers. */
.qld-footer ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qld-footer ul.menu li {
  margin: 0;
}

/* Give stacked footer links an adequate (>=24px) touch target now that the
   blanket a{min-height:44px} is gone. */
.qld-footer ul.menu a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* ---------------------------------------------------------------------------
 * 8. Mobile primary-nav rows
 *    Each dropdown item is <a class="nav-link"> + a separate
 *    <button class="dropdown-toggle"> expander. accessibility.css forces a
 *    44px min-width on every button, and the .nav-item is not a flex row, so
 *    the expander wrapped onto its own line and doubled each row's height.
 *    Lay the label + expander on one row and let the submenu drop full-width
 *    beneath (QGDS mobile nav pattern). Desktop (>=992px) is unaffected.
 * ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  #main-nav .nav-item.dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  #main-nav .nav-item.dropdown > .nav-link:not(.dropdown-toggle) {
    /* flex-basis 0 overrides Bootstrap's width:100% so the toggle stays inline. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  #main-nav .nav-item.dropdown > .dropdown-toggle {
    flex: 0 0 auto;
  }

  #main-nav .nav-item.dropdown > .dropdown-menu {
    flex: 0 0 100%;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Pager / pagination
 *    Numbered items render as uniform squares; labelled controls (Back / Next /
 *    First / Last) size to their text instead of clipping. The active page is a
 *    <span> (accessibility.css' 44px min only hits a/button), so size it here
 *    too so it matches its neighbours. Disabled ellipsis is borderless.
 * ------------------------------------------------------------------------- */

.qld-pagination .pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: auto;
  padding: 0 0.75rem;
  white-space: nowrap;
}

.qld-pagination .pagination .page-item.disabled .page-link {
  background-color: transparent;
  border-color: transparent;
}

/* ...and it must stay that way under the pointer. The "more pages" ellipsis and
   any disabled control are <span>, not <a>, so nothing there is clickable, but
   the design system's `.pagination .page-item .page-link:hover` still drew the
   1px #307edb inset border on them: measured, hovering the ellipsis gave it the
   same box a live page number gets, so a dead item advertised itself as one
   more page to click. (0,4,0) against the design system's (0,3,0). */
.qld-pagination .pagination .page-item.disabled .page-link:hover,
.qld-pagination .pagination .page-item.disabled .page-link:focus,
.pagination .page-item.disabled .page-link:hover,
.pagination .page-item.disabled .page-link:focus {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}

/* ---------------------------------------------------------------------------
 * 10. Pre-header utility menu (Contact us / log in)
 *     The menu links carry a .btn class, so QGDS button styling rendered them
 *     as tall bordered buttons (with a list bullet), inflating the pre-header.
 *     QGDS shows these as plain utility links on the right of the pre-header.
 * ------------------------------------------------------------------------- */

/* The blanket a{min-height:44px} (accessibility.css) forces the left
   "Queensland Government" link to 44px, overflowing the 36px pre-header and
   clipping its text at the top. Reset min-height for all pre-header links. */
.qld-header-pre-header a {
  min-height: 0;
}

.qld-header-pre-header .qld-header-utility .menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qld-header-pre-header .qld-header-utility .menu__item {
  margin: 0;
}

.qld-header-pre-header .qld-header-utility .menu a,
.qld-header-pre-header .qld-header-utility .menu a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Was a hardcoded --brand-primary. The pre-header now carries the design
     system's dark theme, which resolves --qld-link-color to #ffffff, so the
     hardcoded blue left "Contact us" invisible against the blue bar. Reading
     the token keeps this correct if the bar ever returns to a light theme. */
  color: var(--qld-link-color, var(--brand-primary, #005EB8));
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

/* Site convention, and the behaviour of the qrida.qld.gov.au link two words
   away in the same bar: navigational links carry no underline at rest and gain
   one on hover. These two ran in opposite directions, one gaining an underline
   where the other lost it. */
.qld-header-pre-header .qld-header-utility .menu a:hover,
.qld-header-pre-header .qld-header-utility .menu a:focus-visible {
  text-decoration-line: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------------
 * 11. Global / in-page alert is left-aligned (QGDS), regardless of any
 *     editor text-align-center class on the message body.
 * ------------------------------------------------------------------------- */

.global-alert .global-alert-content,
.global-alert .global-alert-message,
.qld-global-alert-main .text-content,
.qld-global-alert-main .text-align-center,
.qld-global-alert-main .text-content p {
  text-align: left;
}

/* ---------------------------------------------------------------------------
 * 12. Primary-nav mega menu
 *     Menu links can carry a description (set on the menu_link_content entity,
 *     surfaced to the navbar via hook_simplify_menu_simplified_link_alter() and
 *     rendered as a .dropdown-item__description span). Show it as a wayfinding
 *     subtitle beneath the label. The QGDS dropdown is a light link-list (dark
 *     text on white, arrow on the right), so the subtitle is a muted slate that
 *     keeps AA contrast on both the white base and the light hover background.
 *
 *     The design system lays an item out as one flex row, "text ... arrow", and
 *     pushes the arrow across with margin-inline-start:auto
 *     (.navbar .dropdown-menu.show li a::after). Stacking the subtitle by
 *     turning that row into a flex column turned the auto margin into a
 *     cross-axis one, so the arrow left its label and settled in the item's
 *     bottom-right corner, with the item's own rule running between the two. A
 *     two-row grid keeps the design system's arrangement: the arrow stays on the
 *     label's line at the right of the item, and the subtitle runs full width
 *     beneath both.
 * ------------------------------------------------------------------------- */

#main-nav .dropdown-menu .dropdown-item.has-description {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  justify-items: start;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  white-space: normal;
}

#main-nav .dropdown-menu .dropdown-item.has-description .dropdown-item__label {
  grid-column: 1;
  grid-row: 1;
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

#main-nav .dropdown-menu .dropdown-item.has-description::after {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-inline-start: 0;
}

#main-nav .dropdown-menu .dropdown-item__description {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  max-width: 32ch;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: #595f6b;
}

/* Site convention, set on the client's instruction: navigational links carry no
   underline at rest and gain one on hover, while in-sentence prose links stay
   underlined. These are navigational, so the design system's hover underline is
   kept. It sat on the whole anchor, which underlined the wayfinding subtitle as
   well: a subtitle that wraps then ran a rule under a lone trailing word.
   Underline the link text only and leave the subtitle clean. */
#main-nav .dropdown-menu .dropdown-item.has-description:hover,
#main-nav .dropdown-menu .dropdown-item.has-description:focus-visible {
  text-decoration-line: none;
}

#main-nav .dropdown-menu .dropdown-item.has-description:hover .dropdown-item__label,
#main-nav .dropdown-menu .dropdown-item.has-description:focus-visible .dropdown-item__label {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
}

/* The current page's item inside an open mega menu.
   Bootstrap's own .dropdown-item.active default was showing through: the design
   system's navbar layer overrides the active link colour but not the active
   fill, so the item read as a violet-blue (#0d6efd) card carrying the light
   heading navy at 1.4:1 and an arrow at 1.1:1. A filled item is a dark-theme
   surface in QGDS, so it takes the dark token set: the brand-blue ground, white
   link text, the lighter blue-white for the subtitle and a white arrow. The
   inline padding is cancelled by an equal negative margin, so the ground
   extends past the column while the text stays aligned with the other columns.
   Desktop only: below 992px the design system paints every open dropdown row on
   --dropdown-show-bg (white), so there is no dark surface to write onto and the
   light token set stays correct. */
@media (min-width: 992px) {
  #main-nav .dropdown-menu .dropdown-item.active,
  #main-nav .dropdown-menu .dropdown-item:active {
    --action-icon-color: var(--qld-color-default-color-dark-link-default, #ffffff);

    border-block-end-color: transparent;
    background-color: var(--qld-color-default-color-dark-background-default, #005eb8);
    color: var(--qld-color-default-color-dark-link-default, #ffffff);
  }

  #main-nav .dropdown-menu .dropdown-item.active .dropdown-item__description,
  #main-nav .dropdown-menu .dropdown-item:active .dropdown-item__description {
    color: var(--qld-color-default-color-dark-text-lighter, #deebf9);
  }

  /* Only the current page's item takes the card geometry, so holding the mouse
     down on any other item tints it without moving anything. .dropdown-item is
     width:100%, so the negative margin alone would shift the box rather than
     widen it and the card would stop short of its column on the right. */
  #main-nav .dropdown-menu .dropdown-item.active {
    width: calc(100% + 2rem);
    padding-inline: 1rem;
    margin-inline: -1rem;
    border-radius: 0.25rem;
  }

}

/* QA 2026-09-03, item 2: "remove the short aqua line so there's only one. The
   short one starts under the home and ends under news and stories."

   There were two bands, 4px apart. QGDS builds the navbar's underline out of a
   per-item border-block-end on every a.nav-link, so the items collectively draw
   a line that necessarily stops where the items stop: measured 44px to 1182px,
   which is exactly from under the Home icon to under News & stories. This
   theme then added its own border on #main-nav to carry the line the full
   1400px, and the two overlapped rather than coinciding, the per-item bars at
   228-236 and the full-width band at 232-240.

   The full-width band is the one to keep, so the per-item bar goes transparent
   at rest. It is not deleted, because it is also the mechanism for marking the
   current and open sections, which is item 18. It is realigned instead so that
   when it does take a colour it lands exactly on the band, replacing that
   segment of it rather than sitting above it. That is the same figure as
   qld.gov.au, whose band measures as two runs with a gap where the current
   section is. */
/* QA 2026-09-04, item 14: "Need to look at mobile menu formatting."
   Both declarations below exist solely to align the per-item bar onto the
   navbar's full-width band, and that band is a desktop construct: below 992px
   QGDS zeroes the block-end border and draws the marker down the row's leading
   edge instead. Unscoped, the -16px still applied in the drawer, where it pulled
   every row 16px up over the 1px separator beneath it, so the rows overlapped
   each other and the separators disappeared. Scoped to the width the band
   actually exists at. */
@media (min-width: 992px) {
#main-nav .navbar-nav > .nav-item > a.nav-link {
  /* QA 2026-09-04, item 1: transparent here punched a hole in the band.
     QGDS paints an opaque --background-color on every a.nav-link, and the
     -16px below pulls that background down over the navbar's own border, so a
     transparent bar let the link's grey cover the aqua for the whole run of
     the items: the band survived only in the gutters, 0-124px and past 1180px,
     which read exactly as "the aqua underline was removed".

     The reference site does not hide this bar, it makes the two coincide: on
     premiers.qld.gov.au the per-item bar and the container band are both
     #84d3ff and land on the same 8px, so they read as one unbroken line. That
     is what the realignment below now buys us, so the bar keeps its resting
     colour and the "double up" is gone because the two are superimposed rather
     than 4px apart. */
  border-block-end-color: var(--link-border-color, #84d3ff);
  /* -8px put the bar's underside at 236 against the band's 240. The extra 4px
     is the difference between the navbar's own border and the item's bar, and
     the navbar's height moves with the item, so the margin buys half its own
     value back: -8 put it at 236, -12 at 238, -16 lands it on 240. */
  margin-block-end: -16px;
}
}

/* The current section.
   QGDS recolours an .active top-level label and then paints its underline bar
   in the bar's own background colour, so the section the reader is in was the
   one item with no bar at all: the marking read as an absence, and it was
   unreachable anyway until the template started deriving the trail from the
   children. Give it the brand blue, a step up from the resting light blue and
   a step down from the hover navy, so rest, current, hover and open stay four
   distinguishable states. */
#main-nav .navbar-nav > .nav-item > a.nav-link.active {
  border-block-end-color: var(--qld-light-link, #005eb8);
  font-weight: 600;
}

/* Hovering the current section still darkens its bar, the way every other item
   does. The rule above out-ranks the design system's .active:hover on an id,
   so the hover bar has to be restated here. */
#main-nav .navbar-nav > .nav-item > a.nav-link.active:hover {
  border-block-end-color: var(--link-border-color-hover, #003e96);
}

/* Below 992px the drawer draws the same bar down the leading edge of the row
   rather than under it. */
@media (max-width: 991.98px) {
  #main-nav .navbar-nav > .nav-item > a.nav-link.active {
    border-inline-start-color: var(--qld-light-link, #005eb8);
  }
}

/* Open state, drawn for a mouse click.
   The design system gives an open top-level item the panel's own background and
   an 8px bar in that same colour (.navbar .navbar-nav a.nav-link.show), so once
   the pointer moves off the item nothing marks which one is open. The deck's
   direction for the primary nav is the current site's underline behaviour with
   the old orange replaced by the brand blue, so the open item keeps that bar in
   the design system's hover border colour for as long as its panel is open. */
/* QA 2026-09-03, item 18: "Can the click styling be updated to match the same
   styling treatment that indicates you're on the page?" The open panel's bar
   was the darker #003e96 while the current section's bar was #005eb8, so
   clicking a section produced a different marking from being in it. Both now
   draw the brand blue. Hover keeps the darker navy, which is what separates
   pointing at an item from having opened it. */
#main-nav .navbar-nav > .nav-item > a.nav-link.show {
  border-block-end-color: var(--qld-light-link, #005eb8);
}

/* QA 2026-09-04, item 7: the same request came back, because the v1 fix above
   was incomplete. It made the OPEN bar match the current-section bar, but the
   pointer is by definition still on the item you have just clicked, and the
   hover rule (#003e96) outranks .show. So the state you actually see on a click
   was never the #005eb8 this was aiming at.
   An open item now holds the brand blue whether or not it is hovered, so
   clicking a section and being in a section draw the same mark. Hover still
   darkens every item that is NOT open, which is what keeps pointing at
   something distinct from having opened it. */
#main-nav .navbar-nav > .nav-item > a.nav-link.show:hover {
  border-block-end-color: var(--qld-light-link, #005eb8);
}

/* Focus ring: keyboard entry only where :focus-visible is supported.
   Some design-system rules draw the navbar ring from plain :focus, so a mouse
   click on a top-level item boxed it as well as opening the panel. Browsers
   without :focus-visible keep the plain :focus fallback rather than losing the
   keyboard indicator entirely. The ring itself is the site-wide two-tone gold,
   drawn inward here; see section 4. This used to be the design system's navy,
   which cleared 3:1 but read as one more blue on a blue-and-white navigation. */

/* Drawn inward: the navigation rows butt up against each other with opaque
   backgrounds, so an outward ring would sit on top of the labels either side.
   Their 12px of inline padding leaves the ring clear of the text.
   See section 4 for the two bands and their contrast figures. */
#main-nav .navbar-nav .nav-link:focus,
#main-nav .navbar-nav .nav-link:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: -4px;
  box-shadow: var(--qrida-focus-ring-inset);
}

/* The mega-menu items go the other way. The design system zeroes their leading
   inline padding so the labels line up with the panel's columns, which leaves
   an inward ring nothing to sit in: it clipped the first letter of every label.
   They have transparent backgrounds inside a panel with 64px of inline padding
   and 64px column gaps, so an outward ring has room and nothing to overlap. */
#main-nav .dropdown-menu .dropdown-item:focus,
#main-nav .dropdown-menu .dropdown-item:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: 1px;
  box-shadow: var(--qrida-focus-ring);
}

/* The mobile submenu expander is a 32px circle inside a 44px row, so an inward
   ring would swallow the chevron. It has clear space around it, so it takes
   the outward ring. */
#main-nav .nav-item.dropdown > button.dropdown-toggle:focus,
#main-nav .nav-item.dropdown > button.dropdown-toggle:focus-visible {
  outline: var(--qrida-focus-width) solid var(--qrida-focus-color, #002e85);
  outline-offset: 1px;
  box-shadow: var(--qrida-focus-ring);
}

/* Suppress pointer focus only in engines that can distinguish it. */
@supports selector(:focus-visible) {
  #main-nav .navbar-nav .nav-link:focus:not(:focus-visible),
  #main-nav .dropdown-menu .dropdown-item:focus:not(:focus-visible),
  #main-nav .nav-item.dropdown > button.dropdown-toggle:focus:not(:focus-visible) {
    outline-color: transparent;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------------
 * 13. People profile card.
 *    People nodes keep their bespoke, role-aware profile layout (gradient hero
 *    + role sections) — they are profiles, not Content Pages. This only brings
 *    the profile card itself into the QGDS card language used by the program /
 *    news tiles: the lighter brand border, rounded corners and a subtle resting
 *    elevation (QGDS' base .card is a flat neutral-bordered box).
 *    QGDS owns the base .card, so card overrides belong in this brand layer.
 * ------------------------------------------------------------------------- */

.card.people-card {
  border: 1px solid var(--qld-card-border-color, #848484);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.05);
}

/* QA 2026-09-04, item 10: "Address title is smaller than the address text,
   which seems odd", and the broader "some font sizes are coming out bigger
   than the current website".
 *
 * Both are the same cause. The profile's contact details sit in a .card-footer,
 * and QGDS styles that as a card's call-to-action strip: 20px at weight 600.
 * The people card uses it as a plain content area instead, so every value in it
 * inherited display-sized semibold text, while the <h6> labels beside them
 * stayed at 14px. That is the inversion reported: the label was 6px smaller
 * than its own value.
 *
 * Measured against the live site at the same width, the value there is 18px/400
 * and its label 17px/700, so the label is bold but never much smaller. Here the
 * values return to the body 16px/400 they should have inherited from the card,
 * and the labels take the same size at 700, so each pair reads as a label above
 * its value rather than as two competing sizes.
 *
 * Scoped to .people-card so genuine card footers elsewhere keep the design
 * system's CTA treatment. */
.card.people-card .card-footer {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.card.people-card .card-footer h6 {
  font-size: 1rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 14. Confirmed header direction (QRIDA sign-off)
 *     The ten elements QRIDA confirmed, following the Premier's Department
 *     pattern. See docs/qgds-component-comparison.html "Confirmed header
 *     direction". The search treatment lives in section 5 with the rest of the
 *     site-search styling.
 * ------------------------------------------------------------------------- */

/* (1) Utility bar, left: the site's own domain, linking home. */
.qrida-utility-home {
  /* Was 600 and underlined at rest, which made it the odd one out in its own
     bar: "Contact us" two words away is 400 with no rest underline, and the
     comment on that rule already described this link as behaving the same way
     when it did not. Both now match, and both gain an underline on hover. */
  font-weight: 400;
  text-decoration: none;
}

.qrida-utility-home:hover,
.qrida-utility-home:focus-visible {
  text-decoration-line: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* (2) Utility bar, right: "Contact us" carries a small leading icon. The link
   is menu content, so the icon is attached here rather than in a template.
   The reference design pairs this link with a phone icon rather than an
   envelope, because the contact route it points at leads with the 1800
   number. */
.qld-header-utility a[href*="contact"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.35em;
  vertical-align: -0.125em;
  background-color: currentcolor;
  mask-image: var(--qgds-icon-phone);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--qgds-icon-phone);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* (8, part 1) The utility bar keeps only "Contact us". The editor-managed
   top-header menu still carries the Login item, which the header template
   re-renders below the search bar, so hide it here to avoid showing it twice. */
.qld-header-utility .menu__item:has(> a[href$="/login"]) {
  display: none;
}

/* (3-6) The co-brand lockup stacks above the agency name, rather than sitting
   beside it. The lockup SVG already contains the DfQ wordmark, the blue divider
   and the Queensland Government logo. */
.qrida-brand-stacked > .qld-header-link {
  display: block;
  text-decoration: none;
}

/* Hover and keyboard focus were pixel-identical to rest here. QGDS draws this
   link's underline by colouring a zero-thickness one it has already declared,
   and the reset above removes the line there is to colour. Underline the agency
   name only, so no rule is drawn through the co-brand lockup above it. */
.qrida-brand-stacked > .qld-header-link:hover .qld-header-site-title,
.qrida-brand-stacked > .qld-header-link:focus-visible .qld-header-site-title {
  text-decoration-line: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.qrida-brand-stacked .qld-header-brand-image {
  display: block;
  margin-bottom: 0.5rem;
}

/* The co-brand lockup is a fixed 331px asset with max-width:none, so on a
   320px handset it pushed the whole document 27px wider than the screen. It is
   below the 390px the brief tests at, but 320px is a real device width. */
.qrida-brand-stacked .qld-header-brand-image img,
.qld-header-brand-image img {
  max-width: 100%;
  height: auto;
}

/* QGDS divides the agency name from the lockup with a left keyline, which suits
   its side-by-side layout. Stacked, the name sits under the lockup and the
   keyline would hang off the left edge, so drop it. */
.qrida-brand-stacked .qld-header-secondary-content {
  display: block;
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}

.qrida-brand-stacked .qld-header-site-title {
  display: block;
  /* The agency name needs 551px to sit on one line and the brand column is
     864px at desktop, so it fits comfortably. It was previously capped at 34ch
     (389px), which forced a two-line wrap even where there was ample room.
     Bounded by the container instead: it stays on one line while the column is
     wide enough and still wraps naturally on narrow screens, where the column
     is only 358px. */
  max-width: 100%;
}

/* (8) Login sits BELOW the search bar, not in the utility bar. */
.qrida-header-login {
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.qrida-header-login__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Mobile retains the same Login destination and profile icon, but places the
   action at the end of the navigation drawer. The complementary d-lg-* utility
   classes in Twig guarantee one visible Login action at each breakpoint. */

/* (9) Home icon at the far left of the nav bar. */
.qrida-nav-home__link {
  display: flex;
  align-items: center;
}

/* Keep the icon-only target at the QGDS minimum without stretching the row. */
.qrida-nav-home__link .qld-icon {
  display: block;
}

/* In the open mobile drawer the Home row was 37px, against 41px siblings and
   its own 44px desktop target, because an icon-only row has no text line box to
   give it height. The siblings were under the 44px target too, so the floor
   goes on every row rather than just the one the audit measured. */
@media (max-width: 991.98px) {
  .qrida-nav-home__link,
  #main-nav .navbar-nav > .nav-item > a.nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* QA 2026-09-07: "the circles on the mobile nav look oval shape".
   *
   * The floor above used to match `.nav-link`, which is the row anchor AND the
   * dropdown chevron button beside it. QGDS gives that button width and height
   * of 2rem with aspect-ratio 1/1 and border-radius 50%, so a min-height of
   * 44px stretched it to 32x44 and the 50% radius drew an ellipse rather than
   * a circle. Measured on staging: 32 x 44, ratio 0.727.
   *
   * Restricting the floor to a.nav-link returns the button to its 32px circle.
   * The 44px target it was accidentally getting is kept deliberately, as an
   * invisible hit area centred on the circle, so the visible control matches
   * the design system while the touch target stays at this project's 44px
   * standard. WCAG 2.5.8 only asks 24px, so 32px would have passed, but the
   * larger target is the established convention here and costs nothing.
   *
   * ::before, because ::after already carries the chevron glyph. */
  #main-nav .navbar-nav > .nav-item > button.nav-link {
    position: relative;
  }

  #main-nav .navbar-nav > .nav-item > button.nav-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* The nav switches to its horizontal desktop layout at 992px, and adding the
   Home item (44px) pushed the seven items just past the container there: 970px
   of content in 928px of space, so every page picked up a 10px horizontal
   scrollbar between 992px and the next breakpoint. Tighten the item spacing
   across that band only; the full spacing returns at 1200px. Vertical padding
   is untouched, so the touch target keeps its height. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #main-nav .navbar-nav {
    gap: 0;
    width: 100%;
  }

  #main-nav .navbar-nav > .nav-item {
    min-width: 0;
  }

  #main-nav .navbar-nav .nav-link {
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
  }

  /* Keep the required desktop chevrons in this tight band. Compacting the text,
     padding and pseudo-element fits the six labelled dropdowns plus Home in the
     928px container at 992px without suppressing the affordance. */
  #main-nav .navbar-nav > .nav-item > a.nav-link.dropdown-toggle {
    gap: 0.125rem;
    white-space: nowrap;
  }

  #main-nav .navbar-nav a.nav-link.dropdown-toggle::after {
    display: block;
    flex: 0 0 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    margin-inline-start: 0.125rem;
    background-size: 0.75rem;
  }

  /* The adjacent button is the mobile drawer's independent submenu expander.
     Never expose it alongside the desktop anchor's own chevron. */
  #main-nav .nav-item.dropdown > button.dropdown-toggle {
    display: none;
  }
}

/* The socials block renders inside a nested Bootstrap container > row > col,
   which indented the list 32px from its own column while every other column sat
   flush, and stacked four separate margins between the heading and the first
   link (48px against 16px elsewhere). Flatten the wrapper. */
.qld-footer .footer-col--social .container,
.qld-footer .footer-col--social .row,
.qld-footer .footer-col--social [class*="col-"] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.qld-footer .footer-col--social .footer-middle-socials {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * 15. Conformance tail
 *     Small departures from the design system found by the conformance audit.
 * ------------------------------------------------------------------------- */

/* The "On this page" heading rendered at full h2 scale (32px/48px) in body grey,
   competing with the page title beside it. The design system sets its in-page
   nav title at body scale. */
.qld-side-navigation .nav-title,
.qld-inpage-nav .nav-title,
.qld-side-navigation > h2 {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--qld-heading-color);
}

/* The global alert's trailing paragraph kept its 16px bottom margin, so the
   banner sat 20px above its content and 36px below. The design system resets
   this for its in-page alert but not the global one. */
.global-alert :last-child {
  margin-bottom: 0;
}

/* The contact button is the only button on the site at 2px white; every other
   one uses the design system's 3px and, on a dark ground, its light-blue
   action colour. */
.qld-footer .footer-col .footer-contact-btn {
  border-width: 3px;
  border-color: var(--qld-dark-action-primary, #84d3ff);
}

/* The Acknowledgement copy is editor-authored inside a <small>, which compounds
   down to 12.25px. The design system's footer body size is 0.875rem. */
.qld-footer .footer-col--ack .small,
.qld-footer .footer-col--ack small {
  font-size: 0.875rem;
}

/* The design system resets the list indent on .tag-list only inside a card
   footer, so every tag list elsewhere keeps the browser's default ul padding.
   In the programs table that pushed a 78px status pill 22px out of its 100px
   column on all 45 rows, and worse as the column narrowed. */
.tag-list {
  margin: 0;
  padding: 0;
}

/* One pill per cell in the listing table, so the 1rem inter-tag gap only
   contributes width there. */
.views-table .tag-list {
  gap: 0.25rem;
}

/* Global alert: green success variant.
 *
 * The design system ships critical, warning and info. QRIDA's alert block also
 * offers editors "alert-success" (field.storage.block_content.field_alerts__
 * alert_type), and block--alerts.html.twig maps it to .global-alert-success,
 * but nothing styled that class: choosing it published a banner with no band
 * at all, body-size text and a link-blue icon. Built from the design system's
 * own success scale and mirroring the info variant's structure, which is the
 * closest sibling (tinted band, dark text). */
.global-alert.global-alert-success {
  --qld-icon-color: var(--qld-core-default-color-status-success-darker, #0a690d);
  background-color: var(--qld-core-default-color-status-success-lighter, #f2faf4);
  border-top-color: var(--qld-core-default-color-status-success-darker, #0a690d);
  color: var(--qld-body-color);
  font-size: 0.875em;
}

.global-alert.global-alert-success .qld-icon {
  background-color: var(--qld-core-default-color-status-success-darker, #0a690d);
}

.global-alert.global-alert-success .global-alert-action a {
  color: var(--qld-body-color);
  text-decoration-color: var(--qld-body-color);
}

/* Social links are the only interactive target in the footer under 44px: the
   anchor has no padding, so its height is just the 24px icon's line box. */
.qld-footer .footer-middle-social {
  min-height: 44px;
}

/* The Acknowledgement column heading is editor-authored as an h5, so it missed
   both the .footer-heading size and the margin reset written for h1-h4, and
   rendered 4px smaller than "Contact us" and "Follow us" beside it. */
.qld-footer .footer-col--ack > .block:first-child :is(h5, h6) {
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* The "more pages" ellipsis is a mask image, and the theme's .page-link sizing
   left it 20px wide with mask-repeat defaulting to repeat and mask-size to
   auto, so the 32px three-dot glyph tiled into two stacked rows of three. The
   design system sizes the mask on a bare span; our pager markup carries
   .page-link on it, which is what breaks the match. */
.qld-pagination .page-item.more .page-link,
.pagination .page-item.more .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The numbered controls are padded out to a 44px target; this one holds no
     text, and that padding left only 20px of content box for a 32px glyph. */
  padding-inline: 0;
}

.qld-pagination .page-item.more .page-link::before,
.pagination .page-item.more .page-link::before {
  /* Without this the pseudo-element stays inline, where width is ignored: the
     design system gets the same effect by making the parent span inline-flex,
     which blockifies it. */
  display: block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  -webkit-mask-size: 2rem;
  mask-size: 2rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Stacked footer sections below the four-column breakpoint.
 *
 * The design system separates them with a thin rule and 1.5rem of vertical
 * padding on .footer-column. The rebuild uses .footer-col, so none of those
 * rules could match and the four sections ran together separated only by the
 * grid gap. Same values, matched to the class we emit. The crest keeps its own
 * rule off, as it does in the design system. */
@media (max-width: 991.98px) {
  .qld-footer .footer-col {
    padding-block: 1.5rem;
    border-top: var(--qld-footer-special-border-thin-width, 0.06rem) solid
      var(--qld-footer-special-border-color, #418fed);
  }

  .qld-footer .footer-col:first-child,
  .qld-footer .crest .footer-col {
    border-top: none;
  }
}

/* Footer column dividers, at the design system's width and colour. They were
   1px of rgba(255,255,255,0.3), which composites over the blue field to a
   washed ~#4d8ecd rather than reading as a rule. */
@media (min-width: 992px) {
  .qld-footer .footer-col.border-column {
    border-right: var(--qld-footer-special-border-default-width, 0.13rem) solid
      var(--qld-footer-special-border-color, #418fed);
  }
}

@media (max-width: 991.98px) {
  /* Whole-of-government links go 2-up on phones and 3-up on tablets, as the
     design system does; nine stacked rows made that one section 275px tall on
     a 390px screen. */
  .qld-footer .footer-col--links ul.menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  /* The social column becomes an icon row, as the design system does at this
     width, rather than a vertical stack four rows tall. (The design system also
     hides the labels here; ours are already icon-only, the accessible name
     coming from the anchor's title, so there is nothing to hide.) */
  .qld-footer .footer-middle-socials {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .qld-footer .footer-middle-social {
    min-width: 44px;
    justify-content: center;
  }

  /* The footer ended 12px below the Coat of Arms, which was just the crest's
     own margin. */
  .qld-footer {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 700px) and (max-width: 991.98px) {
  .qld-footer .footer-col--links ul.menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * 16. FAQ accordion
 *     Deck slides 17 and 18: FAQ links in the darker blue with no underline,
 *     and an expanded state that is actually distinguishable.
 * ------------------------------------------------------------------------- */

/* The design system points the accordion header at --qld-link-color, the same
   lighter blue as an in-sentence link, and then makes the expanded state
   identical to the collapsed one: it sets --qld-accordion-active-bg to
   var(--qld-accordion-btn-bg) and --qld-accordion-active-color to
   var(--qld-accordion-btn-color). Opening a row therefore changed nothing but
   the chevron rotation, which is the gap slide 17 flags.

   Both are fixed by retargeting the tokens on .accordion. The chevron colour
   is baked into an SVG data URI rather than inherited, so it has to be
   restated or the arrow stays blue under navy text.

   Scoped to .accordion deliberately. .qld-side-navigation reads the same token
   family from its own selector and keeps the design system's link blue, and
   the (0,2,0) .dark .accordion rule still wins for accordions on dark grounds. */
.accordion {
  --qld-accordion-btn-color: var(--brand-navy);
  --qld-accordion-active-color: var(--brand-navy);
  /* background-light, the same token the program tabs use for a resting pill,
     so an open row reads as part of the same family. */
  --qld-accordion-active-bg: var(--qld-color-default-color-light-background-light, #e6f6ff);
  --qld-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000053'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Slides 17 and 18 both ask for the underline to come off these. They are
   section headers rather than in-sentence links and the chevron already
   carries the affordance, so the underline returns on hover and focus only. */
.accordion-button {
  text-decoration: none;
  /* QA 2026-09-03, item 8: "The FAQ headings need to be reduced in size,
     currently the size of headings."
   *
   * They were 20px at weight 600, which is the design system's own
   * .accordion-button size, and next to the section's 32px "Frequently asked
   * questions" they did read as a second tier of heading rather than as rows.
   *
   * Her stated target was the side menu's 14px. That is not taken, because the
   * answer text inside the panel is 16px and it would leave every question
   * smaller than its own answer. 1rem is the step that removes the heading
   * weight from the row while keeping the question at least as large as what it
   * reveals, and it is the design system's base .accordion-button size before
   * the navbar layer raises it. */
  font-size: 1rem;
  line-height: 1.5rem;
}

.accordion-button:hover,
.accordion-button:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
 * 17. Editorial embeds
 * ------------------------------------------------------------------------- */

/* A pasted video embed carries YouTube's own width="560" height="315", which
   is wider than a phone and pushes the document sideways: /information-farmers
   overflowed by 202px at 390px. The theme caps images per component rather
   than globally, so this is scoped to .text-content, the rich-text wrapper
   editors actually write into. The carousel and event-map iframes have their
   own wrappers and higher-specificity rules, so neither is affected. */
.text-content iframe {
  max-width: 100%;
}

/* Same problem, different element. An editor placed an 8000x2083 banner in a
   news body and nothing capped it, so that page reported a scrollWidth of 8432
   against a 1440 viewport: nearly 7000px of horizontal overflow on a desktop,
   and far worse on a phone.

   Deliberately scoped to .text-content rather than a global img rule. A blanket
   img { max-width: 100% } has caused regressions here before, because several
   components size their own images and a global cap fights them. This reaches
   only the rich-text wrapper editors write into, which is where an uncapped
   image can actually arrive.

   height: auto keeps the aspect ratio once the width is constrained; without it
   an image carrying width and height attributes would squash. */
.text-content img {
  max-width: 100%;
  height: auto;
}

/* QA 2026-09-03, item 12: "Please check padding of images. It's fine on the
   current website, but some on the new reskin have no padding around the
   images."
 *
 * Editors float images beside body copy, and the floated image carried
 * margin: 0, so the text ran flush against its edge with no gutter at all.
 * Measured on the Wagyu client story: three floated images, all at zero.
 *
 * The gutter goes on the side the text is actually on, which is the side
 * opposite the float, plus a little below so the following line does not sit on
 * the image's bottom edge. Logical properties so a float: right image gets its
 * space on the leading side and vice versa. The outer side stays flush with the
 * measure, which is what keeps the column edge straight. */
.text-content img[style*="float: right"],
.text-content img[style*="float:right"],
.text-content img[align="right"],
.text-content .align-right img,
.text-content img.align-right {
  margin-inline-end: 0;
  margin-inline-start: 1.5rem;
  margin-block-end: 1rem;
}

/* A float has to leave a readable measure beside it, or it is not a float, it
   is a squeeze.
 *
 * Editors set align-left/align-right at whatever width the image happened to
 * be, and nothing capped it against the column it landed in. Measured at 1440:
 * the Queensland map is 365px in a 640px column and the client story's photos
 * are 450-455px in a 736px column, so every one of them takes 57-62% and
 * leaves about 250px, roughly 30 characters, for the text beside it. Below
 * about 45 characters a wrapped column stops reading as prose, which is why
 * the region page's heading broke across three lines in a gutter and the body
 * copy then jumped to full width under the image.
 *
 * 40% is the cap. It gives 360px (about 42 characters) in the narrow
 * sidenav column and 418px (about 49) in the wider one, and it keeps the image
 * a deliberate size rather than whatever pixel width was uploaded.
 *
 * Desktop only. Below 992px the column narrows to the point where nothing
 * useful fits beside an image, and these already render full width and stack,
 * which is the right answer there. */
@media (min-width: 992px) {
  .text-content img[style*="float: right"],
  .text-content img[style*="float:right"],
  .text-content img[align="right"],
  .text-content img.align-right,
  .text-content img[style*="float: left"],
  .text-content img[style*="float:left"],
  .text-content img[align="left"],
  .text-content img.align-left {
    max-width: 40%;
    height: auto;
  }
}

/* A heading is a label for what follows, so it starts its own line rather than
   wrapping into the gutter beside an image. This is what put "Our team in
   regional Queensland, helping yours" across three lines next to the map. */
.text-content h2,
.text-content h3 {
  clear: both;
}

.text-content img[style*="float: left"],
.text-content img[style*="float:left"],
.text-content img[align="left"],
.text-content .align-left img,
.text-content img.align-left {
  margin-inline-start: 0;
  margin-inline-end: 1.5rem;
  margin-block-end: 1rem;
}

/* Capping width alone would keep the 315px height and letterbox the video, so
   the known providers get their ratio back and scale properly. 560x315 is
   exactly 16/9, which is what these embeds are. */
.text-content iframe[src*="youtube.com"],
.text-content iframe[src*="youtube-nocookie.com"],
.text-content iframe[src*="youtu.be"],
.text-content iframe[src*="player.vimeo.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------------
 * 18. Footer crest
 * ------------------------------------------------------------------------- */

/* The design system paints the Coat of Arms through
   .qld-footer .footer-crest svg path { fill: var(--qld-footer-color-crest-fill) },
   and on the dark footer that token already resolves to #ffffff. It never
   applied here, because the crest is an external file referenced from an <img>
   and page CSS cannot reach inside one, so the asset's own 54 hardcoded
   #131212 fills won and the crest read as black on the navy ground.

   Painted as a mask instead. The asset stays external and cacheable, the token
   still governs the colour so a change of footer theme carries automatically,
   and the mark is a single flat colour so the mask is an exact reproduction.
   The 324x56 viewBox is preserved as an aspect-ratio rather than a fixed
   height, so the crest scales with the column instead of distorting. */
.qld-footer .footer-crest .footer-crest-img {
  display: block;
  width: 100%;
  /* min-height before the ratio, because this is the one element that fails to
     NOTHING rather than to something wrong: an engine without aspect-ratio
     collapses it to 251x0 and the crest is simply invisible. The floor keeps a
     recognisable mark in that case. Cross-engine testing found this; every
     other technique here degrades to a visible if imperfect result. */
  min-height: 2.75rem;
  aspect-ratio: 324 / 56;
  background-color: var(--qld-footer-color-crest-fill, #ffffff);
  -webkit-mask: url("../../qgds/img/coa-landscape-web.svg") no-repeat center center / contain;
  mask: url("../../qgds/img/coa-landscape-web.svg") no-repeat center center / contain;
}

/* The "Delivering for Queensland" lockup shipped as an external SVG behind an
   <img>, so it rendered in the asset's own black (#131212) and page CSS could
   not reach it. The design system's light-context crest token is #005eb8, and
   the reference design shows the lockup in that blue, not black.

   Painted as a mask for the same reasons as the footer crest: the asset stays
   external and cacheable, the token governs the colour, and the mark is a
   single flat colour so the mask is exact rather than an approximation. The
   331x56 viewBox is kept as an aspect-ratio against the design system's 3rem
   brand-image cap, so it scales without distorting. */
.qld-header-brand-image .qrida-brand-lockup {
  display: block;
  height: 3rem;
  aspect-ratio: 331 / 56;
  background-color: var(--qld-color-default-color-light-crest-fill, #005eb8);
  -webkit-mask: url("../../qgds/img/coa-delivering-for-qld.svg") no-repeat left center / contain;
  mask: url("../../qgds/img/coa-delivering-for-qld.svg") no-repeat left center / contain;
}

/* ---------------------------------------------------------------------------
 * 19. Drupal's interpolated values
 * ------------------------------------------------------------------------- */

/* Drupal core marks every interpolated value in a message with
   <em class="placeholder">, as in "This is a one-time login for
   <em class="placeholder">name</em>". Bootstrap, and so the design system, uses
   that same class name for a loading skeleton: display:inline-block with
   background-color:currentcolor and opacity:.5. The two collide, and the value
   renders as a solid grey bar with no readable text.

   This reaches any message that names a value, which is most of the useful
   ones: a file that failed to upload, an item that was saved, a field that
   failed validation. It was found on /user/reset, where the account name and
   the link expiry both rendered as bars, but it was never specific to that
   page, so it is fixed once here rather than per component.

   em.placeholder is (0,1,1) against the skeleton's (0,1,0), so this wins on
   merit without an override. */
em.placeholder {
  animation: none;
  background-color: transparent;
  cursor: auto;
  display: inline;
  min-height: 0;
  opacity: 1;
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
 * 20. Accessibility widget launcher
 * ------------------------------------------------------------------------- */

/* Deck slide 27, "This looks aqua. Please make it like the DfQ blue", points at
   this floating launcher rather than at the pager.

   The colour cannot be fixed from this repository the way it looks like it can.
   all_in_one_accessibility.userid.settings carries a colorcode, and it is
   passed to the vendor's script as ?colorcode=#005eb8, but the widget ignores
   it: the rendered launcher stayed rgb(79, 232, 181) with the parameter set
   correctly, because the colour is held against the account token in the
   vendor's own dashboard. The stored value is still corrected there so the two
   do not disagree, but the dashboard is the real fix and this override is what
   makes it blue today.

   Scoped to the launcher's background only. The widget's panel, its state
   handling and its own scripts are left alone, so an update from the vendor
   cannot be broken by this beyond the one declaration. !important is required:
   the vendor sets the colour inline from JavaScript. */
#accessibility_settings_toggle {
  background-color: var(--brand-primary, #005eb8) !important;
}

/* ---------------------------------------------------------------------------
 * 21. Editor admin bar
 * ------------------------------------------------------------------------- */

/* inc/admin-bar.html.twig emits a full set of BEM classes and nothing in the
   theme ever styled them, so the bar rendered as a bare label above four
   underlined links, indistinguishable from page content.

   It is a tool rather than content, and only editors ever see it, so it is
   deliberately quiet: a tinted strip on the design system's alt background,
   sitting flush above the page it acts on. The point is that it should read as
   chrome and never be mistaken for part of the page. */
.cms-admin-bar {
  background-color: var(--qld-color-default-color-light-background-alt, #e3e7ea);
  border-block-end: 1px solid var(--qld-color-default-color-light-border-alt, #848484);
}

.cms-admin-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 1376px;
  margin-inline: auto;
  padding: 0.5rem 1rem;
}

.cms-admin-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--qld-color-default-color-light-text-heading, #000053);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cms-admin-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Small, quiet buttons rather than links: these are actions, and one of them
   deletes a node. Underlines are dropped because the button shape carries the
   affordance, and returned on hover and focus. */
.cms-admin-bar__link {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--qld-color-default-color-light-border-alt, #848484);
  border-radius: var(--qld-border-radius, 0.25rem);
  background-color: var(--qld-color-default-color-light-background-default, #ffffff);
  color: var(--brand-primary, #005eb8);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
}

.cms-admin-bar__link:hover,
.cms-admin-bar__link:focus-visible {
  background-color: var(--qld-color-default-color-light-background-light, #e6f6ff);
  color: var(--brand-primary-hover, #003e96);
  text-decoration: underline;
}

/* Delete is the one irreversible action here, so it is coloured for it rather
   than sitting in the same blue as Edit. #8a1220 on white is 9.03:1, the same
   pairing the closed status pill uses. */
.cms-admin-bar__link--danger {
  color: #8a1220;
}

.cms-admin-bar__link--danger:hover,
.cms-admin-bar__link--danger:focus-visible {
  background-color: #fff6f6;
  color: #8a1220;
}

/* Long unbroken strings in editor-authored prose.
 *
 * Editors paste bare URLs and use them as their own link text. A 379px URL in
 * a 320px viewport cannot wrap, because overflow-wrap defaults to normal and a
 * URL has no space to break at, so it pushes the whole page sideways: /privacy
 * scrolled 75px at 320 and 5px at 390, and four more published nodes carry the
 * same pattern. Email addresses on the people profiles broke the same way.
 *
 * break-word rather than anywhere, so it only breaks a word that could not fit
 * on a line of its own and ordinary prose is unaffected. Applied to the editor
 * prose wrapper rather than globally, because this is a property of content we
 * do not control; the theme's own markup should not need it. */
.text-content,
.qld-content-body .field__item {
  overflow-wrap: break-word;
}

/* Editor-embedded iframes.
 *
 * The theme already caps these at max-width: 100%, but an editor can paste a
 * <style> block with a min-width, and min-width beats max-width. That is what
 * puts 296px of horizontal scroll on /queensland-rural-debt-survey at 320.
 *
 * The floor is not removed, because the embedded dashboard genuinely needs its
 * width to be usable and squeezing it to 320px would trade a scrolling page
 * for an unreadable chart. Instead the iframe scrolls inside its own wrapper,
 * which is the same answer the wide content tables take. */
.text-content p:has(> iframe),
.text-content > iframe {
  max-width: 100%;
  overflow-x: auto;
}

/* Below 992px Login is a mobile control in the header, beside Search and Menu,
   styled by the design system's .qld-header-mobile-button. It used to be the
   last row of the navigation drawer, which meant it could not be reached
   without opening the menu first; see QA item 9 in inc/header.html.twig. The
   two rules that styled that drawer row are deleted rather than repointed,
   and they were declared twice in this file in any case. */

/* QA 2026-09-04, item 13: "Check the call out quote styling, not looking
   consistent on the new reskin compared to the [current site]."
 *
 * Measured: a <blockquote> in body copy had border-left 0, no padding and no
 * background, i.e. no callout treatment at all. The live site draws a 6px bar
 * down the leading edge with 24px of inset, and that is the whole reason the
 * block reads as a pulled-out callout rather than as another paragraph.
 *
 * The design system does ship this component, but as a WRAPPER class:
 * .blockquote carries the bar and the padding, and expects a bare <blockquote>
 * nested inside it. Editor content emits the bare element on its own, so it
 * matched only Bootstrap's `blockquote{margin:0 0 1rem}` and nothing else.
 *
 * Rather than ask editors to nest a wrapper, the bare element in body copy
 * takes the component's own tokens. That keeps the bar on the design system's
 * accent and spacing scale, so it stays correct through a QGDS upgrade, and it
 * is the blue the rebrand replaces the live site's orange with. */
.text-content blockquote,
.qld-content-body blockquote {
  background: var(--qld-blockquote-bg, var(--qld-body-bg, #ffffff));
  border-inline-start: var(--qld-quote-border-width, 0.25rem) solid
    var(--qld-quote-border-color, var(--qld-color-default-color-light-accent-design-accent, #84d3ff));
  padding-block: calc(var(--qld-quote-spacing, 1rem) * 0.5);
  padding-inline-start: calc(var(--qld-quote-spacing, 1rem) * 1.25);
  padding-inline-end: var(--qld-quote-spacing, 1rem);
}

/* QA 2026-09-04, item 9: "Hovers not consistent in a few areas where it's a
   thin line then goes to a thicker line, or doesn't change at all."
 *
 * Swept every distinct link on the two pages cited rather than the two links
 * circled. The thin-to-thick part is the design system working as intended:
 * QGDS rests a link underline at 0.5px and thickens it to 2px on hover, and our
 * own tile rules already hard-code that same 2px. Nothing to change there.
 *
 * "Doesn't change at all" was real and it was one class, not one link.
 * .btn.btn-link, which is what a file-download link renders as, carried a
 * browser-default `auto` underline at rest and had no hover rule anywhere
 * outside .text-buttons-wrapper. Both PDF links reported, on two different
 * pages, were that class; so is every other download link on the site.
 *
 * It now rests and hovers on the same two tokens as an ordinary link, so the
 * whole site has one treatment. The .text-buttons-wrapper variants stay: they
 * are more specific and they exist because a link on a blue or orange fill
 * needs its own colour. */
.btn.btn-link {
  text-decoration-thickness: var(--qld-link-underline-thickness, 0.5px);
}

.btn.btn-link:hover,
.btn.btn-link:focus-visible {
  text-decoration-thickness: var(--qld-link-underline-thickness-hover, 2px);
  text-decoration-color: currentcolor;
}

/* QA 2026-09-04, item 3: "Login button needs an icon, keep getting the aqua
   square."

   .qld-header-mobile-button::before is a masked icon box: the design system
   gives it content:"", a 1.25rem square and background-color, then expects a
   modifier to supply the mask. Search and Menu get theirs from .is-search-toggle
   and .is-menu-toggle. Login had no modifier, so mask-image stayed none and the
   background-color painted the whole 20x20 box: a solid #84d3ff square, which
   is exactly what was reported.

   The mask is the same profile glyph the desktop button already uses through
   .qld-icon-profile, so this points at the same custom property rather than
   inlining a second copy of the SVG. */
.qld-header-pre-header .qld-header-mobile-button.qrida-header-login-mobile::before {
  -webkit-mask-image: var(--qgds-icon-profile);
  mask-image: var(--qgds-icon-profile);
}