@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');*/

/* =========================================================
   COOKIEBOT – WORKCRED STYLES (SCOPED + CLEAN)
   Load AFTER your main custom.css
   ========================================================= */

/* -------------------------
   A) BIG COOKIEBOT DIALOG
   ------------------------- */

/* Card feel */
#CybotCookiebotDialog {
    border-radius: 18px !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.30) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    overflow: hidden !important;
}

    /* Remove Cookiebot injected "TEST" overlay */
    #CybotCookiebotDialog > div[style*="font-size: 100px"],
    #CybotCookiebotDialog > div[style*="font-size:100px"] {
        display: none !important;
    }

/* Hide Cookiebot branding in big dialog */
#CybotCookiebotDialogPoweredbyCybot,
#CybotCookiebotDialogPoweredbyText,
#CybotCookiebotDialogPoweredbyLink a,
#CybotCookiebotDialogPoweredbyLink svg {
    display: none !important;
    visibility: hidden !important;
}

/* Kill any forced size on logo wrappers */
#CybotCookiebotDialogHeader #CybotCookiebotDialogHeaderLogosWrapper,
#CybotCookiebotDialogHeader #CybotCookiebotDialogPoweredbyLink {
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 76px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

/* Force the image itself */
#CybotCookiebotDialogHeader #CybotCookiebotDialogPoweredbyImage {
    width: 250px !important; /* your real size */
    height: auto !important;
    max-width: none !important; /* important: don't let it shrink */
    object-fit: contain !important;
    display: block !important;
}

/* Sometimes Cookiebot sets inline width/height attrs; neutralize */
#CybotCookiebotDialogHeader img#CybotCookiebotDialogPoweredbyImage {
    width: 250px !important;
    height: auto !important;
}
@media (max-width: 768px) {
    #CybotCookiebotDialogHeader #CybotCookiebotDialogPoweredbyImage {
        width: 250px !important;
        max-width: none !important;
    }
}
#CybotCookiebotDialogHeaderLogosWrapper,
#CybotCookiebotDialogPoweredbyLink,
#CybotCookiebotDialogPoweredbyImage {
    transform: none !important;
}



/* ---- Top pills: center + spacing ---- */
#CybotCookiebotDialogNav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
}

    #CybotCookiebotDialogNav ul,
    #CybotCookiebotDialogNav .CybotCookiebotDialogNavItems {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Pills typography (Oswald only here — not global) */
    #CybotCookiebotDialogNav a,
    #CybotCookiebotDialogNav button,
    #CybotCookiebotDialogNav a span,
    #CybotCookiebotDialogNav button span {
        font-family: "Roboto", Arial, sans-serif !important;
        font-weight: 400 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        border-radius: 999px !important;
        padding: 8px 18px !important;
        border: 1px solid rgba(17,24,39,.16) !important;
        background: #fff !important;
        color: #6b7280 !important;
    }

        /* Selected pill */
        #CybotCookiebotDialogNav a.CybotCookiebotDialogNavItemSelected,
        #CybotCookiebotDialogNav a[aria-selected="true"],
        #CybotCookiebotDialogNav button[aria-selected="true"] {
            color: #111827 !important;
            border-color: rgba(0,117,191,.35) !important;
            box-shadow: 0 8px 18px rgba(0,117,191,.18) !important;
        }

/* Headings / titles inside dialog */
#CybotCookiebotDialog h1,
#CybotCookiebotDialog h2,
#CybotCookiebotDialog h3,
#CybotCookiebotDialog h4,
#CybotCookiebotDialogBodyContentTitle,
.CybotCookiebotDialogDetailBodyContentTitle,
.CybotCookiebotDialogDetailBodyContentCookieContainerTypeHeader {
    font-family: "Roboto", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

/* Buttons inside dialog */
#CybotCookiebotDialog button,
#CybotCookiebotDialog a.CybotCookiebotDialogBodyButton,
#CybotCookiebotDialogFooter button,
#CybotCookiebotDialogFooter a {
    font-family: "Roboto", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* Desktop compactness */
@media (min-width: 992px) {
    #CybotCookiebotDialog {
        max-height: 82vh !important;
    }

    #CybotCookiebotDialogBody {
        max-height: 56vh !important;
        overflow: auto !important;
    }

    #CybotCookiebotDialogHeader {
        padding-top: 14px !important;
        padding-bottom: 6px !important;
    }

    #CybotCookiebotDialogFooter {
        padding-top: 12px !important;
        padding-bottom: 14px !important;
    }
}

