/*
 * Instance-specific color overrides.
 * Uncomment and change any variable below to customize the portal appearance.
 * This file is loaded after style.css, so values here take precedence.
 *
 * TIP: Change just --tp-primary and --tp-footer-bg for a quick rebrand.
 * The component variables (header, nav, title, etc.) inherit from the
 * base palette by default, so changing a base color propagates everywhere.
 */

:root {
    /* ── Base palette ─────────────────────────────────────────────── */
    --tp-primary: #1b7e62;            /* Main teal green color */
    --tp-primary-dark: #145a48;       /* Darker teal (WCAG AA with white) */
    --tp-primary-light: #e8f5f2;      /* Very light teal tint */
    /* --tp-bg: #f8fafc;                 Page background */
    /* --tp-surface: #ffffff;            Card / content background */
    /* --tp-text: #1e293b;              Body text */
    /* --tp-text-dark: #0f172a;         Headings, strong text */
    /* --tp-text-secondary: #334155;    Secondary text */
    /* --tp-muted: #64748b;             Muted / helper text */
    /* --tp-border: #e2e8f0;            Borders, dividers */

    /* ── Typography ─────────────────────────────────────────────────── */
    /* --tp-font-size-base: 16px;       Base font size */
    /* --tp-font-size-sm: 14px;         Small text */
    /* --tp-font-size-lg: 18px;         Large text */
    /* --tp-font-size-xl: 20px;         Extra large text */
    /* --tp-font-size-2xl: 24px;        2X large text */
    /* --tp-line-height-base: 1.5;     Base line height */

    /* ── Header ───────────────────────────────────────────────────── */
    /* --tp-header-bg: var(--tp-surface);       Header background */
    /* --tp-header-border: var(--tp-border);    Header bottom border */
    /* --tp-header-title: var(--tp-text-dark);  Site title color */
    /* --tp-header-title-size: clamp(1.75rem, 4vw, 2.75rem);  Site title responsive size */
    /* --tp-header-title-weight: 600;           Site title font weight */
    /* --tp-header-title-line-height: 1.1;       Site title line height */
    /* --tp-header-title-spacing: -0.025em;      Site title letter spacing */
    /* --tp-header-title-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  Site title font family */
    /* --tp-header-title-hover: #1e293b;         Site title hover color */
    /* --tp-header-subtitle: var(--tp-muted);   Site subtitle color */
    /* --tp-header-subtitle-size: clamp(0.9375rem, 2.2vw, 1.0625rem);  Subtitle responsive size */
    /* --tp-header-subtitle-weight: 500;         Subtitle font weight */
    /* --tp-header-subtitle-margin-top: 0.375rem;  Subtitle top margin */
    /* --tp-header-subtitle-line-height: 1.3;     Subtitle line height */
    /* --tp-header-subtitle-spacing: 0.005em;    Subtitle letter spacing */

    /* ── Navigation ───────────────────────────────────────────────── */
    /* --tp-nav-text: var(--tp-text-secondary);  Nav link text */
    /* --tp-nav-hover: var(--tp-primary);        Nav link hover */
    /* --tp-nav-active-bg: var(--tp-primary);    Active nav background */
    /* --tp-nav-active-text: #ffffff;            Active nav text */

    /* ── Search ───────────────────────────────────────────────────── */
    /* --tp-search-bg: var(--tp-surface);       Search input background */
    /* --tp-search-border: var(--tp-border);     Search input border */
    /* --tp-search-text: var(--tp-text);         Search input text */
    /* --tp-search-icon: var(--tp-muted);        Search icon color */
    /* --tp-search-icon-hover: #ffffff;          Search icon hover color */
    /* --tp-search-btn-bg: var(--tp-surface);    Search button background */
    /* --tp-search-btn-border: var(--tp-border); Search button border */
    /* --tp-search-btn-hover: var(--tp-primary);  Search button hover */

    /* ── Page title banner ────────────────────────────────────────── */
    /* --tp-title-bg: var(--tp-primary);         Banner gradient start */
    /* --tp-title-bg-dark: var(--tp-primary-dark); Banner gradient end */
    /* --tp-title-text: #ffffff;                 Banner text */

    /* ── Footer ───────────────────────────────────────────────────── */
    --tp-footer-bg: #e0eaea;          /* Footer background */
    --tp-footer-text: #1a202c;        /* Footer body text (WCAG AA with #e0eaea) */
    --tp-footer-link: #145a48;        /* Footer link color (darker teal, WCAG AA) */
    --tp-footer-hover: #0d3328;       /* Footer link hover (very dark teal) */
    --tp-footer-muted: #2d3748;       /* Footer small / muted text (WCAG AA) */

    /* ── Tables ───────────────────────────────────────────────────── */
    /* --tp-table-header-bg: var(--tp-footer-bg);  Table header background */
    --tp-table-header-text: #1a202c;            /* Table header text (WCAG AA with #e0eaea) */

    /* ── Accordion ────────────────────────────────────────────────── */
    /* --tp-accordion-bg: #f1f5f9;                        Collapsed background */
    /* --tp-accordion-text: var(--tp-text-dark);           Collapsed text */
    /* --tp-accordion-active-bg: var(--tp-primary-light);  Expanded background */
    /* --tp-accordion-active-text: var(--tp-primary-dark); Expanded text */

    /* ── Return to top button ─────────────────────────────────────── */
    /* --tp-return-to-top-bg: var(--tp-primary);  Button background */
    /* --tp-return-to-top-hover: var(--tp-primary-dark); Button hover */
    /* --tp-return-to-top-icon: #ffffff;          Icon color */

    /* ── Elected members cards ────────────────────────────────────── */
    /* --tp-member-card-bg: var(--tp-surface);           Card background */
    /* --tp-member-card-border: var(--tp-border);        Card border */
    /* --tp-member-card-hover-shadow: var(--tp-shadow-md); Card hover shadow */
    /* --tp-member-card-position: var(--tp-muted);       Position text color */
    /* --tp-member-card-salary-bg: var(--tp-primary-light);  Salary badge background */
    /* --tp-member-card-salary-text: var(--tp-primary-dark); Salary badge text */

    /* ── Shapes ───────────────────────────────────────────────────── */
    /* --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);    Small shadow */
    /* --tp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); Medium shadow */
    /* --tp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); Large shadow */
    /* --tp-radius: 0.5rem;              Default border radius */
    /* --tp-radius-lg: 0.75rem;          Large border radius */
}

/* Footer Logos */

.footer-logos {
    padding: 1rem 0;
}

.footer-logo {
    height: 60px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Responsive adjustments for footer logos */
@media (max-width: 768px) {
    .footer-logo {
        height: 50px;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .footer-logo {
        height: 40px;
        max-width: 120px;
    }

    .footer-logos {
        gap: 1rem !important;
    }
}