/* static/css/base.css */

/*
 * NAVBAR LAYOUT FIX
 *
 * Problem: Bootstrap's fixed-top navbar removes itself from document flow,
 * causing page content to slide underneath it. This requires coordination
 * between three CSS properties to work correctly:
 *
 * 1. --navbar-height: CSS variable for single source of truth
 * 2. body padding-top: Creates space so content starts below navbar
 * 3. main display + padding: Prevents margin collapse on first child elements
 *
 * Without these, heading margins (like h1) collapse upward and text gets
 * clipped by the fixed navbar. The flow-root display value creates a new
 * formatting context that prevents this margin collapse behavior.
 */

:root {
    --navbar-height: 56px;
}

body {
    padding-top: var(--navbar-height);
}

main {
    padding-top: 1rem;
    display: flow-root; /* Prevents margin collapse from first child elements */
}

/* TODO (DEFER) remove docs-markdown-content if possible, its now specified inside docs_template.html (but we need it in category_detail.html)... hmmm ... */
.docs-markdown-content {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/*NOTE used on public landing page footer links (privacy policy, tos, contact- etc)*/
.link-secondary-hover:hover {
    color: #0d6efd !important;   /* Bootstrap primary */
    text-decoration: underline;
}


/*NOTE used to shade restricted admin items in the upper navbar*/
.superuser-menu {
    color: darkred !important;
}


/*.classy_rounded_border_image {*/
/*  border: 1px solid #ddd;*/
/*  border-radius: 5px;*/
/*  padding: 5px;*/
/*}*/


/*!* following css is to used to visually style unsaved inputs (and corresponding save buttons) on a form *!*/
/*.unsaved-changes {*/
/*  border: 3px solid red;  !* add a solid red border (for save buttons associated with forms that have unsaved inputs)*!*/
/*}*/

/*.changed-input {*/
/*  background-color: #ffffcc;  !* light yellow (for inputs that have unsaved changes) *!*/
/*}*/
