/* Overrides on top of the hugo-profile theme, from an impeccable audit. */

/* Contrast: the theme fades text with opacity, which drops it below WCAG AA.
   Render text at full strength and use the secondary colour for de-emphasis. */
.navbar-brand,
#hero .subtitle,
#hero p,
#about .content,
#experience .tab-pane > *,
#experience .tab-pane small,
#experience a,
#education .card .card-body .education-content a,
#achievements .card h4 {
    opacity: 1 !important;
}

#hero h2 {
    opacity: 1;
    color: var(--text-secondary-color);
}

a {
    color: var(--text-link-color);
}

.text-secondary {
    color: var(--text-secondary-color) !important;
}

code {
    color: #a61e5d;
}

.dark code {
    color: #f783ac;
}

/* Section card titles are h4/h5 (not h5/h6) so the heading outline has no
   gaps; keep the theme's styling for them. */
#achievements .card h4 {
    color: var(--text-color) !important;
}

#education .card .card-body > a h5 {
    display: inline-block;
    text-decoration: none;
    color: var(--text-link-color) !important;
}

#education .card .card-body > a h5::after {
    content: "";
    display: block;
    width: 0px;
    height: 2px;
    bottom: 0.37em;
    background-color: var(--primary-color);
    transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
    opacity: 0.5;
}

#education .card .card-body > a h5:hover::after,
#education .card .card-body > a h5:focus::after,
#education .card .card-body > a h5:active::after {
    width: 100%;
}

/* Readability: keep long text under ~75 characters per line */
#experience .tab-pane li,
#education .education-content,
#about p {
    max-width: 60ch;
}

/* Avoid one-word last lines and lopsided headings */
p, li {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Neutral elevation instead of the theme's teal glow on hover */
#hero .image.animate img:hover,
#about .image img:hover,
#projects .card:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
}

/* No coloured shadows on the dark background */
.dark .showHeaderOnTop,
.dark #hero .image img,
.dark #about .image img,
.dark #experience .experience-container,
.dark #education .card,
.dark #education .card:hover,
.dark #projects .card,
.dark #projects .card:hover,
.dark footer .card:hover,
.dark #contact form .form-control {
    box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
}