/* ==========================================================================
   RootAxis Brand Polish Layer
   --------------------------------------------------------------------------
   Loaded LAST (after premium.css and page @stack styles).
   Purpose: refine cleanliness and brand consistency WITHOUT changing layout.
   Rules: no width/height/grid/flex/display changes, no content changes.
   Brand: Royal Purple #6425D0 · Flame Orange #FF681F · Onyx #101426
   To roll back, remove the <link> to this file in app-layout.blade.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens + Bootstrap remap
   Bootstrap's default primary is blue (#0d6efd). Every .text-primary,
   .btn-primary, .bg-primary-subtle, link, etc. rendered off-brand blue.
   Remapping the variables brings all of them onto the RootAxis palette.
   -------------------------------------------------------------------------- */
:root {
    --ra-brand: #6425D0;
    --ra-brand-hover: #531eb0;
    --ra-brand-rgb: 100, 37, 208;
    --ra-flame: #FF681F;
    --ra-flame-rgb: 255, 104, 31;
    --ra-onyx: #101426;
    --ra-ink: #111827;
    --ra-ink-soft: #4B5563;
    --ra-line: #E7E8EF;
    --ra-surface: #F8F7FC;
    --ra-ring: 0 0 0 3px rgba(100, 37, 208, 0.28);
    --ra-ease: cubic-bezier(0.16, 1, 0.3, 1);

    --bs-primary: #6425D0;
    --bs-primary-rgb: 100, 37, 208;
    --bs-primary-text-emphasis: #4a1b9c;
    --bs-primary-bg-subtle: #F3EEFF;
    --bs-primary-border-subtle: #E4D7F5;
    --bs-link-color: #6425D0;
    --bs-link-color-rgb: 100, 37, 208;
    --bs-link-hover-color: #531eb0;
    --bs-link-hover-color-rgb: 83, 30, 176;
    --bs-focus-ring-color: rgba(100, 37, 208, 0.25);
    --bs-border-color: #E7E8EF;
    --bs-body-color: #1F2937;
    --bs-secondary-color: rgba(75, 85, 99, 0.85);
}

