/* HL CSS Framework */

/* Variables */
:root {

    /* Brand Colors */
    --primary-color: #ff7a00;
    --secondary-color: #2c2738;

    /* Backgrounds */
    --body-bg: #f2f3f5;
    --header-bg: #ffffff;
    --main-nav-bg: #ff7a00;
    --secondary-nav-bg: #ffffff;
    --dark-area-bg: #2d3748;
    --area-bg: #edf2f7;
    --light-area-bg: #fafafb;
    --reset-area-bg: #ffffff;
    --default-profile-header-bg: #353c41;
    --navigation-tooltip-bg: #ff7a00;
    --main-footer-bg: #2c2738;
    --slider-dots-bg: #ff7a00;
    --first-entry-post-bg: #ffffff;
    --first-entry-post-toggle: #fafafb;
    --topic-post-container: #ffffff;
    --topic-post-container-secondary: #fafafb;
    --seconday-btn-color: #ff7a00;


    /* Toggle read more button */
    --first-entry-post-toggle-hover: #ffffff;

    /* Text Colors */
    --header-text: #2c2738;
    --main-nav-text: #ffffff;
    --secondary-nav-text: #353c41;
    --tags-text: #9c4221;
    --text-default: #2c2738;
    --text-meta-light-bg: #9b97a8;
    --text-meta-dark-bg: #B7B4C0;
    --text-numbers: #756F86;

    /* Selected State */
    --selected-bg: #ebf4f9;
    --selected-border: #177ec9;

    /* Tags */
    --tags-bg: #fff4df;

    /* Prefix */
    --prefix-color: #177ec9;

    /* Widget Title Bar */
    --widget-title-bar-bg: #ffffff;
    --widget-title-bar-text: #2c2738;

    /* Links */
    --link-default: #ff7a05;
    --link-light-bg: #7094b6;
    --link-dark-bg: #9bb7e1;

    /* Buttons */
    --btn-primary-bg: #ff7a00;
    --btn-primary-text: #ffffff;

    --btn-alternate-bg: #769cbf;
    --btn-alternate-text: #ffffff;

    --btn-normal-bg: #769cbf;
    --btn-normal-text: #ffffff;

    --btn-important-bg: #ff7a00;
    --btn-important-text: #ffffff;

    --btn-light-bg: #e8f2fa;
    --btn-light-text: #0e4c79;

    --btn-very-light-bg: #ffffff;
    --btn-very-light-text: #0e4c79;

    --button-follow-bg: #E9F2F8;
    --button-follow-text: #0e4c79;

    /* Button Bar & Pagination */
    --button-bar-bg: #ffffff;
    --pagination-active: #7c9cbf;
    --pagination-button-bg: #7c9cbf;
    --pagination-button-text: #ffffff;

    --link-button-color: #9792a3;

    /* Flares and Styles */
    --flare-ama-bg: #E9DDF4;
    --flare-ama-text: #6D1AAC;

    --flare-overheid-bg: #DDEFF8;
    --flare-overheid-text: #01689b;

    --flare-memoriam-bg: #444444;
    --flare-memoriam-text: #dddddd;

    /* Other UI Elements */

    --divider-blue-bg: rgba(124, 156, 191, 0.25);

    --success-color: #6daa6f;
    --danger-color: #c53030;
    --border-color: #ddd;
    --font-xs: 0.7rem;
    --font-sm: 0.875rem;
    --font-base: 1.25rem;
    --font-lg: 1.5rem;
    --font-xl: 1.75rem;
    --font-xxl: 2.25rem;
    --border-radius: 10px;
    --border-radius-widget: 10px;
    --border-radius-container: 20px;
    --border-radius-full: 9999px;
    --i-font-family: 'IBM Plex Sans';
    --line-height-sm: 1.25;
    --line-height-base: 1.5;
    --line-height-lg: 1.25;
    --line-height-xl: 1.25;

    --element-boxshadow: 0px 4px 10px -1px rgb(45 55 72 / 10%);

}

:root[data-ips-scheme="dark"] {
    /* Dark Mode Overrides */
    --primary-color: #2C2738;

    /* Backgrounds */
    --navigation-tooltip-bg: #5b5174;
    --main-footer-bg: #1B1822;
    --slider-dots-bg: #ff7a00;
    --first-entry-post-bg: #2c2738;
    --first-entry-post-toggle: #413953;
    --topic-post-container: #2c2738;
    --topic-post-container-secondary: #252130;
    --seconday-btn-color: #2c2738;
    --secondary-nav-bg: #2c2738;

    /* Buttons */
    --btn-light-text: #7c9cbf;
    --btn-very-light-text: #7c9cbf;
    --button-follow-text: #7c9cbf;

    /* Other UI Elements */

    --border-color: #413953;

    /* Toggle read more button */
    --first-entry-post-toggle-hover: #534969;
}

