/*
 Theme Name:   Tampopo Theme
 Theme URI:    https://tampopo.co.uk
 Description:  Custom child theme for Tampopo (Divi-aware).
 Author:       Your Name
 Template:     Divi
 Version:      1.0.0
*/

/* =============================================================================
   0) FONT LOADING
   ============================================================================= */
@font-face{
  font-family: 'Brandon Grotesque';
  src: url('fonts/Brandon_Grotesque_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Brandon Grotesque';
  src: url('fonts/Brandon_Grotesque_Regular_Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Brandon Grotesque';
  src: url('fonts/Brandon_Grotesque_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Neutra Display';
  src: url('fonts/Neutra-Display-Titling.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   1) DESIGN TOKENS
   ============================================================================= */
:root{
  --brand-red: #F8004A;
  --ink:       #251230;
}

/* =============================================================================
   2) GLOBAL TYPOGRAPHY (base)
   ============================================================================= */
body,
.entry-content,
.et_pb_module{
  font-family: 'Brandon Grotesque', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;     /* 16px base */
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body p,
.entry-content p,
.et_pb_text p,
.et_pb_module p{
  font-size: 1rem;
  line-height: 1.45;   /* compact for short copy */
  margin: 0 0 0.75em;
}

/* =============================================================================
   3) HEADINGS (Divi-aware)
   ============================================================================= */

/* Reset family + margins everywhere Divi places headings */
body h1, body h2, body h3, body h4, body h5, body h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4, .et_pb_text h5, .et_pb_text h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6{
  font-family: 'Brandon Grotesque', Helvetica, Arial, sans-serif;
  margin: 0 0 0.5em;
}

/* --- H1: homepage hero --- */
body h1, .entry-content h1, .et_pb_text h1, .et_pb_module h1{
  font-family: 'Neutra Display','Brandon Grotesque',Helvetica,Arial,sans-serif !important;
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 4vw, 4.5rem); /* up to ~72px */
  line-height: 1.05;                               /* poster-tight */
  letter-spacing: 0.01em;
  color: var(--brand-red);
}

/* --- Secondary H1 for subpages (use <h1 class="page-title">) --- */
body h1.page-title,
.entry-content h1.page-title,
.et_pb_text h1.page-title,
.et_pb_module h1.page-title{
  font-family: 'Neutra Display','Brandon Grotesque',Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.1rem + 5vw, 3.5rem);   /* ~35 → 56px; > H2 */
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--brand-red);
}
@media (max-width: 380px){
  body h1.page-title,
  .entry-content h1.page-title,
  .et_pb_text h1.page-title,
  .et_pb_module h1.page-title{ font-size: 2.2rem; }
}

/* --- H2 --- */
body h2, .entry-content h2, .et_pb_text h2, .et_pb_module h2{
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 3.2vw, 3rem);   /* up to ~48px */
  line-height: 1.15;
  color: var(--brand-red);
}

/* --- H3 (brand red, slightly lighter than H2 visually) --- */
body h3, .entry-content h3, .et_pb_text h3, .et_pb_module h3{
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 1.8vw, 2rem);   /* below H2 */
  line-height: 1.2;
  color: var(--brand-red);
}
/* If a specific module still overrides H3, uncomment to hard-enforce: */
/* .et_pb_text h3, .et_pb_module h3{ font-weight:500 !important; color:var(--brand-red) !important; } */

/* --- H4 – H6 --- */
body h4, .entry-content h4, .et_pb_text h4, .et_pb_module h4{
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);  /* ~20–24px */
  line-height: 1.2;
  color: var(--ink);
}
body h5, .entry-content h5, .et_pb_text h5, .et_pb_module h5{
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.25vw, 1.25rem); /* ~18–20px */
  line-height: 1.25;
  color: var(--ink);
}
body h6, .entry-content h6, .et_pb_text h6, .et_pb_module h6{
  font-weight: 400;
  font-size: 1rem;                                      /* 16px */
  line-height: 1.25;
  color: var(--ink);
}

/* Small / caption text */
.small, footer, .caption,
.entry-content .small, .entry-content footer, .entry-content .caption,
.et_pb_text .small, .et_pb_text .caption{
  font-size: 0.875rem;                                  /* 14px */
  line-height: 1.5;
  color: #555;
}

/* =============================================================================
   4) MENU STRUCTURE (PDF logic)
   Line 1: Item name — price — icons (left-aligned, grouped)
   Line 2: Description (full width)
   ============================================================================= */
.menu-item{ margin-bottom: 1.25rem; } /* ~20px rhythm */

.menu-item-header{
  display: flex;
  justify-content: flex-start;  /* not justified */
  align-items: baseline;        /* prices align optically with names */
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Long names wrap without pushing price away */
.item-name{
  min-width: 0;
  word-break: break-word;
  flex: 0 1 auto;
}

/* Price + icons stay together, aligned to baseline for consistency */
span.price-and-icons{
  display: inline-flex;
  align-items: baseline;   /* ✅ changed from center to baseline */
  gap: 0;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1.2;
  position: relative;
  top: 1px;               /* ✅ gentle nudge for perfect optical alignment */
}

/* Item text sizes */
.item-name, .item-price{
  font-family: 'Brandon Grotesque', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 0.9rem + 0.5vw, 1rem);
  line-height: 1.3;
  color: var(--ink);
}
.item-price{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Line 2: description */
.item-description{
  font-family: 'Brandon Grotesque', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 0.92rem + 0.3vw, 1rem);
  line-height: 1.4;
  color: var(--ink);
  margin-top: 0.35em;
}

