/* ============================================================
   USER.CSS — Hausstijl Patrick / nell.quest
   Cassiopeia Joomla 6 — Versie 1.0
   Primaire kleur: #017274 (Teal)
   Update-safe: dit bestand wordt nooit overschreven door Joomla
   ============================================================ */

/* --- 0. WEBFONT ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* --- 1. CSS VARIABELEN ------------------------------------ */
:root {
  /* Cassiopeia core overrides */
  --cassiopeia-color-primary:  #017274;
  --cassiopeia-color-link:     #017274;
  --cassiopeia-color-hover:    #014F50;

  /* Hausstijl palet */
  --hs-teal-dark:   #014F50;
  --hs-teal:        #017274;
  --hs-teal-light:  #029EA1;
  --hs-teal-tint:   #E8F5F5;
  --hs-amber:       #E8A020;
  --hs-amber-light: #FFF3DA;
  --hs-text:        #1C1C1C;
  --hs-grey:        #6B6B6B;
  --hs-offwhite:    #F5F5F5;
  --hs-white:       #FFFFFF;
  --hs-border:      #C5E5E5;

  /* Status */
  --hs-ok-bg:       #D6EFD8;
  --hs-ok-text:     #1A5C1E;
  --hs-warn-bg:     #FFF3DA;
  --hs-warn-text:   #7A4B00;
  --hs-err-bg:      #FDDEDE;
  --hs-err-text:    #7A1010;

  /* Typografie */
  --hs-font: 'Carlito', 'Calibri', Arial, sans-serif;
  --hs-lh:   1.4;
}

/* --- 2. BASIS TYPOGRAFIE ---------------------------------- */
body {
  font-family: var(--hs-font);
  font-size: 1rem;
  color: var(--hs-text);
  line-height: var(--hs-lh);
  background-color: var(--hs-white);
}

/* --- 3. TITELS -------------------------------------------- */
h1, .article-header h1 {
  font-family: var(--hs-font);
  font-size: 1.5rem;    /* ~18pt */
  font-weight: 700;
  color: var(--hs-teal);
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 2px solid var(--hs-teal);
  padding-bottom: 0.3rem;
}

h2 {
  font-family: var(--hs-font);
  font-size: 1.15rem;   /* ~13pt */
  font-weight: 700;
  color: var(--hs-text);
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}

h3 {
  font-family: var(--hs-font);
  font-size: 1rem;      /* ~11pt */
  font-weight: 700;
  color: var(--hs-grey);
  margin-top: 1.1rem;
  margin-bottom: 0.3rem;
}

p {
  font-size: 1rem;
  color: var(--hs-text);
  line-height: var(--hs-lh);
  margin-bottom: 0.8rem;
}

/* --- 4. LINKS --------------------------------------------- */
a {
  color: var(--hs-teal);
  text-decoration: none;
}
a:hover {
  color: var(--hs-teal-dark);
  text-decoration: underline;
}

/* --- 5. TABELLEN ------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hs-font);
  font-size: 1rem;
  margin: 1.2rem 0;
  border-top: 2px solid var(--hs-teal-dark);
}

th {
  background-color: var(--hs-teal);
  color: var(--hs-white);
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

td {
  padding: 0.45rem 0.75rem;
  color: var(--hs-text);
  border-bottom: 1px solid var(--hs-border);
}

tbody tr:nth-child(odd)  { background-color: var(--hs-white); }
tbody tr:nth-child(even) { background-color: var(--hs-teal-tint); }
tbody tr:hover           { background-color: #d0ecec; }

/* --- 6. CONTENT BLOKKEN (gebruik in artikelen) ------------ */
/*
   Gebruik zo in de Joomla editor (HTML-modus):
   <div class="hs-block"> ... </div>
   <div class="hs-attention"> ... </div>
   <div class="hs-ok"> ... </div>
*/

.hs-block {
  border-left: 4px solid var(--hs-teal);
  background: var(--hs-teal-tint);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}

.hs-attention {
  border-left: 4px solid var(--hs-amber);
  background: var(--hs-amber-light);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
  color: var(--hs-warn-text);
  font-weight: 700;
}

.hs-ok {
  border-left: 4px solid var(--hs-ok-text);
  background: var(--hs-ok-bg);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
  color: var(--hs-ok-text);
}

/* --- 7. TAGS & METADATA ----------------------------------- */
.article-info,
.article-info-term {
  font-size: 0.85rem;
  color: var(--hs-grey);
}

/* Teal tag-labels — Bootstrap 5 (.badge) + oudere (.label) */
.tag-list .label,
.tags-list .label,
.tag-list .badge,
.tags-list .badge,
.item-tags .badge,
.item-tags .label,
a.badge,
span.badge {
  background-color: var(--hs-teal) !important;
  color: var(--hs-white) !important;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--hs-font);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.tag-list .label:hover,
