/*
Theme Name: ehBrasil
Theme URI: https://ehbrasil.com/
Author: ehbrasil
Description: Tema clássico do blog ehbrasil — histórias, guias e descobertas para brasileiros pelo mundo. Convertido do protótipo de validação HTML/CSS.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ehbrasil
Tags: blog, one-column, custom-menu, featured-images, translation-ready
*/

@font-face {
   font-family: URW;
   src: url("assets/URWGothic-Book.otf") format("opentype");
   font-weight: 400;
   font-display: swap
}

@font-face {
   font-family: URW;
   src: url("assets/URWGothic-Demi.otf") format("opentype");
   font-weight: 700;
   font-display: swap
}

:root {
   --forest: #0b6b43;
   --ink: #064b30;
   --body: #193c30;
   --muted: #426655;
   --sage: #62a676;
   --mint: #dff3e3;
   --yellow: #ffd75a;
   --cream: #fff6e6;
   --paper: #fffcf7;
   --line: #d6dfd4;
   --radius: 14px;
   --space: 24px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 32px
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--body);
   font-family: URW, "Century Gothic", sans-serif;
   font-size: 16px;
   line-height: 1.5;
   caret-color: var(--forest)
}

button,
input,
select {
   font: inherit
}

button,
a {
   -webkit-tap-highlight-color: transparent
}

a {
   color: inherit;
   text-decoration-thickness: 1px;
   text-underline-offset: 5px
}

button {
   cursor: pointer
}

button:disabled {
   cursor: not-allowed;
   opacity: .5
}

a:hover {
   color: var(--forest)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
select:focus-visible {
   outline: 3px solid var(--forest);
   outline-offset: 5px
}

::selection {
   background: var(--yellow);
   color: var(--ink)
}

svg {
   display: inline-block;
   width: 22px;
   height: 22px;
   flex: none;
   vertical-align: middle
}

img {
   max-width: 100%
}

h1,
h2,
h3 {
   color: var(--ink);
   font-weight: 700;
   line-height: 1.12;
   letter-spacing: -.025em;
   margin: 0;
   text-wrap: balance
}

h1 {
   font-size: clamp(40px, 5vw, 70px)
}

h2 {
   font-size: 34px
}

h3 {
   font-size: 25px
}

p {
   margin: 0 0 18px
}

p:last-child {
   margin-bottom: 0
}

h1+p,
h2+p,
h3+p {
   margin-top: 16px
}

h2 a,
h3 a {
   text-decoration: none
}

h2 a:hover,
h3 a:hover {
   text-decoration: underline
}

button {
   color: var(--ink)
}

[hidden] {
   display: none !important
}

.skip-link {
   position: fixed;
   left: 20px;
   top: -100px;
   z-index: 20;
   background: var(--yellow);
   padding: 14px
}

.skip-link:focus {
   top: 12px
}

header {
   border-bottom: 1px solid var(--line);
   background: var(--paper)
}

.header-inner {
   max-width: 1312px;
   margin: auto;
   padding: 25px 32px;
   display: flex;
   align-items: center;
   gap: 34px;
   min-height: 106px
}

.brand {
   display: block;
   flex: none;
   width: 190px
}

.brand img {
   width: 100%;
   height: auto;
   display: block
}

.desktop-nav {
   display: flex;
   gap: 30px;
   padding-left: 28px;
   border-left: 1px solid var(--line);
   align-self: stretch;
   align-items: center
}

.desktop-nav a {
   text-decoration: none;
   position: relative;
   font-weight: 700
}

.desktop-nav a[aria-current]:after {
   content: "";
   height: 4px;
   border-radius: 3px;
   background: var(--yellow);
   position: absolute;
   left: 0;
   right: 0;
   bottom: -13px
}

.header-actions {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 20px
}

.country {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 14px;
   white-space: nowrap
}

.country svg {
   width: 18px;
   height: 18px
}

.button {
   border: 0;
   background: var(--forest);
   color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   min-height: 46px;
   padding: 12px 22px;
   text-decoration: none;
   border-radius: 9px;
   font-weight: 700;
   font-size: 15px;
   line-height: 1.4;
   transition: background .18s ease, transform .18s ease
}

.button:hover {
   color: white;
   background: var(--ink);
   transform: translateY(-1px)
}

.button.yellow {
   background: var(--yellow);
   color: var(--ink)
}

.button.yellow:hover {
   background: #f3c53e
}

.icon-button {
   border: 0;
   background: var(--mint);
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px
}

.icon-button:hover {
   background: #c5e6ce
}

.menu-toggle {
   display: none
}

.mobile-nav {
   padding: 12px 24px 24px;
   border-top: 1px solid var(--line)
}

.mobile-nav a {
   display: block;
   padding: 13px 0;
   text-decoration: none;
   font-weight: 700
}

.mobile-nav .country {
   margin-top: 16px
}

.header-search {
   max-width: 1248px;
   margin: 0 auto;
   padding: 0 32px 28px
}

.header-search label,
.main-search label {
   font-weight: 700;
   display: block;
   margin-bottom: 12px
}

.search-line {
   display: flex;
   gap: 12px
}

.search-line input {
   min-width: 0;
   flex: 1;
   border: 1px solid #a5bcae;
   border-radius: 9px;
   padding: 14px 16px;
   background: white;
   color: var(--body);
   min-height: 50px
}

.search-line input::placeholder {
   color: var(--muted)
}

main {
   max-width: 1312px;
   margin: auto;
   padding: 0 32px 88px
}

.home-intro {
   padding-top: 58px
}

.home-intro>p {
   font-size: 23px;
   margin-top: 16px
}

.topic-nav {
   display: flex;
   gap: 34px;
   flex-wrap: wrap;
   margin: 38px 0 30px;
   padding-bottom: 24px;
   border-bottom: 1px solid var(--line)
}

.topic-nav a {
   text-decoration: none;
   font-size: 17px;
   font-weight: 700
}

.topic-nav a:hover {
   text-decoration: underline
}

.lead-grid {
   display: grid;
   grid-template-columns: 1.65fr 1fr;
   gap: 36px
}

.photo {
   background-image: url("assets/editorial.png");
   background-repeat: no-repeat;
   background-size: 200% auto;
   aspect-ratio: 1.55;
   border-radius: var(--radius);
   background-color: var(--mint)
}

.photo-cafe {
   background-position: left 18%
}

.photo-brussels {
   background-position: right 22%
}

.photo-market {
   background-position: left 66%
}

.photo-atomium {
   background-position: right 82%
}

.image-link {
   display: block;
   border-radius: var(--radius);
   overflow: hidden
}

.image-link .photo {
   transition: filter .2s ease
}

.image-link:hover .photo {
   filter: brightness(.94)
}

.lead-story .photo {
   aspect-ratio: 1.55
}

.lead-story h2 {
   font-size: 40px;
   margin-top: 8px
}

.lead-story>p:not(.meta) {
   font-size: 18px;
   margin-top: 16px;
   max-width: 62ch
}

.lead-secondary {
   display: grid;
   gap: 28px
}

.lead-secondary .photo {
   aspect-ratio: 2.55
}

.lead-secondary .story h3 {
   font-size: 27px;
   margin-top: 5px
}

.lead-secondary .story-copy>p:not(.meta) {
   font-size: 16px;
   margin-top: 8px;
   margin-bottom: 12px
}

.meta {
   font-size: 13px;
   color: var(--muted);
   margin: 16px 0 9px;
   line-height: 1.5
}

.meta span {
   padding: 0 6px
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-weight: 700;
   text-decoration: none;
   font-size: 15px;
   min-height: 44px
}

.text-link:hover {
   text-decoration: underline
}

.text-link svg {
   width: 20px
}

.story-copy>p:not(.meta) {
   margin-top: 12px
}

.story-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 32px
}

