/**
 * @file
 * QRIDA tweaks layered on top of the vendored QGDS banner component.
 *
 * The full banner look already ships in qgds/css/qld.bootstrap.css
 * (.qld-banner-grid / .banner-inner / .banner-title / .banner-abstract ...).
 * These rules only cover the QRIDA-side adjustments the design system does not
 * provide out of the box: guaranteeing the banner background spans the full
 * viewport, keeping the lead summary legible, and applying QRIDA's brand
 * tokens to the heading and a separating accent.
 *
 * Loaded by the govcms-bartik-styling library just before css/qgds/qrida.css.
 */

:root {
  --qrida-banner-primary: #005eb8; /* QGDS primary */
  --qrida-banner-navy: #000053;    /* QGDS navy    */
}

/* The banner background runs the full viewport width; the inner content keeps
   to QGDS' centred 86rem container-fluid. A thin brand-primary rule separates
   the banner from the page body. */
.qld-banner.qld-banner-grid {
  width: 100%;
  /* The separating rule was brand primary, which is the dark banner's own
     ground colour and so disappeared against it. design-accent is the same
     #84d3ff but is the decoration token; action-primary is the interactive one
     and is what the CTA button uses, so keeping them apart stops a change to
     the action colour dragging a decorative rule with it. */
  border-bottom: 0.25rem solid var(--qld-color-default-color-dark-accent-design-accent, #84d3ff);
}

/* With no banner image, let the title and summary use the full content width.
   Mirrors QGDS' :has() rule for browsers that lack :has() support. */
.banner-inner.is-full-width .banner-content {
  grid-column: 1 / -1;
}

.banner-inner.is-full-width .banner-content .banner-abstract {
  max-width: none;
}

/* Heading uses the QRIDA navy brand token. The vendored banner CSS forces the
   title to #000 with !important, so this override must also be !important and
   load afterwards (it does — see govcms_bartik.libraries.yml weights).
 *
 * Keyed off the base .qld-banner, not the light variant. Our banners carry no
 * variant class, so the variant-scoped rule never fired for them and the colour
 * fell through to the generic heading rule instead. Preferring the design
 * system's own token means a banner that IS given a variant follows it (white
 * on the dark one) rather than staying navy. */
.qld-banner .banner-title {
  color: var(--qld-banner-title-color, var(--qrida-banner-navy)) !important;
}

/* Keep the lead summary comfortably readable.
 *
 * QA 2026-09-03, item 15: "Can the size of the font for the headings and
 * sub-headings in the new banners please be reduced to be more similar to
 * nrmmrrd.qld.gov.au/manufacturing."
 *
 * Measured both at 1400px. The heading already matches that site exactly, 40px
 * at weight 600 on a 52px line, so it is deliberately left alone: shrinking it
 * would take it below the reference it is being compared to. The sub-heading is
 * where the two differ, 24px here against 19.2px there, and that is the 25% the
 * eye is reading as "too big". It comes down to the reference's value.
 *
 * Note this departs from the Figma Page Header component, which specifies the
 * abstract at Regular 24/32. The QA note is the later instruction and names a
 * live page to match, so it wins, but the design file and the site now disagree
 * on this one value. */
.qld-banner .banner-abstract {
  max-width: 60rem;
  font-size: 1.2rem;
  line-height: 2rem;
}

/* The optional banner image never overflows its grid cell. */
.qld-banner .banner-image-inner {
  max-width: 100%;
}

/* Program status badge in the banner CTA.
   The badge markup reuses .program-hero-meta, which is a dark frosted-glass
   strip designed for the old gradient hero (rgba(0,0,0,.35) + backdrop blur).
   On the light QGDS banner that dark, full-width bar is wrong: strip it back to
   just the status pill(s), left-aligned with no background or blur. The pills
   themselves keep their own solid green/amber/grey styling. */
.qld-banner .banner-cta .program-hero-meta {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin-top: 0;
  width: auto;
  justify-content: flex-start;
}

/* Breadcrumb inside the banner (design file item 1). The breadcrumb block
   emits its own .container, which would otherwise re-centre and re-gutter the
   trail inside a banner that is already guttered by .banner-inner. Neutralise
   that so the trail lines up with the title below it. */
/* Matches QGDS's own ancestry. A bare .qld-banner .banner-breadcrumbs is
   (0,2,0) and loses above 700px to
   .qld-banner-grid .banner-inner .banner-breadcrumbs { margin-bottom: 0 },
   so the spacing only ever applied on mobile, the opposite of the intent. */
.qld-banner.qld-banner-grid .banner-inner .banner-breadcrumbs {
  margin-bottom: 0.5rem;
}

.qld-banner .banner-breadcrumbs .qld-breadcrumb .container {
  max-width: none;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

.qld-banner .banner-breadcrumbs .qld-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

/* Program banner meta row: type tag, status pill and closing date sit together
   on one line under the summary, per items 1 and 2 of the design file. The row
   is laid out here because the badge markup is assembled in
   qrida_content_preprocess_node() and carries no layout of its own. */
.qld-banner .banner-cta .program-hero-meta--banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Banner meta pills (type, closing date, status), from the Page Header
 * component. All three share one ground; only the status icon is colour-coded.
 * This is NOT the table's status tag treatment, which is a pale tint on white.
 *
 * Scoped to .dark. These are fixed palette entries, not the variant-aware
 * --qld-banner-* indirection, so they cannot follow a change of banner variant;
 * scoping says so rather than leaving a light banner with white-on-white text.
 *
 * Split in two on purpose. The type and date are plain spans that need real
 * declarations; the status pill is the QGDS tag component, so it is driven by
 * the component's own tokens. Setting background and color directly on the tag
 * as well would win over the tokens and leave them dead. */
.qld-banner.dark .program-hero-meta__type,
.qld-banner.dark .program-tile__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 24px;
  background: var(--qld-color-default-color-dark-background-default-shade, #003e96);
  color: var(--qld-color-default-color-dark-text-lighter, #deebf9);
  font-size: 1rem;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.qld-banner.dark .banner-cta .tag-list.tag-status .tag-item {
  --qld-tag-status-low-color: var(--qld-color-default-color-dark-text-lighter, #deebf9);
  /* Match the two plain pills beside it, so the three read as a set.
   *
   * Set as a plain declaration, NOT through the status border token. In a dark
   * context QGDS has
   *   .dark .tag-list:not(.tag-dark):not(.tag-dark-alt):not(.tag-alt) .tag-item
   * at (0,6,0) painting border-color from --qld-dark-alt-border (#73c2ff). That
   * beats the (0,5,0) per-status rule the token feeds, so overriding the token
   * here changes nothing. This selector is also (0,6,0) and loads later, so it
   * wins the tie on order. The token route still works in the table, where no
   * such dark rule competes. */
  border-color: var(--qld-color-default-color-dark-background-default-shade, #003e96);
  --qld-tag-status-low-success-bg: var(--qld-color-default-color-dark-background-default-shade, #003e96);
  --qld-tag-status-low-warning-bg: var(--qld-color-default-color-dark-background-default-shade, #003e96);
  --qld-tag-status-low-error-bg: var(--qld-color-default-color-dark-background-default-shade, #003e96);
  /* Geometry the tag component does not expose as tokens. */
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 400;
  gap: 4px;
}

/* The type pill carries an icon in the design file, the same as the closing
   date and the status beside it. Without it the row read as two icons and one
   bare word. White glyph, since it sits on the dark pill. */
.qld-banner.dark .program-hero-meta__type::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain
    url("../../assets/icons/tag-type.svg");
}

/* The article kicker date was mid-grey, which does not read on the blue. */
.qld-banner.dark .article-banner-meta__date {
  color: var(--qld-color-default-color-dark-text-lighter, #deebf9);
}

/* Article banner kicker: the article type + publication date sit above the
   buttons as a small meta line. */
.qld-banner .article-banner-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* The kicker pill used --qrida-banner-primary, which is #005eb8, the exact
   colour .qld-banner.dark paints the banner itself, so the pill vanished and
   only its text survived. Same darker shade as the program meta pills. */
.qld-banner.dark .article-banner-meta__type {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 50rem;
  background: var(--qld-color-default-color-dark-background-default-shade, #003e96);
  color: var(--qld-color-default-color-dark-text-lighter, #deebf9);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* Deck p26: below the desktop breakpoint the banner drops its image entirely,
   the way https://www.nrmmrrd.qld.gov.au/mining-exploration behaves. Stacking
   the photo above the text pushed the heading a long way down the page on a
   phone, which is what the instruction is reacting to. The banner keeps its
   solid ground, so nothing else about the layout changes. */
@media (max-width: 991.98px) {
  .qld-banner.with-hero-image .banner-image {
    display: none;
  }

  /* Hiding the photo is not enough on its own: QGDS gives .banner-content
     grid-column: 1 / span 7 from its md breakpoint up, and the five columns it
     leaves for the photo do not collapse when the photo is display:none. Between
     768px and the lg breakpoint that left a 290px band of empty blue to the
     right of the heading, which is the leftover gap the instruction is about.
     The markup cannot help here: the .is-full-width class the template adds is
     conditional on there being no image at all, and these banners have one.
     (0,4,0) against the design system's (0,3,0), so it wins on merit. */
  .qld-banner.with-hero-image .banner-inner .banner-content,
  .qld-banner.with-hero-image .banner-inner .banner-breadcrumbs {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
 * Angled divider (Page Header, Advanced Overlay variant).
 *
 * The design file draws this as a vector whose path is
 * M0 0 L1050 0 L680 573 H0 V0 Z on a 1440x573 frame: the blue reaches x=1050 at
 * the top edge and x=680 at the bottom, so as percentages of the banner width
 * the cut runs from 72.917% to 47.222%. The export carries
 * preserveAspectRatio="none", so the shape is intended to stretch with the
 * banner rather than hold a fixed angle, which is exactly what a percentage
 * polygon does.
 *
 * QGDS ships nothing for this: the vendored stylesheet's only clip-path is
 * inset(0 0 0 0). It is therefore wholly QRIDA-side, and part of the same
 * recorded departure as the table and the meta pills.
 *
 * Desktop only. Below lg the banner stacks, and running the same polygon over a
 * narrow column would slice the heading.
 * ------------------------------------------------------------------------- */

@supports (clip-path: polygon(0 0, 1px 0, 1px 1px)) {
@media (min-width: 992px) {
  .qld-banner.qld-banner-grid.with-hero-image {
    position: relative;
    /* QGDS sets overflow:hidden on .with-hero-image, which clips Drupal's
       contextual-links pencil and takes the inline edit affordance off every
       banner with a photo. It is there for the negative margins QGDS puts on
       .banner-image; this treatment replaces those with absolute positioning
       inside the banner box, and the ::before clips itself, so nothing needs
       hiding. Measured: the photo's right edge lands exactly on the banner
       width. */
    overflow: visible;
    /* The ground moves to the clipped layer below. */
    background-color: transparent;
  }

  /* Contextual links sit above the clipped layer, which would otherwise paint
     over them. */
  .qld-banner.with-hero-image .contextual {
    z-index: 3;
  }

  /* Photo sits behind everything, flush to the right edge. 856/1440 of the
     frame in the design file. */
  .qld-banner.with-hero-image .banner-image {
    position: absolute;
    inset: 0 0 0 auto;
    width: 59.45%;
    margin: 0;
    padding: 0;
    z-index: 0;
    /* The banner's ground moved to the clipped layer, which only paints 47% to
       73% of the width. A broken or missing photo would otherwise show the raw
       page background down the right-hand side. */
    background-color: var(--qld-banner-bg-color, #005eb8);
  }

  /* Only display matters here: QGDS already sets width, height and the cover
     background on .banner-image .banner-image-inner at higher specificity. */
  .qld-banner.with-hero-image .banner-image-inner {
    display: block;
  }

  /* The blue shape, clipped, laid over the photo. */
  .qld-banner.with-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--qld-banner-bg-color, #005eb8);
    clip-path: polygon(0 0, 72.917% 0, 47.222% 100%, 0 100%);
    z-index: 1;
  }

  /* Text rides above both.
   *
   * This z-index goes on .banner-content, NOT on the .container-fluid that
   * wraps it. Putting it on the container makes that element a stacking
   * context, which drags .banner-image (a descendant) up with it and paints the
   * photo over the blue no matter how low the image's own z-index is. Giving it
   * position:relative also makes it the positioning ancestor, so the absolutely
   * placed image insets against the container's 32px gutter instead of the
   * banner's edge and leaves a strip of background on the right. */
  .qld-banner.with-hero-image .banner-content {
    position: relative;
    z-index: 2;
    /* QGDS still assigns grid-column: 1 / span 7 at higher specificity, which
       against a single-column track generates six implicit columns that only
       collapse to zero by luck. Say the full span explicitly. */
    grid-column: 1 / -1;
  }

  /* With the photo taken out of flow the grid has a single in-flow child, so
     collapse it to one column and cap the text instead. The cap is measured
     against the diagonal's narrowest point: the blue reaches 47.222% at the
     bottom edge, less the 64px left gutter, so 45% of the container keeps the
     last line of text clear of the cut at every width in this breakpoint. */
  .qld-banner.with-hero-image .banner-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* .banner-abstract is a descendant of .banner-content, so listing both here
     applied the cap twice (0.45 x 0.45 = 20% of the grid area, roughly ten
     characters per line at the abstract's 1.5rem). The child inherits the
     constraint from its parent. */
  .qld-banner.with-hero-image .banner-content {
    max-width: 45%;
  }
}

/* The admin toolbar's vertical tray takes about 240px off the page, so a
   viewport query overstates the width the banner actually gets. Between the
   breakpoint and 1232px an editor would be running the diagonal inside a
   ~960px banner, capping the text near 400px. Hand those widths back to the
   stacked treatment; readers are unaffected because the tray is editor-only. */
@media (min-width: 992px) and (max-width: 1231.98px) {
  body.toolbar-vertical .qld-banner.qld-banner-grid.with-hero-image {
    background-color: var(--qld-banner-bg-color);
  }

  body.toolbar-vertical .qld-banner.with-hero-image::before {
    display: none;
  }

  body.toolbar-vertical .qld-banner.with-hero-image .banner-image {
    position: static;
    width: auto;
  }

  body.toolbar-vertical .qld-banner.with-hero-image .banner-inner {
    grid-template-columns: none;
  }

  body.toolbar-vertical .qld-banner.with-hero-image .banner-content {
    max-width: none;
  }
}
}

/* ---------------------------------------------------------------------------
 * Banner call to action, from the Page Header component's Button default.
 *
 * Scoped to .banner-cta on purpose. The .btn-white variant these buttons carry
 * is a deliberate QRIDA exception used on dark and brand panels elsewhere, so
 * it is left alone outside the banner.
 *
 * Driven through QGDS's own --qld-btn-* tokens, and scoped to .dark since the
 * colours are fixed palette entries rather than variant-aware indirection.
 * ------------------------------------------------------------------------- */

.qld-banner.dark .banner-cta .btn {
  /* Driven through the component's own tokens rather than as plain
     declarations, so the hover pair comes free and an upgrade cannot quietly
     win the cascade. QGDS already ships .btn { border: none }, so no reset is
     needed here. */
  --qld-btn-padding-x: 24px;
  --qld-btn-padding-y: 12px;
  --qld-btn-border-radius: 4px;
  --qld-btn-font-size: 1rem;
  --qld-btn-bg: var(--qld-color-default-color-dark-action-primary, #84d3ff);
  --qld-btn-color: var(--qld-color-default-color-dark-link-on-action, #001c37);
  --qld-btn-hover-bg: var(--qld-color-default-color-dark-action-primary-hover, #a6f7ff);
  --qld-btn-hover-color: var(--qld-color-default-color-dark-link-on-action, #001c37);
  --qld-btn-active-bg: var(--qld-color-default-color-dark-action-primary-hover, #a6f7ff);
  --qld-btn-active-color: var(--qld-color-default-color-dark-link-on-action, #001c37);
  min-width: 160px;
  line-height: 24px;
  text-decoration: none;
}

/* The component's resting drop shadow. Held off while focus-visible so it does
   not override --qld-btn-focus-box-shadow, which a plain box-shadow here would
   beat on specificity and silently remove the design system's focus ring. */
.qld-banner.dark .banner-cta .btn:not(:focus-visible) {
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.1);
}

/* The banner CTA can carry two blocks: the program meta row (type, closing
   date, status) and, under it, QGDS' .cta-buttons row holding the derived
   "Apply now" button. Neither block sets a vertical rhythm of its own, so the
   two ran together. Scoped to .cta-buttons rather than a general adjacent-
   sibling rule so the loose <a class="btn"> elements the intro-paragraph
   buttons field emits keep sitting on one line. */
.qld-banner .banner-cta .program-hero-meta + .cta-buttons,
.qld-banner .banner-cta .article-banner-meta + .cta-buttons {
  margin-top: 1rem;
}

/* QA 2026-09-04, item 4: "Check the icons on the banners for open and closed,
   and closing soon. Some still look not right." The approved reference in the
   deck shows the saturated green circle with a white tick sitting on the dark
   banner pill.

   That reverses the v1 answer. Round one asked for the banner icons to be
   "white", and they were made white by turning each two-colour glyph into a
   mask painted in the pill's own #deebf9. It worked for the calendar, which is
   a single-colour stroke icon, but it flattened the status glyphs: the green
   disc and the white tick punched through it both collapse to one flat pale
   disc, which is what "some still look not right" is pointing at.

   So the status icons go back to the component's own two-colour SVGs from
   css/components/qgds-status-tag.css, which is the approved artwork, and the
   traffic-light colour survives on the dark ground. The white symbol inside
   each disc supplies its own contrast.

   No WCAG 1.4.11 issue: each icon sits beside a text label reading Open,
   Closing Soon or Closed, which carries the state on its own and passes 4.5:1,
   so the glyph is redundant reinforcement rather than a graphic required to
   understand the content.

   The calendar below is a different case and keeps its mask. */

/* The date pill's calendar, same item. It is an inline data-URI drawn with
   stroke='%23636363', a mid grey chosen for the programs tile on white. On the
   banner's #003e96 that stroke measures about 2:1 and the icon all but
   disappears, which is the other half of "check the icons that appear in the
   banner are white".
 *
 * Masked like the status icons above so it takes the pill's own #deebf9. The
 * source stays a single asset, and the tile keeps its grey on white. */
.qld-banner .program-tile__date::before {
  background-image: none;
  background-color: currentColor;
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/svg%3E");
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/svg%3E");
}