/* ---------- BRAND COLORS ---------- */
:root{
  --boussias-blue: #0a7ea4;        /* main brand blue */
  --boussias-blue-dark: #086a8b;   /* hover / active */
}

/* ---------- CLEANUP ---------- */
div.Header__name[data-id="portal_name"]{display:none!important;}
#footerContainer{display:none!important;}          /* hide full footer */

/* Kill the old custom widget if it ever reappears */
h5[data-id*="BO-Submit"]{display:none!important;}
h5[data-id*="BO-Submit"]~div{display:none!important;}

/* ---------- MODULES → TWO BUTTONS SIDE-BY-SIDE ---------- */
/* Put the Modules items in a centered row */
.Modules__list,
.Modules__container,
.Modules__wrap {
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:24px !important;
  flex-wrap:wrap !important;
  margin-top:12px !important;
}

/* Strip card chrome so we only see nice buttons */
.Modules__module,
.Modules__module .ContentBox__box,
.Modules__module .ContentBox__content {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Hide the big icon and description under each tile */
.Modules__module .ContentBox__icon,
.Modules__module .ContentBox__description {
  display:none !important;
}

/* Turn the links into buttons */
.Modules__module a,
a[data-id="kb_module"],
a[data-id="ticket_module"],
a[href*="/newticket"] {
  display:inline-block !important;
  min-width:220px;
  padding:14px 28px !important;
  border-radius:12px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(0,0,0,.12) !important;
  transition:transform .06s ease, filter .15s ease !important;
}

/* Color each button */
a[data-id="kb_module"]{
  background: var(--boussias-blue) !important;
}

a[data-id="ticket_module"],
a[href*="/newticket"]{
  background: var(--boussias-blue) !important;
}


/* Hover/active feedback */
.Modules__module a:hover{ filter:brightness(0.95) !important; }
.Modules__module a:active{ transform:translateY(1px) !important; }

/* ---------- MOBILE ---------- */
@media (max-width: 768px){
  .Modules__list{ gap:12px !important; }
  .Modules__module a{ width:100%; max-width:320px; min-width:0; }
}

/* Change "Recent Articles" heading to "Useful Articles" */
h5.ListHeader__header2[data-id="recentArticles"] {
  font-size: 0 !important; /* hide original text visually */
}

h5.ListHeader__header2[data-id="recentArticles"]::after {
  content: "Useful Articles";   /* new text */
  font-size: 18px !important;   /* restore readable size */
  font-weight: 600;
  color: #333;                  /* match your theme */
}

/* --- Submit a Ticket: show icon ABOVE the blue button (no :has) --- */
a[data-id="ticket_module"],
a[href*="/newticket"] { position: relative; }
a[data-id="ticket_module"]::before,
a[href*="/newticket"]::before{
  content:"";
  position:absolute; left:50%; top:-68px; transform:translateX(-50%);
  width:56px; height:56px;
  background:no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24' fill='none' stroke='%230a7ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2' ry='2'/><path d='M8 9h8M8 13h5'/></svg>");
}

/* If the icon overlaps something on smaller screens, nudge the button down a bit */
@media (max-width: 768px){
  a[data-id="ticket_module"],
  a[href*="/newticket"]{ margin-top:24px !important; }
}

/* =========================
   Faux Footer using Tabs links
   ========================= */
/* 1) Pick the four links by their URLs */
a[href="https://www.boussias.com/cookies-policy/"],
a[href="https://www.boussias.com/privacy-statement/"],
a[href*="facebook.com/boussias"],
a[href*="linkedin.com/company/boussias"]{
  position: fixed !important;
  bottom: 10px !important;
  z-index: 9999 !important;
  background: transparent !important;
  color: #0a7ea4 !important;
  font-size: 13px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2) Lay them out centered in a row (manual offsets from center) */
a[href="https://www.boussias.com/cookies-policy/"]{
  left: 50%; transform: translateX(-330px);
}
a[href="https://www.boussias.com/privacy-statement/"]{
  left: 50%; transform: translateX(-140px);
}
a[href*="facebook.com/boussias"]{
  left: 50%; transform: translateX(40px);
}
a[href*="linkedin.com/company/boussias"]{
  left: 50%; transform: translateX(200px);
}

/* 3) Subtle divider dots between them (purely visual) */
a[href="https://www.boussias.com/cookies-policy/"]::after,
a[href="https://www.boussias.com/privacy-statement/"]::after,
a[href*="facebook.com/boussias"]::after{
  content: " •";
  color:#aaa;
  margin-left:10px;
}

/* 4) Optional hover underline */
a[href="https://www.boussias.com/cookies-policy/"]:hover,
a[href="https://www.boussias.com/privacy-statement/"]:hover,
a[href*="facebook.com/boussias"]:hover,
a[href*="linkedin.com/company/boussias"]:hover{
  text-decoration: underline !important;
}

/* 5) On mobile, stack them neatly */
@media (max-width: 768px){
  a[href="https://www.boussias.com/cookies-policy/"],
  a[href="https://www.boussias.com/privacy-statement/"],
  a[href*="facebook.com/boussias"],
  a[href*="linkedin.com/company/boussias"]{
    position: static !important;   /* return to normal flow on small screens */
    display: inline-block !important;
    margin: 4px 8px !important;
  }
  /* add a small wrapper spacing at bottom of page */
  body { padding-bottom: 8px; }
}

/* ===============================
   FORCE REMOVE ALL ORANGE ACCENTS
   =============================== */

/* Global link color */
a,
a:visited,
.Link,
.link {
  color: var(--boussias-blue) !important;
}

a:hover,
a:active {
  color: var(--boussias-blue-dark) !important;
}

/* Search button (top bar magnifier) */
button,
button svg,
.SearchBtn,
.Search__button,
.Search__icon,
.Header__search button {
  background-color: var(--boussias-blue) !important;
  border-color: var(--boussias-blue) !important;
  color: #fff !important;
}

/* SVG icons that inherit orange */
svg path[fill="#f36c21"],
svg path[fill="#ff6a00"],
svg path[stroke="#f36c21"],
svg path[stroke="#ff6a00"] {
  fill: var(--boussias-blue) !important;
  stroke: var(--boussias-blue) !important;
}

/* Back-to-top floating button */
.ScrollToTop,
.ScrollToTop__button,
button[aria-label*="top"],
button[title*="top"] {
  background-color: var(--boussias-blue) !important;
  border-color: var(--boussias-blue) !important;
}

/* Any leftover Zoho accent class */
[class*="orange"],
[class*="Orange"],
[class*="accent"] {
  color: var(--boussias-blue) !important;
  background-color: var(--boussias-blue) !important;
}
/* =========================
   FINAL BRAND OVERRIDES
   ========================= */
:root{
  --boussias-blue:#0a7ea4;
  --boussias-blue-dark:#086a8b;
}

/* 1) Keep MODULE buttons always white text (even if links are blue globally) */
.Modules__module a,
.Modules__module a:visited,
.Modules__module a:hover,
.Modules__module a:active{
  color:#fff !important;
}

/* 2) Search button (top bar) */
.Header__searchBtn,
.Header__search button,
.Header__search button[type="submit"],
.Search__button,
.Search__searchBtn,
.Search__searchIconBtn{
  background: var(--boussias-blue) !important;
  border-color: var(--boussias-blue) !important;
}

/* If the magnifier is an SVG / icon that stays orange */
.Header__searchBtn svg,
.Header__search button svg,
.Search__button svg{
  fill:#fff !important;
  stroke:#fff !important;
}

/* 3) Back-to-top floating button */
.ScrollToTop,
.ScrollToTop__button,
.BackToTop,
.BackToTop__btn,
button[aria-label*="top"],
button[title*="top"]{
  background: var(--boussias-blue) !important;
  border-color: var(--boussias-blue) !important;
}
.ScrollToTop svg,
.BackToTop svg{
  fill:#fff !important;
  stroke:#fff !important;
}

/* 4) The "document" icon orange lines (force any orange-ish stroke/fill to blue) */
svg [stroke*="f36c21"],
svg [fill*="f36c21"],
svg [stroke*="ff6a00"],
svg [fill*="ff6a00"],
svg [stroke*="e64a19"],
svg [fill*="e64a19"]{
  stroke: var(--boussias-blue) !important;
  fill: var(--boussias-blue) !important;
}

/* =========================
   FIX: long labels (Greek) in module buttons
   ========================= */

/* Let button text wrap nicely */
.Modules__module a,
a[data-id="kb_module"],
a[data-id="ticket_module"],
a[href*="/newticket"]{
  white-space: normal !important;     /* allow wrapping */
  text-align: center !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 54px !important;        /* ensures button remains visible */
  padding: 14px 22px !important;      /* slightly smaller sides */
}

/* Ensure the Ticket icon above doesn’t cover the button (Greek tends to wrap) */
a[data-id="ticket_module"],
a[href*="/newticket"]{
  padding-top: 18px !important;       /* extra breathing room */
}

/* Move the icon a bit higher to avoid overlapping wrapped text */
a[data-id="ticket_module"]::before,
a[href*="/newticket"]::before{
  top: -76px !important;
}

/* =========================
   FORCE: top search button orange -> blue
   ========================= */

/* Target the search icon button in header (multiple themes/classes) */
.Header__search *[role="button"],
.Header__search button,
.Header__searchBtn,
.Search__button,
.Search__iconBtn,
button[aria-label*="Search"],
button[title*="Search"]{
  background-color: #0a7ea4 !important;
  border-color: #0a7ea4 !important;
  background-image: none !important;
}

/* Make the magnifier icon white */
.Header__search svg,
.Header__search button svg,
.Header__search i,
.Search__button svg,
.Search__iconBtn svg{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================
   OVERRIDE ZOHO THEME COLORS
   ========================= */
:root{
  --color-brand: #0a7ea4;
  --color-primary: #0a7ea4;
  --color-statusLabel: #0a7ea4;

  --color-unFollow: #0a7ea4;
  --color-overDue: #0a7ea4;
  --color-idea: #0a7ea4;

  --color-userCategory: #0a7ea4;
  --color-announcement: #0a7ea4;
  --color-discussion: #0a7ea4;
  --color-question: #0a7ea4;

  /* keep semantic colors */
  --color-danger: #f35969;
  --color-problem: #f95656;
  --color-red: #f35969;

  --color-black: #000;
}

/* =========================
   FIX MODULE BUTTON HOVER
   ========================= */
.Modules__module a,
.Modules__module a:visited,
.Modules__module a:hover,
.Modules__module a:active,
a[data-id="kb_module"],
a[data-id="kb_module"]:visited,
a[data-id="kb_module"]:hover,
a[data-id="kb_module"]:active,
a[data-id="ticket_module"],
a[data-id="ticket_module"]:visited,
a[data-id="ticket_module"]:hover,
a[data-id="ticket_module"]:active,
a[href*="/newticket"],
a[href*="/newticket"]:visited,
a[href*="/newticket"]:hover,
a[href*="/newticket"]:active{
  color:#fff !important;
  text-decoration:none !important;
  filter:none !important;              /* stop “blue hover” wash */
  background: var(--boussias-blue) !important;
}

/* optional: nicer hover feedback */
.Modules__module a:hover{
  background: var(--boussias-blue-dark) !important;
  transform: translateY(-1px) !important;
}