.story-grid.two {
   grid-template-columns: repeat(2, minmax(0, 1fr))
}

.story h3 {
   margin-top: 5px
}

.section {
   margin-top: 80px
}

.section-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 30px
}

.section-heading h2 {
   max-width: 720px
}

.guide-strip {
   background: var(--mint);
   border-radius: var(--radius);
   margin-top: 54px;
   padding: 20px 28px 20px 16px;
   display: flex;
   gap: 20px;
   align-items: center
}

.guide-strip h2 {
   font-size: 27px;
   flex: 1;
   min-width: 240px
}

.guide-strip p {
   max-width: 280px;
   flex: 1;
   font-size: 15px;
   margin: 0;
   padding-left: 24px;
   border-left: 1px solid #a8c7b1
}

.guide-strip .button {
   margin-left: 10px;
   flex: none
}

.mascot {
   display: block;
   width: 110px;
   height: 110px;
   flex: none;
   background-image: url("assets/mascots.png");
   background-repeat: no-repeat;
   background-size: 300% auto;
   background-position: left center
}

.mascot-search {
   background-position: center center
}

.mascot-local {
   background-position: right center
}

.directory-strip {
   background: var(--cream);
   padding: 26px 28px;
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   gap: 28px;
   margin-top: 64px
}

.strip-title {
   display: flex;
   align-items: center;
   gap: 18px;
   flex: 1.1
}

.strip-title svg {
   width: 36px;
   height: 36px
}

.strip-title h2 {
   font-size: 25px;
   max-width: 280px
}

.directory-strip p {
   flex: 1;
   margin: 0;
   font-size: 15px
}

.directory-strip>.button {
   flex: none
}

.community-feature {
   display: grid;
   grid-template-columns: 1.08fr 1fr;
   gap: 56px;
   margin-top: 80px;
   align-items: center
}

.community-feature .photo {
   aspect-ratio: 1.25
}

.community-feature h2 {
   font-size: 46px
}

.community-feature p {
   font-size: 18px;
   margin: 24px 0
}

.guide-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 28px
}

.guide-list .story {
   padding-bottom: 24px;
   border-bottom: 1px solid var(--line)
}

.compact {
   display: grid;
   grid-template-columns: 150px 1fr;
   gap: 22px;
   align-items: start
}

.compact .photo {
   aspect-ratio: 1
}

.compact .meta {
   margin-top: 0
}

