/*
 * Postgroei Nederland — Congressus Theme Override
 * Versie: 3.1
 *
 * Gebaseerd op de exacte kleuren van postgroei.nl (onegoal-style-inline-css + post-2172.css)
 *
 * Kleurenpalet:
 *   Donkergroen (primair) : #0e5642  → headings, footer, navigatie, structuur
 *   Oranje (accent/links) : #fb6834  → links, buttons, actieve elementen
 *   Oranje donker (hover) : #77252b  → hover states
 *   Achtergrond           : #efefed  → pagina-achtergrond
 *   Tekst                 : #353535  → bodytekst
 *
 * Dit bestand overschrijft alleen wat afwijkt van het standaard Congressus-thema.
 * Veronderstelt dat main-congressus.css al geladen is.
 */

/* ============================================================
   0. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');


/* ============================================================
   1. CSS VARIABELEN
   ============================================================ */
:root {
    --pg-green:        #0e5642;
    --pg-green-dark:   #0a3f30;
    --pg-green-light:  #e6f0ec;
    --pg-orange:       #fb6834;
    --pg-orange-dark:  #77252b;
    --pg-bg:           #efefed;
    --pg-text:         #353535;
}


/* ============================================================
   2. PAGINA-ACHTERGROND & BODYTEKST
   ============================================================ */
body {
    background-color: var(--pg-bg);
    color: var(--pg-text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   3. TYPOGRAFIE
   ============================================================ */

/* Bodytekst en algemeen */
body,
p,
li,
td,
th,
label,
input,
textarea,
select,
.form-control {
    font-family: "Plus Jakarta Sans", sans-serif;
}

/* h1 — Merriweather, geen kleuroverride */
h1, .h1 {
    font-family: "Merriweather", serif;
}

/* h2, h3, h4 — Merriweather + donkergroen */
h2, .h2,
h3, .h3,
h4, .h4 {
    font-family: "Merriweather", serif;
    color: var(--pg-green);
}

/* h5, h6 — Plus Jakarta Sans */
h5, .h5,
h6, .h6 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
}

/* Tooltip en popover */
.tooltip,
.popover {
    font-family: "Plus Jakarta Sans", sans-serif;
}


/* ============================================================
   4. LINKS
   ============================================================ */
a,
p a {
    color: var(--pg-orange);
}

a:hover,
a:focus,
p a:hover {
    color: var(--pg-orange-dark);
    text-decoration: underline;
}

a:active {
    color: var(--pg-orange-dark);
}


/* ============================================================
   5. BUTTONS
   ============================================================ */

/* Primaire button → Postgroei oranje */
.btn-primary {
    background-color: var(--pg-orange);
    border-color: var(--pg-orange);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--pg-orange-dark);
    border-color: var(--pg-orange-dark);
    color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--pg-orange-dark);
    border-color: var(--pg-orange-dark);
    color: #fff;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
    background-color: var(--pg-orange);
    border-color: var(--pg-orange);
    opacity: 0.65;
}

.btn-primary .badge {
    color: var(--pg-orange);
    background-color: #fff;
}

/* Link-stijl button */
.btn-link {
    color: var(--pg-orange);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--pg-orange-dark);
}

/* Submit buttons */
input[type="submit"],
button[type="submit"] {
    background-color: var(--pg-orange);
    border-color: var(--pg-orange);
    color: #fff;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--pg-orange-dark);
    border-color: var(--pg-orange-dark);
    color: #fff;
}


/* ============================================================
   6. NAVIGATIE
   ============================================================ */

