/* ================================================================
   BASE.CSS - LexRay Foundation Styles

   Loads after ss-main.css to provide LexRay-specific branding
   and common layout styles used across all pages.

   Merged from: base.css + branding.css
   ================================================================ */

/* ====== SIMMONS & SIMMONS BRANDING ====== */

/* Note: Font imports and core S&S design system variables are in ss-main.css
   ss-main.css has been modified to use :root instead of .ce for global variable access */

/* Design tokens (colour, spacing, radius, fonts, type scale) live in
   tokens.css — the single source of truth (issue #1211). This :root only
   carries page-layout dimensions plus the Bootstrap font-variable overrides,
   which MUST be declared after bootstrap.min.css (tokens.css loads before it,
   so Bootstrap's own :root would win there). */
:root {
    /* Layout dimensions for legislation pages */
    --header-height: 80px;             /* Height of fixed header */
    --viewport-margin: 20px;           /* Standard margin from viewport edges */
    --toc-width: 66px;                 /* TOC sidebar width */
    --content-max-width: 1320px;       /* S&S container--large default */

    /* Override Bootstrap font variables to use S&S fonts */
    --bs-font-sans-serif: var(--font-stack-1);
    --bs-body-font-family: var(--font-stack-3);
}

/* ====== FONTS ====== */

/* Self-hosted JetBrains Mono (latin subset). Defined here in the globally-loaded
   base.css so the monospace badge/chip treatment (and the STRIDE /launch +
   home-feature decrypt aesthetic) is available on every page, not just the
   homepage. Previously lived in home_features.css (homepage-only). (#716) */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
}

/* ====== TYPOGRAPHY OVERRIDES ====== */

