/*
Theme Name: Media Brazil
Theme URI: https://mediabrazil.jp
Author: Media Brazil
Description: Tema customizado do site institucional da Media Brazil, baseado no mockup site2026 (paleta verde extraída do logo + amarelo de acento).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mediabrazil
*/

:root{
  --green-950:#122318;
  --green-800:#1f3d2b;
  --green-600:#33613f;
  --green-500:#457a52;
  --green-300:#8fb897;
  --green-100:#e9f2ea;
  --green-050:#f4f8f4;
  --ink:#15181a;
  --muted:#5b6560;
  --line:#e2e8e2;
  --paper:#ffffff;
  --amber:#f0b429;
  --maxw:1180px;
  --serif:"Georgia","Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0 0 .4em;color:var(--green-950)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);font-weight:700;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber)}
.lead{font-size:19px;color:var(--muted);max-width:60ch}
.jp{font-size:13px;color:var(--muted);font-weight:400}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
/* 4 real columns: logo | menu | idioma | redes sociais. nav-toggle (hambúrguer)
   is display:none on desktop so it's excluded from grid placement entirely -
   only the 4 visible children ever occupy the 4 declared tracks. */
header.site .bar{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;
  padding:16px 24px;max-width:var(--maxw);margin:0 auto;
}
header.site .logo{display:flex;align-items:center;gap:10px}
header.site .logo img{height:30px;width:auto}
/* flex-end (not center) so the menu sits right up against the idioma column -
   that's what makes PT|日本語 read as centered between menu and redes sociais,
   with equal gaps on both sides, instead of floating in whatever empty space
   center-alignment left inside the 1fr track. */
nav.main{display:flex;align-items:center;justify-content:flex-end;gap:34px}
nav.main a{
  font-size:14px;font-weight:600;color:var(--green-950);
  display:flex;align-items:center;
  padding:4px 0;position:relative;
}
nav.main a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--amber);transform:scaleX(0);transition:transform .2s;
}
nav.main a:hover::after,nav.main a.active::after,nav.main a.current-menu-item::after{transform:scaleX(1)}
.lang-toggle{
  display:flex;gap:6px;font-size:12px;font-weight:700;color:var(--muted);
}
.lang-toggle a{cursor:pointer;color:var(--muted)}
.lang-toggle a.active,.lang-toggle span.active{color:var(--green-950)}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;color:var(--green-950);
  width:40px;height:40px;align-items:center;justify-content:center;
  font-size:20px;border-radius:50%;transition:background .15s ease;flex:none;
}
.nav-toggle:hover{background:var(--green-100)}

@media (max-width:860px){
  /* grid auto-placement gets unpredictable once nav.main (fixed) and
     lang-toggle/social-icons (display:none) drop out of flow - revert to a
     plain 2-item flex row (logo, hamburger) instead of fighting the grid. */
  header.site .bar{display:flex;justify-content:space-between;padding:12px 20px}
  /* backdrop-filter on an ancestor creates a new containing block for any
     position:fixed descendant (same rule as transform/perspective) - with it
     left on, nav.main's "inset:65px 0 0 0" resolves against header.site's
     own ~65px-tall box instead of the viewport, so it never actually moves
     off-screen and ends up mangling the header instead (this was the real
     mobile-menu bug, confirmed from Fabiano's screenshot - not cache). Drop
     the blur here so nav.main goes back to being fixed to the viewport, like
     it's supposed to. */
  header.site{backdrop-filter:none}
  nav.main{
    position:fixed;inset:65px 0 0 0;background:var(--paper);z-index:39;
    flex-direction:column;justify-content:flex-start;padding:32px 24px;gap:8px;
    transform:translateY(-110%);transition:transform .25s ease;border-top:1px solid var(--line);
  }
  nav.main.open{transform:translateY(0)}
  nav.main a{
    gap:8px;font-size:18px;padding:14px 4px;width:100%;
    border-bottom:1px solid var(--line);
  }
  nav.main a::after{display:none}
  .nav-toggle{display:flex}
  body.nav-open{overflow:hidden}
}

/* ---------- hero ---------- */
/* fixed 1920x680 banner size, per Fabiano's spec - caps/centers on screens
   wider than 1920px, fixed 680px tall on any width down to the mobile
   breakpoint below (a flat 680px would be very tall relative to a phone's
   own width, so it steps down there - see @media block). */
