/* ==========================================================================
   Base typography + page shell
   ==========================================================================
   Mirrors the renderer site's _bootstrap-overrides.scss / _base.scss.
   Tokens come from cw-theme.css, which must load before this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------
   Legacy guard against Sitefinity's own body styles. `all: initial` also
   wipes body's font/color/display, so everything is re-declared immediately
   below. Custom properties survive `all`, so the tokens stay available.
   -------------------------------------------------------------------------- */

body:not(.sfreContentArea) {
    all: initial;
}

/* --------------------------------------------------------------------------
   Document + body
   -------------------------------------------------------------------------- */

html {
    height: 100%;
    background-color: var(--cw-off-white);
    -webkit-text-size-adjust: 100%;
    /* Clears the sticky navbar when an in-page anchor (a forum permalink,
       say) is targeted. Mirrors the renderer site's scroll-padding-top. */
    scroll-padding-top: 86px;
}

body {
    display: block;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--cw-font);
    font-size: var(--cw-fs-base);
    font-weight: var(--cw-fw-regular);
    line-height: var(--cw-lh-body);
    letter-spacing: 0.005em;
    color: var(--cw-gray-dim);
    background-color: var(--cw-off-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* One brand family everywhere, as on the renderer site (Lato is gone). */
body * {
    font-family: var(--cw-font);
}

pre,
code,
kbd,
samp,
pre *,
code * {
    font-family: var(--cw-font-mono);
}

/* --------------------------------------------------------------------------
   Page shell - footer sticks to the bottom on short pages
   --------------------------------------------------------------------------
   Replaces the old absolutely positioned footer and the JS that padded
   <body> by the footer height.
   -------------------------------------------------------------------------- */

#wrap-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#aspnetForm {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

#page-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.page-footer {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   Content sections
   --------------------------------------------------------------------------
   Sections used to be positioned by JS in Navbar.ascx, which measured the
   navbar and wrote inline padding. They now use a plain centred container
   matching the renderer site's 1140px Bootstrap container (+15px row gutter,
   because these wrappers are also Bootstrap `.row`s).

   The !important on the horizontal padding is needed because some pages were
   saved in the Sitefinity editor while that JS was still running, so its
   computed padding is baked into the stored page markup as an inline style.
   -------------------------------------------------------------------------- */

.section-wrapper {
    padding-top: var(--cw-sp-10);
    padding-bottom: var(--cw-sp-10);
}

.section-wrapper:not(.page-footer) {
    width: 100%;
    max-width: var(--cw-container-max);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--cw-container-pad) !important;
    padding-right: var(--cw-container-pad) !important;
}

/* Sitefinity gives this element `row` as well, and Bootstrap's `.row` relies
   on `margin: 0 -15px` to cancel the 15px gutter padding its columns carry.
   The auto margins above are what centre the section, so they win over the
   row's negative ones and the gutter is left uncancelled - which insets the
   page content 15px from where the navbar and footer put theirs. Dropping the
   padding lines them up. It also drops the gutter *between* columns, which
   costs nothing here: the only two-column layout on the site is the forum,
   whose login column is positioned absolutely and out of flow. */
.section-wrapper:not(.page-footer) > .sf_colsOut {
    padding-left: 0;
    padding-right: 0;
}

.cw-container {
    width: 100%;
    max-width: var(--cw-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cw-container-pad);
    padding-right: var(--cw-container-pad);
}

.section-separator {
    margin-top: var(--cw-sp-10) !important;
    margin-bottom: var(--cw-sp-10) !important;
}

/* --------------------------------------------------------------------------
   Headings
   --------------------------------------------------------------------------
   Sizes are the renderer site's clamp() scale with the rem parts converted
   to px (rem x 12.8). The `body` prefix is needed to outrank `body *`.
   -------------------------------------------------------------------------- */

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
    font-family: var(--cw-font);
    font-weight: var(--cw-fw-bold);
    color: var(--cw-blue-dark);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-top: 0;
    margin-bottom: var(--cw-sp-4);
    text-transform: none;
}

body h1, body .h1 {
    font-size: clamp(38.4px, 30.72px + 2.1vw, 52.8px);
}

body h2, body .h2 {
    font-size: clamp(31.68px, 25.92px + 1.5vw, 42.24px);
}

body h3, body .h3 {
    font-size: clamp(25.92px, 22.08px + 1.05vw, 33.6px);
}

body h4, body .h4 {
    font-size: clamp(23.04px, 20.736px + 0.675vw, 27.84px);
}

body h5, body .h5 {
    font-size: 21.12px;
}

body h6, body .h6 {
    font-size: var(--cw-fs-md);
    letter-spacing: 0.04em;
}

