/* ============================================================
   Roth’s Sea & Steak — Main CSS
   ============================================================ */

/* ============================================================
   Fonts
   ============================================================ */

@font-face {
  font-family: 'jazmin';
  src: url('../fonts/jazmin.woff2') format('woff2'),
       url('../fonts/jazmin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Color Variables
   ============================================================ */

:root {
  --charred-oak:  #1b1b1b;
  --bloodline:    #591f1f;
  --bone-marrow:  #f3ede3;
  --sea-salt:     #c87a68;
  --gilded-flame: #b08b4f;
}

/* ============================================================
   Reset
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* ============================================================
   Body Styles
   ============================================================ */

body {
  font-family: 'jazmin', sans-serif;
  background-color: var(--bone-marrow);
  line-height: 1.4;
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  color: var(--sea-salt);
  margin: 0;
}

h1 {
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

h2 {
  font-size: 2rem;
  margin: 0.5rem 0;
  line-height: 1.2;
}

p {
  font-size: 1.15rem;
  margin: 1rem 0;
  color: var(--charred-oak);
}

a {
  color: var(--bone-marrow);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--sea-salt);
}

/* ============================================================
   Ticket Button
   ============================================================ */

.ticket-button {
  position: relative;
  display: inline-block;
  width: clamp(150px, 35vw, 220px);
  aspect-ratio: 342.53 / 98.82;
  cursor: pointer;
  text-decoration: none;
  font-size: 0;
  line-height: 0;
  color: var(--bloodline);
  padding-inline: 0.25rem;
}

.ticket-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--bloodline);
  fill: transparent;
  stroke-width: 2;
  stroke-miterlimit: 10;
  transition: fill 0.25s ease, stroke 0.25s ease;
  pointer-events: none;
}

.ticket-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 1.25rem/1 'jazmin', serif;
  color: var(--bloodline);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  transition: color 0.25s ease;
}

.ticket-button:hover .ticket-frame {
  fill: var(--bloodline);
  stroke: var(--bloodline);
}

.ticket-button:hover .ticket-label {
  color: var(--bone-marrow);
}

section[id] {
  scroll-margin-top: 20vh;
}

@media (max-width: 767px) {
  section[id] {
  scroll-margin-top: 4vh;
}
}