/* 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, nothing at all where the engine declines to treat a scripted focus as keyboard
   focus. That read as a stray border on the panel that changed from device to device. Keep
   the scripted case looking exactly like the authored landing page panel, and give
   keyboard-driven focus the standard GDS yellow outline. */
.govuk-panel[data-gds-confirmation-panel]:focus {
    outline: none;
}

.govuk-panel[data-gds-confirmation-panel]:focus-visible {
    outline: 3px solid var(--govuk-focus-colour, #fd0);
    outline-offset: 0;
}

/* Neutralise inline styles injected by rich-text editors on spans inside headings/paragraphs.
   :not(.template-content span) excludes spans that are descendants of .template-content so that
   Froala-authored inline styles (font-size, colour etc.) are not neutralised in template zones. */
.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),
.govuk-main-wrapper p 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;
    }
}