.compact h3 {
   font-size: 23px
}

.compact .story-copy>p:not(.meta) {
   font-size: 15px;
   margin-top: 8px;
   margin-bottom: 8px
}

.breadcrumbs {
   display: flex;
   gap: 12px;
   align-items: center;
   flex-wrap: wrap;
   font-size: 13px;
   color: var(--muted);
   padding-top: 30px;
   line-height: 1.7
}

.breadcrumbs a {
   text-decoration: none
}

.breadcrumbs a:hover {
   text-decoration: underline
}

.breadcrumbs [aria-current] {
   max-width: 600px
}

.page-intro {
   margin: 46px 0 36px;
   max-width: 920px
}

.page-intro p {
   font-size: 21px;
   max-width: 750px;
   margin-top: 20px
}

.category-index {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 40px 36px;
   margin-top: 44px
}

.category-entry {
   display: grid;
   grid-template-columns: 170px 1fr;
   gap: 24px;
   text-decoration: none;
   border-bottom: 1px solid var(--line);
   padding-bottom: 32px;
   align-items: center
}

.category-entry .photo {
   aspect-ratio: 1
}

.category-entry h2 {
   font-size: 29px
}

.category-entry p {
   font-size: 15px;
   margin: 12px 0 8px
}

.category-entry:hover h2 {
   text-decoration: underline
}

.category-entry:last-child {
   grid-column: 1/-1;
   max-width: 606px
}

.quiet-prompt {
   padding: 38px;
   background: var(--mint);
   border-radius: var(--radius);
   margin-top: 72px
}

.quiet-prompt p {
   max-width: 650px
}

.filter-nav {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin: 30px 0
}

.filter-nav a,
.filter-nav button {
   border: 1px solid var(--line);
   background: transparent;
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 10px 18px;
   border-radius: 8px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 700
}

.filter-nav [aria-current],
.filter-nav [aria-pressed=true] {
   background: var(--forest);
   color: white;
   border-color: var(--forest)
}

.filter-nav a:hover,
.filter-nav button:hover {
   border-color: var(--forest)
}

.category-lead {
   display: grid;
   grid-template-columns: 1.35fr 1fr;
   gap: 46px;
   align-items: center;
   margin: 40px 0 0
}

.category-lead h2 {
   font-size: 43px
}

.category-lead .photo {
   aspect-ratio: 1.4
}

.category-lead .meta {
   margin-top: 0
}

.category-lead p:not(.meta) {
   margin: 20px 0 24px;
   font-size: 18px
}

.guide-welcome {
   display: flex;
   align-items: center;
   gap: 28px;
   background: var(--mint);
   border-radius: var(--radius);
   padding: 24px 32px;
   margin: 36px 0
}

.guide-welcome .mascot {
   width: 124px;
   height: 124px
}

.guide-welcome h2 {
   font-size: 30px
}

.guide-welcome p {
   max-width: 680px
}

.result-count {
   font-size: 14px;
   color: var(--muted);
   margin: 26px 0
}

.guides-grid {
   gap: 44px 36px
}

.guides-grid .story .photo {
   aspect-ratio: 1.9
}

.reading-head {
   max-width: 1000px;
   margin: 46px auto 38px
}

.reading-head h1 {
   font-size: clamp(40px, 4.6vw, 64px);
   max-width: 970px;
   margin: 14px 0 22px
}

.dek {
   font-size: 23px;
   line-height: 1.5;
   max-width: 870px
}

.byline {
   display: flex;
   gap: 14px;
   align-items: center;
   font-size: 14px;
   margin-top: 26px
}

.avatar {
   width: 46px;
   height: 46px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--mint);
   color: var(--forest);
   font-size: 31px;
   font-weight: 700
}

.byline a {
   display: block;
   font-weight: 700;
   text-decoration: none
}

.byline span:not(.avatar) {
   display: block;
   color: var(--muted);
   font-size: 12px;
   margin-top: 2px
}

