/* template changes voor TAG dubbele display:

aanpassen van
JROOT/templates/ja_spark/html/com_content/article/default.php
JROOT/templates/ja_spark/html/com_content/article/layout-1.php

zoek : <?php echo $this->item->event->afterDisplayContent; ?>
vervang php code door commented php code
Opgepast : laatse stuk ?> staat / * en * / rond. Dit verwijdereen (is om hier geen miserie te hebben)
<?php /*
if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) :
  $this->item->tagLayout = new FileLayout('joomla.content.tags');
  echo $this->item->tagLayout->render($this->item->tags->itemTags);
endif;
*/ /*?>*/

/* other template changes (no impact on version)

templates/ja_spark/local/etc/layout/default.json (layout-nesting section-2/8/3 + mobiele volgorde-fix)
templates/ja_spark/local/css/custom.css (kader-styling section-8/3)
templates/ja_spark/local/etc/global.json (login-return-fix)
*/


.container-xxl,
.container {
    max-width: 1408px;
}
body {
    background:linear-gradient(180deg,#fff 0%,#f7f3ed 100%);
    line-height: 1.58;
}

.bg-shape {
  background-image: none;
}

.navbar-brand .logo-img {
    max-height: 90px;
    width: auto;
}

.t4-palette-elfri_home_page_top_bar {
	font-size: 14px;
}
search {
  display: block;
  padding: 1.5rem;
  position: relative;
}

.t4-col.section-3.col-sm.col-md-4 {
  background:radial-gradient(circle at 92% 86%,rgba(255,255,255,.9) 0 90px,transparent 92px),linear-gradient(135deg,#fbf8f3,#f1ebe2);
  padding: 24px 24px 0px 24px;
}

.svg-light,
.svg-dark {
	fill: var(--color-white);
}

#t4-section-3,
#t4-section-4 {
  padding-top: 1.5rem !important;
}

.arc3c-icon{
    font-size:34px;
    color: var(--color-secondary);
    margin-bottom:16px;
    display:block;
}

 .arc3c_searchintro_landing{
    padding-top: 0;
    padding-bottom: 0;
}

.link{
    display:inline-flex;
    margin-top:28px;
    color: var(--color-primary);
    font-weight:700;
    font-size:14px;
    gap:8px;
    align-items:center;
}
.link::after{
    content:"→";
    color:#A87949;
    font-size:20px;
}
.arc3c-link-wrapper {
    margin-top: auto;
}

/* custom field  modifications */

.section-2 .mod-customfield__label {
    align-self: flex-start;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
}
.section-2 .mod-customfield {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--t4-border-color, var(--gray-300));
}
/* was: .section-2 .t4-module:last-child .mod-customfield { ... } */
.section-2 .mod-customfield:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.section-2 .mod-customfield:first-child {
    border-top: 1px solid var(--t4-border-color, var(--gray-300));
    padding-top: 12px;
}
/* sidebar positions */

.sidebar-l .mod-customfield,
.sidebar-r .mod-customfield,
.section-3 .mod-customfield,
.section-8 .mod-customfield {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--t4-border-color, var(--gray-300));
}
.sidebar-l .t4-module:last-child .mod-customfield,
.sidebar-r .t4-module:last-child .mod-customfield,
.section-3 .t4-module:last-child .mod-customfield,
.section-8 .t4-module:last-child .mod-customfield {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.sidebar-l .mod-customfield__label,
.sidebar-r .mod-customfield__label,
.section-3 .mod-customfield__label,
.section-8 .mod-customfield__label {
    font-weight: bold;
}
/* end custom fields */

.top-article-info {
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
    max-width: 768px;
}
.top-article-info .article-aside,
.top-article-info .article-info,
.top-article-info .bottom-meta {
    justify-content: flex-start;
}

.col-12.col-md-3.order-2.order-md-1 {
    display: none !important;
}
.bottom-article-info .row > .col-md-3 {
    display: none;
}
.bottom-article-info .row > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
}

