/* Magasin component vocabulary — the replacement for BOTH stylesheets
 * `base_mag.html` used to self-load: `bootstrap.min.css` and `magasin.css`
 * (#510, no-nr9).
 *
 * WHY BOTH AT ONCE. `magasin.css` does not replace Bootstrap, it *overrides* it
 * — `.card{border-radius:0}`, `.btn{border-radius:0}`, `.searchform .btn`, the
 * whole `.img-container`/`.black-bar`/`.topbar` chrome — and it wins on SOURCE
 * ORDER at equal specificity, not on specificity. Retiring `magasin.css` first
 * brings rounded corners back and un-brands the section; dropping Bootstrap
 * first strips the components `magasin.css` is only patching. So the two retire
 * in one commit, and this file is where the merged result lives. The order below
 * reproduces the old two-file cascade exactly: the Bootstrap half first, the
 * `magasin.css` half after it, so every override that used to be decided by file
 * order is still decided by the same relative order here.
 *
 * WHAT THE BOOTSTRAP HALF IS: a 1:1 translation of exactly the Bootstrap 4.6.2
 * declarations that reached `base_mag.html` + its 11 descendants, extracted from
 * this repo's own `css/bootstrap.min.css` (the file these pages linked) by
 * keeping every comma-part whose classes are all in this subtree's rendered
 * vocabulary, in Bootstrap's own source order. Renamed to locally-owned `mag-*`.
 * Precedent: `minside-components.css` (no-31a), `dashboard.css` (no-cg2),
 * `sortable-table.css` (no-3p7), `403_csrf.html`'s inline translation (no-i6z).
 *
 * WHY A STYLESHEET AND NOT `tw:` UTILITIES: the same split the precedents use.
 * Anything that is ONE declaration on ONE element became a `tw:` token in the
 * markup instead and is deliberately absent here — `text-uppercase`, `mb-*`,
 * `text-center`/`-right`, the `text-*` colours, `bg-secondary`, `border-0`,
 * `rounded-0`, `d-none`/`d-flex`/`d-sm-inline`, `flex-wrap`,
 * `align-content-center`, `w-100`/`h-100`, `sr-only`, `clearfix`, `lead`,
 * `container-fluid`, `form-group`, `form-text`, `btn-block`. What stays is
 * components: multi-rule, multi-state, or inter-rule vocabulary whose behaviour
 * depends on rules being ordered against each other (`.mag-btn`'s transparent
 * base then `.btn-org`'s colours; `.mag-card`'s `.25rem` radius then the
 * `magasin.css` `0`). Remember Bootstrap's spacer scale is not Tailwind's above
 * `2` — `mb-3` is `1rem`, i.e. `tw:mb-4`.
 *
 * LOAD ORDER IS LOAD-BEARING. This file takes the `bootstrap.min.css` <link>
 * slot in `base_mag.html`, i.e. BEFORE `{% block extra-css %}`. It is now the
 * only stylesheet the mag chrome owns; `magasin.css` is deleted, not reordered.
 *
 * THE `!important` TRAP that keeps the `tw:` split conservative: `tw.css` emits
 * utilities into `@layer utilities` with `important`, and for `!important`
 * declarations the cascade INVERTS layer order — a layered important beats an
 * unlayered one. Everything in this file is unlayered, which is the point:
 * `.mag-img-fluid{max-width:100%}` keeps LOSING to
 * `.logo-container img{max-width:185px}` from 1280px up, exactly as Bootstrap's
 * `.img-fluid` does today. A `tw:max-w-full` there would win instead and the
 * logo would grow on wide screens (the no-wh7 trap, caught by the harness rather
 * than by reading).
 *
 * WHAT WAS DROPPED FROM `magasin.css`, and why it is not a judgement call.
 * 223 of its 299 selectors match nothing this subtree can render, by two
 * independent routes: (1) empirically — every selector tested with
 * `querySelector` against the live DOM of all 13 reachable pages x 14 viewports,
 * at rest, with the category dropdown open, with the search field and button
 * focused, and with `mag-waypoint.js` both pinned and un-pinned; (2) statically —
 * `Entry.open_body`/`locked_body` are `ProseEditorField(RICH_EXTENSIONS,
 * sanitize=True)`, whose nh3 allowlist strips EVERY class attribute and every
 * `div`/`table`/`footer` tag, so an article body can only ever contain bare
 * `p strong em u br ul ol li a[href] h2 h3 blockquote hr`. That is what makes the
 * drops safe rather than optimistic: the legacy class vocabulary
 * (`.panel*` — 343 lines of Bootstrap 3 —, `.list-group*`, `.table*`,
 * `.blockquote`/`.blockquote-brd`/`.blockquote-footer`/`.quote-sign`,
 * `.brd-rgt`/`.brd-wht`, `.m-t-4`…`.m-t-8`, `.m-b-4`…`.m-b-6`, `.vcenter`,
 * `.not_rounded`, `.card-default`/`-img`/`-lightgrey`/`-inverse`/`-no-bg`/
 * `-img-container`, `.big-target-click-zone*`, `.section-headiding-small`,
 * `.fontello-icon` + its `@font-face`, `.search*`, `.stickybadge`,
 * `body.fixed-top`, `h4`/`h6` overrides, the BS3 `.open >` dropdown states) is
 * unreachable from templates AND unreachable from content. The bare
 * `blockquote`/`hr`/`ul`/`ol` ELEMENTS do render, which is why Reboot is carried
 * whole below.
 *
 * `.m-t-9` is the counter-example and the reason a template-only sweep is not
 * enough: it survives because `mag-waypoint.js` applies it at scroll time. Same
 * for `#midle-searchbar #top-logo/#top-user/.fa-user` and `.grey-bar .fa-user`,
 * which only match after that script moves those elements into the search bar.
 *
 * NOT A GENERAL-PURPOSE FRAMEWORK. Add to it only what a mag template actually
 * renders; anything reusable belongs in `tw:` utilities.
 */