.article-tools {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.article-tools button {
   margin-top: 26px
}

.text-link.copy-link {
   border: 0;
   background: transparent;
   padding: 5px 0
}

.reading-cover {
   aspect-ratio: 2.12
}

.reading-layout {
   display: grid;
   grid-template-columns: 240px minmax(0, 740px);
   gap: 64px;
   margin-top: 56px;
   justify-content: center
}

.contents {
   align-self: start;
   position: sticky;
   top: 30px;
   padding: 6px 20px 12px 0
}

.contents h2 {
   font-size: 18px;
   margin-bottom: 18px
}

.contents nav {
   display: flex;
   flex-direction: column;
   gap: 16px;
   border-bottom: 1px solid var(--line);
   padding-bottom: 24px;
   margin-bottom: 16px
}

.contents nav a {
   font-size: 14px;
   text-decoration: none
}

.contents nav a:hover {
   text-decoration: underline
}

.prose {
   font-size: 18px;
   line-height: 1.8;
   max-width: 72ch
}

.prose p {
   margin-bottom: 24px
}

.prose .opening {
   font-size: 22px;
   line-height: 1.65;
   color: var(--ink)
}

.prose h2 {
   font-size: 31px;
   margin: 44px 0 20px
}

.prose section:first-of-type h2 {
   margin-top: 32px
}

.prose ul {
   padding-left: 24px
}

.prose li {
   margin-bottom: 12px
}

.reading-note {
   background: var(--mint);
   border-radius: var(--radius);
   padding: 24px 30px;
   margin-top: 40px
}

.prose .reading-note h2 {
   font-size: 25px;
   margin-top: 0
}

.reading-note ul {
   margin-bottom: 0
}

.reading-end {
   margin-top: 36px;
   border-top: 1px solid var(--line);
   padding-top: 24px;
   font-size: 15px
}

.reading-end .copy-link {
   display: flex
}

.author-card {
   display: flex;
   gap: 20px;
   background: var(--cream);
   padding: 28px;
   border-radius: var(--radius);
   margin-top: 44px
}

.author-card h2 {
   font-size: 24px;
   margin: 0 0 12px !important
}

.author-card p {
   font-size: 15px;
   line-height: 1.6;
   margin-bottom: 8px
}

.author-intro {
   display: flex;
   gap: 40px;
   align-items: flex-start;
   padding: 50px 0 20px;
   max-width: 1040px
}

.avatar.large {
   width: 140px;
   height: 140px;
   font-size: 94px
}

.author-intro h1 {
   font-size: 56px
}

.author-intro p {
   font-size: 21px;
   margin-top: 18px
}

.author-intro .author-description {
   font-size: 17px;
   max-width: 680px;
   margin-top: 24px
}

.more-stories {
   margin-top: 36px
}

.more-stories summary {
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 5px;
   cursor: pointer;
   padding: 12px 0
}

.more-stories .story-grid {
   margin-top: 28px
}

.main-search {
   max-width: 920px;
   margin: 30px 0
}

.search-results {
   max-width: 1000px
}

.search-results .story {
   grid-template-columns: 190px 1fr;
   padding: 28px 0;
   border-bottom: 1px solid var(--line)
}

.search-results .photo {
   aspect-ratio: 1.25
}

.search-results .story h3 {
   font-size: 27px
}

.empty-state {
   padding: 36px 20px 50px;
   text-align: center;
   max-width: 740px;
   margin: 0 auto
}

.empty-state .mascot {
   width: 160px;
   height: 160px;
   margin: 0 auto 24px
}

.empty-state h2 {
   font-size: 36px
}

.empty-state p {
   font-size: 19px;
   max-width: 550px;
   margin: 20px auto 28px
}

.empty-state .text-link {
   display: flex;
   justify-content: center;
   margin: 16px auto 0
}

.empty-state .button {
   min-width: 220px
}

.error-state {
   padding: 80px 0
}

.error-state h1 {
   font-size: 52px
}

.error-code {
   font-size: 30px !important;
   font-weight: 700;
   color: var(--forest)
}

.discovery-intro {
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: 50px;
   align-items: center;
   margin: 54px 0 0
}

.discovery-intro .mascot {
   width: 100%;
   height: auto;
   aspect-ratio: 1;
   max-width: 400px;
   justify-self: end
}

.discovery-intro h1 {
   font-size: 68px
}

.discovery-intro .dek {
   margin: 24px 0 18px
}

.discovery-intro p {
   max-width: 620px
}

.discovery-intro .button {
   margin-top: 12px
}

.external-note {
   font-size: 13px !important;
   color: var(--muted);
   margin-top: 16px !important
}

.directory-topics {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px;
   margin-top: 30px
}

.directory-topics a {
   display: block;
   border-bottom: 1px solid var(--line);
   padding-bottom: 22px;
   text-decoration: none
}

.directory-topics p {
   font-size: 16px;
   margin-top: 16px
}

.directory-topics a:hover h3 {
   text-decoration: underline
}

.directory-topics svg {
   margin-top: 12px
}

.swatches {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 20px;
   margin-top: 30px
}

.swatches span {
   display: block;
   aspect-ratio: 1;
   border-radius: 14px;
   border: 1px solid var(--line)
}

.swatches h3 {
   font-size: 20px;
   margin-top: 16px
}

.swatches p {
   font-size: 14px;
   margin-top: 8px
}

.display-sample {
   font-size: 54px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--ink);
   margin: 24px 0
}

.type-samples>p:last-child {
   max-width: 720px;
   font-size: 18px
}

.component-row {
   display: flex;
   gap: 22px;
   align-items: center;
   flex-wrap: wrap;
   margin: 28px 0
}

.mascot-showcase {
   display: flex;
   gap: 50px;
   flex-wrap: wrap;
   margin-top: 28px
}

.mascot-showcase .mascot {
   width: 150px;
   height: 150px
}

.mascot-showcase h3 {
   font-size: 18px;
   margin-top: 20px
}

footer {
   background: var(--ink);
   color: var(--paper);
   padding: 56px max(32px, calc((100vw - 1248px)/2)) 70px
}

.footer-main {
   display: grid;
   grid-template-columns: 1.7fr 1fr 1fr;
   gap: 60px
}

.footer-logo {
   width: 190px;
   height: auto;
   background: var(--paper);
   padding: 8px 12px;
   border-radius: 8px
}

