/*
Theme Name: Thames Herald Front Page
Theme URI: https://thamesherald.co.uk/
Author: Thames Herald
Description: A newspaper-style front page theme for the Thames Herald.
Version: 1.0.11
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: thames-herald
*/

@font-face {
  font-family: 'Thames Herald New Reference V11.1';
  src: url('assets/fonts/thames-herald-new-reference-v11-1.woff2?v=11.1') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: 'Thames Herald Headline';
  src: url('assets/fonts/thames-herald-headline-v1.woff2?v=1.0') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: block;
}

:root {
  --paper: #f7f3e9;
  --ink: #111;
  --rule: #292929;
  --accent: #f49bdd;
  --accent-ink: #b71942;
  --page-width: 575px;
  --story-col: 27%;
  --gutter: 8px;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.th-site-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--page-width) minmax(0,1fr);
  gap: 18px;
  align-items: start;
  padding: 10px 10px 28px;
}

.th-side-ad {
  position: sticky;
  top: 12px;
  width: min(220px, 100%);
  justify-self: end;
}
.th-side-ad--right { justify-self: start; }
.th-side-ad img { display: block; width: 100%; height: auto; }
.th-side-ad:empty { display: block; }

.th-newspaper {
  width: var(--page-width);
  min-height: 820px;
  background: var(--paper);
  border: 1px solid #b9b7b0;
  box-shadow: 0 2px 9px rgba(0,0,0,.13);
  padding: 7px 11px 13px;
  overflow: visible;
}

.th-topline {
  height: 19px;
  border-top: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}
.th-topline__left, .th-topline__right { overflow: hidden; text-overflow: ellipsis; }

.th-masthead {
  margin: 6px 0 6px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  padding-left: 10px;
  font-family: 'Thames Herald New Reference V11.1', serif;
  font-size: 85px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  font-kerning: none;
  font-synthesis: none;
  border-bottom: 1px solid var(--rule);
}

.th-teaser-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 102px;
  margin: 0 0 7px;
  padding-right: 100px;
  background: var(--accent);
  border-top: 1px solid #d882c8;
  border-bottom: 1px solid #d882c8;
}
.th-teaser {
  padding: 7px 9px 7px;
  min-width: 0;
  min-height: 90px;
  display: flex;
  flex-direction: column;
}
.th-teaser + .th-teaser { border-left: 1px solid rgba(50,20,40,.4); }
.th-teaser__title {
  margin: 0 0 2px;
  color: var(--accent-ink);
  font-size: 16px;
  line-height: .94;
  text-transform: uppercase;
  font-weight: 700;
}
.th-teaser__copy {
  margin: 0;
  font-size: 11px;
  line-height: 1.02;
  text-transform: uppercase;
  font-weight: 700;
  flex: 1 1 auto;
}
.th-teaser__page {
  display: block;
  margin-top: auto;
  padding-top: 4px;
  color: var(--accent-ink);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}
.th-teaser-overlap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 139px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.th-teaser-overlap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  background: transparent !important;
}

.th-section-rule { border: 0; border-top: 2px solid var(--rule); margin: 0 0 6px; }

.th-main-headline {
  margin: 0 4px 5px;
  font-family: 'Thames Herald Headline', Georgia, 'Times New Roman', serif;
  font-size: 48px;
  line-height: .94;
  letter-spacing: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.th-main-grid {
  display: grid;
  grid-template-columns: var(--story-col) minmax(0,1fr);
  gap: 8px;
  align-items: start;
  padding: 0 4px;
}

.th-story-column { min-width: 0; }
.th-main-subline {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.02;
  font-weight: 700;
}
.th-latest {
  margin: 0 0 7px;
  padding-top: 2px;
  border-top: 1px solid #bbb;
}
.th-latest__label {
  display: block;
  margin-bottom: 1px;
  color: #c32438;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}
.th-latest__byline {
  display: block;
  font-size: 6.5px;
  line-height: 1.1;
  text-transform: uppercase;
}
.th-story {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.08;
  font-weight: 700;
}
.th-story p { margin: 0 0 8px; }

.th-photo-column { min-width: 0; }
.th-main-photo-wrap {
  width: 100%;
  aspect-ratio: 1.72 / 1;
  background: #dad7ce;
  overflow: hidden;
}
.th-main-photo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.th-photo-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: Arial, sans-serif; font-size: 10px; color: #666; text-transform: uppercase;
}
.th-photo-caption {
  margin: 2px 0 0;
  height: 9px;
  line-height: 9px;
  font-size: 6.8px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-transform: uppercase;
  transform-origin: left center;
}
.th-photo-subheading {
  margin: 1px 0 0;
  height: 28px;
  line-height: 28px;
  font-size: 24px;
  letter-spacing: -.8px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-transform: uppercase;
  transform-origin: left center;
}

.th-ad {
  margin: 9px 4px 0;
  padding-top: 5px;
  border-top: 2px solid var(--rule);
}
.th-ad__image {
  display: block;
  width: 100%;
  min-height: 105px;
  object-fit: cover;
}
.th-ad__placeholder {
  min-height: 105px;
  display: grid;
  place-items: center;
  background: #eee;
  border: 1px dashed #aaa;
  font-family: Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: #777;
}

.th-standard-content {
  max-width: 900px;
  margin: 30px auto;
  background: #fff;
  padding: 24px;
}


/* THAMES HERALD TOP STRIP TYPOGRAPHY */
.th-topline,
.th-topline * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
}

