/* ============================================================
   LAIF Theme Customisation
   ============================================================ */

/* Import MuseoModerno font */
@import url('/fonts/museomoderno.css');

/* Redirect external fonts to MuseoModerno */
@font-face { font-family: 'Fira Sans'; src: local('MuseoModerno'); }
@font-face { font-family: 'Lato'; src: local('MuseoModerno'); }

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
  --font-subheading: "MuseoModerno", "Lato", sans-serif;
  --font-title:      "MuseoModerno", "Lato", sans-serif;
  --font-body:       "MuseoModerno", "Lato", sans-serif;
  --color-primary:   #000FDF;
  --color-secondary: #FF007E;
  --color-info:      #FF007E;
  --color-warning:   #FFCCE5;
  --color-footer:    #000079;
  --color-surface:   #f5f5f5;
  --color-card-shadow: rgba(0, 15, 223, 0.15);
  --color-focus-ring: #FF007E;
}

/* ============================================================
   Typography
   ============================================================ */
body, html, * {
  font-family: "MuseoModerno", "Lato", sans-serif !important;
  font-weight: normal !important;
}

strong, b {
  font-weight: normal !important;
}

/* ── Remove bold/semibold everywhere: override Tailwind v4 CSS variables globally ── */
/* Applied to all elements so var(--font-weight-bold/semibold) resolves to 400 */
*, *::before, *::after {
  --font-weight-bold: 400;
  --font-weight-semibold: 400;
  --font-weight-medium: 400;
  --tw-font-weight: 400;
}

/* Restore for buttons and interactive elements that intentionally use weight for UX */
button, a.custom-button,
input[type="button"], input[type="submit"] {
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
}

/* ── Homepage h1: "Luxembourg AI Factory " in black, "Datasets Catalogue" in electric blue ── */
/* Selector targets only the homepage h1 which has all three classes: font-bold + text-4xl + font-title */
h1.font-bold.font-title {
  font-size: 0 !important;
  line-height: 0 !important;
}
h1.font-bold.font-title::before {
  content: "Luxembourg AI Factory ";
  color: #000000;
  font-size: 2.25rem;
  line-height: 1.2;
  font-family: "MuseoModerno", "Lato", sans-serif;
  font-weight: 400;
}
h1.font-bold.font-title::after {
  content: "Datasets Catalogue";
  color: #000FDF;
  font-size: 2.25rem;
  line-height: 1.2;
  font-family: "MuseoModerno", "Lato", sans-serif;
  font-weight: 400;
}

/* Dataset card title (div with font-bold text-[20px]) — electric blue */
div[class*="font-bold"][class*="text-\[20px\]"] {
  color: #000FDF !important;
}

/* Dataset detail page — main title (PageHeading h1 with text-black override) */
h1[class*="text-black"][class*="font-bold"] {
  color: #000FDF !important;
}

/* Footer column headings — not bold, slightly larger, with space below */
footer h3 {
  font-weight: normal !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 1rem !important;
}

/* ============================================================
   Header & Navigation
   ============================================================ */
header,
nav[class*="bg-"] {
  background-color: #FFFFFF !important;
}

/* Header logo */
header a[href="/"] img[alt="Logo"],
header img[alt="Logo"],
img[alt="Logo"][data-nimg="1"] {
  content: url('/logo.png') !important;
  width: 250px !important;
  max-width: 250px !important;
  min-width: 250px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  header a[href="/"] img[alt="Logo"],
  header img[alt="Logo"],
  img[alt="Logo"][data-nimg="1"] {
    content: url('/logo.png') !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    height: auto !important;
  }
}

/* Nav links — blue text, pink hover, no background ever
   Active state class: bg-primary text-white rounded-md relative
   Inactive state class: text-black rounded-md relative */
