/* Danak theme for Plone 6 (Classic UI).
   Builds on Barceloneta and adds the Danak customisations that, on the
   Plone 5 site, lived in the resource registry's production bundle. */

* {
    font-family: Arial, Helvetica, "Lucida Grande", Verdana, Lucida, sans-serif !important;
}

/* 14px base like Barceloneta 5 (Bootstrap 5 sizes are in rem, so this scales
   text, spacing and headings together) */
html {
    font-size: 14px;
}

/* Text colours of the Plone 5 site (Barceloneta 5) */
:root {
    --bs-body-color: #4d4d4d;
}

body {
    font-family: Arial, Helvetica, "Lucida Grande", Verdana, Lucida, sans-serif !important;
    background-color: #fafafa;
    color: #4d4d4d;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-weight: 400;
}

#content-core table {
    background-color: #fff;
    color: #696969;
}

#content-core th {
    color: #4d4d4d;
}

/* Barceloneta 5 top-aligned all table cells; Plone 6 leaves them middle */
#content-core td,
#content-core th {
    vertical-align: top;
}

.documentDescription,
.discreet {
    color: #696969;
}

/* Page widths and gutters of the Plone 5 site (Bootstrap 3 / Barceloneta 5):
   fixed container widths per breakpoint and 15px gutters */
.container,
.row {
    --bs-gutter-x: 30px;
}

@media (min-width: 768px) {
    .container { max-width: 750px; }
}

@media (min-width: 992px) {
    .container { max-width: 990px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

@media (min-width: 1600px) {
    .container { max-width: 1570px; }
}

/* Page title with a line under it, like Barceloneta 5 */
#content > header > h1,
.documentFirstHeading {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 9px;
    margin-bottom: 15px;
}

/* Byline: small grey text with a plain author link instead of a pill */
#section-byline {
    font-size: 14px;
    color: #696969;
    margin-bottom: 15px;
}

#section-byline .badge {
    background: none !important;
    padding: 0;
    font-size: inherit !important;
    color: #B2063C !important;
    text-decoration: none;
}

/* Links, but not links styled as buttons (control panels, forms) */
a:not(.btn) {
    color: #B2063C;
}

a:not(.btn):hover {
    color: #872D23;
}

h1, h2, h3, h4, h5 {
    font-family: oswald, open-sans, sans-serif !important;
}

/* Beat the "*" rule above for <span>/<strong>/<a> inside headings */
h1 *, h2 *, h3 *, h4 *, h5 * {
    font-family: inherit !important;
}

#content a:not(.btn) {
    color: #B2063C;
}

#content a:not(.btn):hover {
    color: #872D23;
}

/* Header */
#content-header {
    background: #E2E2E2;
}

#portal-top {
    font-size: 12px;
}

/* Header spacing measured against the Plone 5 site: logo 20px in from the
   content edge (live #portal-header padding), 11px from the top, header
   126px tall including the menu row */
#content-header > .container {
    padding-top: 11px !important;
}

#portal-logo-wrapper {
    padding-bottom: 0 !important;
    padding-left: 20px;
}

#portal-logo {
    position: relative;
    display: inline-block;
    /* The logo image has empty space at its bottom; the subtitle overlaps it */
    padding-bottom: 4px;
}

#portal-logo::after {
    content: "DEN DANSKE AKKREDITERINGSFOND";
    position: absolute;
    left: 103px;
    bottom: 4px;
    white-space: nowrap;
    color: #cb2b37;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}

/* English section (<html lang="en">) */
html:lang(en) #portal-logo::after {
    content: "THE DANISH ACCREDITATION FUND";
}

#portal-logo img {
    width: 300px !important;
    max-width: 100%;
}

/* Navigation: small links in the grey header band */
#mainnavigation-wrapper {
    background: #E2E2E2;
    border-bottom: 20px solid #C7C7C7;
}

@media (min-width: 992px) {
    #mainnavigation-wrapper {
        margin-top: -5px;
    }
}

#mainnavigation .navbar-barceloneta {
    background: transparent !important;
    box-shadow: none;
    min-height: unset;
    margin-bottom: 0;
    padding: 0 0 10px 0;
}

#mainnavigation .offcanvas {
    background: #E2E2E2 !important;
}

#mainnavigation .offcanvas-body,
#portal-globalnav,
#portal-globalnav li {
    background: transparent !important;
}

#mainnavigation .offcanvas-body {
    justify-content: flex-end;
}

#portal-globalnav {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Danak has a flat menu: no dropdown arrows or submenus */
#portal-globalnav .opener,
#portal-globalnav .opener + label,
#portal-globalnav li > ul {
    display: none !important;
}

#portal-globalnav > li {
    border-left: 1px solid #AF1F3E;
    font-weight: 700;
}

#portal-globalnav > li:first-child {
    border-left: 0;
}

#portal-globalnav > li > a,
#portal-globalnav > li > a.nav-link {
    color: #2C5663 !important;
    background-color: transparent !important;
    font-size: 12px;
    padding: 0 10px;
    line-height: unset;
    text-decoration: none;
}

