/*
  GEOGRAPHICAL REVIEW — a professional GeoGuessr-inspired Zonelets theme
  Replace the contents of style/style.css with this file.
  Uses no external fonts or images.
*/

:root {
  --purple-100: #1a1a2e;
  --black: #10101c;
  --purple-80: #563b9a;
  --purple-50: #7950e5;
  --purple-20: #a19bd9;
  --purple-10: #d9d7f0;
  --red: #cc302e;
  --red-bright: #e94560;
  --paper: #f7f7fb;
  --paper-dark: #ececf4;
  --rule: #b7b5ca;
  --text: #202033;
  --muted: #62627a;
  --link: #3d238c;
  --visited: #704f7d;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--black);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--purple-100);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(145deg, #10101c 0%, #1a1a2e 58%, #241a40 100%);
  background-size: 24px 24px, 24px 24px, cover;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

body::before {
  content: "GEOGRAPHICAL REVIEW  /  FIELD NOTES, ANALYSIS & MATCH REPORTS";
  display: block;
  padding: 5px 12px;
  color: #fff;
  background: var(--red);
  border-bottom: 1px solid #5c1118;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-align: center;
}

#container {
  width: min(900px, calc(100% - 24px));
  margin: 26px auto 38px;
  background: #c7c6d2;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #5f5e70, 8px 10px 24px rgba(0,0,0,.42);
}

#header {
  position: relative;
  min-height: 132px;
  padding: 30px 32px 24px 116px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(121,80,229,.18), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.025) 5px 6px),
    var(--purple-100);
  border: 3px ridge #d6d5df;
  border-bottom: 0;
  overflow: hidden;
}

#header::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 26px;
  width: 54px;
  height: 70px;
  background: var(--red);
  border: 2px solid #fff;
  border-radius: 30px 30px 30px 4px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  transform: rotate(-45deg);
}

#header::after {
  content: "";
  position: absolute;
  left: 50px;
  top: 44px;
  width: 18px;
  height: 18px;
  background: var(--purple-100);
  border: 2px solid #fff;
  border-radius: 50%;
}

#header h1,
#header h2,
#header p { margin-top: 0; }

#header h1 {
  margin-bottom: 7px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 6vw, 52px);
  font-weight: normal;
  line-height: 1;
  letter-spacing: -.5px;
}

#header h2,
#header p {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--purple-10);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: .35px;
}

#navbar {
  margin: 0;
  padding: 4px 6px;
  background: #d9d8e1;
  border: 3px ridge #f4f3f8;
  border-top: 0;
  font-size: 0;
}

#navbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navbar li { display: inline-block; margin: 0; }

#navbar a {
  display: inline-block;
  min-width: 88px;
  padding: 5px 12px;
  color: #1c1b29;
  background: #ecebf1;
  border: 2px outset #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .35px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

#navbar a:hover,
#navbar a:focus {
  color: #fff;
  background: var(--purple-80);
  outline: 1px dotted #fff;
  outline-offset: -4px;
}

#content {
  position: relative;
  min-height: 430px;
  margin: 8px;
  padding: clamp(24px, 5vw, 46px);
  background-color: var(--paper);
  background-image: linear-gradient(90deg, rgba(121,80,229,.055) 1px, transparent 1px);
  background-size: 210px 100%;
  border: 2px inset #f4f3f8;
}

#content::before {
  content: "THE GEOGUESSR NOTEBOOK";
  display: block;
  margin: -14px -14px 30px;
  padding: 5px 8px 4px;
  color: #fff;
  background: var(--purple-80);
  border: 1px solid #352268;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

h1, h2, h3, h4 {
  color: var(--purple-100);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
}

#content h1 {
  margin-bottom: .35em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--purple-20);
  font-size: clamp(27px, 5vw, 39px);
  font-weight: normal;
}

#content h2 {
  margin-top: 1.8em;
  margin-bottom: .6em;
  padding: 5px 9px;
  color: #fff;
  background: var(--purple-100);
  border-left: 5px solid var(--red);
  font-size: 20px;
  font-weight: normal;
}

#content h3 {
  margin-top: 1.6em;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--rule);
  font-size: 17px;
}