body {
    /* Override Bootstrap's use of --bs-font-sans-serif with serif font for body text */
    font-family: var(--ss-font-serif);
    color: var(--ss-dark);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Canonical badge typography + the environment badges moved to
   components.css (issue #1211). */

/* Fix Font Awesome icons - override body font-family inheritance
   See: https://github.com/prisonblues/lexray/issues/252 */
.fas, .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far, .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* The canonical h1–h6 scale lives in components.css (issue #1211). */

/* Heading content styles */
.heading-content .heading-title {
    font-family: var(--ss-font-primary);
    /* Light display weight, matching the global heading rule and the home hero's
       thin ff-real-text-pro treatment; 500 read too heavy next to the brand (#1235). */
    font-weight: 300;
    color: var(--ss-dark);
    /* The application h1 tier (tokens.css §5) — legislation titles ARE that scale. */
    font-size: var(--lx-h1);
    position: relative;
    z-index: 1;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
}

/* ====== HEADER BRANDING ====== */

.header {
    background-color: var(--color-coral-base) !important;
    border-bottom: none;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050 !important; /* Above TOC (1030), isotope grids, below Bootstrap modals (1055) and UI overlays (1070+) */
    height: 80px;
}

/* Header wrapper - spans full width of header */
.header-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header content - provides consistent 20px padding for all pages */
.header-content {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;  /* Standard horizontal padding */
    box-sizing: border-box;
}

/* Legislation pages: tighter padding to align with TOC buttons */
body.show-lexray-text .header-content {
    padding-left: 0.5rem;  /* 8px - aligns with TOC button left edge */
}

/* On legislation pages: Padding handled by .legislation-layout flex container */
/* Old padding removed - TOC is now inside flex layout, not fixed outside */
/* body.show-lexray-text #loading-skeleton,
body.show-lexray-text #app-container {
    padding-left: calc(var(--viewport-margin) + var(--toc-width));
} */

/* ====== HEADER LAYOUT ======
   Header uses S&S design system's natural container/content structure:
   - .header > .container--large (1200px max-width, centered)
   - .content gets 20px padding from ss-main.css .container .content rule
   - Padding removed at 1240px+ per ss-main.css media query

   No page-specific overrides needed - all pages share same clean alignment */

/* Hide middle navigation on legislation pages */
body.show-lexray-text .header .header_navigation {
    display: none;
}

/* Lexray landing page only: transparent floating header over the hero, fixed
   so scroll-snap can't clip it (#753c). The STRIDE homepage has no hero, so it
   keeps the solid coral header (see below). */
body.homepage:not(.stride-page) .header {
    background-color: transparent !important;
    position: fixed;
}

/* STRIDE homepage: keep the header pinned at the top but with the solid coral
   background, matching the other STRIDE pages (it has no hero to float over). */
body.homepage.stride-page .header {
    background-color: var(--color-coral-base) !important;
    position: fixed;
}

/* Remove all navbar backgrounds */
.navbar-main,
.navbar-theme-primary,
.navbar-dark,
.navbar {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-main {
    padding: 30px 0;
    height: 110px;
    display: flex;
    align-items: center;
}

.navbar-brand {
    display: block;
    margin: 0;
    padding: 0;
}

.navbar-brand img {
    height: 50px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1); /* Make logo white */
}

/* ====== BUTTON STYLES ====== */

/* Canonical button skins (.btn-primary, .btn-secondary, the filter .button
   system) live in components.css (issue #1211). */

/* ====== LINK STYLES ====== */

a {
    color: var(--color-coral-base);
    text-decoration: none;
    transition: color var(--ss-transition-fast);
}

a:hover {
    color: var(--ss-brand-red);
    text-decoration: underline;
}

/* ====== DECORATIVE ELEMENTS ====== */

.ss-dot-accent::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--color-coral-base);
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Coral dot divider - default */
.ss-dot-divider {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 3 3' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='.375' cy='.375' r='.375' fill='%23FD515B' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    height: 3px;
    width: 70px;
    margin: 1rem 0;
}

/* White dot divider - for use on colored backgrounds */
.ss-dot-divider-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 3 3' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='.375' cy='.375' r='.375' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    height: 3px;
    width: 70px;
    margin: 1.5rem auto;
}

/* Content centering utility */
.content--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ====== FOOTER BRANDING ====== */

.footer-slide {
    position: fixed;
    bottom: -100px; /* Start hidden below viewport */
    left: 0;
    right: 0;
    background-color: var(--ss-dark);
    border-top: 3px solid var(--color-coral-base);
    transition: bottom 0.3s ease-in-out;
    z-index: 1030;
}

.footer-slide.visible {
    bottom: 0;
}

/* When at the bottom of the page, switch to inline mode */
.footer-slide.at-bottom {
    position: static;
    margin-top: 1rem;
    transition: none;
}

.footer-slide a {
    color: var(--color-neutral-white);
    font-family: var(--ss-font-primary);
    font-size: 0.9rem;
    transition: color var(--ss-transition-fast);
}

.footer-slide a:hover {
    color: var(--color-coral-base);
    text-decoration: none;
}

/* Cookie notice styling */
.cookie-notice {
    display: inline-block;
    color: var(--color-neutral-white);
    font-size: 1.1rem;
    transition: transform var(--ss-transition-fast);
    vertical-align: middle;
}

.cookie-notice:hover {
    transform: scale(1.2);
}

/* ====== MODAL BRANDING ====== */

/* Modal branding moved to components.css §8 (issue #1211). */

/* ====== NAVBAR TEXT ====== */

.navbar-text {
    color: var(--color-neutral-white) !important;
    font-family: var(--ss-font-primary);
}

/* User authentication section styling */
.auth-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auth-section .navbar-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ====== TOAST NOTIFICATIONS ====== */

/* Toast skin moved to components.css §9 (issue #1211). */

/* ====== UTILITY CLASSES ====== */

/* Accent color utilities */
.text-brand-primary {
    color: var(--color-coral-base);
}

.text-brand-red {
    color: var(--ss-brand-red);
}

.bg-brand-primary {
    background-color: var(--color-coral-base);
}

.border-brand-primary {
    border-color: var(--color-coral-base);
}

/* Professional spacing */
.ss-section-spacing {
    padding-top: var(--ss-space-lg);
    padding-bottom: var(--ss-space-lg);
}

/* Hover effects with brand colors */
.grid-item-content:hover {
    border-color: var(--color-coral-base);
    box-shadow: 0 2px 8px rgba(var(--color-coral-base-rgb), 0.15);
}

/* Bootstrap utility classes */
.text-center {
    text-align: center !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

/* ====== NAVBAR THEME OVERRIDES ====== */

.navbar-theme-primary,
.navbar-theme-secondary {
    background-color: var(--ss-dark) !important;
}

/* Ensure white text in dark navbar */
.navbar-dark .navbar-text,
.navbar-dark .navbar-nav .nav-link {
    color: var(--color-neutral-white);
}

/* Clean, professional transitions */
* {
    transition-timing-function: ease;
}

/* ====== HEADER TEXT STYLING ====== */

/* Shared header text styling - used by both LexRay text and Sign In/Logout */
.header-text {
    text-decoration: none !important;
    border-bottom: none !important;  /* S&S uses border-bottom for underlines, not text-decoration */
    color: #ffffff !important;
    white-space: nowrap;
    gap: 8px;
    display: inline-flex;
    align-items: center;
}

.header-text:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

.header-text svg {
    fill: #ffffff;
}

.header-text-label {
    color: #ffffff !important;
}

/* Logo container - flex to put logo and LexRay text adjacent */
.header-logo-container {
    display: flex;
    align-items: center;
    gap: 0; /* No gap, let padding control spacing */
}

/* LexRay text container - hidden by default, shown on specific pages */
.header-lexray-text {
    display: none;
    padding-left: 12px; /* Control spacing between logo and text */
    flex-shrink: 0; /* Don't allow shrinking which would squash logo */
}

/* Show header text on legislation pages */
body.show-lexray-text .header-lexray-text {
    display: block;
    width: 81px; /* Fixed width for "Lex-Ray" text (11+10+10+6+12+10+10=69px + 12px padding) */
}

/* Show header text on admin and STRIDE pages */
body.admin-page .header-lexray-text,
body.stride-page .header-lexray-text {
    display: block;
    width: auto; /* Allow flexible width for different text variants */
}

/* ====== COMMON LAYOUT ====== */

/* Old .main-content - replaced by .content-area in flex layout */
/* .main-content {
    position: relative;
    width: 100%;
} */

/* ====== DOCUMENTATION STYLES ====== */

/* Style for URL bar examples in documentation */
.url-bar-example {
    display: block;
    width: 100%;
    background-color: #f0f0f0;
    border: 2px solid #0d6efd;
    padding: 0.5em 0.75em;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.9em;
    word-break: break-all;
    text-align: left;
    color: #000000;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.url-bar-example .url-protocol {
    color: #6c757d;
}

.url-bar-example .url-highlight {
    background-color: yellow;
    padding: 0.1em 0;
    margin: 0 0.05em;
    border-radius: 2px;
}

/* Style for inline code snippets */
.code-inline {
    font-family: monospace;
    font-size: 0.9em;
    background-color: #f8f9fa;
    padding: 0.1em 0.3em;
    border: 1px solid #dee2e6;
    border-radius: 3px;
}

/* ========================================
   LEGISLATION PAGE LAYOUT CENTERING
   ======================================== */

/* Old layout system - TOC sidebar positioning */
/* DISABLED - conflicts with new flexbox layout in .legislation-layout */
/* body.show-lexray-text #toc-sidebar {
    position: fixed;
    left: 0;
    top: var(--header-height);
    width: var(--toc-width);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f8f9fa;
    z-index: 1046;
    padding: 0.5rem;
} */

/* Old layout - adjust main-content to account for fixed TOC */
/* Only apply to old layout (without .legislation-layout parent) */
body.show-lexray-text #app-container > .container-fluid > #main-content {
    margin-left: var(--toc-width);  /* 66px - space for fixed TOC */
    width: calc(100vw - var(--toc-width));  /* Fill remaining width */
}

/* Center main content at XL breakpoint (≥1200px) - TOC stays left-pinned */
@media (min-width: 1200px) {
    /* Old layout (app-container with Bootstrap grid) */
    /* Center the body-content in the remaining space after TOC */
    body.show-lexray-text #body-content {
        max-width: 1320px;  /* Match Bootstrap container max-width */
        /* Calculate centering: (100vw - toc - max-width) / 2 + toc */
        margin-left: calc((100vw - var(--toc-width) - 1320px) / 2 + var(--toc-width));
        margin-right: calc((100vw - var(--toc-width) - 1320px) / 2);
        /* Equal padding on both sides for visual balance */
        padding-left: var(--viewport-margin);  /* 20px left */
        padding-right: var(--viewport-margin);  /* 20px right */
        /* Ensure proper box-sizing */
        box-sizing: border-box;
    }

    /* New flexbox layout - center content-area in remaining space */
    body.show-lexray-text .legislation-layout .content-area {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   HEADER USER MENU
   Role-based visibility using body classes set by auth-manager.js
   Unified hamburger menu with greeting for logged-in users
   ======================================== */

/* User menu container - contains greeting and hamburger dropdown */
.header-user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Greeting text - "Hi, {name}" - matches .header-text-label styling */
.header-greeting {
    color: #ffffff !important;
    font-family: var(--ss-font-primary);
    font-size: 1.25rem;
    font-weight: 300;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-name {
    font-weight: 500;
}

/* Hamburger button styling */
.header-hamburger-btn {
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: color var(--ss-transition-fast);
}

.header-hamburger-btn:hover,
.header-hamburger-btn:focus {
    color: rgba(255, 255, 255, 0.8);
}

/* Hide the default dropdown caret on hamburger */
.header-hamburger-btn::after {
    display: none;
}

/* User menu dropdown styling */
.header-user-menu .dropdown {
    position: relative;
    z-index: 9999;
}

.header-user-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--ss-dark);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-top: 0.5rem;
    z-index: 9999;
}

.header-user-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ss-font-primary);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    transition: all var(--ss-transition-fast);
}