.footer-main p {
   font-size: 15px;
   color: #d9eee0;
   margin-top: 20px
}

.footer-main h2 {
   font-size: 18px;
   color: white;
   margin: 10px 0 20px
}

.footer-main>div>a:not(:first-child) {
   display: block;
   margin: 12px 0
}

.footer-main a {
   font-size: 14px;
   text-decoration: none
}

.footer-main a:hover {
   color: var(--yellow);
   text-decoration: underline
}

.footer-main svg {
   width: 14px;
   height: 14px
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   border-top: 1px solid #47735a;
   margin-top: 40px;
   padding-top: 24px;
   font-size: 12px;
   color: #d9eee0
}

.footer-bottom a:hover {
   color: var(--yellow)
}

.review-note {
   position: static;
   z-index: 10;
   background: #f3eee4;
   border-top: 1px solid #d8cdbb;
   font-family: URW, sans-serif;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 7px 20px;
   color: #514a3b
}

.review-note a {
   display: flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   font-weight: 700
}

.review-note svg {
   width: 16px;
   height: 16px
}

#toast {
   position: fixed;
   left: 50%;
   bottom: 56px;
   transform: translateX(-50%);
   z-index: 20;
   border-radius: 8px;
   background: var(--ink);
   color: white;
   padding: 12px 22px;
   font-size: 14px;
   box-shadow: 0 6px 24px #0002
}

#toast:empty {
   display: none
}

@media(min-width:1500px) {
   .home-intro {
      padding-top: 64px
   }
}

@media(max-width:1150px) {
   .header-inner {
      gap: 22px;
      padding: 24px
   }

   .brand {
      width: 165px
   }

   .desktop-nav {
      gap: 20px;
      padding-left: 22px
   }

   .header-actions {
      gap: 12px
   }

   .country {
      display: none
   }

   .guide-strip {
      flex-wrap: wrap
   }

   .guide-strip h2 {
      flex: 1
   }

   .guide-strip p {
      min-width: 180px;
      max-width: 250px
   }

   .guide-strip .button {
      margin-left: auto
   }

   .guide-list {
      grid-template-columns: 1fr
   }

   .guide-list .story {
      grid-template-columns: 180px 1fr
   }

   .category-entry {
      grid-template-columns: 130px 1fr
   }

   .category-entry h2 {
      font-size: 25px
   }

   .reading-layout {
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 36px
   }

   .directory-strip {
      gap: 20px
   }

   .strip-title h2 {
      font-size: 22px
   }
}