/* NEWS ONLINE treatment: NEWS black, ONLINE red */
.th-topline .news-online .news,
.th-topline .news-online .news-word {
  color: #111 !important;
}
.th-topline .news-online .online,
.th-topline .news-online .online-word {
  color: #d71920 !important;
}

@media (max-width: 1050px) {
  .th-site-shell { grid-template-columns: 1fr var(--page-width) 1fr; gap: 8px; }
  .th-side-ad { display: none; }
}

@media (max-width: 610px) {
  body { overflow-x: auto; }
  .th-site-shell {
    width: calc(var(--page-width) + 20px);
    min-width: calc(var(--page-width) + 20px);
    display: block;
    padding: 10px;
  }
  .th-newspaper { margin: 0; }
}




/* =========================================================
   THAMES HERALD — PUZZLERS PAGE V5
   ========================================================= */

.th-puzzlers-page {
  width: var(--page-width);
  min-width: var(--page-width);
  height: 820px;
  min-height: 820px;
  padding: 7px 11px 9px;
  overflow: hidden;
}

.th-puzzlers-topline {
  height: 19px;
  margin: 0;
  border-top: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.th-puzzlers-header {
  height: 82px;
  display: grid;
  grid-template-columns: 86px 1fr 86px;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid var(--rule);
}

.th-puzzlers-title {
  margin: 0;
  text-align: center;
  color: #35266e;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 51px;
  line-height: .92;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.th-puzzlers-star {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  justify-self: center;
  background: #35266e;
  color: #fff;
  clip-path: polygon(
    50% 0%,59% 10%,72% 5%,78% 18%,92% 18%,91% 32%,100% 42%,91% 52%,
    96% 65%,82% 70%,80% 84%,66% 83%,56% 95%,46% 86%,33% 93%,27% 80%,
    13% 79%,15% 65%,3% 58%,11% 46%,2% 35%,15% 28%,13% 14%,28% 14%,36% 3%
  );
}

.th-puzzlers-star span {
  width: 48px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6.8px;
  line-height: 1.06;
  font-weight: 900;
  text-transform: uppercase;
}

.th-puzzlers-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.th-puzzlers-row--top {
  height: 280px;
  border-bottom: 1.5px solid var(--rule);
  padding-bottom: 8px;
}

/* Top row only:
   two equal crossword columns.
   Across starts underneath each grid and automatically continues at the
   top of that crossword's right-hand clue column only when needed.
   Down follows the continued Across clues.
   Sudoku, Brain Jumble and horoscope rows are deliberately unaffected. */
.th-puzzlers-row--top {
  grid-template-columns: 1fr 1fr;
}

.th-puzzle-box--crossword-flow {
  overflow: hidden;
}

.th-crossword-flow-layout {
  display: grid;
  grid-template-columns: 60% 40%;
  column-gap: 8px;
  align-items: stretch;
  height: calc(100% - 17px);
}

.th-crossword-flow-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.th-puzzle-box--crossword-flow .th-crossword-grid {
  width: 100%;
  margin: 0 0 5px;
  float: none;
  flex: 0 0 auto;
}

.th-crossword-clues {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6.8px;
  line-height: 1.18;
}

.th-crossword-clues strong {
  display: block;
  margin-bottom: 3px;
  font-size: 7px;
}

.th-crossword-clues p {
  margin: 0 0 2px;
}

.th-crossword-clues--under {
  min-height: 0;
  overflow: hidden;
  padding: 0 1px 0 0;
}

.th-crossword-clues--right {
  min-width: 0;
  overflow: hidden;
  padding: 0 1px 0 0;
}

.th-crossword-overflow-across:empty {
  display: none;
}

.th-crossword-overflow-heading {
  display: block;
  margin-bottom: 3px;
  font-size: 7px;
}

.th-crossword-down-block {
  margin-top: 0;
}


.th-puzzlers-row--middle {
  height: 210px;
  border-bottom: 1.5px solid var(--rule);
  padding-top: 6px;
  padding-bottom: 2px;
}

.th-puzzle-box {
  min-width: 0;
  padding: 5px 6px;
  overflow: hidden;
}

.th-puzzle-box + .th-puzzle-box {
  border-left: 1px solid #bdb8ad;
}

.th-puzzle-box h2,
.th-puzzle-box h3 {
  margin: 0;
  color: #b62028;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.th-puzzle-box h2 {
  margin-bottom: 4px;
  font-size: 9px;
  line-height: 1;
}

.th-puzzle-box h3 {
  margin: 5px 0 3px;
  font-size: 7px;
}

.th-puzzle-smallcopy {
  margin: 0 0 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5.5px;
  line-height: 1.14;
}

.th-crossword-grid {
  display: grid;
  background: #fff;
  border: 1px solid #333;
}

.th-crossword-grid--13 {
  grid-template-columns: repeat(13, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
}

.th-crossword-grid span {
  border-right: .35px solid #777;
  border-bottom: .35px solid #777;
}

.th-crossword-grid span.is-black {
  background: #201f1d;
}

/* Larger clues for readability */
.th-clue-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6.8px;
  line-height: 1.18;
}

.th-clue-columns strong {
  display: block;
  margin-bottom: 3px;
  font-size: 7px;
}

.th-clue-columns p {
  margin: 0 0 1.5px;
}


.th-wordsearch-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  border: 1px solid #555;
  background: #fff;
}

.th-wordsearch-grid span {
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6px;
  font-weight: 600;
}

.th-word-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4.8px;
  line-height: 1.12;
}

