Disaster Risk Gateway - User contributions [en]

Property:Has genre

2025-11-10T15:40:31Z

Myriad-admin: Created a property of type Text

This is a property of type [[Has type::Text]].

The allowed values for this property are:
* [[Allows value::Art]]
* [[Allows value::Cookbook]]
* [[Allows value::Fiction]]
* [[Allows value::History]]
* [[Allows value::Poetry]]
* [[Allows value::Science]]

MediaWiki:Common.css

2025-10-13T16:12:42Z

2025-10-13T12:37:04Z

Myriad-admin:

mw.loader.using(['mediawiki.util', 'mediawiki.searchSuggest'], function () {
$(function () {
if ($('#drg-navbar').length) return;

// ===== Helpers =====
function htmlFromPortlet(selector) {
// Return array of <li>...</li> HTML for all anchors in a portlet list (if present)
return $(selector).find('li a').map(function () {
return '<li>' + $(this).prop('outerHTML') + '</li>';
}).get();
}

function setBodyTopPaddingToNavbar() {
var h = $('#drg-navbar').outerHeight() || 60;
$('body').css('padding-top', h + 'px');
}

// Build a clean Echo link that won't inherit text-hiding styles
function buildEchoLink($a, label) {
if (!$a || !$a.length) return null;

// href + rel/target if present
var href = $a.attr('href') || '#';
var rel = $a.attr('rel') || '';
var target = $a.attr('target') || '';

// Try to capture a count if Echo provides it
var count = $a.attr('data-counter-num') || '';
if (count && /^\d+$/.test(count) && parseInt(count, 10) > 0) {
label += ' (' + count + ')';
}

// Try to reuse a child icon if present
var $icon = $a.find('span, i, svg').first().clone();
var iconHtml = $icon.length ? $icon.prop('outerHTML') : '';

// Return a fresh anchor with minimal classes (no text-hiding)
return [
'<a href="', href, '"',
(rel ? ' rel="' + rel + '"' : ''),
(target ? ' target="' + target + '"' : ''),
' class="drg-echo-link"',
'>',
iconHtml,
'<span class="drg-echo-label">', label, '</span>',
'</a>'
].join('');
}

// ===== Logo =====
const logoSrc = $('.mw-logo-icon').attr('src') || '/images/3/3f/Myriad_logo_icon_transparent.png';
const logoHtml = `
<a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
<img src="${logoSrc}" alt="MYRIAD Logo">
</a>`;

// ===== Build left-side links in order: About, Navigation, Contribute =====
const aboutHtml = `<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;

const navItems = [
{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },
{ title: 'Definitions', url: mw.util.getUrl('Definitions') },
{ title: 'Resources', url: mw.util.getUrl('Resources') }
];
const navHtml = `
<div class="drg-nav">
<span>Navigation</span>
<ul class="drg-nav-dropdown">
${navItems.map(i => `<li><a href="${i.url}">${i.title}</a></li>`).join('')}
</ul>
</div>`;

const contributeHtml = `<a href="${mw.util.getUrl('Contribute')}" class="flat-link">Contribute</a>`;

// ===== Search (with autocomplete) =====
const searchDropdownHtml = `
<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
<span id="drg-search-toggle" class="flat-link" style="cursor:pointer;">Search</span>
<form class="drg-search" id="drg-search-form" action="${mw.util.getUrl('Special:Search')}" method="get"
style="display:none; position: absolute; top: 100%; left: 0; background: white; padding: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 100;">
<input type="search" name="search" placeholder="Search..." class="mw-searchInput" autocapitalize="off" autocomplete="off">
<input type="submit" value="Search">
</form>
</div>`;

// ===== User dropdown =====
// We restore Echo (alerts/notices) + Watchlist inside the dropdown.
let userHtml;
if (mw.config.get('wgUserName')) {
const items = [];

// --- Echo notifications: build clean, labeled links ---
const $alertA = $('#pt-notifications-alert a').first();
const $noticeA = $('#pt-notifications-notice a').first();

const alertHtml = buildEchoLink($alertA, 'Your Alerts');
const noticeHtml = buildEchoLink($noticeA, 'Your Notices');

if (alertHtml) items.push('<li>' + alertHtml + '</li>');
if (noticeHtml) items.push('<li>' + noticeHtml + '</li>');

// --- Personal tools (except duplicate logout at the end) ---
$('#p-personal ul li').each(function () {
const $a = $(this).find('a');
const href = ($a.attr('href') || '');
const titleText = ($a.text() || '').trim();

// Skip Echo items we already handled
if (href.includes('Notifications') || href.includes('Echo')) return;

// Keep Watchlist
if (/Watchlist/i.test(href + titleText)) {
items.push(`<li>${$a.prop('outerHTML')}</li>`);
return;
}

// Skip Logout (we add our own)
if (/^log ?out$/i.test(titleText)) return;

// Include everyone else (Preferences, Contributions, etc.)
items.push(`<li>${$a.prop('outerHTML')}</li>`);
});

// Add a divider then Logout
items.push('<li class="drg-menu-divider"></li>');
items.push(`<li><a href="${mw.util.getUrl('Special:UserLogout')}">Logout</a></li>`);

userHtml = `
<div class="drg-user">
<span>Welcome, ${mw.config.get('wgUserName')}</span>
<ul class="drg-user-dropdown">${items.join('')}</ul>
</div>`;
} else {
userHtml = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
}

// ===== Tools dropdown (merge Actions + General like production) =====
const actionsLis = htmlFromPortlet('#p-cactions'); // Actions
let generalLis = htmlFromPortlet('#p-tb'); // General

// Fallback for Vector-2022 portlet structure
if (generalLis.length === 0) {
generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content');
}

const toolsHtml = `
<div class="drg-tools">
<span>Tools</span>
<ul class="drg-tools-dropdown">
${actionsLis.length ? `<li class="drg-menu-header">Actions</li>${actionsLis.join('')}` : ''}
${actionsLis.length && generalLis.length ? '<li class="drg-menu-divider"></li>' : ''}
${generalLis.length ? `<li class="drg-menu-header">General</li>${generalLis.join('')}` : ''}
</ul>
</div>`;

// ===== Inject Navbar =====
$('body').prepend(`
<div id="drg-navbar">
<div class="drg-navbar-container">
${logoHtml}
${aboutHtml}
${navHtml}
${contributeHtml}
${searchDropdownHtml}
<div class="drg-navbar-actions">
${userHtml}
${toolsHtml}
</div>
</div>
</div>
`);

// ===== Toggle search input visibility + autocomplete focus =====
$('#drg-search-toggle').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$('#drg-search-form').toggle();
$('#drg-search-form input[type="search"]').trigger('focus');
});

// Close search dropdown when clicking outside
$(document).on('click', function () { $('#drg-search-form').hide(); });
$('#drg-search-form').on('click', function (e) { e.stopPropagation(); });

// Make sure body top padding matches navbar height (since it can wrap)
setBodyTopPaddingToNavbar();
$(window).on('load resize', setBodyTopPaddingToNavbar);

// ===== Footer =====
function insertFooter() {
const icons = document.getElementById('footer-icons');
if (!icons) return setTimeout(insertFooter, 100);

icons.insertAdjacentHTML('beforebegin', `
<footer id="drg-footer">
<div class="drg-footer-inner">
<div class="drg-columns">
<div class="drg-column drg-column-left">
<a href="/index.php/Disaster_Risk_Gateway">About</a>
<a href="/index.php/Disaster_Risk_Gateway:Privacy_Notice">Privacy Notice</a>
<a href="/index.php/Disaster_Risk_Gateway:Terms_of_Use">Terms of Use</a>
<a href="mailto:DisasterRiskGateway@bgs.ac.uk"><strong>Contact Us</strong></a>
</div>
<div class="drg-column drg-column-center">
<div class="drg-eu-flag">
<img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg" alt="EU logo">
</div>
<div class="drg-eu-text">
MYRIAD-EU project has received funding from the European Union’s Horizon 2020 Research and Innovation Programme under Grant Agreement No. 101003276.
</div>
</div>
<div class="drg-column drg-column-right">
<a href="https://www.myriadproject.eu" target="_blank">MYRIAD-EU</a>
<a href="https://be.linkedin.com/company/myriad-eu-project" target="_blank">LinkedIn</a>
<a href="#" target="_blank">MYRIAD-EU dashboard</a>
</div>
</div>
<div class="drg-disclaimer-wrapper">
<div class="drg-disclaimer">
This site is hosted by the British Geological Survey but responsibility for the content of the site lies with the
<a href="https://www.myriadproject.eu" target="_blank" rel="noopener noreferrer">MYRIAD-EU project</a>.<br>
Questions or comments: <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>
</div>
</div>
</div>
</footer>
`);
}
insertFooter();
});
});

MediaWiki:Common.js

2025-10-13T12:24:45Z

Myriad-admin:

mw.loader.using(['mediawiki.util', 'mediawiki.searchSuggest'], function () {
$(function () {
if ($('#drg-navbar').length) return;

// ===== Helpers =====
function htmlFromPortlet(selector) {
// Return array of <li>...</li> HTML for all anchors in a portlet list (if present)
return $(selector).find('li a').map(function () {
return '<li>' + $(this).prop('outerHTML') + '</li>';
}).get();
}

function setBodyTopPaddingToNavbar() {
var h = $('#drg-navbar').outerHeight() || 60;
$('body').css('padding-top', h + 'px');
}

// ===== Logo =====
const logoSrc = $('.mw-logo-icon').attr('src') || '/images/3/3f/Myriad_logo_icon_transparent.png';
const logoHtml = `
<a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
<img src="${logoSrc}" alt="MYRIAD Logo">
</a>`;

// ===== Build left-side links in order: About, Navigation, Contribute =====
const aboutHtml = `<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;

const navItems = [
{ title: 'Catalogue', url: mw.util.getUrl('Catalogue') },
{ title: 'Definitions', url: mw.util.getUrl('Definitions') },
{ title: 'Resources', url: mw.util.getUrl('Resources') }
];
const navHtml = `
<div class="drg-nav">
<span>Navigation</span>
<ul class="drg-nav-dropdown">
${navItems.map(i => `<li><a href="${i.url}">${i.title}</a></li>`).join('')}
</ul>
</div>`;

const contributeHtml = `<a href="${mw.util.getUrl('Contribute')}" class="flat-link">Contribute</a>`;

// ===== Search (with autocomplete) =====
const searchDropdownHtml = `
<div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
<span id="drg-search-toggle" class="flat-link" style="cursor:pointer;">Search</span>
<form class="drg-search" id="drg-search-form" action="${mw.util.getUrl('Special:Search')}" method="get"
style="display:none; position: absolute; top: 100%; left: 0; background: white; padding: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 100;">
<input type="search" name="search" placeholder="Search..." class="mw-searchInput" autocapitalize="off" autocomplete="off">
<input type="submit" value="Search">
</form>
</div>`;

// ===== User dropdown =====
// We restore Echo (alerts/notices) + Watchlist inside the dropdown.
let userHtml;
if (mw.config.get('wgUserName')) {
const items = [];

// --- Echo notifications (ensure visible labels) ---
function cloneWithLabel($a, fallback) {
if (!$a || !$a.length) return null;
const $c = $a.clone(); // keep original intact
const hasText = ($c.text() || '').trim().length > 0;

if (!hasText) {
// Prefer a label from title (strip trailing counts), else fallback
let fromTitle = ($c.attr('title') || '').trim();
// Remove common trailing counters like " (3)" or " – 2"
fromTitle = fromTitle.replace(/\s*[\-–—]?\s*$?\d+$?\s*$/, '').trim();
// If still empty, use fallback
const label = fromTitle || fallback;
// Append a plain text node so the icon remains first
$c.append(document.createTextNode(' ' + label));
}
return $c;
}

const alertA = $('#pt-notifications-alert a').first();
const noticeA = $('#pt-notifications-notice a').first();

const alertC = cloneWithLabel(alertA, 'Your Alerts');
const noticeC = cloneWithLabel(noticeA, 'Your Notices');

if (alertC) items.push(`<li>${alertC.prop('outerHTML')}</li>`);
if (noticeC) items.push(`<li>${noticeC.prop('outerHTML')}</li>`);

// --- Personal tools (except duplicate logout at the end) ---
$('#p-personal ul li').each(function () {
const $a = $(this).find('a');
const href = ($a.attr('href') || '');
const titleText = ($a.text() || '').trim();

// Skip Echo items we already copied
if (href.includes('Notifications') || href.includes('Echo')) return;

// Keep Watchlist
if (href.match(/Watchlist/i)) {
items.push(`<li>${$a.prop('outerHTML')}</li>`);
return;
}

// Skip Logout (we add a clean one at the end)
if (titleText.match(/^log ?out$/i)) return;

// Include everyone else (Preferences, Contributions, etc.)
items.push(`<li>${$a.prop('outerHTML')}</li>`);
});

// Add a divider then Logout
items.push('<li class="drg-menu-divider"></li>');
items.push(`<li><a href="${mw.util.getUrl('Special:UserLogout')}">Logout</a></li>`);

userHtml = `
<div class="drg-user">
<span>Welcome, ${mw.config.get('wgUserName')}</span>
<ul class="drg-user-dropdown">${items.join('')}</ul>
</div>`;
} else {
userHtml = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
}

// ===== Tools dropdown (merge Actions + General like production) =====
// Actions: #p-cactions; General: #p-tb (Toolbox + extensions)
const actionsLis = htmlFromPortlet('#p-cactions'); // Actions
let generalLis = htmlFromPortlet('#p-tb'); // General (What links here, Upload, Special pages, etc.)

// Fallback: also look for toolbox under Vector-2022 portlet structure if needed
if (generalLis.length === 0) {
generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content');
}

const toolsHtml = `
<div class="drg-tools">
<span>Tools</span>
<ul class="drg-tools-dropdown">
${actionsLis.length ? `<li class="drg-menu-header">Actions</li>${actionsLis.join('')}` : ''}
${actionsLis.length && generalLis.length ? '<li class="drg-menu-divider"></li>' : ''}
${generalLis.length ? `<li class="drg-menu-header">General</li>${generalLis.join('')}` : ''}
</ul>
</div>`;

// ===== Inject Navbar =====
$('body').prepend(`
<div id="drg-navbar">
<div class="drg-navbar-container">
${logoHtml}
${aboutHtml}
${navHtml}
${contributeHtml}
${searchDropdownHtml}
<div class="drg-navbar-actions">
${userHtml}
${toolsHtml}
</div>
</div>
</div>
`);

// ===== Toggle search input visibility + autocomplete focus =====
$('#drg-search-toggle').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$('#drg-search-form').toggle();
$('#drg-search-form input[type="search"]').trigger('focus');
});

// Close search dropdown when clicking outside
$(document).on('click', function () { $('#drg-search-form').hide(); });
$('#drg-search-form').on('click', function (e) { e.stopPropagation(); });

// Make sure body top padding matches navbar height (since it can wrap)
setBodyTopPaddingToNavbar();
$(window).on('load resize', setBodyTopPaddingToNavbar);

// ===== Footer =====
function insertFooter() {
const icons = document.getElementById('footer-icons');
if (!icons) return setTimeout(insertFooter, 100);

icons.insertAdjacentHTML('beforebegin', `
<footer id="drg-footer">
<div class="drg-footer-inner">
<div class="drg-columns">
<div class="drg-column drg-column-left">
<a href="/index.php/Disaster_Risk_Gateway">About</a>
<a href="/index.php/Disaster_Risk_Gateway:Privacy_Notice">Privacy Notice</a>
<a href="/index.php/Disaster_Risk_Gateway:Terms_of_Use">Terms of Use</a>
<a href="mailto:DisasterRiskGateway@bgs.ac.uk"><strong>Contact Us</strong></a>
</div>
<div class="drg-column drg-column-center">
<div class="drg-eu-flag">
<img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg" alt="EU logo">
</div>
<div class="drg-eu-text">
MYRIAD-EU project has received funding from the European Union’s Horizon 2020 Research and Innovation Programme under Grant Agreement No. 101003276.
</div>
</div>
<div class="drg-column drg-column-right">
<a href="https://www.myriadproject.eu" target="_blank">MYRIAD-EU</a>
<a href="https://be.linkedin.com/company/myriad-eu-project" target="_blank">LinkedIn</a>
<a href="#" target="_blank">MYRIAD-EU dashboard</a>
</div>
</div>
<div class="drg-disclaimer-wrapper">
<div class="drg-disclaimer">
This site is hosted by the British Geological Survey but responsibility for the content of the site lies with the
<a href="https://www.myriadproject.eu" target="_blank" rel="noopener noreferrer">MYRIAD-EU project</a>.<br>
Questions or comments: <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>
</div>
</div>
</div>
</footer>
`);
}
insertFooter();
});
});

