/* =========================================================
   YOUIN — Design tokens (replicam as variáveis do projeto Lovable)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 8%;

  --card: 0 0% 98%;
  --card-foreground: 0 0% 8%;

  --primary: 48 100% 50%;
  --primary-foreground: 0 0% 8%;

  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 20%;

  --muted: 0 0% 92%;
  --muted-foreground: 0 0% 45%;

  --border: 0 0% 90%;

  --dark: 0 0% 8%;
  --gray-light: 0 0% 96%;
  --gray-medium: 0 0% 60%;

  --radius: 0.5rem;

  --gradient-hero: linear-gradient(135deg, hsl(0 0% 8%) 0%, hsl(0 0% 15%) 100%);
  --gradient-yellow: linear-gradient(135deg, hsl(48 100% 50%) 0%, hsl(45 100% 55%) 100%);

  --shadow-card: 0 4px 20px -4px hsl(0 0% 0% / 0.1);
  --shadow-elevated: 0 8px 30px -8px hsl(0 0% 0% / 0.15);
  --shadow-yellow: 0 4px 20px -4px hsl(48 100% 50% / 0.4);

  --container-width: 1280px;
}

/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  overflow-x: hidden;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.youin-container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 1280px) {
  .youin-container { padding-inline: 1.5rem; }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* =========================================================
   Botões
   ========================================================= */
.youin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: calc(var(--radius) + 2px);
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.youin-btn svg { width: 1.1em; height: 1.1em; }
.youin-btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.youin-btn--primary:hover { box-shadow: var(--shadow-yellow); transform: translateY(-2px); }
.youin-btn--dark { background: hsl(var(--dark)); color: hsl(var(--background)); }
.youin-btn--dark:hover { opacity: .9; transform: translateY(-2px); }
.youin-btn--hero { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.youin-btn--hero:hover { box-shadow: var(--shadow-yellow); transform: translateY(-2px); }
.youin-btn--hero-outline { background: transparent; border-color: hsl(var(--background) / .3); color: hsl(var(--background)); }
.youin-btn--hero-outline:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.youin-btn--full { width: 100%; }

/* =========================================================
   Header (Personalizador)
   ========================================================= */
.youin-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: hsl(var(--background) / .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
}

/* A barra de admin do WordPress também é fixed no topo — sem isto ficava por cima do header */
body.admin-bar .youin-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .youin-header { top: 46px; }
}
.youin-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}
.youin-logo { display: flex; align-items: center; gap: .5rem; }
.youin-logo-link { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.youin-logo img,
.youin-logo svg,
.youin-logo .custom-logo,
.youin-logo__custom {
  height: 44px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}
.youin-logo-text { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--foreground)); }
.youin-logo-text em { font-style: normal; color: hsl(var(--primary)); }

/* Logótipo do rodapé — mais pequeno por defeito, sobre fundo escuro */
.youin-footer .youin-logo img,
.youin-footer .youin-logo svg,
.youin-footer .youin-logo .custom-logo,
.youin-footer .youin-logo__custom { height: 36px; }
.youin-footer .youin-logo-text { color: hsl(var(--background)); }

.youin-nav { display: none; }
.youin-nav__list { display: flex; align-items: center; gap: 2rem; }
.youin-nav__list a {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  transition: color .2s ease;
}
.youin-nav__list a:hover,
.youin-nav__list li.current-menu-item > a { color: hsl(var(--foreground)); }

.youin-header__cta { display: none; }

.youin-menu-toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: .5rem;
  margin-left: auto;
}
.youin-menu-toggle svg { width: 24px; height: 24px; }

.youin-mobile-nav {
  display: none;
  padding: 1.5rem 0;
  border-top: 1px solid hsl(var(--border));
}
.youin-mobile-nav.is-open { display: block; }
.youin-mobile-nav__list { display: flex; flex-direction: column; gap: 1rem; }
.youin-mobile-nav__list a { color: hsl(var(--muted-foreground)); font-weight: 500; padding: .5rem 0; display: block; }

@media (min-width: 768px) {
  .youin-nav { display: block; }
  .youin-header__cta { display: block; }
  .youin-menu-toggle { display: none; }
  .youin-mobile-nav { display: none !important; }
}

body { padding-top: 5rem; }

/* =========================================================
   Footer (Personalizador)
   ========================================================= */
.youin-footer { background: hsl(var(--dark)); padding: 4rem 0; }
.youin-footer__grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .youin-footer__grid { grid-template-columns: repeat(4, 1fr); }
  .youin-footer__brand { grid-column: span 2; }
}
.youin-footer h4 { color: hsl(var(--background)); font-size: 1rem; margin-bottom: 1rem; }
.youin-footer__links-list { display: flex; flex-direction: column; gap: .5rem; }
.youin-footer__links-list a { color: hsl(var(--background) / .6); transition: color .2s ease; }
.youin-footer__links-list a:hover { color: hsl(var(--primary)); }
.youin-footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--background) / .1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) { .youin-footer__bottom { flex-direction: row; } }