@media (max-width: 480px){
  .item-name, .item-price{ font-size: 0.95rem; }
}

/* =============================================================================
   5) MENU ICONS — DIET (before) + CHILLI (after)
   ============================================================================= */

/* Diet icon (before) — appears right after price */
span.price-and-icons::before{
  content: "";
  display: inline-block;
  margin-left: 6px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  top: 4px;              /* 👈 pushes icon down slightly for better vertical centering */
}

/* Chilli icon(s) (after) — appears after diet icon */
span.price-and-icons::after{
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  top: 4px;              /* 👈 same adjustment */
}

/* Diet variants */
span.price-and-icons[data-icon="v"]::before{
  background-image: url('/wp-content/uploads/2025/10/tampopo-icon-vegetarian.svg');
}
span.price-and-icons[data-icon="ve"]::before{
  background-image: url('/wp-content/uploads/2025/10/tampopo-icon-vegan.svg');
}

/* Chilli levels (support both spellings) */
span.price-and-icons[data-chilli="1"]::after,
span.price-and-icons[data-chili="1"]::after{
  background-image: url('/wp-content/uploads/2025/10/tampopo-icon-1-chilli.svg');
}
span.price-and-icons[data-chilli="2"]::after,
span.price-and-icons[data-chili="2"]::after{
  background-image: url('/wp-content/uploads/2025/10/tampopo-icon-2-chilli.svg');
}
span.price-and-icons[data-chilli="3"]::after,
span.price-and-icons[data-chili="3"]::after{
  background-image: url('/wp-content/uploads/2025/10/tampopo-icon-3-chilli.svg');
}

/* Extra squeeze for very narrow phones */
@media (max-width: 380px){
  body h1.page-title,
  .entry-content h1.page-title,
  .et_pb_text h1.page-title,
  .et_pb_module h1.page-title{ font-size: 2.2rem; }

  span.price-and-icons::before,
  span.price-and-icons::after{
    width: 12px; height: 12px;
    vertical-align: -1px;     /* tiny tweak at very small sizes */
  }
}

/* =============================================================================
   6) BUTTONS (Divi-aware)
   Primary = solid brand red, white text
   Ghost  = white background, red border/text
   Works with custom .btn and Divi’s .et_pb_button
   ============================================================================= */

:root{
  --btn-radius: 0;               /* square corners */
  --btn-padding-y: 0.65em;
  --btn-padding-x: 1.25em;
  --btn-weight: 700;
  --btn-letter-spacing: 0.01em;
  --btn-transition: 160ms ease;
  --brand-red-press: #d60040;
}

/* Base button (custom + Divi) */
a.btn, .btn,
.et_pb_button, .et_pb_module .et_pb_button,
a.et_pb_promo_button, .et_pb_more_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: 0 !important;                 /* ✅ force square */
  border: 2px solid transparent;
  font-family: 'Brandon Grotesque', Helvetica, Arial, sans-serif;
  font-weight: var(--btn-weight);
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--btn-transition),
              color var(--btn-transition),
              border-color var(--btn-transition),
              box-shadow var(--btn-transition),
              transform var(--btn-transition);
  -webkit-font-smoothing: antialiased;
}

/* PRIMARY (filled) */
a.btn.btn--primary, .btn.btn--primary,
.et_pb_button.btn--primary,
.et_pb_button:not(.btn--ghost) {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
a.btn.btn--primary:hover, .btn.btn--primary:hover,
.et_pb_button.btn--primary:hover,
.et_pb_button:not(.btn--ghost):hover {
  background: var(--brand-red-press);
  border-color: var(--brand-red-press);
  color: #fff;
}
a.btn.btn--primary:active, .btn.btn--primary:active,
.et_pb_button.btn--primary:active,
.et_pb_button:not(.btn--ghost):active {
  transform: translateY(1px);
}

/* GHOST (outline) */
a.btn.btn--ghost, .btn.btn--ghost,
.et_pb_button.btn--ghost {
  background: #fff;
  color: var(--brand-red);
  border-color: var(--brand-red);
}
a.btn.btn--ghost:hover, .btn.btn--ghost:hover,
.et_pb_button.btn--ghost:hover {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}

/* Remove Divi’s default » arrow */
.et_pb_button:after { display: none !important; }

/* Sizes */
.btn--sm { padding: 0.5em 0.9em; font-size: 0.875rem; }
.btn--lg { padding: 0.75em 1.5em; font-size: 1rem; }

/* Icons inside buttons */
.btn > svg, .btn > img,
.et_pb_button > svg, .et_pb_button > img {
  width: 1em; height: 1em; flex: 0 0 auto;
}

/* Full-width option on mobile */
@media (max-width: 480px){
  .btn--block, .et_pb_button.btn--block { width: 100%; }
}