/*
 * Receipt Base Styles
 * A Dance for Two - Thermal Receipt Aesthetic
 *
 * Base styles including:
 * - CSS Reset
 * - CSS Custom Properties
 * - Typography
 * - Grid System
 * - Layout Structure
 * - Responsive Breakpoints
 */

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

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Regular-Trial.9ef5133f6890.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Regular-Oblique-Trial.3621aaa9c781.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Bold-Trial.9fcd2e1a3639.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Bold-Oblique-Trial.6e65cf49cff3.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Medium-Trial.faff6a0d5cf4.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Medium-Oblique-Trial.8498cc3ca4bb.woff2") format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Light-Trial.6e8749ff0e7f.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru';
  src: url("/static/fonts/GT-Maru/GT-Maru-Light-Oblique-Trial.52b01cdf2d5d.woff2") format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru Mono';
  src: url("/static/fonts/GT-Maru/GT-Maru-Mono-Regular-Trial.d92761305c3c.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru Mono';
  src: url("/static/fonts/GT-Maru/GT-Maru-Mono-Regular-Oblique-Trial.1d523cdad3cd.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru Mono';
  src: url("/static/fonts/GT-Maru/GT-Maru-Mono-Bold-Trial.3e4fbb29c2f0.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru Mono';
  src: url("/static/fonts/GT-Maru/GT-Maru-Mono-Bold-Oblique-Trial.db94e11ecbb9.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */

:root {
  /* Colors */
  --color-text: #000000;
  --color-background: #ffffff;
  --color-page-bg: #f5f5f5;
  --color-border: #000000;
  --color-admin-bg: #ffffff;
  --color-gray: #666666;

  /* Typography */
  --font-family: 'GT Maru', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'GT Maru Mono', 'Courier New', Courier, monospace;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-xsmall: 12px;
  --font-size-large: 18px;
  --font-size-xlarge: 20px;

  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --line-height-loose: 1.75;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Layout - Printer Specifications */
  --max-width: 600px;              /* Total receipt width */
  --design-width: 576px;           /* Printable area (96% of max-width) */
  --margin-left: 9px;              /* Left margin (1.5% of max-width) */
  --margin-right: 15px;            /* Right margin (2.5% of max-width) */

  /* Grid System - 16 columns × 36px = 576px */
  --grid-columns: 16;
  --grid-column-width: 36px;       /* Fixed column width at desktop */
}

/* ============================================
   CSS Reset & Base Styles
   ============================================ */

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

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-xlarge);
  margin-bottom: var(--spacing-md);
}

h2 {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-md);
}

h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
}

h4, h5, h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: #0000EE;
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

/* ============================================
   16-Column Grid System (Printer Skeumorphism)
   ============================================ */

/*
 * Grid Philosophy - Based on Thermal Printer Specifications:
 * - Total width: 600px (9px + 576px + 15px)
 * - Design area: 576px (16 columns × 36px)
 * - Gapless columns (thermal printers print continuously)
 * - Desktop (≥600px): Fixed pixel columns matching printer
 * - Mobile (<600px): Fluid proportional scaling
 *
 * Column Proportions (at any width):
 * - 12/4 split: .col-12 and .col-4 (75%/25% like listings)
 * - 8/8 split: .col-8 and .col-8 (50%/50%)
 * - Full width: .col-16 (100%)
 * - Thirds: .col-5 + .col-6 + .col-5 (31%/37%/31%)
 *
 * Desktop: 16 cols × 36px = 576px (exact printer spec)
 * Mobile (360px): 16 cols × 21.6px = 345.6px (fluid scaling)
 */

/* Mobile: Fluid scaling with proportional columns */
.grid-16 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: 0; /* Gapless - printer skeumorphism */
}

/* Desktop: Fixed pixel columns matching printer spec */
@media (min-width: 600px) {
  .grid-16 {
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
  }
}

/* Column span utilities (1-16)
 * Using grid-column-end with span instead of shorthand grid-column
 * to work correctly when combined with .col-start-* classes
 */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }
.col-13 { grid-column-end: span 13; }
.col-14 { grid-column-end: span 14; }
.col-15 { grid-column-end: span 15; }
.col-16 { grid-column-end: span 16; }

/* Column start positions (1-17, where 17 means "start at last column") */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }
.col-start-14 { grid-column-start: 14; }
.col-start-15 { grid-column-start: 15; }
.col-start-16 { grid-column-start: 16; }
.col-start-17 { grid-column-start: 17; }

/* ============================================
   Layout Structure
   ============================================ */

.receipt {
  background-color: var(--color-background);
  width: 100%;
  min-height: 100vh;
  padding-bottom: 2rem;
}

.receipt--admin {
  background-color: var(--color-admin-bg);
}

/* Mobile: Fluid proportional margins (1.5% left, 2.5% right) */
.receipt__content {
  padding-left: 1.5%;
  padding-right: 2.5%;
  margin: var(--spacing-md) 0;
}