/* ============================================================ BOOTSTRAP HALF ==
 * Was `css/bootstrap.min.css`, filtered to this subtree and renamed `mag-*`.
 */

/* --------------------------------------------------------- element defaults --
 * Bootstrap Reboot + its base typography + the print block, carried WHOLE.
 * This half is easy to forget and is the larger regression risk: dropping
 * `bootstrap.min.css` drops Reboot with it, and `tailwind/input.css`'s #548
 * reconcile block deliberately `revert-layer`s Preflight's table/form/media/list
 * resets for the benefit of pages that still load Bootstrap — so a page that
 * keeps `tw.css` and loses Bootstrap falls back to UA defaults, not Bootstrap
 * defaults. Taken from the TYPOGRAPHY block where it overrides Reboot (`pre` is
 * `87.5%`, not `1em`; `small` is `.875em`, not `80%`) — an extraction that stops
 * at the end of Reboot silently ships the wrong ones. Carried in full rather
 * than filtered to the tags these 12 templates happen to render today: a
 * superset costs nothing because it reproduces what the browser already
 * computes, and the article bodies are DB content. */
:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
*,::after,::before{box-sizing:border-box}
html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}
[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}
hr{box-sizing:content-box;height:0;overflow:visible}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}
p{margin-top:0;margin-bottom:1rem}
abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}
address{margin-bottom:1rem;font-style:normal;line-height:inherit}
dl,ol,ul{margin-top:0;margin-bottom:1rem}
ol ol,ol ul,ul ol,ul ul{margin-bottom:0}
dt{font-weight:700}
dd{margin-bottom:.5rem;margin-left:0}
blockquote{margin:0 0 1rem}
b,strong{font-weight:bolder}
small{font-size:80%}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
a{color:#007bff;text-decoration:none;background-color:transparent}
a:hover{color:#0056b3;text-decoration:underline}
a:not([href]):not([class]){color:inherit;text-decoration:none}
a:not([href]):not([class]):hover{color:inherit;text-decoration:none}
code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}
pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}
figure{margin:0 0 1rem}
img{vertical-align:middle;border-style:none}
svg{overflow:hidden;vertical-align:middle}
table{border-collapse:collapse}
caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}
th{text-align:inherit;text-align:-webkit-match-parent}
label{display:inline-block;margin-bottom:.5rem}
button{border-radius:0}
button:focus:not(:focus-visible){outline:0}
button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
button,input{overflow:visible}
button,select{text-transform:none}
[role=button]{cursor:pointer}
select{word-wrap:normal}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
textarea{overflow:auto;resize:vertical}
fieldset{min-width:0;padding:0;margin:0;border:0}
legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}
progress{vertical-align:baseline}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{outline-offset:-2px;-webkit-appearance:none}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}
output{display:inline-block}
summary{display:list-item;cursor:pointer}
template{display:none}
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.75rem}
h4{font-size:1.5rem}
h5{font-size:1.25rem}
h6{font-size:1rem}
hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}
small{font-size:.875em;font-weight:400}
mark{padding:.2em;background-color:#fcf8e3}
code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}
a>code{color:inherit}
kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}
kbd kbd{padding:0;font-size:100%;font-weight:700}
pre{display:block;font-size:87.5%;color:#212529}
pre code{font-size:inherit;color:inherit;word-break:normal}

/* ------------------------------------------------------------- .mag-container
 * `container-fluid` went to `tw:w-full tw:px-[15px] tw:mx-auto` in the markup
 * (the Phase-2 convention) but `container` stays a component: it is five rules,
 * four of them media queries, plus a print `min-width` that a max-width utility
 * chain cannot express. Dropping that print rule would narrow the printed
 * article column from 992px to the 720px the md max-width clamps it to. */
.mag-container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:576px){.mag-container{max-width:540px}}
@media (min-width:768px){.mag-container{max-width:720px}}
@media (min-width:992px){.mag-container{max-width:960px}}
@media (min-width:1200px){.mag-container{max-width:1140px}}