.sidebar-l,
.sidebar-r,
.section-3,
.section-8 {
    padding: 20px;
    background-color: var(--color-info);
    border: 1px dashed var(--t4-border-color, #DCE0D3);
    border-radius: var(--t4-border-radius, 12px);
    box-shadow: var(--shadow-base);
}

.section-8,
.section-3 {
    margin-top: 20px;
}

.desc-article:has(*) {
    padding: 24px;
    background: radial-gradient(circle at right 20px bottom 20px, rgba(255,255,255,.9) 0 90px, transparent 92px),
                linear-gradient(135deg, #fbf8f3, #f1ebe2);
    border: 1px dashed var(--t4-border-color, #DCE0D3);
    border-radius: var(--t4-border-radius, 12px);
    box-shadow: var(--shadow-base);
}
.mod-articletags__header {
    align-self: flex-start;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
}
.mod-articletags__content {
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--t4-border-color, var(--gray-300));
}

.arc3c_locked_teaser {
    background: var(--color-light);
    border-radius: 30px;
    padding: 32px;
    margin: 26px 0 34px;
    gap: 22px;
    align-items: center;
    text-align: center;
}

.arc3c_locked_teaser_header {
    align-items: center;
}

.arc3c_article_stel_een_vraag {
    border-radius: 30px;
    margin: 26px 0 34px;
    gap: 22px;
    align-items: center;
    color: var(--headings-color, var(--gray-900));
    text-align: center;
}
.mod-paidcontentnotice {
    /* rgba(189, 145, 98, .18) = var(--color-secondary) op 18% dekking --
       geen directe var()-vervanging mogelijk zonder color-mix()/relative-color
       syntax; bij een paletwijziging van --color-secondary hier bewust herzien. */
    background:
        radial-gradient(circle at 12% 20%, rgba(189, 145, 98, .18), transparent 25%),
        linear-gradient(135deg, #fbf8f3, #f1ebe2);
    border: 1px dashed var(--t4-border-color, #DCE0D3);
    border-radius: 30px;
    padding: 32px;
    margin: 26px 0 34px;
    gap: 22px;
    align-items: center;
    color: var(--headings-color, var(--gray-900));
    text-align: center;
    box-shadow: var(--shadow-base);
}
.mod-paidcontentnotice__fieldlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.mod-paidcontentnotice__fieldlist-item {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-primary, #06213d);
    /* rgba(6, 33, 61, 0.06) = var(--color-primary) op 6% dekking -- zelfde
       kanttekening als hierboven bij --color-secondary. */
    background: rgba(6, 33, 61, 0.06);
    border: 1px dashed var(--t4-border-color, #DCE0D3);
    border-radius: 999px;
}

.arc3c_searchintro_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.arc3c_searchintro_header__left {
    text-align: left;
}
.arc3c_searchintro_header__logo {
    flex-shrink: 0;
}
.arc3c_searchintro_header__logo img {
    max-height: 127px;
    width: auto;
    display: block;
}
#Mod212 .fd-item:first-child img {
    max-width: 100%;
    height: auto;
}
#Mod212 .fd-item:first-child .fd-item-inner {
    border: none;
    box-shadow: none;
    padding: 0 !important;
    background-color: transparent !important;
}
#Mod212 .fd-item:first-child .fd-item-title {
    display: none;
}
#Mod212 .fd-item:first-child .fd-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mod-finder .js-finder-search-query {
    background-color: var(--color-primary, #06213d);
    color: var(--color-white);
    border-color: var(--color-primary, #06213d);
    font-weight: 900;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 22px 22px;
    padding-left: 52px;
}
.mod-finder .js-finder-search-query::placeholder {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 900;
}
.arc3c_searchintro_header__left a,
.arc3c_searchintro_header__left a:hover,
.arc3c_searchintro_header__left a h4 {
    color: inherit;
    text-decoration: none;
}
.tbl-abo-001 {
    border-collapse: collapse;
}

.tbl-abo-001 td {
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    padding: 6px;
}
.badge-info,
.bg-info {
    color: var(--color-dark) !important;
}

/* spatie tussen megamenu-icoon en menu-titel (bv. zoeken/webshop) */
i + .menu-item-title {
    margin-left: 6px;
}

/* Joomla core laadt sinds kort zijn eigen FontAwesome 6-basisbestand ná T4's
   FA5-bundel, zonder @font-face — dat breekt alle .fas/.far/.fab iconen
   (lege vierkantjes). custom.css laadt sowieso als laatste, dus dit
   herstelt gewoon het font zonder !important nodig te hebben. */
.fas, .fa {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.far {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
}
.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

/* HikaShop-koopknop: prijs groter tonen, zowel in de custom-field-widget op
   de artikelpagina (sidebar-l) als op de standalone productpagina. Enkel
   grootte aangepast, kleur bewust ongemoeid gelaten (gebruikersvraag). */
.mod-customfield--hikashop_koopknop .hikashop_product_price_full,
.hikashop_product_price_main .hikashop_product_price_full {
    font-size: 28px;
    font-weight: 600;
    display: inline-block;
    margin: 8px 0;
}

/* Winkelmandje-indicator in de header (mod_hikashop_cart, positie header-r).
   HikaShop's eigen CSS geeft de dropdown geen breedte/uitlijning (width:auto,
   geen left/right), waardoor hij naast het menu buiten het scherm liep.
   .t4-header-r > * regelt zelf al de tussenruimte (template.css), dus hier
   enkel de link en de dropdown-inhoud herstijlen. */
.hikashop_small_cart_checkout_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid var(--t4-border-color, var(--gray-300));
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.hikashop_small_cart_checkout_link::before {
    content: "\f07a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.hikashop_small_cart_checkout_link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.hikashop_cart_dropdown_content {
    width: 320px;
    max-width: calc(100vw - 32px);
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    padding: 20px;
    background-color: var(--color-white);
    border: 1px solid var(--t4-border-color, var(--gray-300));
    border-radius: var(--t4-border-radius, 12px);
    box-shadow: var(--shadow-base);
}
.hikashop_cart_dropdown_content table.hikashop_cart {
    width: 100%;
    border-collapse: collapse;
}
.hikashop_cart_dropdown_content th.hikashop_cart_title {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--headings-color, var(--gray-900));
    padding-bottom: 8px;
    border-bottom: 1px solid var(--t4-border-color, var(--gray-300));
}
.hikashop_cart_dropdown_content td.hikashop_cart_value {
    padding: 10px 0;
    border-bottom: 1px solid var(--t4-border-color, var(--gray-300));
    font-size: 0.9rem;
    vertical-align: middle;
}
.hikashop_cart_dropdown_content .hikashop_cart_module_product_name_value a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.hikashop_cart_dropdown_content .hikashop_cart_proceed_to_checkout {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px 16px;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}
.hikashop_cart_dropdown_content .hikashop_cart_proceed_to_checkout:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* HikaShop-paginering (bv. productlijsten): de cijferlinks dragen ook de
   klasse "pagenav", die elders (template.css) bedoeld is voor de <ul> van
   Joomla's EIGEN paginering-widget ("padding: 0; margin: 2rem 0" daar). Die
   regel komt hier per ongeluk rechtstreeks op de <a>-cijfers terecht, waardoor
   ze zonder padding, met 32px extra bovenmarge (dus lager dan de pijltjes
   ernaast) en dicht op elkaar stonden. Enkel binnen HikaShop's eigen
   paginering herstellen, Joomla's .pagenav-widget elders blijft ongemoeid.
   -1px marge behouden: bestaande Bootstrap-overlap tussen aangrenzende
   paginering-randen. */
.hikashop_pagination .pagenav.page-link {
    padding: 6px 12px;
    margin: 0 -1px 0 0;
}

/* HikaShop-toolbar (winkelwagen: Leeg de winkelwagen / Afrekenen / Opslaan):
   deze knoppen zijn geen Bootstrap/T4-knoppen maar HikaShop's eigen
   "a.hikabtn" (grijs #EAEDF0, blauw pictogram #1266A0, uit hikashop.css en
   frontend_default.css). Hier in de kleuren van de site-knop .btn-light:
   achtergrond en rand var(--color-light), zwarte tekst, hover = zelfde kleur
   met opacity .85. Enkel kleuren; grootte, padding en layout (pictogram boven
   de tekst) blijven HikaShop's eigen. De donkere variant staat in darkmode.css.
   Het pictogram erft de tekstkleur, anders blijft het blauw. */
div.hika_toolbar a.hikabtn {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #000;
}
div.hika_toolbar a.hikabtn:hover,
div.hika_toolbar a.hikabtn:focus,
div.hika_toolbar a.hikabtn:active {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #000;
    opacity: .85;
}
div.hika_toolbar a.hikabtn span.hk-icon {
    color: inherit;
}

/* HikaShop winkelwagen: label "Winkelwagen Naam" naast het invulveld.
   HikaShop geeft de labelkolom (dl.hika_options > dt) een vaste breedte van
   120px met overflow:hidden !important (hikashop.css). Het label is in dit
   lettertype ~150px breed en werd afgekapt, waarna het veld (een blokelement
   dat de float niet mag overlappen) er net naast of zelfs half overheen viel.
   Hier: flex met een label van automatische breedte, verticaal gecentreerd
   t.o.v. het veld. Enkel in het winkelwagenformulier, andere HikaShop-schermen
   met dl.hika_options blijven ongemoeid. Onder 480px breed stapelt HikaShop
   zelf al; flex-wrap laat het label daar boven het veld staan. */
#hikashop_show_cart_form dl.hika_options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}
#hikashop_show_cart_form dl.hika_options > dt {
    float: none;
    width: auto;
    margin-right: 0;
    text-align: left;
    overflow: visible !important; /* HikaShop zet hier zelf !important */
    text-overflow: clip;
}
#hikashop_show_cart_form dl.hika_options > dd {
    flex: 1 1 190px;
    margin: 0;
}
/* HikaShop checkout (/webshop/winkelwagen/checkout) -------------------------------------------
   Loginblok: HikaShop zet het in een kolom hkc-lg-4 (1/3 van de inhoudskolom) met label 4/12 en
   veld 8/12, en T4 begrenst .form-control op 240px. Resultaat: afgekapte labels, minuscule velden
   en een passkey-knop die niet op één lijn staat. Hier: kolommen onder elkaar, label boven het veld,
   velden en knoppen op volle breedte met dezelfde linkerrand. */
.hikashop_checkout_login .hk-container-fluid > [class*="hkc-"] { grid-column: 1 / -1; }
.hikashop_checkout_login .hkform-horizontal .hkform-group { display: block; margin-left: 0; margin-right: 0; }
.hikashop_checkout_login [class*="hkc-"] { padding-left: 0; padding-right: 0; }
.hikashop_checkout_login .hkcontrol-label { text-align: left; padding-top: 0; }
.hikashop_checkout_login .hkcontrol-label:empty { display: none; }
.hikashop_checkout_login .form-control { max-width: none; }
/* Volgorde op het scherm: "Inloggen", dan de passkey-knop, dan de "vergeten"-links (enkel CSS, de HTML
   blijft ongewijzigd). 20px tussen "Inloggen" en de passkey-knop; onder de passkey-knop 18px (+2px regelhoogte van de link =
   20px tot de tekst, zoals vroeger onder "Inloggen"). */
.hikashop_checkout_login #hikashop_checkout_login_form fieldset { display: flex; flex-direction: column; }
.hikashop_checkout_login .hkform-group.hikashop_login_button_line { margin-bottom: 20px; }
.hikashop_checkout_login .form-login__submit { order: 1; margin-bottom: 18px; }
.hikashop_checkout_login .hikashop_login_forgot_password_line,
.hikashop_checkout_login .hikashop_login_forgot_username_line { order: 2; }

/* Tabellen op de checkoutpagina (betaalmethode, winkelwagen): T4 gebruikt het koude Bootstrap-grijs
   (#f8f9fa / #dee2e6); hier de warme kleuren van de site. */
.hikashop_checkout_page .table {
	--t4-table-striped-bg: #fbf9f6;
	--t4-table-hover-bg: var(--color-light);
}

/* Radiobuttons en vinkjes: marineblauw (primaire kleur) i.p.v. het standaardblauw van de browser. */
.hikashop_checkout_page input[type="radio"],
.hikashop_checkout_page input[type="checkbox"] { accent-color: var(--color-primary); }

/* Checkout: alle knoppen even hoog als het invoerveld/"Toevoegen" (48px). HikaShop's btn-sm maakt
   "Inloggen" en "Voltooien" 32px en de passkey-knop is 47px. min-height i.p.v. height, zodat een knop
   mee kan groeien als de tekst op een smal scherm afbreekt. */
.hikashop_checkout_page .hikabtn_checkout_login_form,
.hikashop_checkout_page .hikabtn_checkout_login_register,
.hikashop_checkout_page .hikabtn_checkout_next {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
}
.hikashop_checkout_page .plg_system_webauthn_login_button { min-height: 48px; }

/* Gastblok (en elke selectielijst in het loginblok): keuzelijsten zo breed als de tekstvelden i.p.v. de
   breedte van hun langste optie (Titel 134px, Land 380px, Provincie 562px). */
.hikashop_checkout_login select.form-select { width: 100%; }

/* Prijsweergave "incl. btw (excl. btw)" (HikaShop-prijsmodus "beide", taalsleutels PRICE_BEFORE_TAX / PRICE_AFTER_TAX in
   language/overrides/nl-NL.override.ini): het bedrag incl. btw blijft de hoofdprijs, "incl. btw" en de prijs excl. btw staan klein erbij.
   De prijs excl. btw komt op een eigen regel, zodat de prijs in een smalle kolom niet buiten het kader loopt. */
.hikashop_product_price .hk-incl { font-size: 13px; font-weight: 500; color: #8a7e72; }
.hikashop_product_price .hk-excl { display: block; font-size: 13px; font-weight: 400; line-height: 1.5; color: #8a7e72; white-space: nowrap; }

/* Checkout: totaalregels (totaal excl. btw, btw, totaal incl. btw). */
.hikashop_cart_total_row .hikashop_cart_total_title,
.hikashop_cart_total_row .hikashop_cart_total_value { font-weight: 700; color: var(--color-primary); border-top: 2px solid var(--color-primary); }

/* Checkout: labels van de totaalrijen op één regel ("Totaal excl. btw", "Totaal incl. btw"). */
.hikashop_cart_subtotal_title, .hikashop_cart_tax_title, .hikashop_cart_total_title { white-space: nowrap; }

/* Checkout: blok "Bijkomende informatie" met het verplichte vinkje voor het herroepingsrecht (order-veld withdrawal_waiver).
   De standaardtitel van het blok wordt verborgen; het veldlabel is de titel en het vinkje staat in een kader zoals de betaalzin in de mails. */
.hikashop_checkout_fields legend { display: none; }
.hikashop_checkout_fields fieldset { margin-top: 28px; }
.hikashop_checkout_fields .hkform-horizontal .hikashop_checkout_withdrawal_waiver_line { display: block; margin: 0; }
.hikashop_checkout_fields .hkform-horizontal .hikashop_checkout_withdrawal_waiver_line [class*="hkc-"] { padding: 0; }
.hikashop_checkout_fields .hkform-horizontal .hikashop_checkout_withdrawal_waiver_line > label.hkcontrol-label {
	display: block; text-align: left; padding: 0 0 10px; margin: 0;
	font-family: var(--t4-heading-font-family, inherit); font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--color-primary);
}
.hikashop_checkout_fields .hkform-horizontal .hikashop_checkout_withdrawal_waiver_line .hikashop_field_required_label { color: #c2562f; margin-left: 2px; }
.hikashop_checkout_fields .hkform-horizontal .hikashop_checkout_withdrawal_waiver_line .hkcheckbox label {
	display: flex; align-items: flex-start; gap: 14px; width: 100%; margin: 0; padding: 16px 18px; cursor: pointer;
	background-color: var(--color-light); border-left: 4px solid var(--color-secondary); border-radius: 0 12px 12px 0;
	font-weight: 400; line-height: 1.55; color: var(--body-text-color, #2b2420);
}
.hikashop_checkout_fields .hkform-horizontal .hikashop_checkout_withdrawal_waiver_line .hkcheckbox input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 3px 0 0; }

/* Checkout: wat ruimte boven de knoppenrij onderaan. */
.hikashop_checkout_page .hikashop_checkout_buttons { margin-top: 22px; }