/* =========================================================
   SKAO Sphinx Theme
   Extends PyData Sphinx Theme with SKAO branding

   This file only overrides pydata's CSS custom properties
   with SKAO brand colors. All components use pydata's
   variable names for consistency.
   ========================================================= */

/* =========================================================
   SKAO Brand Color Overrides for PyData Theme
   Colors from ska-javascript-components
   Additional colors per SKAO UI Style Guide
   https://confluence.skatelescope.org/display/SWSI/Graphical+Color+Pallet
   as Magenta does not meet accessibility requirements
   ========================================================= */

/* Light theme - override pydata's light mode colors
   Per SKAO UI Style Guide: avoid magenta as it conflicts with alarm colors */
html:not([data-theme]),
html[data-theme="light"] {
    /* Primary: SKAO deep navy blue (LIGHT_SECONDARY main) */
    --pst-color-primary: #070068;
    --pst-color-primary-bg: #e0c7ff;

    /* Secondary: SKAO purple (LIGHT_SECONDARY light) */
    --pst-color-secondary: #472A97;
    --pst-color-secondary-bg: #f4eefb;

    /* Accent: SKAO purple - avoiding magenta per style guide */
    --pst-color-accent: #472A97;
    --pst-color-accent-bg: #f4eefb;

    /* Links use primary color */
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    /* Background colors (from LIGHT_PRIMARY) */
    --pst-color-background: #FFFFFF;
    --pst-color-on-background: #FFFFFF;  /* White for navbar, cards, elevated elements */
    --pst-color-surface: #F4F9FD;        /* Light gray for grouped/nested sections */
    --pst-color-on-surface: #212121;

    /* Text colors */
    --pst-color-text-base: #212121;
    --pst-color-text-muted: #48566b;

    /* Border colors */
    --pst-color-border: #C1C6CA;  /* LIGHT_PRIMARY main */
    --pst-color-border-muted: rgba(7, 0, 104, 0.15);

    /* Status colors - SKAO UI Style Guide aligned
       Shapes use these colors with white text for contrast */
    --pst-color-success: #015B00;  /* SKAO success green */
    --pst-color-success-bg: #d4e9dc;
    --pst-color-warning: #FB8C00;  /* Orange for warnings (yellow reserved for dark mode) */
    --pst-color-warning-bg: #ffe5b4;
    --pst-color-danger: #AD1F1F;   /* SKAO high-level error red */
    --pst-color-danger-bg: #f8d7da;
    --pst-color-info: #1565c0;     /* Blue for info (similar to #87C3EB darkened) */
    --pst-color-info-bg: #e1f0fb;
}

/* Dark theme - override pydata's dark mode colors
   Per SKAO UI Style Guide: Use yellow (#FFD136) as secondary for dark mode
   Avoid magenta in dark mode as it conflicts with alarm colors */
html[data-theme="dark"] {
    /* Primary: SKAO gold/yellow (DARK_SECONDARY per brand guide) */
    --pst-color-primary: #FFD136;
    --pst-color-primary-bg: #3d2a00;

    /* Secondary: SKAO light yellow (from DARK_SECONDARY light) */
    --pst-color-secondary: #FFF04E;
    --pst-color-secondary-bg: #342a00;

    /* Accent: SKAO gold/yellow - consistent with primary */
    --pst-color-accent: #FFD136;
    --pst-color-accent-bg: #3d2a00;

    /* Links - use yellow for visibility on dark backgrounds */
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    /* Background colors - SKAO dark theme (from DARK_PRIMARY) */
    --pst-color-background: #121212;
    --pst-color-on-background: #212121;
    --pst-color-surface: #484848;
    --pst-color-on-surface: #f3f4f5;

    /* Text colors */
    --pst-color-text-base: #FFFFFF;
    --pst-color-text-muted: #9ca4af;

    /* Border colors */
    --pst-color-border: #484848;
    --pst-color-border-muted: rgba(255, 255, 255, 0.12);

    /* Status colors - lightened variants of SKAO UI Style Guide colors
       for text readability on dark backgrounds (WCAG AA contrast) */
    --pst-color-success: #6ABF69;  /* Lightened #015B00 for contrast */
    --pst-color-success-bg: #1a3d1a;
    --pst-color-warning: #FFE939;  /* SKAO yellow - good contrast on dark */
    --pst-color-warning-bg: #3d2a00;
    --pst-color-danger: #FF5F52;   /* Lightened #AD1F1F for contrast */
    --pst-color-danger-bg: #4e111b;
    --pst-color-info: #87C3EB;     /* SKAO informational blue */
    --pst-color-info-bg: #0a2351;
}