/* Legacy section heading classes, retuned to the new scale. */
.section-header,
.section-header * {
    font-family: var(--cw-font);
    font-weight: var(--cw-fw-bold);
    font-size: clamp(31.68px, 25.92px + 1.5vw, 42.24px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cw-blue-dark);
    text-transform: none;
    margin-bottom: var(--cw-sp-8);
}

.section-header.small,
.section-header.small * {
    font-size: clamp(25.92px, 22.08px + 1.05vw, 33.6px);
}

.section-header:not(.text-center) {
    text-align: center;
}

/* Legacy weight helpers, now real font weights instead of the per-weight
   "Neo Sans W01 <Weight>" families. `strong` is deliberately left alone: it
   used to be pinned to Medium here, but on the renderer site it is plain
   bold. */
.cw-medium {
    font-weight: var(--cw-fw-medium) !important;
}

.cw-bold {
    font-weight: var(--cw-fw-bold) !important;
}

/* --------------------------------------------------------------------------
   Body copy
   -------------------------------------------------------------------------- */

p,
.section-text {
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-base);
    line-height: 1.65;
}

.section-text:not(.text-center) {
    text-align: center;
}

small,
.small {
    font-size: var(--cw-fs-sm);
    color: var(--cw-text-muted);
}

.text-dimgray {
    color: var(--cw-gray-dim) !important;
}

.text-muted {
    color: var(--cw-text-muted) !important;
}

/* Sitefinity resets `ol, ul { list-style: none }` for its own widget markup,
   so authored ordered lists need their markers put back. Scoped to unclassed
   lists: the widgets' own lists (the new-thread form, the post list) all
   carry classes and must stay unmarkered. */
ol:not([class]) {
    list-style-type: decimal;
}

ul:not([class]) {
    list-style-type: disc;
}

ol:not([class]),
ul:not([class]) {
    padding-left: 1.5em;
}

hr {
    border: 0;
    border-top: 1px solid var(--cw-border-soft);
    box-sizing: border-box;
    height: 0;
    margin: var(--cw-sp-4) 0;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

/* The `body` prefix and the explicit :link / :visited are both load-bearing.
   Sitefinity's stylesheet loads after ours and contains
   `a, a:link, a:visited, a:hover, a:active { color: #105cb6 }` - and because
   that is a selector *list*, the specificity that counts for an anchor is
   `a:link` at (0,1,1). A plain `a` rule (0,0,1) loses to it, which is why
   every unclassed link on the site was rendering in Sitefinity's blue
   instead of the brand colour. */
body a,
body a:link,
body a:visited {
    color: var(--cw-blue-primary);
    text-decoration: none;
    transition: color var(--cw-transition-fast);
}

body a:hover,
body a:focus {
    color: var(--cw-blue-link-hover);
    text-decoration: underline;
}

/* The old `a:not(.nav-link):not(.footer-link):not(.text-white)` rule is gone
   on purpose: at specificity (0,4,1) it beat every component rule, so the
   navbar and footer had to be exempted by class name. The plain `a` above
   lets .cw-brand-nav__link / .page-footer a win on their own. */

::selection {
    background-color: var(--cw-blue-primary);
    color: var(--cw-white);
}

:focus-visible {
    outline: 2px solid var(--cw-blue-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Rich text primitives (forum posts, content blocks)
   -------------------------------------------------------------------------- */

blockquote,
.blockquote {
    border-left: 4px solid var(--cw-blue-primary);
    padding-left: var(--cw-sp-4);
    margin-left: 0;
    color: var(--cw-gray-dim);
}

code {
    background-color: var(--cw-surface-soft);
    border-radius: var(--cw-radius-sm);
    padding: 0.125em 0.3em;
    font-size: 0.9em;
    color: var(--cw-blue-dark);
}

pre {
    background-color: var(--cw-surface-soft);
    border: 1px solid var(--cw-border-soft) !important;
    border-radius: var(--cw-radius-lg);
    color: var(--cw-gray-dim);
    margin: var(--cw-sp-4) 0 !important;
    padding: var(--cw-sp-4) !important;
    overflow-x: auto;
    font-size: var(--cw-fs-sm);
    line-height: 1.55;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Misc legacy helpers still referenced by page content
   -------------------------------------------------------------------------- */

@-ms-viewport {
    width: device-width;
}

.prod-card-title {
    font-weight: var(--cw-fw-bold);
    font-size: var(--cw-fs-md);
    color: var(--cw-blue-dark);
}

.cw-top-img-banner {
    display: block;
    width: 100%;
}

.cw-top-img-banner.home-banner {
    margin-bottom: var(--cw-sp-3) !important;
}

@media (max-width: 1245px) {
    .cw-top-img-banner {
        max-height: 120px !important;
    }
}

@media (max-width: 990px) {
    .cw-top-img-banner {
        max-height: 80px !important;
    }
}