/* Public spillardkarate.com site. Scoped to body.public-site: Propshaft's :app tag loads this into the syllabus too. */
body.public-site {
  --ps-red: #9a1915;
  --ps-red-light: #e2706c;
  --ps-text: #494949;
  --ps-grey: #7a7a7a;
  --ps-dark: #242c31;
  --ps-orange: #dd8500;

  margin: 0;
  background: #fff;
  color: var(--ps-text);
  font: 400 16px/1.6 "Open Sans", Helvetica, Arial, sans-serif;

  * { box-sizing: border-box; }
  a { color: var(--ps-red); text-decoration: none; }
  a:hover { color: #969696; }
  h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.25; margin: 0 0 .6em; }
  h2 { color: var(--ps-red); font-size: 2rem; }
  h5 { color: var(--ps-red); font-size: 1.15rem; margin-top: 1.2em; }
  hr { border: 0; border-top: 1px solid #d8d8d8; margin: 3rem 0; }

  /* Header and menu */
  .ps-header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 90px;
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .ps-logo img { display: block; max-width: 300px; width: 100%; }
  .ps-menu-toggle { display: none; }
  .ps-menu-button { display: none; }
  .ps-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .ps-nav li { position: relative; }
  .ps-nav > ul > li > a,
  .ps-nav > ul > li > span {
    color: var(--ps-grey);
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 90px;
    padding: 0 10px;
  }
  .ps-has-sub > span::after { content: " \2304"; font-size: 11px; position: relative; top: -3px; }
  .ps-nav > ul > li:hover > a,
  .ps-nav > ul > li:hover > span { color: #000; }
  .ps-nav li ul {
    background: var(--ps-red);
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 220px;
    padding: 10px 0;
    position: absolute;
    top: 100%;
  }
  .ps-nav li:hover > ul,
  .ps-nav li:focus-within > ul { display: block; }
  .ps-nav li ul a { color: #fff; display: block; font-size: 14px; padding: 6px 20px; }
  .ps-nav li ul a:hover { color: var(--ps-red-light); }

  /* Page banners */
  .ps-banner,
  .ps-hero {
    background-position: center;
    background-size: cover;
    text-align: center;
  }
  .ps-banner { align-items: center; display: flex; justify-content: center; padding: 40px 16px; }
  .ps-banner-titled { background-position: center top; min-height: 395px; }
  .ps-banner-plain { min-height: 427px; }
  .ps-banner h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 400; margin: 0; text-shadow: 0 1px 8px rgb(0 0 0 / .3); }
  .ps-hero { background-position: center bottom; min-height: 528px; padding: 60px 16px; }
  .ps-hero h1 { color: var(--ps-dark); font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 400; }

  /* Home page */
  .ps-strip { border-top: 1px solid #d4d8db; display: flex; }
  .ps-strip h2 { font-size: clamp(1.4rem, 3vw, 2.4rem); margin: 0; padding: 20px; text-align: center; }
  .ps-strip-main { background: var(--ps-dark); color: #d4d8db; flex: 1; font-weight: 300; padding: 20px 50px !important; }
  .ps-strip-offer { background: var(--ps-orange); color: #fff; flex: 0 0 23.2%; }
  .ps-split { display: flex; }
  .ps-split-image { background-position: center; background-size: cover; flex: 0 0 38.2%; min-height: 550px; }
  .ps-split-text { align-self: center; flex: 1; padding: 50px; }
  .ps-split-text h3 { color: #3a3a3a; font-size: 1.9rem; text-align: center; }
  .ps-testimonial { font-size: 15px; margin: 2rem 0 0; }
  .ps-testimonial cite { display: block; font-style: normal; font-weight: 700; text-align: center; }
  .ps-dots { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }
  .ps-dots button { background: #d6d6d6; border: 0; border-radius: 50%; cursor: pointer; height: 14px; padding: 0; width: 14px; }
  .ps-dots button[aria-current="true"],
  .ps-dots button:hover { background: #a9a9a9; }
  .ps-clubs { background: #f9f9f9; display: grid; grid-template-columns: repeat(5, 1fr); }
  .ps-club { background: #d8d8d8; padding: 30px 20px; text-align: center; }
  .ps-club:nth-of-type(even) { background: #eaeaea; }
  .ps-club h4 { font-size: 1.6rem; }
  .ps-club p { margin: 0 0 1.2em; }
  .ps-more { font-weight: 700; }
  .ps-pair { display: flex; }
  .ps-tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
  .ps-tile-image { background-position: center; background-size: cover; margin: 0; min-height: 330px; }
  .ps-pair div { background-position: center; background-size: cover; flex: 1; min-height: 400px; }

  /* Content pages */
  .ps-content { margin: 0 auto; max-width: 1280px; padding: 50px 40px; }
  .ps-narrow { max-width: 1020px; }
  .ps-content > h2 { font-size: clamp(2rem, 3.2vw, 2.5rem); font-weight: 400; margin-bottom: 1.4em; text-align: center; }
  .ps-content > .ps-left > h2 { font-weight: 700; text-align: left; }
  .ps-content ul { padding-left: 1.2em; }
  .ps-content li { margin-bottom: .5em; }
  .ps-venue { display: flex; gap: 50px; margin-bottom: 40px; }
  .ps-venue-map { flex: 0 0 62%; }
  .ps-venue-map iframe { border: 0; height: 640px; max-height: 70vh; width: 100%; }
  .ps-venue-details { flex: 1; padding-top: 20px; }
  .ps-venue-half .ps-venue-map { flex-basis: 50%; }
  .ps-venue-half .ps-venue-map iframe { height: 560px; }
  .ps-venue-details p { margin: 0 0 1em; }
  .ps-event { padding: 10px 30px; }
  .ps-event p { margin: 0 0 .5em; }
  .ps-button {
    border: 2px solid var(--ps-red);
    border-radius: 3px;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 28px;
  }
  .ps-button:hover { background: var(--ps-red); color: #fff; }
  .ps-intro { margin: 0 auto 3rem; max-width: 860px; text-align: center; }
  .ps-fees { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 3rem; padding: 0 !important; }
  .ps-fees li { margin: 0; }
  .ps-fees img { display: block; height: auto; width: 100%; }
  .ps-fees h3 { color: #191919; font-size: 15px; margin: 20px 0 4px; }
  .ps-fees p { margin: 0; }

  /* Footer */
  .ps-footer { background: var(--ps-red); color: #fff; padding: 60px 40px 30px; text-align: center; }
  .ps-footer h3 { font-size: clamp(1.2rem, 2.4vw, 2rem); margin-bottom: 80px; }
  .ps-footer a,
  .ps-footer a:hover { color: #fff; }
  .ps-copyright { font-size: 14px; margin: 0; }

  @media (max-width: 980px) {
    .ps-clubs,
    .ps-fees,
    .ps-tiles { grid-template-columns: repeat(2, 1fr); }
    .ps-venue { flex-direction: column; gap: 20px; }
    .ps-venue .ps-venue-map iframe { height: 360px; }
  }

  @media (max-width: 780px) {
    .ps-header { padding: 10px 16px; min-height: 64px; }
    .ps-logo img { max-width: 200px; }
    .ps-menu-button { cursor: pointer; display: block; height: 30px; position: relative; width: 30px; }
    .ps-menu-button span,
    .ps-menu-button span::before,
    .ps-menu-button span::after { background: var(--ps-grey); content: ""; height: 3px; left: 3px; position: absolute; width: 24px; }
    .ps-menu-button span { top: 14px; }
    .ps-menu-button span::before { left: 0; top: -8px; }
    .ps-menu-button span::after { left: 0; top: 8px; }
    .ps-nav { display: none; width: 100%; }
    .ps-menu-toggle:checked ~ .ps-nav { display: block; }
    .ps-nav > ul { flex-direction: column; padding: 10px 0; }
    .ps-nav > ul > li > a,
    .ps-nav > ul > li > span { line-height: 44px; }
    .ps-nav li ul { display: block; min-width: 0; position: static; }
    .ps-strip,
    .ps-split,
    .ps-pair { flex-direction: column; }
    .ps-split-image { min-height: 360px; }
    .ps-split-text { padding: 30px 16px; }
    .ps-clubs,
    .ps-tiles { grid-template-columns: 1fr; }
    .ps-hero { min-height: 300px; }
    .ps-banner-plain,
    .ps-banner-titled { min-height: 240px; }
    .ps-pair div { min-height: 260px; }
    .ps-content { padding: 30px 16px; }
    .ps-footer { padding: 40px 16px 20px; }
  }
}