/* ===================================================
 * @author (  Joomla4All / Arno Schumm  ) https://www.joomla4all.nl
 * @package Joomla
 *   @copyright (C) 2005-2016 Open Source Matters. All rights reserved.
 *   @license GNU/GPL, see LICENSE.php
 *     Joomla! is free software. This version may have been modified pursuant to the
 *     GNU General Public License, and as distributed it includes or is derivative
 *     of works licensed under the GNU General Public License or other free or open
 *     source software licenses. See COPYRIGHT.php for copyright notices and details.
 * @package Helix3 Framework ( JoomShaper )
 *   @author AGETHEMES http://www.agethemes.com
 *   @copyright (c) 2010-2015 AGETHEMES
 *   @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 * @package QuatuorA http://www.quatuora.nl
 *   @copyright QUATUORA (C) 2017-2021 - All rights reserved
 *   @modification date 05-03-2021
 *   @version 1.1
 *   @copyright (C) 2005-2016 Open Source Matters. All rights reserved.
 * ===================================================
 * SETTINGS
 *
 *   Colors:
 *   Geel ..... #FFB900 .. rgba(255, 185, 0, 1)
 *   Oranje ... #F25022 .. rgba(242, 80, 34, 1)
 *   Grijs .... #8E8E8E .. rgba(232, 232, 232, 1)
 *   Groen .... #7FBA00 .. rgba(127, 186, 0, 1)
 *   Blauw .... #00A3EF .. rgba(0, 163, 239, 1)
 *   LGgrijs .. #FAFBFD .. rgba(250, 251, 253, 1)
 *
 *   Grijs .... #E8E8E8 

 *   Text ..... #2C3E50 .. rgba(44, 62, 80,1.0) #Midnight Blue
 *   Background #ECF0F1 .. rgba(236, 240, 241,1.0) #CLOUDS
 *
 *  font-family: 'Rubik', sans-serif !important; 
 *  border: 1px solid #f3f3f3;
 *  

 *  Dark   #2c3e50
 *  Blauw  #2980b9
 *  Groen  #16a085
 *  Grijs  #bdc3c7
 *  Oranje #d35400 
 *
 * =================================================== */

/**** LOAD CUSTOM FONTS =================================================== */
/*@import url('https://cdn.jsdelivr.net/npm/simple-line-icons@2.4.1/css/simple-line-icons.css');            */

/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');          */
/*@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400&display=swap');      */
/*@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap'); */
/*@import url('https://fonts.googleapis.com/css2?family=Syncopate&display=swap');                           */
/*@import url('https://fonts.googleapis.com/css?family=Sintony&display=swap:400,700');                      */
/*@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');                              */
/*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:weight@300;600&display=swap');             */
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');                 */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

/*@import url('../css/font-awesome.min.css');                                                               */
/*@import url('//db.onlinewebfonts.com/c/69aa6e47feff717f5adbb879237f8bbc?family=simple-line-icons');       */
/*@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');                                  */
/*@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');               */
/*@import url('https://use.fontawesome.com/releases/v5.0.8/css/all.css');                                   */

/*ensure you set the url path to reference the directory containing the font files*/

/* Including one css file into other =================================================== */
/**** Print / Mobile Style / FONTS =================================================== */
@import "printstyle.css" print; /* Import the "printstyle.css" style sheet ONLY if the media is print */
@import "mobstyle.css" screen and (max-width: 768px); /* Import the "mobstyle.css" style sheet ONLY if the media is screen and the viewport is maximum 768 pixels */
@import "icomoon.css"; /* Using a string */

/**** Ultimate ============================================ */
/*@import "article-custom.css";             /* Using a string */
/*@import "login-custom.css";               /* Using a string */
/*@import "tooltip-custom.css";             /* Using a string */
/*@import "weblinks-custom.css";            /* Using a string */
/*@import "offcanvas-custom.css";           /* Using a string */
/*@import "megamenu-custom.css";            /* Using a string */
/*@import "scrolbar-custom.css";            /* Using a string */
/*@import "responsive-custom.css";          /* Using a string */

/**** Default ============================================= */
/*@import "default.css";                    /* Using a string */

/**** VirtueMart ========================================== */
/*@import "virtuemart-custom.css";          /* Using a string */
/*@import "vm-bs4-common-custom.css";       /* Using a string */
/*@import "vm-ltr-common-custom.css";       /* Using a string */
/*@import "vm-ltr-reviews-custom.css";      /* Using a string */
/*@import "vm-ltr-site-custom.css";         /* Using a string */
/*@import "vm-panels-custom.css";           /* Using a string */
/*@import "checkout-custom.css";            /* Using a string */
/*@import "vmsite-custom.css";              /* Using a string */
/*@import "vmsite_rtl-custom.css";          /* Using a string *


/**** K2 ==================================================== */
/*@import "k2-custom.css";                  /* Using a string */