.hero{
  position:relative;overflow:hidden;
  background:var(--green-950);
  color:#fff;
  width:100%;max-width:1920px;height:480px;margin:0 auto;
  display:flex;align-items:center;
}
.hero .hero-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(100deg,rgba(18,35,24,.92),rgba(18,35,24,.55) 55%,rgba(18,35,24,.3)),url(/wp-content/uploads/2026/08/bandeira-br-jp.png);
  background-size:cover;background-position:center 60%;
  filter:saturate(.75) contrast(1.05);
}
.hero .content{position:relative;padding:0 24px;max-width:var(--maxw);margin:0 auto;width:100%}
.hero .eyebrow{color:var(--green-300)}
.hero .eyebrow::before{background:var(--amber)}
.hero h1{
  color:#fff;font-size:clamp(28px,3.8vw,42px);line-height:1.15;max-width:16ch;margin-bottom:.35em;
}
.hero p.lead{color:#d8e3da;font-size:16px;max-width:62ch}
.hero .actions{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
@media (max-width:760px){
  .hero{height:auto;display:block;padding:34px 0 30px}
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:2px;font-weight:700;font-size:14px;
  letter-spacing:.02em;border:1px solid transparent;transition:.15s;
}
.btn.primary{background:var(--amber);color:var(--green-950)}
.btn.primary:hover{background:#e0a51e}
.btn.ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.dark{background:var(--green-950);color:#fff}
.btn.dark:hover{background:var(--green-800)}

/* ---------- sections ---------- */
section{padding:96px 0}
section.tight{padding:64px 0}
section.alt{background:var(--green-050)}
.section-head{max-width:640px;margin-bottom:56px}
.section-head h2{font-size:clamp(26px,3.4vw,38px)}

/* stat strip */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stats .stat{padding:36px 24px;text-align:center;border-left:1px solid var(--line)}
.stats .stat:first-child{border-left:none}
.stats .stat strong{display:block;font-family:var(--serif);font-size:40px;color:var(--green-800)}
.stats .stat span{font-size:13px;color:var(--muted)}

/* portfolio grid on home */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,35,24,.1)}
/* fixed 4:3 box keeps every card the same size regardless of the source
   photo's own proportions (the revista cover is a tall portrait scan, the
   festival photo is landscape...). object-fit:contain (not cover) so the
   whole image always shows - cover was cropping the top/bottom off the
   portrait ones instead of just letterboxing them. */
.card .thumb{
  aspect-ratio:4/3;overflow:hidden;background:var(--green-100);
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .body{padding:22px}
.card .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);font-weight:700}
.card h3{font-size:18px;margin:.4em 0}
.card p{font-size:14px;color:var(--muted);margin:0}

/* clients strip */
.clients{
  display:flex;flex-wrap:wrap;gap:22px 34px;align-items:center;justify-content:space-between;
}
.clients span{
  font-family:var(--serif);font-size:18px;color:var(--green-800);opacity:.75;white-space:nowrap;
}
.clients img{
  height:32px;width:auto;max-width:130px;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:opacity .2s ease,filter .2s ease;
}
.clients img:hover{filter:grayscale(0);opacity:1}

/* cta band — amber on purpose: sits directly above the footer, which uses
   the same dark green as this band used to, so the two blocks merged into
   one with no visible seam. Amber both breaks that up and makes the CTA
   itself more prominent, which is what a CTA should be anyway. */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--amber);color:var(--green-950);padding:72px 24px;
}
.cta-band::before{
  content:"";position:absolute;top:-70px;right:-70px;width:280px;height:280px;
  border-radius:50%;background:rgba(18,35,24,.07);
}
.cta-band::after{
  content:"";position:absolute;bottom:-100px;left:12%;width:200px;height:200px;
  border-radius:50%;border:2px solid rgba(18,35,24,.12);
}
.cta-inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.cta-band .eyebrow{color:var(--green-800)}
.cta-band .eyebrow::before{background:var(--green-950)}
.cta-band h2{color:var(--green-950);margin-bottom:.3em}
.cta-band p{color:var(--green-800);max-width:46ch;margin:0}
.cta-band .btn{flex:none}
@media (max-width:760px){
  .cta-inner{flex-direction:column;align-items:flex-start}
}

