/* Saiko: red, black and silver from the user supplied logo. */
:root, .dark {
  --background: #050505 !important;
  --foreground: #e8e5e1 !important;
  --primary: #f52232 !important;
  --primary-foreground: #050505 !important;
  --accent: #f52232 !important;
  --accent-foreground: #050505 !important;
  --ring: #f52232 !important;
  --secondary: #141414 !important;
  --secondary-foreground: #e8e5e1 !important;
  --muted: #191919 !important;
  --muted-foreground: #a6a6a6 !important;
}
.saiko-logo { display: inline-block; width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.saiko-brand-name { display: inline-block; color: var(--foreground); letter-spacing: .035em; }
span:has(> .saiko-logo), p:has(> .saiko-logo) { display: inline-flex; align-items: center; gap: 12px; }
footer .saiko-logo { width: 110px; height: 110px; }
#top > div:first-child img { filter: grayscale(1); }
::selection { background: var(--primary); color: var(--background); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
@media(max-width: 767px) { .saiko-logo { width: 48px; height: 48px; } }
/* Preserve readable black type in hover states. */
a.bg-primary:hover { background-color: #ff3544; }

/* WhatsApp keeps its recognizable green identity. */
:root { --whatsapp: #25d366; --whatsapp-hover: #20bd5a; }
a.whatsapp-cta { background-color: var(--primary); color: #050505; }
a.whatsapp-cta:hover { background-color: #ff3544; color: #050505; }
a.whatsapp-cta:focus-visible { outline-color: var(--primary); }
a[aria-label="Falar no WhatsApp"] > span { background-color: var(--whatsapp); }
a[aria-label="Falar no WhatsApp"] > span:last-child { box-shadow: 0 8px 26px rgb(0 0 0 / .4); }
a[aria-label="Falar no WhatsApp"] svg { fill: #fff; }

/* Centered brand mark replaces the three-line hero name. */
.saiko-hero-heading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.saiko-hero-logo { display: block; width: min(72vw, 360px); height: auto; object-fit: contain; }
.saiko-hero-tagline { display: block; font-size: clamp(1.75rem, 4.5vw, 3.5rem); line-height: 1.1; }

/* Show the compact menu logo only after the hero leaves the visible area. */
.saiko-header-brand { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease; }
.saiko-header-brand.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .saiko-header-brand { transition: none; } }

.saiko-hero-tagline { max-width: 24ch; text-wrap: balance; }

/* Smaller hero top spacing: fixed menu height plus 16px clearance. */
.saiko-hero-content { padding-top: 80px; }
@media (min-width: 768px) { .saiko-hero-content { padding-top: 96px; } }

/* Localized dark backing follows the hero logo without dimming the rest of the image. */
.saiko-hero-heading { position: relative; isolation: isolate; }
.saiko-hero-heading::before { content: ""; position: absolute; top: 0; left: 50%; width: min(92vw, 520px); height: min(72vw, 360px); transform: translateX(-50%); background: radial-gradient(ellipse at center, rgb(0 0 0 / .94) 0%, rgb(0 0 0 / .82) 42%, rgb(0 0 0 / .42) 65%, transparent 82%); z-index: -1; pointer-events: none; }

/* Tighter logo position on mobile. */
@media (max-width: 767px) { .saiko-hero-content { padding-top: 56px; } }