/**** jDownloads ============================================ */
/*@import "jdownloads-buttons-custom.css";  /* Using a string */
/*@import "jdownloads-custom.css";          /* Using a string */
/*@import "jdownloads-fe-custom.css";       /* Using a string */
/*@import "jdownloads-fe-rtl-custom.css";   /* Using a string */
/*@import "jdownloads-w3-custom";           /* Using a string */

/**** Fonts ================================================= */
/*@import "fa-v4-shims.css";                /* Using a string */
/*@import "font-awesome.css";               /* Using a string */
/*@import "font-awesome.min.css";           /* Using a string */
/*@import "font-awesome-5-15.css";          /* Using a string */
/*@import url('../css/icomoon.css');
/*@import url('../css/icon-font.min.css');

/**** Customization =================================================== */
/*@import url("http://cloud.schumm.nl/portal/ultimate/templates/atfactory/k2-custom.css"); /* Using a url 
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);*/
/**** END *****/

/**** CSS-INDEX /**********************************************************************/

/* General settings for both light and dark modes */
:root {
    /* Dark blue color scheme */
    --blue-dark: #1a365d;
    --blue-medium: #2c5282;
    --blue-light: #4299e1;
    --blue-very-light: #ebf8ff;
    
    /* Font settings */
    --base-font-size: 12pt;
    --heading-font-size: 14pt;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Light mode colors */
[data-bs-theme=light] {
    --body-bg: #ffffff;
    --body-color: #222222;
    --link-color: var(--blue-medium);
    --link-hover-color: var(--blue-dark);
    --header-bg: var(--blue-dark);
    --header-color: #ffffff;
    --card-bg: #f8f9fa;
    --card-color: var(--body-color);
    --border-color: #dee2e6;
}

/* Dark mode colors */
[data-bs-theme=dark] {
    --body-bg: #121212;
    --body-color: #e0e0e0;
    --link-color: var(--blue-light);
    --link-hover-color: #63b3ed;
    --header-bg: #0d1b2a;
    --header-color: #ffffff;
    --card-bg: #1e1e1e;
    --card-color: #f0f0f0;
    --border-color: #444444;
}

/* Base styles */
body {
    font-family: var(--font-family);
    font-size: var(--base-font-size);
    line-height: 1.6;
    color: var(--body-color);
    background-color: var(--body-bg);
    transition: all 0.3s ease;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.item-title, .page-header, .article-title {
    font-size: var(--heading-font-size);
    color: var(--body-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Header */
.header {
    background-color: var(--header-bg);
    color: var(--header-color);
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Navigation */
.navbar {
    background-color: var(--header-bg);
}

.navbar-brand, .navbar-nav .nav-link {
    color: var(--header-color);
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
    color: var(--blue-light);
}

/* Cards */
.card {
    background-color: var(--card-bg);
    color: var(--card-color);
    border-color: var(--border-color);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: rgba(0, 0, 0, 0.05);
    border-bottom-color: var(--border-color);
}

/* Buttons */
.btn-primary {
    background-color: var(--blue-medium);
    border-color: var(--blue-dark);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
}

.btn-outline-primary {
    color: var(--blue-medium);
    border-color: var(--blue-medium);
}

.btn-outline-primary:hover {
    background-color: var(--blue-medium);
    color: white;
}

/* Forms */
.form-control {
    background-color: var(--body-bg);
    color: var(--body-color);
    border-color: var(--border-color);
}

.form-control:focus {
    background-color: var(--body-bg);
    color: var(--body-color);
    border-color: var(--blue-light);
    box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25);
}

/* Articles */
.article-body {
    padding: 1.5rem 0;
}

.item-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

/* Footer */
.footer {
    background-color: var(--header-bg);
    color: var(--header-color);
    padding: 2rem 0;
    margin-top: 2rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    :root {
        --base-font-size: 11pt;
        --heading-font-size: 13pt;
    }
}

@media (max-width: 767.98px) {
    :root {
        --base-font-size: 10pt;
        --heading-font-size: 12pt;
    }
}


/**** END ****/

/* Kleinere en compactere opmaak van blog-informatie */
.article-info, .article-info dd, .article-info dt {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-right: 10px;
}

.article-info dd:after {
    content: " • ";
    color: #999;
    padding: 0 5px;
}

.article-info dd:last-child:after {
    content: "";
}

/* Verwijder extra ruimte rondom de info */
.blog-item .article-info {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* Tags compact */
.tags {
    font-size: 0.7rem;
    color: #555;
    margin-top: 5px;
}