/* neilegginton.com theme CSS (Blank Slate). Fonts and colours come from Design Options via the bridge. */
/* Bridge: Design Options as CSS custom properties. Fallbacks are the mockup values, in px as PageMotor asks. */
:root {
  --font1: "Tilda Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --f5: 18px;
  --bg1: #F6F7F2FF;
  --bg2: #FFFFFFFF;
  --c1: #1E2A38FF;
  --c2: #4B5868FF;
  --ca: #2E6B5AFF;
  --border1: 2px solid #1E2A38FF;
  --accent: #F4C430;
  --green-dark: #1F4F43;
  --stone: #E4E9DF;
  --radius: 1.125rem;
}

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

body {
  margin: 0;
  background: var(--bg1);
  color: var(--c1);
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: 1.55;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
}

a {
  color: var(--ca);
}

a:hover {
  color: var(--green-dark);
}

:focus-visible {
  outline: 0.1875rem solid var(--ca);
  outline-offset: 0.125rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--bg2);
  color: var(--c1);
  font-weight: 700;
  border: var(--border1);
  border-radius: 0.625rem;
}

.skip-link:focus {
  top: 1rem;
}

/* Header */
#header .nav-inner {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.375rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#header .brand {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--c1);
  text-decoration: none;
}

#header .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.375rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

#header .nav-links a {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--c1);
  font-weight: 600;
  text-decoration: none;
}

#header .nav-links a:hover,
#header .nav-links a[aria-current=page] {
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.375rem;
}

/* Nav dropdown, ready for Genealogy */
#header .has-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--c1);
  cursor: pointer;
}

.nav-dropdown-trigger .chevron {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.has-dropdown:hover .nav-dropdown-trigger .chevron,
.nav-dropdown-trigger[aria-expanded=true] .chevron {
  transform: rotate(180deg);
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 200;
  min-width: 13.125rem;
  padding-top: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-0.25rem);
  transition: opacity 0.15s, transform 0.15s;
}

.has-dropdown:hover .dropdown-panel,
.nav-dropdown-trigger[aria-expanded=true] ~ .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu {
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--bg2);
  border: var(--border1);
  border-radius: 0.75rem;
  box-shadow: 0.25rem 0.25rem 0 var(--c1);
}

.dropdown-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--c1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: var(--stone);
}

/* Hamburger and mobile menu, from BigEgg, shown below 64rem */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  flex-shrink: 0;
  background: var(--bg2);
  border: var(--border1);
  border-radius: 0.625rem;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 1.125rem;
  height: 0.125rem;
  background: var(--c1);
  border-radius: 0.125rem;
  transition: transform 0.25s, opacity 0.2s;
}

.hamburger[aria-expanded=true] span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.hamburger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

.mobile-menu {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--bg1);
  transition: max-height 0.32s ease;
}

.mobile-menu[aria-hidden=false] {
  max-height: 30rem;
  border-top: var(--border1);
}

.mobile-nav-list {
  margin: 0;
  padding: 0.5rem 1.5rem 1.25rem;
  list-style: none;
}

.mobile-nav-list > li {
  border-bottom: 0.0625rem solid var(--stone);
}

.mobile-nav-list > li:last-child {
  border-bottom: 0;
}

.mobile-nav-list > li > a,
.mobile-sub-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--c1);
  text-decoration: none;
  cursor: pointer;
}

.mobile-nav-list > li > a[aria-current=page] {
  color: var(--ca);
}

.mobile-sub-trigger .chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.22s;
}

.mobile-sub-trigger[aria-expanded=true] .chevron {
  transform: rotate(180deg);
}

.mobile-sub {
  max-height: 0;
  overflow: hidden;
  margin: 0 0 0.25rem 0.25rem;
  padding: 0;
  list-style: none;
  border-left: 0.125rem solid var(--stone);
  transition: max-height 0.25s ease;
}

.mobile-sub[aria-hidden=false] {
  max-height: 12.5rem;
}

.mobile-sub a {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--c2);
  text-decoration: none;
}

@media (max-width: 64rem) {
  #header .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .mobile-menu {
    display: block;
  }
}
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-cta {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 1.375rem;
  background: var(--accent);
  color: var(--c1);
  font-weight: 700;
  text-decoration: none;
  border: var(--border1);
  border-radius: 999rem;
  box-shadow: 0.1875rem 0.1875rem 0 var(--c1);
}