/* Sudoku titles sit directly over the grids with no wasted side/bottom space */
.th-puzzle-box--sudoku {
  padding: 6px 7px 10px;
}

.th-puzzle-box--sudoku h2 {
  margin: 0 0 3px;
  line-height: 1;
}

.th-sudoku-grid--large {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 99%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 1.5px solid #333;
  background: #fff;
}

.th-sudoku-grid--large span {
  border-right: .45px solid #999;
  border-bottom: .45px solid #999;
}

.th-sudoku-grid--large span:nth-child(3n) {
  border-right: 1px solid #333;
}

.th-sudoku-grid--large span:nth-child(n+19):nth-child(-n+27),
.th-sudoku-grid--large span:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 1px solid #333;
}

.th-jumble-list {
  margin: 5px 0 0 13px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5.2px;
  line-height: 1.4;
  font-weight: 700;
}

.th-jumble-list li {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 4px;
  margin-bottom: 2px;
}

.th-jumble-line {
  align-self: end;
  height: 7px;
  border-bottom: 1px solid #777;
}

/* Expanded horoscope typography */
.th-horoscope-area {
  height: 205px;
  padding-top: 5px;
  padding-bottom: 8px;
}

.th-horoscope-heading {
  height: 22px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  border-bottom: 1px solid #bbb6ac;
}

.th-horoscope-heading h2 {
  margin: 0;
  color: #b62028;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.th-horoscope-heading span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5.2px;
}

.th-horoscope-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 172px;
}

.th-horoscope-card {
  display: block;
  min-width: 0;
  padding: 5px 5px 4px;
  border-right: 1px solid #c8c3b8;
  border-bottom: 1px solid #c8c3b8;
}

.th-horoscope-card::after {
  content: "";
  display: block;
  clear: both;
}

.th-horoscope-card:nth-child(6n) {
  border-right: 0;
}

.th-horoscope-card:nth-child(n+7) {
  border-bottom: 0;
}

.th-horoscope-symbol {
  float: left;
  margin: 0 6px 3px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  line-height: 1;
}

.th-horoscope-copy {
  min-width: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.th-horoscope-copy h3 {
  margin: 0;
  font-size: 7.4px;
  line-height: 1.02;
}

.th-horoscope-copy strong {
  display: block;
  margin: 1px 0 3px;
  font-size: 6.1px;
  line-height: 1.1;
}

.th-horoscope-copy p {
  margin: 0;
  font-size: 6.1px;
  line-height: 1.2;
}