/* Local Wikipedia: the page's layout, on top of Wikipedia's own look (wiki.css) */

[hidden] { display: none !important; }

/* wiki.css hides these itself; here the hidden attribute decides */
#content { display: block; }
#details { display: inline; }

body {
  margin: 0;
  background-color: #ffffff;
  color: #202122;
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "side main";
  align-items: start;
  align-content: start;   /* rows only as tall as what's in them */
  min-height: 100vh;
}

#lwhead {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.6em 1.25em 0.4em;
}

/* The wordmark: capitals in the serif, a small tagline under it (Wikipedia's is an image of the same) */
#lwhead h1 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  font-weight: normal;
  line-height: 1.1;
}
#lwhead .wordmark {
  display: block;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.15em;
}
/* The logo (logo.png, a jigsaw piece): sized by width, its height follows. In the header it's left of the
   title and tagline; on the entry page it's above the big wordmark. */
.piece { display: block; height: auto; }
#lwhead h1 { display: grid; grid-template-columns: auto 1fr; column-gap: 0.45em; align-items: center; }
#lwhead .logo { grid-row: 1 / span 2; display: block; line-height: 0; }
#lwhead .logo .piece { width: 2.2em; }
#lwhead .wordmark { white-space: nowrap; }
#lwhead .tagline { grid-column: 2; }
.portal-title { display: flex; flex-direction: column; align-items: center; gap: 0.5em; margin-bottom: 1.8em; }
.portal-title > div { display: flex; flex-direction: column; align-items: center; }
.portal-title .piece { width: 4em; flex: 0 0 auto; }
.portal-title .portal-wordmark { white-space: nowrap; }
.portal-title .portal-tagline { margin-bottom: 0; }
#lwhead .change { font-size: 0.85em; }
#lwhead .change a { color: #36c; }
#lwhead .tagline {
  display: block;
  font-size: 0.62em;
  color: #202122;
  margin-top: 0.15em;
}

#ejMore { flex: 0 0 auto; }

#loading, #content {
  grid-area: main;
  margin: 0;
  padding: 0.5em 1.5em 2em;
  border: 0;
  background-color: #ffffff;
  color: #202122;
  font-size: 1em;      /* Wikipedia's article text is 16px now (it was 14px in the old look wiki.css copies) */
  line-height: 1.6;
  min-width: 0;
  max-width: 60em;
}

/* ---------- An article, sized as on Wikipedia now ---------- */

#content .mw-body-content { font-size: 1em; line-height: 1.625; }
#content .mw-body-content p { margin: 0.5em 0 1em; }

#firstHeading {
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  font-size: 1.8em;
  font-weight: normal;
  line-height: 1.375;
  margin: 0.25em 0 0;
  padding: 0;
  border: 0;
}
/* the rule under a page's title, as on Wikipedia */
#firstHeading:not(.mp-hidden-heading) { border-bottom: 1px solid #a2a9b1; padding-bottom: 0.15em; margin-bottom: 0.8em; }

#mw-content-text h2 { font-size: 1.5em; margin-top: 1em; }
#mw-content-text h3 { font-size: 1.2em; }

#mw-content-text a, #mw-panel a, #intro a { color: #36c; }
#mw-content-text a:visited { color: #6a60b0; }

/* The infobox: its look is in Wikipedia's site-wide stylesheet, which doesn't come with the article */
#mw-content-text .infobox {
  border: 1px solid #a2a9b1;
  background-color: #f8f9fa;
  color: #202122;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.2em;
  float: right;
  clear: right;
  font-size: 88%;
  line-height: 1.5em;
  width: 22em;
  border-spacing: 3px;
}
#mw-content-text .infobox th, #mw-content-text .infobox td { vertical-align: top; text-align: left; padding: 0.2em 0.3em; }
#mw-content-text .infobox .infobox-above, #mw-content-text .infobox .infobox-title { font-size: 125%; font-weight: bold; text-align: center; }
#mw-content-text .infobox .infobox-image, #mw-content-text .infobox .infobox-caption, #mw-content-text .infobox .infobox-header,
#mw-content-text .infobox .infobox-subheader, #mw-content-text .infobox .infobox-below { text-align: center; }
#mw-content-text .infobox .infobox-header { font-weight: bold; }
#mw-content-text .infobox .infobox-image img { display: inline-block; }

/* Pictures: Wikipedia's markup for them changed in 2023 (figure elements), after wiki.css was copied.
   Thumbnails float right in a frame with the caption under them, as there. */
