:root {
    --planit-primary: #0d6efd;
    --planit-primary-dark: #0a58ca;
    --planit-ink: #10233f;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--planit-ink);
}

a { color: var(--planit-primary); }

.navbar-brand { font-size: 1.35rem; letter-spacing: -0.02em; }

/* ---- Hero ---- */
.planit-hero {
    background: linear-gradient(135deg, var(--planit-primary) 0%, #4dabff 100%);
}

.planit-hero .form-control:focus,
.planit-hero .btn:focus {
    box-shadow: none;
}

.opacity-90 { opacity: 0.9; }

/* ---- Detail hero with background image ---- */
.planit-detail-hero {
    background-size: cover;
    background-position: center;
    background-color: var(--planit-ink);
}

.planit-detail-hero-overlay {
    background: linear-gradient(180deg, rgba(16, 35, 63, 0.35) 0%, rgba(16, 35, 63, 0.8) 100%);
}

.planit-detail-hero .breadcrumb-item,
.planit-detail-hero .breadcrumb-item a,
.planit-detail-hero .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Cards ---- */
.planit-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.planit-card:hover {
    
    box-shadow: 0 0.75rem 1.5rem rgba(16, 35, 63, 0.15) !important;
}

.planit-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eef3fb;
    overflow: hidden;
}

.planit-card-media img {
    display: block;
}

.planit-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eef3fb 0%, #dbe7fb 100%);
    color: var(--planit-primary);
}

.object-fit-cover { object-fit: cover; }

/* ---- Focus visibility for accessibility (WCAG AA) ---- */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.5);
    outline-offset: 2px;
}