#portal-globalnav > li > a:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    #portal-globalnav > li {
        border-left: 0;
        padding: 6px 0;
    }
}

/* Breadcrumbs: Barceloneta 5's .plone-breadcrumb rules (with the Danak
   overrides: no background, no negative margin) on Plone 6's markup */
#above-content-wrapper,
#portal-breadcrumbs {
    background: transparent !important;
    margin-top: 0;
}

#portal-breadcrumbs {
    margin-bottom: 20px;
    padding: 0;
}

#portal-breadcrumbs .breadcrumb {
    display: inline-block;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    background: transparent;
    font-size: 14px;
}

#portal-breadcrumbs .breadcrumb-item {
    font-weight: 400;
    display: inline-block;
    line-height: 0;
    position: relative;
    padding: 0 30px 0 0 !important;
    color: #777777;
}

/* Chevron separator: a grey triangle with a background-coloured one on top */
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::after {
    content: "" !important;
    position: absolute;
    float: none;
    border-left: 5px solid;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    top: -15px;
    padding: 0 !important;
}

#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #cccccc;
    left: -20px;
}

#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::after {
    color: #fafafa;
    left: -21px;
}

#portal-breadcrumbs a {
    color: #086ca3;
    text-decoration: none;
}

#portal-breadcrumbs a:hover {
    text-decoration: underline;
}

/* Portlets */
.portlet {
    border: 2px solid #e5e5e5 !important;
    border-right-color: #808080 !important;
    border-bottom-color: #808080 !important;
    border-radius: 0 !important;
}

.portlet a {
    text-decoration: none;
}

/* All portlet titles look like the INDHOLD title: small, grey, uppercase,
   whether or not the title is a link */
.portletHeader,
.portlet .card-header {
    font-size: 15px;
    text-transform: uppercase;
    color: #A0A0A0 !important;
    padding: 0 5px !important;
    background: #E2E2E2 !important;
    border-radius: 0 !important;
    border-bottom: 4px solid #C7C7C7;
}

.portletHeader a,
.portlet .card-header a {
    font-size: 15px;
    text-transform: uppercase;
    color: #A0A0A0 !important;
}

.portletNews .portletContent li:first-child,
.portletNews .card-body li:first-child {
    padding: 0 15px;
}

.portletNews .portletContent a,
.portletNews .card-body a {
    color: #295765 !important;
    border-color: black !important;
    padding: 15px 0 0 0 !important;
}

.portletNews .portletContent time,
.portletNews .card-body time {
    display: block;
    text-align: right;
    /* Live size; !important beats Barceloneta's rem-based .portletItemDetails */
    font-size: 12px !important;
    color: black !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Separators as on the Plone 5 site: a black line on each item's link (not
   the full-width <li>), inset 15px, and none above the first item */
.portletNews .portletContent .portletItem,
.portletNews .card-body .portletItem {
    border: 0 !important;
    padding: 15px 15px 0 15px;
}

.portletNews .portletContent .portletItem:first-child,
.portletNews .card-body .portletItem:first-child {
    padding: 0 15px;
}

.portletNews .card-body .portletItem > a {
    display: block;
    border-top: 1px solid black !important;
}

.portletNews .card-body .portletItem:first-child > a {
    border-top: 0 !important;
}

/* Links inside portlets are blue on the Plone 5 site (Barceloneta 5's link
   colour); the navigation portlet keeps its own colours below. */
.portlet:not(.portletNavigationTree) .card-body a:not(.btn),
.portlet:not(.portletNavigationTree) .card-footer a:not(.btn) {
    color: #007bb1;
}

.portlet:not(.portletNavigationTree) .card-body a:not(.btn):hover,
.portlet:not(.portletNavigationTree) .card-footer a:not(.btn):hover {
    color: #00557b;
}

/* Headings inside portlets (e.g. "Log ind" in Kundeportal) */
.portlet .card-body h1,
.portlet .card-body h2,
.portlet .card-body h3,
.portlet .card-body h4 {
    font-size: 20px;
    margin: 0;
}

.portletNavigationTree .state-published {
    color: #295765 !important;
}

/* Red bullets instead of content-type icons in the navigation portlet */
.portletNavigationTree .navTreeItem a > svg.plone-icon,
.portletNavigationTree .navTreeItem a > img {
    display: none;
}

.navTreeItem a::before {
    background: #A90629;
    content: '';
    display: inline-block;
    height: 5px;
    width: 5px;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Current page: light background and a chevron, as on the Plone 5 site */
.portletNavigationTree .navTreeItem > a {
    position: relative;
}

.portletNavigationTree li.navTreeCurrentNode > a,
.portletNavigationTree a.navTreeCurrentItem {
    background: #f6f6f9;
    font-weight: 400;
}

.portletNavigationTree li.navTreeCurrentNode > a::after,
.portletNavigationTree a.navTreeCurrentItem::after {
    content: "⟩";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #777;
}

.portletLogin .portletFooter,
.portletLogin .card-footer {
    display: none;
}

/* Login portlet form: full-width fields like the search portlet */
.portletLogin .field {
    margin-bottom: 12px;
}

.portletLogin .field br {
    display: none;
}

.portletLogin .field label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 14px;
    color: #4d4d4d;
}

