/* Home Office logo container */
.app-ho-logo {
    padding: 10px 0;
    background-color: #fff;
}

.app-ho-logo svg {
    display: block;
    width: 152px;
    max-width: 100%;
    height: auto;
}

/* Coloured inset text variants */
.app-inset-text--error {
    border-left-color: #b51721;
    background-color: #f0d6d7;
    padding: 15px;
}

.app-inset-text--success {
    border-left-color: #10403a;
    background-color: #bbe9e4;
    padding: 15px;
}

.app-inset-text--info {
    border-left-color: #144e73;
    background-color: #DBEFF9;
    padding: 15px;
}

/* Coloured inset text overrides */
.govuk-inset-red {
    border-left: 10px solid #b51721;
    background-color: #f0d6d7;
}

.govuk-inset-green {
    border-left: 10px solid #249386;
    background-color: #bbe9e4;
}

.govuk-inset-blue {
    border-left: 10px solid #2b8cc4;
    background-color: #DBEFF9;
}

/* Table-based coloured border cells */
.govuk-inset-blue-border {
    background-color: #2b8cc4;
    width: 10px;
}

.govuk-inset-text-border {
    background-color: #b1b4b6;
    width: 10px;
}

/* Error panel */
.govuk-panel--error {
    color: #0b0c0c;
    background: #f0d6d7;
    text-align: left;
    border-left: 8px solid #b51721;
    padding: 15px;
}

.govuk-panel--error h1,
.govuk-panel--error h2,
.govuk-panel--error p {
    color: #0b0c0c;
}

/* Error panel variant (red instead of green confirmation) */
.app-panel--error.govuk-panel--confirmation {
    background: #d4351c;
}

/* GDS typography fallback for bare <p> tags */
.govuk-main-wrapper p {
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Content's first element sits directly under .govuk-main-wrapper's 12px
   padding. Drop its top margin so the two don't stack into a 24px gap between
   the header and the page content. .template-content nests a level deeper than
   .gds-content-page (it lives inside gds-form-page, which has no
   .gds-content-page wrapper), so it needs its own entry. Inter-paragraph
   spacing is unaffected — only the leading edge changes. */
.gds-content-page > :first-child,
.template-content > :first-child {
    margin-top: 0;
}

.govuk-main-wrapper h1:not([class]),
.govuk-main-wrapper h2:not([class]),
.govuk-main-wrapper h3:not([class]),
.govuk-main-wrapper h4:not([class]),
.govuk-main-wrapper h5:not([class]),
.govuk-main-wrapper h6:not([class]) {
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Compact confirmation panel — less dominant than standard GDS 48px/36px */
.govuk-panel--confirmation {
    padding: 25px;
}

.govuk-panel--confirmation .govuk-panel__title {
    font-size: 24px;
    color: #ffffff !important;
}

@media (min-width: 40.0625em) {
    .govuk-panel--confirmation .govuk-panel__title {
        font-size: 27px;
    }
}

@media print {
    .govuk-panel--confirmation .govuk-panel__title {
        color: var(--govuk-text-colour, #0b0c0c) !important;
    }
}

.govuk-panel--confirmation .govuk-panel__body {
    font-size: 16px;
    color: #ffffff !important;
}

@media (min-width: 40.0625em) {
    .govuk-panel--confirmation .govuk-panel__body {
        font-size: 19px;
    }
}

@media print {
    .govuk-panel--confirmation .govuk-panel__body {
        color: var(--govuk-text-colour, #0b0c0c) !important;
    }
}

/* The confirmation panel is focused programmatically (it carries tabindex="-1") so that
   screen readers land on it. govuk-frontend styles the focus of the analogous
   .govuk-error-summary but not the panel, so without a rule here every browser paints its
   own default focus ring: a black double ring on Chrome, a blue one on Firefox, a soft glow
   on Safari. That read as a stray border on the panel that changed from device to device.

   An earlier version of this rule tried to keep a visible :focus-visible outline for
   "genuine keyboard focus", but tabindex="-1" removes the panel from the Tab sequence
   entirely, so a sighted keyboard user can never actually tab onto it — the scripted
   .focus() call is the only way it is ever focused. There is no keyboard case to preserve,
   so the outline is suppressed unconditionally, matching the same fix applied to
   DepartureService's auto-focused regions (ticket #27328, PR 22981). */
.govuk-panel[data-gds-confirmation-panel]:focus {
    outline: none;
}

/* Protect the heading hierarchy from inline styles injected by rich-text editors.
   Headings carry the GDS type scale and an author must not be able to make an h1 read as
   body text, so a span inside one is held to the heading's own size, weight and family.

   Paragraphs are deliberately NOT included. This rule used to cover `p span` as well, which
   made it impossible to emphasise a word anywhere in body copy: an author's bold, colour or
   size was reverted on every landing page in the estate. That is the opposite of the intent,
   because inline emphasis inside a paragraph is ordinary authoring rather than a threat to
   the type scale. Measured on a live DMS landing page, a span carrying
   `font-weight: 700; font-size: 24px; font-family: Georgia, serif` rendered as plain body
   text.

   :not(.template-content span) stays on the headings. It exempts editor-authored zones, and
   exactly one view in the estate emits that class (MultiService's Feedback page), so leaving
   it costs nothing and removing it would change that page's behaviour for no reason. It was
   never a general carve-out, which is why the paragraph case had to be fixed in the selector
   rather than by asking every suite to adopt a marker class. */
.govuk-main-wrapper h1 span:not(.template-content span),
.govuk-main-wrapper h2 span:not(.template-content span),
.govuk-main-wrapper h3 span:not(.template-content span) {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    color: inherit;
    font-family: inherit !important;
}

.govuk-main-wrapper {
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (min-width:40.0625em) {
    .govuk-main-wrapper {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}