.tags-list .label:hover,
.tag-list .badge:hover,
.tags-list .badge:hover,
.item-tags .badge:hover,
a.badge:hover {
  background-color: var(--hs-teal-dark) !important;
  color: var(--hs-white) !important;
}

/* --- 8. NAVIGATIE ----------------------------------------- */
.navbar {
  background-color: var(--hs-teal-dark) !important;
}

.navbar-brand,
.navbar .nav-link {
  color: var(--hs-white) !important;
  font-family: var(--hs-font);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--hs-amber) !important;
}

/* --- 9. HEADER -------------------------------------------- */
#sp-header {
  border-bottom: 3px solid var(--hs-teal);
}

/* --- 10. FOOTER ------------------------------------------- */
#sp-footer {
  border-top: 1px solid var(--hs-border);
  background-color: var(--hs-offwhite);
  color: var(--hs-grey);
  font-size: 0.85rem;
  font-family: var(--hs-font);
}

#sp-footer a {
  color: var(--hs-teal);
}

/* --- 11. BREADCRUMB --------------------------------------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--hs-grey);
}

.breadcrumb-item.active {
  color: var(--hs-teal);
  font-weight: 700;
}

/* --- 12. RESPONSIVE --------------------------------------- */
@media (max-width: 768px) {
  h1              { font-size: 1.3rem; }
  h2              { font-size: 1.05rem; }
  table           { font-size: 0.9rem; }
  th, td          { padding: 0.35rem 0.5rem; }
  .hs-block,
  .hs-attention,
  .hs-ok          { padding: 0.6rem 0.75rem; }
}

/* ============================================================
   FASE 2 — ARTIKEL LAYOUT
   Stijl voor enkelvoudige artikelen én bloglijst-weergave
   ============================================================ */

/* --- 13. ARTIKEL CONTAINER -------------------------------- */
.com-content-article {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- 14. CATEGORIE BADGE (boven H1) ----------------------- */
.com-content-article .cat-link,
.com-content-article .category-name a,
.com-content-article .article-category a {
  display: inline-block;
  background-color: var(--hs-teal-tint);
  color: var(--hs-teal-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.com-content-article .cat-link:hover,
.com-content-article .category-name a:hover {
  background-color: var(--hs-teal);
  color: var(--hs-white);
}

/* --- 15. METADATA BALK ------------------------------------ */
.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--hs-grey);
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--hs-border);
  margin-bottom: 1.25rem;
}

.article-info dt { display: none; }
.article-info dd { margin: 0; }

.article-info dd::before        { content: '· '; color: var(--hs-border); }
.article-info dd:first-of-type::before { content: ''; }

/* --- 16. ARTIKEL BODY ------------------------------------- */
.com-content-article .item-text,
.com-content-article__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hs-text);
}

.com-content-article .item-text > p:first-child {
  font-size: 1.05rem;
  color: #2a2a2a;
}

.com-content-article blockquote {
  border-left: 3px solid var(--hs-grey);
  background: transparent;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  color: var(--hs-grey);
  font-style: italic;
}

.com-content-article hr {
  border: none;
  border-top: 2px solid var(--hs-teal-tint);
  margin: 1.5rem 0;
}

/* --- 17. LEES MEER KNOP ----------------------------------- */
.com-content-article .btn,
.com-content-article a.btn,
a.btn.btn-secondary {
  background-color: var(--hs-teal);
  border-color: var(--hs-teal);
  color: var(--hs-white) !important;
  font-family: var(--hs-font);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 3px;
  padding: 0.4rem 1.1rem;
  text-decoration: none;
}

.com-content-article .btn:hover,
a.btn.btn-secondary:hover {
  background-color: var(--hs-teal-dark);
  border-color: var(--hs-teal-dark);
}

/* --- 18. BLOGLIJST KAARTJES ------------------------------- */
.com-content-category-blog article,
.com-content-featured article {
  border-left: 4px solid var(--hs-teal);
  background: var(--hs-white);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 1px 4px rgba(1, 79, 80, 0.07);
  border-radius: 0 4px 4px 0;
  transition: border-left-color 0.2s ease, box-shadow 0.2s ease;
}

.com-content-category-blog article:hover,
.com-content-featured article:hover {
  border-left-color: var(--hs-amber);
  box-shadow: 0 3px 10px rgba(1, 114, 116, 0.13);
}

.com-content-category-blog article h2,
.com-content-featured article h2 {
  font-size: 1.2rem;
  color: var(--hs-teal);
  margin-top: 0.25rem;
}

