/* ==========================================================================
   Consultingwerk Design System - Theme foundation (legacy forum site)
   ==========================================================================
   Ports the design tokens of the .NET Core renderer site
   (ConsultingwerkWebsite/Frontend/WebApp/Styles/_variables.scss) to this
   legacy Sitefinity WebForms/MVC site, which has no Sass pipeline.

   The renderer site sets `html { font-size: 80% }` (= 12.8px) and expresses
   every token in rem. This site keeps the browser default root size, so all
   token values below are the *rendered* pixel values of the renderer site
   (rem x 12.8px). Keep that conversion in mind when porting new tokens.

   Load order (see Pages/MasterLayout.Master):
     vendor css -> cw-theme.css -> master.css -> footer.css
     -> navbar.css -> forum.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Neo Sans W01 as a single family with real weights
   --------------------------------------------------------------------------
   neo.font.css declares one family per weight ("Neo Sans W01 Bold", ...).
   The renderer site instead uses a single 'Neo Sans W01' family with
   font-weight 300/400/500/700/900. Both point at the same Monotype files,
   so we re-declare them here as weights to keep markup portable between
   the two sites. The per-weight families from neo.font.css keep working.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Neo Sans W01';
    src: url('../Fonts/734947/e0bd859d-12b1-41c1-9b67-003688d01609.woff2') format('woff2'),
         url('../Fonts/734947/a21a792c-051c-4059-8719-ecc8749c99a6.woff') format('woff'),
         url('../Fonts/734947/feee8e94-28a0-416a-88d3-db3912effbc4.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans W01';
    src: url('../Fonts/734953/a53085dd-4493-4430-8349-fd63d6f3e5bc.woff2') format('woff2'),
         url('../Fonts/734953/a32c3a17-3242-461c-a048-ca8e775582b1.woff') format('woff'),
         url('../Fonts/734953/97316a7d-9db1-4dc1-bd87-e24103d88a81.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans W01';
    src: url('../Fonts/734959/f056e9e7-3bb5-4f21-b861-ed2a47a0700b.woff2') format('woff2'),
         url('../Fonts/734959/b0eddbbb-9e8e-4e08-bde1-965bb945f73a.woff') format('woff'),
         url('../Fonts/734959/b2931674-c992-42a0-aa22-e9cb15d3383d.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans W01';
    src: url('../Fonts/734965/82a34ab2-92d9-48c4-989d-50d5bd54fdd1.woff2') format('woff2'),
         url('../Fonts/734965/ecedcc38-3aec-48a5-a693-fbfac59dd0ed.woff') format('woff'),
         url('../Fonts/734965/2974017c-634d-4238-9381-e3f0b95a150c.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans W01';
    src: url('../Fonts/734971/35cfb856-b935-45e7-b54f-b60e4b23e03c.woff2') format('woff2'),
         url('../Fonts/734971/424ba691-179e-4d47-8ab9-e7eedc23c30f.woff') format('woff'),
         url('../Fonts/734971/fc12c0b1-38e2-4dba-acfd-e2c26fd997a4.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Primary / accent colors */
    --cw-blue-primary: #205a7d;
    --cw-blue-dark: #205a7d;
    --cw-blue-hover: #18435d;   /* blue, lightness -8%  (button hover)   */
    --cw-blue-active: #14374c;  /* blue, lightness -12% (button active)  */
    --cw-blue-link-hover: #163d54; /* blue, lightness -10% (link hover)  */
    --cw-orange: #f18926;
    --cw-orange-hover: #e5770f; /* orange, lightness -7%  */
    --cw-orange-active: #cd6b0d;/* orange, lightness -12% */
    --cw-green: #a2cf3a;
    --cw-red: #cc4444;

    /* Neutrals / surfaces */
    --cw-gray: #a4a9ac;
    --cw-gray-light: #f2f6f9;
    --cw-gray-dim: #2f3438;
    --cw-white: #ffffff;
    --cw-off-white: #fafafa;
    --cw-ink: #141414;
    --cw-surface-soft: #f2f6f9;
    --cw-surface-muted: #e8eef3;
    --cw-border-soft: #d8e0e6;
    --cw-border-strong: #c3ced8;
    --cw-text-muted: #7a8792;
    --cw-text-support-strong: #66727d;
    --cw-focus-ring: rgba(32, 90, 125, 0.22);

    /* Typography */
    --cw-font: 'Neo Sans W01', Helvetica, Arial, sans-serif;
    --cw-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --cw-fs-xs: 14.4px;   /* 1.125rem   */
    --cw-fs-sm: 15.6px;   /* 1.21875rem */
    --cw-fs-base: 16.8px; /* 1.3125rem  */
    --cw-fs-md: 19.2px;   /* 1.5rem     */
    --cw-fs-lg: 21.6px;   /* 1.6875rem  */
    --cw-fs-xl: 24px;     /* 1.875rem   */
    --cw-fs-2xl: 28.8px;  /* 2.25rem    */
    --cw-fs-3xl: 36px;    /* 2.8125rem  */
    --cw-fs-4xl: 43.2px;  /* 3.375rem   */

    --cw-fw-light: 300;
    --cw-fw-regular: 400;
    --cw-fw-medium: 500;
    --cw-fw-semibold: 600;
    --cw-fw-bold: 700;
    --cw-fw-black: 900;

    --cw-lh-tight: 1.25;
    --cw-lh-normal: 1.5;
    --cw-lh-body: 1.6;
    --cw-lh-relaxed: 1.75;

    /* Spacing scale (4px grid x 0.8) */
    --cw-sp-1: 3.2px;
    --cw-sp-2: 6.4px;
    --cw-sp-3: 9.6px;
    --cw-sp-4: 12.8px;
    --cw-sp-5: 16px;
    --cw-sp-6: 19.2px;
    --cw-sp-8: 25.6px;
    --cw-sp-10: 32px;
    --cw-sp-12: 38.4px;
    --cw-sp-16: 51.2px;
    --cw-sp-20: 64px;
    --cw-sp-24: 76.8px;

    /* Radii */
    --cw-radius-sm: 1.6px;
    --cw-radius-base: 3.2px;
    --cw-radius-md: 4.8px;
    --cw-radius-lg: 6.4px;
    --cw-radius-xl: 9.6px;

    /* Elevation */
    --cw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cw-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --cw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --cw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --cw-shadow-card: 0 8px 24px rgba(32, 90, 125, 0.08);
    --cw-shadow-btn: 0 3px 10px rgba(32, 90, 125, 0.09);

    /* Motion */
    --cw-transition-fast: 150ms ease;
    --cw-transition-base: 250ms ease;
    --cw-transition-slow: 350ms ease;
}