@media(max-width:800px) {
   .header-directory {
      display: none
   }

   .desktop-nav {
      gap: 24px
   }

   .header-inner {
      padding: 20px 24px;
      min-height: 88px
   }

   .header-actions {
      gap: 12px
   }

   .lead-grid {
      grid-template-columns: 1.4fr 1fr;
      gap: 24px
   }

   .lead-story h2 {
      font-size: 32px
   }

   .lead-secondary .story h3 {
      font-size: 23px
   }

   .lead-secondary .story-copy>p:not(.meta) {
      display: none
   }

   .story-grid {
      gap: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .story-grid>.story:last-child:nth-child(odd) {
      grid-column: 1/-1;
      max-width: calc(50% - 12px)
   }

   .guide-strip h2 {
      min-width: 200px
   }

   .guide-strip p {
      display: none
   }

   .community-feature {
      gap: 32px
   }

   .community-feature h2 {
      font-size: 36px
   }

   .category-index {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .category-entry,
   .category-entry:last-child {
      grid-column: auto;
      max-width: none;
      grid-template-columns: 160px 1fr
   }

   .category-lead {
      gap: 28px
   }

   .category-lead h2 {
      font-size: 34px
   }

   .reading-layout {
      display: block
   }

   .contents {
      position: static;
      padding: 24px;
      background: var(--mint);
      border-radius: var(--radius);
      margin-bottom: 36px
   }

   .contents nav {
      border: 0;
      margin: 0;
      padding: 0;
      gap: 12px
   }

   .contents>.text-link {
      display: none
   }

   .prose {
      max-width: none
   }

   .directory-strip {
      align-items: flex-start;
      flex-wrap: wrap
   }

   .directory-strip p {
      min-width: 240px
   }

   .directory-strip>.button {
      margin-left: auto
   }

   .footer-main {
      gap: 30px;
      grid-template-columns: 1.3fr 1fr 1fr
   }

   .swatches {
      grid-template-columns: repeat(3, 1fr)
   }

   .discovery-intro {
      gap: 20px
   }

   .discovery-intro h1 {
      font-size: 52px
   }
}

@media(max-width:600px) {
   body {
      font-size: 16px
   }

   h1 {
      font-size: 42px
   }

   h2 {
      font-size: 29px
   }

   h3 {
      font-size: 24px
   }

   main {
      padding: 0 20px 56px
   }

   .header-inner {
      padding: 16px 20px;
      min-height: 84px;
      gap: 12px
   }

   .brand {
      width: 153px
   }

   .desktop-nav {
      display: none
   }

   .menu-toggle {
      display: flex;
      background: transparent
   }

   .header-actions {
      gap: 8px
   }

   .icon-button {
      width: 44px;
      height: 44px
   }

   .header-search {
      padding: 8px 20px 24px
   }

   .search-line {
      gap: 8px
   }

   .search-line input {
      font-size: 15px;
      padding: 12px;
      width: 100%
   }

   .search-line .button {
      padding: 12px 16px;
      gap: 8px
   }

   .search-line .button svg {
      display: none
   }

   .home-intro {
      padding-top: 34px
   }

   .home-intro h1 {
      font-size: 43px;
      max-width: 350px;
      line-height: 1.06
   }

   .home-intro>p {
      font-size: 18px;
      line-height: 1.5;
      margin-top: 18px
   }

   .topic-nav {
      gap: 0;
      justify-content: space-between;
      margin: 28px 0 24px;
      padding-bottom: 18px;
      flex-wrap: wrap;
      row-gap: 16px
   }

   .topic-nav a {
      font-size: 13px;
      margin-right: 12px
   }

   .topic-nav a:last-child {
      margin-right: 0
   }

   .lead-grid {
      display: block
   }

   .lead-story .photo {
      aspect-ratio: 1.38
   }

   .lead-story h2 {
      font-size: 31px;
      margin-top: 8px
   }

   .lead-story>p:not(.meta) {
      font-size: 16px;
      margin: 14px 0 8px
   }

   .meta {
      font-size: 12px;
      margin-top: 14px
   }

   .lead-secondary {
      gap: 0;
      margin-top: 28px
   }

   .lead-secondary .story {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 16px;
      border-top: 1px solid var(--line);
      padding: 22px 0
   }

   .lead-secondary .photo {
      aspect-ratio: 1
   }

   .lead-secondary .meta {
      margin-top: 0;
      font-size: 12px
   }

   .lead-secondary .story h3 {
      font-size: 22px
   }

   .lead-secondary .story-copy>p:not(.meta) {
      display: none
   }

   .lead-secondary .text-link {
      font-size: 13px;
      min-height: 36px
   }

   .guide-strip {
      margin-top: 26px;
      padding: 16px 12px;
      gap: 12px;
      flex-wrap: nowrap
   }

   .guide-strip .mascot {
      width: 70px;
      height: 70px
   }

   .guide-strip h2 {
      font-size: 23px;
      min-width: 0;
      flex: 1;
      line-height: 1.15
   }

   .guide-strip h2 br {
      display: none
   }

   .guide-strip .button {
      padding: 10px;
      min-width: 44px;
      min-height: 44px;
      font-size: 0;
      gap: 0;
      margin: 0;
      flex: none
   }

   .guide-strip .button svg {
      width: 20px
   }

   .guide-strip p {
      display: none
   }

   .section {
      margin-top: 50px
   }

   .section-heading {
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 22px
   }

   .section-heading h2 {
      font-size: 29px
   }

   .section-heading .text-link {
      font-size: 13px;
      min-height: 28px
   }

   .story-grid,
   .story-grid.two {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .story-grid>.story:last-child:nth-child(odd) {
      grid-column: auto;
      max-width: none
   }

   .story-grid .photo {
      aspect-ratio: 1.65
   }

   .story h3 {
      font-size: 26px
   }

   .story-copy>p:not(.meta) {
      font-size: 16px
   }

   .community-feature {
      display: flex;
      flex-direction: column;
      gap: 26px;
      margin-top: 50px;
      align-items: stretch
   }

   .community-feature .photo {
      aspect-ratio: 1.55
   }

   .community-feature h2 {
      font-size: 36px
   }

   .community-feature p {
      font-size: 16px;
      margin: 20px 0
   }

   .guide-list {
      gap: 22px
   }

   .guide-list .story,
   .compact {
      grid-template-columns: 104px 1fr;
      gap: 16px
   }

   .compact .photo {
      aspect-ratio: 1
   }

   .compact h3 {
      font-size: 22px
   }

   .compact .story-copy>p:not(.meta) {
      display: none
   }

   .compact .meta {
      font-size: 12px
   }

   .compact .text-link {
      font-size: 13px
   }

   .directory-strip {
      margin-top: 46px;
      padding: 24px;
      display: block
   }

   .strip-title {
      gap: 14px
   }

   .strip-title h2 {
      font-size: 25px
   }

   .directory-strip p {
      min-width: 0;
      margin: 18px 0 22px
   }

   .directory-strip>.button {
      width: 100%
   }

   .breadcrumbs {
      padding-top: 24px;
      font-size: 12px;
      gap: 8px
   }

   .breadcrumbs [aria-current] {
      max-width: 250px
   }

   .page-intro {
      margin: 32px 0 28px
   }

   .page-intro h1 {
      font-size: 40px
   }

   .page-intro p {
      font-size: 18px;
      margin-top: 18px
   }

   .category-index {
      margin-top: 32px;
      gap: 26px
   }

   .category-entry,
   .category-entry:last-child {
      grid-template-columns: 105px 1fr;
      gap: 18px;
      padding-bottom: 26px;
      align-items: start
   }

   .category-entry h2 {
      font-size: 25px
   }

   .category-entry p {
      font-size: 14px;
      margin-top: 10px
   }

   .category-entry .text-link {
      font-size: 13px;
      min-height: 36px
   }

   .quiet-prompt {
      margin-top: 48px;
      padding: 26px
   }

   .quiet-prompt h2 {
      font-size: 29px
   }

   .filter-nav {
      gap: 8px;
      margin: 26px 0
   }

   .filter-nav a,
   .filter-nav button {
      font-size: 12px;
      padding: 9px 12px;
      min-height: 42px
   }

   .category-lead {
      display: block;
      margin-top: 28px
   }

   .category-lead>.photo {
      aspect-ratio: 1.5;
      margin-bottom: 22px
   }

   .category-lead h2 {
      font-size: 32px
   }

   .category-lead p:not(.meta) {
      font-size: 16px
   }

   .guide-welcome {
      padding: 18px 16px;
      gap: 16px
   }

   .guide-welcome .mascot {
      width: 84px;
      height: 84px
   }

   .guide-welcome h2 {
      font-size: 25px
   }

   .guide-welcome p {
      font-size: 14px;
      margin-top: 12px
   }

   .guides-grid .story .photo {
      aspect-ratio: 1.65
   }

   .reading-head {
      margin: 32px 0 28px
   }

   .reading-head h1 {
      font-size: 40px;
      line-height: 1.08;
      margin: 14px 0 20px
   }

   .dek {
      font-size: 19px
   }

   .article-tools {
      align-items: flex-start;
      gap: 12px
   }

   .article-tools .copy-link {
      font-size: 0;
      gap: 0;
      min-width: 44px;
      justify-content: center
   }

   .article-tools .copy-link svg {
      width: 21px
   }

   .byline {
      margin-top: 24px;
      font-size: 13px;
      gap: 12px
   }

   .byline span:not(.avatar) {
      font-size: 12px
   }

   .avatar {
      width: 40px;
      height: 40px;
      font-size: 27px
   }

   .reading-cover {
      aspect-ratio: 1.45
   }

   .reading-layout {
      margin-top: 30px
   }

   .contents {
      padding: 22px;
      margin-bottom: 30px
   }

   .contents h2 {
      font-size: 18px
   }

   .contents nav a {
      font-size: 14px;
      min-height: 28px
   }

   .prose {
      font-size: 17px;
      line-height: 1.8
   }

   .prose .opening {
      font-size: 20px
   }

   .prose h2 {
      font-size: 28px;
      margin-top: 36px
   }

   .prose p {
      margin-bottom: 22px
   }

   .reading-note {
      padding: 22px
   }

   .prose .reading-note h2 {
      font-size: 24px
   }

   .author-card {
      padding: 22px;
      gap: 14px
   }

   .author-card h2 {
      font-size: 23px
   }

   .author-card p {
      font-size: 14px
   }

   .reading-end {
      font-size: 14px
   }

   .author-intro {
      gap: 22px;
      display: block;
      padding-top: 32px
   }

   .avatar.large {
      width: 82px;
      height: 82px;
      font-size: 56px;
      margin-bottom: 24px
   }

   .author-intro h1 {
      font-size: 40px
   }

   .author-intro p {
      font-size: 19px
   }

   .author-intro .author-description {
      font-size: 16px
   }

   .main-search {
      margin: 28px 0
   }

   .main-search label {
      font-size: 14px
   }

   .search-results .story {
      grid-template-columns: 90px 1fr;
      gap: 16px;
      padding: 24px 0
   }

   .search-results .photo {
      aspect-ratio: 1
   }

   .search-results .story h3 {
      font-size: 23px
   }

   .search-results .meta {
      font-size: 12px
   }

   .empty-state {
      padding: 28px 0 40px
   }

   .empty-state .mascot {
      width: 128px;
      height: 128px
   }

   .empty-state h2 {
      font-size: 32px
   }

   .empty-state p {
      font-size: 17px
   }

   .error-state {
      padding: 52px 0
   }

   .error-state h1 {
      font-size: 38px
   }

   .discovery-intro {
      display: flex;
      flex-direction: column;
      margin-top: 36px;
      gap: 26px;
      align-items: stretch
   }

   .discovery-intro h1 {
      font-size: 46px
   }

   .discovery-intro .mascot {
      width: 190px;
      height: 190px;
      align-self: center;
      order: -1;
      max-width: none
   }

   .discovery-intro .dek {
      font-size: 21px;
      margin-top: 20px
   }

   .discovery-intro .button {
      font-size: 14px;
      width: 100%
   }

   .directory-topics {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 28px
   }

   .directory-topics h3 {
      font-size: 25px
   }

   .swatches {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px
   }

   .swatches h3 {
      font-size: 19px
   }

   .display-sample {
      font-size: 38px
   }

   .mascot-showcase {
      gap: 30px
   }

   .mascot-showcase .mascot {
      width: 110px;
      height: 110px
   }

   .mascot-showcase h3 {
      font-size: 17px
   }

   .component-row {
      gap: 16px
   }

   .footer-main {
      grid-template-columns: 1fr 1fr;
      gap: 30px 24px
   }

   .footer-main>div:first-child {
      grid-column: 1/-1
   }

   .footer-main h2 {
      font-size: 16px
   }

   .footer-main a {
      font-size: 13px
   }

   .footer-logo {
      width: 160px
   }

   footer {
      padding: 40px 24px 84px
   }

   .footer-bottom {
      display: block;
      font-size: 12px;
      margin-top: 30px
   }

   .footer-bottom a {
      display: block;
      margin-top: 18px
   }

   .review-note {
      font-size: 12px;
      gap: 10px;
      padding: 7px 12px
   }

   .review-note span {
      max-width: 220px
   }

   .review-note a {
      font-size: 12px;
      white-space: nowrap
   }

   .review-note svg {
      width: 13px;
      height: 13px
   }

   #toast {
      max-width: 90%;
      font-size: 13px;
      text-align: center;
      bottom: 58px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   * {
      transition: none !important
   }
}

@media print {

   header,
   .review-note,
   .contents,
   footer,
   .copy-link {
      display: none
   }

   main {
      padding: 0;
      max-width: none
   }

   .reading-layout {
      display: block
   }

   .photo {
      print-color-adjust: exact
   }

   .section {
      break-inside: avoid
   }

   .prose {
      max-width: none
   }
}

.clear-search {
   border: 0;
   background: transparent;
   padding: 10px 16px;
   min-height: 44px;
   border-radius: 8px;
   color: var(--ink)
}

.clear-search:hover {
   background: var(--mint);
   text-decoration: underline
}

/* Center each photo cell independently, preserving its proportions at every ratio. */
.photo {
   position: relative;
   overflow: hidden;
   background-image: none
}

.photo:before {
   content: "";
   position: absolute;
   width: 100%;
   aspect-ratio: 1;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   background-image: url("assets/editorial.png");
   background-size: 200% 200%;
   background-repeat: no-repeat;
   background-position: var(--photo-position)
}

.photo-cafe {
   --photo-position: left top
}

.photo-brussels {
   --photo-position: right top
}

.photo-market {
   --photo-position: left bottom
}

.photo-atomium {
   --photo-position: right bottom
}

/* ---------------------------------------------------------------
   Ajustes do tema WordPress
   --------------------------------------------------------------- */

/* Imagem destacada reaproveitando o enquadramento dos cards. */
.photo.has-image:before {
   background-image: var(--ehb-photo);
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 100%;
   aspect-ratio: auto;
   top: 0;
   transform: none
}

/* Logos: o WordPress emite width/height, então a altura precisa voltar a ser automática. */
.brand img,.footer-logo,img.custom-logo{height:auto}

/* Conteúdo de páginas simples. */
.page-prose {
   max-width: 820px;
   margin: 36px auto 0
}

/* Paginação. */
.ehb-pagination {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 48px 0 0
}

.ehb-pagination .page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   padding: 10px 16px;
   border: 1px solid var(--line);
   border-radius: 8px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 700
}

.ehb-pagination .page-numbers:hover {
   border-color: var(--forest)
}

.ehb-pagination .page-numbers.current {
   background: var(--forest);
   color: #fff;
   border-color: var(--forest)
}

.ehb-pagination .dots {
   border-color: transparent
}

/* Blocos e mídia do editor. */
.prose img,
.prose figure,
.prose iframe,
.prose video {
   max-width: 100%;
   height: auto;
   border-radius: var(--radius)
}

.prose figure {
   margin: 28px 0
}

.prose figcaption,
.wp-caption-text {
   font-size: 14px;
   color: var(--muted);
   margin-top: 10px
}

.prose blockquote {
   margin: 28px 0;
   padding-left: 24px;
   border-left: 3px solid var(--forest);
   font-size: 19px
}

.prose ul,
.prose ol {
   margin: 0 0 22px 22px
}

.prose li {
   margin-bottom: 10px
}

.prose table {
   width: 100%;
   border-collapse: collapse;
   margin: 28px 0
}

.prose th,
.prose td {
   border-bottom: 1px solid var(--line);
   padding: 12px 8px;
   text-align: left
}

.alignleft {
   float: left;
   margin: 0 24px 20px 0
}

.alignright {
   float: right;
   margin: 0 0 20px 24px
}

.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto
}

.alignwide,
.alignfull {
   max-width: none
}

.screen-reader-text {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

/* Comentários. */
.ehb-comments {
   max-width: 820px;
   margin: 72px auto 0
}

.ehb-comments h2 {
   font-size: 29px;
   margin-bottom: 24px
}

.ehb-comments ol {
   list-style: none;
   margin: 0;
   padding: 0
}

.ehb-comments .comment-body {
   border-bottom: 1px solid var(--line);
   padding: 22px 0
}

.ehb-comments .children {
   margin-left: 28px
}

.ehb-comments input[type=text],
.ehb-comments input[type=email],
.ehb-comments input[type=url],
.ehb-comments textarea {
   width: 100%;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 12px;
   font: inherit
}

/* Widgets do rodapé. */
.ehb-footer-widgets {
   max-width: 1312px;
   margin: 0 auto;
   padding: 0 32px 48px
}