/* padmajairam.com on PUDL. The palette is PUDL's own set of tokens, given
   the site's colours from its WordPress theme (Pen): the grey page, the
   teal of the bar and the links, the light header and the black footer.
   The rest places the brochure layout's parts (the engine's
   Pages/Shared/_BrochureLayout.cshtml) and the converted content.

   The people reading this site may be anxious, low or overwhelmed, so the
   page asks little of them: one calm palette, no motion, no pop-ups, large
   readable text in short lines, the reader's place always marked in the
   bar, and every link plainly a link. */

/* Lato, served from the site itself (fonts/, SIL Open Font License, in
   fonts/OFL.txt), so the page waits on no other server and tells Google
   nothing. The two main weights are preloaded in content/head-section.html,
   so the text appears in Lato from the first paint. Each weight comes in
   two files, Latin and extended Latin, and a browser fetches the second
   only for a page that uses its letters. */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/lato-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/lato-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, [data-theme="dark"] {
  --bg: #cccccc;
  --surface: #fcfcfc;
  --surface-alt: #ececec;
  --text: #222222;
  --text-muted: #4f5559;
  --border: #b8bdc0;

  --accent: #367588;
  --accent-hover: #285a69;
  --on-accent: #ffffff;
  --warn: #a65d12;

  --font: "Lato", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --font-display: var(--font);

  --site-header-bg: #eeeeee;
  --site-bar: #367588;
  --site-bar-hover: #2f6878;
  --site-footer-bg: #151515;
  --site-footer-fg: #dddddd;
  --site-width: 1100px;
}

/* The footer stays at the foot of the window when a page is short: the
   page's row takes whatever height is left over. */
body.brochure {
  margin: 0; font-size: var(--text-lg); line-height: 1.65;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body.brochure > .brochure-body { flex: 1 0 auto; width: 100%; }

/* Nothing moves on its own. */
@media (prefers-reduced-motion: no-preference) {
  .brochure a { transition: none; }
}

.skip-link {
  position: absolute; left: var(--space-3); top: -60px; z-index: 10;
  padding: var(--space-2) var(--space-3); background: var(--surface); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-3); }

.brochure-inner { max-width: var(--site-width); margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }

/* === The header: the name and logo at the left, how to reach her at the
   right. ================================================================= */
.brochure-header { background: var(--site-header-bg); border-bottom: 1px solid var(--border); }
.brochure-header .brochure-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-5); padding-block: var(--space-4);
}
.site-logo { display: block; line-height: 0; }
.site-logo img { width: 260px; max-width: 70vw; height: auto; }
.site-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.site-phone { font-size: var(--text-xl); color: var(--text); text-decoration: none; }
.site-phone:hover { color: var(--accent); text-decoration: underline; }
.site-social { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--accent);
}
.site-social a:hover { background: var(--surface-alt); color: var(--accent-hover); }
.site-social svg { width: 22px; height: 22px; fill: currentColor; }

/* === The bar of places. A list of places, so its links are not underlined
   (PUDL's exception for navigation); the reader's place is marked by a bar
   under it and bold text, not by colour alone. ====================== */
.brochure-nav { background: var(--site-bar); }
.brochure-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin-block: 0; padding-block: var(--space-2); }
.brochure-nav a {
  display: block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  color: #ffffff; text-decoration: none; font-size: var(--text-lg);
  box-shadow: inset 0 -3px 0 transparent;
}
.brochure-nav a:hover { background: var(--site-bar-hover); }
.brochure-nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 #ffffff; }
.brochure-nav a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* === The page and Recent beside it. ===================================== */
.brochure-body { display: grid; gap: var(--space-5); padding-block: var(--space-5) var(--space-6); }
@media (min-width: 900px) {
  .brochure-body.has-aside { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
}
.brochure-page {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-6) clamp(var(--space-4), 5vw, 48px);
  min-width: 0;
}
.brochure-page:focus { outline: none; }
.brochure-page > article, .brochure-page .post-body { max-width: 72ch; }
.brochure-aside {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4);
}
.brochure-aside-title { font-size: var(--text-base); text-transform: none; margin: 0 0 var(--space-2); }
.brochure-aside .md-list { list-style: none; margin: 0; padding: 0; }
.brochure-aside .md-item { display: block; padding: var(--space-2) 0; border-top: 1px solid var(--border); font-size: var(--text-base); line-height: 1.4; white-space: normal; overflow: visible; }
.brochure-aside li:first-child .md-item { border-top: 0; }
.brochure-aside .md-meta { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }

