/*
Theme Name: Tufte WordPress
Description: Minimal tweaks on top of tufte.min.css
Version: 1.0
*/

/* Accent colour */
:root {
  --accent: #DD4226;
}

/* Gutter that matches Tufte’s side margin */
:root {
  --gutter: 12.5%;
}

/* External-link arrow styling */
.external-arrow {
  display: inline-block;
  vertical-align: super;
  margin-left: 0.1em;
  color: var(--accent);
  transform: translateY(0.1em);  /* ↓ tweak this: 0.10–0.20em */
  line-height: 1;            /* keeps box tight */
}
.external-arrow svg {
  display: block;     /* prevent extra descender space */
}

/* Post navigation under posts (desktop) */
@media (min-width: 48em) {
  section > nav.post-nav {
    width: 55%;
    margin-left: 0;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    font-style: italic;
    color: var(--accent);
  }
}

:root { --gutter-vw: 12.5vw; } /* matches your sidenote outer edge */

/* Tablet → small desktop: make titles stop at the right gutter */
@media (min-width: 760px) and (max-width: 1300px) {
  .content article > h1.entry-title,
  .content article > h2.post-date {
    width: calc(100vw - 2 * var(--gutter-vw)); /* = 75vw */
    max-width: 100%;
    margin-left: 0;             /* keep left-aligned with content */
    text-wrap: balance;         /* nicer multi-line wrapping */
    overflow-wrap: anywhere;
  }
}

/* External-link glyph accent */
.entry-title a[rel="external"]::after {
  color: var(--accent);
}

/* Sidenote & marginnote accents */
label.sidenote-number::after,
label.margin-toggle:not(.sidenote-number) {
  color: var(--accent);
}

.sidenote::before {
  color: var(--accent) !important;
}


/* style our new H2-wrapped dates exactly like before */
.post-date {
  font-size: 1.4rem;
  color: var(--accent);
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* Prev / Next links under single posts */
.post-nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0 0;
  font-size: 1.1rem;
}
.post-nav a {
/*  text-decoration: none;
  color: var(--accent); */
  font-style: italic;
}
.post-nav .prev:empty,
.post-nav .next:empty {
  display: none;
}

/* Front-page vertical rhythm */
body.home article {
  padding: 2.5rem 0;
}

/* on the blog list, only the first post gets that big top padding */
body.home main.content > article:first-of-type {
  padding-top: 5rem;
}

/* Full-width figure caption (desktop) */
@media (min-width: 48em) {
  figure.fullwidth figcaption {
    float: right;
    clear: right;
    margin-right: 0 !important;
	margin-top: 0.3rem;
/*    max-width: 40%; */
    text-align: right;
  }
}

/* Full-width figures & images on mobile */
@media (max-width: 760px) {
  figure,
  .wp-block-image,
  figure.fullwidth,
  div.fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  figure img,
  .wp-block-image img,
  figure.fullwidth img,
  div.fullwidth > img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
	  figure.fullwidth figcaption {
	margin-top: 0.3rem;
	}
}

/* Ensure fullwidth images fill their container */
figure.fullwidth img,
div.fullwidth > img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
}

/* Site background colours */
body {
  background-color: #F9F7F5;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #151515;
    color: #ddd;
  }
}

/* Header container & site‐title scaling */
header.site-header {
  container-type: inline-size;
  container-name: header;
  padding-top: clamp(1.5rem, 4vw, 4rem);
}
.site-title a {
  font-family: "puffin-display", et-book, serif;
  text-decoration: none;
  background: none !important;
  text-shadow: none !important;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(6rem, 8vw, 8rem);
  font-weight: 900;
}

/* Photo-pair: two images side-by-side, caption underneath */
.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;                 /* spacing between the two images */
  max-width: 100%;
  margin: 0 0 0 0;	
}

/* Keep the desktop column width if desired */
section > .photo-pair {
  width: 55%;
}

/* Images fill their grid cells */
.photo-pair img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Keep your existing .photo-pair 2-col grid rules */
.photo-pair figcaption {
  grid-column: 1 / -1;
  margin-top: -0.3rem;
  text-align: right;
  width: 100%;
  margin-right: 0;
  max-width: 100%;
}