/* ------------------------------------------------------------------- forms --
 * `.mag-form-control` is kept rather than inlined because of what an at-rest
 * diff cannot see: `:focus`, `::placeholder` and `:disabled`. Reimplementing
 * those as utilities on each of the 13 usages is where a conversion loses them. */
.mag-form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
@media (prefers-reduced-motion:reduce){.mag-form-control{transition:none}}
.mag-form-control::-ms-expand{background-color:transparent;border:0}
.mag-form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
.mag-form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}
.mag-form-control::-moz-placeholder{color:#6c757d;opacity:1}
.mag-form-control:-ms-input-placeholder{color:#6c757d;opacity:1}
.mag-form-control::-ms-input-placeholder{color:#6c757d;opacity:1}
.mag-form-control::placeholder{color:#6c757d;opacity:1}
.mag-form-control:disabled,.mag-form-control[readonly]{background-color:#e9ecef;opacity:1}
input[type=date].mag-form-control,input[type=datetime-local].mag-form-control,input[type=month].mag-form-control,input[type=time].mag-form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none}
select.mag-form-control:-moz-focusring{color:transparent;text-shadow:0 0 0 #495057}
select.mag-form-control:focus::-ms-value{color:#495057;background-color:#fff}
select.mag-form-control[multiple],select.mag-form-control[size]{height:auto}
textarea.mag-form-control{height:auto}

/* ----------------------------------------------------------------- buttons -- */
.mag-btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
@media (prefers-reduced-motion:reduce){.mag-btn{transition:none}}
.mag-btn:hover{color:#212529;text-decoration:none}
.mag-btn.focus,.mag-btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
.mag-btn.disabled,.mag-btn:disabled{opacity:.65}
.mag-btn:not(:disabled):not(.disabled){cursor:pointer}
a.mag-btn.disabled,fieldset:disabled a.mag-btn{pointer-events:none}
.mag-btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}
.mag-btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}
.mag-btn-primary.focus,.mag-btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc;box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}
.mag-btn-primary.disabled,.mag-btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}
.mag-btn-primary:not(:disabled):not(.disabled).active,.mag-btn-primary:not(:disabled):not(.disabled):active{color:#fff;background-color:#0062cc;border-color:#005cbf}
.mag-btn-primary:not(:disabled):not(.disabled).active:focus,.mag-btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}
/* `.mag-btn-outline-secondary` exists for ONE element: the "Godta kun
 * nødvendige" button in the shared `_consent_banner.html`, which carries every
 * host chrome's vocabulary side by side (`btn`/`ms-btn`/`mag-btn`) because the
 * three bases load three different stylesheets. */
.mag-btn-outline-secondary{color:#6c757d;border-color:#6c757d}
.mag-btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}
.mag-btn-outline-secondary.focus,.mag-btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
.mag-btn-outline-secondary.disabled,.mag-btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}
.mag-btn-outline-secondary:not(:disabled):not(.disabled).active,.mag-btn-outline-secondary:not(:disabled):not(.disabled):active{color:#fff;background-color:#6c757d;border-color:#6c757d}
.mag-btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.mag-btn-outline-secondary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
.mag-btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}

/* --------------------------------------------------------------- dropdown --
 * Kept as a vocabulary (frontend-patterns §1c-post, second option) rather than
 * rewritten to `x-show`: `mag/categories.html` keeps the §1c form and Alpine
 * drives `mag-show` via `:class`, so the mechanism — including the
 * server-rendered first paint — stays bit-identical. The failure mode if these
 * three rules go missing is silent: the button still renders, the menu just
 * never opens. */
.mag-dropdown{position:relative}
.mag-dropdown-toggle{white-space:nowrap}
.mag-dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}
.mag-dropdown-toggle:empty::after{margin-left:0}
.mag-dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}
.mag-dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}
.mag-dropdown-item:focus,.mag-dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#e9ecef}
.mag-dropdown-item.active,.mag-dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}
.mag-dropdown-item.disabled,.mag-dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}
.mag-dropdown-menu.mag-show{display:block}

