/* ============================================================================
   HEY LSIP — Visual parity sweep
   Three concrete items only, per the workstream scope:
     1. Align news/news-details cards with the new event-card patterns
     2. Standardise the .button CTA across pages
     3. Tighten admin form spacing + the CMS HTML editor wrap
   ============================================================================ */

/* ── 1. News card visual alignment ──────────────────────────────────────── */
/*
 * The /news-and-events page uses RadzenCard. Inherit the new event-card hover/
 * shadow language so news and events look like siblings, not strangers.
 */

.newsItems .rz-card {
    border-radius: 8px !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.newsItems .rz-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* News detail body width + spacing to match event detail */
#pageContent .container h1.h1 {
    margin-top: 1rem;
}

#pageContent .container .rightpic {
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ── 2. Standardise the .button CTA used across the site ─────────────────── */
/*
 * The existing .button class has its own definition in HEYLSIPStyle.css.
 * Just tighten focus and active states so it feels alive — additive, non-breaking.
 */

.button:focus-visible {
    outline: 3px solid rgba(40, 167, 69, 0.4);
    outline-offset: 2px;
}

.button:active {
    transform: translateY(1px);
}

/* ── 3. Admin form polish — tighter spacing, friendlier hover ────────────── */

.rz-button + .rz-button { margin-left: 0.4rem; }

/* Admin manage menu (six buttons can wrap awkwardly on narrow viewports) */
.noTranslator .rz-stack { row-gap: 0.5rem !important; }

/* Status strips reused across admin edit pages */
.survey-status-url,
code.survey-status-url {
    background: #f4f4f0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    word-break: break-all;
}

/* ── Bonus: tidy form layout on EditNewsItem etc. so the resize fix lands cleanly ── */

/* The .cms-html-wrap is defined in surveys.css — repeat it here too in case
 * surveys.css ever gets removed independently. Keep both — last-wins is fine
 * since both rules are identical. */
.cms-html-wrap { background: #fff; }

/* ── CMS RadzenHtmlEditor: usable default size + drag-to-resize ─────────────
 * Applies globally to every RadzenHtmlEditor instance across the admin pages
 * (Edit/Create Page, News, Event, Sector, Employer, Minute, Survey). The
 * contenteditable region is `.rz-html-editor-content`; making that resizable
 * gives the user the native browser drag handle in the bottom-right corner.
 */
.rz-html-editor {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    width: 100%;
}

.rz-html-editor-content {
    min-height: 280px;
    height: 320px;
    resize: vertical;
    overflow: auto;
    flex: 1 1 auto;
}

/* If a page wraps the editor in .cms-html-wrap, let the wrap grow with the
 * editor instead of clipping it. The wrap's own overflow:hidden in surveys.css
 * would otherwise clip the native resize handle. */
.cms-html-wrap {
    min-height: 360px;
    height: auto;
    overflow: visible;
}

.cms-html-wrap .rz-html-editor-content {
    min-height: 280px;
    height: 320px;
    resize: vertical;
    overflow: auto;
}

/* The toolbar should never shrink — only the content area resizes. */
.rz-html-editor-toolbar {
    flex: 0 0 auto;
}

/* Soft border on file upload inputs to match the form style */
input[type="file"] {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

/* ── Nav: spacing & responsiveness ──────────────────────────────────────── */
/*
 * Scope: spacing + responsive behaviour only. No colours, no hover effects,
 * no caret swap, no dropdown restyle. The existing visual language stays.
 *
 * Issues this addresses:
 *   • Adding News / Events / Sectors pushed the top-level row over the
 *     desktop breakpoint, causing overflow / awkward wrapping between
 *     ~992px and ~1280px.
 *   • Inconsistent horizontal padding between dropdown links and flat links.
 *   • The trailing cluster (Translation + Signposter + Social) crowds the
 *     link list at medium widths.
 *   • Mobile collapsed nav had no vertical breathing room.
 */

/* Even, predictable padding across every top-level link (dropdown or flat). */
.navbar-nav .nav-link {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

/* Compact the inter-medium range so things fit before the BS collapse kicks in.
   Bootstrap 4 collapses .navbar-expand-lg below 992px — between 992 and ~1199
   is where the new items overflow. Trim padding here and shrink the logo. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-nav .nav-link {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
        font-size: 0.92rem;
    }
    #logo img { height: 70px; }
}

/* Trailing cluster (Translation + Signposter + Social): all icons share a
   single 32×32 footprint, evenly spaced. Compact without being shrunken. */
@media (min-width: 992px) {

    /* Each wrapper aligns inline as a vertical-centred row item. */
    .navbar-collapse > #translate-wrapper,
    .navbar-collapse > #signposter,
    .navbar-collapse > .d-md-flex {
        display: inline-flex;
        align-items: center;
        margin-left: 0.4rem;
    }

    /* Social cluster — same 32px footprint, tight gap, no left margin/border
       chrome (let Tailwind defaults breathe). Override HEYLSIPStyle's float. */
    #social {
        display: inline-flex !important;
        gap: 0.45rem;
        align-items: center;
        float: none !important;
        margin: 0 0 0 0.4rem !important;
    }
    #social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
    }
    #social a img {
        height: 1.65rem;        /* 26.4px — sits visually equal to the 32px circles */
        width: auto !important;
        margin: 0 !important;
        object-fit: contain;
    }
}