/* footer */
footer.site{background:var(--green-950);color:#c9d6cc;padding:56px 0 28px;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
footer.site h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--sans);margin-bottom:16px}
footer.site .logo img{height:26px;margin-bottom:14px}
footer.site a{opacity:.85}
footer.site a:hover{opacity:1;text-decoration:underline}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
footer.site .bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:12px;opacity:.7;flex-wrap:wrap;gap:8px}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}

/* social icons — shared between header and footer */
.social-icons{display:flex;gap:10px}
.social-icons a{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-100);color:var(--green-800);
  transition:background .15s ease,color .15s ease;
}
.social-icons a:hover{background:var(--green-800);color:#fff}
.social-icons svg{width:14px;height:14px;fill:currentColor}
@media (max-width:860px){
  header.site .social-icons{display:none}
  /* seletor de idioma fica visível no mobile, do lado do hamburguer (não some
     mais como o resto do header) - margin-left:auto empurra o par pra direita,
     order garante que ele venha antes do hamburguer na ordem visual mesmo
     vindo depois dele no HTML. */
  header.site .lang-toggle{display:flex;order:2;margin-left:auto}
  header.site .nav-toggle{order:3}
  header.site .bar{gap:10px;align-items:center}
}
footer.site .social-icons{margin-top:18px}
footer.site .social-icons a{background:rgba(255,255,255,.1);color:#fff}
footer.site .social-icons a:hover{background:var(--amber);color:var(--green-950)}

/* ---------- portfolio page ---------- */
.pf-item{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
  padding:64px 0;border-bottom:1px solid var(--line);
}
.pf-item:last-child{border-bottom:none}
.pf-item.reverse{grid-template-columns:1.1fr .9fr}
.pf-item.reverse .pf-media{order:2}
.pf-media img{border-radius:2px;box-shadow:0 24px 48px rgba(18,35,24,.14)}
.pf-media.shot img{border:1px solid var(--line)}
.pf-num{font-family:var(--serif);font-size:15px;color:var(--green-300);margin-bottom:8px;display:block}
.pf-item h2{font-size:28px}
.pf-item .links{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.pf-item .links a{font-size:13px;font-weight:700;color:var(--green-600);border-bottom:1px solid var(--green-300);padding-bottom:2px}
.pf-item .links a:hover{color:var(--green-800);border-color:var(--green-800)}
@media (max-width:860px){
  .pf-item,.pf-item.reverse{grid-template-columns:1fr}
  .pf-item.reverse .pf-media{order:0}
}

.press-clip{
  display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line);
}
.press-clip:last-child{border-bottom:1px solid var(--line)}
.press-clip .outlet{
  flex:0 0 130px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-600);font-weight:700;padding-top:3px;
}
.press-clip a{font-size:15px;font-weight:600}
.press-clip a:hover{color:var(--green-600)}

.press-photos{display:flex;flex-direction:column;gap:16px}
.press-photo-placeholder{
  aspect-ratio:16/10;border-radius:2px;border:1px dashed var(--line);
  background:var(--green-050);display:flex;align-items:center;justify-content:center;
}
.press-photo-label{font-size:12px;font-weight:700;color:var(--green-300);letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:0 12px}

/* ---------- empresa page ---------- */
.info-table{width:100%;border-collapse:collapse}
.info-table tr{border-top:1px solid var(--line)}
.info-table tr:last-child{border-bottom:1px solid var(--line)}
.info-table th,.info-table td{
  text-align:left;padding:18px 0;vertical-align:top;font-weight:400;
}
.info-table th{
  width:220px;color:var(--green-600);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;padding-right:24px;
}
.info-table td{white-space:pre-line}
.lang-panels{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:900px){.lang-panels{grid-template-columns:1fr}}
.lang-panel h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);font-family:var(--sans);font-weight:700;margin-bottom:20px}

.client-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 40px;list-style:none;padding:0;margin:0}
.client-list li{padding:14px 0;border-top:1px solid var(--line);font-family:var(--serif);font-size:17px;color:var(--green-800)}
@media (max-width:600px){.client-list{grid-template-columns:1fr}}

