/* ============================================
   BIG BASH CO. — LEGAL PAGES
   Visual language matched to PARTY PRINTABLES
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ============================================
   DESIGN TOKENS
============================================ */

:root {

  /* Core surfaces */
  --c-cream:      #FBF3E7;
  --c-cream-dim:  #F1E6D3;
  --c-cream-mid:  #E4D4B4;

  /* Ink */
  --c-ink:        #211A14;

  /* Muted text */
  --c-muted-on-cream: #6B5B4E;
  --c-muted-on-ink:   #CBB9A6;

  /* Primary accent */
  --c-cherry:      #C23B32;
  --c-cherry-text: #B33A32;
  --c-cherry-ink:  #FFFFFF;

  /* Secondary accent */
  --c-teal:     #1B6B6F;
  --c-teal-ink: #FFFFFF;

  /* Decorative mustard */
  --c-marigold-text:   #8F5800;
  --c-marigold-bright: #F4A300;

  /* Borders */
  --c-border:        #E4D4B4;
  --c-border-md:     #D3BE94;
  --c-border-on-ink: #3D3226;

  /* Focus */
  --c-focus: #C23B32;

  /* Typography */
  --font-display: 'Fredoka', 'Segoe UI', sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 100px;

}


/* ============================================
   RESET
============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--c-cream);
  color: var(--c-ink);
  line-height: 1.7;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* ============================================
   LINKS
============================================ */

a {
  color: var(--c-cherry-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--c-cherry);
  opacity: 1;
}

a:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================
   ACCESSIBILITY
============================================ */

.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;

  background: var(--c-ink);
  color: var(--c-cream);

  padding: .75rem 1.25rem;

  font-size: .875rem;
  font-weight: 700;

  z-index: 9999;

  border-radius: var(--radius-sm);
  text-decoration: none;
}

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

  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}


/* ============================================
   LEGAL NAVIGATION
============================================ */

nav.legal-nav {
  border-bottom: 1px solid var(--c-border);

  padding: 1rem 0;

  background: var(--c-cream);
}

.legal-nav-inner {
  max-width: 960px;

  margin: 0 auto;

  padding: 0 2rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

.legal-nav-logo {
  font-family: var(--font-display);

  font-size: 1.45rem;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  color: var(--c-cherry-text);

  letter-spacing: -.01em;
}

.legal-nav-back {
  display: flex;
  align-items: center;

  gap: 6px;

  font-size: .75rem;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;

  text-decoration: none;

  color: var(--c-muted-on-cream);

  transition:
    color .18s ease,
    opacity .18s ease;
}

.legal-nav-back:hover {
  color: var(--c-cherry-text);
  opacity: 1;
}


/* ============================================
   MAIN
============================================ */

main.legal-main {
  max-width: 960px;

  margin: 0 auto;

  padding: 5rem 2rem 6rem;
}

@media(max-width:600px) {

  main.legal-main {
    padding: 3.5rem 1.25rem 4rem;
  }

}


/* ============================================
   HEADER
============================================ */

.legal-header {
  margin-bottom: 3.5rem;

  padding-bottom: 2rem;

  border-bottom: 1px solid var(--c-border);
}

.legal-tag {
  font-size: .7rem;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--c-marigold-text);

  margin-bottom: .85rem;
}

h1 {
  font-family: var(--font-display);

  font-size: clamp(2.4rem, 6vw, 4rem);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing: -.01em;

  color: var(--c-ink);

  margin-bottom: 1rem;
}

.legal-meta {
  font-size: .8125rem;

  font-weight: 700;

  color: var(--c-muted-on-cream);
}


/* ============================================
   NOTICE
============================================ */

.legal-notice {
  background: var(--c-cream-dim);

  border-left: 4px solid var(--c-cherry);

  padding: 1.15rem 1.35rem;

  border-radius:
    0
    var(--radius-md)
    var(--radius-md)
    0;

  font-size: .875rem;

  font-weight: 500;

  line-height: 1.7;

  color: var(--c-ink);

  margin-bottom: 3rem;
}


/* ============================================
   LEGAL CONTENT
============================================ */

.legal-body {
  max-width: 780px;
}

