/* drmarclevine.com — static recreation of the GoDaddy Websites + Marketing design.
   Sizes and colors are taken from the original site's own style rules. */

@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LeagueSpartan.woff2) format('woff2'), url(fonts/LeagueSpartan.woff) format('woff');
}

:root {
  --dark: #161616;
  --light: #f7f7f7;
  --body: #5e5e5e;
  --ink: #1b1b1b;
  --accent: #7a766d;
  --accent-hover: #484743;
  --accent-active: #31302e;
  --heading: #99948a;
  --sand: #e6e3dd;
  --grey: #f6f6f6;
  --spartan: 'League Spartan', arial, helvetica, sans-serif;
  --sans: Helvetica, arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { border: 0; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
a { color: inherit; }

.container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .container { width: 984px; } }
@media (min-width: 1280px) { .container { width: 1160px; } }
@media (min-width: 1536px) { .container { width: 1280px; } }

/* ---------- Header ---------- */
.site-header { background: var(--dark); position: relative; z-index: 3; }
.site-header.hero {
  background: var(--dark) url(img/sea-of-fog.jpg) 50% 50% / cover no-repeat;
  min-height: 500px;
}
@media (min-width: 1024px) { .site-header.hero { min-height: 85vh; } }

.logo {
  font-family: var(--spartan);
  font-size: 22px;
  line-height: 1.2;
  color: var(--light);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
}
.logo:hover { color: #afaca4; }
.logo:hover .logo-text { color: #afaca4; }
.logo-text { color: var(--light); }

/* desktop bar */
.navbar { display: none; padding: 24px 48px; }
.navbar > div { flex: 0 0 33.3333%; max-width: 33.3333%; display: flex; align-items: center; }
.navbar .nav-left { justify-content: flex-start; }
.navbar .nav-center { justify-content: center; text-align: center; }
.navbar .nav-right { justify-content: flex-end; }
.navbar nav { display: flex; align-items: center; line-height: 24px; }
.navbar nav a + a { margin-left: 32px; }
.navbar nav a {
  display: block;
  font-size: 14px;
  letter-spacing: 0.071em;
  text-transform: uppercase;
  color: var(--light);
  text-decoration: none;
  white-space: nowrap;
}
.navbar nav a:hover { opacity: .5; }
.navbar nav a[aria-current="page"] { font-weight: 700; }
@media (min-width: 1024px) { .navbar { display: flex; } }
@media (min-width: 1536px) {
  .logo { font-size: 24px; }
  .navbar nav a { font-size: 16px; }
}

/* phone/tablet bar */
.mobilebar { display: flex; align-items: center; padding: 24px; }
.mobilebar .menu-btn { width: 15%; }
.mobilebar .mobile-logo { width: 70%; display: flex; justify-content: center; text-align: center; padding: 0 8px; }
.mobilebar .spacer { width: 15%; }
.icon-btn {
  background: none; border: 0; padding: 6px; margin: 0; cursor: pointer;
  color: var(--light); display: inline-flex;
}
.icon-btn:hover { color: var(--sand); }
.icon-btn svg { width: 28px; height: 28px; }
@media (min-width: 1024px) { .mobilebar { display: none; } }

/* slide-out menu */
.drawer {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10002; background: var(--dark);
  padding-top: 56px; overflow-y: auto;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .3s ease-in-out, visibility .3s;
}
.drawer.open { transform: none; visibility: visible; }
.drawer .close { position: absolute; top: 15px; right: 15px; }
.drawer ul { list-style: none; margin: 0 0 24px; padding: 0 24px; }
.drawer li { border-bottom: 1px solid rgba(76, 76, 76, .5); }
.drawer li:last-child { border-bottom: 0; }
.drawer a {
  display: flex; padding: 16px 4px 16px 24px;
  font-size: 22px; color: var(--light); text-decoration: none;
}
.drawer a:hover { color: var(--sand); }
.drawer a[aria-current="page"] { font-weight: 700; }
body.menu-open { overflow: hidden; }

/* ---------- Sections ---------- */
.section { padding: 40px 0; background: #fff; }
.section.grey { background: var(--grey); }
.section.sand { background: var(--sand); }
@media (min-width: 768px) { .section { padding: 56px 0; } }

.section-heading {
  font-family: var(--spartan);
  font-size: 32px;
  line-height: 1.4;
  color: var(--heading);
  text-align: center;
  margin: 0 0 40px;
}
.section-heading::after {
  content: ""; display: block; width: 50px; margin: 24px auto 0;
  border-bottom: 2px solid #e2e2e2;
}
@media (min-width: 768px) { .section-heading { font-size: 38px; } }
@media (min-width: 1280px) { .section-heading { font-size: 44px; } }
@media (min-width: 1536px) { .section-heading { font-size: 48px; } }
.grey .section-heading::after { border-color: #dadada; }

/* smaller Helvetica headings used on the Documents page */
.section-heading.small {
  font-family: var(--sans); font-size: 22px; color: var(--ink);
}
.grey .section-heading.small { color: #151515; }
@media (min-width: 1536px) { .section-heading.small { font-size: 24px; } }

/* columns */
.row { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -12px; text-align: left; }
.col { flex: 1 1 100%; max-width: 100%; padding: 0 12px; }
@media (min-width: 768px) {
  .row { margin: 0 -24px; }
  .col { padding: 0 24px; }
  .col-main { flex-basis: 83.3333%; max-width: 83.3333%; }
}
@media (min-width: 1024px) {
  .col-main { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-side { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-half { flex-basis: 50%; max-width: 50%; }
}

/* text */
.content-heading { font-size: 22px; line-height: 1.25; color: var(--ink); }
@media (min-width: 1536px) { .content-heading { font-size: 24px; } }
.rich { font-size: 16px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.rich p { margin: 0; }
.rich ul { display: block; margin: 0 16px; padding-left: 1.3em; }
.rich a { color: var(--accent); text-decoration: underline; }
.rich a:hover { color: var(--accent-hover); }
.rich a:active { color: var(--accent-active); }
@media (min-width: 1536px) { .rich, .content-heading-list .content-heading { font-size: 18px; } }

/* About: text + portrait */
.about .content-heading { margin-bottom: 24px; }
.about .col-main { order: 1; }
.about .col-side { order: 0; text-align: center; }
.portrait {
  display: inline-block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 0.75; object-fit: cover; object-position: 50% 0;
  margin-bottom: 32px; vertical-align: middle;
}
@media (min-width: 1024px) {
  .about .col-main { order: 0; }
  .about .col-side { order: 1; text-align: left; }
  .portrait { margin-bottom: 0; }
}

/* Teaching: list of headings */
.heading-list > * { margin-bottom: 32px; }
.heading-list > :last-child { margin-bottom: 0; }
.sand .content-heading { color: #010101; }

/* Downloads */
.downloads .col { flex-basis: 100%; }
@media (min-width: 1024px) {
  .downloads .col { flex-basis: 66.6667%; max-width: 66.6667%; margin-left: 16.6667%; }
  .downloads .row { justify-content: flex-start; }
}
.download {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; margin-bottom: 4px;
  background: #fff; color: var(--accent); text-decoration: none;
}
.section:not(.grey) .download { background: var(--grey); color: #757167; }
.download:hover { background: #ededed !important; }
.download .name { color: var(--ink); line-height: 1.5; max-width: 70%; }
.grey .download .name { color: var(--ink); }
.section:not(.grey) .download .name { color: #151515; }
.download .get { display: inline-flex; align-items: center; white-space: nowrap; }
.download .get svg { width: 1em; height: 1em; }
.download .get span { margin-left: .25em; }
@media (max-width: 767px) { .download .get span { display: none; } }

/* Documents page intro */
.featured { text-align: center; }
.featured h1 {
  font-size: 28px; line-height: 1.25; color: var(--heading); margin-bottom: 24px;
}
@media (min-width: 768px) { .featured h1 { font-size: 30px; } }
@media (min-width: 1280px) { .featured h1 { font-size: 32px; } }
@media (min-width: 1536px) { .featured h1 { font-size: 36px; } }
.featured .rich { text-align: center; }

/* Contact */
.contact-form .field { padding-bottom: 24px; position: relative; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  width: 100%; display: block;
  font: 400 16px/1.5 var(--sans); color: #474747;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 4px;
  padding: 23px 16px 7px; margin: 0; -webkit-appearance: none; appearance: none;
}
.contact-form textarea { padding: 16px; resize: vertical; }
.contact-form textarea::placeholder { color: #474747; opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; box-shadow: inset 0 0 0 1px currentColor; }
.contact-form label {
  position: absolute; left: 16px; top: 33%; transform: translateY(-50%);
  color: #474747; pointer-events: none; transition: all .15s ease; line-height: 1.5;
}
.field-float label { top: 50%; }
.contact-form .field-float { padding-bottom: 0; margin-bottom: 24px; }
.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label {
  font-size: 12px; top: 8px; transform: none; color: var(--accent);
}
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 8px 32px;
  font: 700 14px var(--sans); letter-spacing: 0.071em; text-transform: uppercase;
  color: #1c1b1b; background: #e5e2dc; border: 0; border-radius: 4px; cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #d8d4cc; }
.form-note { text-align: center; padding: 8px 0 16px; font-size: 12px; line-height: 1.5; color: #595959; }
.contact-form { padding-top: 24px; }
.form-status { margin: 0; padding: 8px 0 16px; min-height: 42px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--body); }
.form-status.error { color: #b00020; }
.contact-info { text-align: center; margin-top: 40px; }
.contact-info .rich { margin-bottom: 24px; }
.contact-info a { color: var(--accent); text-decoration: none; }
.contact-info a:hover { color: var(--accent-hover); }
@media (min-width: 768px) { .contact-info { margin-top: 0; text-align: left; } }

.map { position: relative; padding-bottom: 30%; min-height: 200px; background: #e5e3df; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map .directions {
  position: absolute; left: 56px; top: 8px; z-index: 1;
  width: auto; min-height: 40px; padding: 4px 16px; font-size: 12px;
}
.map .directions svg { width: 18px; height: 18px; margin-right: 8px; }
@media (max-width: 767px) { .map .directions { left: 8px; max-width: 90%; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); padding: 40px 0; text-align: center; }
.site-footer.black { background: #000; }
@media (min-width: 768px) { .site-footer { padding: 56px 0; } }
.site-footer .container { padding-bottom: 32px; }
@media (min-width: 768px) { .site-footer .container { padding-bottom: 24px; } }
.site-footer .name { color: var(--light); font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.site-footer .copyright { color: #a9a9a9; font-size: 14px; line-height: 1.5; }