/* ==========================================================================
   Vikidia brand palette
   Darkest to lightest: #4A1C80 #6B3AA5 #9B4FD6 #E2C8F6 #C99BEE #D388EC #F0E4FA
   ========================================================================== */
   :root {
    --vd-ink: #4A1C80;         /* headings, primary text on light backgrounds */
    --vd-muted: #6B3AA5;       /* secondary text, links */
    --vd-accent: #9B4FD6;      /* buttons, active states */
    --vd-accent-dark: #6B3AA5; /* hover/focus, stronger contrast */
    --vd-line: #E2C8F6;        /* borders, hover backgrounds, dividers */
    --vd-tint: #F0E4FA;        /* pale backgrounds, pills */
}

/* ==========================================================================
   Base / page layout
   ========================================================================== */
body {
    background-color: var(--bs-tertiary-bg);
    text-align: center;
    font-family: sans-serif;
}

/* ==========================================================================
   Links
   No underline by default; underline only on hover and when active.
   ========================================================================== */
a {
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: underline;
}

/* Remove the default border around linked images */
a img {
    border: none;
}

/* ==========================================================================
   Images
   ========================================================================== */
img {
    margin: 1em;
}

/* ==========================================================================
   Text
   ========================================================================== */
p {
    font-size: 1em;
    margin-block-start: 0;
    margin-block-end: 0;
}

/* ==========================================================================
   Project grid (language tiles on the home page)
   Hover highlight for each project link.
   A transparent 2px border is reserved in the default state so that
   revealing it on hover never shifts the surrounding layout.
   ========================================================================== */
.vd-project a {
    border: 1px solid transparent;
    border-radius: 15px;
}
.vd-project a:hover {
    background-color: var(--vd-tint);
    border-color: var(--vd-accent);
    text-decoration: none;
}
/* Bootstrap's reboot underlines a:hover; keep the inner paragraphs clean */
.vd-project a:hover p {
    text-decoration: none;
}

/* ==========================================================================
   Icon labels
   Spacing between a Font Awesome icon and the text/link that follows it.
   The icon stays "attached" to its label: the margin never breaks at a line end.
   ========================================================================== */
.icon-label {
    margin-right: 0.35em;
}

/* ==========================================================================
   Social media icon row in the footer
   Icon-only links, evenly spaced, slightly larger than body text.
   ========================================================================== */
   .social-links a {
    margin: 0 0.4em 0.4em 0.4em;
    font-size: 1.3em;
}