/* --- START OF FILE _base.css --- */
/* =========================================================================
   Base - The Foundational Layer | Version 2.0 "The Citadel"
   -------------------------------------------------------------------------
   This is the soul of the application's visual identity. We go beyond
   mere styling to define the very feel of interaction. Every line here is
   a deliberate choice for premium aesthetics, accessibility, and performance.
   ========================================================================= */

:root {
    /* Tell the browser we support both themes natively for UI elements like scrollbars. */
    color-scheme: light dark;

    /* A pro move for better legibility, especially for headings. */
    text-rendering: optimizeLegibility;

    /* Prevents browsers from creating "fake" bold/italic styles. Design integrity first. */
    font-synthesis: none;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    background-color: var(--body-bg);
    color: var(--text-color);
    display: flex;
    flex-direction: column;

    /* THE GOLD STANDARD for mobile layouts. Solves the '100vh' problem where browser UI
       hides content. 'svh' stands for 'small viewport height'. */
    min-height: 100svh;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing);
}

.body-has-fixed-top-navbar {
    padding-top: calc(var(--navbar-height) + 1rem);
}

/* A beautiful, theme-aware custom scrollbar. A signature of a polished UI. */
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: var(--body-bg);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 12px;
  border: 3px solid var(--body-bg);
}
body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color-secondary);
}

/* ===========================================================
   Interactive Elements & Links
   =========================================================== */

/* UPGRADED: A more sophisticated link style with an animated underline. */
a {
    color: var(--link-color);
    text-decoration: none;
    position: relative; /* Anchor for the pseudo-element */
    transition: color var(--transition-duration) var(--transition-easing);
}
a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -3px;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform var(--transition-duration) var(--transition-easing);
}
a:hover {
    color: var(--primary-color);
}
a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


/*
  The Ultimate Focus Style 2.0: Now with a smooth "bloom" animation.
  This makes keyboard navigation not just accessible, but delightful.
  A single, robust, and beautiful focus indicator for ALL interactive elements.
*/
:is(a, button, input, textarea, select, .form-check-input):focus-visible {
    outline: none;
    transition: box-shadow 0.2s var(--transition-easing); /* The magic ingredient */
    box-shadow: 0 0 0 3px var(--body-bg), 0 0 0 5px var(--primary-color);
    /* For rounded elements, this is a fallback. The `box-shadow` is superior. */
    border-radius: var(--border-radius);
}

/* ===========================================================
    Main Content & Containers
   =========================================================== */
main {
  flex-grow: 1;
}
.container, .container-fluid {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin-left: auto;
    margin-right: auto;
}
.container {
    max-width: var(--max-width);
}

/* ===========================================================
   Typography - The Voice of the UI
   =========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
    color: var(--heading-color);
    letter-spacing: var(--heading-letter-spacing);
    /* KILLER FEATURE: Automatically balances text lines to prevent widows.
       A progressive enhancement that dramatically improves typography. */
    text-wrap: balance;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p {
  margin: 0 0 1.25rem 0;
  max-width: 75ch; /* Good readability for all paragraphs. */
}
.lead {
  font-size: 1.2rem;
  font-weight: var(--font-weight-normal);
  color: var(--text-color-secondary);
}

/* A touch of class for blockquotes. */
blockquote {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 5px solid var(--primary-color);
    background-color: var(--component-bg-alt);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-color-secondary);
}
blockquote p:last-child {
    margin-bottom: 0;
}

/* A clean, on-brand horizontal rule. */
hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 3rem 0;
}

/* Styling for code snippets - essential for an analytics tool. */
code, kbd, pre {
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
}
code, kbd {
    padding: .2em .4em;
    margin: 0;
    border-radius: var(--border-radius);
    background-color: var(--component-bg-alt);
    color: var(--danger-color); /* To make it stand out */
}
pre {
    display: block;
    padding: 1rem;
    margin: 0 0 1.5rem;
    overflow: auto;
    background-color: var(--component-bg-alt);
    border-radius: var(--border-radius);
    border: var(--border);
}
pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
}


/* Центрируем узкие параграфы внутри .text-center (из-за p{max-width:75ch}) */
.text-center :is(p, .lead, .small) { margin-left: auto; margin-right: auto; }
/* Футер — чтобы копирайт/ссылки тоже были строго по центру блока */
footer :is(p, .small) { margin-left: auto; margin-right: auto; }

/* --- END OF FILE _base.css --- */