2025-08-29T14:51:07Z

Myriad-admin:

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

/* ===== GLOBAL FONT ===== */
html, body, #content, #mw-content-text, .drg-navbar-container, .mainpage-card, #drg-footer, .drg-footer-inner, .drg-column {
font-family: 'Barlow', Arial, sans-serif;
}

/* ===== HIDE VECTOR PORTLETS & DEFAULT FOOTER LINKS ===== */
#p-logo,
#mw-head,
#mw-head-base,
#mw-navigation,
#mw-panel,
#mw-mf-page-header,
[id^="mw-mf-"],
header.vector-header,
.vector-page-toolbar,
header.mw-body-header.vector-page-titlebar,
#footer-places,
#footer-info-lastmod,
#p-views,
#p-cactions,
*#p-personal,
.vector-user-links,
#left-navigation,
#right-navigation {
display: none !important;
}

/* ===== REMOVE ALL <hr> ===== */
hr {
display: none !important;
}

/* ===== RESET & BASE STYLING ===== */
html {
font-size: 100%;
margin: 0;
min-height: 100vh;
background: #fff;
}
body {
margin: 0;
padding-top: 60px;
background: #fff;
color: #000;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content,
#mw-content-text {
flex-grow: 1;
}

/* ===== MYRIAD COLOR PALETTE ===== */
:root {
--myriad-blue: #374CFF;
--myriad-dark: #000091;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
--myriad-light: #e5ccff;
}

