/*
 * This file is part of my curriculum vitae (http://cv.ulysses.fr).
 * SPDX-FileCopyrightText: Copyright © 2007-2026 Johan Cwiklinski
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * Complements Fomantic UI: restores the historical background and applies the
 * translucent black of the former header to the inverted components.
 */

body {
    background: lightslategray url(../images/gnu.jpg) top right no-repeat;
    padding: 0 1em;
}

/* Fomantic sizes `.ui.container` off the viewport with fixed widths, so the
   body padding below would push it out of view. Make it fluid instead and let
   the body padding define the gutters. */
.ui.container {
    width: 100% !important;
    max-width: 1127px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* gnu.jpg is 195px wide: keep a gutter on the right so it stays visible,
   the way the old `.content { margin-right: 200px }` rule did. */
@media (min-width: 1000px) {
    body {
        padding-right: 205px;
    }
}

/* Former header look: translucent black, rounded, dropped shadow.
   The `:first-child` override is needed because Fomantic zeroes the top
   margin of a menu that opens the page. */
body > .ui.inverted.menu:first-child {
    margin: 1em 0 0;
}

.ui.inverted.menu {
    background: rgba(0, 0, 0, .6);
    box-shadow: 1px 1px 13px black;
}

/* Same treatment for the prose segment, so the GNU image shows through. */
.ui.inverted.segment {
    background: rgba(0, 0, 0, .6);
    box-shadow: 1px 1px 13px black;
}

/* Fomantic's global link blue (#4183c4) is too dark on the translucent black;
   #54c8ff is the colour it uses itself in inverted contexts. */
.ui.inverted.segment a {
    color: #54c8ff;
}

/* The CV versions are the point of the page: roomier, larger titles.
   The whole card is the link, so `.header` is a div, not an anchor. */
.ui.cards > .card {
    box-shadow: 1px 1px 13px black;
}

/* Decorative figures sit in a reserved column on the left, vertically
   centred. Absolute positioning rather than `float`, so the text does not
   flow around them, and rather than flexbox, so Fomantic's direct-child
   selectors keep matching. */
.ui.segment.with-figure {
    position: relative;
    padding-left: 9.5rem;
}

.section-figure {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    width: 6rem;
    height: auto;
}

.ui.cards > .card > .content {
    position: relative;
    /* rem, not em: the reserved column has to line up with the glyph, whose
       own font-size would otherwise change what `em` means for each. */
    padding: 1.5rem 1.5rem 1.5rem 5.5rem;
}

i.icon.card-figure {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    margin: 0;
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
}

/* Purely decorative: drop them rather than squeeze the text on small screens. */
@media (max-width: 600px) {
    .ui.segment.with-figure {
        padding-left: 1em;
    }

    .ui.cards > .card > .content {
        padding-left: 4rem;
    }

    .section-figure {
        display: none;
    }

    i.icon.card-figure {
        font-size: 1.75rem;
    }
}

.ui.cards > .card > .content > .header {
    font-size: 1.6em;
}

.ui.cards > .card > .content > .description {
    margin-top: .8em;
    font-size: 1.05em;
}

main.ui.container {
    margin-top: 1.5em;
    margin-bottom: 2em;
}

main.ui.container > section + section {
    margin-top: 2em;
}

.ui.basic.segment.social {
    text-align: center;
}

/* Fomantic has no visually-hidden / sr-only utility, and its own `.hidden`
   variants are display:none, which hides content from screen readers too.
   Standard clip pattern: off-screen for sight, still read out. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Fomantic styles no focus state at all on cards and menu items. A single
   colour cannot reach 3:1 against all three backgrounds here (dark panel,
   lightslategray page, white card), so the ring is two-toned: whichever tone
   fails on a given background, the other one carries it. */
a:focus-visible,
.ui.menu a.item:focus-visible,
.ui.cards > a.card:focus-visible,
.ui.button:focus-visible {
    outline: 2px solid #1b1c1d;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}

/* Keep the card's own drop shadow while focused. */
.ui.cards > a.card:focus-visible {
    box-shadow: 0 0 0 5px #fff, 1px 1px 13px black;
}

/* Fomantic only reveals data-tooltip on :hover, so keyboard users never see
   it. Mirror the hover rule on focus. */
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    pointer-events: auto;
    opacity: 1;
}

/* Fomantic ships no prefers-reduced-motion guard, and a card lifts on hover. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .ui.cards a.card:hover {
        transform: none;
    }
}