/* ---------- contato ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
.field{margin-bottom:22px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:2px;padding:14px 16px;
  font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--green-300);outline-offset:1px}
.field textarea{resize:vertical;min-height:140px}
.contact-info .item{display:flex;gap:14px;margin-bottom:24px}
.contact-info .item .ic{
  flex:0 0 40px;height:40px;border-radius:50%;background:var(--green-100);
  display:flex;align-items:center;justify-content:center;color:var(--green-600);
}
.contact-info .item h4{margin:0 0 4px;font-size:15px;font-family:var(--sans);font-weight:700;color:var(--ink)}
.contact-info .item p{margin:0;color:var(--muted);font-size:14px}
.form-msg{padding:14px 16px;border-radius:2px;font-size:14px;margin-bottom:22px}
.form-msg.ok{background:var(--green-100);color:var(--green-800)}
.form-msg.err{background:#fbeaea;color:#a33}

/* page hero (inner pages) — same dark + BR/JP flag treatment as the home
   hero, shorter, so every page opens with the same visual signature. */
.page-hero{position:relative;overflow:hidden;background:var(--green-950)}
.page-hero .hero-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(100deg,rgba(18,35,24,.93),rgba(18,35,24,.6) 65%),url(/wp-content/uploads/2026/08/bandeira-br-jp.png);
  background-size:cover;background-position:center 65%;
  filter:saturate(.6) contrast(1.05);
}
.page-hero .wrap{position:relative;padding:56px 24px 48px}
.page-hero .eyebrow{color:var(--green-300)}
.page-hero h1{color:#fff;font-size:clamp(28px,4vw,42px);line-height:1.15;max-width:22ch}

/* ---------- notícias (listagem, home.php / posts page) ---------- */
.news-layout{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.news-archive{background:var(--green-050);border-radius:6px;padding:24px;position:sticky;top:100px}
.news-archive h3{font-size:14px;margin:0 0 14px;color:var(--green-950)}
.archive-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.archive-list a{display:flex;justify-content:space-between;gap:8px;padding:9px 0;font-size:13px;color:var(--green-800);border-top:1px solid var(--green-100)}
.archive-list li:first-child a{border-top:none}
.archive-list a span{color:var(--muted);font-weight:400}
.archive-list a:hover,.archive-list a.active{color:var(--green-600);font-weight:700}
.news-main{min-width:0}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.news-empty{color:var(--muted);padding:24px 0}
@media (max-width:900px){
  .news-layout{grid-template-columns:1fr}
  .news-archive{position:static;order:-1}
  .archive-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .archive-list a{border-top:none;background:#fff;border-radius:999px;padding:6px 14px;}
  .news-grid{grid-template-columns:1fr}
}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column;
}
.news-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,35,24,.1)}
.news-card .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--green-100)}
.news-card .thumb img{width:100%;height:100%;object-fit:cover}
.news-card .body{padding:22px;display:flex;flex-direction:column;flex:1}
.news-card .meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.news-card .cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);font-weight:700}
.news-card .date{font-size:12px;color:var(--muted)}
.news-card h3{font-size:17px;margin:0 0 .5em;line-height:1.35}
.news-card p{font-size:14px;color:var(--muted);margin:0 0 16px;flex:1}
.news-card .readmore{font-size:13px;font-weight:700;color:var(--green-600)}
.news-card .readmore:hover{color:var(--green-800)}

/* ---------- notícia (post único, single.php) ---------- */
.post-article{max-width:760px;margin:0 auto}
.post-back{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--green-600);margin-bottom:28px;
}
.post-back:hover{color:var(--green-800)}
.post-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.post-meta .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);font-weight:700}
.post-meta .date{font-size:13px;color:var(--muted)}
.post-article h1{font-size:clamp(26px,4vw,38px);line-height:1.25;margin-bottom:.5em}
.post-hero-img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;
  margin-bottom:36px;box-shadow:0 24px 48px rgba(18,35,24,.14);
}
.post-article .lead{font-size:18px;color:var(--muted);margin-bottom:8px}
.post-article p{margin:0 0 20px;color:var(--ink);line-height:1.85}
.post-article p:last-child{margin-bottom:0}