/* ===== GLOBAL LINKS & BUTTONS ===== */
a {
color: var(--myriad-blue);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.drg-button {
display: inline-block;
padding: .5em 1em;
font-variant: small-caps;
border-radius: 7px;
background: var(--myriad-blue);
color: #fff !important;
transition: background 200ms;
text-decoration: none !important;
}

/* === Responsive logo === */
.logo-container {
max-width: 43.75rem; /* 700px ÷ 16 */
margin: 0 auto;
padding: 0.3125rem; /* 5px ÷ 16 */
text-align: center;
}

.responsive-logo img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/* ===== NAVBAR ===== */
#drg-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
border-bottom: 1px solid #ddd;
z-index: 10000;
overflow: visible !important;
}
.drg-navbar-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
padding: .75em 1em;
gap: 1em;
flex-wrap: nowrap;
overflow-x: visible !important;
position: relative;
}
.drg-navbar-logo {
display: flex;
align-items: center;
gap: .5em;
flex-shrink: 0;
margin-right: 2em;
}
.drg-navbar-logo img {
height: 40px;
width: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover glow effect in Myriad Green */
.drg-navbar-logo:hover img {
transform: scale(1.05);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.8),
0 0 24px var(--myriad-green);
}

.drg-navbar-logo .drg-logo-text {
font-weight: bold;
font-size: 1.25rem;
color: #000;
}