/* Desktop: Printer specifications (600px max, 9px/15px margins) */
@media (min-width: 600px) {
  body {
    background-color: var(--color-page-bg);
  }

  .receipt {
    max-width: var(--max-width);
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: calc(100vh - 4rem);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  /* Desktop: Fixed printer margins */
  .receipt__content {
    padding-left: var(--margin-left);   /* 9px */
    padding-right: var(--margin-right); /* 15px */
  }
}

/* ============================================
   Dot Matrix Header
   ============================================ */

.dot-matrix-header {
  width: 100%;
  text-align: center;
  padding: var(--spacing-sm) 0;
}

.dot-matrix-header img {
  width: 100%;
  height: auto;
  max-height: 60px; /* Constrain on large screens */
}

@media print {
  .dot-matrix-header {
    display: none;
  }
}

/* ============================================
   Receipt Sections
   ============================================ */

.receipt__masthead {
  text-align: center;
}

.receipt__masthead-placeholder {
  font-size: var(--font-size-xlarge);
  font-weight: bold;
}

.receipt__masthead-image {
  width: 100%; /* 100% of 12 columns = 432px at desktop (12 × 36px) */
  height: auto;
  display: block;
  margin: 0 auto; /* Center within column if needed */
}

/* Home page masthead: centered 12 columns (cols 3-14), with top spacing */
.receipt__masthead--home {
  margin: 0;
  padding: 2rem 0 0 0; /* Top padding only for home page breathing room */
  text-align: center; /* Center content within grid column */
}

/* Masthead text lines (below image) */
.masthead-text {
  text-align: center;
  margin-top: var(--spacing-sm);
  line-height: var(--line-height-tight);
}

.masthead-title {
  font-family: var(--font-family);
  font-weight: 500; /* GT Maru Medium */
  font-size: var(--font-size-base);
  margin-bottom: 0.25rem;
}

.masthead-location {
  font-family: var(--font-family);
  font-weight: 300; /* GT Maru Light */
  font-size: var(--font-size-base);
}

/* Recipe detail masthead: 3:2 aspect ratio, flush with top */
.receipt__masthead--recipe {
  width: 100%;
  padding: 0; /* No padding - image/video flush with top */
  padding-top: 66.67%; /* 3:2 aspect ratio (400px/600px at desktop) */
  position: relative;
  overflow: hidden;
}

/* When masthead contains video, remove fixed aspect ratio and grid constraint */
.receipt__masthead--recipe:has(video),
.receipt__masthead--recipe:has(mux-player),
.receipt__masthead--recipe:has(media-playlist) {
  padding-top: 0;
  position: static;
  display: block; /* Override grid display to allow full width */
}

/* Fix media-playlist positioning: prevent text-align: center from affecting
   absolutely positioned elements inside the shadow DOM that lack explicit left/top */
.receipt__masthead--recipe:has(media-playlist) {
  text-align: left;
}

/* Images maintain 3:2 aspect ratio with absolute positioning */
/* Use > direct child selector to avoid styling poster images inside mux-player */
.receipt__masthead--recipe > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Videos use natural aspect ratio, full width */
.receipt__masthead--recipe video,
.receipt__masthead--recipe mux-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Prevents layout shift before metadata loads */
  object-fit: contain;
}

/* Media playlist container uses 3:2 aspect ratio for recipe videos */
.receipt__masthead--recipe .video-playlist {
  width: 100%;
}

.receipt__header {
  text-align: center;
  padding: 0;
}

/* Add padding only to admin header content (not masthead) */
.receipt__header .admin-header__title,
.receipt__header .admin-header__nav,
.receipt__header .admin-links {
  padding: var(--spacing-sm) var(--spacing-md);
}

.receipt__datetime {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.receipt__footer {
  text-align: center;
  padding: var(--spacing-md);
  font-size: var(--font-size-small);
  margin-top: var(--spacing-xl);
}

/* ============================================
   Separators
   ============================================ */

.separator {
  border: none;
  margin: var(--spacing-md) 0;
  text-align: center;
  overflow: hidden;
  height: 1em;
}

.separator::before {
  content: '';
  display: block;
  width: 100%;
  letter-spacing: 0.1em;
}

.separator--dashed::before {
  content: '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
}

.separator--asterisk::before {
  content: '* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *';
}

/* ============================================
   Utility Classes
   ============================================ */

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   Video Playlist
   ============================================ */

.video-playlist {
  position: relative;
}

.video-playlist media-playlist {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Dot navigation */
.video-playlist__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}

.video-playlist__dot {
  width: 44px;
  height: 44px;
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-playlist__dot::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.2s, transform 0.2s;
}

.video-playlist__dot--active::after {
  background: #1f2937;
  transform: scale(1.2);
}

.video-playlist__dot:hover::after {
  background: #6b7280;
}

.video-playlist__dot:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}