/* =========================================================
   SKAO Font Override
   ========================================================= */
body {
    font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}

/* =========================================================
   SKAO Navbar Styling
   Matches SKAO website typography while using pydata colors
   ========================================================= */

/* Main navbar nav items */
.bd-header .navbar-nav .nav-link {
    font-size: 1.4rem;
    font-weight: 300;
    padding: 0.5rem 1rem;
    letter-spacing: normal;
    text-transform: none;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Remove pydata's default underline/border styles */
.bd-header .navbar-nav .nav-link::before,
.bd-header .navbar-nav .nav-link::after {
    display: none !important;
}

/* Navbar item hover - use pydata's link hover color */
.bd-header .navbar-nav .nav-link:hover {
    color: var(--pst-color-link-hover);
}

/* Active navbar item - subtle underline indicator */
.bd-header .navbar-nav .nav-item.current > .nav-link {
    position: relative;
}

.bd-header .navbar-nav .nav-item.current > .nav-link::after {
    display: block !important;
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--pst-color-link);
}

/* Logo/brand text styling */
.navbar-brand {
    font-size: 1.25rem;
    font-weight: 400;
}

/* Search button - match nav item sizing */
.bd-header .search-button {
    font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
}

/* Theme switcher button */
.bd-header .theme-switch-button {
    font-size: 1.1rem;
}

/* =========================================================
   SKAO Hero Section
   Uses SKAO brand gradient (navy blue to magenta)
   ========================================================= */
.skao-hero {
    padding: 3rem 2.5rem;
    margin: 0 0 2rem 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* Light mode - subtle gradient with brand colors */
    background: linear-gradient(
        135deg,
        rgba(7, 0, 104, 0.05) 0%,
        rgba(231, 0, 104, 0.08) 100%
    );
}

/* Dark mode hero with SKAO brand gradient */
html[data-theme="dark"] .skao-hero {
    /* SKAO main gradient: magenta (#E70068) to navy blue (#070068) */
    background: linear-gradient(
        225deg,
        #070068 0%,
        #1a0a50 30%,
        #3d0a58 60%,
        #6b0a5c 80%,
        #E70068 100%
    );
}

/* Star field effect for dark mode */
html[data-theme="dark"] .skao-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.4) 1px, transparent 0),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.25) 1px, transparent 0),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.35) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 160px 25px, rgba(255,255,255,0.45) 1px, transparent 0),
        radial-gradient(1px 1px at 250px 50px, rgba(255,255,255,0.3) 1px, transparent 0),
        radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.2) 1px, transparent 0),
        radial-gradient(1.2px 1.2px at 400px 35px, rgba(255,255,255,0.35) 1px, transparent 0),
        radial-gradient(1px 1px at 500px 75px, rgba(255,255,255,0.25) 1px, transparent 0);
    pointer-events: none;
    opacity: 0.6;
}

.skao-hero-content {
    position: relative;
    z-index: 1;
}

.skao-hero-title {
    color: var(--pst-color-text-base);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    border: none;
    padding: 0;
}