#mw-content-text figure[typeof~="mw:File/Thumb"], #mw-content-text figure[typeof~="mw:File/Frame"] {
  display: table;
  float: right;
  clear: right;
  margin: 0.5em 0 1.3em 1.4em;
  border: 1px solid #c8ccd1;
  border-bottom: 0;
  background-color: #f8f9fa;
  padding: 3px;
  text-align: center;
}
#mw-content-text figure.mw-halign-left { float: left; clear: left; margin: 0.5em 1.4em 1.3em 0; }
#mw-content-text figure.mw-halign-center { float: none; margin: 0 auto 1.3em; }
#mw-content-text figure.mw-halign-none { float: none; margin-left: 0; }
#mw-content-text figure > a, #mw-content-text figure > span { display: block; }
#mw-content-text figure img { border: 1px solid #c8ccd1; background: #fff; vertical-align: middle; }
#mw-content-text figure figcaption {
  display: table-caption;
  caption-side: bottom;
  border: 1px solid #c8ccd1;
  border-top: 0;
  background-color: #f8f9fa;
  padding: 0 6px 6px;
  font-size: 88%;
  line-height: 1.4;
  text-align: left;
}
#mw-content-text figure[typeof~="mw:File"] figcaption { display: none; }   /* plain (not thumb) pictures have none */
#mw-content-text .mw-heading { clear: none; }
#mw-content-text .infobox-label { padding-right: 0.65em; }

#attribution {
  margin-top: 2em;
  padding-top: 0.6em;
  border-top: 1px solid #a2a9b1;
  font-size: 0.8em;
  color: #54595d;
}
#attribution a { color: #36c; }

/* ---------- The way in ---------- */

/* the big wordmark replaces the small one in the header */
body.entry #lwhead h1 { visibility: hidden; }

#intro {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 34em;
  box-sizing: border-box;
  margin: 6vh auto 3em;
  padding: 0 1em;
  text-align: center;
  color: #202122;
}

.portal-wordmark {
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  font-size: 2.6em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.portal-tagline {
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  font-size: 1.15em;
  margin: 0.3em 0 1.8em;
}

.portal-label { display: block; font-size: 0.875em; color: #54595d; margin-bottom: 0.5em; }

/* "Someone shared an article...": a Wikipedia-style message box */
#sharednote, .lw-note {
  margin: 0 0 1.4em;
  padding: 0.6em 0.9em;
  border: 1px solid #a2a9b1;
  border-left: 4px solid #36c;
  background: #eaf3ff;
  text-align: left;
  font-size: 0.95em;
  line-height: 1.5;
}
#sharednote a, .lw-note a { font-weight: bold; }
.lw-note { margin-top: 0.5em; }

/* Wikipedia's search bar: a plain box, a blue button joined on */
.portal-search { display: flex; }
#postcodeentry {
  flex: 1;
  min-width: 0;
  font-size: 1.1em;
  padding: 0.55em 0.7em;
  border: 1px solid #a2a9b1;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  color: #202122;
}
#postcodeentry:focus { outline: none; border-color: #36c; box-shadow: inset 0 0 0 1px #36c; }
#startbutton {
  font-size: 1em;
  font-weight: bold;
  padding: 0 1.4em;
  border: 1px solid #36c;
  border-radius: 0 2px 2px 0;
  background: #36c;
  color: #fff;
  cursor: pointer;
}
#startbutton:hover { background: #447ff5; border-color: #447ff5; }
#startbutton:disabled { opacity: 0.6; cursor: default; }