/* --------------------------------------------------------------------------
   Container widths
   --------------------------------------------------------------------------
   The renderer site runs stock Bootstrap 5, whose .container tops out at
   1320px. Prebuilt Bootstrap 4 has no xxl tier and stops at 1140px, which
   left this site's content 180px narrower than the renderer site's with
   correspondingly wider margins.

   The ladder is Bootstrap 5's $container-max-widths, declared once here so
   the navbar, the page sections and the footer can share it rather than each
   carrying its own number.
   -------------------------------------------------------------------------- */

:root {
    --cw-container-max: 100%;
    /* Bootstrap 5's 0.75rem gutter at the renderer site's 12.8px root. */
    --cw-container-pad: 9.6px;
}

@media (min-width: 576px) {
    :root { --cw-container-max: 540px; }
}

@media (min-width: 768px) {
    :root { --cw-container-max: 720px; }
}

@media (min-width: 992px) {
    :root { --cw-container-max: 960px; }
}

@media (min-width: 1200px) {
    :root { --cw-container-max: 1140px; }
}

@media (min-width: 1400px) {
    :root { --cw-container-max: 1320px; }
}

/* Bootstrap 4 declares its own .container max-widths inside media queries,
   which add no specificity, so this single later rule wins at every
   breakpoint. */
.container {
    max-width: var(--cw-container-max);
    padding-left: var(--cw-container-pad);
    padding-right: var(--cw-container-pad);
}

/* --------------------------------------------------------------------------
   3. Bootstrap 4 component bridge
   --------------------------------------------------------------------------
   The renderer site themes Bootstrap 5 through Sass variables. This site
   ships prebuilt Bootstrap 4 (Bootswatch Lux), so the same visual result is
   reproduced here as plain overrides.
   -------------------------------------------------------------------------- */

/* ---- Buttons ---------------------------------------------------------- */

.btn {
    font-family: var(--cw-font);
    font-weight: var(--cw-fw-bold);
    font-size: var(--cw-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    min-height: 35.84px;
    padding: 8.96px 17.28px;
    border-width: 1px;
    border-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow-btn);
    transition: all var(--cw-transition-fast);
    /* Bootstrap's reboot sets `appearance: button` on [type=submit], which
       lets the platform paint the native button and ignore the author
       background and radius. The Sitefinity widgets are full of submit
       inputs, so opt out of native rendering here. */
    -webkit-appearance: none;
    appearance: none;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3.2px var(--cw-focus-ring);
}

.btn-sm {
    min-height: 28.8px;
    padding: 6.4px 11.52px;
    border-radius: var(--cw-radius-md);
}

.btn-lg {
    min-height: 40.96px;
    padding: 11.52px 20.48px;
    font-size: var(--cw-fs-md);
    border-radius: var(--cw-radius-xl);
}

