/**
 * Design tokens for Profayl.
 * Every later stylesheet (auth pages, dashboards, homepage, admin panel)
 * reuses these variables rather than redefining its own palette —
 * Guidelines §10. This file also carries minimal reset/base element
 * styling shared by every page.
 */

:root {
    /* Brand palette — navy + gold, gov-portal inspired */
    --gh-navy: #14365d;
    --gh-navy-dark: #0d2540;
    --gh-navy-light: #1f4d80;
    --gh-gold: #c99a2e;
    --gh-gold-light: #e0b94f;

    /* Neutrals */
    --gh-bg: #f2f4f7;
    --gh-surface: #ffffff;
    --gh-border: #d7dce3;
    --gh-text: #1f2933;
    --gh-text-muted: #5b6572;

    /* Feedback colors */
    --gh-error: #b3261e;
    --gh-error-bg: #fbeae9;
    --gh-success: #1e6b3c;
    --gh-success-bg: #e8f5ec;
    --gh-warning: #8a5a00;
    --gh-warning-bg: #fdf3e0;

    /* Layout */
    --gh-radius: 6px;
    --gh-radius-lg: 12px;
    --gh-max-width: 1160px;
    --gh-shadow: 0 1px 3px rgba(15, 32, 55, 0.08), 0 1px 2px rgba(15, 32, 55, 0.06);

    /* Type scale */
    --gh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--gh-font);
    background: var(--gh-bg);
    color: var(--gh-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--gh-navy);
}

h1, h2, h3, h4 {
    color: var(--gh-navy-dark);
    line-height: 1.25;
    margin: 0 0 8px;
}

img, video {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
}

.gh-container {
    max-width: var(--gh-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Shared alert/banner styling — used by every flash-message block across the app */
.gh-alert {
    padding: 12px 14px;
    border-radius: var(--gh-radius);
    font-size: 14px;
    margin-bottom: 20px;
}

.gh-alert--success { background: var(--gh-success-bg); color: var(--gh-success); }
.gh-alert--error { background: var(--gh-error-bg); color: var(--gh-error); }
.gh-alert--warning { background: var(--gh-warning-bg); color: var(--gh-warning); }

/* Shared button styling */
.gh-btn {
    display: inline-block;
    background: var(--gh-navy);
    color: #fff;
    border: none;
    border-radius: var(--gh-radius);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.gh-btn:hover { background: var(--gh-navy-dark); color: #fff; }

.gh-btn--secondary {
    background: #fff;
    color: var(--gh-navy);
    border: 1px solid var(--gh-navy);
}

.gh-btn--secondary:hover { background: var(--gh-bg); color: var(--gh-navy); }

.gh-btn--gold {
    background: var(--gh-gold);
    color: var(--gh-navy-dark);
}

.gh-btn--gold:hover { background: var(--gh-gold-light); color: var(--gh-navy-dark); }

/* Font Awesome usage note (Guidelines §10): sparing use only — status
   icons, section headers, file-type indicators. Never in primary nav
   except the mobile hamburger. Loaded once via partials/head_assets.php. */

/* ---------- Info tooltip ----------
   Small "i" icon that explains a field/section on hover or keyboard
   focus. Used sparingly next to things that genuinely need explaining
   (why a document is required, what a video is for) — not decoration. */

.gh-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    color: var(--gh-text-muted);
    cursor: help;
    font-size: 13px;
    vertical-align: middle;
}

.gh-tooltip:hover,
.gh-tooltip:focus {
    color: var(--gh-navy);
    outline: none;
}

.gh-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gh-navy-dark);
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 11px;
    border-radius: var(--gh-radius);
    width: max-content;
    max-width: 240px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 20;
    pointer-events: none;
}

.gh-tooltip:hover::after,
.gh-tooltip:focus::after {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 600px) {
    .gh-tooltip::after { left: 0; transform: none; }
}

/* ---------- Avatar ----------
   Shows the uploaded profile picture, or a default person icon when
   none exists yet. One component, three sizes, reused everywhere a
   candidate's picture appears (dashboard, admin lists/detail, employer
   search results and candidate profile). */

.gh-avatar {
    border-radius: 50%;
    overflow: hidden;
    background: var(--gh-bg);
    border: 1px solid var(--gh-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gh-text-muted);
}

.gh-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gh-avatar--sm { width: 40px; height: 40px; font-size: 16px; }
.gh-avatar--md { width: 80px; height: 80px; font-size: 30px; }
.gh-avatar--lg { width: 112px; height: 112px; font-size: 42px; }