div.lg\:flex.lg\:text-lg a,
div[class*="lg:flex"] a,
header div[class*="hidden"][class*="items-center"] a,
header .hidden.items-center a,
header a.relative.px-4.py-2,
header a[class*="rounded-md"][href="/"],
header a[class*="rounded-md"][href="/datasets"],
header a[class*="rounded-md"][href="/themes"],
header a[class*="rounded-md"][href="/publishers"],
header a[class*="rounded-md"][href="/about"] {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  border-radius: 0px !important;
  padding: 0.5rem 1rem !important;
  color: #000FDF !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

div.lg\:flex.lg\:text-lg a:hover,
div[class*="lg:flex"] a:hover,
header div[class*="hidden"][class*="items-center"] a:hover,
header .hidden.items-center a:hover,
header a.relative.px-4.py-2:hover,
header a[class*="rounded-md"][href="/"]:hover,
header a[class*="rounded-md"][href="/datasets"]:hover,
header a[class*="rounded-md"][href="/themes"]:hover,
header a[class*="rounded-md"][href="/publishers"]:hover,
header a[class*="rounded-md"][href="/about"]:hover {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  color: #FF007E !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Login button */
header a.bg-primary.text-white,
header a.bg-primary.text-white.hover\:bg-secondary,
header a:has(.fa-user) {
  background-color: var(--color-primary) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
}

header a.bg-primary.text-white:hover,
header a.bg-primary.text-white.hover\:bg-secondary:hover,
header a:has(.fa-user):hover {
  background-color: var(--color-secondary) !important;
  color: white !important;
}

/* Cart icon */
header a[href="/basket"],
header a:has(svg.fa-cart-shopping) {
  color: var(--color-primary) !important;
  background-color: transparent !important;
  transition: color 0.2s ease-in-out !important;
}

header a[href="/basket"]:hover,
header a:has(svg.fa-cart-shopping):hover {
  color: var(--color-secondary) !important;
}

/* Header SVG icons */
header svg[class*="w-5"],
header svg[class*="w-6"],
nav svg[class*="w-5"],
nav svg[class*="w-6"] {
  color: var(--color-primary) !important;
}

/* ============================================================
   Buttons
   ============================================================ */
button.bg-primary.text-white,
button[class*="bg-primary"][class*="text-white"],
button[class*="bg-primary"],
button[class*="btn"],
a.bg-primary.text-white.hover\:bg-secondary,
input[type="submit"],
input[type="button"] {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  transition: all 0.2s ease-in-out !important;
}

button.bg-primary.text-white:hover,
button[class*="bg-primary"][class*="text-white"]:hover,
button[class*="bg-primary"]:hover,
button[class*="btn"]:hover,
a.bg-primary.text-white.hover\:bg-secondary:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
}

/* Outline/secondary buttons */
button[class*="secondary"],
button[class*="outline"],
a.bg-transparent.text-primary.border-2.border-primary,
button.bg-transparent.text-primary.border-2.border-primary {
  background-color: white !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}

button[class*="secondary"]:hover,
button[class*="outline"]:hover,
a.bg-transparent.text-primary.border-2.border-primary:hover,
button.bg-transparent.text-primary.border-2.border-primary:hover {
  background-color: var(--color-secondary) !important;
  color: white !important;
  border-color: var(--color-secondary) !important;
}

/* Secondary color buttons */
button[class*="bg-secondary"],
a[class*="bg-secondary"] {
  background-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
}

button[class*="bg-secondary"]:hover,
a[class*="bg-secondary"]:hover {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* Warning/clear buttons */
a.bg-warning.text-black,
a[class*="bg-warning"],
button[class*="clear"],
button[aria-label*="clear"],
button[aria-label*="Clear"] {
  background-color: var(--color-primary) !important;
  color: white !important;
  border: none !important;
}

a.bg-warning.text-black:hover,
a[class*="bg-warning"]:hover,
button[class*="clear"]:hover,
button[aria-label*="clear"]:hover,
button[aria-label*="Clear"]:hover {
  background-color: var(--color-secondary) !important;
}

/* Add to basket buttons */
button:has(svg[data-icon="cart-shopping"]),
button:has(svg.fa-cart-shopping),
button[aria-label*="basket"],
button[aria-label*="cart"] {
  background-color: var(--color-primary) !important;
  color: white !important;
  border: none !important;
}

button:has(svg[data-icon="cart-shopping"]):hover,
button:has(svg.fa-cart-shopping):hover,
button[aria-label*="basket"]:hover,
button[aria-label*="cart"]:hover {
  background-color: var(--color-secondary) !important;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  padding: 0.5rem 1rem !important;
}

/* ============================================================
   Links (outside footer only)
   ============================================================ */
:not(footer) a[class*="text-primary"],
:not(footer) a[class*="text-info"] {
  color: var(--color-primary) !important;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

:not(footer) a[class*="text-primary"]:hover,
:not(footer) a[class*="text-info"]:hover {
  color: var(--color-secondary) !important;
}

:not(footer) a[class*="text-secondary"] { color: var(--color-secondary) !important; }
:not(footer) a[class*="text-secondary"]:hover { color: var(--color-primary) !important; }

/* ============================================================
   Utility classes
   ============================================================ */
.bg-primary   { background-color: var(--color-primary) !important;   color: #FFFFFF !important; }
.bg-secondary { background-color: var(--color-secondary) !important; color: #FFFFFF !important; }
.bg-surface   { background-color: var(--color-surface) !important; }
.text-primary   { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-info      { color: var(--color-info) !important; }
.text-warning   { color: var(--color-warning) !important; }

/* ============================================================
   Focus & Forms
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 15, 223, 0.1) !important;
}

/* ============================================================
   Cards
   ============================================================ */
[class*="card"],
[class*="shadow"] {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

[class*="card"]:hover,
[class*="shadow"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px var(--color-card-shadow) !important;
}

li.break-words.p-8.bg-white { padding: 0 !important; }
li.break-words.p-8.bg-white > a { padding: 2rem !important; display: block !important; }

/* ============================================================
   Export Metadata buttons (RDF, TTL, JSON-LD) — light pink + black text
   ============================================================ */
aside div.rounded-lg.px-1.transition {
  background-color: #FFCCE5 !important;
  color: #000000 !important;
}
aside div.rounded-lg.px-1.transition button,
aside div.rounded-lg.px-1.transition span {
  color: #000000 !important;
}

/* ============================================================
   Contact Point — trim any leading whitespace on email text
   ============================================================ */
aside div.flex.gap-8.items-center p {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* "Explore our themes" title — homepage only */
div.flex.flex-col.w-full:has(div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-5) {
  display: flex !important;
  flex-direction: column !important;
}
/* Hidden by default — will be shown only inside the homepage container (text-center) */
div.flex.flex-col.w-full:has(div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-5)::before {
  display: none !important;
}
/* Show only on homepage — PageContainer has text-center class only on homepage */
div.text-center div.flex.flex-col.w-full:has(div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-5)::before {
  content: "Explore our themes";
  display: block !important;
  width: 100% !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: #000 !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
}


.link-arrow::after {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('/logos/search-icon.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform: none !important;
  transition: transform 0.2s !important;
  vertical-align: middle !important;
}

.link-arrow:hover::after {
  transform: translate(0.25rem) !important;
}

/* ============================================================
   Hero banner
   ============================================================ */
.w-screen.absolute.inset-0.bg-cover.bg-center,
div[class*="bg-cover"][class*="bg-center"] {
  background-image: url('/logos/hero-banner-laif.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============================================================
   About page — hero banner behind "About" heading + intro paragraph
   Scoped to h1#about (id generated by rehype-slug from "# About")
   ============================================================ */
h1#about,
h1#about + p {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  padding-left: calc(50vw - 50% + 3rem);
  padding-right: calc(50vw - 50% + 3rem);
  background-image: url('/logos/hero-banner-laif.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #FFFFFF !important;
  overflow-x: hidden;
}

div.container:has(h1#about) {
  overflow-x: hidden;
  max-width: 100%;
}

h1#about {
  padding-top: 3rem !important;
  padding-bottom: 1rem !important;
  margin-bottom: 0 !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 2.5rem !important;
}

@media (min-width: 768px) {
  h1#about { font-size: 38px !important; }
  h1#about,
  h1#about + p {
    padding-left: calc(50vw - 50% + 8rem) !important;
    padding-right: calc(50vw - 50% + 8rem) !important;
  }
}

h1#about + p {
  padding-top: 0.5rem !important;
  padding-bottom: 3rem !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

h1#about + p a {
  color: #FF007E !important;
  text-decoration: underline !important;
}
h1#about + p a:hover {
  color: #FFFFFF !important;
}

/* ============================================================
   About section (homepage) — white text on hero background
   ============================================================ */
div.mb-20.relative h3,
div.mb-20.relative p,
div.mb-20.relative span {
  color: #FFFFFF !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

div.mb-20.relative h3 {
  font-size: 28px !important;
  line-height: 2.5rem !important;
}

@media (min-width: 768px) {
  div.mb-20.relative h3 {
    font-size: 38px !important;
  }
}

div.mb-20.relative a.link-arrow {
  color: #FFFFFF !important;
}

div.mb-20.relative a.link-arrow:hover {
  color: var(--color-secondary) !important;
}

/* ============================================================
   Search icon
   ============================================================ */
input[type="search"],
input[placeholder*="Search"],
input[placeholder*="search"] {
  background-image: url('/logos/search-icon.svg') !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 20px 20px !important;
  padding-right: 3rem !important;
}

/* ============================================================
   Footer
   ============================================================ */
footer,
footer[class*="bg-"] {
  background-color: var(--color-footer) !important;
  color: #FFFFFF !important;
  padding-top: 1.5rem !important;
  padding-bottom: 0 !important;
}

footer *,
footer p,
footer h3,
footer span,
footer a,
footer div,
footer li {
  color: #FFFFFF !important;
}

/* Force all footer links white — override Tailwind hover:text-info which loads later */
footer a,
footer a:link,
footer a:visited,
footer a:not(:hover) {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

footer a:hover,
footer a:focus,
footer a[class*="hover:text-info"]:hover,
footer a[class*="hover:text-info"]:focus {
  color: #AAAAAA !important;
  text-decoration: underline !important;
}

/* SVG icons in footer inherit white */
footer svg,
footer svg path {
  color: #FFFFFF !important;
  fill: currentColor !important;
}

/* ── Columns grid: Logos | Legal | Portal Links | Contact Us ── */
/* The container div itself IS the md:flex-row element */
footer div.container {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 0.9fr !important;
  grid-template-rows: auto auto !important;
  gap: 1.5rem 3rem !important;
  align-items: start !important;
}

/* Logo column (md:w-3/5) → col 1, row 1 */
footer div[class*="md:w-3/5"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

/* Tagline between LAIF logo and EU/EuroHPC group */
/* Inject as ::after on the vertical logos wrapper — appears below LAIF, above EU/EuroHPC
   by using CSS order: the tagline sits after the LAIF img (order 1) and before EU/EuroHPC (order 3) */
footer div[class*="md:w-3/5"] > div.flex.items-center.gap-4 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
}

footer div[class*="md:w-3/5"] > div.flex.items-center.gap-4 > img[alt="Footer logo"] {
  order: 1 !important;
}

footer div[class*="md:w-3/5"] > div.flex.items-center.gap-4::after {
  content: "Your one-stop shop for AI adoption.";
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  font-size: 0.875rem !important;
  font-weight: 300 !important;
  color: #FFFFFF !important;
  margin: 0.25rem 0 !important;
}

footer div[class*="md:w-3/5"] > div.flex.items-center.gap-4 > div.flex.gap-4.items-center {
  order: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Legal column (first md:w-1/6) → col 2, row 1 */
footer div[class*="md:w-1/6"]:first-of-type {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Portal Links column (second md:w-1/6) → col 3, row 1 */
footer div[class*="md:w-1/6"]:last-of-type {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* Contact Us column (md:w-1/3) → col 4, row 1 */
footer div[class*="md:w-1/3"] {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

/* ── Icons row: grid layout — row 1: icons, row 2: Get in Touch button ── */
footer div[class*="md:w-1/3"] div.flex.gap-4 {
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 0.75rem 0.75rem !important;
}

/* LinkedIn → row 1, col 1 */
footer div[class*="md:w-1/3"] div.flex.gap-4 a[href="https://www.linkedin.com/company/luxembourg-ai-factory/"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* Globe → row 1, col 2 */
footer div[class*="md:w-1/3"] div.flex.gap-4 a[href="https://aifactory.lu/"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* ── "Get in Touch" pink button → row 2, spans all columns ── */
footer a[href="https://aifactory.lu/contact-wizard"] {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.4rem 1rem !important;
  background-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  width: fit-content !important;
}
footer a[href="https://aifactory.lu/contact-wizard"] svg {
  display: none !important;
}
footer a[href="https://aifactory.lu/contact-wizard"]::after {
  content: "Get in Touch →";
}
footer a[href="https://aifactory.lu/contact-wizard"]:hover {
  opacity: 0.85 !important;
}

/* ── Technical support label above email ── */
footer a[href^="mailto:"]::before {
  content: "Technical support:";
  display: block !important;
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 0.1rem !important;
}

/* Hide original <p> disclaimer (replaced by ::after below) */
footer p.text-xs,
footer p[class*="text-xs"] {
  display: none !important;
}

/* ── Full-width disclaimer row below all columns ── */
footer div.container::after {
  content: "The Luxembourg AI Factory Datasets Catalogue is managed by Luxembourg National Data Service (LNDS) and offers a selection of AI-ready datasets. Access to the datasets is determined on a dataset-by-dataset basis. Only datasets meeting demonstrable quality standards are included, supporting FAIR principles and responsible reuse.";
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8rem !important;
  line-height: 1.6 !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  padding: 1.25rem 0 1.75rem !important;
  margin-top: 0.5rem !important;
}

/* Space between links within each column */
footer div.flex.flex-col.gap-2 {
  gap: 0.75rem !important;
}

/* Column headings */
footer h3 {
  font-weight: normal !important;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* ── Logos ── */
footer div.flex.items-center.gap-4:has(img) img[alt="Footer logo"],
footer div.flex.items-center.gap-4:has(img) img[alt="EU Logo"],
footer div.flex.items-center.gap-4:has(img) img[alt="EuroHPC Logo"],
footer div.flex.items-center.gap-4:has(img) img[alt="HPC Logo"] {
  height: 80px !important;
  max-height: 80px !important;
  max-width: 260px !important;
  width: auto !important;
  object-fit: contain !important;
}

footer img[alt="Footer logo"] { filter: none !important; }

footer img[alt="EU Logo"],
footer img[alt="EuroHPC Logo"],
footer img[alt="HPC Logo"] {
  filter: brightness(0) invert(1) !important;
}

footer img[alt="EuroHPC Logo"]:hover,
footer img[alt="EU Logo"]:hover { opacity: 0.8 !important; cursor: pointer !important; }

/* Footer link columns — allow links to sit on one line, no clipping */
footer div[class*="md:w-1/6"],
footer div[class*="md:w-1/3"] {
  overflow: visible !important;
  min-width: max-content !important;
}

footer div[class*="md:w-1/6"] a,
footer div[class*="md:w-1/3"] a {
  white-space: nowrap !important;
  display: block !important;
}

/* Hide legacy logos */
footer img[alt*="1+MG Initiative"],
footer img[alt*="B1MG project"],
footer img[alt*="1 Million"],
footer img[alt*="secondary-logo"],
footer img[alt*="Genomic"] {
  display: none !important;
}
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  footer div.container {
    grid-template-columns: 1fr 1fr !important;
  }
  footer div[class*="md:w-3/5"] { grid-column: 1 / -1 !important; }
  footer img[alt="Footer logo"] { max-height: 50px !important; width: 140px !important; }
  footer img[alt="EU Logo"],
  footer img[alt="EuroHPC Logo"],
  footer img[alt="HPC Logo"] { max-height: 50px !important; max-width: 150px !important; }

  button,
  input[type="submit"],
  input[type="button"] {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================================
   Dataset detail page — hide "Request data access" / Add to basket
   ============================================================ */

/* Targets the exact div from the rendered HTML */
div.flex.flex-col.rounded-2xl.px-7.py-5.gap-y-4:has(svg[data-icon="circle-plus"]),
div.flex.flex-col.rounded-2xl.px-7.py-5.gap-y-4:has(svg[data-icon="circle-minus"]),
div.flex.flex-col.rounded-2xl.px-7.py-5.gap-y-4:has(a.custom-button) {
  display: none !important;
}
div.container:has(h1#about) h2,
div.container:has(h1#about) p:not(h1#about + p) {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

@media (min-width: 768px) {
  div.container:has(h1#about) h2,
  div.container:has(h1#about) p:not(h1#about + p) {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

/* ============================================================
   About & How-to pages — pink accent words in headings via <mark>
   ============================================================ */

div.my-8 mark {
  background: none !important;
  color: #FF007E !important;
  font-weight: inherit !important;
}