/*
Theme Name: Become Arquitetura
Theme URI: https://become.pt
Author: Become Arquitetura
Author URI: https://become.pt
Description: Tema minimalista e brutalista em fundo preto para ateliers de arquitetura. Inclui hero de página inicial, portfólio (custom post type "Projeto"), páginas de contactos e agendamento, e rodapé com logo e contactos.
Version: 1.1.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: become
*/

/* ============================ RESET / BASE ============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --bg:#000000;
  --surface:#171717;       /* neutral-900 */
  --surface-2:#262626;     /* neutral-800 */
  --line:#262626;
  --text:#ffffff;
  --muted:#a3a3a3;         /* neutral-400 */
  --muted-2:#737373;       /* neutral-500 */
  --sidebar-w:80px;
  --header-h:80px;
}
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; transition:color .25s ease; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

.container{ max-width:1200px; margin:0 auto; }
.uppercase{ text-transform:uppercase; }

/* ============================ HEADER ============================ */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  background:#000; color:#fff; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; border-bottom:1px solid var(--line);
}
.site-header .logo img{ height:40px; width:auto; object-fit:contain; }
.main-nav ul{ display:flex; align-items:center; gap:32px; }
.main-nav a{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  color:var(--muted); padding:8px 0; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a{
  color:#fff; border-color:#fff;
}

/* Hamburger */
.menu-toggle{
  display:none; background:none; border:0; color:#fff; cursor:pointer; padding:8px;
}
.menu-toggle svg{ width:26px; height:26px; }

/* Mobile menu overlay */
.mobile-menu{
  position:fixed; inset:var(--header-h) 0 0 0; background:#000; z-index:40;
  transform:translateX(100%); transition:transform .3s ease; padding:24px;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu ul{ display:flex; flex-direction:column; }
.mobile-menu a{
  font-size:18px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  padding:18px 0; border-bottom:1px solid var(--line); display:block;
}
.mobile-menu a:hover{ color:#fff; }
.mobile-social{ display:flex; gap:24px; margin-top:24px; color:var(--muted-2); }
.mobile-social a:hover{ color:#fff; }

/* ============================ SIDEBAR ============================ */
.site-sidebar{
  position:fixed; left:0; top:var(--header-h); bottom:0; width:var(--sidebar-w);
  background:#000; border-right:1px solid #0a0a0a; z-index:30;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:32px 0;
}
.sidebar-vertical{
  writing-mode:vertical-lr; transform:rotate(180deg);
  font-size:12px; letter-spacing:.3em; color:var(--muted-2);
  text-transform:uppercase; font-weight:300; user-select:none;
}
.sidebar-social{ display:flex; flex-direction:column; gap:20px; color:var(--muted-2); }
.sidebar-social a:hover{ color:#fff; }
.sidebar-social svg{ width:20px; height:20px; }

/* ============================ MAIN ============================ */
.site-main{
  margin-left:var(--sidebar-w); margin-top:var(--header-h);
  min-height:calc(100vh - var(--header-h)); display:flex; flex-direction:column;
}
.page-wrap{ padding:48px 24px; }
@media(min-width:768px){ .page-wrap{ padding:48px 64px; } }

/* Section heading block */
.section-head{ max-width:760px; margin-bottom:48px; }
.overline{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.section-head h1, .section-head h2{
  font-size:clamp(30px,5vw,52px); letter-spacing:-.02em; font-weight:300;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.rule{ width:80px; height:4px; background:#fff; margin-bottom:24px; }
.section-head p{ color:var(--muted); font-weight:300; max-width:640px; }

/* ============================ HERO ============================ */
.hero{ position:relative; width:100%; height:calc(100vh - var(--header-h)); overflow:hidden; background:#000; }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hero .overline-top{
  position:absolute; top:48px; left:50%; transform:translateX(-50%); width:100%; padding:0 24px;
  text-align:center; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:#d4d4d4; z-index:10;
}
.hero .hero-content{
  position:absolute; bottom:64px; right:24px; max-width:440px; z-index:10;
  display:flex; flex-direction:column; align-items:flex-end; text-align:right; color:#fff;
}
@media(min-width:768px){ .hero .hero-content{ right:64px; bottom:80px; } }
.hero .hero-content p{ font-size:14px; font-weight:300; color:#e5e5e5; margin-bottom:24px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end; }

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  padding:16px 24px; border:1px solid #fff; transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.btn-solid{ background:#fff; color:#000; }
.btn-solid:hover{ background:#e5e5e5; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; padding:20px; }

/* ============================ PORTFOLIO GRID ============================ */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:48px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.filters button{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:12px 20px; cursor:pointer;
  background:transparent; color:var(--muted); border:1px solid var(--surface-2); transition:all .2s ease;
}
.filters button:hover, .filters button.active{ background:#fff; color:#000; border-color:#fff; }

.project-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:768px){ .project-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.project-card{ border:1px solid var(--line); background:var(--surface); overflow:hidden; cursor:pointer; transition:box-shadow .3s ease; }
.project-card:hover{ box-shadow:0 20px 40px rgba(0,0,0,.6); }
.project-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); }
.project-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.project-card:hover .thumb img{ transform:scale(1.05); }
.project-card .body{ padding:20px; border-top:1px solid var(--line); }
.project-card .meta{ display:flex; gap:8px; color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:8px; }
.project-card h3{ font-size:20px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.project-card .desc{ color:var(--muted); font-size:13px; font-weight:300; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.project-card .more{ margin-top:16px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#fff; display:inline-flex; gap:6px; }

/* ============================ SINGLE PROJECT ============================ */
.single-project{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); }
@media(min-width:900px){ .single-project{ grid-template-columns:1fr 1fr; } }
.single-project .media{ background:var(--surface-2); min-height:300px; }
.single-project .media img{ width:100%; height:100%; object-fit:cover; }
.single-project .info{ padding:40px; }
.single-project .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin:24px 0; }
.single-project .stats span.label{ font-size:8px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); display:block; }
.single-project .stats span.value{ font-size:12px; text-transform:uppercase; font-weight:500; margin-top:4px; display:block; }
.concept{ font-style:italic; color:#d4d4d4; background:var(--surface); padding:12px; border-left:2px solid #fff; margin-top:8px; }
.materials{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.materials span{ font-size:9px; text-transform:uppercase; background:var(--surface-2); color:#e5e5e5; padding:4px 10px; letter-spacing:.1em; border:1px solid var(--surface-2); }

/* ============================ FORMS ============================ */
.form-grid{ display:grid; grid-template-columns:1fr; gap:48px; }
@media(min-width:1024px){ .form-grid{ grid-template-columns:7fr 5fr; gap:64px; } }
.field{ margin-bottom:24px; }
.field label{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--muted); display:block; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; height:44px; background:var(--surface); border:1px solid var(--surface-2);
  color:#fff; padding:0 14px; font-size:14px; font-family:inherit; outline:none; transition:border-color .2s ease;
}
.field textarea{ height:auto; min-height:120px; padding:12px 14px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:#fff; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:640px){ .field-row{ grid-template-columns:1fr; } }

/* Calendar widget */
.cal{ border:1px solid var(--surface-2); background:var(--surface); padding:16px; max-width:380px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-title{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.cal-nav{ width:32px; height:32px; background:transparent; border:1px solid var(--surface-2); color:#fff; cursor:pointer; font-size:16px; line-height:1; transition:all .2s ease; }
.cal-nav:hover{ background:#fff; color:#000; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-week{ margin-bottom:6px; }
.cal-wd{ text-align:center; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding:4px 0; }
.cal-day{ aspect-ratio:1; background:transparent; border:0; color:var(--muted); font-size:13px; cursor:pointer; transition:all .15s ease; }
.cal-day:hover{ background:var(--surface-2); color:#fff; }
.cal-day.is-disabled{ color:#3f3f3f; cursor:not-allowed; }
.cal-day.is-selected{ background:#fff; color:#000; font-weight:600; }
#becomeDateDisplay{ cursor:default; }
.agendamento-page .cal{ margin-left:auto; margin-right:auto; }
.agendamento-page .btn-block{ max-width:380px; margin-left:auto; margin-right:auto; }

.info-card{ border:1px solid var(--surface-2); background:var(--surface); padding:24px; margin-bottom:32px; }
.info-card h4{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#e5e5e5; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.info-card p{ color:var(--muted); font-size:14px; font-weight:300; display:flex; gap:12px; margin-bottom:12px; }
.info-row{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:6px 0; font-size:13px; color:var(--muted); }
.note-card{ background:#0a0a0a; border:1px solid var(--line); padding:24px; }
.note-card p{ color:var(--muted); font-size:13px; font-weight:300; font-style:italic; }

/* ============================ FOOTER ============================ */
.site-footer{ background:#000; color:#fff; border-top:1px solid var(--line); padding:24px; margin-top:auto; }
.footer-inner{ width:100%; display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:space-between; }
@media(min-width:768px){ .footer-inner{ flex-direction:row; } }
.footer-logo{ padding-left:0; }
@media(min-width:768px){ .footer-logo{ padding-left:32px; } }
.footer-logo img{ height:40px; width:auto; }
.footer-contacts{ display:flex; flex-direction:column; gap:16px; font-size:11px; font-weight:300; color:var(--muted); }
@media(min-width:640px){ .footer-contacts{ flex-direction:row; gap:32px; } }
.footer-contacts span{ display:flex; align-items:center; gap:8px; }
.footer-bottom{ width:100%; border-top:1px solid var(--line); margin-top:20px; padding-top:16px; text-align:center; font-size:10px; text-transform:uppercase; color:var(--muted); }

/* ============================ ALERTS ============================ */
.alert{ padding:16px; border:1px solid var(--surface-2); background:var(--surface); margin-bottom:24px; font-size:13px; }
.alert.success{ border-color:#10b981; color:#6ee7b7; }

/* ============================ RESPONSIVE ============================ */
@media(max-width:767px){
  :root{ --sidebar-w:0px; --header-h:64px; }
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .site-sidebar{ display:none; }
  .site-header .logo img{ height:40px; }
}