/* Suggestions under the box, like Wikipedia's search suggestions */
.portal-search { position: relative; }
#suggestbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid #a2a9b1;
  border-top: 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  text-align: left;
}
#suggestions { list-style: none; margin: 0; padding: 0; }
#suggestions li {
  display: flex;
  flex-direction: column;
  padding: 0.45em 0.75em;
  cursor: pointer;
  line-height: 1.3;
}
#suggestions li:hover, #suggestions li[aria-selected="true"] { background: #eaf3ff; }
.s-name { color: #202122; }
.s-detail { color: #72777d; font-size: 0.85em; }
.suggest-credit { padding: 0.3em 0.75em; border-top: 1px solid #eaecf0; font-size: 0.7em; color: #72777d; }
.suggest-credit a { color: #72777d; }

#orlocation { margin-top: 0.7em; display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.portal-or { color: #54595d; font-size: 0.9em; }
#locatebutton {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.95em;
  padding: 0.45em 1em;
  border: 1px solid #a2a9b1;
  border-radius: 2px;
  background: #f8f9fa;
  color: #202122;
  cursor: pointer;
}
#locatebutton:hover { background: #fff; border-color: #72777d; }
#locatebutton svg { width: 1.1em; height: 1.1em; fill: #36c; }

#error { color: #b32424; font-weight: bold; margin: 1em 0 0; }

.portal-about {
  margin-top: 2.2em;
  padding-top: 1.2em;
  border-top: 1px solid #eaecf0;
  font-size: 0.9em;
  line-height: 1.6;
  color: #54595d;
}
.portal-about p { margin: 0 0 0.7em; }
.portal-about .lead { font-size: 1.25em; line-height: 1.45; color: #202122; margin-bottom: 0.9em; }
.portal-about .small { font-size: 0.9em; }
.portal-about .privacy { font-size: 0.8em; }
/* The article: keeps to the box; wide tables and images scroll inside it */
#mw-content-text { overflow-x: auto; }
#mw-content-text img { max-width: 100%; height: auto; }

/* ---------- The Main Page, after Wikipedia's ---------- */

.mp-hidden-heading { display: none; }

#mp-topbanner {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 0.6em 1em 0.8em;
  margin-bottom: 0.8em;
  text-align: center;
}
#mp-welcome { font-size: 1.62em; font-family: 'Linux Libertine', 'Georgia', 'Times', serif;}
#mp-welcome a { color: #36c; white-space: nowrap; }
#mp-free { font-size: 1.1em; margin: 0.1em 0 0.3em; }
#mp-count { font-size: 0.95em; color: #202122; }
.mp-another { white-space: nowrap; }

#mp-upper {
  display: flex;
  gap: 1%;
  align-items: stretch;
}
#mp-left, #mp-right {
  padding: 0 0.5em 0.5em;
  border: 1px solid;
}
#mp-left { flex: 0 0 55%; background: #f5fffa; border-color: #cef2e0; }
#mp-right { flex: 1; background: #f5faff; border-color: #cedff2; }

/* (#mw-content-text: to beat wiki.css's serif article headings; the Main Page's are sans) */
#mw-content-text .mp-h2 {
  margin: 0.5em 0;
  padding: 0.2em 0.4em;
  border: 1px solid;
  font-family: sans-serif;
  font-size: 1.2em;
  line-height: 1.3;
  font-weight: bold;
  color: #000;
}
#mp-left .mp-h2 { background: #cef2e0; border-color: #a3bfb1; }
#mp-right .mp-h2 { background: #cedff2; border-color: #a3b0bf; }

.mp-body { padding: 0.1em 0.4em 0.4em; }
.mp-body p { margin: 0.4em 0; }
.mp-body ul { margin: 0.3em 0 0.3em 1.6em; padding: 0; list-style: square; }
.mp-body li { margin-bottom: 0.25em; }
.mp-tfa-img { float: left; margin: 0.5em 0.9em 0.4em 0; }
.mp-tfa-img img { border: 1px solid #c8ccd1; display: block; }
#mp-tfa .mp-body::after { content: ""; display: block; clear: both; }
.dist { color: #54595d; }

#mp-other {
  margin-top: 0.8em;
  padding: 0.3em 0.5em 0.3em;
  border: 1px solid #ddd;
}

#navlinks { list-style: none; margin: 0 0 1em; padding: 0; }
#navlinks li { padding: 0.2em 0; }
#navlinks a { color: #36c; }

/* The A-Z index */
#az-jump { font-size: 1.1em; margin: 0.5em 0 1em; line-height: 1.8; }
#az-jump a { font-weight: bold; padding: 0 0.1em; }
.az-section h2 { margin-top: 0.8em; }
.az-list { columns: 16em; column-gap: 2em; margin: 0.3em 0 0 1.2em; }
.az-list li { break-inside: avoid; margin-bottom: 0.15em; }
.distance-list { padding-left: 2.2em; }
#index-switch { margin: 0.3em 0 0.8em; }
#nearbymore { display: inline-block; margin-top: 0.3em; }

#mw-panel {
  grid-area: side;
  position: static;
  width: auto;
  padding: 1em 0.5em 1em 0.75em;
  font-size: 0.875em;
}