/* ===== NAVBAR LINK HOVER & ACTIVE ===== */
#drg-navbar a {
color: var(--myriad-blue);
transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

#drg-navbar a:hover {
color: var(--myriad-green);
transform: scale(1.08);
text-decoration: underline;
}

/* Hover & active for navbar dropdown*/
#drg-navbar .drg-nav > span,
#drg-navbar .drg-user > span,
#drg-navbar .drg-tools > span {
color: var(--myriad-blue);
transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

#drg-navbar .drg-nav:hover > span,
#drg-navbar .drg-user:hover > span,
#drg-navbar .drg-tools:hover > span {
color: var(--myriad-green);
transform: scale(1.08);
text-decoration: underline;
}

/* Active page link stays green */
#drg-navbar a.current,
#drg-navbar a.active,
#drg-navbar .selected a {
color: var(--myriad-green);
font-weight: 600;
text-decoration: underline;
}

/* ===== NAVIGATION DROPDOWN ===== */
.drg-nav {
position: relative;
cursor: pointer;
z-index: 10002;
}
.drg-nav > span {
font-weight: 500;
padding: .4em .6em;
}
.drg-nav > span::after {
content: "▾";
margin-left: .3em;
font-size: .75em;
}
.drg-nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
list-style: none;
margin: .2em 0 0;
padding: 0;
min-width: 160px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
z-index: 9999 !important;
}
.drg-nav-dropdown li a {
display: block;
padding: .5em 1em;
color: #000;
text-decoration: none;
white-space: nowrap;
}
.drg-nav-dropdown li a:hover {
background: #f5f5f5;
}
.drg-nav:hover .drg-nav-dropdown {
display: block !important;
}
.flat-link {
font-weight: 500;
margin-right: 1.5em;
}
.drg-navbar-actions {
display: flex;
align-items: center;
gap: 1em;
margin-left: auto;
flex-wrap: nowrap;
}