/* Primary = CW orange (matches the renderer site's Bootstrap $primary) */
.btn-primary {
    color: var(--cw-white);
    background-color: var(--cw-orange);
    border-color: var(--cw-orange);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--cw-white);
    background-color: var(--cw-orange-hover);
    border-color: var(--cw-orange-hover);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    color: var(--cw-white);
    background-color: var(--cw-orange-active);
    border-color: var(--cw-orange-active);
}

.btn-outline-primary {
    color: var(--cw-orange);
    border-color: var(--cw-orange);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--cw-white);
    background-color: var(--cw-orange);
    border-color: var(--cw-orange);
}

/* Info = CW blue (used all over the Sitefinity widgets) */
.btn-info {
    color: var(--cw-white);
    background-color: var(--cw-blue-primary);
    border-color: var(--cw-blue-primary);
}

.btn-info:hover,
.btn-info:focus {
    color: var(--cw-white);
    background-color: var(--cw-blue-hover);
    border-color: var(--cw-blue-hover);
}

.btn-info:active,
.btn-info.active,
.btn-info:not(:disabled):not(.disabled):active {
    color: var(--cw-white);
    background-color: var(--cw-blue-active);
    border-color: var(--cw-blue-active);
}

/* `.btn-outline` on its own is not a Bootstrap class, but the legacy views
   use it. Give it the blue outline look rather than an invisible button. */
.btn-outline-info,
.btn-outline {
    color: var(--cw-blue-primary);
    border-color: var(--cw-blue-primary);
    background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline:hover,
.btn-outline:focus {
    color: var(--cw-white);
    background-color: var(--cw-blue-primary);
    border-color: var(--cw-blue-primary);
}

.btn-secondary {
    color: var(--cw-gray-dim);
    background-color: var(--cw-white);
    border-color: var(--cw-border-soft);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--cw-blue-primary);
    background-color: var(--cw-surface-soft);
    border-color: var(--cw-border-strong);
}

.btn-link {
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0.005em;
    font-weight: var(--cw-fw-regular);
    color: var(--cw-blue-primary);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--cw-blue-link-hover);
}

/* ---- Forms ------------------------------------------------------------ */

.form-control,
.custom-select {
    font-family: var(--cw-font);
    font-size: var(--cw-fs-sm);
    color: var(--cw-gray-dim);
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-md);
    box-shadow: none;
}

.form-control:focus,
.custom-select:focus {
    color: var(--cw-gray-dim);
    border-color: var(--cw-blue-primary);
    box-shadow: 0 0 0 3.2px var(--cw-focus-ring);
}

.form-control::placeholder {
    color: var(--cw-text-muted);
}

label {
    color: var(--cw-gray-dim);
    font-weight: var(--cw-fw-medium);
}

/* Primary + secondary action pair at the end of a form. */
.cw-form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-3);
    margin-top: var(--cw-sp-8);
}

/* ---- Dropdowns ------------------------------------------------------- */

.dropdown-menu {
    font-family: var(--cw-font);
    font-size: var(--cw-fs-sm);
    color: var(--cw-gray-dim);
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-sm);
    box-shadow: 0 10px 30px rgba(32, 90, 125, 0.12);
    padding: var(--cw-sp-2) 0;
}

.dropdown-item {
    color: var(--cw-gray-dim);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--cw-blue-primary);
    background-color: var(--cw-surface-soft);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--cw-white);
    background-color: var(--cw-blue-primary);
}

/* ---- Pagination ------------------------------------------------------ */

.pagination {
    font-family: var(--cw-font);
}

.page-link {
    color: var(--cw-blue-dark);
    border-color: var(--cw-border-soft);
}

.page-link:hover,
.page-link:focus {
    color: var(--cw-blue-dark);
    background-color: var(--cw-surface-soft);
    border-color: var(--cw-border-strong);
    box-shadow: none;
}

.page-item.active .page-link {
    color: var(--cw-white);
    background-color: var(--cw-blue-dark);
    border-color: var(--cw-blue-dark);
}

/* ---- Cards / tables / badges ------------------------------------------ */

.card {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-xl);
}

.table th,
.table td {
    border-color: var(--cw-border-soft);
}

.badge-info {
    background-color: var(--cw-blue-primary);
    color: var(--cw-white);
}

.badge-primary {
    background-color: var(--cw-orange);
    color: var(--cw-white);
}

/* ---- Brand text / background utilities -------------------------------- */

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

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

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

.bg-cw-blue {
    background-color: var(--cw-blue-primary) !important;
}

.bg-cw-gray {
    background-color: var(--cw-gray) !important;
}

.bg-cw-gray-light {
    background-color: var(--cw-gray-light) !important;
}

.bg-cw-off-white {
    background-color: var(--cw-off-white) !important;
}

.border-cw-blue {
    border-color: var(--cw-blue-primary) !important;
}

.border-cw-soft {
    border-color: var(--cw-border-soft) !important;
}