/* =========================================================
   Homediq Help Center - Zoho Desk (thema Elegant)
   Plakken in: Setup > Channels > Help Center > Homediq >
   Customization > Elegant > Customize > CSS
   Geldt voor NL, DE en EN tegelijk.

   Tokens overgenomen uit homediq.com (live gemeten):
   tekst        #1A1A2E
   primair      #2366D9
   accent       #F9025C
   rand         #E1E7EF
   surface      #F1F5F9
   surface blauw#EFF6FE
   font         Inter, koppen 800
   radius       12px
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 0. Inloggen verbergen -------------------------
   Geen accounts, dus alle sign-in elementen weg.
   De bestaande regel #logoutDetails{display:none} dekt maar
   een van de twee. #portal_tabsignin staat nog wel live in
   de header als "Aanmelden" achter het personen-icoon.     */

#logoutDetails,
#portal_tabsignin,
.LoginDetail__LogoutDetail,
.LoginDetail__signin,
.globalSignin,
.signinLink {
  display: none !important;
}

/* ---------- 1. Typografie --------------------------------- */

body,
button,
input,
textarea,
select,
h1, h2, h3, h4, h5, h6,
.Button__btnFont,
.Input__inputCommon,
.FormElement__labelStyle {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

body {
  color: #1A1A2E !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  color: #1A1A2E !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* ---------- 2. Header -------------------------------------
   Zet in het Appearance-paneel eerst:
   Header > Background Image UIT, Background Color #FFFFFF
   Header Text #1A1A2E
   Tabs > Background #FFFFFF, Opacity 1
   Navigation Normal #1A1A2E, Hover/Selected/Border #2366D9  */

#headerContent,
.Header__searchSection {
  background-color: #EFF6FE !important;
  background-image: none !important;
  border-bottom: 1px solid #E1E7EF !important;
}

#navBar,
.Header__navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #E1E7EF !important;
}

/* Wordmark staat al in het logo, de losse tekst ernaast is dubbel */
.Header__name {
  display: none !important;
}

.Header__logoImg img,
.Header__logo img {
  max-height: 30px !important;
  width: auto !important;
}

/* Navigatie */
.Header__tabsTab a,
.Header__tabs__link,
.Header__menuTab {
  color: #1A1A2E !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

.Header__tabsTab a:hover,
.Header__tabs__link:hover,
.Header__tabsTab.active a {
  color: #2366D9 !important;
}

/* Taalkiezer kapt nu af tot "Nede..." en "Deut..." */
#menuBox,
.Header__menu,
.Header__menuIcon {
  max-width: none !important;
  width: auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Hero */
.Header__searchTitle {
  color: #1A1A2E !important;
  font-size: 34px !important;
  font-weight: 800 !important;
}

.Header__description {
  color: #4A5568 !important;
  font-size: 16px !important;
}

.Input__searchBox {
  border-radius: 12px 0 0 12px !important;
  height: 48px !important;
  font-size: 16px !important;
  border: 1px solid #E1E7EF !important;
}

/* ---------- 3. Knoppen ------------------------------------ */

.Button__primary,
.commonStyle__zt3buttonPrimaryBg,
button.Button__primary {
  background-color: #2366D9 !important;
  border-color: #2366D9 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  height: auto !important;
  transition: background-color .15s ease;
}

.Button__primary:hover,
.commonStyle__zt3buttonPrimaryBg:hover {
  background-color: #1B52B4 !important;
  border-color: #1B52B4 !important;
}

.Button__secondary,
.commonStyle__zt3buttonSecondaryBg {
  background-color: transparent !important;
  border: 1px solid #1A1A2E !important;
  color: #1A1A2E !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  height: auto !important;
}

.Button__secondary:hover {
  background-color: rgba(0, 0, 0, .06) !important;
}

/* ---------- 4. Links -------------------------------------- */

a,
.commonStyle__zt3Link,
.ListHeader__linkText {
  color: #2366D9 !important;
}

a:hover,
.commonStyle__zt3Link:hover,
.ListHeader__linkText:hover {
  color: #1B52B4 !important;
}

/* Zoho-oranje dat overal terugkomt in "meer" en iconen */
.commonStyle__textOrange,
.Icon__textOrange {
  color: #2366D9 !important;
}

/* ---------- 5. Breadcrumb --------------------------------- */

.BreadCrumbs__breadcrumbsView {
  background-color: #F1F5F9 !important;
  border-bottom: 1px solid #E1E7EF !important;
  font-size: 13px !important;
}

.BreadCrumbs__breadcrumbsView a {
  color: #64748B !important;
}

.BreadCrumbs__breadcrumbsView a:hover {
  color: #2366D9 !important;
}

/* ---------- 6. Ticketformulier ---------------------------- */

.TicketFormLeftContainer__formTitle {
  color: #1A1A2E !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
}

.FormElement__labelStyle,
.FormElement__formLabelvertical {
  color: #1A1A2E !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.FormElement__mandatoryStar:after {
  color: #F9025C !important;
}

.Input__formInput {
  border: 1px solid #E1E7EF !important;
  border-radius: 12px !important;
  height: 46px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  background-color: #ffffff !important;
}

.Input__formInput:focus {
  border-color: #2366D9 !important;
  box-shadow: 0 0 0 3px rgba(35, 102, 217, .15) !important;
}

.TicketFormLeftContainer__formFooter {
  text-align: left !important;
  margin-top: 24px !important;
}

/* Rechterkolom met populaire artikelen en contactgegevens */
.TicketFormRightContainer__rightPanelDetail,
.commonStyle__rightPanelDetail {
  background-color: #F1F5F9 !important;
  border: 1px solid #E1E7EF !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* ---------- 7. Kennisbank --------------------------------- */

/* Zoho toont de categorienaam nog een keer als beschrijving
   zolang die leeg is, en markeert dat zelf met
   .emptydescription. Verbergen tot de echte beschrijvingen
   zijn ingevuld, daarna verschijnen ze vanzelf weer. */
.ListHeader__description.emptydescription {
  display: none !important;
}

.ContentList__subCategory {
  background-color: #ffffff !important;
  border: 1px solid #E1E7EF !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: box-shadow .25s ease-out, transform .25s ease-out;
}

.ContentList__subCategory:hover {
  box-shadow: 0 6px 20px rgba(26, 26, 46, .08) !important;
  transform: translateY(-2px);
}

.ListHeader__header2 a {
  color: #1A1A2E !important;
  font-weight: 700 !important;
  font-size: 17px !important;
}

.ListHeader__listIcon,
.Icon__textGreyShade35 {
  fill: #2366D9 !important;
  color: #2366D9 !important;
}

/* ---------- 8. Footer ------------------------------------
   De Zoho-balk is uit de footer-HTML gehaald. Deze regels
   vangen af wat er eventueel van blijft staan.             */

.Footer__footerCopyrigt,
.Footer__container2 {
  display: none !important;
}

.hq-footer {
  background-color: #1A1A2E !important;
  padding: 28px 20px !important;
}

.hq-footer__inner {
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hq-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.hq-footer a {
  color: #ffffff !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.hq-footer a:hover {
  color: #7FA8EC !important;
}

.hq-footer__copy {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
}

@media (max-width: 600px) {
  .hq-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 9. Extra menu-items in de navigatie -----------
   Zoho stript het script uit de header, dus per taal een
   eigen regel in de HTML en hier bepalen welke zichtbaar is.
   Zoho zet lang="nl|de|en" op <html>. De bezoeker ziet
   altijd maar een van de drie.                              */

li.hq-nl,
li.hq-de,
li.hq-en {
  display: none !important;
}

html[lang="nl"] li.hq-nl,
html[lang="de"] li.hq-de,
html[lang="en"] li.hq-en {
  display: block !important;
}

/* Footer heeft per taal een eigen blok, alleen de actieve
   taal tonen. De header regelt dit met het scriptje. */
.hq-footer__links {
  display: none !important;
}

html[lang="nl"] .hq-footer__links.hq-nl,
html[lang="de"] .hq-footer__links.hq-de,
html[lang="en"] .hq-footer__links.hq-en {
  display: flex !important;
}

/* "Naar de website" als gewone link */
.Header__tabsTab.hq-web a {
  color: #1A1A2E !important;
  font-weight: 500 !important;
}

.Header__tabsTab.hq-web a:hover {
  color: #2366D9 !important;
}

/* "Ticket indienen" als knop, zoals "Test activeren" op de site */
.Header__tabsTab.hq-cta a {
  border: 1px solid #2366D9 !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  color: #2366D9 !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

.Header__tabsTab.hq-cta a:hover {
  background-color: #2366D9 !important;
  color: #ffffff !important;
}

/* ---------- 10. Mobiel ------------------------------------ */

@media (max-width: 768px) {
  .Header__searchTitle {
    font-size: 24px !important;
  }

  .TicketFormRightContainer__rightPanelDetail {
    margin-top: 24px !important;
  }

  .Button__primary,
  .Button__secondary {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
}

/* ---------- 11. Taalkiezer als op de website --------------
   De site gebruikt een vlag-emoji plus een chevron, zonder
   tekst. Dit bootst dat na: globe-icoon weg, het label
   vervangen door de vlag. Werkt zonder JavaScript omdat
   Zoho zelf data-id op het element zet.
   Let op: Windows rendert vlag-emoji niet, daar zie je NL,
   DE of EN. Dat is op homediq.com precies zo.              */

/* Globe en label alleen verbergen als er ook echt een vlag
   voor in de plaats komt. Herkent Zoho de taal niet, dan
   blijft de originele kiezer gewoon staan. */

html[lang="nl"] .LocalePopup__globeIcon,
html[lang="de"] .LocalePopup__globeIcon,
html[lang="en"] .LocalePopup__globeIcon {
  display: none !important;
}

html[lang="nl"] .LocalePopup__localeText,
html[lang="de"] .LocalePopup__localeText,
html[lang="en"] .LocalePopup__localeText {
  font-size: 0 !important;
  min-width: 0 !important;
}

html[lang="nl"] .LocalePopup__localeText:before { content: "\1F1F3\1F1F1"; }
html[lang="de"] .LocalePopup__localeText:before { content: "\1F1E9\1F1EA"; }
html[lang="en"] .LocalePopup__localeText:before { content: "\1F1EC\1F1E7"; }

.LocalePopup__localeText:before {
  font-size: 20px !important;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.LocalePopup__localeTarget {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

.LocalePopup__localeTarget:hover {
  background-color: #F1F5F9 !important;
}

/* Vlaggen ook in het uitklapmenu */
.LocalePopup__themeLangList[data-id="nl_locale"]:before { content: "\1F1F3\1F1F1  "; }
.LocalePopup__themeLangList[data-id="de_locale"]:before { content: "\1F1E9\1F1EA  "; }
.LocalePopup__themeLangList[data-id="en_locale"]:before { content: "\1F1EC\1F1E7  "; }

.LocalePopup__themeLangList {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

.LocalePopup__themeLangList.LocalePopup__active {
  background-color: #EFF6FE !important;
  color: #2366D9 !important;
  font-weight: 600 !important;
}

/* ---------- 14. Eigen taalkiezer --------------------------
   Zoho's eigen kiezer wordt niet meer gerenderd, dus deze
   bouwen we zelf in de header-HTML. Drie vlaggen, actieve
   taal vol, de rest gedimd.                                 */

.hq-lang {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 8px !important;
}

.hq-lang a {
  font-size: 18px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  opacity: .4;
  filter: grayscale(1);
  transition: opacity .15s ease, filter .15s ease;
}

.hq-lang a:hover {
  opacity: .8;
  filter: grayscale(0);
}

/* Zoho stript data-attributen uit de header-HTML, dus op
   volgorde selecteren: 1 = NL, 2 = DE, 3 = EN. Verander je
   de volgorde in de HTML, verander deze regel dan mee. */
html[lang="nl"] .hq-lang a:nth-child(1),
html[lang="de"] .hq-lang a:nth-child(2),
html[lang="en"] .hq-lang a:nth-child(3) {
  opacity: 1;
  filter: none;
}

/* Windows toont geen vlag-emoji, daar valt hij terug op de
   landcode. Zorgt dat dat leesbaar blijft. */
.hq-lang a {
  font-weight: 700;
  color: #1A1A2E !important;
}

/* ---------- 15. Laatste Zoho-oranje resten ----------------
   Zoekknop, terug-naar-boven en de iconen in de kop van de
   kennisbanktegels staan nog op #e46317.                    */

.SearchContainer__searchIcon,
.AppContainer__backToTop,
.commonStyle__zt3BrandBg {
  background-color: #2366D9 !important;
}

.commonStyle__zt3BrandColor,
.commonStyle__zt3BrandFill,
svg path[fill="#e46317"] {
  fill: #2366D9 !important;
  color: #2366D9 !important;
}

/* Categorie- en widget-iconen */
.WidgetContainer__boxSplit svg path,
.ListHeader__listIcon path,
.ContentList__subCategory svg path {
  fill: #2366D9 !important;
}

/* Het icoon boven de tegel op de startpagina komt uit een
   SVG-sprite met vaste kleuren in het symbol. Die zit in
   shadow DOM, dus fill komt er niet bij en hue-rotate maakt
   er iets geels van. Standaard Zoho-clipart dat toch niet
   bij de huisstijl past, dus weg ermee. De tegel houdt zijn
   titel en beschrijving. */

.ContentBox__indexIcon {
  display: none !important;
}