.skao-hero-description {
    font-size: 1.1rem;
    color: var(--pst-color-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    max-width: 700px;
}

.skao-hero-link {
    color: var(--pst-color-accent);
    text-decoration: none;
    font-weight: 500;
}

.skao-hero-link:hover {
    color: var(--pst-color-link-hover);
}

/* Hero search box */
.skao-hero-search {
    display: flex;
    align-items: center;
    max-width: 600px;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .skao-hero-search {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.skao-hero-search:hover {
    border-color: var(--pst-color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .skao-hero-search:hover {
    background: rgba(255, 255, 255, 0.12);
}

.skao-hero-search-icon {
    font-size: 1.1rem;
    margin-right: 0.75rem;
    opacity: 0.6;
}

.skao-hero-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--pst-color-text-muted);
    outline: none;
    cursor: pointer;
}

.skao-hero-search-input::placeholder {
    color: var(--pst-color-text-muted);
    opacity: 0.8;
}

/* =========================================================
   SKAO Checklist
   ========================================================= */
.skao-checklist {
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.skao-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pst-color-border-muted);
}

.skao-checklist-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.skao-checklist-item:first-child {
    padding-top: 0;
}

.skao-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--pst-color-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.skao-checkbox:hover {
    border-color: var(--pst-color-accent);
    background: var(--pst-color-accent-bg);
}

.skao-checkbox.checked {
    background: var(--pst-color-accent);
    border-color: var(--pst-color-accent);
}

.skao-checkbox.checked::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.skao-checklist-content {
    flex: 1;
}

.skao-checklist-label {
    font-weight: 600;
    color: var(--pst-color-text-base);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.skao-checklist-desc {
    font-size: 0.875rem;
    color: var(--pst-color-text-muted);
    line-height: 1.5;
}

.skao-checklist-link {
    color: var(--pst-color-link);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.skao-checklist-link:hover {
    color: var(--pst-color-link-hover);
}

.skao-checklist-link::after {
    content: '→';
}

/* =========================================================
   SKAO Timeline Navigation
   ========================================================= */
.skao-timeline-container {
    margin: 2rem 0;
}

.skao-timeline-nav {
    display: flex;
    align-items: center;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.skao-timeline-step {
    padding: 0.5rem 1.25rem;
    color: var(--pst-color-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.skao-timeline-step:hover {
    color: var(--pst-color-text-base);
    background: var(--pst-color-surface);
}

.skao-timeline-step.active {
    background: var(--pst-color-accent-bg);
    color: var(--pst-color-accent);
}

.skao-timeline-chevron {
    color: var(--pst-color-text-muted);
    font-size: 1.25rem;
    font-weight: 300;
}

/* =========================================================
   SKAO Accordions
   ========================================================= */
.skao-accordions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skao-accordion {
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    overflow: hidden;
}

.skao-accordion[open] {
    border-color: var(--pst-color-accent);
}

.skao-accordion-header {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--pst-color-text-base);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.skao-accordion-header::-webkit-details-marker {
    display: none;
}

.skao-accordion-header::before {
    content: '▶';
    font-size: 0.75rem;
    color: var(--pst-color-accent);
    transition: transform 0.2s ease;
}

.skao-accordion[open] .skao-accordion-header::before {
    transform: rotate(90deg);
}

.skao-accordion-header:hover {
    background: var(--pst-color-surface);
}

.skao-accordion[open] .skao-accordion-header {
    background: var(--pst-color-accent-bg);
}

.skao-accordion-body {
    padding: 1.25rem;
    border-top: 1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
}

/* =========================================================
   SKAO Task Items
   ========================================================= */
.skao-task-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pst-color-border-muted);
}

.skao-task-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.skao-task-item:first-child {
    padding-top: 0;
}

.skao-task-bullet {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: var(--pst-color-accent);
    border-radius: 50%;
    margin-top: 0.5rem;
}

.skao-task-content {
    flex: 1;
}

.skao-task-title {
    font-weight: 600;
    color: var(--pst-color-text-base);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.skao-task-desc {
    color: var(--pst-color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================================================
   SKAO Tools Grid
   ========================================================= */
.skao-tools-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (max-width: 900px) {
    .skao-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.skao-tool-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.skao-tool-card:hover {
    border-color: var(--pst-color-accent);
    transform: translateY(-2px);
    box-shadow: var(--pst-color-shadow) 0 8px 24px;
}

.skao-tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: var(--pst-color-accent);
    color: white;
}

/* Tool variant colors */
.skao-tool-card--gitlab .skao-tool-icon {
    background: linear-gradient(135deg, #fc6d26 0%, #e24329 100%);
}

.skao-tool-card--jira .skao-tool-icon,
.skao-tool-card--confluence .skao-tool-icon {
    background: linear-gradient(135deg, #2684ff 0%, #0052cc 100%);
}

.skao-tool-card--slack .skao-tool-icon {
    background: linear-gradient(135deg, #4a154b 0%, #611f69 100%);
}

.skao-tool-card--monitoring .skao-tool-icon {
    background: var(--pst-color-success);
}

.skao-tool-card--artefact .skao-tool-icon {
    background: var(--pst-color-secondary);
}

.skao-tool-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pst-color-text-base);
    margin: 0 0 0.25rem 0;
}

.skao-tool-content p {
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
    margin: 0;
    line-height: 1.4;
}

.skao-external-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
    opacity: 0;
    transition: opacity 0.2s;
}

.skao-tool-card:hover .skao-external-icon {
    opacity: 1;
    color: var(--pst-color-accent);
}

/* =========================================================
   SKAO Feature Cards (rounded-box gradient icons)
   ========================================================= */
.skao-tools-grid--feature {
    gap: 1.25rem;
}

.skao-feature-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.skao-feature-card:hover {
    border-color: var(--pst-color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.skao-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.skao-feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pst-color-text-base);
    margin: 0 0 0.5rem 0;
}

.skao-feature-desc {
    font-size: 0.9rem;
    color: var(--pst-color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================
   SKAO Compact Cards (inline emoji)
   ========================================================= */
.skao-tools-grid--compact {
    gap: 1rem;
}

.skao-compact-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.skao-compact-card:hover {
    border-color: var(--pst-color-accent);
    background: var(--pst-color-surface);
}

.skao-compact-icon {
    font-size: 1.25rem;
}

.skao-compact-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--pst-color-text-base);
}

/* =========================================================
   SKAO Role Cards (emoji with description)
   ========================================================= */
.skao-tools-grid--role {
    gap: 1rem;
}

.skao-role-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.skao-role-card:hover {
    border-color: var(--pst-color-accent);
    transform: translateY(-2px);
}

.skao-role-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.skao-role-icon {
    font-size: 1.1rem;
}

.skao-role-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pst-color-text-base);
}

.skao-role-desc {
    font-size: 0.875rem;
    color: var(--pst-color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================
   SKAO Download Box
   ========================================================= */
.skao-download-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--pst-color-info-bg);
    border: 2px solid var(--pst-color-info);
    border-radius: 8px;
    margin: 1.5rem 0;
}

.skao-download-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.skao-download-icon {
    font-size: 2rem;
}

.skao-download-text strong {
    display: block;
    font-size: 1rem;
    color: var(--pst-color-text-base);
    margin-bottom: 0.25rem;
}

.skao-download-text p {
    font-size: 0.875rem;
    color: var(--pst-color-text-muted);
    margin: 0;
}

.skao-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--pst-color-accent);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.skao-download-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    color: white;
}

/* =========================================================
   SKAO Feedback Widget
   ========================================================= */
.skao-feedback {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pst-color-border-muted);
}

.skao-feedback-question {
    font-size: 0.95rem;
    color: var(--pst-color-text-muted);
}

.skao-feedback-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skao-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--pst-color-text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.skao-feedback-btn:hover {
    background: var(--pst-color-surface);
    color: var(--pst-color-text-base);
}

.skao-feedback-btn--yes:hover {
    color: var(--pst-color-success);
}

.skao-feedback-btn--no:hover {
    color: var(--pst-color-danger);
}

.skao-feedback-btn.selected {
    background: var(--pst-color-surface);
}

.skao-feedback-btn--yes.selected {
    color: var(--pst-color-success);
}

.skao-feedback-btn--no.selected {
    color: var(--pst-color-danger);
}

.skao-feedback-emoji {
    font-size: 1rem;
}

.skao-feedback-separator {
    color: var(--pst-color-border);
}

.skao-feedback-thanks {
    font-size: 0.9rem;
    color: var(--pst-color-success);
    font-weight: 500;
}

.skao-feedback[data-submitted="true"] .skao-feedback-buttons {
    display: none;
}

.skao-feedback[data-submitted="true"] .skao-feedback-thanks {
    display: block;
}