/* Ron's Barbershop: the look of ronsbarber.com (its Wix site). The shared layout is sbs-pkg's
   base.css, which every page loads first; this is what this site does differently. The fonts
   (Lobster for the name, Poppins for the text) are set under Look & feel; Montserrat (the
   barbers' names) and Barlow Condensed (the menu) come from here. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500&family=Montserrat:wght@400;600&display=swap");

:root {
  color-scheme: light;
  --abyss: #292929;
  --deep: #323232;
  --sea: #707067;
  --teal: #cf2d2d;
  --teal-ink: #cf2d2d;
  --glow: #ffffff;
  --sand: transparent;
  --paper: #ffffff;
  --ink: #323232;
  --muted: #292929;
  --line: #000000;
  --orange: #cf2d2d;
  --radius: 5px;
  --display: "Lobster", "Brush Script MT", cursive;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --names: "Montserrat", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --tabs: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* the boxes: grey, a black edge and a stepped grey shadow */
  --box: rgba(112, 112, 103, 0.9);
  --box-shadow: #808080 1px 1px 0 0, #808080 3px 3px 0 0, #808080 5px 5px 0 0, #808080 7px 7px 0 0, #808080 9px 9px 0 0;
  --header: #ffffff;
  --header-ink: #000000;
  --header-current: #cf2d2d;
  --header-btn: #cf2d2d;
  --header-btn-ink: #ffffff;
  --shadow: var(--box-shadow);
}

/* the page: ronsbarber.com's background, exactly */
html {
  background: #fff;
}
body {
  background-color: #fff;
  background-image:
    radial-gradient(circle at 95.013% 9.56706%, rgb(243, 167, 143) 0%, 20%, rgba(243, 167, 143, 0) 40%),
    radial-gradient(circle at 5.10579% 10.1725%, rgba(56, 74, 211, 0.99) 0%, 25%, rgba(56, 74, 211, 0) 50%),
    radial-gradient(circle at 5.30111% 89.1536%, rgb(237, 88, 41) 0%, 42%, rgba(237, 88, 41, 0) 70%),
    radial-gradient(circle at 95.3532% 90.7031%, rgb(128, 21, 232) 0%, 42%, rgba(128, 21, 232, 0) 70%),
    radial-gradient(circle at 48.9014% 49.5215%, rgb(255, 255, 255) 0%, 100%, rgba(255, 255, 255, 0) 100%);
  font-weight: 600;
}
h2,
h3 {
  font-family: var(--names);
  font-weight: 400;
}
a {
  font-weight: 700;
}

/* the header: white between two double rules, the menu as grey tabs */
.site-header {
  background: #fff;
  border-top: 6px double #000;
  border-bottom: 6px double #000;
}
.brand-text {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  color: #8b0000;
}
.nav {
  gap: 2px;
}
.nav > a:not(.btn) {
  font-family: var(--tabs);
  font-size: 1.05rem;
  font-weight: 400;
  color: #000;
  background: #f1f1f1;
  padding: 8px 18px;
}
.nav > a:not(.btn):hover {
  background: #e2e2e2;
}
.nav a[aria-current] {
  box-shadow: inset 0 -3px 0 #cf2d2d;
}
.nav .btn {
  margin-left: 10px;
}
.nav .btn-quiet {
  border-color: #000;
  color: #000;
}
.nav .btn-quiet:hover {
  background: #f1f1f1;
}
.nav-toggle {
  color: #000;
  border-color: #000;
}
.btn {
  border-radius: var(--radius);
}

/* the announcement banner, quiet on white */
.announce {
  background: #f1f1f1;
  color: #000;
}

/* every section a grey box in one centred column, as on ronsbarber.com */
.hero,
.section,
.section.alt,
.cta {
  background: none;
  padding: 14px 0;
}
main#main {
  padding: 24px 0 48px;
}
.hero > .wrap,
.section > .wrap,
.cta > .wrap {
  max-width: 780px;
  box-sizing: border-box;
  padding: 24px 32px;
  background: var(--box);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  color: #fff;
}
.hero > .wrap {
  text-align: center;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 4.7rem);
  font-weight: 400;
  color: #8b0000;
  margin-bottom: 0.2em;
}
.hero .eyebrow {
  display: none;
}
.hero-sub {
  font-family: var(--names);
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #292929;
}
.hero .lede {
  margin: 0 auto;
  color: #fff;
}
.hero-photo {
  max-width: 560px;
  margin: 24px auto;
  border-radius: 0;
}
.hero-cta {
  justify-content: center;
}
.btn-ghost {
  border-color: #fff;
  color: #fff;
}

.eyebrow,
.eyebrow.dark {
  color: #fff;
  letter-spacing: 0.08em;
}
.section-head {
  max-width: none;
  margin-bottom: 20px;
}
.section-head h2,
.cta h2,
.about h2,
.section h2 {
  color: #fff;
}
.section-head p,
.intro p,
.cta p {
  color: #fff;
}
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid #000;
  box-shadow: none;
  padding: 16px 18px;
  color: #fff;
}
.card p {
  color: #fff;
}
.card strong {
  color: #fff;
  font-size: 1.3rem;
}

/* About: the welcome, in ronsbarber.com's dark type */
#about .intro p {
  color: #323232;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  text-align: justify;
}
#about .eyebrow {
  display: none;
}

/* Find us */
.cta {
  color: #fff;
}
.visit h3 {
  color: #fff;
}
.cta a:not(.btn) {
  color: #fff;
}
.contact-list li {
  border-top-color: rgba(255, 255, 255, 0.3);
}
.btn-light {
  background: #cf2d2d;
  border-color: #cf2d2d;
  color: #fff;
}
.btn-light:hover {
  background: #b22626;
  border-color: #b22626;
}

/* pages made from data (the barbers, booking): the same boxes */
.article .article-wrap {
  max-width: 820px;
}
.article-head {
  text-align: center;
  padding: 20px 24px;
  background: var(--box);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  margin-bottom: 28px;
}
.article-head h1 {
  font-family: var(--display);
  font-weight: 400;
  color: #8b0000;
}
.article-head .eyebrow {
  display: none;
}
.page-intro p {
  color: #fff;
}
.article .prose > .page-intro {
  padding: 16px 24px;
  background: var(--box);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
}
.team-card,
.book-person {
  background: var(--box);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  color: #fff;
  overflow: visible;
}
.team-cards .team-card h2 {
  font-family: var(--names);
  font-size: 2rem;
  text-align: center;
  color: #fff;
}
.team-card-role {
  text-align: center;
  color: #fff;
  font-weight: 400;
}
.team-card-photo {
  border-radius: 4px 4px 0 0;
}
.team-card-book {
  justify-content: center;
}
.book-person-name strong {
  font-family: var(--names);
  font-size: 1.4rem;
  font-weight: 400;
}
.book-person-name span {
  color: #eee;
}
.book-person > summary::after {
  color: #fff;
  text-decoration: underline;
}
.book-link a {
  color: #fff;
}
.site-footer {
  background: #fff;
  color: #000;
  border-top: 6px double #000;
}
.site-footer a {
  color: #000;
}
.brand-mark {
  display: none;
}
/* each barber's hours, one day a line, centred under the name */
.team-card-body {
  text-align: center;
}