/* -------------------------
   B) SMALL COOKIEBOT WIDGET
   ------------------------- */

/* Hide Cookiebot branding in widget */
.CookiebotWidget-main-logo,
.CookiebotWidget-poweredby,
.CookiebotWidget-footer .CookiebotWidget-poweredby,
.CookiebotWidget-footer a[href*="cookiebot"],
.CookiebotWidget-footer a[href*="usercentrics"],
#CookiebotWidget .CookiebotWidget-poweredby {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* IMPORTANT:
   Do NOT do `.CookiebotWidget * { font-family: Roboto !important; }`
   That’s too broad and causes weird side effects in some builds.
   Instead: apply Roboto only to widget title + buttons.
*/

/* Widget title / header */
.CookiebotWidget .CookiebotWidget-header,
.CookiebotWidget .CookiebotWidget-title,
.CookiebotWidget h1,
.CookiebotWidget h2,
#CookiebotWidget .CookiebotWidget-header,
#CookiebotWidget .CookiebotWidget-title {
    font-family: "Roboto", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

/* Widget buttons */
.CookiebotWidget button,
.CookiebotWidget .CookiebotWidget-button,
.CookiebotWidget a[role="button"],
#CookiebotWidget button,
#CookiebotWidget .CookiebotWidget-button,
#CookiebotWidget a[role="button"] {
    font-family: "Roboto", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
/* =========================================================
   COOKIEBOT – FIX SQUISHED WORKCRED LOGO (max-height:1.5em override)
   ========================================================= */

#CybotCookiebotDialogHeaderLogosWrapper,
#CybotCookiebotDialogPoweredbyLink {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
 /* min-height: 56px !important;   */   /* give the header room */
  overflow: visible !important;
}

/* The logo image itself */
#CybotCookiebotDialogPoweredbyImage {
  max-height: none !important;      /* <-- THIS is the key */
  height: auto !important;
  width: clamp(180px, 26vw, 260px) !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Extra safety if Cookiebot targets it with higher specificity */
#CybotCookiebotDialogHeader #CybotCookiebotDialogPoweredbyImage {
  max-height: none !important;
  height: auto !important;
}
/* HARD-disable Cookiebot IMG logo */
#CybotCookiebotDialogPoweredbyImage {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* =========================================================
   COOKIEBOT – SINGLE Workcred logo (background-based)
   ========================================================= */

#CybotCookiebotDialogPoweredbyLink {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 77px !important;
}

    /* the actual logo */
    #CybotCookiebotDialogPoweredbyLink::before {
        content: "" !important;
        display: block !important;
        width: 250px !important;
        height: 76px !important;
        background: url("/images/cookies-logo.webp") no-repeat left center !important;
        background-size: contain !important;
    }

 

    /* =========================================================
   GICS – Cookiebot header/logo: remove big gap + use one logo
   (put at VERY END of cookiebot.css)
   ========================================================= */

    /* Hide Cookiebot link branding line + svg */
    #CybotCookiebotDialogPoweredbyLink a,
    #CybotCookiebotDialogPoweredbyLink svg,
    #CybotCookiebotDialogPoweredbyText,
    #CybotCookiebotDialogPoweredbyCybot {
        display: none !important;
    }

    /* Remove the real Cookiebot <img> from layout (important: display:none, not visibility) */
    #CybotCookiebotDialogPoweredbyImage,
    #CybotCookiebotDialogPoweredbyLink img {
        display: none !important;
    }

/* Collapse the wrappers that are creating the tall header */
#CybotCookiebotDialogHeader,
#CybotCookiebotDialogHeaderLogosWrapper,
#CybotCookiebotDialogHeaderLogos,
#CybotCookiebotDialogPoweredbyLink {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* Give ONLY a small, controlled top padding for the header area */
#CybotCookiebotDialogHeader {
    padding: 14px 24px 6px !important;
}

/* === GICS: force exact header height & spacing === */

#CybotCookiebotDialogHeader {
    height: 130px !important; /* 30 + 76 + 20 */
    padding: 0 0 0 20px !important;
    display: flex !important;
    align-items: center !important;
}

/* Center logo block vertically inside header */
#CybotCookiebotDialogHeaderLogosWrapper {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Position logo with exact spacing */
#CybotCookiebotDialogPoweredbyLink::before {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 576px) {
    #CybotCookiebotDialogHeader {
        height: 150px !important;
    }
}