/* Placeholder visível só a quem pode editar o tema, quando ainda não há widgets */
.youin-footer__placeholder {
  color: hsl(var(--background) / .5);
  font-size: .8rem;
  font-style: italic;
  border: 1px dashed hsl(var(--background) / .2);
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin-top: 1rem;
  max-width: 28rem;
}

/* =========================================================
   Conteúdo da widget area do rodapé — gerível via blocos Gutenberg
   (Aparência > Widgets > "Rodapé — Marca & Contactos")
   ========================================================= */
.youin-footer__widgets { margin-top: 1rem; max-width: 28rem; }
.youin-footer__widget { margin-bottom: 1rem; }
.youin-footer__widget:last-child { margin-bottom: 0; }
.youin-footer__widget h4 { font-size: .95rem; margin-bottom: .5rem; }

/* Menu de links legais na barra inferior (Aparência > Menus) */
.youin-footer__bottom-links-list { display: flex; gap: 1.5rem; }
.youin-footer__bottom-links-list a { color: hsl(var(--background) / .4); font-size: .875rem; }
.youin-footer__bottom-links-list a:hover { color: hsl(var(--primary)); }

/* Tipografia/blocos core dentro do rodapé escuro (parágrafo, título, botões, listas, links) */
.youin-footer p,
.youin-footer li,
.youin-footer .wp-block-paragraph { color: hsl(var(--background) / .6); font-size: .875rem; }
.youin-footer h1, .youin-footer h2, .youin-footer h3,
.youin-footer h4, .youin-footer h5, .youin-footer h6 { color: hsl(var(--background)); }
.youin-footer a { color: hsl(var(--background) / .6); transition: color .2s ease; }
.youin-footer a:hover { color: hsl(var(--primary)); }
.youin-footer strong, .youin-footer b { color: hsl(var(--primary)); font-weight: 600; }
.youin-footer .wp-block-buttons { gap: .75rem; }
.youin-footer .wp-block-button__link {
  color: hsl(var(--background) / .8) !important;
  background: transparent !important;
  border: 1px solid hsl(var(--background) / .2) !important;
  padding: .4rem .9rem !important;
  font-size: .8rem !important;
  border-radius: 999px !important;
}
.youin-footer .wp-block-button__link:hover { color: hsl(var(--primary)) !important; border-color: hsl(var(--primary)) !important; }
.youin-footer .wp-block-social-links .wp-social-link { background: hsl(var(--background) / .1); }
.youin-footer .wp-block-social-links .wp-social-link a { color: hsl(var(--background)); }
.youin-footer .wp-block-social-links .wp-social-link:hover { background: hsl(var(--primary)); }

/* =========================================================
   Helpers de secção partilhados pelos blocos
   ========================================================= */
.youin-eyebrow {
  display: inline-block;
  color: hsl(var(--primary));
  font-weight: 600;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}
.youin-section-title { font-size: 1.9rem; margin-bottom: 1.5rem; }
.youin-section-title mark, .youin-title-accent {
  background: none; color: hsl(var(--primary));
}
.youin-section-lede { color: hsl(var(--muted-foreground)); font-size: 1.1rem; }
@media (min-width: 768px) { .youin-section-title { font-size: 3rem; } }

.youin-card-shadow { box-shadow: var(--shadow-card); }
.youin-elevated-shadow:hover { box-shadow: var(--shadow-elevated); }
.hero-gradient { background: var(--gradient-hero); }
.yellow-gradient { background: var(--gradient-yellow); }

@keyframes youin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes youin-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   Largura de conteúdo — Nenhum / Largo / Toda a largura
   Aplica-se a blocos nativos do WordPress (Parágrafo, Grupo, Imagem, Colunas...)
   dentro do conteúdo das páginas. As secções YouIn (Hero, Serviços...) já gerem
   a sua própria largura internamente e ficam de fora deste sistema (seletor
   [class*="youin-"] abaixo), para nunca ficarem espremidas por engano.
   ========================================================= */
.youin-entry-content {
  padding-block: 3rem;
  padding-inline: 1.5rem;
}
.youin-entry-content > * {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.youin-entry-content > .alignwide {
  max-width: 1280px;
}
.youin-entry-content > .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Secções YouIn (Hero, Serviços, Sobre...) sempre à largura total, sem depender do alinhamento escolhido */
.youin-entry-content > [class*="youin-"] {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.youin-entry-content > [class*="youin-"]:first-child { margin-top: -3rem; }
.youin-entry-content > [class*="youin-"]:last-child { margin-bottom: -3rem; }

/* Ficheiros de CSS específicos de cada bloco encontram-se em /blocks/*/style.css */