/* Algemeen menu */
.sf-menu {
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Hoofdmenu-items */
.sf-menu > li {
    border: none;
    font-size: 19px !important;
    font-weight: 400 !important;
    color: var(--pg-green) !important;
}

/* Link in hoofdmenu */
.sf-menu > li > a {
    font-weight: 400 !important;
    padding: .7em 1.5em;
}

/* Dropdown: border boven en onder */
.sf-menu > li > ul {
    border-top: 2px solid var(--pg-green);
    border-bottom: 2px solid #E5E7EB;
}

/* Dropdown schaduw */
.sf-menu ul {
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

/* Dropdown rijen */
.sf-menu ul li {
    background-color: #fff;
    border-bottom: 1px solid #E5E7EB;
}

.sf-menu ul li:hover,
.sf-menu ul li:focus {
    background-color: #F3F4F6;
}

/* Alle menu-links */
.sf-menu a {
    color: var(--pg-green);
    padding: .5em 1em;
}

.sf-menu a:active {
    color: var(--pg-orange-dark);
}

.sf-menu a:hover,
.sf-menu a:focus {
    text-decoration: none;
    color: var(--pg-orange);
}

/* Balk naast actief menu-item */
.sf-menu > li {
    border-left: 1px solid transparent;
}

.sf-menu > li.active,
.sf-menu > li.path {
    border-left-color: var(--pg-green);
}

.sf-menu > li:hover,
.sf-menu > li:focus {
    border-left-color: var(--pg-orange);
}
.sf-menu.sf-arrows .sf-with-ul {
    padding-right: 2.5em;
}

.sf-menu.sf-arrows .sf-with-ul:after {
    border-top-color: #6B7280;
}

.sf-menu.sf-arrows ul .sf-with-ul:after {
    border-color: transparent;
    border-left-color: #6B7280;
}

/* Transparante navbar achtergrond */
.sf-menu.sf-navbar,
.sf-menu.sf-navbar:before,
.sf-menu.sf-navbar li {
    background: transparent;
}

/* Nav pills actief */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--pg-green);
    color: #fff;
}

/* Nav open state border */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    border-color: var(--pg-orange);
}

/* Submenu actieve link */
.aside ul#submenu li.active > a,
.aside ul.submenu li.active > a {
    background-color: var(--pg-green-light);
    color: var(--pg-green);
}

/* Navbar toggle (hamburger) */
.navbar-default .navbar-toggle {
    border-color: var(--pg-green);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--pg-green-light);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--pg-green);
}


/* ============================================================
   7. DROPDOWN MENU
   ============================================================ */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--pg-green);
    color: #fff;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--pg-orange-dark);
}


/* ============================================================
   8. HEADER
   ============================================================ */
header {
    background-color: #fff;
}


/* ============================================================
   9. FOOTER
   ============================================================ */
footer,
#footer {
    background-color: var(--pg-green);
    color: #fff;
}

footer a,
#footer a {
    color: var(--pg-orange);
}

footer a:hover,
footer a:focus,
#footer a:hover {
    color: var(--pg-orange-dark);
}

footer .headline h2,
footer .headline h3,
footer .headline h4,
footer .headline h5,
footer .headline h6 {
    color: #fff;
    border: none;
}

section#copyright a {
    color: var(--pg-orange);
}

section#copyright a:hover {
    color: var(--pg-orange-dark);
}


/* ============================================================
   10. CONTENT HEADER (oranje titelbalk)
   ============================================================ */
section#content .content-header {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    height: 240px;
    background-color: var(--pg-orange);
    margin-bottom: 0;
}

section#content .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section#content .content-header.content-header-background {
    position: relative;
    height: 240px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section#content .content-header.content-header-background:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    background: rgba(0,0,0,0.15);
}

section#content .content-header.content-header-background .breadcrumb,
section#content .content-header.content-header-background h2,
section#content .content-header.content-header-background h3 {
    position: relative;
    z-index: 1;
    float: none !important;
    color: #fff;
}

section#content .content-header.content-header-background h2 {
    font-size: 46px;
}

section#content .content-header.content-header-background h3 {
    font-size: 40px;
}

section#content .content-header.content-header-background h2,
section#content .content-header.content-header-background h3 {
    padding-top: 0;
}