/* Keep your mobile full-width rule for the figure itself */
@media (max-width: 760px) {
  section > .photo-pair {
    width: 100%;
  }
}

/* Normalise iOS font boosting for captions */
figure figcaption,
.photo-pair figcaption {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Scroll-photo gallery */
.photo-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  visibility: hidden; /* reveal after JS resize */
}
.photo-scroll::-webkit-scrollbar {
  display: none;
}
.photo-scroll.js-fit-done {
  visibility: visible;
}
.photo-scroll img {
  height: 300px;
  width: auto !important;
  flex: 0 0 auto;
  max-width: none !important;
  object-fit: cover;
  border-radius: 4px;
}

.photo-scroll {
  cursor: grab;
  user-select: none;            /* no text selection while dragging */
}
.photo-scroll.dragging {
  cursor: grabbing;
}

.photo-scroll img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

.photo-scroll.no-snap {
  scroll-snap-type: none !important;
  -webkit-scroll-snap-type: none !important;
}

@media (min-width: 761px) {
  .photo-scroll::after {
    content: "";
    flex: 0 0 2rem;    /* adjust to taste */
  }
}

/* Scroll-photo nav buttons */
.photo-scroll-wrapper {
  position: relative;
}
.photo-scroll-nav {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  justify-content: flex-start;
}
.photo-scroll-nav button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--accent);
  cursor: pointer;
  padding: 0 0.5rem;
}
@media (max-width: 760px) {
  .photo-scroll-nav {
    justify-content: space-between;
  }
}

/* Global image corner radius */
img {
  border-radius: 4px;
}

/* Footer text size */
footer.site-footer p {
  font-size: 1rem !important;
}

/* Only target the little permalink icon link */
.post-date .permalink-icon {
  text-decoration: none !important;  /* kill the underline */
  font-style: normal !important;     /* cancel inherited italic */
  color: var(--accent);              /* keep your accent colour */
  margin-left: 0.25em;
  font-size: 0.6em;
  vertical-align: baseline;
  line-height: 1;
}

