@use '@angular/material' as mat

@use 'layout'

@include mat.core()

:root
  // color-scheme: light dark
  @include mat.theme((
      color: (
        primary: mat.$azure-palette,
        tertiary: mat.$blue-palette,
        // theme-type: light,
      ),
      typography: (
        plain-family: Montserrat,
        brand-family: Montserrat,
      ),
      density: 0,
    ))
  font-family: 'Helvetica Neue', Montserrat, sans-serif


html,
body 
  height: 100%
  overscroll-behavior-y: contain


a 
  color: rgb(0, 0, 238)
  text-decoration: underline


button.mat-primary:not(:disabled)
  background: var(--mat-sys-primary) !important
  color: var(--mat-sys-on-primary) !important


button.mat-warn:not(:disabled)
  background: var(--mat-sys-error) !important
  color: var(--mat-sys-on-error) !important


// ---------------- Recipe book print layout (A4) ----------------

.recipe-print
  background: #fff
  color: #111
  max-width: 210mm
  margin: 0 auto
  padding: 12mm 14mm
  box-sizing: border-box
  font-family: 'Helvetica Neue', Montserrat, sans-serif

.recipe-print__title
  margin: 0
  font-size: 28px
  line-height: 1.2

.recipe-print__meta
  display: flex
  flex-wrap: wrap
  gap: 10px 18px
  margin-top: 6px
  font-size: 12px

.recipe-print__hr
  margin: 12px 0
  border: none
  border-top: 1px solid rgba(0, 0, 0, 0.12)

.recipe-print__section
  margin: 0 0 14px

.recipe-print__section h2
  margin: 0 0 8px
  font-size: 16px
  text-transform: uppercase
  letter-spacing: 0.04em

.recipe-print__ingredients
  margin: 0
  padding-left: 18px
  font-size: 13px

.recipe-print__ingredients li
  margin: 2px 0

.recipe-print__steps
  margin: 0
  padding-left: 18px
  font-size: 13px

.recipe-print__steps li
  margin: 10px 0
  break-inside: avoid

.recipe-print__steps .step-head
  font-weight: 700

.recipe-print__steps .phase
  display: inline-block
  border: 1px solid rgba(0, 0, 0, 0.25)
  border-radius: 999px
  padding: 0 8px
  margin-right: 8px
  font-size: 11px
  font-weight: 700

.recipe-print__steps .step-text
  margin-top: 4px
  white-space: pre-wrap

.recipe-print__steps .step-notes
  margin-top: 4px
  opacity: 0.9
  white-space: pre-wrap

.recipe-print__photos
  display: grid
  grid-template-columns: repeat(2, 1fr)
  gap: 10px

.recipe-print__photos figure
  margin: 0
  break-inside: avoid

.recipe-print__photos img
  width: 100%
  height: auto
  border-radius: 8px
  border: 1px solid rgba(0, 0, 0, 0.12)

.recipe-print__photos figcaption
  font-size: 12px
  margin-top: 4px

.recipe-print__notes p
  margin: 6px 0
  white-space: pre-wrap

.page-break-before
  break-before: page
  page-break-before: always

@media print
  @page
    size: A4
    margin: 12mm

  body
    background: #fff !important

  .recipe-print
    padding: 0
    max-width: none
    margin: 0