/* ===== USER & TOOLS DROPDOWNS ===== */
.drg-user, .drg-tools {
position: relative;
cursor: pointer;
}
.drg-user > span, .drg-tools > span {
padding: .4em .6em;
}
.drg-user > span::after, .drg-tools > span::after {
content: "▾";
margin-left: .3em;
font-size: .75em;
}
.drg-user-dropdown,
.drg-tools-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
list-style: none;
margin: .2em 0 0;
padding: 0;
min-width: 160px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
z-index: 9999 !important;
}
.drg-user-dropdown li a,
.drg-tools-dropdown li a {
display: block;
padding: .5em 1em;
color: #000;
text-decoration: none;
white-space: nowrap;
}
.drg-user-dropdown li a:hover,
.drg-tools-dropdown li a:hover {
background: #f5f5f5;
}
.drg-user:hover .drg-user-dropdown,
.drg-tools:hover .drg-tools-dropdown {
display: block !important;
}

/* ===== MAIN PAGE FLIP CARDS ===== */
.mainpage-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin: 3rem auto;
max-width: 1200px;
padding: 0 1rem;
}

/* Card container */
.mainpage-card {
flex: 0 1 220px;
max-width: 220px;
height: 180px;
perspective: 1000px;
text-decoration: none;
color: inherit;
display: block;
overflow: visible;
}