#mw-panel h3 {
  margin: 0 0 0.4em;
  color: #54595d;
  font-size: 1em;
  font-weight: normal;
}

#sidelinks { list-style: none; margin: 0; padding: 0; }
/* the Nearby box: wiki.css indents it 7px and draws its fading bar as the box's top edge. Lined up with the
   heading and the links above, with room under the bar */
#mw-panel #p-nearby .body { margin-left: 0; padding-top: 0.5em; background-position: left top; }
#mw-panel #p-nearby h3 { margin-bottom: 0.3em; }
/* wiki.css shrinks sidebar lists again: the same 14px as the links above, as on Wikipedia */
#mw-panel .portal .body, #mw-panel .portal .body ul, #mw-panel .portal .body li { font-size: 1em; }
#sidelinks li { margin: 0; padding: 0.2em 0; line-height: 1.2; }
#sidelinks a { color: #36c; }

/* Phones: one column, the nearby list after the article */
@media (max-width: 720px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "main"
      "side";
  }
  #lwhead { padding: 0.5em 0.75em; align-items: flex-start; }
  #lwhead h1 { font-size: 1.4em; min-width: 0; }
  #lwhead .wordmark { font-size: 1em; }
  #loading, #content { padding: 0.25em 0.9em 1.5em; }
  .portal-wordmark { font-size: 1.8em; }
  .portal-title { gap: 0.4em; }
  .portal-title .piece { width: 3em; }
  #lwhead .logo .piece { width: 1.8em; }
  #lwhead h1 { column-gap: 0.35em; }
  #lwhead .wordmark { font-size: 0.7em; letter-spacing: 0.06em; }
  #intro { margin-top: 3vh; }
  #mw-content-text .infobox { float: none; margin: 0.5em auto 1em; width: auto; max-width: 100%; }
  #mw-panel { padding: 1em 0.9em; }
  #mp-upper { flex-direction: column; gap: 0.8em; }
  #mp-left { flex: none; }
  /* Wikipedia's floated infoboxes would squeeze the text to nothing */
  #mw-content-text .infobox, #mw-content-text table.vcard, #mw-content-text .thumb, #mw-content-text figure {
    float: none !important;
    margin: 0 auto 1em !important;
    max-width: 100%;
  }
}
#navlinks label { display: block; }
#navlinks select { font: inherit; color: #36c; width: 100%; }
#coordinates { font-size: 0.85em; color: #54595d; margin: 0 0 0.6em; text-align: right; }
#coordinates a { color: #36c; }

/* Galleries (<gallery> in articles): Wikipedia's own styles for these aren't in wiki.css */
#mw-content-text ul.gallery { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0.5em auto; padding: 0; }
#mw-content-text li.gallerybox { box-sizing: border-box; margin: 2px; padding: 0; vertical-align: top; }
#mw-content-text li.gallerybox .thumb { display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 2px auto; background: #f8f9fa; border: 1px solid #eaecf0; }
#mw-content-text li.gallerybox .thumb img { max-width: 100%; height: auto; }
#mw-content-text li.gallerybox .gallerytext { font-size: 94%; padding: 2px 4px; text-align: center; }

/* Main Page map: faint OpenStreetMap tiles with a dot for each article */
#mp-map .mp-body { padding: 0.1em 0 0.3em; }
.mp-mapbox { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; overflow: hidden; background: #e8eef3; border: 1px solid #a3b0bf; }
.mp-tiles img { position: absolute; display: block; max-width: none; filter: grayscale(0.5); opacity: 0.6; }
.mp-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed #54595d; border-radius: 50%; pointer-events: none; }
.mp-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #36c; opacity: 0.55; border: 1px solid #fff; box-sizing: content-box; }
.mp-dot.near { background: #14366e; opacity: 0.9; }
.mp-dot:hover { opacity: 1; background: #d33; z-index: 2; }
.mp-here { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; background: #d33; box-shadow: 0 0 0 1px #800; pointer-events: none; }
.mp-attrib { position: absolute; right: 0; bottom: 0; padding: 0 4px; font-size: 10px; background: rgba(255, 255, 255, 0.8); color: #333 !important; }
.mp-tip { position: absolute; z-index: 3; max-width: 90%; padding: 1px 5px; font: 12px/1.4 sans-serif; color: #fff; background: rgba(0, 0, 0, 0.8); border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mp-tip[hidden] { display: none; }
#mp-map { margin-top: 0.5em; }