/* -------------------------------------------------------------------- nav -- */
.mag-nav-link{display:block;padding:.5rem 1rem}
.mag-nav-link:focus,.mag-nav-link:hover{text-decoration:none}
.mag-nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}

/* ------------------------------------------------------------------- card -- */
.mag-card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}
.mag-card>hr{margin-right:0;margin-left:0}
.mag-card-body{-ms-flex:1 1 auto;flex:1 1 auto;min-height:1px;padding:1.25rem}
.mag-card-title{margin-bottom:.75rem}
.mag-card-text:last-child{margin-bottom:0}
.mag-card-img-top{-ms-flex-negative:0;flex-shrink:0;width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}

/* ------------------------------------------------------------------ images --
 * Bootstrap's `.img-fluid`. Deliberately a class here and NOT the `tw:max-w-full
 * tw:h-auto` pair `no-wh7` used as a placeholder: see the `!important` trap in
 * the header — as an unlayered rule this keeps losing to
 * `.logo-container img{max-width:185px}` from 1280px up, which is the behaviour
 * being preserved. */
.mag-img-fluid{max-width:100%;height:auto}

/* ----------------------------------------------------------------- pinned --
 * Was Bootstrap's `.fixed-top`, applied by `mag-waypoint.js` — our own script,
 * not Bootstrap JS. Renamed with the rules it depends on, per the no-2xi
 * precedent (rename the hook rather than keep a framework name nothing defines
 * any more); `mag-waypoint.js` adds/removes `mag-pinned` accordingly. */
.mag-pinned{position:fixed;top:0;right:0;left:0;z-index:1030}

/* ------------------------------------------------------------------ print --
 * Closes the Bootstrap half exactly where `bootstrap.min.css` ended, so it still
 * sits BEFORE `magasin.css`'s own `@media print` block further down. */