/* Inner wrapper for flip effect */
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}

/* Flip on hover */
.mainpage-card:hover .card-inner {
transform: rotateY(180deg);
}

/* Front and back faces */
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
box-sizing: border-box;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
overflow: hidden;
}

/* Front face */
.card-front {
background: var(--myriad-blue);
color: #fff;
text-align: center;
}

/* Remove MediaWiki wrapper box around images */
.card-front .thumb,
.card-front .mw-thumbnail {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 auto !important;
width: auto !important;
box-shadow: none !important;
}

/* Image */
.card-front img {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0;
display: block;
margin: 0 auto;
width: auto;
height: 80px; /* Set a fixed height */
object-fit: contain; /* Ensures image scales without distortion */
}

/* Remove code block grey background*/
.mainpage-card .card-front pre,
.mainpage-card .card-front code,
.mainpage-card .card-front .mw-code {
display: inline !important;
font: inherit !important;
line-height: inherit !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
color: inherit !important;
white-space: normal !important;
vertical-align: baseline !important;
}

/* Front titles */
.card-front h3 {
font-size: 1.25rem;
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 600;
}
.card-front pre {
display: flex !important;
align-items: center !important;
justify-content: center;
gap: 0.5rem;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: none !important;
white-space: normal !important;
}

.card-front pre .inline {
display: inline-block;
vertical-align: middle;
}