/* Reset */
.hl-reset {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Typography */
.hl-text-sm {
    font-size: var(--font-sm);
    line-height: var(--line-height-sm);
}

.hl-text-base {
    font-size: var(--font-base);
    line-height: var(--line-height-base);
}

.hl-text-lg {
    font-size: var(--font-lg);
    line-height: var(--line-height-lg);
}

.hl-text-xl {
    font-size: var(--font-xl);
    line-height: var(--line-height-xl);
}

.hl-text-bold {
    font-weight: bold;
}

.hl-text-center {
    text-align: center;
}

.hl-text-left {
    text-align: left;
}

.hl-text-right {
    text-align: right;
}

/* Colors */
.hl-text-primary {
    color: var(--primary-color);
}

.hl-text-secondary {
    color: var(--secondary-color);
}

.hl-text-success {
    color: var(--success-color);
}

.hl-text-danger {
    color: var(--danger-color);
}

.hl-bg-primary {
    background-color: var(--primary-color);
}

.hl-bg-secondary {
    background-color: var(--secondary-color);
}

.hl-bg-success {
    background-color: var(--success-color);
}

.hl-bg-danger {
    background-color: var(--danger-color);
}

/* Gradients */
.hl-gradient-primary {
    background: linear-gradient(90deg, rgba(255, 122, 0, 1) 0%, rgba(255, 122, 0, 1) 75%, rgba(227, 108, 0, 1) 100%, rgba(227, 108, 0, 1) 100%);
}

/* Spacing */

/* Margin - All Directions */
.hl-m-1 {
    margin: 0.25rem;
}

.hl-m-2 {
    margin: 0.5rem;
}

.hl-m-3 {
    margin: 1rem;
}

.hl-m-4 {
    margin: 1.5rem;
}

.hl-m-5 {
    margin: 2rem;
}

.hl-m-6 {
    margin: 3rem;
}

/* Margin - Individual Sides */
.hl-mt-1 {
    margin-top: 0.25rem;
}

.hl-mt-2 {
    margin-top: 0.5rem;
}

.hl-mt-3 {
    margin-top: 1rem;
}

.hl-mt-4 {
    margin-top: 1.5rem;
}

.hl-mt-5 {
    margin-top: 2rem;
}

.hl-mt-6 {
    margin-top: 3rem;
}

.hl-mb-1 {
    margin-bottom: 0.25rem;
}

.hl-mb-2 {
    margin-bottom: 0.5rem;
}

.hl-mb-3 {
    margin-bottom: 1rem;
}

.hl-mb-4 {
    margin-bottom: 1.5rem;
}

.hl-mb-5 {
    margin-bottom: 2rem;
}

.hl-mb-6 {
    margin-bottom: 3rem;
}

.hl-ml-1 {
    margin-left: 0.25rem;
}

.hl-ml-2 {
    margin-left: 0.5rem;
}

.hl-ml-3 {
    margin-left: 1rem;
}

.hl-ml-4 {
    margin-left: 1.5rem;
}

.hl-ml-5 {
    margin-left: 2rem;
}

.hl-ml-6 {
    margin-left: 3rem;
}

.hl-mr-1 {
    margin-right: 0.25rem;
}

.hl-mr-2 {
    margin-right: 0.5rem;
}

.hl-mr-3 {
    margin-right: 1rem;
}

.hl-mr-4 {
    margin-right: 1.5rem;
}

.hl-mr-5 {
    margin-right: 2rem;
}

.hl-mr-6 {
    margin-right: 3rem;
}

/* Margin - X (Left & Right) */
.hl-mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.hl-mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.hl-mx-3 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.hl-mx-4 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.hl-mx-5 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.hl-mx-6 {
    margin-left: 3rem;
    margin-right: 3rem;
}

/* Margin - Y (Top & Bottom) */
.hl-my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.hl-my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.hl-my-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.hl-my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.hl-my-5 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.hl-my-6 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Padding - All Directions */
.hl-p-1 {
    padding: 0.25rem;
}

.hl-p-2 {
    padding: 0.5rem;
}

.hl-p-3 {
    padding: 1rem;
}

.hl-p-4 {
    padding: 1.5rem;
}

.hl-p-5 {
    padding: 2rem;
}

.hl-p-6 {
    padding: 3rem;
}

/* Padding - Individual Sides */
.hl-pt-1 {
    padding-top: 0.25rem;
}

.hl-pt-2 {
    padding-top: 0.5rem;
}

.hl-pt-3 {
    padding-top: 1rem;
}

.hl-pt-4 {
    padding-top: 1.5rem;
}

.hl-pt-5 {
    padding-top: 2rem;
}

.hl-pt-6 {
    padding-top: 3rem;
}

.hl-pb-1 {
    padding-bottom: 0.25rem;
}

.hl-pb-2 {
    padding-bottom: 0.5rem;
}

.hl-pb-3 {
    padding-bottom: 1rem;
}

.hl-pb-4 {
    padding-bottom: 1.5rem;
}

.hl-pb-5 {
    padding-bottom: 2rem;
}

.hl-pb-6 {
    padding-bottom: 3rem;
}

.hl-pl-1 {
    padding-left: 0.25rem;
}

.hl-pl-2 {
    padding-left: 0.5rem;
}

.hl-pl-3 {
    padding-left: 1rem;
}

.hl-pl-4 {
    padding-left: 1.5rem;
}

.hl-pl-5 {
    padding-left: 2rem;
}

.hl-pl-6 {
    padding-left: 3rem;
}

.hl-pr-1 {
    padding-right: 0.25rem;
}

.hl-pr-2 {
    padding-right: 0.5rem;
}

.hl-pr-3 {
    padding-right: 1rem;
}

.hl-pr-4 {
    padding-right: 1.5rem;
}

.hl-pr-5 {
    padding-right: 2rem;
}

.hl-pr-6 {
    padding-right: 3rem;
}

/* Padding - X (Left & Right) */
.hl-px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.hl-px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.hl-px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.hl-px-4 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.hl-px-5 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.hl-px-6 {
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Padding - Y (Top & Bottom) */
.hl-py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.hl-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.hl-py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.hl-py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.hl-py-5 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hl-py-6 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Gap */
.hl-g-1 {
    gap: 0.25rem;
}

.hl-g-2 {
    gap: 0.5rem;
}

.hl-g-3 {
    gap: 1rem;
}

.hl-g-4 {
    gap: 1.5rem;
}

.hl-g-5 {
    gap: 2rem;
}

.hl-g-6 {
    gap: 3rem;
}

/* Row Gap */
.hl-rg-1 {
    row-gap: 0.25rem;
}

.hl-rg-2 {
    row-gap: 0.5rem;
}

.hl-rg-3 {
    row-gap: 1rem;
}

.hl-rg-4 {
    row-gap: 1.5rem;
}

.hl-rg-5 {
    row-gap: 2rem;
}

.hl-rg-6 {
    row-gap: 3rem;
}

/* Column Gap */
.hl-cg-1 {
    column-gap: 0.25rem;
}

.hl-cg-2 {
    column-gap: 0.5rem;
}

.hl-cg-3 {
    column-gap: 1rem;
}

.hl-cg-4 {
    column-gap: 1.5rem;
}

.hl-cg-5 {
    column-gap: 2rem;
}

.hl-cg-6 {
    column-gap: 3rem;
}


/* Flexbox */

/* Flex Display */
.hl-flex {
    display: flex;
}

.hl-inline-flex {
    display: inline-flex;
}

/* Flex Direction */
.hl-flex-row {
    flex-direction: row;
}

.hl-flex-row-reverse {
    flex-direction: row-reverse;
}

.hl-flex-col {
    flex-direction: column;
}

.hl-flex-col-reverse {
    flex-direction: column-reverse;
}

/* Justify Content */
.hl-justify-start {
    justify-content: flex-start;
}

.hl-justify-end {
    justify-content: flex-end;
}

.hl-justify-center {
    justify-content: center;
}

.hl-justify-between {
    justify-content: space-between;
}

.hl-justify-around {
    justify-content: space-around;
}

.hl-justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.hl-items-start {
    align-items: flex-start;
}

.hl-items-end {
    align-items: flex-end;
}

.hl-items-center {
    align-items: center;
}

.hl-items-baseline {
    align-items: baseline;
}

.hl-items-stretch {
    align-items: stretch;
}

/* Align Self */
.hl-self-auto {
    align-self: auto;
}

.hl-self-start {
    align-self: flex-start;
}

.hl-self-end {
    align-self: flex-end;
}

.hl-self-center {
    align-self: center;
}

.hl-self-stretch {
    align-self: stretch;
}

/* Flex Wrap */
.hl-flex-wrap {
    flex-wrap: wrap;
}

.hl-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.hl-flex-nowrap {
    flex-wrap: nowrap;
}

/* Align Content */
.hl-content-start {
    align-content: flex-start;
}

.hl-content-end {
    align-content: flex-end;
}

.hl-content-center {
    align-content: center;
}

.hl-content-between {
    align-content: space-between;
}

.hl-content-around {
    align-content: space-around;
}

.hl-content-evenly {
    align-content: space-evenly;
}

/* Flex Grow & Shrink */
.hl-flex-grow {
    flex-grow: 1;
}

.hl-flex-grow-0 {
    flex-grow: 0;
}

.hl-flex-shrink {
    flex-shrink: 1;
}

.hl-flex-shrink-0 {
    flex-shrink: 0;
}

/* Flex Basis */
.hl-basis-auto {
    flex-basis: auto;
}

.hl-basis-full {
    flex-basis: 100%;
}

.hl-basis-1-2 {
    flex-basis: 50%;
}

.hl-basis-1-3 {
    flex-basis: 33.333%;
}

.hl-basis-2-3 {
    flex-basis: 66.666%;
}

.hl-basis-1-4 {
    flex-basis: 25%;
}

.hl-basis-3-4 {
    flex-basis: 75%;
}


/* Grid */

/* Grid Display */
.hl-grid {
    display: grid;
}

.hl-inline-grid {
    display: inline-grid;
}

/* Grid Template Columns */
.hl-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.hl-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.hl-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.hl-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.hl-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.hl-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Grid Template Rows */
.hl-grid-rows-1 {
    grid-template-rows: repeat(1, 1fr);
}

.hl-grid-rows-2 {
    grid-template-rows: repeat(2, 1fr);
}

.hl-grid-rows-3 {
    grid-template-rows: repeat(3, 1fr);
}

.hl-grid-rows-4 {
    grid-template-rows: repeat(4, 1fr);
}

.hl-grid-rows-5 {
    grid-template-rows: repeat(5, 1fr);
}

.hl-grid-rows-6 {
    grid-template-rows: repeat(6, 1fr);
}

/* Grid Column Span */
.hl-col-span-1 {
    grid-column: span 1 / span 1;
}

.hl-col-span-2 {
    grid-column: span 2 / span 2;
}

.hl-col-span-3 {
    grid-column: span 3 / span 3;
}

.hl-col-span-4 {
    grid-column: span 4 / span 4;
}

.hl-col-span-full {
    grid-column: 1 / -1;
}

/* Grid Row Span */
.hl-row-span-1 {
    grid-row: span 1 / span 1;
}

.hl-row-span-2 {
    grid-row: span 2 / span 2;
}

.hl-row-span-3 {
    grid-row: span 3 / span 3;
}

.hl-row-span-4 {
    grid-row: span 4 / span 4;
}

.hl-row-span-full {
    grid-row: 1 / -1;
}

/* Grid Auto Flow */
.hl-grid-flow-row {
    grid-auto-flow: row;
}

.hl-grid-flow-col {
    grid-auto-flow: column;
}

.hl-grid-flow-dense {
    grid-auto-flow: dense;
}

/* Grid Auto Columns */
.hl-auto-cols-auto {
    grid-auto-columns: auto;
}

.hl-auto-cols-min {
    grid-auto-columns: min-content;
}

.hl-auto-cols-max {
    grid-auto-columns: max-content;
}

.hl-auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
}

/* Grid Auto Rows */
.hl-auto-rows-auto {
    grid-auto-rows: auto;
}

.hl-auto-rows-min {
    grid-auto-rows: min-content;
}

.hl-auto-rows-max {
    grid-auto-rows: max-content;
}

.hl-auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
}