/* === The content. ======================================================= */
.brochure-page h1 { font-size: var(--text-3xl); margin-top: 0; }
.brochure-page h2 { font-size: var(--text-2xl); margin-top: var(--space-6); }
.brochure-page h3 { font-size: var(--text-xl); margin-top: var(--space-5); }
.brochure-page p, .brochure-page li { max-width: 72ch; }
.brochure-page ul, .brochure-page ol { padding-left: 1.4em; }
.brochure-page li + li { margin-top: 2px; }
.brochure-page a:visited { color: var(--accent); }
.brochure-page img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.brochure-page iframe { width: 100%; max-width: 100%; min-height: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.brochure-page figure { margin: 0 0 var(--space-4); max-width: 100%; }
.brochure-page figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.brochure-page .alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); max-width: 45%; }
.brochure-page .alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; max-width: 45%; }
/* A picture set beside the text is exactly as wide as the picture, so it
   sits against the margin, and its caption wraps beneath it at the same
   width (a table's caption takes the table's width). */
.brochure-page figure:is(.alignright, .alignleft) { display: table; }
.brochure-page figure:is(.alignright, .alignleft) > img { display: block; }
.brochure-page figure:is(.alignright, .alignleft) > figcaption { display: table-caption; caption-side: bottom; }
.brochure-page .aligncenter { margin-inline: auto; text-align: center; }
.brochure-page h2, .brochure-page .wp-columns { clear: both; }
@media (max-width: 600px) {
  .brochure-page .alignright, .brochure-page .alignleft { float: none; margin: 0 auto var(--space-4); max-width: 260px; }
}
.brochure-page .wp-columns { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; margin-block: var(--space-5); }
.brochure-page .wp-column { flex: 1 1 200px; }
.brochure-page .has-text-align-center { text-align: center; }
.brochure-page .wp-separator { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-6); }
.brochure-page .post-meta { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.brochure-page .post-header { margin-bottom: var(--space-2); }
/* The engine's tag row and empty page menu have nothing to say here. */
.brochure-page .page-tags:empty { display: none; }

/* Thoughts: each article a card. */
.article-list { list-style: none; padding: 0 !important; display: grid; gap: var(--space-3); }
.article-card { margin: 0; }
.article-card .card-title { font-size: var(--text-xl); margin-top: 0; }
.article-card .card-meta { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.article-card .card-desc { font-size: var(--text-base); margin: 0; }

/* === The CV. Each section's heading is a quiet teal label over a rule;
   each employer or school is an entry, its roles in bold with their place
   and dates on a muted line; the dated tables keep their dates in a
   column at the right. ================================================ */
[data-page="cv"] h2 {
  margin: var(--space-6) 0 var(--space-3); padding-bottom: var(--space-2);
  font-size: var(--text-lg); letter-spacing: 0.06em; color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
[data-page="cv"] .cv-entry { margin: 0 0 var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--surface-alt); }
[data-page="cv"] .cv-entry h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
[data-page="cv"] .cv-entry h4 { font-size: var(--text-base); margin: var(--space-3) 0 var(--space-1); }
[data-page="cv"] .cv-role { margin: var(--space-3) 0 0; font-weight: 700; }
[data-page="cv"] .cv-when { margin: 0 0 var(--space-2); font-size: var(--text-base); color: var(--text-muted); }
[data-page="cv"] .cv-entry ul { margin-top: var(--space-1); }
[data-page="cv"] .cv-entry li, [data-page="cv"] .cv-entry p { font-size: var(--text-base); }
.cv-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: var(--text-base); }
.cv-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--surface-alt); vertical-align: top; }
.cv-table td + td { padding-left: var(--space-4); text-align: right; white-space: nowrap; color: var(--text-muted); width: 1%; }
@media (max-width: 600px) {
  .cv-table td { display: block; padding: 0; border: 0; }
  .cv-table td + td { text-align: left; width: auto; padding: 0 0 var(--space-2); border-bottom: 1px solid var(--surface-alt); }
}

/* === The footer. ======================================================== */
.brochure-footer { background: var(--site-footer-bg); color: var(--site-footer-fg); padding-block: var(--space-6); font-size: var(--text-base); }
.brochure-footer a { color: #ffffff; }
.brochure-footer a:hover { color: #cfe7ee; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.brochure-footer .site-phone { color: #ffffff; font-size: var(--text-xl); }
.brochure-footer .site-social a { color: #ffffff; }
.brochure-footer .site-social a:hover { background: #2a2a2a; color: #ffffff; }
.footer-copy { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: #b5b5b5; }