section#content .content-header.content-header-background .breadcrumb {
    padding-left: 0;
    padding-top: 60px;
    line-height: 25px;
}

section#content .content-header.content-header-background .breadcrumb > li + li:before {
    color: #F3F4F6;
}

section#content .content-header.content-header-background .breadcrumb > .active {
    color: #E5E7EB;
}

section#content .content-header.content-header-background .breadcrumb a {
    color: inherit;
    text-decoration: none;
}

section#content .content-header.content-header-background .breadcrumb a:hover,
section#content .content-header.content-header-background .breadcrumb a:focus {
    color: inherit;
    text-decoration: underline;
}

section#content .content-header .breadcrumb,
section#content .content-header h2 {
    background-color: transparent;
    line-height: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 0;
}

section#content .content-header h2 {
    text-align: center;
    color: #fff;
    font-size: 38px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section#content .content-header .breadcrumb {
    display: none !important;
}


/* ============================================================
   11. CONTENT HEADLINES / STREEP ONDER HEADING
   ============================================================ */
section#content .container .headline h2,
section#content .container .headline h3,
section#content .container .headline h4,
section#content .container .headline h5,
section#content .container .headline h6 {
    border-bottom-color: var(--pg-green);
}


/* ============================================================
   11. FORMULIEREN
   ============================================================ */
.form-control:focus {
    border-color: var(--pg-orange);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(251, 104, 52, 0.4);
}

.has-success .form-control {
    border-color: var(--pg-green);
}

.has-success .form-control:focus {
    border-color: var(--pg-green);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(14, 86, 66, 0.4);
}

.has-success .input-group-addon {
    border-color: var(--pg-green);
    color: var(--pg-green);
}

.has-success .form-control-feedback,
.has-success .control-label,
.has-success .help-block {
    color: var(--pg-green);
}


/* ============================================================
   12. LABELS, BADGES & PAGINERING
   ============================================================ */
.label-primary {
    background-color: var(--pg-orange);
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: var(--pg-orange-dark);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--pg-green);
    border-color: var(--pg-green);
    color: #fff;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: var(--pg-orange-dark);
}


/* ============================================================
   13. PANELEN / CARDS
   ============================================================ */
.panel-primary {
    border-color: var(--pg-green);
}

.panel-primary > .panel-heading {
    background-color: var(--pg-green);
    border-color: var(--pg-green);
    color: #fff;
}


/* ============================================================
   14. KLEURKLASSEN
   ============================================================ */
.bg-primary {
    background-color: var(--pg-green);
}

a.bg-primary:hover,
a.bg-primary:focus {
    background-color: var(--pg-green-dark);
}

.text-primary {
    color: var(--pg-green);
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--pg-green-dark);
}


/* ============================================================
   15. LIST GROUP
   ============================================================ */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--pg-green);
    border-color: var(--pg-green);
    color: #fff;
}


/* ============================================================
   16. PROGRESS BAR
   ============================================================ */
.progress-bar {
    background-color: var(--pg-green);
}


/* ============================================================
   17. TAGS
   ============================================================ */
.tags a:hover {
    background-color: var(--pg-orange);
    color: #fff;
}


/* ============================================================
   18. SOCIAL ICONS
   ============================================================ */
.social-icons li a {
    background-color: var(--pg-green);
}

.social-icons li a:hover {
    background-color: var(--pg-orange);
}


/* ============================================================
   19. META-LIST ICONEN
   ============================================================ */
.meta-list span.fa {
    color: var(--pg-orange);
}


/* ============================================================
   20. STAPPEN (wizard)
   ============================================================ */
.steps li.active .badge {
    background-color: var(--pg-orange);
}

.steps a:hover .badge.badge-xl {
    background-color: var(--pg-orange);
}


/* ============================================================
   21. TYPEAHEAD HOVER
   ============================================================ */
.tt-suggestion.tt-is-under-cursor,
.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    background-color: var(--pg-orange);
    color: #fff;
}