@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Great+Vibes&display=swap');

:root {
  --md-primary-fg-color: #333333;
  --md-default-bg-color: #FAFAFA;
  --md-default-fg-color: #333333;
  --md-typeset-a-color: #333333;
}

h1, h2, h3, h4, h5, h6, .md-nav__title {
  font-family: 'Playfair Display', serif;
}

.md-header {
  background-color: #ffffff;
  color: #333333;
  border-bottom: 1px solid #e5e7eb;
}

.md-header__button.md-logo {
  font-family: 'Great Vibes', cursive;
  font-size: 1.5rem;
  color: #333333;
  display: flex;
  align-items: center;
}

.md-header__button.md-logo img, .md-header__button.md-logo svg {
  display: none;
}

/* The icon above is hidden entirely - this is what actually renders in its
   place. Without it the logo button is empty (icon hidden, no text node in
   the anchor itself), just invisible clickable space in the header. */
.md-header__button.md-logo::after {
  content: "Sebastian Craft Co.";
  white-space: nowrap;
}

/* Material also renders the site name as plain text next to the hamburger
   (".md-header__topic", the un-scrolled state) - redundant with the cursive
   logo immediately to its left, and on mobile the two sit close enough to
   read as the header repeating itself. Hide only that first topic; leave
   the second one (data-md-component="header-topic", the current section
   name shown once you scroll) since that's real, non-duplicate context. */
.md-header__topic:not([data-md-component="header-topic"]) {
  display: none;
}

/* Stock Material renders the drawer toggle as a bare icon with no visual
   affordance, which is easy to miss - here it's the ONLY way to reach the
   nav (no top tabs configured). Give it the same light rounded-button
   treatment the main site uses for its own controls, so it reads as
   tappable rather than decorative. */
.md-header__button.md-icon[for="__drawer"] {
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  padding: 0.375rem;
  /* .md-header__inner is a flex row; every child defaults to order 0
     (source order), which puts this after the logo. Pull it to the very
     front of the header instead. */
  order: -1;
}

.md-header__button.md-icon[for="__drawer"]:hover {
  background-color: #e5e7eb;
}