/* ==========================================================================
   Faceted Callouts - Context-Aware Business Guidance
   Compatible with GOV.UK Frontend v5.11.2
   ========================================================================== */

/* Base Faceted Callout Styles
   Refined GOV.UK panel: white bg, left border accent, subtle shadow
   ========================================================================== */

.faceted-callout {
    background: var(--color-bg-white);
    border-left: 4px solid;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.faceted-callout:focus-within {
    outline: 3px solid var(--color-focus);
    outline-offset: 0;
}

/* Badge Row (new design overhaul)
   ========================================================================== */

.faceted-callout__badge-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.faceted-callout__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.faceted-callout__badge-icon {
    font-size: 16px;
    line-height: 1;
}

.faceted-callout__badge-text {
    color: inherit;
}

/* Nation badges */
.faceted-callout__badge--scotland {
    background: #E8F1F8;
    color: #0065BF;
    border: 1px solid #0065BF;
}

.faceted-callout__badge--wales {
    background: #FBEAE7;
    color: #D4351C;
    border: 1px solid #D4351C;
}

.faceted-callout__badge--northern-ireland {
    background: #E5F3EB;
    color: #00843D;
    border: 1px solid #00843D;
}

.faceted-callout__badge--england {
    background: #E8F1F8;
    color: #1D70B8;
    border: 1px solid #1D70B8;
}

.faceted-callout__badge--uk {
    background: #F3F2F1;
    color: #0B0C0C;
    border: 1px solid #505A5F;
}

/* Callout type badges */
.faceted-callout__badge-type {
    display: inline-flex;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.faceted-callout__badge-type--requirement {
    background: #FFF7E6;
    color: #6E5B00;
    border: 1px solid #FFDD00;
}

.faceted-callout__badge-type--exemption {
    background: #F3F2F1;
    color: #505A5F;
    border: 1px solid #B1B4B6;
}

.faceted-callout__badge-type--advantage,
.faceted-callout__badge-type--opportunity {
    background: #E5F3EB;
    color: #00703C;
    border: 1px solid #00703C;
}

.faceted-callout__badge-type--limitation {
    background: #FFF7E6;
    color: #6E5B00;
    border: 1px solid #FFDD00;
}

/* Sector badges */
.faceted-callout__badge--sector {
    background: #E5F3EB;
    color: #00703C;
    border: 1px solid #00703C;
}

/* Threshold badges */
.faceted-callout__badge--threshold {
    background: #FFF7E6;
    color: #6E5B00;
    border: 1px solid #F47738;
}

.faceted-callout__badge--approaching {
    background: #FBEAE7;
    color: #942514;
    border: 1px solid #D4351C;
}

.faceted-callout__badge-amount {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
}

/* Structure badges */
.faceted-callout__badge--structure {
    background: #F3E8F8;
    color: #6B21A8;
    border: 1px solid #8B5CF6;
}

/* International badges */
.faceted-callout__badge--international {
    background: #E8EEF8;
    color: #1E40AF;
    border: 1px solid #1E40AF;
}

/* Generic badges */
.faceted-callout__badge--generic.faceted-callout__badge--info {
    background: #E8F1F8;
    color: #1D70B8;
    border: 1px solid #1D70B8;
}

.faceted-callout__badge--generic.faceted-callout__badge--warning {
    background: #FFF7E6;
    color: #6E5B00;
    border: 1px solid #F47738;
}

.faceted-callout__badge--generic.faceted-callout__badge--success {
    background: #E5F3EB;
    color: #00703C;
    border: 1px solid #00703C;
}

.faceted-callout__badge--generic.faceted-callout__badge--error {
    background: #FBEAE7;
    color: #942514;
    border: 1px solid #D4351C;
}

/* Header
   ========================================================================== */

.faceted-callout__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.faceted-callout__icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faceted-callout__heading {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

/* Content
   ========================================================================== */

.faceted-callout__content {
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.faceted-callout__content:last-child {
    margin-bottom: 0;
}

.faceted-callout__content p,
.faceted-callout__content li {
    color: var(--color-text-primary);
}

.faceted-callout__content p:last-child {
    margin-bottom: 0;
}

/* Additional Detail Sections
   ========================================================================== */

.faceted-callout__explanation,
.faceted-callout__detail,
.faceted-callout__enforcement,
.faceted-callout__strategic,
.faceted-callout__timeline,
.faceted-callout__when-matters,
.faceted-callout__exemption,
.faceted-callout__documentation {
    background: var(--color-bg-page);
    padding: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.faceted-callout__explanation-text,
.faceted-callout__detail-text,
.faceted-callout__enforcement-text,
.faceted-callout__strategic-text,
.faceted-callout__timeline-text,
.faceted-callout__when-matters-text,
.faceted-callout__exemption-text,
.faceted-callout__documentation-text {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Footer
   ========================================================================== */

.faceted-callout__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.faceted-callout__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
}

.faceted-callout__link:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: max(3px, .1875rem);
}

.faceted-callout__link:focus {
    outline: var(--focus-width) solid transparent;
    background-color: var(--color-focus);
    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-focus-text);
    text-decoration: none;
    color: var(--color-focus-text);
}

.faceted-callout__link-arrow {
    font-size: 18px;
    font-weight: 700;
}

/* Geographic Callout Variants
   ========================================================================== */

.faceted-callout--geographic {
    border-left-color: var(--color-gov-blue);
}

.faceted-callout--scotland {
    border-left-color: var(--color-scotland);
}

.faceted-callout--wales {
    border-left-color: var(--color-wales);
}

.faceted-callout--northern-ireland {
    border-left-color: var(--color-northern-ireland);
}

.faceted-callout--england {
    border-left-color: var(--color-england);
}

.faceted-callout--uk {
    border-left-color: var(--color-gov-blue);
}

/* Sector Callout Variants
   ========================================================================== */

.faceted-callout--sector {
    border-left-color: var(--color-teal);
}

.faceted-callout--sector.faceted-callout--requirement {
    border-left-color: var(--color-teal);
}

.faceted-callout--sector.faceted-callout--exemption {
    border-left-color: var(--color-gray-medium);
}

.faceted-callout--sector.faceted-callout--advantage {
    border-left-color: var(--color-success);
}

/* Threshold Callout Variants
   ========================================================================== */

.faceted-callout--threshold {
    border-left-color: var(--color-warning);
}

.faceted-callout--threshold.faceted-callout--approaching {
    border-left-color: var(--color-error);
}

.faceted-callout__threshold-display {
    background: var(--color-warning-bg);
    border: 2px solid var(--color-warning);
    border-radius: var(--border-radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.faceted-callout__threshold-amount {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faceted-callout__threshold-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.faceted-callout__threshold-value {
    font-size: 27px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

/* Threshold Comparison
   ========================================================================== */

.faceted-callout__comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

@media (min-width: 640px) {
    .faceted-callout__comparison {
        grid-template-columns: 1fr 1fr;
    }
}

.faceted-callout__comparison-above,
.faceted-callout__comparison-below {
    background: var(--color-bg-page);
    padding: var(--space-4);
    border-radius: var(--border-radius-sm);
}

.faceted-callout__comparison-above {
    border-left: 3px solid var(--color-warning);
}

.faceted-callout__comparison-below {
    border-left: 3px solid var(--color-success);
}

.faceted-callout__comparison-heading {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
}

.faceted-callout__comparison-structure {
    background: var(--color-bg-page);
    padding: var(--space-4);
    margin-top: var(--space-4);
    border-radius: var(--border-radius-sm);
}

.faceted-callout__comparison-structure .faceted-callout__comparison-heading {
    margin-bottom: var(--space-3);
}

/* Structure Callout Variants
   ========================================================================== */

.faceted-callout--structure {
    border-left-color: var(--color-purple);
}

.faceted-callout--structure.faceted-callout--requirement {
    border-left-color: var(--color-purple);
}

.faceted-callout--structure.faceted-callout--advantage {
    border-left-color: var(--color-teal);
}

.faceted-callout--structure.faceted-callout--limitation {
    border-left-color: var(--color-amber);
}

.faceted-callout--structure.faceted-callout--exemption {
    border-left-color: var(--color-gray-medium);
}

/* International Callout Variants
   ========================================================================== */

.faceted-callout--international {
    border-left-color: var(--color-deep-blue);
}

.faceted-callout--international.faceted-callout--requirement {
    border-left-color: var(--color-deep-blue);
}

.faceted-callout--international.faceted-callout--exemption {
    border-left-color: var(--color-gray-medium);
}

.faceted-callout--international.faceted-callout--opportunity {
    border-left-color: var(--color-teal);
}

/* Generic Callout Variants
   ========================================================================== */

.faceted-callout--generic.faceted-callout--info {
    border-left-color: var(--color-info-border);
}

.faceted-callout--generic.faceted-callout--warning {
    border-left-color: var(--color-warning);
}

.faceted-callout--generic.faceted-callout--success {
    border-left-color: var(--color-success);
}

.faceted-callout--generic.faceted-callout--error {
    border-left-color: var(--color-error);
}

/* Mobile Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .faceted-callout {
        padding: var(--space-4);
        margin-left: calc(-1 * var(--space-3));
        margin-right: calc(-1 * var(--space-3));
        border-left-width: 4px;
        border-radius: 0;
    }

    .faceted-callout__heading {
        font-size: var(--font-size-base);
    }

    .faceted-callout__icon {
        font-size: 20px;
        width: 28px;
        height: 28px;
    }

    .faceted-callout__threshold-value {
        font-size: 22px;
    }

    .faceted-callout__comparison {
        grid-template-columns: 1fr;
    }
}

/* Print Styles
   ========================================================================== */

@media print {
    .faceted-callout {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
        padding: 10pt;
        margin-bottom: 12pt;
    }

    .faceted-callout__link {
        color: #000;
        text-decoration: underline;
    }

    .faceted-callout__link::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
        font-weight: 400;
    }

    .faceted-callout__icon {
        filter: grayscale(100%);
    }
}

/* Accessibility Enhancements
   ========================================================================== */

.faceted-callout:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .faceted-callout {
        border-left-width: 7px;
    }

    .faceted-callout__threshold-display {
        border-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .faceted-callout {
        transition: none;
    }
}

/* Dark Mode Support - Disabled to prevent text readability issues
   The site doesn't fully support dark mode yet. Enabling these styles
   caused light gray text on white backgrounds because variant backgrounds
   (e.g. sector gradients) weren't being updated for dark mode.

   TODO: Implement full dark mode with CSS custom properties that change
   within the media query, so all backgrounds and text colors update together.
*/


/* ==========================================================================
   Support Organisations Callout
   Shows relevant business support based on user's location/sector
   ========================================================================== */

.faceted-callout--support {
    border-left-color: #1D70B8;
    background: linear-gradient(135deg, #F8FAFB 0%, #FFFFFF 100%);
}

.faceted-callout--support.faceted-callout--personalised {
    border-left-color: #00703C;
}

/* Badge variants for support callout */
.faceted-callout__badge--region {
    background: #E8F5E9;
    color: #00703C;
    border: 1px solid #00703C;
}

.faceted-callout__badge--sector {
    background: #E3F2FD;
    color: #1D70B8;
    border: 1px solid #1D70B8;
}

/* Intro text styling */
.faceted-callout__intro {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.faceted-callout__personalise-link {
    color: var(--color-link);
    text-decoration: underline;
    font-weight: 500;
}

.faceted-callout__personalise-link:hover {
    color: var(--color-link-hover);
}

/* Support organisation list */
.support-callout__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.support-callout__item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-3) var(--space-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.support-callout__item:hover {
    border-color: var(--color-link);
    box-shadow: var(--shadow-sm);
}

.support-callout__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
}

.support-callout__org-name {
    font-weight: 600;
    color: var(--color-link);
    flex-grow: 1;
}

.support-callout__item:hover .support-callout__org-name {
    text-decoration: underline;
}

.support-callout__org-type {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.support-callout__external-icon {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Service tags */
.support-callout__services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.support-callout__service-tag {
    display: inline-block;
    padding: 2px var(--space-2);
    background: var(--color-bg-light);
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: capitalize;
}

/* Footer with change link */
.faceted-callout__footer-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
}

.faceted-callout__change-link {
    color: var(--color-link);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (min-width: 640px) {
    .support-callout__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media print {
    .support-callout__list {
        grid-template-columns: 1fr;
    }

    .support-callout__item {
        border: 1px solid #000;
        page-break-inside: avoid;
    }
}