/* Match Tufte underline halo to your page background */
:root { --underline-bg: #F9F7F5; }                 /* your light background */
@media (prefers-color-scheme: dark) {
  :root { --underline-bg: #151515; }               /* your dark background */
}

.hover-tufte-underline:hover,
.tufte-underline,
a:link,
a:visited {
  /* recolour just the gradient images */
  background-image:
    linear-gradient(var(--underline-bg), var(--underline-bg)),
    linear-gradient(var(--underline-bg), var(--underline-bg)),
    linear-gradient(currentColor, currentColor);

  /* your halo override (keeps the descenders clean) */
  text-shadow:
    .03em 0 var(--underline-bg), -.03em 0 var(--underline-bg),
    0 .03em var(--underline-bg),  0 -.03em var(--underline-bg),
    .06em 0 var(--underline-bg), -.06em 0 var(--underline-bg),
    .09em 0 var(--underline-bg), -.09em 0 var(--underline-bg),
    .12em 0 var(--underline-bg), -.12em 0 var(--underline-bg),
    .15em 0 var(--underline-bg), -.15em 0 var(--underline-bg);
}
/* Kill Tufte’s underline on the h1 titles except those we’ve explicitly marked */
body.home .entry-title a:not(.tufte-underline),
body.home .entry-title a:not(.tufte-underline):hover,
body.home .entry-title a:not(.tufte-underline):focus {
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

/* Remove Tufte’s gradient-underline on just the permalink icon */
.post-date .permalink-icon,
.post-date .permalink-icon:link,
.post-date .permalink-icon:visited,
.post-date .permalink-icon:hover,
.post-date .permalink-icon:focus {
  background: none !important;             /* nuke the gradient */
  background-image: none !important;       /* extra insurance */
  text-shadow: none !important;            /* in case of any text-shadow */
}

/* Simple horizontal menu under the header */
.main-menu {
  margin-top: -1rem;
  margin-bottom: 2rem;
  margin-left: 0.3rem;
}
.main-menu .menu-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  column-gap: 2rem; /* horizontal gap */
  row-gap: 0.5rem;  /* vertical gap between wrapped rows */
  flex-wrap: wrap;

}
.main-menu .menu-inline li a {
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1.6;
  font-style: italic;
}

.main-menu .menu-inline li:not(:first-child) {
  margin-top: 0 !important;
}

/* Centre the footer menu in the content column */
.footer-menu {
  margin: 0 auto 4rem;  
}

/* Inline-flex list, centred */
.footer-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  gap: 1.5rem;
}

/* Link styling */
.footer-menu__list li a {
  font-size: 1.4rem;
  font-style: italic;
  text-decoration: none;
}

/* Smaller post-date font on Archive by Month template */
body.page-template-archive .archive-entry .post-date {
  font-size: 0.9rem;  /* or whatever size you prefer */
  margin-left: 0.9rem; /* optional spacing before the date */
  vertical-align: baseline;
}


/* Media shortcode pages – match the markup your plugin outputs */
.archive-list .archive-entry .post-date {
  font-size: 0.9rem;
  margin-left: 0.35rem;
  vertical-align: baseline;
}

/* If you also use the inline/cards feed ([media_feed]) */
.ps-media .ps-meta .post-date,
.ps-media .ps-meta time {
  font-size: 0.9rem;
  margin-left: 0.35rem;
  vertical-align: baseline;
}

/* ===== Simple Lightbox (custom) ===== */

/* Theme variables */
:root {
  --lb-overlay: rgba(255, 255, 255, 0.93); /* light mode: translucent white */
  --lb-caption: #111;                      /* dark text on light overlay */
}
@media (prefers-color-scheme: dark) {
  :root {
    --lb-overlay: rgba(0, 0, 0, 0.9);     /* dark mode: your current look */
    --lb-caption: #fff;                    /* light text on dark overlay */
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  display: none;                 /* toggled via .open */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--lb-overlay); /* ← was rgba(0,0,0,.92) */
  z-index: 9999;                 /* above sidenotes/margin notes */
}

.lightbox.open { display: flex; }

.lightbox__inner {
  outline: none;                 /* we'll manage focus with JS */
  max-width: 96vw;
  max-height: 96vh;
  text-align: center;
}

.lightbox__img {
  max-width: 96vw;
  max-height: 82vh;              /* leave room for caption */
  height: auto;
  border-radius: 4px;
}

.lightbox__caption {
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--lb-caption);      /* ← was #fff */
  opacity: .85;
  max-width: 96vw;
  overflow-wrap: anywhere;       /* long URLs won’t overflow */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Caption links inherit the caption colour */
.lightbox__caption a {
  color: inherit;
  text-decoration-color: currentColor;
}

/* Subtle blur if supported */
@supports (backdrop-filter: blur(1px)) {
  .lightbox { backdrop-filter: blur(1px); }
}

/* Fade */
.lightbox,
.lightbox__img { transition: opacity .18s ease; }
.lightbox:not(.open) { opacity: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { transition: none; }
}

/* ET Book: declare with no late swap */
@font-face{
  font-family:"et-book";
  src:url("/wp-content/themes/tufte-wordpress/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:optional;
}
@font-face{
  font-family:"et-book";
  src:url("/wp-content/themes/tufte-wordpress/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");
  font-weight:400;
  font-style:italic;
  font-display:optional;
}
/* If you actually use the line-figure variant instead, swap the normal src above for this file: */

@font-face{
  font-family:"et-book";
  src:url("/wp-content/themes/tufte-wordpress/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:optional;
}

/* Reduce browser-made fakes that can cause micro-jumps */
body { font-synthesis-weight: none; font-synthesis-style: none; }

@media (min-width: 48em) {
  /* Affects any non-fullwidth, non-photo-pair figure */
  figure:not(.fullwidth):not(.photo-pair) > figcaption {
    max-width: 100% !important;
  }
}

/* Blockquote vertical line */
blockquote {
  border-left: 1.5px solid var(--accent);  /* vertical line */
  padding-left: 1rem;                    /* space between line and text */
}

/* Reset sidenote numbering for each post on listing pages */
article {
  counter-reset: sidenote-counter;
}