/* Back face */
.card-back {
position: relative;
border-radius: 16px;
overflow: hidden;
transform: rotateY(180deg);
text-align: center;
font-size: 0.95rem;
line-height: 1.4;
display: flex;
justify-content: center;
align-items: center;
}

/* Full-size back button */
.card-back a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #fff;
background-color: var(--myriad-blue);
border-radius: 16px;
font-weight: 600;
font-size: 1.1rem;
transition: background 0.3s, transform 0.3s;
padding: 1.5rem;
box-sizing: border-box;
text-align: center;
}

.card-back a:hover {
background-color: var(--myriad-pink);
transform: scale(1.02);
}

/* Hover animation for front */
.mainpage-card:hover .card-front {
transform: scale(1.03);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
border: 2px solid var(--myriad-blue);
background: #fff;
}

/* Responsive */
@media (max-width: 768px) {
.mainpage-cards {
gap: 1rem;
padding: 0 1rem;
}
.mainpage-card {
flex: 1 1 90%;
max-width: 90%;
}
}

/* ===== REMOVE DEFAULT MEDIAWIKI FOOTER BORDER ===== */
.mw-footer {
border-top: none;
padding: 0;
padding: 0.75em;
}

/* ===== FOOTER STYLES ===== */
#drg-footer {
background: linear-gradient(to top, #374cff 0%, #db20d2 80%, #ffffff 100%);
color: #fff;
padding: 10em 0; /* top/bottom padding for the DRG footer */
margin: 0;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 100vw;
left: 50%;
margin-left: -50vw;
}

/* ===== Override default MediaWiki footer container ===== */
.mw-footer-container {
padding-top: 0;
padding-bottom: 0;
}

.mw-footer-container #drg-footer {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

/* Remove default MediaWiki footer border */
.mw-footer {
border-top: none;
background: transparent;
}

/* Hide the default footer icons */
#footer-icons {
display: none;
}

/* ===== INNER FOOTER CONTENT ===== */
.drg-footer-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.drg-columns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2em;
text-align: center;
}

.drg-column {
flex: 0 1 calc(33.333% - 2em);
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
box-sizing: border-box;
}

.drg-column-left,
.drg-column-center,
.drg-column-right {
align-items: center;
}

.drg-eu-flag img {
max-height: 4em !important;
width: auto !important;
display: block;
margin: 0 auto;
border: 1px solid #fff;
box-sizing: border-box;
}

.drg-eu-text {
font-weight: bold;
color: #fff;
line-height: 1.5;
font-size: 1em;
max-width: 400px;
text-align: center;
}

.drg-disclaimer-wrapper {
margin-top: 2em;
text-align: center;
font-size: 0.9rem;
color: rgba(255,255,255,0.8);
}

.drg-disclaimer a {
color: #fff;
text-decoration: underline;
}

/* ===== FOOTER LINKS - WHITE WITH HOVER POP ===== */
#drg-footer a {
color: #fff; /* white links */
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

#drg-footer a:hover {
color: var(--myriad-green);
transform: scale(1.08); /* pop */
text-decoration: underline;
}

@media (max-width: 768px) {
.drg-columns {
flex-direction: column;
align-items: center;
gap: 1.5em;
}
.drg-column {
flex: 1 1 100%;
max-width: 500px;
}
}