/* St. John's Heritage Trail - front end styles */
/* ============ TOKENS ============ */
.sjht-page{--sjht-navy:#161B4A;--sjht-teal:#16B0AA;--sjht-pink:#E5106B;--sjht-orange:#F0862B;--sjht-text:#2B2F38;--sjht-muted:#5B6270;--sjht-line:#E3E6EB;--sjht-bg:#F7F8FA;box-sizing:border-box;color:var(--sjht-text)}
.sjht-page *,.sjht-page *::before,.sjht-page *::after{box-sizing:border-box}
.sjht-page .sjht-wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ============ THEME-PROOF BUTTON RESET ============ */
.sjht-page button.sjht-toggle,
.sjht-page button.sjht-thumb,
.sjht-lightbox button{
  -webkit-appearance:none!important;appearance:none!important;
  background:transparent!important;background-image:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  outline:0!important;outline-offset:0!important;
  color:inherit!important;font-family:inherit!important;
  text-transform:none!important;letter-spacing:normal!important;
  min-height:0!important;min-width:0!important;width:auto;
  line-height:normal!important;text-shadow:none!important;transform:none!important;
}
.sjht-page button.sjht-toggle:hover,
.sjht-page button.sjht-thumb:hover,
.sjht-lightbox button:hover{background:transparent!important;color:inherit!important;box-shadow:none!important}

/* ============ 1. HERO WITH OVERLAID TITLE ============
   The title now sits on the photograph. Turn OFF the theme's own page title
   area for these pages, or the title appears twice and you get two <h1>. */
/* --sjht-pull is how far the hero slides up under the floating header.
   Measure your header in the browser inspector and set it to match.
   Mobile stays at 0, where the header is normally solid. */
.sjht-page{--sjht-pull:0px}
@media (min-width:1000px){.sjht-page{--sjht-pull:110px}}

/* FULL BLEED
   Negative side margins only, with no width property. Setting width:100vw
   as well fights the margins and makes the block render narrow. Do NOT put
   overflow-x:hidden on .sjht-page either, because a parent with hidden
   overflow clips its own children and the breakout disappears.
   If a horizontal scrollbar shows up, add  body{overflow-x:hidden}  in
   Appearance > Customise > Additional CSS instead. */
.sjht-page .sjht-hero{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* pull up under the header, then give the space back as padding so the
     title and pin never end up beneath the menu */
  margin-top:calc(var(--sjht-pull) * -1);
  margin-bottom:34px;
  padding-top:var(--sjht-pull);
  min-height:clamp(340px,58vh,560px);
  background:#161B4A;overflow:hidden}

/* the photograph */
.sjht-page .sjht-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center var(--sjht-focus,45%);display:block;z-index:0;max-height:none;margin:0}
/* width and height attributes are on the images to reserve space and stop
   layout shift. These rules make sure the attributes never override the
   intended CSS sizing. */
.sjht-page .sjht-panel figure img{height:auto}
.sjht-page button.sjht-thumb img{width:100%;height:100%}

/* scrim. Navy rather than black, so it ties to the logo colour.
   Light at the top so the building stays visible, strong at the bottom
   so the text always has something dark behind it. */
.sjht-page .sjht-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(22,27,74,.32) 0%,rgba(22,27,74,.14) 34%,rgba(22,27,74,.64) 74%,rgba(22,27,74,.88) 100%)}

