/* Josh’s terrible contact page style.
   🄯 2022-2023 Josh Moller-Mara
   This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
   http://creativecommons.org/licenses/by-sa/4.0/
 */
body {
    font: 1rem 'Fira Sans', sans-serif;
    background: hsla(0, 0%, 86%, 1);
}
header {
    margin-bottom: 1rem;
}
h1 {
    text-align: center;
    margin-bottom: 0;
}
h2 {
    font-size: 1.2rem;
}
/* TODO: Need hover for accessibility. */
.plainlink:link {
    color: inherit;
    text-decoration: inherit;
}
ul.contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
}
ul.contact > li > details > summary {
    font-size: 1.1rem;
    margin-inline: auto; 	/* Center */

    display: flex;              /* Note: This causes summary to lose its ::marker */
    flex-wrap: wrap; 		/* In case we squeeze the width really far down.*/
    justify-content: space-around;
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    max-width: 40ch;
    transition: border-bottom-color 0.1s;
}
ul.contact > li > details > summary > *:first-child {
    flex: 1 1 10ch;
}
ul.contact > li > details > summary > *:last-child {
    text-align: center; 	/* Only if it's squished really far down. */
}
ul.contact > li > details > summary a:link:not(:is(:hover,:focus)) {
    /* Remove underline, which is too busy, but add it back in if we’re hovering or focusing.
       A good test here is to hover while simulating Achromatopsia (no color).
       It should be clear */
    text-decoration-line: none;
}
ul.contact > li > details > summary:hover { /* Only :hover here, :focus feels sticky. */
    /* Tries to give a hint that the summary expands.
       Also helps show which value matches with which method. */
    border-bottom-color: black;
    border-bottom-style: solid;
}
.phone-number {
    /* I’d like the phone numbers to align slightly.
       It’d be nice if I could use something like “tabular-nums”, but I’m also using letters */
    font-family: "DejaVu Sans Mono", monospace, sans-serif;
}
@media screen and (min-width: 20rem) {
    /* The details markers is removed by display:flex on the summary, but
       for some browsers (Epiphany/WebKit) this doesn’t work. */
    ul.contact details > summary {
	list-style: none;
    }
    ul.contact details > summary::-webkit-details-marker {
	/* Argh, Epiphany displays the marker even with flex. */
	display: none;
    }
    /* Re-add a details marker, if we’re not too squished.
       And if we’re not printing.
       I should eventually change this to container queries. */
    ul.contact details > summary::before {
	/* Reserve space for a marker, making sure it doesn't change if the
       characters have slightly different width */
	width: 1ch;
	margin-right: 1ch;
    }
    ul.contact details:not([open]) > summary::before {
	content: "▸";
    }
    ul.contact details:is([open]) > summary::before {
	content: "▾";
    }
}
footer {
    font-size: 0.8rem;
}
@media print {
    body {
	background: unset;
    }
    .noprint {
	display: none;
    }
}
.print-url {
    display: none; 		/* This gets overridden later */
    text-align: center;
    color: darkgrey;
    font-size: smaller;
}
@media print {
    div.print-url {
	display: block;
    }
    /* TODO: Use layers instead to override styles. */
    .print-url > a,
    .print-url > a:visited {
	color: darkgrey;
	text-decoration: none;
    }
    .print-url > a::before {
	content: "josh.life/contact";
    }
}
details:not([open]) > summary {
    cursor: zoom-in;
}
details:is([open]) > summary {
    cursor: zoom-out;
}

/* Flexbox styling to push the non-contact methods down. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
}
main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 40rem;
    align-self: center;
    flex-grow: 1;
}
main > section.mainsection {
    /* This causes a bit of an awkward gap, but I don't want to draw too much attention to the non-contact methods. */
    flex-basis: 50vh;
}
footer {
    align-self: start;
}
ul.non-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Footnotes */
:is(.footnote,.reference) a:not(:is(:hover,:focus)) {
    text-decoration: inherit;
    color: inherit;
}
*:target {
    animation: targetpulse 1s;
    animation-fill-mode: forwards;
    background-color: rgba(153, 193, 241, 0.5);
    border-radius: 5px;
}
@keyframes targetpulse {
    from {
	box-shadow: 0px 0px 5px 5px rgba(153, 193, 241, 0.1);
    }
    10% {
	box-shadow: 0px 0px 5px 5px rgba(153, 193, 241, 0.9);
    }
    to {
	box-shadow: 0px 0px 5px 5px rgba(153, 193, 241, 0);
    }
}
/* Other fun things */
.palindrome {
    font-family: monospace;
}
/* I use an inner span to prevent “flapping” when hovering. */
.palindrome > span {
    display: inline-block;
    position: relative;
    transition: transform 0.9s;
}
.palindrome:is(:hover,:focus) > span {
    transform: rotateY(180deg);
}