/*
Theme Name: U Thant
Description: A biography and tribute theme for uthant.org. Creates Home, Biography, Timeline, Legacy and Contact pages and a menu when activated.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: uthant
*/

:root{
  --paper:#EEF1EC; --ink:#14232B; --blue:#0E4A5C; --saffron:#D9A21B; --muted:#55666B; --rule:#C9D0CB;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.1875rem/1.65 var(--serif)}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px}
.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9}

/* header */
.site-header{border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:baseline;justify-content:space-between;padding-block:1.25rem}
.brand{font:600 1.35rem var(--serif);color:var(--ink);text-decoration:none}
.brand:hover{color:var(--blue)}
.nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0;font:600 .95rem var(--sans)}
.nav a{color:var(--ink);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav .current-menu-item a{border-bottom-color:var(--saffron)}

/* hero */
.hero{padding-block:clamp(3rem,9vw,7rem) clamp(2rem,5vw,4rem)}
.hero h1{font:600 clamp(4.5rem,17vw,12.5rem)/.9 var(--serif);letter-spacing:-.035em;margin:0;color:var(--blue)}
.hero .years{display:flex;align-items:center;gap:1rem;margin:2rem 0 1.25rem;font:600 1rem var(--sans);color:var(--muted)}
.hero .years::before{content:"";width:5rem;height:6px;background:var(--saffron)}
.hero .lede{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;max-width:38ch;margin:0}

/* index of sections on home */
.index{list-style:none;margin:clamp(2rem,5vw,4rem) 0 0;padding:0;border-top:1px solid var(--ink)}
.index li{border-bottom:1px solid var(--rule)}
.index a{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr;gap:.25rem 2rem;padding:1.25rem 0;text-decoration:none;color:var(--ink)}
.index a:hover{background:#E3E8E2}
.index strong{font:600 1.5rem var(--serif);color:var(--blue)}
.index span{color:var(--muted)}
@media(max-width:34rem){.index a{grid-template-columns:1fr}}

/* pages */
.page{padding-block:clamp(2.5rem,6vw,5rem)}
.page h1{font:600 clamp(2.5rem,6vw,4.5rem)/1.05 var(--serif);letter-spacing:-.02em;color:var(--blue);margin:0 0 2rem}
.prose{max-width:40rem}
.prose h2{font:600 1.75rem/1.2 var(--serif);margin:2.5rem 0 .75rem}
.prose p{margin:0 0 1.25em}
.prose blockquote{margin:2rem 0;padding-left:1.25rem;border-left:5px solid var(--saffron);font-style:italic}

/* timeline */
.timeline{list-style:none;margin:2rem 0 0;padding:0;border-left:2px solid var(--blue)}
.timeline li{display:grid;grid-template-columns:7.5rem 1fr;gap:0 1.5rem;padding:0 0 2.25rem 1.5rem;position:relative}
.timeline li::before{content:"";position:absolute;left:-.55rem;top:.7rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--saffron);border:2px solid var(--paper);box-shadow:0 0 0 2px var(--blue)}
.timeline .yr{font:600 1.9rem/1.2 var(--serif);color:var(--blue)}
.timeline h2{font:600 1.3rem/1.3 var(--serif);margin:0 0 .25rem}
.timeline p{margin:0;max-width:36rem;color:#2b3b42}
@media(max-width:34rem){.timeline li{grid-template-columns:1fr}}

/* posts fallback */
.entry{padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--rule)}
.entry h2{font:600 1.75rem var(--serif);margin:0 0 .5rem}

/* footer */
.site-footer{margin-top:4rem;background:var(--ink);color:#DCE3DF;font:.95rem/1.6 var(--sans)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between;padding-block:2.5rem}
.site-footer a{color:#fff}
.site-footer .name{font:600 1.4rem var(--serif);color:#fff;margin:0 0 .25rem}