@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}}
@media print{a:not(.mag-btn){text-decoration:underline}}
@media print{abbr[title]::after{content:" (" attr(title) ")"}}
@media print{pre{white-space:pre-wrap!important}}
@media print{blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}}
@media print{img,tr{page-break-inside:avoid}}
@media print{h2,h3,p{orphans:3;widows:3}}
@media print{h2,h3{page-break-after:avoid}}
@media print{body{min-width:992px!important}}
@media print{.mag-container{min-width:992px!important}}

/* =============================================================== MAGASIN HALF ==
 * Was `css/magasin.css`, filtered to what this subtree can reach. Everything
 * below used to win over the Bootstrap half on source order alone; it still
 * does, because it is still below it.
 */

/* -------------------------------------------------------- brand typography -- */
body{font-family:'Gotham SSm A','Gotham SSm B';font-weight:300;font-style:normal;color:#444}
h1,h2,h3,h4,h5,h6{font-family:'Gotham SSm A','Gotham SSm B';font-weight:400;font-style:normal;color:#444}

/* ----------------------------------------------------------------- topbar --
 * The `#midle-searchbar` rules below look dead on a static read of the
 * templates: `#top-logo`/`#top-user` render inside `.img-container .topbar`,
 * not inside `#midle-searchbar`. They are live because `mag-waypoint.js` MOVES
 * both elements into the search bar when it pins. */
@media (max-width: 767px){
    #midle-searchbar #top-logo,
    #midle-searchbar #top-user{display: none; visibility: hidden;}
}

.topbar {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.topbar h1{font-size: 105%; margin-top: 0; font-weight: 300; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}

@media (min-width: 544px) {
    .topbar {padding-bottom: 0;}
    .topbar h1{margin-top: 0.4rem;}
}

.topbar h1 a{color: rgba(255, 255, 255, 0.55);}
.topbar .fa-user,
.grey-bar .fa-user,
#midle-searchbar .fa-user{color: #fff;}

.logo-container img{
    margin-top: 0;
    padding-top: 0;
}

@media (min-width: 1280px) {
    .logo-container img{max-width:185px; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.logo-container img{width: 80%!important;}
}

/* --------------------------------------------------------------- dropdown -- */
.mag-dropdown .mag-dropdown-menu{
    margin: 0 0 0;
    color: #373a3c;
    background-color: #f3f3f3;
    border: none;
    border-radius: 0;
    padding: 5px 15px;
    font-size: 0.85rem;
}

.mag-dropdown .mag-dropdown-item{
    display: block;
    width: 100%;
    padding: 10px 10px;
    clear: both;
    font-weight: 500;
    line-height: 1.5;
    color: #636363;
    text-align: inherit;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #e4e4e4;
    text-transform: uppercase;
}
.mag-dropdown .mag-dropdown-item:hover{color: #333;}

.mag-dropdown  .mag-dropdown-item:last-child{border-bottom: none;}

.searchform .mag-btn{color: #fd6d38; background: #fff; border:none;}
.searchform input{border: none;}

/* --------------------------------------------------------------- grey bar -- */
.grey-bar{background: #4a4a4a!important; }

/* ---------------------------------------------------------- img-container -- */
.img-container{
    position: relative;
}
.img-container:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.img-container.is-locked:after{display: none;}
}

.img-container.is-locked:after{
  color: #fff;
  background: #fd6d38;
  padding: 0.2rem 0.4rem;
  position: absolute;
  bottom: 0;
  right: 0;
  content: "\f067";
  border: 0;
  font-family: "Font Awesome 5 Pro";
  font-size: 14px;
  font-weight: 900;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.img-container .mag-card{

    padding-top: 8%;
    padding-bottom: 17%;
    border: none;
}

.img-container .category-title{font-size: 80%; margin-bottom: 2rem;}

.img-container .mag-card h2{
    font-size: 170%;
    font-weight: normal;
    line-height: 2.5rem;
    margin-bottom: 3rem;
    color: #fff;
}

.byline{
    color: #f0f0f1;
    font-weight: 200!important;
    font-style: italic;
    font-size: 70%;
    margin-bottom: 0;
}

.byline strong{font-weight: 700!important;}

@media (min-width: 992px) {
.img-container .category-title{font-size: 80%; margin-bottom: 3.4rem;}

    .img-container .mag-card h2{
        font-size: 250%;
        line-height: 3.2rem;
        margin-bottom: 3rem;
    }
}

.img-container .read-more{margin-bottom: 0; margin-top: -1rem;}

/* -------------------------------------------------------------- black-bar -- */
.black-bar{background: #343434; padding: 2.5rem 2.3rem;}

.black-bar .nav-white{padding-top: 10px; font-size: 70%; margin-bottom: 0; padding-bottom: 0;}
.black-bar .nav-white a{ color: #fff; text-transform: uppercase;}
.black-bar .nav-white a:hover{color:#b0b0b0;}
.black-bar .nav-inline .mag-nav-link+.mag-nav-link{margin-left: 0.5rem;}

@media (min-width: 992px) {
.black-bar .nav-white{font-size: 80%;}
.black-bar .nav-inline .mag-nav-link+.mag-nav-link{margin-left: 1rem;}
}

.nav-social .fa-inverse{color: #666666;}
.nav-social a {color: #444444;}
.nav-social a:hover .fa-inverse{color: #fff;}

@media (max-width: 543px) {
     .black-bar .nav-white{margin-bottom: 1.4rem;}

    .black-bar .nav-white a{
    display: block;
    }

    .nav-social{text-align: center; float: none; margin: 0 auto;}

}

/* ----------------------------------------------------------- article list -- */
.article-list-item img{margin-bottom: .6rem!important;}

.article-list-item .is-locked {
  position: relative;
  display: block;
}
.article-list-item .is-locked:after {
  color: #fff;
  background: #fd6d38;
  padding: 0.15rem 0.4rem;
  position: absolute;
  top: 0px;
  right: 0;
  content: "\f067";
  border: 0;
  font-family: "Font Awesome 5 Pro";
  font-size: 14px;
  font-weight: 900;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.article-list-item a:hover{text-decoration: none;}

.article-list-item a:hover .sub-title{color: #b7b7b7;}
.article-list-item a:hover h3{color: #80d5f0;}
.article-list-item a:hover .item-text{color: #afafaf;}

.article-list-item .sub-title {color: #757575; font-size: 75%; font-weight: 700; margin-bottom: 1.6rem;}

.article-list-item h3 {
    color: #2DAFE6;
    font-size: 120%;
    font-weight: 500;
    line-height: 1.65rem;
}

.article-list-item .item-text {color: #3f3f3f; font-size: 80%; font-weight: 400; line-height: 1.45rem;}

/* Next-page control on the article list. The class names are `el-pagination`'s,
 * kept when no-h0h ported the markup off its jQuery plugin onto htmx so this
 * rule did not have to move with it. */
.endless_container{
    text-align: center;
    float: left;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 100%;
}

/* Swap link for loader while the fetch is in flight. The plugin did this in JS
 * (`link.hide(); loading.show()`); htmx puts `.htmx-request` on the element
 * named by `hx-indicator` — the container — for exactly the same window.
 * Display, not htmx's default opacity fade: the loader has to take the link's
 * place in the flow or the list jumps. */
.endless_loading{display: none;}
.endless_container.htmx-request .endless_more{display: none;}
.endless_container.htmx-request .endless_loading{display: block;}

/* ----------------------------------------------------------------- footer -- */
#footer p{font-size: 80%;}

/* ------------------------------------------------------------ text colour -- */
.text-org{color: #fd6d38;}
.text-light-grey{color: #fafafa;}

/* ---------------------------------------------------------------- article --
 * `.article-content` wraps the sanitized `open_body`/`locked_body` HTML, so
 * these element rules are the ONLY styling that reaches an article body — nh3
 * strips every class attribute before it is stored. */
.article-content p{
    font-size: 120%;
    line-height: 2.2rem;
    margin-bottom: 2rem;
    font-weight: 400;
}

.article-content p strong{font-weight: 700;}

.article-content ul,
.article-content ol{
    font-size: 120%;
    line-height: 2.2rem;
    font-weight: 400;
}

@media print {
    .article-content{
      float: left!important;
      width: 100%!important;
      margin: 0!important;
      padding: 0!important;
    }
    .article-content ul,
    .article-content ol{
        font-size: 90%;
        line-height: 1.8rem;
        font-weight: 400;
    }

    .article-content p{
        font-size: 90%;
        line-height: 1.8rem;
        margin-bottom: 1.9rem;
        font-weight: 400;
    }
}

/* ------------------------------------------------------------------- card -- */
.mag-card {border-radius: 0;}
.mag-card.card-no-brd{border: none;}

.card-grey{background:#f3f3f3; border-color: #f3f3f3;}

/* ----------------------------------------------------------------- button -- */
.mag-btn {
  border-radius: 0;
}
.mag-btn.btn-wide {
  padding: .7rem 2.3rem;
}

.btn-org {
  color: #fff;
  background-color: #ff6b2b;
  border-color: #ff6b2b;
}

.btn-org:hover {
  color: #fff;
  background-color: #fd9669;
  border-color: #fd9669;
}

.btn-org:focus, .btn-org.focus {
  color: #fff;
  background-color: #fd9669;
  border-color: #fd9669;
}

/* `.btn-og.active` is a typo for `.btn-org.active` in the original
 * `magasin.css` and is carried verbatim: it matches nothing either way, and
 * "fixing" it here would be the one edit in this file that changes behaviour
 * rather than preserving it. The `.open > .btn-org.dropdown-toggle` siblings it
 * shipped with ARE dropped — `.open` is the Bootstrap 3 dropdown state and
 * nothing in this subtree applies it. */
.btn-org:active, .btn-og.active {
  color: #fff;
  background-color: #fd9669;
  background-image: none;
  border-color: #fd9669;
}

.btn-org:active:hover, .btn-org:active:focus, .btn-org:active.focus, .btn-org.active:hover, .btn-org.active:focus, .btn-org.active.focus {
  color: #fff;
  background-color: #fd9669;
  border-color: #fd9669;
}

.btn-white-outline {
  color: #fff;
  background-color: transparent;
  background-image: none;
  border-color: #fff;
}

.btn-white-outline:focus, .btn-white-outline.focus, .btn-white-outline:active, .btn-white-outline.active {
  color: #fff;
  background-color: #ccc;
  border-color: #ccc;
}

.btn-white-outline:hover {
  color: #fff;
  background-color: #ccc;
  border-color: #ccc;
}

.btn-white-outline.disabled:focus, .btn-white-outline.disabled.focus, .btn-white-outline:disabled:focus, .btn-white-outline:disabled.focus {
  border-color: white;
}

.btn-white-outline.disabled:hover, .btn-white-outline:disabled:hover {
  border-color: white;
}

.mag-dropdown .mag-btn{text-align: left; color: #545454; background: #fff;}

.mag-dropdown .mag-dropdown-toggle::after {
    position: absolute;
    right: 8px;
    top: 8px;
    display: inline-block;
    width: auto;
    height: auto;
    margin-right: 0;
    margin-left: 0;
    color: #fd6d38;

    text-align: right;
    vertical-align: top;
    content: "\f078";
    border: 0;
    font-family: "Font Awesome 5 Pro";
    font-size: 14px;
    font-weight: 900;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Applied by `mag-waypoint.js` to the block after the pinned search bar, which
 * is why a template-only sweep reads it as dead. The rest of the `.m-t-*`/
 * `.m-b-*` scale is genuinely unreachable and was dropped. */
.m-t-9{margin-top: 9rem!important;}

.no_margin, .no-margin{margin-bottom: 0!important; margin-top: 0!important;}