/* Concrete color tokens and small helper styles for Tabiwander
   This file replaces variables.css and provides concrete color values so
   server-rendered HTML and SVGs render correctly even when CSS variables
   are not available.
*/
:root{
  --color-teal: #0FA3B1;
  --color-warm-orange: #FF8A4B;
  --color-cream: #FFF7F0;
  --color-text: #222222;
}

/* Small helper for mascot badge on itinerary cards */
.tabi-badge{
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0FA3B1;
  color: white;
  box-shadow: 0 2px 6px rgba(15,163,177,0.12);
}

/* Accessible CTA colors */
.btn-primary{
  background: #FF8A4B;
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
}

/* Small responsive utilities */
@media (max-width: 600px){
  .tabi-badge{ width:40px; height:40px }
}

/* Header mascot — height tied to 2x the header text font-size.
   The site-title h1 renders at ~1.5rem in the header; 2x = 3rem.
   We use an explicit height so the mascot never inflates the header row. */
.site-mascot{ display:inline-flex; align-items:center; margin-left:0.5rem }
.site-mascot img{
  height: 3rem;   /* 2× the effective header font-size (~1.5rem) */
  width: auto;
  object-fit: contain;
  display: block;
  max-width: none;
}

@media (max-width: 600px){
  .site-mascot img{ height: 2.25rem }
}

/* HERO LAYOUT FIXES: keep the hero inner container predictable and allow
   its flex/grid children to shrink on narrow viewports. Placing these
   rules in the global tokens CSS ensures consistent behavior across pages. */
.tabi-hero-inner{
  width:100%; /* occupy available inline space up to max-width defined in partial */
  box-sizing: border-box; /* safe-guard for padding/border calculations */
}
.tabi-hero-inner > *{
  min-width: 0; /* allow flex/grid children to shrink below their content width */
}