/* Make headers feel interactive */
.expand-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/* Warm-neutral hover color (subtle, not yellow) */
.expand-toggle:hover {
    background-color: var(--color-expand-highlight);
}

/* Chevron icon styling */
.toggle-icon {
    font-size: 0.9rem;
    color: var(--color-chevron);
    transition: transform 0.25s ease;
    opacity: 0.75;
}

/* Rotate chevron when expanded */
.expand-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
}

:root {
    --color-margin-bg: #EEEEEE; /* This is color of margins */

    /* Page backgrounds */
    --color-page-bg: #eee;
    --color-expand-highlight: #e4e0d8;

    /* Header */
    --color-header-bg: #c8c8c8;

    /* Home */
    --color-chevron: #5A4A2A;

    /* Navigation */
    --color-nav-bg: #ffc107;       /* default button background */
    --color-nav-hover-bg: #C9A227;
    --color-nav-active-bg: #dc3545;
    --color-nav-text: #2A2A2A;     /* near-black text  */

    /* Accents */
    --color-accent: #dc3545;

    /* Search bar */
    --color-search-border: #EFCF4D;
    --color-search-icon: gray;
    --color-placeholder: #aaa;

    /* Social icons */
    --color-icon-default: #2A2A2A;
    --color-icon-hover: #EFCF4D;

    /* Footer (NEW) */
    --color-footer-bg: #c8c8c8;
    --color-footer-text: #2A2A2A;
    --color-footer-link: #2A2A2A;

    /* Catalogue page */
    --color-catalogue-bg: #e4e0d8;
    --color-catalogue-frame-bg: #ffffff;
    --color-catalogue-spinner-bg: rgba(255,255,255,0.8); /* loading overlay */

    /* Content page card color */
    --color-card-bg: #e4e0d8;

    /* Links page */
    --color-links-bg: #eee;

    /* Contact page */
    --color-contact-bg: #eee;

    /* Optional new semantic helpers (no existing usage broken) */
    --color-heading-teal: #007B7F;
    --color-body-text: #2A2A2A;    /* main text color */
}





.home-content {
    background-color: var(--color-page-bg);
}

.expand-toggle {
    border-bottom: 1px solid rgba(0,0,0,0.15);
    color: var(--color-accent) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

/* Hide footer on catalogue page */
.catalogue-footer {
    display: none !important;
}

/* Footer styling (NEW) */
.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

.site-footer a {
    color: var(--color-footer-link);
    text-decoration: underline;
}