@import url('/assets/css/ec-green-solid-palette.css');
@import url('/assets/css/ec-contrast-hotfix.css');
@import url('/assets/css/ec-visible-text-lock.css');
@import url('/assets/css/ec-home-final-visual-tuning.css');

/* Embaixada Carioca — Stabilization Base CSS
   Phase 1: consolidate urgent visual/readability/performance-safe overrides.
   This file is intentionally small and should replace scattered emergency overrides over time. */

:root {
  --ec-blue: #00405a;
  --ec-blue-2: #527f8f;
  --ec-green: #335d4a;
  --ec-yellow: #f59b1e;
  --ec-sand: #ede2c9;
  --ec-paper: #f6efde;
  --ec-gray: #485156;
  --ec-price: #9a6500;
}

html,
body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* Nav underline: hidden by default; animates only on hover/focus as a real word underline. */
html body nav.top nav.nav-links a::after,
html body nav.top .nav-links.nav-links a::after,
html body header nav.top .nav-links.nav-links a::after {
  left: 0 !important;
  right: auto !important;
  bottom: -3px !important;
  width: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 2px !important;
  transform: none !important;
  transform-origin: left center !important;
  opacity: 0 !important;
  background: var(--ec-yellow) !important;
  transition: width .22s ease, opacity .18s ease !important;
}
html body nav.top nav.nav-links a:hover::after,
html body nav.top .nav-links.nav-links a:hover::after,
html body nav.top nav.nav-links a:focus-visible::after,
html body nav.top .nav-links.nav-links a:focus-visible::after {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
}
html body nav.top .nav-links.nav-links a[aria-current="page"]::after,
html body nav.top .nav-links.nav-links a.active::after {
  width: 0 !important;
  opacity: 0 !important;
}

/* Hero eyebrow/tagline alignment:
   start aligned with the C of CAFÉ DA MANHÃ and vertically near the base of the top-left logo. */
@media (min-width: 961px) {
  html body header.hero.hero .hero-content .eyebrow.hero-eyebrow,
  html body header.page-hero.page-hero .page-hero-content .eyebrow.hero-eyebrow {
    left: calc(clamp(170px, 10.9vw, 210px) + 10px) !important;
    transform: translate(0, 2px) !important;
  }
}

/* Home hero must never fall back to cream behind light text.
   The image is kept both as <img> and as CSS background fallback for cache/SW/preload edge cases. */
html body header.hero.hero {
  background-color: var(--ec-blue) !important;
  background-image:
    linear-gradient(180deg, rgba(0,32,46,.40) 0%, rgba(0,32,46,.18) 28%, rgba(0,32,46,.42) 58%, rgba(0,32,46,.88) 100%),
    url('/assets/hero.webp') !important;
  background-size: cover !important;
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
}

html body header.hero.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0,32,46,.10) 0%, rgba(0,32,46,.22) 52%, rgba(0,32,46,.72) 100%) !important;
}