.legal-body h2 {
  font-family: var(--font-display);

  font-size: 1.7rem;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: -.005em;

  color: var(--c-ink);

  margin: 3rem 0 1rem;
}

.legal-body h3 {
  font-size: 1rem;

  font-weight: 800;

  line-height: 1.4;

  color: var(--c-ink);

  margin: 2rem 0 .6rem;
}

.legal-body p {
  font-size: .9375rem;

  font-weight: 500;

  color: var(--c-muted-on-cream);

  margin-bottom: 1.1rem;

  line-height: 1.8;
}

.legal-body ul,
.legal-body ol {
  margin: .6rem 0 1.2rem 1.5rem;

  font-size: .9375rem;

  font-weight: 500;

  color: var(--c-muted-on-cream);

  line-height: 1.8;
}

.legal-body li {
  margin-bottom: .45rem;
}

.legal-body strong {
  font-weight: 800;

  color: var(--c-ink);
}

.legal-body em {
  color: var(--c-muted-on-cream);
}


/* ============================================
   TABLES
============================================ */

.legal-body table {
  width: 100%;

  border-collapse: collapse;

  margin: 1.5rem 0 2rem;

  font-size: .875rem;

  background: var(--c-cream);
}

.legal-body th {
  background: var(--c-cream-dim);

  padding: .75rem 1rem;

  text-align: left;

  font-size: .7rem;

  font-weight: 800;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--c-ink);

  border: 1px solid var(--c-border);
}

.legal-body td {
  padding: .75rem 1rem;

  border: 1px solid var(--c-border);

  font-weight: 500;

  color: var(--c-muted-on-cream);

  vertical-align: top;

  line-height: 1.65;
}


/* ============================================
   COOKIE PREFERENCES BUTTON
============================================ */

.cookie-pref-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  background: var(--c-cherry);

  color: var(--c-cherry-ink);

  padding: .8rem 1.5rem;

  border: 1px solid var(--c-cherry);

  border-radius: var(--radius-pill);

  font-size: .8125rem;

  font-weight: 700;

  letter-spacing: .03em;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

.cookie-pref-btn:hover {
  background: #A6332B;

  color: var(--c-cherry-ink);

  opacity: 1;
}

.cookie-pref-btn:active {
  transform: translateY(1px);
}

.cookie-pref-btn:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}


/* ============================================
   DIVIDERS
============================================ */

hr.legal-divider {
  border: none;

  border-top: 1px solid var(--c-border);

  margin: 3rem 0;
}


/* ============================================
   FOOTER
============================================ */

footer.legal-footer {
  background: var(--c-ink);

  color: var(--c-cream);

  border-top: 1px solid var(--c-border-on-ink);

  padding: 3rem 0;

  margin-top: 4rem;
}

.legal-footer-inner {
  max-width: 960px;

  margin: 0 auto;

  padding: 0 2rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 1.25rem;
}

.legal-footer-links {
  display: flex;

  gap: 1.5rem;

  flex-wrap: wrap;
}

.legal-footer-links a, .legal-footer-copy a {
  font-size: .75rem;

  font-weight: 700;

  color: var(--c-cream);

  text-decoration: none;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.legal-footer-copy a.logo { color:var(--c-cherry);}

.legal-footer-links a:hover {
  color: var(--c-marigold-bright);

  opacity: 1;
}

.legal-footer-copy {
  font-size: .75rem;

  font-weight: 500;

  color: var(--c-muted-on-ink);
}


/* ============================================
   MOBILE
============================================ */

@media(max-width:600px) {

  .legal-nav {
    padding: .875rem 0;
  }

  .legal-nav-inner {
    padding: 0 1.25rem;
  }

  .legal-nav-logo {
    font-size: 1.25rem;
  }

  .legal-nav-back {
    font-size: .68rem;
  }

  .legal-header {
    margin-bottom: 2.75rem;
  }

  h1 {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .legal-body h2 {
    font-size: 1.5rem;

    margin-top: 2.5rem;
  }

  .legal-body table {
    display: block;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }

  .legal-body th,
  .legal-body td {
    min-width: 150px;
  }

  .legal-footer-inner {
    padding: 0 1.25rem;

    align-items: flex-start;

    flex-direction: column;
  }

}


/* ============================================
   REDUCED MOTION
============================================ */

@media(prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;
  }

}