/* ==========================================================================
   Prime Islami Insurance — Bootstrap theme and base styles
   Built only from the tokens in tokens.css (resources/design/tokens.json).
   Loaded straight after Bootstrap, before the template's style.css.

   1. Bootstrap's own variables, so its components come out in brand colours
   2. Bootstrap components whose colours are compiled in rather than variables
   3. Base element styles: type, links, focus
   4. Skip link and reduced motion
   ========================================================================== */

/* 1. Bootstrap variables ------------------------------------------------- */
:root {
    --bs-primary: var(--pi-red);
    --bs-primary-rgb: var(--pi-red-rgb);
    --bs-primary-text-emphasis: var(--pi-red-dark);
    --bs-primary-bg-subtle: var(--pi-red-soft);
    --bs-primary-border-subtle: rgba(var(--pi-red-rgb), .3);

    --bs-body-font-family: var(--pi-font-sans);
    --bs-body-font-size: var(--pi-fs-base);
    --bs-body-line-height: var(--pi-leading-normal);
    --bs-body-color: var(--pi-text);
    --bs-body-color-rgb: var(--pi-text-rgb);
    --bs-body-bg: var(--pi-surface);
    --bs-emphasis-color: var(--pi-ink);
    --bs-emphasis-color-rgb: var(--pi-ink-rgb);
    --bs-secondary-color: var(--pi-muted);
    --bs-heading-color: var(--pi-ink);

    --bs-link-color: var(--pi-red);
    --bs-link-color-rgb: var(--pi-red-rgb);
    --bs-link-hover-color: var(--pi-red-dark);
    --bs-link-hover-color-rgb: var(--pi-red-dark-rgb);

    --bs-border-color: var(--pi-line);
    --bs-border-radius-sm: var(--pi-radius-sm);
    --bs-border-radius: var(--pi-radius-sm);
    --bs-border-radius-lg: var(--pi-radius-md);
    --bs-border-radius-xl: var(--pi-radius-md);
    --bs-border-radius-pill: var(--pi-radius-pill);
    --bs-box-shadow: var(--pi-shadow-md);

    --bs-focus-ring-width: var(--pi-focus-width);
    --bs-focus-ring-opacity: .35;
    --bs-focus-ring-color: rgba(var(--pi-red-rgb), .35);
    --bs-form-valid-color: var(--pi-status-active-fg);
    --bs-form-valid-border-color: var(--pi-status-active-fg);
}

/* 2. Components with compiled-in colours --------------------------------- */
.btn {
    --bs-btn-font-family: var(--pi-font-sans);
    --bs-btn-font-weight: var(--pi-weight-medium);
    --bs-btn-focus-box-shadow: var(--pi-focus-ring);
}

.btn-primary {
    --bs-btn-color: var(--pi-white);
    --bs-btn-bg: var(--pi-red);
    --bs-btn-border-color: var(--pi-red);
    --bs-btn-hover-color: var(--pi-white);
    --bs-btn-hover-bg: var(--pi-red-dark);
    --bs-btn-hover-border-color: var(--pi-red-dark);
    --bs-btn-active-color: var(--pi-white);
    --bs-btn-active-bg: var(--pi-red-dark);
    --bs-btn-active-border-color: var(--pi-red-dark);
    --bs-btn-disabled-color: var(--pi-white);
    --bs-btn-disabled-bg: var(--pi-red);
    --bs-btn-disabled-border-color: var(--pi-red);
    --bs-btn-focus-shadow-rgb: var(--pi-red-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--pi-red);
    --bs-btn-border-color: var(--pi-red);
    --bs-btn-hover-color: var(--pi-white);
    --bs-btn-hover-bg: var(--pi-red);
    --bs-btn-hover-border-color: var(--pi-red);
    --bs-btn-active-color: var(--pi-white);
    --bs-btn-active-bg: var(--pi-red-dark);
    --bs-btn-active-border-color: var(--pi-red-dark);
    --bs-btn-disabled-color: var(--pi-red);
    --bs-btn-disabled-border-color: var(--pi-red);
    --bs-btn-focus-shadow-rgb: var(--pi-red-rgb);
}

.btn-link {
    --bs-btn-color: var(--pi-red);
    --bs-btn-hover-color: var(--pi-red-dark);
    --bs-btn-active-color: var(--pi-red-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pi-red);
    box-shadow: var(--pi-focus-ring);
}

.form-check-input:focus {
    border-color: var(--pi-red);
    box-shadow: var(--pi-focus-ring);
}

.form-check-input:checked {
    background-color: var(--pi-red);
    border-color: var(--pi-red);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d8999c'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: var(--pi-red); }
.form-range::-moz-range-thumb { background-color: var(--pi-red); }

.pagination {
    --bs-pagination-color: var(--pi-red);
    --bs-pagination-hover-color: var(--pi-red-dark);
    --bs-pagination-focus-color: var(--pi-red-dark);
    --bs-pagination-focus-box-shadow: var(--pi-focus-ring);
    --bs-pagination-active-bg: var(--pi-red);
    --bs-pagination-active-border-color: var(--pi-red);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--pi-red);
    --bs-dropdown-link-active-color: var(--pi-white);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--pi-red);
}

.nav {
    --bs-nav-link-color: var(--pi-red);
    --bs-nav-link-hover-color: var(--pi-red-dark);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--pi-red);
}

.list-group {
    --bs-list-group-active-bg: var(--pi-red);
    --bs-list-group-active-border-color: var(--pi-red);
}

.accordion {
    --bs-accordion-active-color: var(--pi-red-dark);
    --bs-accordion-active-bg: var(--pi-red-soft);
    --bs-accordion-btn-focus-box-shadow: var(--pi-focus-ring);
}

.btn-close:focus {
    box-shadow: var(--pi-focus-ring);
}

/* 3. Base elements -------------------------------------------------------- */
body {
    font-family: var(--pi-font-sans);
    color: var(--pi-text);
    -webkit-font-smoothing: antialiased;
}

/* Prices and other figures line up and do not jump as they change. */
.pi-num,
table td.text-end,
table th.text-end {
    font-variant-numeric: tabular-nums;
}

/* Marketing headlines may use the display face; everything a customer reads
   while doing something stays in the sans. */
.pi-display {
    font-family: var(--pi-font-display);
}

/* One visible focus ring for every focusable element, shown to keyboard
   users only (:focus-visible), so a mouse click does not leave a ring. */
:focus-visible {
    outline: var(--pi-focus-width) solid var(--pi-focus-color);
    outline-offset: var(--pi-focus-offset);
}

/* Bootstrap draws its own ring on these; do not draw two. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible {
    outline: 0;
}

/* On the dark header the red ring would vanish. */
.main-header :focus-visible,
footer :focus-visible {
    outline-color: var(--pi-white);
}

/* 4. Skip link and reduced motion ----------------------------------------- */
.pi-skip-link {
    position: absolute;
    top: var(--pi-space-2);
    left: var(--pi-space-2);
    z-index: 100000;
    padding: var(--pi-space-2) var(--pi-space-4);
    background: var(--pi-surface);
    color: var(--pi-red);
    font-weight: var(--pi-weight-bold);
    border-radius: var(--pi-radius-sm);
    box-shadow: var(--pi-shadow-md);
    transform: translateY(-200%);
}

.pi-skip-link:focus {
    transform: none;
}

main:focus {
    outline: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}