p { margin: 0 0 1.1em; }

small,
.postmeta,
.date,
.byline { color: var(--muted); }

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
a:hover { color: #fff; background: var(--purple-80); text-decoration: none; }
a:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }

img {
  max-width: 100%;
  height: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid #272638;
  box-shadow: 4px 4px 0 #d0cfda;
}

figure { margin: 1.5em auto; }
figcaption {
  margin-top: 7px;
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  text-align: center;
}

blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 14px 18px 14px 22px;
  color: #343247;
  background: #efeff7;
  border-left: 5px solid var(--purple-50);
  border-top: 1px solid #d4d2e5;
  border-bottom: 1px solid #d4d2e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

code, pre, kbd { font-family: "Courier New", Courier, monospace; }
code { padding: 1px 4px; background: #e8e7ef; border: 1px solid #c4c2d1; }
pre {
  overflow-x: auto;
  padding: 14px;
  color: #eceaff;
  background: var(--black);
  border: 3px ridge #aaa8ba;
}

hr {
  height: 1px;
  margin: 2em 0;
  border: 0;
  background: var(--rule);
}

ul, ol { padding-left: 2em; }
li { margin-bottom: .32em; }

#recentpostlistdiv,
#postlistdiv {
  margin-top: 30px;
  padding: 0 16px 14px;
  background: #fff;
  border: 1px solid #8d8b9e;
  box-shadow: 4px 4px 0 #d5d4de;
}

#recentpostlistdiv::before,
#postlistdiv::before {
  content: "RECENT ARTICLES";
  display: block;
  margin: 0 -16px 12px;
  padding: 5px 9px;
  color: #fff;
  background: var(--purple-100);
  border-bottom: 3px solid var(--red);
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

#recentpostlistdiv ul,
#postlistdiv ul { list-style: square; }

.moreposts {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 8px;
  color: #fff !important;
  background: var(--purple-80);
  border: 2px outset var(--purple-20);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

.moreposts:hover { background: var(--red); }

#nextprev {
  margin-top: 32px;
  padding: 8px 10px;
  background: #dedde6;
  border: 2px inset #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

#nextprev a {
  display: inline-block;
  margin: 2px 4px;
  padding: 3px 7px;
  color: #1c1b29;
  background: #f3f2f7;
  border: 2px outset #fff;
  text-decoration: none;
}

#nextprev a:hover { color: #fff; background: var(--purple-80); }

#footer {
  margin: 0 8px 8px;
  padding: 8px 10px;
  color: var(--purple-10);
  background: var(--black);
  border: 2px inset #777589;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  text-align: center;
}

#footer a { color: #fff; }
#footer a:visited { color: var(--purple-20); }

::selection { color: #fff; background: var(--purple-50); }

/* Optional, restrained metadata components for GeoGuessr posts. */
.geo-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1px;
  margin: 16px 0 22px;
  padding: 1px;
  background: #aaa8b9;
  border: 1px solid #858294;
}

.geo-meta > * {
  padding: 7px 9px;
  color: #343247;
  background: #efeff5;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
}

.geo-score {
  display: inline-block;
  padding: 3px 7px;
  color: #fff;
  background: var(--purple-80);
  border-left: 4px solid var(--red);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: bold;
}

.geo-note {
  padding: 10px 12px;
  color: #29233d;
  background: #ece8fb;
  border: 1px solid var(--purple-20);
  border-left: 4px solid var(--purple-50);
}

@media (max-width: 620px) {
  body::before { font-size: 9px; letter-spacing: .4px; }
  #container { width: calc(100% - 10px); margin-top: 10px; box-shadow: 4px 5px 12px rgba(0,0,0,.4); }
  #header { min-height: 112px; padding: 23px 14px 18px 82px; }
  #header::before { left: 17px; top: 22px; width: 42px; height: 56px; }
  #header::after { left: 31px; top: 36px; width: 14px; height: 14px; }
  #navbar a { min-width: 0; padding: 5px 8px; font-size: 10px; }
  #content { margin: 5px; padding: 22px 18px; }
  #content::before { margin: -10px -8px 24px; }
  #footer { margin: 0 5px 5px; }
}