/* Justify Items (Horizontal Alignment) */
.hl-justify-items-start {
    justify-items: start;
}

.hl-justify-items-end {
    justify-items: end;
}

.hl-justify-items-center {
    justify-items: center;
}

.hl-justify-items-stretch {
    justify-items: stretch;
}

/* Align Items (Vertical Alignment) */
.hl-align-items-start {
    align-items: start;
}

.hl-align-items-end {
    align-items: end;
}

.hl-align-items-center {
    align-items: center;
}

.hl-align-items-stretch {
    align-items: stretch;
}

/* Justify Content */
.hl-justify-content-start {
    justify-content: start;
}

.hl-justify-content-end {
    justify-content: end;
}

.hl-justify-content-center {
    justify-content: center;
}

.hl-justify-content-between {
    justify-content: space-between;
}

.hl-justify-content-around {
    justify-content: space-around;
}

.hl-justify-content-evenly {
    justify-content: space-evenly;
}

/* Align Content */
.hl-align-content-start {
    align-content: start;
}

.hl-align-content-end {
    align-content: end;
}

.hl-align-content-center {
    align-content: center;
}

.hl-align-content-between {
    align-content: space-between;
}

.hl-align-content-around {
    align-content: space-around;
}

.hl-align-content-evenly {
    align-content: space-evenly;
}


