/* sanstey.com - static rebuild of the Kadence theme look */
:root {
  --palette1: #2B6CB0;  /* primary blue */
  --palette2: #215387;
  --palette3: #1A202C;
  --palette4: #2D3748;  /* body text */
  --palette5: #4A5568;
  --palette6: #718096;
  --palette7: #EDF2F7;
  --palette8: #F7FAFC;  /* page background */
  --palette9: #ffffff;
  --nav-active: #2B7BC0;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--palette8);
  color: var(--palette4);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--palette1); }
a:hover { color: var(--palette2); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--palette9); color: var(--palette1); padding: .5em 1em; z-index: 10;
}
.skip-link:focus { left: 1em; top: 1em; }

.site-container {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--palette1) url("/assets/img/header_bg.webp") 69% 43% / cover no-repeat;
}
.site-header .site-container {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--palette9);
}
.brand:hover { color: var(--palette9); }
.brand img { width: 55px; height: 55px; display: block; }
.site-title { margin: 0; font-size: 34px; font-weight: 500; line-height: .9; color: var(--palette9); }
.site-description { margin: .4em 0 0; font-size: 13px; font-weight: 300; line-height: 1.2; color: var(--palette9); }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.main-nav a {
  display: block;
  padding: .2em .6em;
  color: var(--palette9);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
}
.main-nav a:hover, .main-nav a:focus { color: var(--nav-active); }
.main-nav a[aria-current="page"] { background: var(--nav-active); color: var(--palette9); }

@media (max-width: 640px) {
  .site-header .site-container { padding-top: 12px; padding-bottom: 12px; }
  .site-title { font-size: 28px; }
}

/* ---------- Content ---------- */
.content-area { flex: 1 0 auto; margin: 80px 0; }
.content-container { max-width: 842px; margin: 0 auto; padding: 0 24px; }
.entry-content p { margin: 0 0 32px; }
.entry-content p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .content-area { margin: 40px 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--palette3) url("/assets/img/header_bg.webp") 48% 31% / cover no-repeat;
  color: var(--palette9);
}
.site-footer .site-container { padding-top: 30px; padding-bottom: 30px; min-height: 121px; display: flex; align-items: center; justify-content: center; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--palette9); }

/* ---------- Contact form ---------- */
.contact-form label { display: block; margin-bottom: 1.25em; font-weight: 500; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: .35em;
  padding: .5em .75em;
  font: inherit;
  color: var(--palette4);
  background: var(--palette9);
  border: 1px solid #E2E8F0;
  border-radius: 3px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--palette1); outline-offset: 0; border-color: var(--palette1); }
.contact-form textarea { min-height: 12em; resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; }
.cf-turnstile { margin-bottom: 1.25em; }
.button {
  display: inline-block;
  padding: .4em 1.2em;
  font: inherit;
  font-weight: 500;
  color: var(--palette9);
  background: var(--palette1);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.button:hover { background: var(--palette2); color: var(--palette9); }
.button[disabled] { opacity: .6; cursor: wait; }
.form-status { margin-top: 1em; padding: .75em 1em; border-radius: 3px; display: none; }
.form-status.ok { display: block; background: #E6F4EA; color: #13612e; border: 1px solid #13612e; }
.form-status.err { display: block; background: #FDECEA; color: #b82105; border: 1px solid #b82105; }