.com-content-category-blog article h2 a,
.com-content-featured article h2 a {
  color: var(--hs-teal);
  text-decoration: none;
}

.com-content-category-blog article h2 a:hover,
.com-content-featured article h2 a:hover {
  color: var(--hs-teal-dark);
  text-decoration: underline;
}

/* --- 19. PAGINATIE ---------------------------------------- */
.pagination .page-link {
  color: var(--hs-teal);
  border-color: var(--hs-border);
  font-family: var(--hs-font);
}

.pagination .page-item.active .page-link {
  background-color: var(--hs-teal);
  border-color: var(--hs-teal);
  color: var(--hs-white);
}

.pagination .page-link:hover {
  background-color: var(--hs-teal-tint);
  color: var(--hs-teal-dark);
}

/* --- 20. AFBEELDINGEN IN ARTIKELEN ------------------------ */
.com-content-article img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.5rem 0 1rem;
}

.com-content-article figcaption {
  font-size: 0.82rem;
  color: var(--hs-grey);
  text-align: center;
  margin-top: 0.25rem;
}

/* --- 21. RESPONSIVE FASE 2 -------------------------------- */
@media (max-width: 768px) {
  .com-content-article { padding: 0 0.5rem; }
  .com-content-category-blog article,
  .com-content-featured article {
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
  }
  .article-info { gap: 0.4rem; }
}

/* ============================================================
   EINDE user.css — nell.quest / Hausstijl v2.0
   Fase 1: basis typografie, tabellen, navigatie, blokken
   Fase 2: artikel layout, bloglijst kaartjes, paginatie
   ============================================================ */

/* --- 22. TAG FIX — btn-info override (Joomla 6 blog/category) --- */
a.btn-info,
.btn.btn-info,
.btn.btn-sm.btn-info {
  background-color: var(--hs-teal) !important;
  border-color: var(--hs-teal) !important;
  color: var(--hs-white) !important;
}

a.btn-info:hover,
.btn.btn-info:hover {
  background-color: var(--hs-teal-dark) !important;
  border-color: var(--hs-teal-dark) !important;
  color: var(--hs-white) !important;
}

/* --- 23. DARK MODE (automatisch via systeeminstelling) ----- */
@media (prefers-color-scheme: dark) {
  :root {
    --hs-text:        #E8E8E8;
    --hs-grey:        #A0A0A0;
    --hs-offwhite:    #1C1C1C;
    --hs-white:       #121212;
    --hs-border:      #2A4A4A;
    --hs-teal-tint:   #0E2E2F;
    --hs-amber-light: #2A2210;
    --hs-ok-bg:       #142814;
    --hs-ok-text:     #7DCF82;
    --hs-warn-bg:     #2A2210;
    --hs-warn-text:   #E8A020;
    --hs-err-bg:      #2A1414;
    --hs-err-text:    #E07070;
  }

  body {
    background-color: #121212;
    color: var(--hs-text);
  }

  h1, .article-header h1 {
    color: var(--hs-teal-light);
    border-bottom-color: var(--hs-teal-light);
  }

  h2 { color: var(--hs-text); }
  h3 { color: var(--hs-grey); }

  a { color: var(--hs-teal-light); }
  a:hover { color: #4DC8CB; }

  /* Tabellen */
  table { border-top-color: var(--hs-teal-light); }
  th { background-color: var(--hs-teal-dark); }
  td { border-bottom-color: var(--hs-border); }
  tbody tr:nth-child(odd) { background-color: #121212; }
  tbody tr:nth-child(even) { background-color: var(--hs-teal-tint); }
  tbody tr:hover { background-color: #1A3A3B; }

  /* Bloglijst kaartjes */
  .com-content-category-blog article,
  .com-content-featured article {
    background: #1A1A1A;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  .com-content-category-blog article h2 a,
  .com-content-featured article h2 a {
    color: var(--hs-teal-light);
  }

  /* Blockquote */
  .com-content-article blockquote {
    border-left-color: var(--hs-grey);
    color: var(--hs-grey);
  }

  /* Eerste paragraaf */
  .com-content-article .item-text > p:first-child {
    color: #D0D0D0;
  }

  /* Metadata */
  .article-info { border-bottom-color: var(--hs-border); }

  /* Paginatie */
  .pagination .page-link {
    color: var(--hs-teal-light);
    border-color: var(--hs-border);
    background-color: #1A1A1A;
  }
  .pagination .page-item.active .page-link {
    background-color: var(--hs-teal);
    border-color: var(--hs-teal);
  }

  /* Footer */
  #sp-footer {
    background-color: #1A1A1A;
    border-top-color: var(--hs-border);
  }

  /* HR */
  .com-content-article hr {
    border-top-color: var(--hs-border);
  }
}