/* ============================================================
   Seafarer Support Help Centre — Custom Theme CSS v4
   Zoho Desk > Setup > Help Centre > Customise > CSS
   ============================================================ */

/* 1. Tabler Icons webfont (CDN) */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');


/* 2. Section grid
   Target: .KbSubCategoryContainer__row  (the flex container holding all section cards)
   ============================================================ */
.KbSubCategoryContainer__row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  flex-wrap: unset !important;
}

@media (max-width: 1100px) {
  .KbSubCategoryContainer__row {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .KbSubCategoryContainer__row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 450px) {
  .KbSubCategoryContainer__row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Pale grey background behind the whole grid */
.KbSubCategoryContainer__row {
  background: #f4f5f7 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Section card wrapper — fill the grid cell */
.KbSubCategoryContainer__contentList {
  width: 100% !important;
  min-width: 0 !important;
}


/* 3. Card — vertical, centred
   ============================================================ */
.ContentList__subCategory {
  background: #ffffff !important;
  border: 1px solid #e0e4ed !important;
  border-radius: 10px !important;
  padding: 18px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  cursor: pointer;
  /* Only transition border/shadow — explicitly excludes opacity & transform
     so any JS lazy-load changes to those properties are instant */
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100px;
  box-sizing: border-box !important;
  position: relative !important;
}

.ContentList__subCategory:hover {
  border-color: #c9581f !important;
  box-shadow: 0 3px 14px rgba(201, 88, 31, 0.14) !important;
}

/* Stretched link — makes the whole card a clickable hit-target */
.ContentList__subCategory .ListHeader__linkText::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
}


/* 4. Header row → column layout
   ============================================================ */
.ListHeader__listHeader2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
  float: none !important;
}


/* 5. Icon tile
   ============================================================ */
.ListHeader__listIcon2 {
  float: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #fdf0e8 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

/* Hide original folder SVG */
.ListHeader__listIcon2 svg,
.ListHeader__listIcon2 img {
  display: none !important;
}

/* Tabler icon base — applies to all section icon tiles.
   content here is the fallback for any section not listed below. */
[id^="section_"] .ListHeader__listIcon2::before {
  font-family: 'tabler-icons' !important;
  font-size: 22px !important;
  color: #c9581f !important;
  content: "\ea39"; /* fallback: ti-book — no !important so specific rules below take precedence */
  display: block;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 6. Section title — wrap cleanly, no truncation
   ============================================================ */
.ListHeader__headerContent {
  width: 100%;
  text-align: left;
}

.ListHeader__header2 {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #1d2d4e !important;
  text-align: center !important;
  margin: 0 !important;
}

.ListHeader__linkText {
  color: #1d2d4e !important;
  text-decoration: none !important;
}

.ListHeader__linkText:hover {
  color: #c9581f !important;
  text-decoration: none !important;
}


/* 7. Hide articles, descriptions, follow buttons, more links,
       and the Recent/Popular Articles sidebar widgets.
       Scoped to portal.articleSubCategory so the homepage is unaffected.
   ============================================================ */
portal.articleSubCategory .ContentList__topicList,
portal.articleSubCategory .ViewMore__viewmore,
portal.articleSubCategory .ListHeader__dottedPopup,
portal.articleSubCategory .ListHeader__description,
portal.articleSubCategory .ListHeader__clBoth {
  display: none !important;
}

/* Hide Recent/Popular Articles LI widgets (KB page only) */
portal.articleSubCategory .WidgetContainer__contentList:not(:has(.KbSubCategoryContainer__row)) {
  display: none !important;
}


/* 8. Per-section icons — 17 Seafarer Support categories
   ============================================================ */

/* Accommodation — ti-home */
#section_233149000000819098 .ListHeader__listIcon2::before { content: "\eac1"; }

/* Companionship — ti-users */
#section_233149000000824100 .ListHeader__listIcon2::before { content: "\ebf2"; }

/* Disability — ti-wheelchair */
#section_233149000000811067 .ListHeader__listIcon2::before { content: "\f1db"; }

/* Education — ti-school */
#section_233149000000822072 .ListHeader__listIcon2::before { content: "\ecf7"; }

/* Employment — ti-briefcase */
#section_233149000000820106 .ListHeader__listIcon2::before { content: "\ea46"; }

/* Family Assistance — ti-baby-carriage */
#section_233149000000821159 .ListHeader__listIcon2::before { content: "\f05d"; }

/* Financial Assistance — ti-coin */
#section_233149000001004429 .ListHeader__listIcon2::before { content: "\eb82"; }

/* Grants — ti-coin-euro */
#section_233149000000822076 .ListHeader__listIcon2::before { content: "\f2bf"; }

/* Info — ti-info-circle */
#section_233149000000821155 .ListHeader__listIcon2::before { content: "\eac5"; }

/* Medical — ti-stethoscope */
#section_233149000000819110 .ListHeader__listIcon2::before { content: "\edbe"; }

/* Memorial — ti-candle */
#section_233149000000816125 .ListHeader__listIcon2::before { content: "\efc6"; }

/* Mental Health Support — ti-brain */
#section_233149000000820110 .ListHeader__listIcon2::before { content: "\f59f"; }

/* Seafarer Centres — ti-anchor */
#section_233149000000833059 .ListHeader__listIcon2::before { content: "\eb76"; }

/* Seafarers Welfare — ti-activity */
#section_233149000000827081 .ListHeader__listIcon2::before { content: "\ed23"; }

/* Spiritual — ti-cross */
#section_233149000000811075 .ListHeader__listIcon2::before { content: "\ef8f"; }

/* Support — ti-hand-click */
#section_233149000000831081 .ListHeader__listIcon2::before { content: "\ef4f"; }

/* Training — ti-certificate */
#section_233149000000811079 .ListHeader__listIcon2::before { content: "\ed76"; }


/* 9. Prevent lazy-load blank cards
   Covers both inline-style manipulation (JS sets opacity/transform directly)
   and CSS animation approaches. Targets each layer of the card hierarchy
   individually so nothing is missed.
   ============================================================ */
[id^="section_"],
[id^="section_"] .KbSubCategoryContainer__contentList,
[id^="section_"] .ContentList__subCategory,
[id^="section_"] .ListHeader__listHeader2,
[id^="section_"] .ListHeader__listIcon2,
[id^="section_"] .ListHeader__headerContent,
[id^="section_"] .ListHeader__header2,
[id^="section_"] .ListHeader__linkText {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
}

/* Restore hover transition on the card — excluded from the block above
   because animation: none would strip it out */
[id^="section_"] .ContentList__subCategory {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}


/* ============================================================
   Homepage styles  (portal.home only)
   ============================================================ */

/* Hide any widget that isn't the nav cards, recent articles, or popular articles */
portal.home .WidgetContainer__contentList:not(:has(.ModuleCont__moduleCont)):not(:has(.recentArticles)):not(:has(.popularAricles)) {
  display: none !important;
}

/* Pale grey background, full width to match the search bar */
portal.home .ModuleCont__moduleCont {
  background: #f4f5f7 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Hide the empty spacer div Zoho injects before the cards */
portal.home .ModuleCont__moduleCont > div:not(:has(.ContentBox__boxThree)) {
  display: none !important;
}

/* The one div that wraps BOTH cards — make it a full-width flex row */
portal.home .ModuleCont__moduleCont > div:has(.ContentBox__boxThree) {
  flex: 1 !important;
  display: flex !important;
  gap: 16px !important;
  min-width: 0 !important;
}

/* Each card stretches to fill half the row */
portal.home .ContentBox__boxThree {
  flex: 1 !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e0e4ed !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative !important;
}

portal.home .ContentBox__boxThree:hover {
  border-color: #c9581f !important;
  box-shadow: 0 3px 14px rgba(201, 88, 31, 0.14) !important;
}

/* Stretched link — whole homepage card clickable */
portal.home .ContentBox__boxThree .Link__link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
}

portal.home .ContentBox__boxInnerHome {
  width: 100% !important;
}

/* Horizontal layout: icon left, text right */
portal.home .ContentBox__alignCenter {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
}

/* Icon tile — spans both text rows, vertically centred */
portal.home .ContentBox__indexIcon {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  background: #fdf0e8 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Hide the existing SVG */
portal.home .ContentBox__indexIcon svg {
  display: none !important;
}

/* Tabler icon base */
portal.home .ContentBox__indexIcon::before {
  font-family: 'tabler-icons' !important;
  font-size: 26px !important;
  color: #c9581f !important;
  display: block;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Help Center — ti-books */
portal.home #kb_module .ContentBox__indexIcon::before { content: "\eff2"; }

/* Rename "Help Center" → "Help Centre" (UK spelling) — card heading */
portal.home #kb_module .ContentBox__headerMid .Link__link {
  font-size: 0 !important;
}
portal.home #kb_module .ContentBox__headerMid .Link__link::before {
  content: "Help Centre";
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1d2d4e !important;
}

/* "Help Centre" — hero subtitle above the search bar */
portal.home .Header__description {
  font-size: 0 !important;
}
portal.home .Header__description::before {
  content: "Search our help centre or submit a ticket.";
  font-size: 14px !important;
  color: inherit !important;
}

/* Tickets (Submit a ticket) — ti-ticket */
portal.home #ticket_module .ContentBox__indexIcon::before { content: "\eb3d"; }

/* Heading — grid col 2, row 1 */
portal.home .ContentBox__headerMid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1d2d4e !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

portal.home .ContentBox__headerMid a,
portal.home .ContentBox__headerMid .Link__link {
  color: #1d2d4e !important;
  text-decoration: none !important;
}

portal.home .ContentBox__headerMid a:hover,
portal.home .ContentBox__headerMid .Link__link:hover {
  color: #c9581f !important;
}

/* Description — grid col 2, row 2 */
portal.home .ContentBox__alignCenter p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Mobile: stack cards vertically */
@media (max-width: 768px) {
  portal.home .ModuleCont__moduleCont > div:has(.ContentBox__boxThree) {
    flex-direction: column !important;
  }
  portal.home .ContentBox__boxThree {
    flex: none !important;
    width: 100% !important;
  }
}


/* ============================================================
   Homepage — Recent & Popular Articles panels
   ============================================================ */

/* Make the outer UL a flex-wrap container so cards are row 1,
   article panels sit side-by-side in row 2 */
portal.home .WidgetContainer__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

portal.home .WidgetContainer__contentList:has(.ModuleCont__moduleCont) {
  width: 100% !important;
  flex-shrink: 0 !important;
}

portal.home .WidgetContainer__contentList:has(.recentArticles),
portal.home .WidgetContainer__contentList:has(.popularAricles) {
  flex: 1 !important;
  min-width: 220px !important;
}

/* Card shell */
portal.home .recentArticles,
portal.home .popularAricles {
  background: #ffffff !important;
  border: 1px solid #e0e4ed !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

/* Hide the anonymous SVG-symbols div Zoho injects as first child */
portal.home .recentArticles > div:first-child,
portal.home .popularAricles > div:first-child {
  display: none !important;
}

/* ---- Panel header ---- */
portal.home .recentArticles .ListHeader__listHeader2,
portal.home .popularAricles .ListHeader__listHeader2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 14px !important;
  margin-bottom: 4px !important;
  border-bottom: 2px solid #f4f5f7 !important;
  width: 100% !important;
  float: none !important;
}

portal.home .recentArticles .ListHeader__clBoth,
portal.home .popularAricles .ListHeader__clBoth {
  display: none !important;
}

/* Smaller icon tile for panel headers */
portal.home .recentArticles .ListHeader__listIcon2,
portal.home .popularAricles .ListHeader__listIcon2 {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: #fdf0e8 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  float: none !important;
  flex-shrink: 0 !important;
}

portal.home .recentArticles .ListHeader__listIcon2 svg,
portal.home .popularAricles .ListHeader__listIcon2 svg {
  display: none !important;
}

/* Recent Articles — ti-calendar-repeat (codepoint confirmed in section icons) */
portal.home .recentArticles .ListHeader__listIcon2::before {
  font-family: 'tabler-icons' !important;
  font-size: 18px !important;
  color: #c9581f !important;
  content: "\fad2";
  display: block;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Popular Articles — ti-trending-up (codepoint confirmed in section icons) */
portal.home .popularAricles .ListHeader__listIcon2::before {
  font-family: 'tabler-icons' !important;
  font-size: 18px !important;
  color: #c9581f !important;
  content: "\eb43";
  display: block;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Panel title text — Zoho's h5 renders "Recent"/"Popular" as its own text node,
   so we zero the whole h5 and inject the correct label via ::before */
portal.home .recentArticles .ListHeader__header2 {
  font-size: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-align: left !important;
  margin: 0 !important;
}
portal.home .recentArticles .ListHeader__header2::before {
  content: "Recent Articles";
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d2d4e !important;
  display: block;
}

portal.home .popularAricles .ListHeader__header2 {
  font-size: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-align: left !important;
  margin: 0 !important;
}
portal.home .popularAricles .ListHeader__header2::before {
  content: "Most Popular";
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d2d4e !important;
  display: block;
}

/* ---- Article list items ---- */
portal.home .recentArticles .ContentList__topicList,
portal.home .popularAricles .ContentList__topicList {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f4f5f7 !important;
  clear: both !important;
}

/* Chevron indicator replacing the folder SVG */
portal.home .recentArticles .ContentList__topicList::before,
portal.home .popularAricles .ContentList__topicList::before {
  font-family: 'tabler-icons' !important;
  content: "\ea6e"; /* ti-chevron-right */
  font-size: 14px !important;
  color: #c9581f !important;
  flex-shrink: 0 !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Hide the original document icon SVG */
portal.home .recentArticles .ContentList__documentIcon,
portal.home .popularAricles .ContentList__documentIcon {
  display: none !important;
}

/* Article links */
portal.home .recentArticles .ContentList__listLink,
portal.home .popularAricles .ContentList__listLink {
  font-size: 13px !important;
  color: #1d2d4e !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}

portal.home .recentArticles .ContentList__listLink:hover,
portal.home .popularAricles .ContentList__listLink:hover {
  color: #c9581f !important;
  text-decoration: underline !important;
}

/* Last visible item — no divider */
portal.home .recentArticles .ContentList__topicList:nth-child(6),
portal.home .popularAricles .ContentList__topicList:nth-child(6) {
  border-bottom: none !important;
}

/* Limit to 5 articles (ListHeader is child 1, so articles 6-10 are child 7+) */
portal.home .recentArticles .ContentList__topicList:nth-child(n+7),
portal.home .popularAricles .ContentList__topicList:nth-child(n+7) {
  display: none !important;
}

/* Mobile: stack article panels below cards */
@media (max-width: 768px) {
  portal.home .WidgetContainer__contentList:has(.recentArticles),
  portal.home .WidgetContainer__contentList:has(.popularAricles) {
    flex: none !important;
    width: 100% !important;
  }
}


/* ============================================================
   Home page — Hide Help Centre card, centre Tickets card
   (Temporary: remove once KB lazy-loading is resolved)
   ============================================================ */

/* Hide the Help Centre card */
.AppContainer__homePage .ContentBox__boxThree:first-child {
  display: none !important;
}

/* Centre the Tickets card in the full-width slot */
.AppContainer__homePage .ModuleCont__moduleCont > div {
  justify-content: center;
}

.AppContainer__homePage .ContentBox__boxThree {
  flex: 0 0 48%;
  max-width: 490px;
}