html body header.hero.hero .hero-photo {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Home "Os três momentos" is a light section, not a hero.
   It must use dark readable text on cream background. */
html body[data-screen-label="Home"] main section.momentos,
html body main section.momentos {
  background: var(--ec-paper) !important;
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body[data-screen-label="Home"] main section.momentos .sec-head h1,
html body[data-screen-label="Home"] main section.momentos .sec-head h2,
html body[data-screen-label="Home"] main section.momentos .sec-head h3,
html body main section.momentos .sec-head h1,
html body main section.momentos .sec-head h2,
html body main section.momentos .sec-head h3 {
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body[data-screen-label="Home"] main section.momentos .sec-head h1 .serif,
html body[data-screen-label="Home"] main section.momentos .sec-head h2 .serif,
html body[data-screen-label="Home"] main section.momentos .sec-head h3 .serif,
html body main section.momentos .sec-head h1 .serif,
html body main section.momentos .sec-head h2 .serif,
html body main section.momentos .sec-head h3 .serif {
  color: var(--ec-green) !important;
  -webkit-text-fill-color: var(--ec-green) !important;
  text-shadow: none !important;
}

html body[data-screen-label="Home"] main section.momentos .sec-head .lede,
html body[data-screen-label="Home"] main section.momentos .sec-head p,
html body main section.momentos .sec-head .lede,
html body main section.momentos .sec-head p {
  color: var(--ec-gray) !important;
  -webkit-text-fill-color: var(--ec-gray) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body[data-screen-label="Home"] main section.momentos .sec-head .num,
html body main section.momentos .sec-head .num {
  color: var(--ec-blue-2) !important;
  -webkit-text-fill-color: var(--ec-blue-2) !important;
  text-shadow: none !important;
}

/* Hero performance/readability */
.hero-photo,
.page-hero-photo,
picture.page-hero-photo img {
  object-fit: cover;
  background: var(--ec-blue);
}

/* CTA hierarchy */
a.btn[href*="tagme"],
a.btn[href*="reserv"],
.hero-ctas a[href*="tagme"],
.hero-ctas a[href*="reserv"],
.ctas a[href*="tagme"],
.ctas a[href*="reserv"] {
  background: var(--ec-yellow) !important;
  border-color: var(--ec-yellow) !important;
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  font-weight: 900 !important;
}

/* Menu readability final lock */
.menu-item .menu-item-name,
.menu-item .item-name,
.menu-item .dish-name,
.menu-item h3,
.menu-item h4 {
  color: var(--ec-green) !important;
  -webkit-text-fill-color: var(--ec-green) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.menu-item .menu-item-desc,
.menu-item .item-desc,
.menu-item .description,
.menu-item p,
.menu-item small {
  color: var(--ec-gray) !important;
  -webkit-text-fill-color: var(--ec-gray) !important;
  text-shadow: none !important;
}

.menu-item .menu-item-price,
.menu-item .item-price,
.menu-item .price {
  color: var(--ec-price) !important;
  -webkit-text-fill-color: var(--ec-price) !important;
  font-weight: 900 !important;
}

/* Light cards must never inherit pale text */
.card,
.box,
.faq-item,
.info-card,
.content-card,
.copy-card,
.route-card,
.guide-card,
.place-card,
.geo-card,
.direct-answer-card,
.ec-r2d2-card,
.ec-sprint4-faq details {
  color: var(--ec-blue);
  text-shadow: none;
}

.card p,
.box p,
.faq-item p,
.info-card p,
.content-card p,
.copy-card p,
.route-card p,
.guide-card p,
.place-card p,
.geo-card p,
.direct-answer-card p,
.ec-r2d2-card p,
.ec-sprint4-faq details p {
  color: var(--ec-gray);
}

/* Lighthouse contrast lock: FAQ headings inside light cards were being inherited as pale text. */
h3.faq-question,
.faq-question,
.faq-item h3,
.faq-item summary,
.ec-sprint4-faq h3,
.ec-sprint4-faq summary,
details .faq-question {
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.faq-answer,
.faq-item .faq-answer,
.faq-item p,
.ec-sprint4-faq p,
.ec-sprint4-faq details p {
  color: var(--ec-gray) !important;
  -webkit-text-fill-color: var(--ec-gray) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Lighthouse contrast lock: footer must be a true dark block, never pale text on pale background. */
footer.foot,
.foot[role="contentinfo"],
body > footer.foot {
  background: var(--ec-blue) !important;
  color: var(--ec-paper) !important;
  -webkit-text-fill-color: var(--ec-paper) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

footer.foot *,
.foot[role="contentinfo"] * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

footer.foot a,
.foot[role="contentinfo"] a,
footer.foot b,
footer.foot strong,
.foot[role="contentinfo"] b,
.foot[role="contentinfo"] strong {
  color: var(--ec-yellow) !important;
  -webkit-text-fill-color: var(--ec-yellow) !important;
}

/* Mobile Lighthouse contrast lock: authority/geo sections and light-background links. */
section.topic-authority.section-animate,
section.ec-sprint2-geo,
section.topic-authority.section-animate p,
section.ec-sprint2-geo p,
section.topic-authority.section-animate li,
section.ec-sprint2-geo li,
section.topic-authority.section-animate span,
section.ec-sprint2-geo span,
div.ec-kicker {
  color: var(--ec-gray) !important;
  -webkit-text-fill-color: var(--ec-gray) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

section.topic-authority.section-animate h1,
section.topic-authority.section-animate h2,
section.topic-authority.section-animate h3,
section.topic-authority.section-animate h4,
section.ec-sprint2-geo h1,
section.ec-sprint2-geo h2,
section.ec-sprint2-geo h3,
section.ec-sprint2-geo h4,
div.ec-kicker strong,
div.ec-kicker b {
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

section.topic-authority.section-animate a,
section.ec-sprint2-geo a,
.ec-sprint2-geo a,
.topic-authority a {
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.16em !important;
  text-decoration-thickness: 1.5px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

section.topic-authority.section-animate .pill,
section.ec-sprint2-geo .pill,
section.topic-authority.section-animate .badge,
section.ec-sprint2-geo .badge {
  background: rgba(0, 64, 90, 0.08) !important;
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  border-color: rgba(0, 64, 90, 0.24) !important;
}

/* Skip link must be focusable when keyboard users tab into the page. */
a.skip-nav,
.skip-nav {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  z-index: 9999 !important;
  padding: 12px 16px !important;
  background: var(--ec-yellow) !important;
  color: var(--ec-blue) !important;
  -webkit-text-fill-color: var(--ec-blue) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transform: translateY(-140%) !important;
  transition: transform .18s ease !important;
}

a.skip-nav:focus,
a.skip-nav:focus-visible,
.skip-nav:focus,
.skip-nav:focus-visible {
  transform: translateY(0) !important;
  outline: 3px solid var(--ec-blue) !important;
  outline-offset: 3px !important;
}

/* Mobile touch safety */
a,
button,
[role="button"] {
  touch-action: manipulation;
}

@media (max-width: 720px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  .hero-ctas,
  .ctas {
    gap: 12px;
  }

  .hero-ctas .btn,
  .ctas .btn {
    min-height: 48px;
  }
}