.nav-cta:hover {
  color: var(--c1);
}

/* Pages and the 404 */
#content {
  padding: 1.5rem 0 4rem;
}

#content .container {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-title {
  margin: 1rem 0 1.5rem;
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-content p,
.page-content ul,
.page-content ol {
  margin: 0 0 1.25rem;
}

.page-content h2 {
  margin: 2.5rem 0 1rem;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
}

.page-content h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.375rem;
}

/* Buttons */
.btn {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0 1.75rem;
  background: var(--bg2);
  color: var(--c1);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: var(--border1);
  border-radius: 999rem;
  box-shadow: 0.25rem 0.25rem 0 var(--c1);
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
}

.btn-dark {
  background: var(--c1);
  color: var(--bg2);
  box-shadow: none;
}

/* Contact form, modular item 3 */
.form-group {
  margin-bottom: 1.125rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
  width: 100%;
  margin: 0;
  padding: 0 0.875rem;
  font: inherit;
  line-height: 1.4;
  color: inherit;
  background: var(--bg2);
  border: var(--border1);
  border-radius: 0.625rem;
}

.contact-form input[type=text],
.contact-form input[type=email] {
  min-height: 3rem;
}

.contact-form textarea {
  min-height: 8rem;
  padding: 0.75rem 0.875rem;
  resize: vertical;
}

.form-submit {
  min-height: 3.25rem;
  padding: 0 1.75rem;
  background: var(--c1);
  color: var(--bg2);
  font: inherit;
  font-weight: 700;
  border: var(--border1);
  border-radius: 999rem;
  cursor: pointer;
}

.form-submit:hover,
.form-submit:focus-visible {
  background: var(--green-dark);
}

.botcheck {
  display: none;
}

/* Home: the bands run edge to edge, so the content area has no width or padding of its own */
.template-home #content {
  padding: 0;
}

.template-home #content .container {
  max-width: none;
  padding: 0;
}

#content {
  /* Hero */
  /* Columns and steps */
  /* Cards */
  /* Family history band */
  /* My own websites */
  /* Contact band */
}
#content .wrap {
  max-width: 70rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
#content .row {
  display: flex;
  flex-wrap: wrap;
}
#content .columns {
  gap: 1.5rem;
}
#content .band {
  border-top: var(--border1);
  border-bottom: var(--border1);
}
#content .band-white {
  background: var(--bg2);
}
#content .band-green {
  background: var(--green-dark);
  color: #fff;
}
#content .band-accent {
  background: var(--accent);
}
#content .section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
#content .section-services,
#content .section-sites {
  padding-top: 5.5rem;
}
#content .section h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
}
#content .section .intro {
  max-width: 36em;
  margin: 0 0 2.5rem;
  color: var(--c2);
}
#content .section-how h2 {
  margin-bottom: 2.5rem;
}
#content .hero {
  padding-top: 3rem;
  padding-bottom: 4.5rem;
  align-items: center;
  gap: 3rem;
}
#content .hero-copy {
  flex: 1 1 30rem;
  min-width: 0;
}
#content .kicker {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca);
}
#content .hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
#content .hero h1 .mark {
  background: linear-gradient(transparent 60%, var(--accent) 60%);
}
#content .hero .lead {
  max-width: 34em;
  margin: 1.5rem 0 0;
  font-size: 1.25rem;
  color: var(--c2);
}
#content .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 0;
}
#content .hero-photo {
  position: relative;
  flex: 0 1 23.75rem;
  min-width: 16.25rem;
  padding: 0.75rem;
}
#content .polaroid {
  padding: 1rem 1rem 1.25rem;
  background: var(--bg2);
  border: var(--border1);
  border-radius: var(--radius);
  box-shadow: 0.5rem 0.5rem 0 var(--c1);
  transform: rotate(2.5deg);
}
#content .polaroid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.625rem;
}
#content .polaroid-caption {
  margin: 0.875rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
