/* Lightweight layout — replaces Foundation grid for SiouxBBQ */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
}

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

.grid-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.grid-container.fluid {
  max-width: none;
}

.grid-x {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--space-sm) * -1);
}

.grid-x.align-middle { align-items: center; }
.grid-x.align-center { justify-content: center; }
.grid-x.align-justify { justify-content: space-between; }

.grid-padding-x > .cell { padding-inline: var(--space-sm); }
.grid-padding-y > .cell { padding-block: var(--space-sm); }
.grid-margin-x > .cell { margin-bottom: var(--space-md); }

.cell {
  flex: 1 1 100%;
  min-width: 0;
  padding-inline: var(--space-sm);
}

.cell.shrink { flex: 0 0 auto; }
.cell.auto { flex: 1 1 auto; }
.cell.text-center { text-align: center; }

.text-center { text-align: center; }
.text-right { text-align: right; }

@media (min-width: 40em) {
  .cell.medium-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .cell.medium-6 { flex: 0 0 50%; max-width: 50%; }
  .cell.medium-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .cell.medium-12 { flex: 0 0 100%; max-width: 100%; }
  .cell.medium-offset-1 { margin-inline-start: 8.333%; }
  .cell.medium-order-1 { order: 1; }
  .cell.medium-order-2 { order: 2; }
}

@media (min-width: 64em) {
  .cell.large-3 { flex: 0 0 25%; max-width: 25%; }
  .cell.large-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .cell.large-5 { flex: 0 0 41.666%; max-width: 41.666%; }
  .cell.large-6 { flex: 0 0 50%; max-width: 50%; }
  .cell.large-7 { flex: 0 0 58.333%; max-width: 58.333%; }
  .cell.large-8 { flex: 0 0 66.666%; max-width: 66.666%; }
  .cell.large-12 { flex: 0 0 100%; max-width: 100%; }
  .cell.large-offset-0 { margin-inline-start: 0; }
  .cell.large-offset-2 { margin-inline-start: 16.666%; }
}

@media (max-width: 39.9375em) {
  .cell.small-6 { flex: 0 0 50%; max-width: 50%; }
  .cell.small-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .cell.small-12 { flex: 0 0 100%; max-width: 100%; }
  .cell.small-offset-1 { margin-inline-start: 8.333%; }
  .cell.small-order-1 { order: 1; }
  .cell.small-order-2 { order: 2; }
}

.hide-for-medium { display: block; }
.show-for-medium { display: none; }

@media (min-width: 40em) {
  .hide-for-medium { display: none !important; }
  .show-for-medium { display: block !important; }
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.menu.align-center { justify-content: center; }

.flex { display: flex; flex-direction: column; }

.button,
button.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-sm);
  background: var(--color-gold);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--color-gold-hover);
  color: var(--color-text);
}

.button.secondary {
  background: transparent;
  color: var(--color-gold);
}

.button.small {
  padding: 0.4rem 0.75rem;
  font-size: var(--font-size-sm);
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  line-height: 1.25;
  margin-top: 0;
}

.h2 { font-size: var(--font-size-3xl); }
.h3 { font-size: var(--font-size-2xl); }
.h4 { font-size: var(--font-size-xl); }
.h5 { font-size: var(--font-size-lg); }

.bold { font-weight: 700; }