.header-user-menu .dropdown-item:hover,
.header-user-menu .dropdown-item:focus {
    background-color: var(--color-coral-base);
    color: #ffffff;
}

.header-user-menu .dropdown-item i {
    width: 1rem;
    text-align: center;
}

.header-user-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 0.25rem 0;
}

/* Role-based menu item visibility - hidden by default */
.nav-admin-only,
.nav-stride-viewer,
.nav-stride-editor,
.nav-stride-approver,
.nav-stride-owner,
.nav-lexray-owner,
.nav-product-owner,
.menu-divider-admin {
    display: none;
}

/* Show admin items for admin users */
body.user-is-admin .nav-admin-only {
    display: list-item !important;
}

/* Show product-owner items for global admins and product admins */
body.user-is-product-owner .nav-product-owner {
    display: list-item !important;
}

body.user-is-stride-owner .nav-stride-owner {
    display: list-item !important;
}

body.user-is-lexray-owner .nav-lexray-owner {
    display: list-item !important;
}

/* Show STRIDE items based on access level */
body.user-is-stride-viewer .nav-stride-viewer {
    display: list-item !important;
}

body.user-is-stride-editor .nav-stride-editor {
    display: list-item !important;
}

body.user-is-stride-approver .nav-stride-approver {
    display: list-item !important;
}

/* Show admin divider if any admin items are visible */
body.user-is-admin .menu-divider-admin,
body.user-is-stride-viewer .menu-divider-admin,
body.user-is-stride-editor .menu-divider-admin,
body.user-is-stride-approver .menu-divider-admin,
body.user-is-stride-owner .menu-divider-admin,
body.user-is-lexray-owner .menu-divider-admin,
body.user-is-product-owner .menu-divider-admin {
    display: list-item !important;
}

/* Secondary Menu Layout - S&S uses Vue scoped selectors, so we need to override */
.secondaryMenu__innerWrapper {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
}