/*
Theme Name: Instituto Thereza Tosta
Theme URI: https://institutotherezatosta.org
Author: Instituto Thereza Tosta
Author URI: https://institutotherezatosta.org
Description: Tema de doacao do Instituto Thereza Tosta - pagina unica de captacao de doacoes (oficinas, reforco escolar, acolhimento) em Campo Grande, Rio de Janeiro.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
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: itt
*/

:root{
  --background:#fefdf9;
  --foreground:#23252e;
  --card:#ffffff;
  --card-foreground:#23252e;
  --primary:#f5c518;
  --primary-foreground:#2a2d3a;
  --secondary:#2a8fd6;
  --secondary-foreground:#fefdf9;
  --muted:#f4f3ee;
  --muted-foreground:#6b6e78;
  --accent:#f5c518;
  --accent-foreground:#2a2d3a;
  --border:#e8e6df;
  --radius:14px;
  --shadow-warm:0 20px 60px -20px rgba(214,150,30,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--background);
  color:var(--foreground);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.container{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.container-xs{max-width:56rem;margin:0 auto;padding:0 1.5rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;border:none;cursor:pointer;border-radius:9999px;transition:all .2s;font-size:1rem}
.btn svg{width:1.25rem;height:1.25rem}
.btn-sm{padding:.625rem 1.25rem;font-size:.875rem}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--secondary);color:#fff}
.btn-secondary:hover{opacity:.9}
.btn-hero{background:var(--primary);color:#fff;padding:1rem 1.75rem;box-shadow:var(--shadow-warm)}
.btn-hero:hover{transform:scale(1.05)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);padding:1rem 1.75rem;font-weight:600;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}

/* header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(254,253,249,.8);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:.5rem}
.brand .logo{width:2.25rem;height:2.25rem;border-radius:9999px;background:var(--primary);display:flex;align-items:center;justify-content:center}
.brand .logo svg{width:1.25rem;height:1.25rem;color:var(--primary-foreground)}
.brand span{font-weight:700;letter-spacing:-.01em}

/* hero */
.hero{position:relative;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg .overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(40,40,70,.55),rgba(40,40,70,.45),rgba(40,40,70,.8))}
.hero .content{position:relative;max-width:72rem;margin:0 auto;padding:7rem 1.5rem;text-align:center}
.badge{display:inline-block;padding:.375rem 1rem;border-radius:9999px;background:var(--primary);color:var(--primary-foreground);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.5rem}
.hero h1{font-size:2.5rem;font-weight:900;color:#fff;line-height:1.05;max-width:56rem;margin:0 auto}
.hero p{margin:1.5rem auto 0;font-size:1.125rem;color:rgba(255,255,255,.9);max-width:42rem;text-align:justify}
.hero .actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* sections */
.section{padding:5rem 0}
.section-yellow{background:var(--primary);color:var(--primary-foreground);padding:4rem 0}
.section-muted{background:var(--muted)}
.section h2{font-weight:700;text-align:center}
.eyebrow{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--secondary)}
.text-secondary{color:var(--secondary)}
.justify{text-align:justify}

.section-yellow h2{font-size:1.875rem;margin-bottom:1.5rem}
.section-yellow p{font-size:1.125rem;line-height:1.7;opacity:.9;text-align:justify}

.intro h2{font-size:1.875rem;color:var(--secondary);margin-bottom:1.5rem}
.intro .body{display:flex;flex-direction:column;gap:1.25rem;font-size:1.125rem;line-height:1.7;color:rgba(35,37,46,.85);text-align:justify}

