/* Custom CSS */

/* --- Page background ------------------------------------------------------ */
/* The theme's dark background is #202124, a dark grey — pure black instead.
   This token is declared once in themes/archie/assets/css/main.css and read
   once, by dark.css, so overriding it here is enough. It is deliberately not
   wrapped in a media query so it also applies if params.mode is ever switched
   from "auto" to "dark" or "toggle". Light mode reads --color-background
   (#ffffff), which is already pure white, and is untouched. */
:root {
  --color-background-dark: #000000;

  /* The link underline colour, per colour scheme.
     The theme's accent is crimson in light mode and mint in dark mode, but
     the reference stylesheet hardcoded the mint underline for both. On white
     that is 1.19:1 contrast — the underline is the only thing marking a link
     apart from body text, so in light mode links were effectively
     indistinguishable. These two values clear the 3:1 that WCAG 1.4.11 asks
     of a meaningful non-text boundary: 4.99:1 for crimson on white, 15.3:1
     for mint on black. */
  --pf-link-underline: rgba(220, 20, 60, 0.85);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pf-link-underline: rgba(80, 250, 123, 0.85);
  }
}

html {
  font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1.9rem;
  margin-top: 1.3em;
}

h2, h3, h4, h5, h6 {
  font-size: 1.6rem;
  font-weight: normal;
}

h3, h4, h5, h6 {
  font-size: 1.4rem;
}

h1::before {
  content: none;
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  content: '';
}

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-block: 1em;
}

a {
  border-block-end: 1px solid var(--pf-link-underline, rgba(220, 20, 60, 0.85));
}

img {
  border: none;
}

ul.pagination {
  padding-inline-start: 0;
  text-align: center;
}

ul.pagination span.page-prev {
  padding-right: 1em;
}

ul {
  list-style-type: disc;
  padding-inline-start: 2em;
}

ul li {
  text-indent: 0;
}

ul li::before {
  content: '';
}

li p:first-child {
  margin-top: 0;
}

section.body li {
  margin-bottom: 1em;
}

pre {
  margin-block: 0;
}

pre, code {
  font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
  font-size: 0.9rem;
}

.content {
  max-inline-size: 920px;
  max-width: 920px;
}

.footer-info {
  opacity: 0.25;
}

/* Main site title — the reference's 3rem everywhere except the home page,
   which gets the larger display size below. */
header .main a {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 3rem;
  border-block-end: none;
}

/* Home page only: the name moves from the top left to the top centre, with the
   nav stacked underneath it, and drops away from the top edge.

   `header` is already `display: flex` with `align-items: center`, so switching
   to a column is enough to centre both — no sizing, colour or font is touched.
   The 6em of top padding is the only knob here: with the 8px body margin and
   the existing 1em header margin it puts ~113px above the name, against ~64px
   on the reference site. Lower it to taste. */
.is-home header {
  flex-direction: column;
  padding-block-start: 6em;
}

/* Home page only: the name is the hero, so it scales. clamp() keeps it inside
   an 800px column on a wide screen (capped at 5rem, where "Santosh Chandu" is
   ~564px) and shrinks on a phone — there's no separate mobile rule for this,
   so a fixed larger size would overflow a narrow screen. */
.is-home header .main a {
  font-size: clamp(2.5rem, 8vw, 5rem);
}

.meta {
  font-size: 1em;
  letter-spacing: 0;
}

/* Tags */
.tags a {
  border-block-end-width: 0px;
}

.tags li::before {
  font-size: 0.5em;
  margin-inline-start: 0.5rem;
}

/* YouTube embeds */
.yt-embed {
  max-width: 650px;
  margin: 0 auto;
}

/* About page */
.body figure.portrait {
  padding-left: 0;
  padding-bottom: 1.5rem;
  padding-right: 1.5rem;
  width: 250px;
  float: left;
}

/* Related posts */
.related-posts {
  padding: 1em 1.5em;
  margin: 2em 8em;
}

.related-posts h2.title {
  margin: 0.5em 0;
}

/* Comments */
.comments {
  padding: 1em 1.5em;
  margin: 0;
}

.comments h2.title {
  margin-top: 0.5em;
}

.body figure.portrait img {
  max-width: inherit;
}

/* Legacy styles from Drupal */
.body figure,
figure.insert-image {
  display: block;
  padding: .5em 0;
}

figure img,
.insert-image img {
  margin: 0 auto;
  display: block;
  max-width: min(700px, 100%);
  height: auto;
}

figure a,
.insert-image a {
  display: block;
  width: fit-content;
  margin-inline: auto;
  border-block-end: none;
}

figure.insert-image figcaption p {
  display: block;
  text-align: center;
  max-width: min(700px, 100%);
  font-style: italic;
  margin: 0.25em auto 0;
}