/* the text, centred over the image */
.sjht-page .sjht-herotext{position:relative;z-index:2;width:100%;max-width:820px;margin:0 auto;padding:0 22px 36px;text-align:center}
.sjht-page .sjht-hero .sjht-meta{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7FE3DC}
.sjht-page .sjht-hero .sjht-h1{margin:0;font-size:clamp(30px,6.2vw,50px);line-height:1.08;font-weight:700;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(9,11,26,.5)}
.sjht-page .sjht-hero .sjht-rule{width:64px;height:3px;background:#E5106B;border:0;margin:18px auto 0}

/* the map pin, matching the printed map.
   Sits inline above the meta line rather than pinned to the viewport corner.
   On a full-bleed hero a corner badge drifts far from the title on wide
   screens, and it was being clipped by the container edge. */
.sjht-page .sjht-hero .sjht-pin{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;margin:0 0 16px;border-radius:23px;background:var(--sjht-navy);color:#fff;font-size:19px;font-weight:700;line-height:1;box-shadow:0 2px 14px rgba(9,11,26,.45),inset 0 0 0 2px rgba(255,255,255,.28)}
.sjht-page .sjht-hero--add .sjht-pin{background:var(--sjht-orange)}

@media (min-width:1000px){
  .sjht-page .sjht-hero{min-height:clamp(420px,62vh,620px)}
  .sjht-page .sjht-herotext{padding-bottom:46px}
}
/* phone held in landscape */
@media (max-height:480px){.sjht-page .sjht-hero{min-height:300px}}

/* ============ 3. INTRO ============ */
.sjht-page .sjht-intro{margin:0 0 30px;font-size:clamp(17px,2.2vw,19px);line-height:1.62}

/* ============ 4. ACCORDION ============ */
.sjht-page .sjht-more{margin:0 0 40px;border:1px solid var(--sjht-line);border-radius:6px;overflow:hidden;background:#fff}
.sjht-page button.sjht-toggle{display:flex!important;align-items:center;gap:14px;width:100%!important;padding:16px 18px!important;cursor:pointer;text-align:left;font-size:16px!important;font-weight:700!important;color:var(--sjht-navy)!important;transition:background .15s ease}
.sjht-page button.sjht-toggle:hover{background:var(--sjht-bg)!important}
.sjht-page button.sjht-toggle:focus-visible{box-shadow:inset 0 0 0 2px var(--sjht-navy)!important}
.sjht-page .sjht-tlabel{flex:1 1 auto;min-width:0}
.sjht-page .sjht-tsub{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--sjht-muted)}
.sjht-page .sjht-chev{flex:0 0 auto;width:18px;height:18px;transition:transform .25s ease;color:var(--sjht-teal)}
.sjht-page .sjht-chev svg{width:100%;height:100%;display:block;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sjht-page button.sjht-toggle[aria-expanded="true"]{background:var(--sjht-bg)!important;border-bottom:1px solid var(--sjht-line)}
.sjht-page button.sjht-toggle[aria-expanded="true"] .sjht-chev{transform:rotate(180deg)}
.sjht-page .sjht-panel[hidden]{display:none}
.sjht-page .sjht-panel{padding:6px 18px 20px}
.sjht-page .sjht-panel p{margin:0 0 16px;font-size:16px;line-height:1.68}
.sjht-page .sjht-panel h2{margin:26px 0 10px;font-size:19px;line-height:1.28;font-weight:700;color:var(--sjht-navy)}
.sjht-page .sjht-panel h2:first-child{margin-top:14px}
.sjht-page .sjht-panel figure{margin:22px 0}
.sjht-page .sjht-panel figure img{width:100%;height:auto;display:block;border-radius:4px}
.sjht-page .sjht-cap{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--sjht-muted)}

/* ============ 5. GALLERY ============ */
.sjht-page .sjht-galhead{margin:0 0 4px;font-size:21px;font-weight:700;color:var(--sjht-navy)}
.sjht-page .sjht-galsub{margin:0 0 18px;font-size:13.5px;color:var(--sjht-muted)}
.sjht-page .sjht-gal{display:grid;grid-template-columns:1fr;gap:26px 20px;margin:0 0 40px;padding:0;list-style:none}
@media (min-width:560px){.sjht-page .sjht-gal{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.sjht-page .sjht-gal{grid-template-columns:repeat(3,1fr)}}
.sjht-page .sjht-gal figure{margin:0}
.sjht-page button.sjht-thumb{display:block;width:100%!important;padding:0!important;cursor:pointer;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px!important;background:#EDEFF2!important}
.sjht-page button.sjht-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.sjht-page button.sjht-thumb:hover img{transform:scale(1.045)}
.sjht-page button.sjht-thumb:focus-visible{box-shadow:0 0 0 2px var(--sjht-navy)!important}
.sjht-page .sjht-zoom{position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:15px;background:rgba(22,27,74,.82);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;pointer-events:none}
.sjht-page button.sjht-thumb:hover .sjht-zoom,.sjht-page button.sjht-thumb:focus-visible .sjht-zoom{opacity:1}
.sjht-page .sjht-zoom::before{content:"";width:11px;height:11px;border:2px solid #fff;border-radius:50%}
.sjht-page .sjht-gal figcaption{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--sjht-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sjht-page .sjht-detail[hidden]{display:none}

/* ============ 6. PREV / NEXT ============ */
.sjht-page .sjht-nav{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 36px}
@media (min-width:620px){.sjht-page .sjht-nav{grid-template-columns:1fr 1fr}}
.sjht-page .sjht-navlink{display:block;padding:17px 20px;border:1px solid var(--sjht-line);border-radius:6px;background:#fff;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.sjht-page .sjht-navlink:hover,.sjht-page .sjht-navlink:focus{border-color:var(--sjht-teal);background:var(--sjht-bg)}
.sjht-page .sjht-navlink span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sjht-muted);margin-bottom:5px}
.sjht-page .sjht-navlink strong{display:block;font-size:16.5px;line-height:1.3;color:var(--sjht-navy)}
.sjht-page .sjht-navlink--next{text-align:right}

/* ============ 7. FOOTER STRIP ============ */
.sjht-page .sjht-strip{background:var(--sjht-bg);border-top:1px solid var(--sjht-line);padding:26px 20px;text-align:center}
.sjht-page .sjht-btn{display:inline-block;margin:5px;padding:13px 24px;border-radius:4px;font-size:15px;font-weight:700;text-decoration:none;background:var(--sjht-navy);color:#fff}
.sjht-page .sjht-btn--ghost{background:#fff;color:var(--sjht-navy);box-shadow:inset 0 0 0 2px var(--sjht-navy)}

/* ============ SPLIT LIGHTBOX (modal card) ============
   Not scoped under .sjht-page. The script moves it to <body>.
   The overlay is the dim backdrop. The card sits inside it with a margin,
   so all four rounded corners are visible on every screen size. */
.sjht-lightbox{position:fixed;inset:0;z-index:999999;background:rgba(9,11,26,.88);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:22px}
.sjht-lightbox[hidden]{display:none}
.sjht-lightbox.sjht-lb--adminbar{padding-top:50px}
@media (min-width:1000px){.sjht-lightbox{padding:5vh 5vw}}
@media (min-width:1500px){.sjht-lightbox{padding:6vh 7vw}}

/* the card */
.sjht-lightbox .sjht-lbcard{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:1100px;height:100%;max-height:min(86vh,820px);
  background:#fff;border-radius:14px;overflow:hidden;
  /* hairline ring plus a deep shadow, so the card reads as a layer sitting
     above the page rather than a new screen */
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 34px 90px rgba(0,0,0,.58);
  animation:sjht-pop .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes sjht-pop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}

/* image side */
.sjht-lightbox .sjht-lbstage{position:relative;flex:0 0 46%;display:flex;align-items:center;justify-content:center;min-height:0;background:#10142B;padding:14px}
.sjht-lightbox .sjht-lbstage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:4px;box-shadow:0 8px 30px rgba(0,0,0,.4)}

/* info side, white */
.sjht-lightbox .sjht-lbinfo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;padding:22px 22px 28px}
.sjht-lightbox .sjht-lbcount{margin:0 0 12px;color:#16B0AA;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.sjht-lightbox .sjht-lbtext{color:#2B2F38}
.sjht-lightbox .sjht-lbtext h3{margin:0 0 6px;font-size:21px;line-height:1.25;font-weight:700;color:#161B4A}
.sjht-lightbox .sjht-lbtext h3::after{content:"";display:block;width:52px;height:3px;background:#E5106B;margin:12px 0 16px}
.sjht-lightbox .sjht-lbtext p{margin:0 0 15px;font-size:15.5px;line-height:1.7}
.sjht-lightbox .sjht-lbtext p:last-child{margin-bottom:0}
.sjht-lightbox .sjht-lbinfo::-webkit-scrollbar{width:8px}
.sjht-lightbox .sjht-lbinfo::-webkit-scrollbar-track{background:#F2F4F7}
.sjht-lightbox .sjht-lbinfo::-webkit-scrollbar-thumb{background:#C9CEDA;border-radius:4px}

/* two equal halves from 1000px: info left, image right */
@media (min-width:1000px){
  .sjht-lightbox .sjht-lbcard{flex-direction:row}
  .sjht-lightbox .sjht-lbinfo{order:1;flex:0 0 50%;width:50%;height:100%;padding:46px 40px}
  .sjht-lightbox .sjht-lbstage{order:2;flex:0 0 50%;width:50%;height:100%;padding:22px}
  .sjht-lightbox .sjht-lbtext h3{font-size:24px}
}

/* controls, inline SVG so the theme cannot restyle them */
.sjht-lightbox button.sjht-lbx,
.sjht-lightbox button.sjht-lbarrow{
  position:absolute;display:flex!important;align-items:center;justify-content:center;
  padding:0!important;cursor:pointer;border-radius:50%!important;
  background:rgba(16,20,43,.62)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)!important;
  transition:background .16s ease,box-shadow .16s ease;z-index:4}
.sjht-lightbox button.sjht-lbx:hover,
.sjht-lightbox button.sjht-lbarrow:hover{background:rgba(16,20,43,.88)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)!important}
.sjht-lightbox button.sjht-lbx{top:12px;right:12px;width:40px;height:40px}
.sjht-lightbox button.sjht-lbarrow{top:50%;margin-top:-22px;width:44px;height:44px}
.sjht-lightbox button.sjht-lbprev{left:10px}
.sjht-lightbox button.sjht-lbnext{right:10px}
.sjht-lightbox button svg{width:18px;height:18px;display:block;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sjht-lightbox button.sjht-lbarrow svg{width:16px;height:16px}
.sjht-lightbox button.sjht-lbprev svg{margin-left:-2px}
.sjht-lightbox button.sjht-lbnext svg{margin-right:-2px}
.sjht-lightbox button:focus-visible{box-shadow:inset 0 0 0 2px #fff!important}
@media (min-width:1000px){
  .sjht-lightbox button.sjht-lbarrow{width:48px;height:48px;margin-top:-24px}
  .sjht-lightbox button.sjht-lbprev{left:14px}
  .sjht-lightbox button.sjht-lbnext{right:14px}
}

@media (prefers-reduced-motion:reduce){
  .sjht-page .sjht-chev,.sjht-page button.sjht-thumb img{transition:none}
  .sjht-page button.sjht-thumb:hover img{transform:none}
  .sjht-lightbox .sjht-lbcard{animation:none}
}

/* credit line inside the viewer, for archive photographs and scans */
.sjht-lightbox .sjht-lbtext .sjht-credit{margin-top:18px;padding-top:14px;border-top:1px solid #E3E6EB;font-size:12.5px;line-height:1.5;color:#5B6270}
/* WordPress writes width and height attributes on every image. These keep the
   attributes from overriding the intended CSS sizing. */
.sjht-page .sjht-panel figure img{height:auto}
.sjht-page button.sjht-thumb img{width:100%;height:100%}
.sjht-page .sjht-intro p{margin:0 0 16px}
.sjht-page .sjht-intro p:last-child{margin-bottom:0}

/* sections shown open, with no expander, used on History and Credits */
.sjht-page .sjht-open{margin:0 0 40px}
.sjht-page .sjht-panel--open{padding:0}
.sjht-page .sjht-panel--open h2:first-child{margin-top:0}

/* compact header, used until a main image is chosen */
.sjht-page .sjht-hero.sjht-hero--bare{min-height:0;padding-top:calc(var(--sjht-pull) + 44px);padding-bottom:6px}
@media (min-width:1000px){.sjht-page .sjht-hero.sjht-hero--bare{min-height:0;padding-top:calc(var(--sjht-pull) + 58px);padding-bottom:12px}}
.sjht-page .sjht-hero--bare::after{background:none}

/* a lone Next link sits in the right column, so the empty half does not read
   as a link that failed to load */
@media (min-width:620px){
  .sjht-page .sjht-nav .sjht-navlink--next:only-child{grid-column:2}
}

/* the optional photograph between the introduction and the history sections */
.sjht-page .sjht-lead{margin:0 0 34px}
.sjht-page .sjht-lead img{width:100%;height:auto;display:block;border-radius:4px}
.sjht-page .sjht-lead .sjht-cap{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--sjht-muted);font-style:normal}

/* links inside the body text */
.sjht-page .sjht-intro a,.sjht-page .sjht-panel a{color:var(--sjht-navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--sjht-line)}
.sjht-page .sjht-intro a:hover,.sjht-page .sjht-panel a:hover{color:var(--sjht-pink);border-bottom-color:var(--sjht-pink)}

/* ---- content blocks: photographs sitting in the flow of the text ---- */
.sjht-page .sjht-figure{margin:26px 0 30px}
.sjht-page .sjht-figure button.sjht-thumb{position:relative;display:block;width:100%!important;padding:0!important;cursor:zoom-in;border-radius:4px!important;overflow:hidden;background:#EDEFF2!important;aspect-ratio:auto}
.sjht-page .sjht-figure button.sjht-thumb img{width:100%;height:auto;display:block}
.sjht-page .sjht-figure .sjht-zoom{right:12px;bottom:12px}
.sjht-page .sjht-figure .sjht-cap{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--sjht-muted);font-style:normal}
.sjht-page .sjht-panel > h2:first-child{margin-top:0}

/* images written in the editor */
.sjht-page .sjht-panel figure{margin:26px 0 30px}
.sjht-page .sjht-panel figure img{width:100%;height:auto;display:block;border-radius:4px}
.sjht-page .sjht-panel figcaption{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--sjht-muted);font-style:normal}
.sjht-page button.sjht-thumb--inline{display:block;width:100%!important;padding:0!important;aspect-ratio:auto;cursor:zoom-in;border-radius:4px!important;overflow:hidden;background:transparent!important}
.sjht-page button.sjht-thumb--inline img{width:100%;height:auto}
.sjht-page .sjht-panel > h2:first-child{margin-top:0}

/* ==========================================================================
   PAGE RHYTHM
   The page was reading as a short paragraph floating in a lot of space, with
   a single navigation card stranded on one side. These rules give it a spine.
   ========================================================================== */

/* the introduction: larger, and held to a comfortable measure */
.sjht-page .sjht-intro{
  max-width:38em;
  font-size:clamp(17.5px,2.3vw,20px);
  line-height:1.62;
  color:#22262F}

/* the expander, given more presence and room to breathe */
.sjht-page .sjht-more{
  margin:34px 0 40px;
  border-radius:8px;
  border-color:#DDE1E8;
  box-shadow:0 1px 2px rgba(22,27,74,.04)}
.sjht-page button.sjht-toggle{padding:20px 22px!important;font-size:17px!important}
.sjht-page .sjht-tsub{margin-top:5px;font-size:13.5px}
.sjht-page button.sjht-toggle:hover{background:#F7F9FB!important}

/* the panel inside it */
.sjht-page .sjht-panel{padding:6px 22px 26px}
.sjht-page .sjht-panel p{font-size:16.5px;line-height:1.72}

/* PREVIOUS AND NEXT
   A single link was sitting in one half of a two column grid, which read as a
   card that had failed to load beside it. On its own it now spans the width. */
.sjht-page .sjht-nav{gap:14px;margin:44px 0 40px;padding-top:28px;border-top:1px solid var(--sjht-line)}
@media (min-width:620px){
  .sjht-page .sjht-nav .sjht-navlink:only-child{grid-column:1 / -1}
}
.sjht-page .sjht-navlink{padding:20px 22px;border-radius:8px}
.sjht-page .sjht-navlink span{font-size:11px}
.sjht-page .sjht-navlink strong{font-size:17.5px}
.sjht-page .sjht-navlink:hover{border-color:var(--sjht-teal);background:#F7FCFC}

/* the strip at the foot */
.sjht-page .sjht-strip{padding:34px 20px;margin-top:8px}
.sjht-page .sjht-btn{padding:15px 28px;border-radius:6px}

/* ==========================================================================
   ON A PHONE
   ========================================================================== */

@media (max-width:640px){
  .sjht-page .sjht-wrap{padding:0 18px}

  /* the banner: shorter, so the words start above the fold */
  .sjht-page .sjht-hero{min-height:clamp(280px,46vh,420px)}
  .sjht-page .sjht-herotext{padding-bottom:26px}
  .sjht-page .sjht-hero .sjht-h1{font-size:clamp(26px,7.6vw,34px);line-height:1.1}
  .sjht-page .sjht-hero .sjht-meta{font-size:11px;letter-spacing:.1em}
  .sjht-page .sjht-pin{min-width:40px;height:40px;font-size:17px;margin-bottom:12px}

  .sjht-page .sjht-intro{font-size:17px;line-height:1.6}

  /* a comfortable tap target, and room for two lines of label */
  .sjht-page button.sjht-toggle{padding:18px!important;font-size:16px!important}
  .sjht-page .sjht-panel{padding:4px 18px 22px}
  .sjht-page .sjht-panel p{font-size:16px}

  .sjht-page .sjht-nav{margin:34px 0 30px;padding-top:24px}
  .sjht-page .sjht-navlink{padding:17px 18px}
  .sjht-page .sjht-navlink strong{font-size:16.5px}
  .sjht-page .sjht-navlink--next{text-align:left}

  .sjht-page .sjht-figure{margin:22px 0 26px}
  .sjht-page .sjht-strip{padding:28px 18px}
  .sjht-page .sjht-btn{display:block;margin:8px 0}
}

/* very small phones */
@media (max-width:380px){
  .sjht-page .sjht-wrap{padding:0 15px}
  .sjht-page .sjht-hero .sjht-h1{font-size:25px}
}

/* ==========================================================================
   FIXES
   ========================================================================== */

/* the sub-line under the button was being cut off on a phone. It carries the
   count of what is inside, so it needs to wrap rather than truncate. */
.sjht-page .sjht-tlabel{min-width:0;overflow:visible}
.sjht-page .sjht-tsub{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.45}

/* PREVIOUS AND NEXT ON A PHONE
   They were stacking, which pushed the footer a long way down and made the
   pair read as two separate things rather than one control. Side by side,
   with smaller type, keeps them together and keeps the page short. */
@media (max-width:640px){
  .sjht-page .sjht-nav{grid-template-columns:1fr 1fr;gap:10px}
  .sjht-page .sjht-navlink{padding:14px 13px}
  .sjht-page .sjht-navlink span{font-size:10px;letter-spacing:.06em;margin-bottom:4px}
  .sjht-page .sjht-navlink strong{font-size:14px;line-height:1.3}
  .sjht-page .sjht-navlink--next{text-align:right}
  /* on its own it still takes the full width */
  .sjht-page .sjht-nav .sjht-navlink:only-child{grid-column:1 / -1;text-align:left}
}

/* very small phones: the pair still fits, just tighter */
@media (max-width:380px){
  .sjht-page .sjht-navlink{padding:12px 11px}
  .sjht-page .sjht-navlink strong{font-size:13px}
}

/* ==========================================================================
   ONE SIZE, ONE COLOUR
   The theme sets its own colours and sizes for paragraphs, lists and links,
   which is why the text changed appearance part way down a page. These state
   it plainly for everything inside a heritage page.
   ========================================================================== */

.sjht-page .sjht-panel p,
.sjht-page .sjht-panel li,
.sjht-page .sjht-panel td,
.sjht-page .sjht-open p,
.sjht-page .sjht-open li{
  font-size:16.5px;
  line-height:1.72;
  color:var(--sjht-text);
  font-family:inherit;
  font-weight:400}

.sjht-page .sjht-panel ul,
.sjht-page .sjht-panel ol{margin:0 0 18px 22px}
.sjht-page .sjht-panel li{margin:0 0 8px}
.sjht-page .sjht-panel h2{font-size:21px;line-height:1.28;font-weight:700;color:var(--sjht-navy);margin:30px 0 12px}
.sjht-page .sjht-panel h3{font-size:18px;line-height:1.3;font-weight:700;color:var(--sjht-navy);margin:26px 0 10px}
.sjht-page .sjht-panel strong{font-weight:700;color:inherit}
.sjht-page .sjht-panel em{font-style:italic}

/* ==========================================================================
   PREVIOUS AND NEXT
   Two plain outlined boxes read as unfinished. These are proper controls:
   a round arrow, the label above, the name below.
   ========================================================================== */

.sjht-page .sjht-navlink{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border:1px solid var(--sjht-line);
  border-radius:10px;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.sjht-page .sjht-navlink:hover,
.sjht-page .sjht-navlink:focus{
  border-color:transparent;
  box-shadow:0 10px 26px rgba(22,27,74,.13);
  transform:translateY(-2px)}

/* the arrow */
.sjht-page .sjht-navlink::before{
  content:"";
  flex:0 0 auto;
  width:38px;height:38px;border-radius:19px;
  background:#F2F4F8;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161B4A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:17px 17px;
  transition:background-color .18s ease}
.sjht-page .sjht-navlink--next::before{
  order:2;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161B4A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.sjht-page .sjht-navlink:hover::before{background-color:#E4F7F6}

.sjht-page .sjht-navlink span,
.sjht-page .sjht-navlink strong{flex:1 1 auto;min-width:0}
.sjht-page .sjht-navlink span{
  display:block;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sjht-muted);margin:0 0 3px}
.sjht-page .sjht-navlink strong{
  display:block;font-size:16.5px;line-height:1.3;color:var(--sjht-navy);font-weight:700}

/* the words sit in one column beside the arrow */
.sjht-page .sjht-navlink{flex-wrap:wrap}
.sjht-page .sjht-navlink span{order:1;flex-basis:calc(100% - 52px)}
.sjht-page .sjht-navlink strong{order:1;flex-basis:calc(100% - 52px)}
.sjht-page .sjht-navlink--next span,
.sjht-page .sjht-navlink--next strong{order:1;text-align:right}

@media (max-width:640px){
  .sjht-page .sjht-navlink{gap:10px;padding:14px}
  .sjht-page .sjht-navlink::before{width:32px;height:32px;background-size:15px 15px}
  .sjht-page .sjht-navlink span{font-size:9.5px;flex-basis:calc(100% - 44px)}
  .sjht-page .sjht-navlink strong{font-size:14px;flex-basis:calc(100% - 44px)}
}

/* the banner meets the header, with nothing above it */
.sjht-page{margin-top:0}
.sjht-page .sjht-hero:first-child{margin-top:calc(var(--sjht-pull) * -1)}
@media (max-width:999px){
  /* no floating header to tuck under on a phone, so it simply sits flush */
  .sjht-page .sjht-hero{margin-top:0}
}

/* the banner runs to the top of the content area, with nothing above it */
.sjht-page{margin-top:0}
.sjht-page > .sjht-hero:first-child{margin-top:calc(var(--sjht-pull) * -1)}