/* activities */
.activities .head{text-align:center;margin-bottom:4rem}
.activities .head h2{font-size:1.875rem;margin-top:.5rem}
.grid-activities{display:grid;gap:2.5rem}
.activity{background:var(--card);border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.activity.split{display:grid;gap:2rem;align-items:stretch}
.activity .media{overflow:hidden;background:var(--muted)}
.activity .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.activity:hover .media img{transform:scale(1.05)}
.activity .full-media img{width:100%;height:auto;object-fit:contain}
.activity .body{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.icon-box{display:inline-flex;width:3rem;height:3rem;border-radius:16px;background:var(--primary);align-items:center;justify-content:center;margin-bottom:1rem}
.icon-box svg{width:1.5rem;height:1.5rem;color:var(--primary-foreground)}
.activity h3{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--secondary);text-align:center}
.activity .body p{color:rgba(35,37,46,.8);line-height:1.7;text-align:justify}
.activities .note{text-align:center;margin-top:3rem;font-size:1.125rem;font-weight:600;color:var(--secondary)}

/* donate */
.donate{background:var(--secondary);color:var(--secondary-foreground)}
.donate .head{text-align:center;margin-bottom:3.5rem}
.donate .head .eyebrow{color:var(--primary)}
.donate .head h2{font-size:2.25rem;font-weight:900;margin-top:.75rem}
.donate .head p{margin:1.5rem auto 0;font-size:1.125rem;opacity:.9;max-width:42rem;text-align:justify}
.donate-grid{display:grid;gap:1.5rem}
.dcard{border-radius:24px;padding:2rem;display:flex;flex-direction:column;position:relative;overflow:hidden}
.dcard.light{background:var(--card);color:var(--card-foreground)}
.dcard.gold{background:var(--primary);color:var(--primary-foreground)}
.dcard h3{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.dcard p{margin-bottom:1.5rem;flex:1;text-align:justify}
.dcard.light p{color:rgba(35,37,46,.7)}
.dcard.gold p{opacity:.9}
.dcard .ic{width:3rem;height:3rem;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.dcard .ic svg{width:1.5rem;height:1.5rem}
.dcard.light .ic{background:var(--primary)}
.dcard.light .ic svg{color:var(--primary-foreground)}
.dcard.gold .ic{background:var(--secondary)}
.dcard.gold .ic svg{color:var(--secondary-foreground)}
.tag{position:absolute;top:1.25rem;right:1.25rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--secondary);color:#fff;padding:.25rem .75rem;border-radius:9999px}
.dcard .btn{justify-content:center;padding:.875rem 1.5rem}
.dcard-wide{margin-top:1.5rem;background:var(--card);color:var(--card-foreground);border-radius:24px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem}
.dcard-wide h3{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}
.dcard-wide .pix{display:block;background:var(--muted);padding:.75rem 1rem;border-radius:12px;font-family:ui-monospace,monospace;font-size:.875rem;word-break:break-all}
.dcard-accent{margin-top:1.5rem;background:var(--accent);color:var(--accent-foreground);border-radius:24px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem}
.dcard-accent h3{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}
.dcard-accent p{opacity:.9}

/* president */
.president .grid{display:grid;gap:2.5rem;align-items:center}
.president img{width:12rem;height:12rem;border-radius:9999px;object-fit:cover;margin:0 auto;border:4px solid var(--primary);box-shadow:var(--shadow-warm)}
.president h2{font-size:1.875rem;font-weight:700;margin:.5rem 0 1rem}
.president p{color:rgba(35,37,46,.8);line-height:1.7;text-align:justify}

/* footer */
.site-footer{background:var(--secondary);color:var(--secondary-foreground);padding:3rem 0}
.site-footer .container{display:flex;flex-direction:column;gap:2rem;align-items:center;justify-content:space-between}
.site-footer .name{font-weight:700;font-size:1.125rem}
.site-footer .sub{font-size:.875rem;opacity:.75;margin-top:.25rem}
.socials{display:flex;gap:.75rem}
.socials a{width:2.75rem;height:2.75rem;border-radius:9999px;background:rgba(254,253,249,.1);display:flex;align-items:center;justify-content:center;transition:all .2s}
.socials a:hover{background:var(--primary);color:var(--primary-foreground)}
.socials a svg{width:1.25rem;height:1.25rem}

@media (min-width:768px){
  .hero .content{padding:10rem 1.5rem}
  .hero h1{font-size:3.75rem}
  .hero p{font-size:1.25rem}
  .section-yellow h2{font-size:3rem}
  .intro h2{font-size:2.25rem}
  .activities .head h2{font-size:3rem}
  .activity.split{grid-template-columns:1fr 1fr}
  .activity.split .media{aspect-ratio:auto}
  .activity .body{padding:2.5rem}
  .activity h3{font-size:1.875rem}
  .donate .head h2{font-size:3.75rem}
  .donate-grid{grid-template-columns:1fr 1fr}
  .dcard-wide,.dcard-accent{flex-direction:row;align-items:center}
  .president .grid{grid-template-columns:200px 1fr}
  .site-footer .container{flex-direction:row}
  .activity .reverse{order:2}
  .full-activity{display:block}
  .full-media{aspect-ratio:21/9}
  .full-media img{height:100%!important;object-fit:cover!important}
}
@media (max-width:767px){
  .activity.split{grid-template-columns:1fr}
  .activity .media{aspect-ratio:4/3}
}