.portletLogin .field input[type="text"],
.portletLogin .field input[type="password"] {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.portletLogin .field input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.portletLogin .formControls {
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.danak-cookie-note {
    font-size: 12px;
    font-style: italic;
    color: #696969;
    padding-top: 2px;
}

/* Search portlet: button under the field, as on the Plone 5 site */
.portletSearch .input-group {
    flex-direction: column;
    align-items: flex-start;
}

.portletSearch .input-group > .form-control {
    width: 100%;
    border-radius: 4px !important;
}

.portletSearch .input-group-append {
    margin-top: 15px;
}

.portletSearch .input-group-append .btn {
    border-radius: 4px !important;
}

/* No "Log ind" link in the header; Danak logs in through the portlet */
#portal-anontools {
    display: none;
}

/* Grey buttons like on the Plone 5 site, instead of Bootstrap blue */
.portlet .btn-primary,
.portletSearch button[type="submit"],
.portletSearch input[type="submit"] {
    color: #4d4d4d !important;
    background-color: #e5e5e5 !important;
    border-color: #b2b2b2 !important;
    font-weight: bold;
}

.portletLogin .context {
    color: #4d4d4d !important;
    background-color: #e5e5e5 !important;
    border-color: #b2b2b2 !important;
}

/* Hand-made forms in page text (e.g. the register search): Barceloneta 5
   styled bare inputs and buttons; Plone 6 only styles .form-control/.btn.
   TinyMCE's own controls (.tox) sit inside #content-core on edit forms. */
#content-core input[type="text"]:not(.form-control):not(.tox *),
#content-core input[type="search"]:not(.form-control):not(.tox *),
#content-core input[type="email"]:not(.form-control):not(.tox *),
#content-core input[type="number"]:not(.form-control):not(.tox *),
#content-core input[type="date"]:not(.form-control):not(.tox *),
#content-core textarea:not(.form-control):not(.tox *),
#content-core select:not(.form-select):not(.form-control):not(.tox *) {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #696969;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#content-core textarea:not(.form-control):not(.tox *) {
    height: auto;
}

#content-core input:not(.form-control):focus:not(.tox *),
#content-core textarea:not(.form-control):focus:not(.tox *),
#content-core select:not(.form-select):not(.form-control):focus:not(.tox *) {
    border-color: #64bee8;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(100, 190, 232, 0.6);
}

#content-core [type="submit"]:not(.btn):not(.tox *),
#content-core button:not(.btn):not(.tox *) {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.42857143;
    text-align: center;
    text-shadow: 0 1px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #4d4d4d;
    background-color: #e5e5e5;
    border: 1px solid #b2b2b2;
    border-radius: 2px;
}

#content-core [type="submit"]:not(.btn):hover:not(.tox *),
#content-core button:not(.btn):hover:not(.tox *) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Tip texts in those forms are written as h6 */
#content-core h6 {
    font-size: 12px;
}

/* Barceloneta 5 paragraph spacing (Plone 6 uses 1rem = 14px) */
#content-core p {
    margin-bottom: 10px;
}

/* Tables */
#content-core td {
    color: inherit;
}

/* Plain editor tables (border="1"), as Barceloneta 5 drew them: light
   grid around every cell, no cell padding */
#content-core table:not(.danak-table):not(.invisible-grid):not(.listing):not(.table) {
    width: 100%;
    max-width: 100%;
    border: 1px solid #e5e5e5;
    border-collapse: collapse;
    border-radius: 4px;
    font-weight: 400;
    line-height: 1.42857143;
}

#content-core table:not(.danak-table):not(.invisible-grid):not(.listing):not(.table) > * > tr > td,
#content-core table:not(.danak-table):not(.invisible-grid):not(.listing):not(.table) > * > tr > th {
    padding: 0;
    border: 1px solid #e5e5e5;
}

/* TinyMCE "Invisible grid" table style */
#content-core .invisible-grid {
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    background: transparent !important;
}

#content-core .invisible-grid > *,
#content-core .invisible-grid > * > tr,
#content-core .invisible-grid > * > tr > td,
#content-core .invisible-grid > * > tr > th {
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.pictable td {
    padding-right: 5px;
}

.danak-table {
    background: transparent !important;
    border: 0 !important;
}

.danak-table td {
    border: none;
    padding-bottom: 15px;
}

.danak-table td:nth-child(odd) {
    padding-right: 10px;
}

.danak-table td:nth-child(even) {
    padding-left: 10px;
}

.person-table img {
    width: 147px;
}

.pat-livesearch {
    min-width: auto;
}

/* Hidden on the Danak site */
#portal-footer-wrapper {
    display: none;
}

#portal-membertools-wrapper {
    display: none;
}

#portal-globalnav > li.logout,
#portaltab-logout {
    display: none;
}

.userrole-authenticated #portal-globalnav > li.logout,
.userrole-authenticated #portaltab-logout {
    display: block;
}

#contentview-user_data-change-password {
    display: none !important;
}