/* Buttons */
.hl-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: bold;
    font-size: var(--font-sm);
}

.hl-btn-primary {
    background-color: var(--btn-primary-bg);
    color: white;
}

.hl-btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.hl-btn-follow {
    background-color: var(--button-follow-bg);
    color: var(--button-follow-text);
}

.hl-btn-view {
    background-color: #fff;
    color: var(--secondary-color);
}

.hl-pagination-active {
    background: var(--pagination-button-bg);
    color: var(--pagination-button-text);
    ;
}

.hl-btn-success {
    background-color: var(--success-color);
    color: white;
}

.hl-btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.hl-btn-cancel {
    color: var(--danger-color);
}

/* Borders & Radius */
.hl-border {
    border: 1px solid var(--border-color);
}

.hl-border-none {
    border: none;
}

.hl-rounded {
    border-radius: var(--border-radius);
}

.hl-rounded-full {
    border-radius: var(--border-radius-full);
}

/* Display */
.hl-block {
    display: block;
}

.hl-inline {
    display: inline;
}

.hl-hidden {
    display: none;
}

/* Width & Height */
.hl-w-full {
    width: 100%;
}

.hl-h-full {
    height: 100%;
}

/* widgets */

.hl-main-container {
    border-radius: var(--border-radius-container);
    box-shadow: var(--element-boxshadow);
    background-color: var(--topic-post-container);
    padding-bottom: 5px;
}