/* Below the lg breakpoint, return to the original sizing from HEYLSIPStyle. */

/* ── Google Translate widget — modernise the stock chrome ─────────────────
 * Default Google Translate gadget renders:
 *   • a Google logo
 *   • "Powered by Google Translate" text
 *   • a native <select> that looks like it's from 2010
 *   • a top banner iframe ("Translated from English to X")
 *   • a hover tooltip over translated phrases
 *
 * We hide all the chrome and restyle only the <select>. The combo is now a
 * clean rounded picker with a custom chevron, matching the site's panels.
 */

/* Reset the gadget wrapper */
#google_translate_element .goog-te-gadget {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0;
}

/* Hide Google branding and the "Powered by" footer */
#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget > span > a,
#google_translate_element .goog-te-gadget-icon,
#google_translate_element img {
    display: none !important;
}

/* Bring the combo back from font-size:0 — restore proper readable size */
#google_translate_element .goog-te-combo {
    width: 100%;
    padding: 0.55rem 2.25rem 0.55rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: #1f2937;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%231f2937' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#google_translate_element .goog-te-combo:hover {
    border-color: #cbd5e1;
}

#google_translate_element .goog-te-combo:focus {
    outline: none;
    border-color: #1A1143;
    box-shadow: 0 0 0 3px rgba(26, 17, 67, 0.15);
}

/* Kill the top "Translation banner" Google injects globally */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
    display: none !important;
}

/* Stop Google pushing the body down when its banner mounts */
body {
    top: 0 !important;
    position: static !important;
}

/* Hide the hover tooltip that floats over translated phrases */
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Neutralise the yellow highlight over translated text */
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* Mobile / collapsed: vertical rhythm + dropdown indent so the hierarchy reads. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding: 0.6rem 1rem;
    }
    .navbar-nav .dropdown-menu {
        padding: 0.25rem 0 0.5rem 0.75rem;
        margin: 0;
    }
    .navbar-nav .dropdown-item {
        padding: 0.45rem 1rem;
        white-space: normal;
    }
    #social {
        margin: 0.75rem 0 0;
        gap: 0.6rem;
    }
}

/* ── Accessibility — focus visibility everywhere ─────────────────────────── */

/* Inputs, buttons, links should have a clear focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(40, 167, 69, 0.45);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Skip-to-main-content link — invisible until focused */
.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #28a745;
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Reduce motion: honour user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Environment banner (staging/dev) ────────────────────────────────────── */

.env-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: #fbb13c;
    color: #4a2c00;
    font-size: 0.85rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.env-banner .material-symbols-outlined { font-size: 1rem; }