.soc:hover,
.soc:focus {
  background: none;
  outline-color: var(--color-primary-dark, #50fa7b);
}

/* The footer icon row. This used to be an inline `style="display:flex"` on the
   wrapper, which meant it could not be overridden without fighting the
   attribute, and is now a class. The gaps replace the old .border separator
   elements, which were empty anchors. */
.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (prefers-color-scheme: dark) {
  .related-posts,
  .comments {
    background-color: #343434;
  }
}

@media (prefers-color-scheme: light) {
  /* Hover/focus fill follows the theme's accent for the active scheme, so in
     light mode it is crimson (--color-primary-hover) rather than the mint that
     was hardcoded here. That keeps the hover consistent with the underline
     above and leaves main.css's default (crimson fill, white text) in charge. */
  a:hover,
  a:focus {
    background-color: var(--color-primary-hover, #b91c3c);
    color: #ffffff;
    outline-color: var(--color-primary-hover, #b91c3c);
  }

  .site-description a:hover,
  .site-description a:focus {
    color: #ffffff;
  }

  ::-moz-selection {
    background: var(--color-primary-dark, #50fa7b);
    color: #000000;
    text-shadow: none;
  }

  ::selection {
    background: var(--color-primary-dark, #50fa7b);
    color: #000000;
    text-shadow: none;
  }

  .related-posts,
  .comments {
    border: 1px solid #222;
  }
}

@media screen {
  article .title {
    margin-block-end: 0.5em;
    margin-bottom: 0.5em;
  }
}

/* Responsive Styles -------------------------------------------------------- */
@media screen and (max-width: 800px) {
  .related-posts {
    margin: 2em 0;
  }
}

/* --- Accessibility helpers ------------------------------------------------ */
/* Off-screen, but still announced by screen readers and reachable by keyboard.
   Used for the home page's <h1>, which duplicates the site name already shown
   large in the <header>. Not display:none — that would remove it from the
   accessibility tree along with the screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link from baseof.html. Hidden until focused, then pinned to the
   top-left so a keyboard user can jump past the nav. */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75em 1em;
  background-color: var(--color-primary, #dc143c);
  color: #ffffff;
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border-block-end: none;
}

.skip-link:focus {
  inset-inline-start: 0;
  outline: 2px solid var(--color-primary, #dc143c);
  outline-offset: -4px;
}

/* ==========================================================================
   Portfolio additions
   The rules above are the reference site's stylesheet, untouched. Everything
   below only styles the extra portfolio pieces (hero, project cards, feed).
   Accent colours track the theme: crimson in light mode, mint in dark mode.
   ========================================================================== */

:root {
  --pf-accent: #dc143c;
  --pf-accent-hover: #b91c3c;
  --pf-card-bg: #ffffff;
  --pf-card-border: #222222;
  --pf-muted: #737373;
  --pf-chip-bg: #f1f1f1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pf-accent: #50fa7b;
    --pf-accent-hover: #3dd458;
    --pf-card-bg: #343434;
    --pf-card-border: #343434;
    --pf-muted: #dddddd;
    --pf-chip-bg: #3a3a3a;
  }
}

/* --- Buttons (used by the project CTA) ----------------------------------- */
.hero-cta {
  display: inline-block;
  padding-block: 0.5em;
  padding-inline: 1.15em;
  border-radius: 5px;
  border-block-end: none;
  font-size: 0.95rem;
  line-height: 1.4;
  background-color: var(--pf-accent, #dc143c);
  color: #ffffff;
}

.hero-cta:hover,
.hero-cta:focus {
  background-color: var(--pf-accent-hover, #b91c3c);
  color: #ffffff;
  outline: 2px solid var(--pf-accent, #dc143c);
  outline-offset: 2px;
}

.hero-cta.secondary {
  background-color: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px var(--pf-muted, #737373);
}

.hero-cta.secondary:hover,
.hero-cta.secondary:focus {
  background-color: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px var(--pf-accent, #dc143c);
}

/* --- Section headings ---------------------------------------------------- */
.section-intro {
  color: var(--pf-muted, #737373);
  margin-block: -0.3em 1.5em;
  max-width: 60ch;
}

.page-title {
  margin-block-start: 0.5em;
}

.empty-note {
  color: var(--pf-muted, #737373);
  font-style: italic;
}

/* --- Project cards ------------------------------------------------------- */
.project-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* The dedicated /projects/ page uses a roomier two-across layout. */
.project-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.project-card {
  display: flex;
  flex-direction: column;
  padding: 1.1em 1.25em;
  border: 1px solid var(--pf-card-border, #222222);
  border-radius: 5px;
  background-color: var(--pf-card-bg, #ffffff);
}

.project-title {
  font-size: 1.15rem;
  font-weight: bold;
  margin-block: 0 0.4em;
}

.project-title a {
  border-block-end-width: 0;
}

.project-summary {
  color: var(--pf-muted, #737373);
  font-size: 0.95rem;
  margin-block: 0 0.9em;
  flex-grow: 1;
}

.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin-block: 0 0.9em;
}

.project-stack li {
  text-indent: 0;
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace);
  font-size: 0.75rem;
  padding-block: 0.15em;
  padding-inline: 0.5em;
  border-radius: 3px;
  background-color: var(--pf-chip-bg, #f1f1f1);
  color: var(--pf-muted, #737373);
}

.project-links {
  margin: 0;
  font-size: 0.95rem;
}

.project-link {
  border-block-end-width: 1px;
}

.project-thumb {
  display: block;
  border-block-end: none;
  margin-block: -1.1em -0.6em;
}

.project-thumb img {
  display: block;
  width: 100%;
  border: none;
  border-block-end: 1px solid var(--pf-card-border, #222222);
  border-radius: 4px 4px 0 0;
}

/* --- Project detail page ------------------------------------------------- */
.post-lede {
  font-size: 1.1rem;
  color: var(--pf-muted, #737373);
  margin-block: 0.3em 0.7em;
  max-width: 60ch;
}

.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.project-status {
  color: var(--pf-accent, #dc143c);
}

.project-cta {
  margin-block: 2em;
}

/* --- Feed (home, /blog/, /projects/, and tag archives) -------------------- */
/* The theme styles single posts but ships no rules at all for the feed markup
   (`.list-item`, `.description`, `.readmore`, `.posts`) — every class the list
   templates emit was unstyled, so entries ran together with no vertical
   rhythm and the excerpt's <p> margins were the only separation. These rules
   give each entry a clear block and keep its heading visually prominent. */

.list-item {
  margin-block: 2.5em;
}

/* The first entry sits closer to the intro above it than to the entry below,
   so the page opens as a block rather than as a gap. */
.list-item:first-of-type {
  margin-block-start: 1.5em;
}

.list-item .title {
  margin-block: 0 0.2em;
}

.list-item time {
  display: block;
  margin-block-end: 0.75em;
}

/* The excerpt carries the post's own content, so it contains block-level
   markup — including, on the template post, a centred <figure>. Its top margin
   is suppressed so the date above it stays tight, and the last child's bottom
   margin is dropped so the "Read more" link below isn't pushed away. */
.list-item .description > :first-child {
  margin-block-start: 0;
}

.list-item .description > :last-child {
  margin-block-end: 0;
}

/* The excerpt's trailing ellipsis, added here rather than in the template so
   it attaches to the end of the last line of text. Appending it in the markup
   put it on a line of its own, because the excerpt ends in a block element.
   Not applied when the excerpt is a project's `description`, which is a
   complete sentence rather than a truncated one. */
.list-item .description > p:last-child::after {
  content: " \2026";
}

.readmore {
  display: inline-block;
  margin-block-start: 1em;
  font-size: 0.95rem;
}

/* Post index at the foot of a paginated list. */
ul.pagination {
  margin-block-start: 3em;
  padding-inline-start: 0;
  list-style: none;
  text-align: center;
}

ul.pagination li {
  text-indent: 0;
}

ul.pagination li::before {
  content: '';
}

.page-title {
  margin-block: 0.5em 0.2em;
}

/* Tag index cloud, and the plain list of entries on a tag archive. */
.tag-cloud ul.tags {
  margin-block: 1.5em;
}

ul.posts {
  list-style: none;
  padding-inline-start: 0;
}

ul.posts li.post {
  margin-block: 0.9em;
  text-indent: 0;
}

ul.posts li.post::before {
  content: none;
}

ul.posts li.post a {
  font-weight: bold;
}

/* --- Misc ---------------------------------------------------------------- */
.tldr {
  padding: 0.9em 1.1em;
  margin-block: 1.2em;
  border-radius: 5px;
  border-inline-start: 4px solid var(--pf-accent, #dc143c);
  background-color: var(--pf-chip-bg, #f1f1f1);
}

.tldr strong {
  color: var(--pf-accent, #dc143c);
}

.contact-note {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace);
  font-size: 0.9rem;
  color: var(--pf-muted, #737373);
}

/* --- Footer -------------------------------------------------------------- */
/* Three overrides on the theme's footer:
   1. it lays the footer out as a single left-aligned row — stacked and
      centred instead, so the links and the copyright sit one above the other;
   2. its dotted rule keeps the theme's 0.4rem weight but takes the site's
      accent colour instead of --color-border, which dark.css turns into blue
      (#0066ff) in dark mode;
   3. that accent was hardcoded to the dark-mode mint, which on the white
      light-mode background was 1.37:1 — a decorative rule, but one the
      original comment meant to be a visible accent. It now follows the scheme
      like the rest of the site does.
   Spacing above the footer is unchanged. */
footer {
  border-top: 0.4rem dotted var(--pf-accent, #dc143c);
  border-block-start: 0.4rem dotted var(--pf-accent, #dc143c);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

/* The reference dims the copyright to 25% opacity; full opacity here so it
   reads as solid white in dark mode, level with the social icons above it. */
.footer-info {
  opacity: 1;
}


/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}