#content .badge {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  margin: 0;
  padding: 0.625rem 1.125rem;
  background: var(--accent);
  font-weight: 700;
  line-height: 1.2;
  border: var(--border1);
  border-radius: 999rem;
  box-shadow: 0.1875rem 0.1875rem 0 var(--c1);
  transform: rotate(-8deg);
}
#content .col {
  flex: 1 1 17.5rem;
  min-width: 0;
}
#content .col h3,
#content .process-step h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
  line-height: 1.25;
}
#content .col p,
#content .process-step p {
  margin: 0;
  color: var(--c2);
}
#content .step-number {
  width: 3rem;
  height: 3rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  border: var(--border1);
  border-radius: 50%;
}
#content .process-step {
  flex: 1 1 16.25rem;
  min-width: 0;
  padding-left: 1.25rem;
  border-left: 0.25rem solid var(--accent);
}
#content .process-step h3 {
  margin-top: 0;
}
#content .card {
  flex: 1 1 18.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--bg2);
  border: var(--border1);
  border-radius: var(--radius);
  box-shadow: 0.375rem 0.375rem 0 var(--c1);
}
#content .card-accent {
  background: var(--accent);
}
#content .card h3 {
  margin: 0 0 0.625rem;
  font-size: 1.625rem;
}
#content .card p {
  flex-grow: 1;
  margin: 0 0 1.25rem;
  color: var(--c2);
}
#content .card-accent p {
  color: var(--c1);
}
#content .card .card-link {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--c1);
  font-weight: 700;
}
#content .genealogy {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
#content .genealogy-copy {
  max-width: 44rem;
}
#content .genealogy-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
}
#content .genealogy-copy p {
  margin: 0 0 1rem;
  font-size: 1.1875rem;
}
#content .genealogy-copy p:last-of-type {
  margin-bottom: 1.75rem;
}
#content .site-card {
  flex: 1 1 20rem;
  min-width: 0;
  display: block;
  padding: 1.5rem;
  background: var(--bg2);
  color: var(--c1);
  text-decoration: none;
  border: var(--border1);
  border-radius: var(--radius);
}
#content .site-card:hover {
  color: var(--c1);
  box-shadow: 0.25rem 0.25rem 0 var(--c1);
}
#content .site-card .site-name {
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}
#content .site-card .site-desc {
  margin: 0 0 0.75rem;
  color: var(--c2);
}
#content .site-card .site-url {
  margin: 0;
  font-weight: 700;
  color: var(--ca);
}
#content .contact {
  padding-top: 5rem;
  padding-bottom: 5rem;
  gap: 3rem;
}
#content .contact-copy {
  flex: 1 1 22.5rem;
  min-width: 0;
}
#content .contact-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.125rem, 5vw, 3.5rem);
  line-height: 1.05;
}
#content .contact-copy p {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}
#content .form {
  flex: 1 1 26.25rem;
  min-width: 0;
  padding: 1.75rem;
  background: var(--bg2);
  border: var(--border1);
  border-radius: var(--radius);
  box-shadow: 0.5rem 0.5rem 0 var(--c1);
}
#content .form .form-group:last-of-type {
  margin-bottom: 1.5rem;
}

/* Cards from be-cards, in the mockup card look */
#content .be-cards {
  --be-cards-gap: 1.5rem;
  --be-cards-padding: 1.75rem;
  margin-bottom: 2.5rem;
}

#content .be-card {
  background: var(--bg2);
  color: var(--c1);
  border: var(--border1);
  border-radius: var(--radius);
  box-shadow: 0.375rem 0.375rem 0 var(--c1);
}

#content a.be-card:hover {
  color: var(--c1);
  box-shadow: 0.5rem 0.5rem 0 var(--c1);
}

#content .be-card-title {
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
}

#content .be-card-subtitle {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: var(--ca);
}

#content .be-card-text p {
  margin: 0;
  color: var(--c2);
}

/* Price cards on the genealogy pages */
#content .page-content .columns {
  margin: 0 0 2rem;
}

#content .card .price {
  flex-grow: 0;
  margin: 0 0 0.75rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c1);
}

#content .card .price small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c2);
}

/* Footer */
#footer .container {
  max-width: 70rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--c2);
}

#footer p {
  margin: 0;
}

#footer a {
  color: var(--c2);
}
/*pm-css m:0*/