/* Minimal style matching nathanstefanik.xyz (see its STYLE.md):
   browser default serif, no font-family, no web fonts, no custom colors —
   only layout rules plus the functional bits (vocab table, flashcards). */

/* Body styles */
body {
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

/* Navigation styles (same as pagestyle.css on the main site) */
.navigation {
    overflow: hidden;
    top: 0px;
}
.navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.navigation li {
    float: left;
    font-size: 18px;
}
.navigation a {
    display: block;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    text-align: center;
    text-decoration: none;
}
.navigation li a:hover {
    text-decoration: underline;
}

/* Typography */
p {
    line-height: 1.5;
    text-align: justify;
}
li {
    line-height: 1.5;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Vocab table */
table.vocab {
    border-collapse: collapse;
    width: 100%;
}
table.vocab th {
    text-align: left;
    border-bottom: 2px solid black;
    padding: 6px 16px 6px 0;
}
table.vocab td {
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    padding: 6px 16px 6px 0;
}
td.fr { font-weight: bold; }
td.fr .pos, td.ex .ex-en {
    display: block;
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
}
.badge {
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
}

/* Flashcards (flip mechanics only, no decoration) */
.fc { margin: 1em 0; }
.fc-card {
    position: relative;
    height: 180px;
    cursor: pointer;
    perspective: 900px;
}
.fc-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1em 1.5em;
    background: white;
    border: 1px solid black;
    backface-visibility: hidden;
    transition: transform 0.4s;
}
.fc-front { transform: rotateY(0deg); font-size: 1.4em; font-weight: bold; }
.fc-back  { transform: rotateY(180deg); }
.fc-card.flipped .fc-front { transform: rotateY(-180deg); }
.fc-card.flipped .fc-back  { transform: rotateY(0deg); }
.fc-front .pos, .fc-back .ex {
    font-weight: normal;
    font-style: italic;
    font-size: 0.75em;
    margin-top: 0.5em;
}
.fc-back .en { font-size: 1.2em; font-weight: bold; }
.fc-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}
#fc-count { min-width: 4.5em; text-align: center; }

/* Answer keys */
details { margin: 1em 0; }
summary { cursor: pointer; }