.hl-widget-secondary {
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-widget);
    color: #FFF;
}

.hl-widget-secondary .hl-slide-has-image img {
    border-top-right-radius: var(--border-radius-widget);
    border-top-left-radius: var(--border-radius-widget);
}

.hl-widget-secondary a {
    color: var(--link-dark-bg);
}

.hl-blue-container {
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    height: 100%;
}

.hl-widget-padding {
    padding: 1.5em;
}

.hl-widget-padding-inline {
    padding-inline: 1.5em;
}

.hl-widget-padding-block {
    padding-inline: 1.5em;
}

.hl-widget-padding-top {
    padding-top: 1.5em;
}

.hl-widget-padding-bottom {
    padding-bottom: 1.5em;
}

.hl-widget-padding-left {
    padding-left: 1.5em;
}

.hl-widget-padding-right {
    padding-right: 1.5em;
}

/* Responsive */
@media (max-width: 576px) {

    /* Mobile */
    .hl-mobile-hidden {
        display: none;
    }

    .hl-mobile-block {
        display: block;
    }

    .hl-text-sm {
        font-size: calc(var(--font-sm) - 0.125rem);
    }
}

@media (min-width: 577px) and (max-width: 768px) {

    /* Tablet */
    .hl-tablet-hidden {
        display: none;
    }

    .hl-tablet-block {
        display: block;
    }

    .hl-text-base {
        font-size: calc(var(--font-base) - 0.1rem);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    /* Small Screen */
    .hl-small-hidden {
        display: none;
    }

    .hl-small-block {
        display: block;
    }

    .hl-text-lg {
        font-size: calc(var(--font-lg) - 0.15rem);
    }
}

@media (min-width: 1025px) {

    /* Widescreen */
    .hl-wide-hidden {
        display: none;
    }

    .hl-wide-block {
        display: block;
    }

    .hl-text-xl {
        font-size: var(--font-xxl);
    }
}

@media (max-width:768px) {
    .hl-main-container {
        background-color: transparent;
        padding-bottom: unset;
        box-shadow: unset;
    }

    .hl-main-container article {
        margin: unset;
    }
}