.env-banner.env-development { background: #c0392b; color: #fff; }
.env-banner.env-staging     { background: #fbb13c; color: #4a2c00; }

@media print { .env-banner { display: none !important; } }

/* ── Share buttons ───────────────────────────────────────────────────────── */

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem 0;
    margin: 1.5rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.share-buttons-label {
    color: #555;
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 0.4rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    background: #fff;
    color: #444;
    border: 1px solid #e6e6e6;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-btn:hover {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
    text-decoration: none;
}

.share-btn .material-symbols-outlined { font-size: 1rem; }

/* ── Newsletter signup ───────────────────────────────────────────────────── */

.newsletter-block {
    background: var(--lsip-paper, #f6f6f1);
    color: var(--lsip-ink, #1a1a1a);
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    border-top: 1px solid var(--lsip-line, #e3e1d8);
    border-bottom: 1px solid var(--lsip-line, #e3e1d8);
}

.newsletter-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 768px) {
    .newsletter-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

.newsletter-copy h2 {
    color: var(--lsip-brand, #14387a);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.newsletter-copy p {
    color: var(--lsip-text-muted, #555);
    margin: 0;
    line-height: 1.5;
    font-size: 1rem;
}

.newsletter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .newsletter-form { grid-template-columns: 1fr; }
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
    padding: 0.85rem 1rem;
    border-radius: 6px;
    border: 1.5px solid #b8b3a3;
    background: white;
    color: var(--lsip-ink, #1a1a1a);
    font-size: 0.95rem;
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(15, 42, 92, 0.04);
}
.newsletter-form input::placeholder { color: #8a8472; opacity: 1; }

.newsletter-form input:focus {
    outline: 3px solid rgba(20, 56, 122, 0.18);
    outline-offset: 0;
    border-color: var(--lsip-brand, #14387a);
}

.newsletter-form .button {
    background: #d77c1a !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.newsletter-form .button:hover {
    background: #b8650f !important;
    color: #fff !important;
}

.newsletter-form .button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-success {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--lsip-success-bg, #e0f2e6);
    border: 1px solid var(--lsip-success, #1f7a4a);
    border-radius: 6px;
    color: var(--lsip-success, #1f7a4a);
    font-weight: 600;
}

.newsletter-error {
    margin-top: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: rgba(192, 57, 43, 0.92);
    border-radius: 4px;
    color: #fff;
    font-size: 0.9rem;
}

.newsletter-privacy {
    margin: 0.75rem 0 0;
    color: var(--lsip-text-soft, #777);
    font-size: 0.78rem;
    grid-column: 1 / -1;
}

/* ── 404 page ────────────────────────────────────────────────────────────── */

.notfound-page {
    padding: 3rem 1.25rem 4rem;
    max-width: 720px;
}

.notfound-card {
    background: #fff;
    padding: 2.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.04);
    margin-top: -3rem;
    position: relative;
    z-index: 1;
    text-align: center;
}

.notfound-code {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: #28a745;
    opacity: 0.18;
    letter-spacing: -0.05em;
}

.notfound-lead {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 1rem 0 2rem;
}

.notfound-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Admin dashboard rules have been moved to lsip-design-system.css to keep
   admin-* tokens in one place. This block intentionally left empty so
   the legacy rules can't override the newer design-system styles. */

.admin-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-activity-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.admin-activity-list li:last-child { border-bottom: none; }

.admin-activity-list .material-symbols-outlined {
    color: #28a745;
    font-size: 1.2rem;
}

.admin-activity-list a {
    color: #28a745;
    text-decoration: none;
    font-weight: 600;
}

.admin-activity-list a:hover { text-decoration: underline; }

.firstrun-list {
    padding-left: 1.5rem;
    margin: 1rem 0 0;
}

.firstrun-list li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.firstrun-list li a {
    margin-left: 0.4rem;
    color: #28a745;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.firstrun-list li a:hover { text-decoration: underline; }

/* ── Admin global search ─────────────────────────────────────────────────── */

.admin-global-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #ced4da;
    border-radius: 999px;
    padding: 0.4rem 1.25rem;
    max-width: 720px;
    transition: border-color 0.15s ease;
}

.admin-global-search:focus-within {
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.admin-global-search .material-symbols-outlined { color: #888; }

.admin-global-search input {
    flex: 1;
    border: 0;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.admin-global-search-clear {
    background: transparent;
    border: 0;
    color: #888;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
}

.admin-search-group-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.75rem;
}

.admin-search-group-heading .material-symbols-outlined {
    color: #28a745;
    font-size: 1.3rem;
}

.admin-search-hits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-search-hits li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-search-hits li:last-child { border-bottom: none; }

.admin-search-hits a {
    color: #28a745;
    font-weight: 600;
    text-decoration: none;
}

.admin-search-hits a:hover { text-decoration: underline; }

.admin-search-meta {
    color: #888;
    font-size: 0.85rem;
}

/* ── Bulk actions bar (sticky above admin grids) ─────────────────────────── */

.bulk-actions-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fff8e8;
    border: 1px solid #fbb13c;
    border-radius: 6px;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.bulk-actions-bar > span {
    color: #5b3c00;
    margin-right: 0.5rem;
}

/* ── Service health page ─────────────────────────────────────────────────── */

.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.health-card {
    border-left: 4px solid #ddd;
}

.health-card.health-ok      { border-left-color: #28a745; }
.health-card.health-warning { border-left-color: #fbb13c; }
.health-card.health-stale   { border-left-color: #fbb13c; }
.health-card.health-error   { border-left-color: #c0392b; }

.health-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.health-icon { color: #28a745; }
.health-card.health-warning .health-icon { color: #fbb13c; }
.health-card.health-stale .health-icon   { color: #fbb13c; }
.health-card.health-error .health-icon   { color: #c0392b; }

.health-status-badge {
    margin-left: auto;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    background: #f4f4f0;
    border-radius: 999px;
    color: #555;
    font-weight: 600;
}

.health-card.health-ok .health-status-badge      { background: #e8f5ec; color: #1f6e34; }
.health-card.health-warning .health-status-badge { background: #fff3dc; color: #5b3c00; }
.health-card.health-stale .health-status-badge   { background: #fff3dc; color: #5b3c00; }
.health-card.health-error .health-status-badge   { background: #fdecea; color: #b53523; }

.health-card-body {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}