/* Bootstrap utilities that hard-code colours with !important */
.text-primary { color: #6425D0 !important; }
.bg-primary { background-color: #6425D0 !important; }
.border-primary { border-color: #6425D0 !important; }
.bg-primary-subtle { background-color: #F3EEFF !important; }
.text-primary-emphasis { color: #4a1b9c !important; }
.link-primary { color: #6425D0 !important; }

.btn-primary {
    --bs-btn-bg: #6425D0;
    --bs-btn-border-color: #6425D0;
    --bs-btn-hover-bg: #531eb0;
    --bs-btn-hover-border-color: #531eb0;
    --bs-btn-active-bg: #4a1b9c;
    --bs-btn-active-border-color: #4a1b9c;
    --bs-btn-disabled-bg: #6425D0;
    --bs-btn-disabled-border-color: #6425D0;
    --bs-btn-focus-shadow-rgb: 100, 37, 208;
}

.btn-outline-primary {
    --bs-btn-color: #6425D0;
    --bs-btn-border-color: #6425D0;
    --bs-btn-hover-bg: #6425D0;
    --bs-btn-hover-border-color: #6425D0;
    --bs-btn-active-bg: #531eb0;
    --bs-btn-active-border-color: #531eb0;
    --bs-btn-focus-shadow-rgb: 100, 37, 208;
}

.form-check-input:checked {
    background-color: #6425D0;
    border-color: #6425D0;
}

/* --------------------------------------------------------------------------
   2. Typography refinement (rendering + rhythm only, sizes untouched)
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 96px; /* anchors (#overview, #faqs...) clear the sticky header */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    text-wrap: balance;          /* no orphaned single words on headings */
    font-kerning: normal;
}

h1, .h1, h2, .h2 { letter-spacing: -0.022em; }
h3, .h3 { letter-spacing: -0.015em; }

p, dd, blockquote {
    text-wrap: pretty;           /* fewer ragged last lines in body copy */
}

/* Prices, stats and durations line up neatly */
.price, [class*="price"], [class*="-stat"], [class*="stat-"], [class*="fee"] {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: rgba(100, 37, 208, 0.16);
    color: inherit;
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */
a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* --------------------------------------------------------------------------
   4. Accessible, on-brand focus states (keyboard only)
   -------------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid #6425D0;
    outline-offset: 2px;
    border-radius: 6px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: var(--ra-ring) !important;
}

/* --------------------------------------------------------------------------
   5. Buttons — consistent, calm interaction feedback (no size change)
   -------------------------------------------------------------------------- */
.btn {
    transition: background-color 0.2s var(--ra-ease), border-color 0.2s var(--ra-ease),
                color 0.2s var(--ra-ease), box-shadow 0.2s var(--ra-ease), transform 0.2s var(--ra-ease);
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary:hover {
    box-shadow: 0 6px 16px -6px rgba(100, 37, 208, 0.45);
}

/* --------------------------------------------------------------------------
   6. Forms — brand focus, softer borders, cleaner placeholders
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: #DCDDE6;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: #C9C3DE;
}

.form-control:focus,
.form-select:focus {
    border-color: #6425D0;
    box-shadow: 0 0 0 3px rgba(100, 37, 208, 0.14);
}

.form-control::placeholder { color: #9CA3AF; opacity: 1; }

/* --------------------------------------------------------------------------
   7. Accordions (FAQs, curriculum) — brand active state, no blue glow
   -------------------------------------------------------------------------- */
.accordion {
    --bs-accordion-active-color: #4a1b9c;
    --bs-accordion-active-bg: #F8F7FC;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(100, 37, 208, 0.18);
    --bs-accordion-border-color: #E7E8EF;
}

.accordion-button:focus { border-color: transparent; }

/* --------------------------------------------------------------------------
   8. Cards & surfaces — unify borders and hover feel (no geometry change)
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: #E7E8EF;
}

/* --------------------------------------------------------------------------
   9. Badges / pills — crisper text rendering
   -------------------------------------------------------------------------- */
.badge {
    letter-spacing: 0.01em;
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   10. Media
   -------------------------------------------------------------------------- */
img { image-rendering: auto; }
img[loading="lazy"] { background-color: #F3F2F8; } /* calm placeholder while loading */

/* --------------------------------------------------------------------------
   11. Branded, slim scrollbar
   -------------------------------------------------------------------------- */
html { scrollbar-color: #C9BEE6 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #C9BEE6;
    border-radius: 999px;
    border: 2px solid #ffffff;
}
::-webkit-scrollbar-thumb:hover { background: #6425D0; }

/* --------------------------------------------------------------------------
   12. Tables (fee / comparison tables)
   -------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: #E7E8EF;
    --bs-table-hover-bg: rgba(100, 37, 208, 0.035);
}

/* --------------------------------------------------------------------------
   13. Motion safety — respect users who prefer reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   14. Header navigation alignment & nowrap lock
   Prevents menu items ("AI & Tech", "Project Hub", "For Colleges", "Students")
   from wrapping onto two lines on any desktop/laptop viewport width.
   -------------------------------------------------------------------------- */
.ra-header-wrapper .navbar-nav {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.ra-header-wrapper .ra-nav-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.ra-header-wrapper .ra-nav-link {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.88rem !important;
    padding: 7px 11px !important;
    gap: 6px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.ra-header-wrapper .ra-nav-link span,
.ra-header-wrapper .ra-nav-link i,
.ra-header-wrapper .ra-nav-link .badge {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
}

.ra-header-wrapper .ra-nav-link.active {
    color: #6425D0 !important;
    background: rgba(100, 37, 208, 0.08) !important;
    font-weight: 600 !important;
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    .ra-header-wrapper .ra-nav-link {
        font-size: 0.81rem !important;
        padding: 6px 7px !important;
        gap: 4px !important;
    }
    .ra-header-wrapper .ra-header-cta-btn {
        font-size: 0.78rem !important;
        padding: 7px 12px !important;
        gap: 4px !important;
    }
    .ra-brand-logo {
        height: 32px !important;
    }
}