/* site.css -- shared styles for mason.gmu.edu/~smetz3
   Consolidates tooltip, verse counter, cite.art, column/layout,
   and utility styles previously duplicated across individual pages.
*/

/* ===== Typography ===== */

h1 {
  text-align: center;
}

h2.cjk {
  font-family: "Arial", sans-serif;
}

/* ===== Citations ===== */

cite.art > q::after  { content: close-quote; }
cite.art > q::before { content: open-quote;  }
cite.art             { font-style: normal;   }

/* ===== W3C validation badges ===== */

img.w3c {
  align-content:  baseline;
  border:         none;
  display:        inline;
  height:         auto;
  margin-left:    5px;
  margin-right:   5px;
  max-width:      5em;
  vertical-align: middle;
}

/* ===== Verse layout and numbering =====
   Counter is named "number" (not "verse") to match the class-based
   markup already in place on Favorite.Things.html and
   My.Favorite.spoilers.html -- the name is purely internal to this
   stylesheet and invisible to the HTML, so keeping it consistent with
   the existing pages avoids touching their (extensively verified)
   markup at all.
*/

body {
  counter-reset: number;
}

p.chorus::before {
  content: "[verse]";
}

p.number::before {
  counter-increment: number;
  content: "[verse " counter(number);
}

p.number::after {
  content: "]: ";
}

p.drop {
  counter-increment: number;
  margin-left: 3em;
}

p.drop::first-letter {
  font-size: 2em;
  text-indent: -3em;
}

a.number::before {
  content: "Verse " counter(number);
}

a.verse::after {
  content: counter(number);
}

a.verses::before {
  content: "Verses " counter(number);
}

a.and::before {
  counter-increment: number;
  content: counter(number);
}

/* ===== Column and margin image layout =====
   Two independent systems:
   - .row/.column: generic flexible layout, for pages that want a
     simple side-by-side flex arrangement.
   - .L/.R/.V: margin-image flanking for verse-style pages -- an
     absolutely-positioned image in the left or right margin (.L/.R)
     alongside a centered text column (the "triple column" layout:
     left image, verse text, right image), vs. plain verse paragraphs
     with neither (the "single column" layout). Originally local to
     Favorite.Things.html; centralized here since it's genuinely
     reusable, not because multiple pages use it yet.
*/

/* Generic flexible row/column layout */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.column {
  flex: 1 1 0;
  padding: 0.5rem;
}

a.L, div.L, span.L, a.R, div.R, span.R {
  display: inline;
  --width: 14%;
  width: var(--width);
  position: absolute;
  container-type: inline-size;
}

a.L, div.L, span.L {
  left: -20%;
}

a.R, div.R, span.R {
  right: 0;
}

img.V {
  display: block;
  height: auto;
  width: 100%;
  margin-top: 10%;
}

/* ===== Tooltips =====
   Used by: index.html, My.Favorite.spoilers.html, Favorite.Things.html.
   Thanks to Stack Overflow for guidance on tooltip implementation.
*/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: left;
  padding: 5px 8px;
  border-radius: 6px;

  position: absolute;
  z-index: 1;
  bottom: 102%;
  left: calc(-10em + 50%);

  min-width: 20em;
  max-width: 70em;

  opacity: 0;
  transition: opacity 0.3s;
}

/* Centered variant -- for tooltip content that reads better centered,
   e.g. a short quoted placard/sign text, rather than the default
   left-aligned prose. */
.tooltip .tooltiptext.centered {
  text-align: center;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Left/right tooltip variants for margin images */
.L .tooltiptext {
  left: 0;
  text-align: left;
}

.R .tooltiptext {
  left: auto;
  right: 0;
  text-align: left;
}

.L .tooltiptext::after {
  left: 20cqw;
}

.R .tooltiptext::after {
  left: auto;
  right: 20cqw;
}

/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ===== Footer (home link) ===== */

footer {
  text-align: center;
  margin-top: 2em;
  font-size: small;
}

/* ===== Email obfuscation =====
   Usage: <span class="email" data-user="smetz3" data-domain="gmu.edu"></span>
   Renders as: smetz3@gmu.edu
   Not a clickable link; defeats most scrapers that do not execute CSS.
*/

.email::before {
  content: attr(data-user) "\0040" attr(data-domain);
  unicode-bidi: bidi-override;
}

/* ===== Spoiler hide/unhide ===== */

.hide {
  display: none;
}

.unhide:hover + .hide {
  display: block;
  color: red;
}